/* DAISYUI */
@plugin "daisyui" {
    themes: light --default, black;
}

:root:has(input.theme-controller[value="black"]:checked) .tooltip,
:root:has(input.theme-controller[value="black"]:checked) .tooltip::before {
    border-radius: 0.25rem !important;
}

.tooltip::after {
    display: none !important;
}

/* GENERAL */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden; /* Mencegah scrollbar muncul */
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f3f4f6; /* Warna latar belakang default opsional */
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

input {
    display: none;
}

/* FLIP BOOK (DESKTOP DEFAULT) */
#flip_book {
    width: 298px;
    height: 420px;
    position: relative;
    transition-duration: 1s;
    perspective: 2000px;
}

.front_cover,
.back_cover {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2.5px 5px 5px 2.5px;
    background-image: url(./assets/images/flip_book_edge_shading.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0 5px 0 rgb(255, 0, 0);
}

.front_cover {
    position: absolute;
    cursor: pointer;
    transform-origin: center left;
    transition: transform 0.5s;
    z-index: 99;
}

.front_cover label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
}

.page {
    width: 288px;
    height: 400px;
    position: absolute;
    top: 10px;
    left: 1px;
    border-radius: 0 5px 5px 0;
    background-color: white;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition-duration: 0.5s;
}

.front_page {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.front_page label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

.back_page {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    z-index: 100;
}

.back_page label {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

.edge_shading {
    width: 288px;
    height: 400px;
    position: absolute;
    z-index: 98;
}

.front_content {
    width: 287px;
    height: 398px;
    position: absolute;
    top: 1px;
    border-radius: 0 5px 5px 0;
    z-index: 97;
}

.back_content {
    width: 287px;
    height: 398px;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 5px 0 0 5px;
    z-index: 97;
}

.back_cover {
    position: relative;
    z-index: -1;
}

/* Z-INDEX MANAGEMENT */
#page1 { z-index: 52; }
#page2 { z-index: 51; }
#page3 { z-index: 50; }
#page4 { z-index: 49; }
#page5 { z-index: 48; }
#page6 { z-index: 47; }
#page7 { z-index: 46; }
#page8 { z-index: 45; }
#page9 { z-index: 44; }
#page10 { z-index: 43; }
#page11 { z-index: 42; }
#page12 { z-index: 41; }
#page13 { z-index: 40; }
#page14 { z-index: 39; }
#page15 { z-index: 38; }
#page16 { z-index: 37; }
#page17 { z-index: 36; }
#page18 { z-index: 35; }
#page19 { z-index: 34; }
#page20 { z-index: 33; }
#page21 { z-index: 32; }
#page22 { z-index: 31; }
#page23 { z-index: 30; }
#page24 { z-index: 29; }
#page25 { z-index: 28; }
#page26 { z-index: 27; }

#cover_checkbox:checked~#flip_book {
    transform: translateX(144px);
}

#cover_checkbox:checked~#flip_book .front_cover {
    transform: rotateY(-180deg);
    transition: transform 1.5s, z-index 0.5s 0.5s;
    z-index: 1;
}

#cover_checkbox:checked~#flip_book #cover {
    width: 80%;
    height: 80%;
    position: absolute;
}

/* CHECKED STATES FOR DESKTOP */
#page1_checkbox:checked~#flip_book #page1 { transform: rotateY(-180deg); z-index: 53; }
#page2_checkbox:checked~#flip_book #page2 { transform: rotateY(-180deg); z-index: 54; }
#page3_checkbox:checked~#flip_book #page3 { transform: rotateY(-180deg); z-index: 55; }
#page4_checkbox:checked~#flip_book #page4 { transform: rotateY(-180deg); z-index: 56; }
#page5_checkbox:checked~#flip_book #page5 { transform: rotateY(-180deg); z-index: 57; }
#page6_checkbox:checked~#flip_book #page6 { transform: rotateY(-180deg); z-index: 58; }
#page7_checkbox:checked~#flip_book #page7 { transform: rotateY(-180deg); z-index: 59; }
#page8_checkbox:checked~#flip_book #page8 { transform: rotateY(-180deg); z-index: 60; }
#page9_checkbox:checked~#flip_book #page9 { transform: rotateY(-180deg); z-index: 61; }
#page10_checkbox:checked~#flip_book #page10 { transform: rotateY(-180deg); z-index: 62; }
#page11_checkbox:checked~#flip_book #page11 { transform: rotateY(-180deg); z-index: 63; }
#page12_checkbox:checked~#flip_book #page12 { transform: rotateY(-180deg); z-index: 64; }
#page13_checkbox:checked~#flip_book #page13 { transform: rotateY(-180deg); z-index: 65; }
#page14_checkbox:checked~#flip_book #page14 { transform: rotateY(-180deg); z-index: 66; }
#page15_checkbox:checked~#flip_book #page15 { transform: rotateY(-180deg); z-index: 67; }
#page16_checkbox:checked~#flip_book #page16 { transform: rotateY(-180deg); z-index: 68; }
#page17_checkbox:checked~#flip_book #page17 { transform: rotateY(-180deg); z-index: 69; }
#page18_checkbox:checked~#flip_book #page18 { transform: rotateY(-180deg); z-index: 70; }
#page19_checkbox:checked~#flip_book #page19 { transform: rotateY(-180deg); z-index: 71; }
#page20_checkbox:checked~#flip_book #page20 { transform: rotateY(-180deg); z-index: 72; }
#page21_checkbox:checked~#flip_book #page21 { transform: rotateY(-180deg); z-index: 73; }
#page22_checkbox:checked~#flip_book #page22 { transform: rotateY(-180deg); z-index: 74; }
#page23_checkbox:checked~#flip_book #page23 { transform: rotateY(-180deg); z-index: 75; }
#page24_checkbox:checked~#flip_book #page24 { transform: rotateY(-180deg); z-index: 76; }
#page25_checkbox:checked~#flip_book #page25 { transform: rotateY(-180deg); z-index: 77; }
#page26_checkbox:checked~#flip_book #page26 { transform: rotateY(-180deg); z-index: 78; }

/* ==========================================
   MOBILE OVERRIDES: Full Screen Notepad Style
   ========================================== */
@media (max-width: 768px) {
    /* 1. Reset Body Mobile */
    body {
        width: 100%;
        height: 100dvh;
        padding: 0;
        margin: 0;
    }

    /* 2. Set kontainer buku agar memenuhi 100% layar HP */
    #flip_book {
        width: 100vw !important;
        height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Matikan pergeseran translasi desktop */
    #cover_checkbox:checked~#flip_book {
        transform: translateX(0) !important;
    }

    /* 3. Reset Cover dan Halaman Menjadi Full Screen Terpusat */
    .front_cover,
    .back_cover,
    .page {
        transform-origin: center center !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important; /* Hilangkan rounded agar full kotak layar HP */
        transition: transform 0.6s ease, opacity 0.6s ease, z-index 0.6s !important;
    }

    /* 4. Efek Slide Out saat di-klik (menghilang ke kiri screen) */
    #cover_checkbox:checked~#flip_book .front_cover,
    #page1_checkbox:checked~#flip_book #page1,
    #page2_checkbox:checked~#flip_book #page2,
    #page3_checkbox:checked~#flip_book #page3,
    #page4_checkbox:checked~#flip_book #page4,
    #page5_checkbox:checked~#flip_book #page5,
    #page6_checkbox:checked~#flip_book #page6,
    #page7_checkbox:checked~#flip_book #page7,
    #page8_checkbox:checked~#flip_book #page8,
    #page9_checkbox:checked~#flip_book #page9,
    #page10_checkbox:checked~#flip_book #page10,
    #page11_checkbox:checked~#flip_book #page11,
    #page12_checkbox:checked~#flip_book #page12,
    #page13_checkbox:checked~#flip_book #page13,
    #page14_checkbox:checked~#flip_book #page14,
    #page15_checkbox:checked~#flip_book #page15,
    #page16_checkbox:checked~#flip_book #page16,
    #page17_checkbox:checked~#flip_book #page17,
    #page18_checkbox:checked~#flip_book #page18,
    #page19_checkbox:checked~#flip_book #page19,
    #page20_checkbox:checked~#flip_book #page20,
    #page21_checkbox:checked~#flip_book #page21,
    #page22_checkbox:checked~#flip_book #page22,
    #page23_checkbox:checked~#flip_book #page23,
    #page24_checkbox:checked~#flip_book #page24,
    #page25_checkbox:checked~#flip_book #page25,
    #page26_checkbox:checked~#flip_book #page26 {
        transform: translateX(-100%) rotate(0deg) !important; /* Slide pas di pinggir layar kiri */
        opacity: 0 !important;
        z-index: 1 !important;
    }

    /* 5. Sembunyikan sisi belakang halaman */
    .back_page {
        display: none !important;
    }

    /* 6. Atur Semua Gambar/Konten Memenuhi Layar Penuh menggunakan object-fit */
    .edge_shading, 
    .front_content,
    .back_content {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        object-fit: cover; /* Menjamin gambar ter-stretch/terpotong rapi memenuhi layar hp */
    }
}