:root {
    --pink: #e195ab;
    --bg: #fff9f5;
    --text: #5d4037;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    min-height: 100%;
}

header {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: var(--pink);
    margin-bottom: 10px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px;
}

.moment {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 150px;
}

.moment.reverse { flex-direction: row-reverse; }
/* Menghilangkan layout samping-sampingan khusus untuk section middle */
.moment.middle {
    display: flex;
    justify-content: center; /* Ketengah secara horizontal */
    align-items: center;     /* Ketengah secara vertical */
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 100px;
}

.photo-centered {
    width: 100%;
    max-width: 500px; /* Atur lebar maksimal GIF */
    text-align: center;
}

.photo-centered img {
    width: 80%; /* Agar tidak terlalu memenuhi layar di HP */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px; /* Samakan dengan ukuran foto sebelumnya */
}

.slider {
    display: flex;
    overflow-x: auto; /* Agar bisa di-scroll ke samping */
    scroll-snap-type: x mandatory; /* Efek magnet saat geser */
    scroll-behavior: smooth;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
}

.slider::-webkit-scrollbar {
    display: none; /* Sembunyikan scrollbar di Chrome/Safari */
}

.slider img {
    flex: 0 0 100%; /* Satu foto mengambil 100% lebar slider */
    width: 100%;
    height: 300px; /* Kamu bisa sesuaikan tingginya */
    object-fit: cover; /* Agar foto tidak gepeng */
    scroll-snap-align: center; /* Foto berhenti tepat di tengah */
}

.swipe-hint {
    text-align: center;
    font-size: 0.7rem;
    color: #a1887f;
    margin-top: 8px;
    font-style: italic;
    opacity: 0.7;
}

.photo img {
    width: 100%;
    max-width: 450px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.story h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: var(--pink);
}

/* Floating Button */
.floating-btn {
    position: fixed;
    bottom: 20px; /* Jarak dari bawah sedikit dikurangi agar aman di HP */
    right: 20px;  /* Jarak dari kanan */
    width: 60px;  /* Ukuran standar HP agar tidak terlalu besar */
    height: 60px;
    border-radius: 50%;
    background: #e195ab;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(225, 149, 171, 0.5);
    
    /* KUNCI UTAMA: Z-INDEX */
    z-index: 9999 !important; 
    
    /* Agar tombol tidak bisa 'tergeser' atau 'tersembunyi' */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Mencegah klik yang tidak sengaja ter-zoom di iPhone */
    touch-action: manipulation;
}

.floating-btn:active { transform: scale(0.9); }

.fab-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antara tombol musik dan bunga */
    z-index: 9999;
}

.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e195ab;
    border: 2px solid white;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    touch-action: manipulation;
}

/* Warna berbeda untuk tombol musik agar ada variasi */
#musicBtn {
    background: #a1887f; /* Warna cokelat lembut */
    width: 50px; /* Sedikit lebih kecil agar tombol bunga tetap utama */
    height: 50px;
}

.floating-btn:active {
    transform: scale(0.9);
}

/* Animasi Rose Bloom */
.rose-emoji {
    position: fixed;
    pointer-events: none;
    z-index: 99;
    animation: bloomAndFade 3s ease-out forwards;
}

@keyframes bloomAndFade {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scale(2) rotate(45deg); opacity: 0; }
}