/* ==========================================================
   RUANG BACA — tampilan flipbook
   ========================================================== */
:root{
  --hijau-950:#04261e;--hijau-900:#073a2d;--hijau-800:#0b503e;--hijau-700:#0f6850;
  --emas-500:#d2a12e;--emas-300:#ecd07f;
  --font-judul:'Fraunces',Georgia,serif;
  --font-isi:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --kaca:rgba(10,32,26,.72);--garis-kaca:rgba(255,255,255,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-isi);color:#fff;overflow:hidden;display:flex;flex-direction:column;
  -webkit-user-select:none;user-select:none;
  background:
    radial-gradient(900px 620px at 50% 42%,#15443a 0%,#0a241d 55%,#040f0c 100%);
}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 46px)}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--emas-500);outline-offset:2px;border-radius:8px}

/* ---------- Pemuat ---------- */
.pemuat{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  background:radial-gradient(700px 500px at 50% 45%,#0f3a30,#040f0c);transition:opacity .6s var(--ease),visibility .6s
}
.pemuat.selesai{opacity:0;visibility:hidden}
.pemuat p{font-family:var(--font-judul);font-size:1.15rem;color:rgba(255,255,255,.85)}
.pemuat small{display:block;font-family:var(--font-isi);font-size:.8rem;color:rgba(255,255,255,.5);margin-top:.2rem;text-align:center}
.pemuat .judul-muat{max-width:80vw;text-align:center}

/* ---------- Bilah atas ---------- */
.bar-baca{
  position:relative;z-index:20;flex:none;display:flex;align-items:center;gap:.8rem;padding:.65rem .9rem;
  background:var(--kaca);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--garis-kaca);
  animation:turun .7s var(--ease) both
}
@keyframes turun{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
.tbl-kaca{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:40px;height:40px;padding:0 .9rem;border-radius:12px;
  text-decoration:none;font-size:.88rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--garis-kaca);transition:all .25s var(--ease)
}
.tbl-kaca:hover:not(:disabled){background:rgba(255,255,255,.18);transform:translateY(-1px)}
.tbl-kaca:disabled{opacity:.3;cursor:not-allowed}
.tbl-kaca.bulat{padding:0;width:40px}
.tbl-kaca.nyala{background:linear-gradient(135deg,var(--emas-300),var(--emas-500));color:var(--hijau-950);border-color:transparent}
.judul-baca{flex:1;min-width:0;text-align:center}
.judul-baca b{display:block;font-family:var(--font-judul);font-size:1.02rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.judul-baca small{display:block;font-size:.74rem;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.aksi-baca{display:flex;gap:.5rem}

/* ---------- Meja baca ---------- */
.meja{
  position:relative;flex:1;min-height:0;display:flex;overflow:auto;padding:1.2rem;cursor:zoom-in;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent
}
.meja.memperbesar{cursor:grab}
.meja.memperbesar.menarik{cursor:grabbing}
.kotak-zoom{margin:auto;flex:none;position:relative}
.isi-zoom{transform-origin:0 0;will-change:transform;transition:transform .14s ease-out}
.isi-zoom::after{ /* bayangan di meja */
  content:'';position:absolute;left:6%;right:6%;bottom:-26px;height:32px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(6px)
}
.flipbook{box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.flipbook>div{background:#fff}
.flipbook img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;pointer-events:none;-webkit-user-drag:none}

/* ---------- Tombol samping (komputer) ---------- */
.samping{
  position:fixed;top:50%;z-index:15;width:50px;height:92px;transform:translateY(-50%);display:grid;place-items:center;font-size:1.25rem;
  background:var(--kaca);border:1px solid var(--garis-kaca);border-radius:14px;backdrop-filter:blur(10px);transition:all .25s var(--ease)
}
.samping:hover:not(:disabled){background:rgba(255,255,255,.2);transform:translateY(-50%) scale(1.08)}
.samping:disabled{opacity:.2;cursor:not-allowed}
.samping.kiri{left:14px}.samping.kanan{right:14px}

/* ---------- Dok kontrol ---------- */
.dok{
  position:relative;z-index:20;flex:none;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:var(--kaca);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--garis-kaca);
  animation:naik .7s var(--ease) both
}
@keyframes naik{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.geser{display:flex;align-items:center;gap:.7rem;flex:1 1 280px;max-width:560px;min-width:0}
.hitung{font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:5.2rem;text-align:center}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;height:6px;border-radius:6px;outline-offset:6px;cursor:pointer;
  background:linear-gradient(90deg,var(--emas-500) var(--isi,0%),rgba(255,255,255,.18) var(--isi,0%))
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--emas-500);box-shadow:0 2px 8px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--emas-500)}
.kelompok{display:flex;align-items:center;gap:.4rem;padding:.2rem;border-radius:14px}
.zoom-info{font-size:.78rem;font-weight:600;min-width:2.9rem;text-align:center;font-variant-numeric:tabular-nums}
.lompat{display:flex;align-items:center;gap:.3rem}
.lompat input{width:56px;height:40px;text-align:center;border-radius:12px;border:1px solid var(--garis-kaca);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.85rem;outline:none}
.lompat input:focus{border-color:var(--emas-500)}
.lompat input::placeholder{color:rgba(255,255,255,.45)}
.hanya-pc{display:none}

/* ---------- Petunjuk & pesan ---------- */
.petunjuk{
  position:fixed;left:50%;bottom:92px;z-index:30;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#fff;color:var(--hijau-900);padding:.7rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:600;box-shadow:0 14px 34px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:.6rem;transition:all .5s var(--ease);max-width:90vw
}
.petunjuk.tampil{opacity:1;transform:translate(-50%,0)}
.petunjuk i{color:var(--emas-500)}
.pesan-kosong{margin:auto;text-align:center;max-width:420px;padding:2.4rem 1.8rem;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid var(--garis-kaca);line-height:1.7;color:rgba(255,255,255,.75)}
.pesan-kosong i{font-size:2.6rem;color:var(--emas-300);margin-bottom:.8rem;display:block}
.pesan-kosong strong{display:block;font-family:var(--font-judul);font-size:1.3rem;color:#fff}

@media (min-width:900px){
  .hanya-pc{display:flex}
  .meja{padding:1.6rem 90px}
}
@media (max-width:899px){.samping{display:none}}
@media (max-width:560px){
  .tbl-kaca span{display:none}
  .tbl-kaca:not(.bulat){padding:0;width:40px}
  .dok{gap:.4rem}
  .hitung{min-width:4.2rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}