@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Poppins:wght@300;400;600&display=swap');

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

body {
    font-family: 'Poppins', sans-serif;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

/* Background masing-masing halaman */
body.page-intro { background: #fae1e8; }
body.page-buku { background: #e4e2e2; }
body.page-galeri { background: #2c3e50; color: white; }

/* --- Tombol Kembali --- */
.back-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    color: #333;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 50;
    backdrop-filter: blur(5px);
}

.back-btn:hover {
    background: white;
    transform: scale(1.05) translateY(-2px);
    color: #ff4081;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* --- HALAMAN 1: Intro & Game --- */
#introContainer { text-align: center; z-index: 10; }
.intro-title { font-family: 'Dancing Script', cursive; font-size: 3.5rem; color: #e57373; margin-bottom: 5px; }
.intro-subtitle { font-size: 0.9rem; color: #888; margin-bottom: 25px; }
.start-btn { padding: 12px 35px; border-radius: 30px; border: 1px solid #ffb6c1; background: rgba(255, 255, 255, 0.8); color: #d81b60; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4); transition: all 0.3s ease; }
.start-btn:hover { transform: scale(1.05); background: #fff; box-shadow: 0 6px 20px rgba(255, 182, 193, 0.6); }

#gameContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; overflow: hidden; }
#counterContainer { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.9); padding: 10px 25px; border-radius: 30px; text-align: center; z-index: 20; pointer-events: auto; border: 1px solid rgba(255, 182, 193, 0.5); }
#gameInstruksi { font-size: 0.8rem; color: #888; margin-bottom: 2px; }
#counterText { font-weight: 600; color: #d81b60; font-size: 1.1rem; }

.falling-heart { position: absolute; font-size: 45px; cursor: pointer; pointer-events: auto; animation: fall linear forwards; user-select: none; transition: transform 0.1s; }
.falling-heart:active { transform: scale(0.8); }
@keyframes fall { from { top: -60px; opacity: 1; } to { top: 100vh; opacity: 0; } }

.shard { position: absolute; width: 15px; height: 15px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); pointer-events: none; z-index: 30; opacity: 1; animation: shatterAnim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
@keyframes shatterAnim { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0); opacity: 0; } }
.love-text-pop { position: absolute; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 35px; color: #d81b60; pointer-events: none; z-index: 35; text-transform: uppercase; text-shadow: 3px 3px 0px white, 6px 6px 0px rgba(255, 182, 193, 0.5); animation: popUpFadeGenZ 1.5s ease-out forwards; }
@keyframes popUpFadeGenZ { 0% { transform: scale(0.2) rotate(-10deg); opacity: 0; } 20% { transform: scale(1.1) rotate(5deg); opacity: 1; } 100% { transform: scale(1) translateY(-80px) rotate(0deg); opacity: 0; } }

/* --- LOADING SCREEN --- */
#loadingScreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #ffb6c1; display: none; justify-content: center; align-items: center; flex-direction: column; z-index: 999; }
.loading-text { font-family: 'Dancing Script', cursive; font-size: 3rem; color: white; z-index: 10; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); animation: pulseText 1.5s infinite; }
@keyframes pulseText { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.butterfly { position: absolute; font-size: 50px; animation: fly 6s infinite alternate ease-in-out; opacity: 0.8; }
@keyframes fly { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(150px, -200px) rotate(20deg); } }

/* --- HALAMAN 2: Buku Cerita --- */
.romantic-quote { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); width: 35%; font-family: 'Dancing Script', cursive; font-size: 45px; color: #555; line-height: 1.5; z-index: 10; pointer-events: none; }
.fly-word { display: inline-block; white-space: pre; }

.book-container { width: 800px; height: 550px; position: relative; perspective: 2500px; transform: translateX(200px); transition: transform 1.2s ease-in-out; z-index: 20; }
.book-container.open { transform: translateX(0); }

.page { width: 50%; height: 100%; position: absolute; top: 0; right: 0; transform-style: preserve-3d; transform-origin: left center; transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; }
.page-front, .page-back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fdfdfd; backface-visibility: hidden; border-radius: 5px 20px 20px 5px; box-shadow: inset 5px 0 20px rgba(0,0,0,0.05), 2px 5px 15px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center; }
.page-back { transform: rotateY(180deg); background-color: #fafafa; border-radius: 20px 5px 5px 20px; border-right: 2px solid #ddd; }
.page-front { border-left: 2px solid #ccc; }
.page.flipped { transform: rotateY(-180deg); z-index: 10 !important; }

.page-front img, .page-back img { width: 90%; height: 300px; object-fit: cover; border-radius: 10px; margin-bottom: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.page-front p, .page-back p { font-family: 'Dancing Script', cursive; font-size: 32px; color: #333; line-height: 1.3; }

/* --- PERUBAHAN WARNA COVER DEPAN --- */
#pCover .page-front { 
    /* Warna diganti ke dusty pink/warm grey yang nyatu dengan abu-abu */
    background: linear-gradient(135deg, #e4d7d7 0%, #f6eeee 100%); 
    color: #5c4d4d; /* Teks dibikin lebih gelap */
    justify-content: space-evenly; 
}

.cover-title { 
    font-family: 'Dancing Script', cursive; 
    font-size: 55px; 
    /* Shadow diubah terang biar teks gelapnya kelihatan nimbul */
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); 
    margin-bottom: 10px; 
}

.playlist-ui { 
    background: rgba(255, 255, 255, 0.4); /* Transparansi disesuaikan */
    backdrop-filter: blur(10px); 
    padding: 20px; 
    border-radius: 20px; 
    width: 90%; 
    border: 1px solid rgba(255, 255, 255, 0.8); 
    box-shadow: 0 8px 32px rgba(0,0,0,0.05); 
}

.song-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 5px; color: #5c4d4d; }
.artist { font-size: 14px; opacity: 0.8; margin-bottom: 15px; color: #5c4d4d; }
.controls { display: flex; justify-content: center; gap: 20px; font-size: 24px; align-items: center; color: #5c4d4d; }

.play-btn-visual { 
    background: white; 
    color: #c98b8b; /* Pink kalem untuk icon play */
    width: 50px; height: 50px; 
    border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.click-to-open { font-size: 14px; opacity: 0.7; margin-top: 10px; animation: pulse 1.5s infinite; color: #7a6a6a; }

#pCover { z-index: 6; } #p1 { z-index: 5; } #p2 { z-index: 4; } #p3 { z-index: 3; } #p4 { z-index: 2; } #p5 { z-index: 1; }
.book-cover-left { position: absolute; width: 50%; height: 100%; top: 0; left: 0; background-color: #f0f0f0; border-radius: 20px 5px 5px 20px; box-shadow: inset -5px 0 20px rgba(0,0,0,0.05); z-index: 0; display: none; }

/* --- HALAMAN 3: Galeri --- */
.gallery-title { font-family: 'Dancing Script', cursive; font-size: 40px; margin-bottom: 30px; text-align: center; }
.gallery { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.gallery img { width: 220px; height: 220px; object-fit: cover; border-radius: 15px; transition: all 0.5s ease; border: 3px solid transparent; }
.gallery img:hover { transform: scale(1.2) rotate(5deg) translateY(-10px); border-color: #ff4081; z-index: 10; box-shadow: 0 15px 30px rgba(0,0,0,0.5); }

/* =========================================
   TAMPILAN RESPONSIVE UNTUK HP (MOBILE)
   ========================================= */
@media screen and (max-width: 768px) {
    /* UMUM */
    .back-btn, .back-btn-fixed { 
        top: 15px !important; 
        left: 15px !important; 
        font-size: 12px; 
        padding: 8px 12px; 
    }
    
    /* HALAMAN 1 (Intro & Game) */
    .intro-title { font-size: 2.5rem; }
    #counterContainer { width: 80%; top: 20px; }

    /* HALAMAN 2 (Buku) */
    body.page-buku {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 60px;
    }
    .romantic-quote {
        position: relative;
        width: 90%;
        top: 0;
        left: 0;
        transform: none;
        text-align: center;
        font-size: 26px;
        margin: 0 auto 30px auto;
    }
    /* Mengakali buku yang besar dengan fitur scale (zoom out) di HP */
    .book-container {
        transform-origin: top center;
        transform: scale(0.45) translateX(0) !important; 
        margin-top: 0;
    }
    .book-container.open {
        transform: scale(0.45) translateX(0) !important;
    }

    /* HALAMAN 3 (Koran/Galeri) */
    body.page-galeri {
        padding: 60px 10px 20px 10px !important;
    }
    .newspaper-paper {
        padding: 25px 15px;
    }
    .newspaper-title {
        font-size: 38px;
    }
    .headline {
        font-size: 22px;
        margin-bottom: 25px;
        padding: 0;
    }
    .sub-header {
        flex-direction: column;
        gap: 5px;
        font-size: 10px;
        text-align: center;
    }
    .content-grid {
        grid-template-columns: 1fr; /* Ubah layout dari sebelahan jadi atas-bawah */
        gap: 20px;
    }
    .column-left {
        border-right: none;
        border-bottom: 2px dashed #ccc; /* Kasih pembatas bawah */
        padding-right: 0;
        padding-bottom: 30px;
    }
    .quote-romantic {
        font-size: 24px;
    }
    .music-player h3 {
        font-size: 18px;
    }
    .horoscope-box {
        margin-bottom: 10px;
    }
    .news-image-card img {
        height: 220px;
    }
    .image-caption {
        font-size: 18px;
    }
}