:root{
  --brand:#0b4aa2; --brand2:#0f6bdc; --ink:#172033; --muted:#65758b; --bg:#eef3fb;
  --paper:#fff; --shadow:0 18px 45px rgba(15,35,75,.22);
}
*{box-sizing:border-box}html,body{height:100%;overflow-x:hidden}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top,#ffffff 0%,var(--bg) 48%,#dde7f6 100%);color:var(--ink)}
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.top-inner{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px}.brand{display:flex;align-items:center;gap:12px}.logo{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--brand);display:grid;place-items:center;font-weight:800}.brand h1{font-size:18px;margin:0}.brand small{display:block;opacity:.85;margin-top:2px}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.btn{border:0;border-radius:999px;padding:10px 15px;background:#fff;color:var(--brand);font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12)}.btn.ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35)}
.hero{text-align:center;padding:24px 15px 12px}.hero h2{margin:0;font-size:clamp(22px,3vw,36px);color:var(--brand)}.hero p{margin:8px auto 0;color:var(--muted);max-width:720px;line-height:1.55}
.stage{max-width:1180px;margin:0 auto;padding:12px 15px 26px;display:grid;grid-template-columns:1fr;gap:16px}.viewer{position:relative;display:flex;align-items:center;justify-content:center;min-height:64vh}.book{width:min(96vw,940px);height:min(72vh,670px);display:grid;place-items:center;perspective:1800px}.spread{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 22px 35px rgba(19,42,89,.25))}.page{position:absolute;max-width:100%;max-height:100%;height:100%;width:auto;border-radius:8px;background:#fff;box-shadow:var(--shadow);object-fit:contain;transition:transform .42s ease,opacity .22s ease}.page.current{opacity:1;transform:rotateY(0) scale(1)}.page.next{opacity:0;transform:rotateY(-16deg) scale(.985)}.page.prev{opacity:0;transform:rotateY(16deg) scale(.985)}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(11,74,162,.92);color:#fff;font-size:28px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.2)}.nav:hover{background:#083b82}.prevBtn{left:10px}.nextBtn{right:10px}.controls{max-width:940px;margin:8px auto 0;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(130,150,180,.26);border-radius:18px;padding:12px;box-shadow:0 12px 35px rgba(37,62,105,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pager{font-weight:800;color:var(--brand)}.mini-actions{display:flex;gap:8px;flex-wrap:wrap}.mini-actions button{border:1px solid #d5ddeb;background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;color:#233;cursor:pointer}.mini-actions button:hover{border-color:var(--brand);color:var(--brand)}
.footer{text-align:center;color:var(--muted);padding:24px 15px 38px}
/* Safe zoom: besarkan halaman tanpa pecahkan layout atau hasilkan horizontal scroll */
.zoomed .hero{display:none}
.zoomed .stage{max-width:100%;padding:12px 10px 26px}
.zoomed .viewer{min-height:calc(100vh - 170px);align-items:center;overflow:hidden}
.zoomed .book{width:min(96vw,980px);height:calc(100vh - 235px);max-height:900px;min-height:520px}
.zoomed .spread{width:100%;height:100%;overflow:hidden}
.zoomed .page{max-width:100%;max-height:100%;height:100%;width:auto;object-fit:contain}
.zoomed .controls{position:sticky;bottom:10px;z-index:15}
.hide{display:none!important}
@media(max-width:700px){.top-inner{align-items:flex-start;flex-direction:column}.actions{width:100%;justify-content:flex-start}.viewer{min-height:58vh}.book{height:58vh}.nav{width:42px;height:42px;font-size:24px}.prevBtn{left:2px}.nextBtn{right:2px}.controls{border-radius:14px}.hero{padding-top:18px}}
@media(max-width:430px){.btn{padding:9px 12px;font-size:13px}.brand h1{font-size:16px}.hero h2{font-size:22px}.viewer{min-height:52vh}.book{height:52vh}}

/* Page turn effect */
.spread{transform-style:preserve-3d;}
.flip-layer{z-index:5;opacity:0;pointer-events:none;backface-visibility:hidden;transform-style:preserve-3d;}
.page.current{z-index:2;}
.book.turning-next .flip-layer{opacity:1;transform-origin:left center;animation:turnNext .72s cubic-bezier(.25,.75,.25,1) forwards;}
.book.turning-prev .flip-layer{opacity:1;transform-origin:right center;animation:turnPrev .72s cubic-bezier(.25,.75,.25,1) forwards;}
.book.turning-next .page.current{animation:newPageIn .72s ease forwards;}
.book.turning-prev .page.current{animation:newPageIn .72s ease forwards;}
@keyframes turnNext{
  0%{transform:rotateY(0deg) translateX(0);box-shadow:0 18px 45px rgba(15,35,75,.25);}
  45%{filter:brightness(.94);}
  100%{transform:rotateY(-112deg) translateX(-2%);opacity:.18;box-shadow:-18px 22px 50px rgba(0,0,0,.28);}
}
@keyframes turnPrev{
  0%{transform:rotateY(0deg) translateX(0);box-shadow:0 18px 45px rgba(15,35,75,.25);}
  45%{filter:brightness(.94);}
  100%{transform:rotateY(112deg) translateX(2%);opacity:.18;box-shadow:18px 22px 50px rgba(0,0,0,.28);}
}
@keyframes newPageIn{0%{opacity:.55;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
@media(max-width:700px){.book.turning-next .flip-layer{animation-duration:.55s}.book.turning-prev .flip-layer{animation-duration:.55s}}

@media(max-width:700px){
  .zoomed .viewer{min-height:calc(100vh - 150px)}
  .zoomed .book{height:calc(100vh - 210px);min-height:420px;width:96vw}
  .zoomed .controls{bottom:6px}
}
@media(max-width:430px){
  .zoomed .book{height:calc(100vh - 195px);min-height:360px;width:96vw}
}