/* Buku cerita: halaman tunggal, gambar di atas, bacaan di bawah, efek balik halaman. */

.story-entry{font:inherit;font-weight:600;padding:9px 16px;border-radius:14px;border:2px solid #E9E1D7;background:#fff;cursor:pointer}
.story-entry:hover{border-color:#8F7B70}

.story-head{max-width:800px;margin:20px auto 0;text-align:center}
.story-head h1{margin:10px 0 4px;font-size:25px}
.story-head .story-sub{margin:0;color:#6B6478;font-size:14px}
.story-counter{margin:6px 0 0;color:#8B8396;font-size:13px;font-variant-numeric:tabular-nums}
.story-back{font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:11px;border:2px solid #E9E1D7;background:#fff;cursor:pointer;min-height:0}
.story-back:hover{border-color:#8F7B70}

/* Efek buku: perspektif + halaman yang berputar dari sisi kiri (seperti membalik).
   Durasi dan easing dipilih agar terasa mengayun lembut: kurva ease-in-out yang
   landai di kedua ujung, bukan hentakan cepat. Tiap wajah kertas (muka dan
   punggung) digambar terpisah supaya bayangan dan sorot cahayanya tidak patah di
   tengah putaran. */
.book{max-width:800px;margin:16px auto 0;padding:0 18px;perspective:2400px}
.page-sheet{position:relative;transform-origin:left center;transform-style:preserve-3d;
  will-change:transform;backface-visibility:hidden;min-height:430px}
.page-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:#FFFCF6;border:1px solid #EADFCF;border-radius:8px 18px 18px 8px;
  box-shadow:0 10px 24px #B9A89533;backface-visibility:hidden}
/* Punggung halaman: sisi yang terlihat saat kertas terangkat. */
.page-face--back{transform:rotateY(180deg);background:linear-gradient(160deg,#F6EDE0,#FFFDF8)}
.page-face--back .back-rule{position:absolute;inset:22px;border:1px dashed #E4D6C2;border-radius:10px;opacity:.75}
.page-face--back .bookmark{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:38px;color:#D8C7AE}
/* Tulang buku di sisi kiri, hanya di halaman depan. */
.page-face--front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;border-radius:8px 0 0 8px;
  background:linear-gradient(90deg,#E7DAC6,#FBF4E8);box-shadow:inset -2px 0 4px #B9A89555}

.book[data-turn=next] .page-sheet{animation:turnNext .78s cubic-bezier(.55,.06,.32,1) both}
.book[data-turn=prev] .page-sheet{animation:turnPrev .78s cubic-bezier(.55,.06,.32,1) both}
@keyframes turnNext{
  0%{transform:rotateY(0deg)}
  40%{transform:rotateY(-42deg)}
  72%{transform:rotateY(-104deg)}
  100%{transform:rotateY(-180deg)}}
@keyframes turnPrev{
  0%{transform:rotateY(-180deg)}
  40%{transform:rotateY(-104deg)}
  72%{transform:rotateY(-42deg)}
  100%{transform:rotateY(0deg)}}
/* Selubung halaman depan saat terangkat: memberi kesan kertas menangkap cahaya. */
.book[data-turn] .page-face--front::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,#FFFDF8 0%,#FBF3E6 46%,#00000010 80%,#00000026 100%)}

.scene{position:relative;height:260px;border-radius:12px 12px 4px 4px;overflow:hidden;margin:12px 12px 0 18px}
.scene--forest{background:linear-gradient(#DFF1F7 0%,#EAF5E9 55%,#DCEBCF 100%)}
.scene--river{background:linear-gradient(#DFF1F7 0%,#E4F1F7 46%,#A9CBE2 47%,#C6E0EF 100%)}
.scene-actor{position:absolute;width:auto;height:auto;max-width:none;image-rendering:auto}
/* Latar bergelombang agar adegan terasa punya kedalaman */
.scene::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-14px;height:64px;border-radius:50% 50% 0 0/100% 100% 0 0;background:#CFE3B7AA}
.scene--river::after{background:#8FBBD955}

.story-text{margin:0 20px 18px;padding:14px 4px 4px;border-top:1px dashed #E7DAC6}
.story-text p{margin:0;font-size:19px;line-height:1.6}

.story-nav{max-width:800px;margin:16px auto 0;padding:0 18px;display:flex;gap:10px;justify-content:space-between}
/* Tombol halaman sengaja kecil dan tenang: yang penting kontennya, bukan tombolnya. */
.story-nav button{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:12px;
  border:2px solid #E9E1D7;background:#fff;cursor:pointer;min-height:0}
.story-nav button:hover:not(:disabled){border-color:#8F7B70}
.story-nav button:disabled{opacity:.45;cursor:default}
.story-nav button:focus-visible{outline:3px solid #B9A895;outline-offset:3px}

@media(max-width:600px){
  .story-head h1{font-size:20px}
  .story-head{margin-top:14px}
  .scene{height:190px;margin:9px 9px 0 15px}
  .story-text{margin:0 13px 14px}
  .story-text p{font-size:16px}
  .story-nav{padding:0 13px;gap:8px}
  .story-nav button{font-size:12px;padding:6px 11px}
}
@media(prefers-reduced-motion:reduce){
  .book[data-turn] .page-sheet{animation:none}
  .book[data-turn] .page-face--front::after{display:none}
}