/* =================================================================
   TEMA: PETUALANGAN PESTA CERIA (Ulang Tahun)
   Font: Fredoka One (Judul), Comic Neue (Isi)
   Warna: Sky Blue, Yellow, Red, Green
   ================================================================= */

/* --- Global Reset & Font --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Comic Neue', cursive; /* Font isi yang santai */
    font-size: 1.1rem;
    line-height: 1.7;
    background: linear-gradient(180deg, #87CEEB 0%, #98FB98 100%); /* Langit ke Rumput */
    color: #333333;
    overflow-x: hidden;
}
html.no-scroll, body.no-scroll { height: 100%; overflow: hidden; }
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; border-bottom: 3px dashed rgba(255,255,255,0.5); }

/* --- Judul & Pembatas --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Fredoka One', cursive; /* Font judul yang lucu */
    color: #3E3A63;
}
h2 { font-size: 2.8rem; text-align: center; margin-bottom: 10px; }
.anime-divider {
    text-align: center;
    font-size: 1.5rem;
    color: #FFD700;
    margin-bottom: 40px;
}
.anime-divider::before { content: '⭐'; } /* Bintang */

/* --- [BARU] Kartu Gaya Coretan (Doodle) --- */
.doodle-card {
    background: #ffffff;
    border: 3px solid #333333;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}
.doodle-card:hover {
    transform: rotate(1deg) scale(1.02); /* Efek goyang */
}

/* --- Hero Section --- */
.hero-section { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
.hero-content h1 {
    font-size: 5rem;
    color: #FF6347; /* Merah Tomat */
    -webkit-text-stroke: 2px #333;
    text-shadow: 4px 4px 0 #FFD700;
}
.hero-content .birthday-name {
    font-size: 4rem;
    color: #FFD700; /* Kuning */
    -webkit-text-stroke: 2px #333;
    text-shadow: 4px 4px 0 #FF6347;
    margin-bottom: 30px;
}
.guest-container { margin-bottom: 30px; }
.guest-container p { font-size: 1.2rem; }
#guest-name { font-size: 2rem; color: #FF6347; }
.scroll-down-btn {
    display: inline-block;
    padding: 15px 35px;
    border: 3px solid #333;
    border-radius: 50px;
    background-color: #FFD700; /* Kuning */
    color: #333;
    text-decoration: none;
    font-family: 'Fredoka One', cursive;
    font-size: 1.2rem;
    box-shadow: 6px 6px 0 #333;
    transition: all 0.2s ease;
}
.scroll-down-btn:hover { background-color: #FF6347; transform: scale(1.1); }

/* --- [BARU] Animasi Balon --- */
.balloon-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.balloon {
    width: 70px; height: 90px;
    background-color: rgba(255, 99, 71, 0.7); /* Merah */
    border-radius: 50%;
    position: absolute;
    bottom: -100px;
    animation: float-up 10s infinite ease-in;
}
.balloon:nth-child(2) { left: 30%; background-color: rgba(255, 215, 0, 0.7); animation-duration: 12s; }
.balloon:nth-child(3) { left: 60%; background-color: rgba(147, 112, 219, 0.7); animation-duration: 8s; }
@keyframes float-up { 0% { bottom: -100px; } 100% { bottom: 110vh; } }

/* --- Profile Section --- */
.profile-card { max-width: 500px; margin: 0 auto; text-align: center; }
.profile-photo {
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 3px solid #FFD700;
    overflow: hidden;
    margin: 0 auto 20px auto;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 2.2rem; color: #FF6347; }
.profile-age { font-family: 'Fredoka One', cursive; font-size: 1.5rem; color: #9370DB; }
.profile-desc { font-size: 1.2rem; margin-top: 10px; }

/* --- Details Section --- */
.details-section { text-align: center; }
#countdown { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
.timer-box {
    padding: 20px;
    border-radius: 10px;
    min-width: 100px;
    text-align: center;
    color: #fff;
    border: 3px solid #333;
    box-shadow: 4px 4px 0 #333;
}
.timer-box span { display: block; }
.timer-box span:first-child { font-family: 'Fredoka One', cursive; font-size: 3rem; }
.timer-box span:last-child { font-size: 1rem; }
/* Warna-warni timer */
.color-1 { background-color: #FF6347; } /* Merah */
.color-2 { background-color: #FFD700; color: #333; } /* Kuning */
.color-3 { background-color: #98FB98; color: #333; } /* Hijau */
.color-4 { background-color: #9370DB; } /* Ungu */
.event-card { max-width: 500px; margin: 0 auto; }
.event-card .icon { font-size: 3rem; margin-bottom: 10px; }
.event-card h3 { font-size: 2rem; color: #9370DB; }
.event-btn {
    display: inline-block; margin-top: 10px; margin-right: 10px;
    padding: 8px 15px; border-radius: 50px; text-decoration: none;
    background-color: #FFD700; color: #333; border: 2px solid #333;
    font-family: 'Fredoka One', cursive;
}
.event-btn:hover { background-color: #FF6347; }

/* --- RSVP Section --- */
.rsvp-intro { text-align: center; margin: -30px auto 40px auto; }
.rsvp-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group > label { font-family: 'Fredoka One', cursive; display: block; margin-bottom: 5px; }
.form-group input[type="text"], .form-group textarea {
    width: 100%; padding: 10px; border: 2px solid #333; border-radius: 5px;
    font-family: 'Comic Neue', cursive; font-size: 1.1rem;
}
.radio-group { display: flex; align-items: center; margin-bottom: 10px; }
.radio-group input[type="radio"] { margin-right: 10px; width: auto; }
.radio-group label { margin-bottom: 0; }
.submit-btn {
    display: block; width: 100%; padding: 15px;
    background-color: #FFD700; color: #333;
    border: 3px solid #333; box-shadow: 4px 4px 0 #333;
    border-radius: 10px; font-size: 1.2rem;
    font-family: 'Fredoka One', cursive; cursor: pointer;
}
.submit-btn:hover { background-color: #FF6347; }

/* --- Gallery Section --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.gallery-item { border: 3px solid #fff; border-radius: 10px; overflow: hidden; box-shadow: 5px 5px 0 rgba(0,0,0,0.1); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.gallery-item img:hover { transform: scale(1.1); }

/* --- Footer --- */
.footer-section { background: #3E3A63; color: #fff; padding: 40px 0; text-align: center; border-bottom: none; }
.footer-section h2 { color: #FFD700; }

/* --- Music Button --- */
.music-btn {
    position: fixed;
    bottom: 30px; right: 30px; width: 50px; height: 50px;
    background-color: #FFD700; color: #333;
    border: 3px solid #333; border-radius: 50%;
    font-size: 1.5rem; cursor: pointer; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 4px 4px 0 #333;
}
.music-btn.is-playing { animation: spin 4s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- [BARU] Styling Buku Ucapan Selamat --- */
.guestbook-section {
    background-color: rgba(255,255,255,0.2); /* Sedikit beda background */
}

.guestbook-container {
    /* Menggunakan gaya doodle-card yang sudah ada */
    max-width: 700px; 
    margin: 0 auto; 
    max-height: 400px; /* Batasi tinggi */
    overflow-y: auto;  /* Tambah scroll jika penuh */
    padding: 10px 20px; /* Padding di dalam kartu */
}

.guestbook-card {
    padding: 15px 0;
    border-bottom: 2px dashed #FFB7C5; /* Pemisah pink putus-putus */
}

.guestbook-card:last-child {
    border-bottom: none;
}

.guestbook-card h3 {
    font-family: 'Fredoka One', cursive; /* Font judul lucu */
    font-size: 1.3rem;
    color: #FF6347; /* Merah Tomat */
    margin-bottom: 5px;
}

.guestbook-card p {
    font-size: 1rem;
    color: #3E3A63; /* Ungu tua */
    font-style: italic;
}

/* =================================================================
   [PENTING] KONDISI CSS UNTUK RASIO HP (TEMA ULANG TAHUN)
   ================================================================= */

/* Aturan ini berlaku untuk layar di bawah 768px (Tablet & HP) */
@media (max-width: 768px) {
    .container {
        padding: 0 15px; /* Kurangi padding container */
    }

    /* Kecilkan font judul utama */
    h1 { font-size: 3.5rem !important; } /* Paksa override jika perlu */
    h2 { font-size: 2.2rem; }
    .hero-content .birthday-name { font-size: 2.8rem; }
    #guest-name { font-size: 1.5rem; }

    .doodle-card { padding: 20px; } /* Kurangi padding kartu */
}

/* Aturan ini berlaku untuk layar di bawah 480px (HP) */
@media (max-width: 480px) {
    /* Kecilkan font lebih jauh */
    h1 { font-size: 2.8rem !important; }
    .hero-content .birthday-name { font-size: 2.2rem; }
    h2 { font-size: 2rem; }
    
    /* Perbaikan Countdown Timer */
    #countdown {
        gap: 10px;
    }
    .timer-box {
        padding: 10px;
        min-width: 70px; /* Lebih kecil */
    }
    .timer-box span:first-child { font-size: 2rem; }

    /* Perbaikan Kartu Profil */
    .profile-photo {
        width: 120px;
        height: 120px;
    }
    .profile-name { font-size: 1.8rem; }
    .profile-age { font-size: 1.2rem; }
    .profile-desc { font-size: 1rem; }

    /* Perbaikan Form */
    .rsvp-form { padding: 20px; }

    /* Perbaikan Tombol */
    .scroll-down-btn { padding: 10px 25px; font-size: 1rem; }
    .submit-btn { padding: 12px; font-size: 1rem; }
    .event-btn { padding: 6px 12px; font-size: 0.9rem; }
    
    /* Perbaikan Tombol Musik */
    .music-btn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 1.2rem;
    }
}