body {
    margin: 0; padding: 0;
    background-color: #dfd7c3;
    background-image: url('https://www.transparenttextures.com/patterns/cardboard-flat.png');
    font-family: 'Courier New', Courier, monospace;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden;
}

.scene {
    width: 100%;
    display: flex; justify-content: center; align-items: center;
}

/* KUNCI UTAMA: Ukuran container induk dikunci mati selebar 900px (2 halaman terbuka) */
.book {
    position: relative;
    width: 900px;
    height: 550px;
    perspective: 2000px;
}

/* Setiap lembaran kertas posisinya berada di sebelah KANAN container utama */
.paper {
    position: absolute;
    top: 0; 
    right: 0; 
    width: 50%; /* Lebarnya pas setengah container (450px) */
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.front-contents, .back-contents {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

/* Sisi belakang dibalik secara horizontal */
.back-contents {
    transform: rotateY(180deg);
}

/* Animasi buka lembaran kertas berputar halus ke sebelah kiri kontainer */
.paper.flipped {
    transform: rotateY(-180deg);
}

/* --- DEKORASI VINTAGE SCRAPBOOK --- */
.cover-front { background: #8e7a63; width: 100%; height: 100%; border-radius: 0 5px 5px 0; box-shadow: inset 3px 0 10px rgba(0,0,0,0.2); }

/* FIX COVERS AKHIR: Dikunci murni center kiri-kanan */
.end-cover { 
    background: #76634e; 
    width: 100% !important; 
    height: 100% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; 
    color: #fff; 
    border-radius: 5px 0 0 5px; 
    box-shadow: inset -3px 0 10px rgba(0,0,0,0.2); 
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-inside {
    background: #f4eedb;
    background-image: url('https://www.transparenttextures.com/patterns/lined-paper.png');
    width: 100%; height: 100%;
    padding: 35px 30px; box-sizing: border-box;
    position: relative; 
    display: flex !important; 
    flex-direction: column !important;
}

/* Efek gradasi bayangan kedalaman lipatan kertas buku di bagian tengah */
.left-page { border-radius: 5px 0 0 5px; border-right: 1px solid rgba(0,0,0,0.1); box-shadow: inset -15px 0 20px rgba(0,0,0,0.05); }
.right-page { border-radius: 0 5px 5px 0; border-left: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset 15px 0 20px rgba(0,0,0,0.05); }

.leather-border {
    border: 3px double #d2c4b1; 
    margin: 20px; 
    height: calc(100% - 40px);
    width: calc(100% - 40px) !important; /* Kunci lebar biar presisi seimbang tengah */
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: center !important; 
    color: #fff; 
    box-sizing: border-box !important;
}
.leather-border h1 { font-size: 26px; margin: 0; letter-spacing: 3px; text-align: center; }
.subtitle { font-size: 11px; color: #dfd7c3; font-style: italic; margin-top: 5px;}
.vintage-divider { margin: 20px 0; color: #d2c4b1; }
.date { font-size: 11px; }

h2 { color: #5c4a37; font-size: 18px; border-bottom: 2px dashed #b5a48b; padding-bottom: 6px; margin-top: 0; text-align: center;}
p { color: #4a3f35; font-size: 12px; line-height: 1.6; text-indent: 15px;}

/* Polaroid Utama Kanan */
.polaroid-frame {
    background: #fff; width: 85%; height: 210px; margin: 10px auto;
    padding: 8px 8px 30px 8px; box-shadow: 3px 5px 12px rgba(0,0,0,0.12);
    transform: rotate(-2deg); transition: transform 0.3s; position: relative; box-sizing: border-box;
}
.polaroid-frame img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2) contrast(0.95); }
.tape { position: absolute; top: -10px; left: 32%; width: 80px; height: 18px; background: rgba(222, 184, 135, 0.4); transform: rotate(3deg); }
.caption { text-align: center; font-size: 10px; color: #555; font-style: italic; margin-top: 5px; }
.hint-text { text-align: center; font-size: 10px; color: #8c7e6c; margin: 0; text-indent: 0;}

/* ==========================================================================
   ⚡ SYSTEM ALBUM FOTO FAVORITES (ANTI-CEBOL & ANTI-NIMPA)
   ========================================================================== */
/* ==========================================================================
   ⚡ FIX AKHIR: PAKSA FOTO JADI GEDE (ANTI-CEBOL & DETECT FULL RATIO)
   ========================================================================== */
.photo-album-area { 
    position: relative !important; 
    width: 100% !important; 
    height: 280px !important; 
    margin-top: 10px !important;
}

.square-photo { 
    background: #fff !important; 
    box-sizing: border-box !important; 
}
.square-photo img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

/* Bunga Besar Utama - PAKSA GEDE MAKSIMAL (SCALE 1.4) */
.extra-photo {
    width: 170px !important;
    height: 170px !important;
    padding: 8px 8px 30px 8px !important;
    position: absolute !important;
    top: 30px !important;
    left: 20px !important;
    /* Kita tembak pake scale(1.4) biar gambarnya melar besar dan kelihatan jelas */
    transform: rotate(4deg) scale(1.4) !important;
    transform-origin: center center !important;
    z-index: 5 !important;
    box-shadow: 3px 5px 15px rgba(0,0,0,0.2) !important;
}

/* Polaroid Bunga Kecil - IKUT DIPAKSA GEDE (SCALE 1.35) */
.mini-overlap {
    width: 115px !important;
    height: 115px !important;
    padding: 6px 6px 22px 6px !important;
    position: absolute !important;
    top: 110px !important; /* Diturunin biar gak numpuk nutupin bunga gedenya */
    left: 170px !important; /* Digeser agak ke kanan luar biar dimensinya luas */
    /* Kita tembak pake scale(1.35) biar ikut mengimbangi ukuran bunga utama */
    transform: rotate(-8deg) scale(1.35) !important; 
    transform-origin: center center !important;
    z-index: 10 !important; 
    box-shadow: 5px 8px 20px rgba(0,0,0,0.25) !important;
}

/* Amankan stempel agar nongkrong di paling bawah halaman */
.left-page .stamp {
    position: absolute !important;
    bottom: 10px !important;
    left: 38% !important;
    z-index: 15 !important;
    margin: 0 !important;
}
/* Nota */
.note-pad {
    background: #fffdf2; border-left: 3px solid #b5a48b; padding: 10px; margin: 10px 0;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.05); transform: rotate(1deg); position: relative;
}
.paper-clip { position: absolute; top: -8px; left: 15px; width: 12px; height: 30px; background: linear-gradient(#ccc, #999); border-radius: 4px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.botanical { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; background-image: url('https://www.transparenttextures.com/patterns/gray-floral.png'); opacity: 0.15; }
.stamp { border: 3px double #a24b4b; color: #a24b4b; font-size: 11px; font-weight: bold; padding: 3px 8px; width: max-content; transform: rotate(-15deg); margin: 15px auto; opacity: 0.7; }

/* Amplop */
.envelope-wrapper { margin: auto; text-align: center; cursor: pointer; transition: transform 0.2s;}
.envelope-wrapper:hover { transform: scale(1.05); }
.envelope { font-size: 40px; animation: float 2.5s infinite ease-in-out; }
.envelope-wrapper span { display: block; font-size: 10px; color: #7a6c58; margin-top: 3px; font-weight: bold;}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.hint { margin-top: 15px; color: #736453; font-size: 11px; text-align: center; }

/* Pop-up Overlay */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.4s; padding: 20px; box-sizing: border-box;}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box { background: #fbf9f3; width: 100%; max-width: 360px; padding: 20px; text-align: center; border: 1px solid #dcd1b4; box-shadow: 0 15px 40px rgba(0,0,0,0.3); position: relative; }
.modal-tape { position: absolute; top: -10px; left: 35%; width: 90px; height: 20px; background: rgba(222, 184, 135, 0.5); }
.modal-box p { text-indent: 0; font-style: italic; background: #f5f0e1; padding: 12px; border-radius: 4px; border: 1px dashed #b5a48b; font-size: 12px;}
.close-btn { background: #b5a48b; color: #fff; border: none; padding: 8px 18px; font-family: inherit; cursor: pointer; margin-top: 10px; }

/* ⚡ SISTEM SKALA RESPONSIVE OTOMATIS AMAN UNTUK MOBILE (ANTI-GEPENG) */
@media (max-width: 950px) { 
    .book { transform: scale(0.8); } 
}
@media (max-width: 768px) { 
    .scene { width: 100vw; overflow-x: hidden; }
    .book { transform: scale(0.43) !important; transform-origin: top center !important; margin-top: 35px !important; } 
}
@media (max-width: 400px) { 
    .book { transform: scale(0.38) !important; transform-origin: top center !important; } 
}