:root{
  /* Tema cream/ivory */
  --bg:#f7f3ea;
  --panel:#ffffffcc;
  --ink:#2b2b2b;
  --muted:#6f6a5a;
  --gold:#b08b1a;             /* aksen emas lembut */
  --gold-2:#d8c07a;

  --book-w: min(92vw, 1200px);
  --ratio: .70;               /* desktop */
  --shadow: 0 22px 60px rgba(68,61,40,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 700px at 50% -10%, #fff7e6 0, #f7f3ea 60%),
    linear-gradient(#fbf8ef,#f7f3ea);
}

/* ===== Header ===== */
.toolbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;      /* kiri, tengah, kanan */
  align-items:center;
  gap:.75rem;
  padding:.60rem 1rem;
  position:sticky; top:0; z-index:20;
  backdrop-filter: saturate(140%) blur(8px);
}
.glass{ background:var(--panel); border-bottom:1px solid #e8e0c9 }

.hdr-left{display:flex; align-items:center}
.logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:#fff4dc;            /* bisa dihapus kalau mau transparan */
  border:1px solid #e8dab1;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  overflow:hidden;
}
.logo img {
  width:100%;
  height:100%;
  object-fit:contain;            /* jaga proporsi logo */
}

.hdr-center{display:grid; place-items:center}
.brand{
  font-weight:800; letter-spacing:.2px; color:#5b5139; text-align:center;
  font-size:1.05rem;
}

.hdr-right{display:flex; justify-content:flex-end; align-items:center; gap:.5rem; flex-wrap:wrap}

.icon{
  background:#fff; color:#4a4332; border:1px solid #e7dec9;
  padding:.6rem .8rem; border-radius:.7rem; cursor:pointer; line-height:1; min-width:42px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.icon:hover{background:#fffdf7}
.mini{background:#fff; color:#4a4332; border:1px solid #e7dec9; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer}
.sep{width:1px;height:28px;background:#e7dec9;margin:0 .25rem}
#zoomRange{width:140px; accent-color: var(--gold)}
.pill{
  background:#fff; border:1px solid #eadfbe; padding:.35rem .7rem; border-radius:999px; font-size:13px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* progress */
.progress-wrap{height:4px; background:#efe7cf; border-top:1px solid #eadfbe; border-bottom:1px solid #eadfbe}
.progress{height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width .2s ease}

/* ===== Stage ===== */
#stage{display:grid;place-items:center;padding:18px;gap:14px}

.book{
  position:relative; width:var(--book-w); height:calc(var(--book-w)*var(--ratio));
  background:#fffdf7; border:1px solid #eadfbe; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  perspective:2000px; transform-style:preserve-3d;
}
.book.opening{ animation: bookOpen 600ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes bookOpen{from{transform:scale(.985) rotateX(4deg)} to{transform:scale(1) rotateX(0)}}

/* tap zones (HP) */
.tap-zone{ position:absolute; top:0; bottom:0; width:36%; background:transparent; border:none; outline:none; z-index:5; }
#tapLeft{ left:0 }  #tapRight{ right:0 }

/* spread & pages */
.spread{
  position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:0; transform-style:preserve-3d;
}
.book.single .spread{ grid-template-columns:1fr; }

.page{
  position:relative; background:#fff; overflow:hidden; transform-style:preserve-3d;
  box-shadow: inset 0 0 0 1px #f2ead3, 0 8px 22px rgba(0,0,0,.08);
}
.page img{width:100%; height:100%; object-fit:contain; display:block; background:#fff}

/* Flip animasi */
.page.flip-out{ animation: flipOut 680ms cubic-bezier(.2,.7,.2,1) forwards; transform-origin:left center; }
.page.flip-in { animation: flipIn  680ms cubic-bezier(.2,.7,.2,1) forwards; transform-origin:right center; }
@keyframes flipOut{0%{transform:rotateY(0)} 70%{transform:rotateY(-80deg)} 100%{transform:rotateY(-90deg)}}
@keyframes flipIn {0%{transform:rotateY(90deg)} 30%{transform:rotateY(10deg)} 100%{transform:rotateY(0)}}

.loader{position:absolute; inset:0; display:grid; place-items:center; gap:8px; color:#6f6a5a}
.spinner{width:26px;height:26px;border:3px solid #e9dfc7;border-top-color:#b08b1a;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* thumbs & bookmarks */
.below{width:var(--book-w); display:grid; grid-template-columns:1fr 260px; gap:12px}
.thumbs{
  width:100%; display:flex; gap:8px; overflow:auto; padding:8px; background:#fff; border:1px solid #eadfbe;
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.08); -webkit-overflow-scrolling: touch;
}
.thumb{flex:0 0 auto; width:110px; aspect-ratio:.7; background:#fffdf7; border:1px solid #eadfbe;
  border-radius:8px; overflow:hidden; cursor:pointer; position:relative}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb .num{position:absolute; bottom:4px; right:6px; font-size:11px; background:#fffaf0; color:#5b5139; border:1px solid #eadfbe; padding:2px 6px; border-radius:999px}
.thumb.active{outline:2px solid var(--gold)}
.thumb:hover{filter:brightness(1.03)}
.thumb .bm-pin{position:absolute; top:6px; left:6px; font-size:14px; color:#b08b1a; text-shadow:0 1px 2px #fff; display:none}
.thumb.bookmarked .bm-pin{display:block}

.bookmarks{background:#fff; border:1px solid #eadfbe; border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; box-shadow:0 12px 30px rgba(0,0,0,.06)}
.bm-head{display:flex; align-items:center; justify-content:space-between}
#bmList{list-style:none; padding:0; margin:0; display:grid; gap:6px; max-height:160px; overflow:auto}
#bmList li{display:flex; align-items:center; justify-content:space-between; gap:6px; background:#fffdf7; border:1px solid #eadfbe; border-radius:8px; padding:6px 8px; font-size:13px}
#bmList .go{background:#fff; color:#4a4332; border:1px solid #e7dec9; padding:.2rem .5rem; border-radius:.35rem; cursor:pointer}
#bmList .del{background:#fff6f2; color:#7a3d3d; border:1px solid #f0d0c6; padding:.2rem .5rem; border-radius:.35rem; cursor:pointer}

.foot{display:grid;place-items:center;color:var(--muted);padding:12px; gap:6px}
.copy{opacity:.9}

/* ===== Mobile tweaks ===== */
@media (max-width: 980px){
  :root{ --book-w: calc(100vw - 16px); --ratio: .78; }
  body{font-size:16px}
  .icon{padding:.75rem 1rem; min-width:44px}
  #zoomRange{width:120px}
  .thumb{width:92px}
  .below{grid-template-columns: 1fr}        /* bookmark pindah ke bawah */
  .toolbar{grid-template-columns: 1fr auto 1fr}
}

@media (max-width: 560px){
  :root{ --book-w: calc(100vw - 12px); --ratio: .82; }
  .thumb{width:86px}
}