* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow: hidden; /* Kunci: scrollbar tidak boleh pernah muncul, walau sesaat saat animasi flip */
}

body {
    background-color: #f7f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.container {
    text-align: center;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
}

/* Baris buku: default (desktop) = tombol - buku - tombol, sejajar horizontal.
   Pakai CSS Grid (bukan flex) supaya di mobile posisinya bisa disusun ulang total
   (lihat media query di bawah) tanpa perlu mengubah urutan elemen di HTML. */
.book-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "prev stage next";
    align-items: center;
    justify-items: center;
    gap: 16px;
}

#btn-prev { grid-area: prev; }
#flip-stage { grid-area: stage; }
#btn-next { grid-area: next; }

/* Mobile: balik ke susunan buku di atas, kedua tombol berdampingan di bawahnya
   (persis seperti sebelum tombol dipindah ke samping) - supaya lebar layar yang
   sempit tidak "dimakan" tombol di kiri-kanan, dan gambar tetap bisa besar. */
@media (max-width: 768px) {
    .book-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "stage stage"
            "prev  next";
        row-gap: 20px;
    }
}

/* "Panggung" (jendela crop) - ini yang tampak melebar/menyempit di layar.
   Lebarnya diatur lewat JavaScript (persis selebar 1 halaman saat cover/halaman
   terakhir, atau 2 halaman saat sedang terbuka berpasangan), dan overflow:hidden
   di sini yang memotong sisi kosong supaya halaman solo terlihat di tengah. */
.flip-stage {
    position: relative; /* jadi acuan posisi buat .spine-shadow di bawah */
    margin: 0 auto;
    max-width: 100%;
    max-height: 94vh; /* jaring pengaman saja; ukuran presisi sudah dihitung akurat lewat JS */
    overflow: hidden;
    display: flex;
}

/* align-right: dipakai saat cover (halaman pertama) sendirian -> rata kanan wadah asli
   supaya bagian yang terlihat persis di tengah panggung.
   align-left: dipakai saat halaman terakhir sendirian -> rata kiri. */
.flip-stage.align-right {
    justify-content: flex-end;
}
.flip-stage.align-left {
    justify-content: flex-start;
}

/* Bayangan lipatan tengah buku ("spine shadow") - efek halus supaya kelihatan
   seperti buku sungguhan (ada lekukan di tengah), bukan cuma 2 gambar datar.
   Statis (tidak ikut animasi flip), cuma tampil saat 2 halaman berdampingan -
   otomatis disembunyikan lewat opacity saat cover/halaman terakhir sendirian
   (class "has-spine" ditambah/dihapus dari JS). */
.spine-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 64px;
    transform: translateX(-50%);
    pointer-events: none; /* jangan sampai menghalangi klik/drag ke halaman */
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.10) 42%,
        rgba(0, 0, 0, 0.16) 50%,
        rgba(0, 0, 0, 0.10) 58%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.flip-stage.has-spine .spine-shadow {
    opacity: 1;
}

/* Wadah Utama Flipbook (dikendalikan penuh oleh library page-flip, selalu
   berukuran selebar 2 halaman secara internal). flex-shrink:0 penting supaya
   ukurannya tidak pernah diperas oleh flexbox .flip-stage di atas. */
.flipbook-wrapper {
    flex-shrink: 0;
}

/* PENTING: karena kita pakai autoSize:false (supaya library tidak ikut campur
   ukuran, lihat script.js), library JADI TIDAK memberi tinggi otomatis ke elemen
   internalnya sendiri (.stf__wrapper/.stf__block, dibuat otomatis oleh library
   di dalam .flipbook-wrapper) - biasanya itu tugas autoSize. Makanya di sini kita
   yang kasih tinggi 100% secara manual, supaya bukunya kelihatan (tidak collapse
   jadi 0 tinggi / blank kosong). */
.flipbook-wrapper .stf__wrapper,
.flipbook-wrapper .stf__block {
    height: 100%;
}

/* Gaya untuk setiap halaman buku (ini yang tampil sebagai "kertas") */
.page {
    background-color: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Memastikan gambar pas di dalam halaman tanpa merusak rasio */
.page img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
    background-color: #ffffff;
}

.nav-btn {
    background-color: #ff6b81; /* Warna kado kustom, silakan ganti jika mau */
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    flex-shrink: 0; /* Tombol jangan pernah ikut menyusut, buku yang menyesuaikan */
    border-radius: 50%; /* Tombol bulat minimalis, ikon panah saja */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(255, 107, 129, 0.25);
}

.nav-btn:hover {
    background-color: #ff4757;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(255, 107, 129, 0.35);
}

.nav-btn:active {
    transform: translateY(1px);
}

/* Tombol Musik Latar - melayang di pojok kanan atas, tidak mengganggu tampilan buku */
.music-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #ff6b81;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    z-index: 10;
}

.music-btn:hover {
    background-color: #ffffff;
    transform: translateY(-1px);
}

/* Watermark Brand - kecil, transparan, pojok kanan bawah, sengaja dibuat tidak menonjol */
.brand-watermark {
    position: fixed;
    bottom: 10px;
    right: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.32);
    text-decoration: none;
    letter-spacing: 0.2px;
    z-index: 5;
    transition: color 0.2s ease;
}

.brand-watermark:hover {
    color: rgba(0, 0, 0, 0.55);
}