/* ===== TAMPILAN BUKU untuk galeri ebook =====
   Halaman ebook sudah tersimpan sebagai gambar berurutan di tabel `ebook`
   (dikirim dari editor lewat "Kirim ke Galeri"). Di sini gambar-gambar itu
   ditampilkan sebagai BUKU TERBUKA, bukan sebagai petak-petak.

   Kenapa bukan petak: petak menampilkan 141 halaman sebagai 141 benda
   terpisah, dan pembaca kehilangan urutannya. Buku menyampaikan bahwa ini
   satu benda yang dibaca berurutan — dan itu memang isinya.

   Semua gerak di sini hanya memakai transform dan opacity. Pelajaran dari
   halaman penghargaan: filter pada elemen besar memaksa seluruh isinya
   digambar ulang tiap frame, dan itu yang bikin berat di ponsel. */

.bk-panggung{
  --spine: rgba(10,32,68,.28);
  /* box-sizing dipastikan di sini, tidak diandalkan dari luar: dengan
     content-box, padding 34+48px DITAMBAHKAN ke 100vh dan seluruh isinya
     terdorong ~82px melewati bawah layar. */
  box-sizing:border-box; min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2.4vh,26px); padding:clamp(16px,3vh,34px) clamp(12px,3vw,40px) clamp(24px,4vh,48px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(23,65,143,.35), transparent 60%),
    linear-gradient(180deg,#0A2044,#060F26);
}

.bk-kepala{ text-align:center; color:#EAF0FB; }
.bk-kepala .tag{
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:#F6DE8C; font-weight:700; margin-bottom:6px;
}
.bk-kepala h1{
  margin:0; font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:800; font-size:clamp(22px,3.4vw,40px); letter-spacing:-.01em;
}

/* ---------- buku ---------- */
.bk-buku{
  position:relative; perspective:2200px;
  width:min(100%, 1180px); flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
}
.bk-spread{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  gap:0; aspect-ratio:1.125 / 1;          /* dua halaman 9:16 berdampingan */
  /* TINGGI yang jadi penentu, bukan lebar.

     Dibatasi lebar saja, spread selebar 1180px jadi setinggi 1049px — lebih
     tinggi daripada jendela kebanyakan laptop, dan tombol halamannya
     terdorong ke luar layar. Buku yang tombolnya harus dicari dengan
     menggulir bukan buku yang enak dibaca. */
  height:min(calc(100dvh - 320px), calc((min(100vw, 1180px) - 24px) / 1.125));
  width:auto;
  transform-style:preserve-3d;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  border-radius:6px; overflow:hidden;
  background:#0A2044;
}
/* punggung buku: bayangan tipis di tengah, bukan garis — buku sungguhan
   tidak punya garis di tengah, ia punya lekuk */
.bk-spread::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(90deg,
    transparent 46%, var(--spine) 49.4%, rgba(0,0,0,.42) 50%,
    var(--spine) 50.6%, transparent 54%);
}
.bk-sisi{ position:relative; overflow:hidden; background:#0A2044; }
.bk-sisi img{ width:100%; height:100%; object-fit:contain; display:block; }

/* lembar yang sedang dibalik */
.bk-balik{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  z-index:6; will-change:transform;
}
.bk-balik.maju{ animation:bkMaju .62s cubic-bezier(.4,0,.25,1) both; }
.bk-balik.mundur{ animation:bkMundur .62s cubic-bezier(.4,0,.25,1) both; }
@keyframes bkMaju  { from{ transform:rotateY(0); }      to{ transform:rotateY(-178deg); } }
@keyframes bkMundur{ from{ transform:rotateY(-178deg); } to{ transform:rotateY(0); } }
.bk-balik .muka,.bk-balik .balik{
  position:absolute; inset:0; backface-visibility:hidden; background:#0A2044;
}
.bk-balik .balik{ transform:rotateY(180deg); }
.bk-balik img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ---------- kendali ---------- */
.bk-alat{
  display:flex; align-items:center; gap:clamp(10px,2vw,20px);
  color:#EAF0FB; font-weight:700;
}
.bk-nav{
  appearance:none; border:1px solid rgba(246,222,140,.4); background:rgba(255,255,255,.06);
  color:#F6DE8C; width:46px; height:46px; border-radius:50%; cursor:pointer;
  font-size:1.2rem; line-height:1; display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.bk-nav:hover:not(:disabled){ background:rgba(246,222,140,.16); transform:translateY(-2px); }
.bk-nav:disabled{ opacity:.3; cursor:default; }
.bk-hal{ min-width:120px; text-align:center; font-size:.92rem; letter-spacing:.04em; }
.bk-hal b{ color:#F6DE8C; }

.bk-geser{ width:min(420px,60vw); accent-color:#C9971F; cursor:pointer; }

.bk-kosong{
  color:#9FB2D8; text-align:center; padding:60px 20px; font-size:1rem;
}
.bk-kosong .ic{ display:block; font-size:2.4rem; margin-bottom:10px; }

.bk-tombol{
  appearance:none; border:1px solid rgba(246,222,140,.4); background:transparent;
  color:#F6DE8C; padding:9px 16px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:700;
}
.bk-tombol:hover{ background:rgba(246,222,140,.14); }

/* penanda pratinjau: harus jelas bahwa yang dilihat BELUM terbit */
.bk-pratinjau{
  background:linear-gradient(90deg,#8A5A10,#C9971F);
  color:#1A1204; font-weight:800; text-align:center;
  padding:8px 14px; border-radius:999px; font-size:.8rem;
  letter-spacing:.06em;
}

/* ---------- ponsel: satu halaman saja ----------
   Dua halaman berdampingan di layar 375px membuat tiap halaman selebar 180px —
   teks di dalamnya tidak terbaca sama sekali. Di layar sempit bukunya dibuka
   satu halaman, dan itu memang cara orang membaca di ponsel. */
@media(max-width:820px){
  .bk-spread{ grid-template-columns:1fr; aspect-ratio:9 / 16;
    height:min(calc(100dvh - 260px), calc((100vw - 24px) * 16 / 9)); width:auto; }
  .bk-spread::after{ display:none; }
  .bk-sisi.kanan{ display:none; }
  .bk-balik{ left:0; width:100%; transform-origin:center center; }
  @keyframes bkMaju  { from{ transform:translateX(0); opacity:1; }   to{ transform:translateX(-16%); opacity:0; } }
  @keyframes bkMundur{ from{ transform:translateX(-16%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
  .bk-geser{ width:min(300px,70vw); }
}

@media (prefers-reduced-motion: reduce){
  .bk-balik{ display:none !important; }
  .bk-nav{ transition:none; }
}