:root{
  --stage-max-w: 1280px;
  --stage-max-h: 820px;
  --bg:#0b0f17;
  --muted:#9ca3af;
  --panel: rgba(10,14,22,.6);
  --border: rgba(255,255,255,.08);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,ui-sans-serif;
  color:#e5e7eb; background:var(--bg);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 50% 40%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 500px at 80% 70%, rgba(255,255,255,.06), transparent 55%),
    conic-gradient(from 180deg at 50% 50%, #0b0f17, #0e111a, #0b0f17 60%);
}

/* Bars */
.topbar,.bottombar{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.6rem .8rem; position:sticky; inset-inline:0;
  background:var(--panel); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  z-index: 10;
}
.bottombar{ border-top:1px solid var(--border); border-bottom:none; bottom:0 }
.dock{ display:flex; align-items:center; gap:.5rem }
.muted{ color:var(--muted) }
.btn{
  background:#111827; color:#e5e7eb; border:1px solid #374151;
  padding:.42rem .7rem; border-radius:.5rem; font-size:.92rem; cursor:pointer;
}
.btn:hover{ background:#1f2937 }
.page-input{ width:68px; background:#0f172a; border:1px solid #374151; color:#e5e7eb; border-radius:.5rem; padding:.35rem .5rem; }

/* Stage + Scroller */
.stage{
  position: relative;
  min-height:calc(100vh - 112px);
  padding:1rem;
}
.scroller{
  position:absolute; inset:0;
  overflow:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;           /* jangan chain ke body */
  touch-action: pan-x pan-y;
  scroll-behavior: auto;
  display:block;
  background: transparent;
}
.scroller.pan-enabled{ overflow:auto; }

/* Book is fully controlled by JS; no max constraints */
.book{
  position:relative;
  margin:0;
}

/* Reset PageFlip visuals */
#book .stf__wrapper, #book .stf__block, #book .stf__canvas, #book .stf__item,
#book .stf__page, #book .stf__page .stf__item, #book .stf__hard-page, #book .stf__soft-page,
#book .stf__hard, #book .stf__soft{
  background:transparent !important; border:none !important; box-shadow:none !important;
}
#book .stf__shadow{ opacity:.35 !important }

.page-holder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:transparent; }
.pdf-canvas{ width:100%; height:100%; image-rendering:auto; background:transparent; }

.progress{
  position:fixed; right:12px; bottom:12px; z-index:20;
  padding:.42rem .6rem; font-size:.86rem;
  background:rgba(12,16,24,.85); border:1px solid var(--border); border-radius:.5rem;
}

@media (max-width: 768px) and (orientation: portrait) {
  .flipbook-gutter { display: none !important; }
}

/* ==== Anti-terpotong saat zoom (tanpa ubah JS) ==== */

/* default (tetap) */
/* Center saat normal */
.scroller{
  display:flex;
  justify-content:center;   /* center horizontal */
  align-items:center;       /* center vertical */
}
/* Saat zoom, JS menambah .pan-enabled → panning aktif */
.scroller.pan-enabled{
  display:block;            /* biar panning jalan */
  /* overflow:auto; sudah ada di CSS Anda */
}
/* trik spacer agar bisa geser sampai pojok kanan & bawah */
.scroller.pan-enabled::after{
  content:"";
  position:absolute;
  right:-32px;           /* dorong area scroll melewati tepi kanan */
  bottom:-32px;          /* dorong area scroll melewati tepi bawah */
  width:32px;
  height:32px;
  pointer-events:none;   /* tidak mengganggu interaksi */
  background:transparent;
}