body {
    background-color: #333; /* Latar belakang gelap untuk menonjolkan buku */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden; /* Sembunyikan scrollbar jika buku melebihi ukuran viewport */
}

/* Penyesuaian container Turn.js */
#flipbook {
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.5); /* Bayangan elegan di bawah buku */
    border-radius: 5px;
}

/* Gaya untuk setiap halaman */
/* Ukuran halaman sudah didefinisikan secara in-line dan di inisialisasi Turn.js */
.page {
    /* Pastikan gambar mengisi seluruh div */
    background-size: cover;
    background-position: center;
}

/* Gaya untuk halaman ganjil (sisi kanan) dan genap (sisi kiri) jika diperlukan */
.odd {
    border-left: 1px solid #ddd;
}

.even {
    border-right: 1px solid #ddd;
}

/* Gaya saat membalik halaman */
.turning {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* PENTING: Untuk gambar WebP agar dimuat dengan benar sebagai background */
/* Jika Anda menggunakan tag <img> di HTML (seperti script di atas), bagian ini tidak terlalu krusial, 
   tetapi penting jika Anda mengatur gambar melalui CSS. */
.page img {
    -webkit-user-select: none; /* Mencegah seleksi pada gambar */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}