/* =====================================================
   RESET
   ===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    background:#F8FAFB;

    color:#1E293B;

    overflow-y:auto;
    overflow-x:hidden;

}

/* =====================================================
   COLORS
   ===================================================== */

:root{

    --primary:#0F5F6E;

    --secondary:#79CFC9;

    --white:#FFFFFF;

    --background:#F8FAFB;

    --text:#1E293B;

    --radius:18px;

    --shadow:0 12px 30px rgba(0,0,0,.08);

}

/* =====================================================
   APP
   ===================================================== */

#readerApp{

    width:100%;

    min-height:100vh;
    min-height:100dvh;

    position:relative;

    overflow:hidden;

}

/* =====================================================
   SCREEN
   ===================================================== */

.screen{

    display:none;

    width:100%;

    min-height:100vh;
    min-height:100dvh;

}

.screen.active{

    display:flex;

}

/* =====================================================
   COVER SCREEN
   ===================================================== */

#coverScreen{

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    background:var(--background);

    padding-bottom:120px;

}

/* =====================================================
   COVER IMAGE
   ===================================================== */

.cover-image{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px 24px 12px;

    position:relative;

    z-index:1;


}

.cover-image img{

    width:100%;

    max-width:420px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

/* =====================================================
   COVER CONTENT
   ===================================================== */

.cover-content{

    width:100%;

    max-width:420px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    padding:24px;

    padding-bottom:max(24px, env(safe-area-inset-bottom));

}

.brand-logo{

    width:90px;

}

.tagline{

    font-size:11px;

    color:#64748B;

}

/* =====================================================
   BUTTON
   ===================================================== */

button{

    cursor:pointer;

    border:none;

    outline:none;

    font-family:inherit;

}

.primary-btn{

    width:150px;

    padding:10px 16px;

    background:var(--primary);

    color:var(--white);

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    transition:.2s;

}

.primary-btn:hover{

    opacity:.9;

}

/* =====================================================
   READER
   ===================================================== */

#readerScreen{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;

    padding-bottom:calc(24px + env(safe-area-inset-bottom));

    background:var(--background);

}

.page-image{

    width:100%;

    max-width:500px;

    max-height:65vh;

    object-fit:contain;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.page-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex:1;

}

/* =====================================================
   PAGE FLIP
   ===================================================== */

.flipbook{

    display:grid;

    position:relative;

    width:100%;

    max-width:500px;

    perspective:1800px;

}

/* =====================================================
   GLOW SEMASA AUDIO MAIN
   ===================================================== */

.flipbook::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:26px;

    pointer-events:none;

    opacity:0;

    z-index:0;

    transition:opacity .4s ease;

}

.flipbook.audio-playing::before{

    opacity:1;

    animation:audioGlowPulse 1.8s ease-in-out infinite;

}

@keyframes audioGlowPulse{

    0%,100%{

        box-shadow:0 0 14px 2px rgba(121,207,201,.35);

    }

    50%{

        box-shadow:0 0 34px 10px rgba(121,207,201,.7);

    }

}

.page-layer{

    grid-area:1 / 1;

    position:relative;

    z-index:1;

    backface-visibility:hidden;

    will-change:transform,filter,opacity;

}

.page-layer#pageImage{

    z-index:2;

}

.page-layer.flip-next{

    transform-origin:left center;

    animation:flipNext .46s cubic-bezier(.4,0,.2,1) forwards;

    z-index:3;

}

.page-layer.flip-prev{

    transform-origin:right center;

    animation:flipPrev .46s cubic-bezier(.4,0,.2,1) forwards;

    z-index:3;

}

@keyframes flipNext{

    0%{

        transform:rotateY(0deg) scale(1);

        filter:brightness(1);

        box-shadow:var(--shadow);

    }

    40%{

        transform:rotateY(-55deg) scale(.97);

        filter:brightness(.82);

        box-shadow:20px 12px 30px rgba(0,0,0,.22);

    }

    100%{

        transform:rotateY(-96deg) scale(.94);

        filter:brightness(.55);

        opacity:0;

        box-shadow:none;

    }

}

@keyframes flipPrev{

    0%{

        transform:rotateY(0deg) scale(1);

        filter:brightness(1);

        box-shadow:var(--shadow);

    }

    40%{

        transform:rotateY(55deg) scale(.97);

        filter:brightness(.82);

        box-shadow:-20px 12px 30px rgba(0,0,0,.22);

    }

    100%{

        transform:rotateY(96deg) scale(.94);

        filter:brightness(.55);

        opacity:0;

        box-shadow:none;

    }

}

.reader-navigation{

    width:100%;
    max-width:420px;

    display:grid;
    grid-template-columns:32px 1fr 32px;

    align-items:center;

    margin-top:18px;

}

.nav-btn{

    background:none;

    border:none;

    color:var(--primary);

    font-size:34px;

    width:36px;

    height:36px;

    padding:0;

    cursor:pointer;

}

.nav-btn:disabled{

    opacity:.25;

    cursor:default;

}

.nav-arrow{

    font-size:32px;

    color:var(--primary);

    cursor:pointer;

    user-select:none;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.2s;

}

.nav-arrow:hover{

    opacity:.6;

}

.page-number{

    text-align:center;

    font-size:16px;

    font-weight:600;

    color:#1E293B;

}

.audio-button{

    background:none;

    border:none;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    padding:4px 8px;

}

.icon-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    background:none;

    border:none;

    color:var(--primary);

    cursor:pointer;

}

.icon-btn svg{

    width:24px;

    height:24px;

}

/* =====================================================
   TOP BAR
   ===================================================== */

.top-bar{

    width:100%;

    max-width:500px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8px;

    margin-bottom:18px;

}

.top-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.icon-btn{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:none;

    border:none;

    color:var(--primary);

    cursor:pointer;

    border-radius:12px;

    transition:.2s;

}

.icon-btn:hover{

    background:rgba(15,95,110,.08);

}

.icon-btn svg{

    width:26px;

    height:26px;

}

/* =====================================================
   END SCREEN
   ===================================================== */

#endScreen{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

    text-align:center;

    background:var(--background);

}

#endScreen h2{

    color:var(--primary);

    margin-bottom:12px;

}

#endScreen p{

    color:#64748B;

    margin-bottom:24px;

}

/* =====================================================
   PRODUCTS
   ===================================================== */

.product-list{

    width:100%;

    max-width:900px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    gap:18px;

    margin-top:24px;

}

.product-card{

    background:var(--white);

    border-radius:18px;

    padding:16px;

    box-shadow:var(--shadow);

    text-align:center;

}

.product-card img{

    width:100%;

    border-radius:12px;

    margin-bottom:10px;

}

.product-card h3{

    font-size:15px;

    margin-bottom:8px;

}

.product-card a{

    display:inline-block;

    margin-top:8px;

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

}

/* =====================================================
   LANDSCAPE WARNING
   ===================================================== */

#landscapeWarning{

    display:none;

    position:fixed;

    inset:0;

    background:white;

    z-index:9999;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

}

/* Amaran ini hanya aktif jika UI.portraitOnly = true dalam config.js */
@media (orientation:landscape) and (max-height:500px){

    body.portrait-lock #landscapeWarning{

        display:flex;

    }

}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:600px){

    .cover-content{

        padding:20px;

    }

    .primary-btn{

        width:100%;

    }

    .page-image{

        max-width:100%;

    }

}

/* =====================================================
   ACTION BUTTONS
   ===================================================== */

.action-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.resume-link{

    margin-top:18px;

    text-align:center;

    color:var(--primary);

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.resume-link:hover{

    opacity:.75;

}

/* =====================================================
   END ACTION
   ===================================================== */

.end-action{

    margin-top:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

}

.end-action p{

    color:#64748B;

    text-align:center;

}

.end-action a{

    text-decoration:none;

    text-align:center;

}

#endScreen a.primary-btn{

    text-decoration:none;

}

/* =====================================================
   MOBILE FIX
   ===================================================== */

@media (max-width:600px){

    .cover-image img{

        max-width:360px;

    }

    .cover-image{

        padding:16px 16px 8px;

    }

}

@media (max-width:600px){

    .page-image{

        max-height:60vh;

        object-fit:contain;

    }

}

/* =====================================================
   TABLE OF CONTENTS
   ===================================================== */

.toc-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    display:flex;

    justify-content:flex-start;

    z-index:999;

}

.toc-panel{

    width:300px;

    max-width:85%;

    height:100%;

    background:#fff;

    padding:24px;

    box-sizing:border-box;

    overflow-y:auto;

    box-shadow:4px 0 16px rgba(0,0,0,.2);

}

.toc-panel h2{

    margin-top:0;

    font-size:20px;

}

.toc-item{

    width:100%;

    padding:12px 0;

    border:none;

    background:none;

    text-align:left;

    font-size:16px;

    font-family:inherit;

    color:#1E293B !important;

    cursor:pointer;

    border-bottom:1px solid #eee;

    -webkit-appearance:none;

    appearance:none;

}

.toc-item.active{

    color:#0F5F6E;

    font-weight:700;

}

.toc-item.active::before{

    content:"▶ ";

}

.toc-item:hover{

    color:#0F5F6E;

}

.hidden{

    display:none !important;

}

/* =====================================================
   QUICK MENU
   ===================================================== */

.quick-menu{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

    margin:28px 0 18px;

}

.quick-item{

    flex:1;

    background:none;

    border:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    color:#1E293B;

    cursor:pointer;

    transition:.2s;

}

.quick-item:hover{

    color:var(--primary);

}

.quick-icon{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    border-radius:50%;

    transition:.25s;

}

.quick-item.active .quick-icon{

    background:#79CFC9;

    color:#0F5F6E;

    border:2px solid #fff;

    box-shadow:0 4px 12px rgba(15,95,110,.18);

    transform:scale(1.08);

}

.quick-icon svg{

    width:30px;

    height:30px;

}

.quick-item span:last-child{

    font-size:12px;

    font-weight:600;

    text-align:center;

}

.brand-logo{

    width:100px;

    margin-top:20px;

}

.tagline{

    margin-top:4px;

    font-size:12px;

    color:#64748B;

    text-align:center;

}

/* =====================================================
   LISTEN MODE
   ===================================================== */

.quick-item.active{

    color:var(--primary);

}

/* =====================================================
   MOBILE ONLY
   ===================================================== */

@media (max-width:600px){

    .book-title{

        display:none;

    }

}

/* =====================================================
   END SCREEN
   ===================================================== */

.end-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:22px;

    padding:32px 24px;

}

.end-message{

    max-width:420px;

    margin:0 auto;

    color:#6B7280;

    font-size:16px;

    line-height:1.7;

}

.end-brand{

    margin-top:40px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.end-brand .brand-logo{

    width:155px;

    opacity:.95;

}

.end-brand .tagline{

    margin:0;

    font-size:14px;

    color:#6B7280;

    letter-spacing:.3px;

}

/* =====================================================
   SIGNATURE
   ===================================================== */

.reader-divider{

    width:80px;

    height:1px;

    background:#DCE5E7;

    margin:20px auto 16px;

}

.reader-signature{

    text-align:center;

    color:#8A9AA5;

    font-size:11px;

    opacity:.75;

    line-height:1.7;

    letter-spacing:.3px;

}

.reader-signature span{

    font-size:11px;

    color:#A5B3BC;

}

/* =====================================================
   END SCREEN BUTTON
   ===================================================== */

#endScreen .primary-btn{

    width:auto;

    min-width:300px;

    padding:16px 32px;

    white-space:nowrap;

    border-radius:14px;

}

/* =====================================================
   SECONDARY BUTTON
   ===================================================== */

.secondary-btn{

    width:auto;

    min-width:220px;

    padding:14px 28px;

    background:#FFFFFF;

    color:#0F5F6E;

    border:1px solid #D7E5E8;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    box-shadow:0 6px 18px rgba(15,95,110,.08);

    transition:.25s;

}

.secondary-btn:hover{

    background:#F8FAFB;

}

#endScreen a.primary-btn{

    width:auto;

    min-width:300px;

    padding:16px 32px;

    white-space:nowrap;

}

.icon-btn svg{

pointer-events:none;

}

.quick-icon svg{

pointer-events:none;

}