html, body {
    max-width: 100%;
    overflow-x: hidden; 
    position: relative; 
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', serif; 
    color: #333;
    background-color: #fcfcfc;
}
body.locked { overflow: hidden; }

/* KELAS PLACEHOLDER (Pengganti Foto) */
.placeholder-photo, .placeholder-avatar {
    background-color: rgba(0, 0, 0, 0.1);
    display: flex; justify-content: center; align-items: center; color: #888; font-size: 0.8rem;
}
.placeholder-photo { width: 100%; height: 100%; border-radius: inherit; }
.placeholder-avatar { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 15px auto; }

/* =========================================================
   HALAMAN COVER (REDESIGN TERANG & ELEGAN)
   ========================================================= */

/* Variabel Warna Tema (Berdasarkan referensi) */
:root {
    --warna-marun: #82222a; /* Warna merah gelap untuk teks dan tombol */
}

#cover-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    
    /* Hapus gradient gelap, ganti dengan gambar background terang */
    background-color: #FDF8F5;
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    
    display: flex; justify-content: center; align-items: center; text-align: center;
    z-index: 9999; transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    overflow: hidden; 
}

/* Pengaturan Dasar & Kinerja Animasi */
.cover-dekor {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0; /* Disembunyikan dulu sebelum di-reveal */
    will-change: translate, rotate, opacity; /* Mengoptimalkan kinerja GPU HP */
}

/* Bunga Atas - Diperbesar dan digeser keluar (ke atas & kiri/kanan) */
.atas-kiri { 
    top: -30px;        /* Geser tembus ke atas */
    left: -40px;       /* Geser tembus ke kiri */
    width: 250px;      /* Ukuran dasar diperbesar */
    max-width: 65vw;   /* Responsif: otomatis mengecil di HP kecil seperti iPhone SE */
transform-origin: top left; /* Titik tumpu ayunan di sudut kiri atas */
    animation: 
        revealAtasKiri 2s cubic-bezier(0.22, 1, 0.36, 1) forwards, 
        anginKiri 4s ease-in-out -1.5s infinite alternate; /* Delay minus agar sudah bergerak saat muncul */
}

.atas-kanan { 
    top: -30px;        /* Geser tembus ke atas */
    right: -40px;      /* Geser tembus ke kanan */
    width: 250px;      /* Ukuran dasar diperbesar */
    max-width: 65vw;   
transform-origin: top right; /* Titik tumpu ayunan di sudut kanan atas */
    animation: 
        revealAtasKanan 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, 
        anginKanan 3.5s ease-in-out -0.5s infinite alternate;
}

/* Lilin Bawah - Digeser keluar (ke bawah & kiri/kanan) */
.bawah-kiri { 
    bottom: -85px;     /* Geser tembus ke bawah */
    left: -55px;       /* Geser tembus ke kiri */
    width: 175px; 
    max-width: 48vw;   /* Aman untuk layar sempit */
transform-origin: bottom left; /* Titik tumpu ayunan di sudut kiri bawah */
    animation: 
        revealBawahKiri 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards, 
        anginKiri 3.8s ease-in-out -2s infinite alternate;
}

.bawah-kanan { 
    bottom: -85px;     /* Geser tembus ke bawah */
    right: -55px;      /* Geser tembus ke kanan */
    width: 175px; 
    max-width: 48vw; 
transform-origin: bottom right; /* Titik tumpu ayunan di sudut kanan bawah */
    animation: 
        revealBawahKanan 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards, 
        anginKanan 4.2s ease-in-out -1s infinite alternate;
}
/* =========================================================
   KEYFRAMES (RUMUS PERGERAKAN)
   ========================================================= */

/* 1. Animasi Masuk (Reveal dari masing-masing sudut) */
@keyframes revealAtasKiri {
    0% { opacity: 0; translate: -40px -40px; }
    100% { opacity: 1; translate: 0px 0px; }
}
@keyframes revealAtasKanan {
    0% { opacity: 0; translate: 40px -40px; }
    100% { opacity: 1; translate: 0px 0px; }
}
@keyframes revealBawahKiri {
    0% { opacity: 0; translate: -40px 40px; }
    100% { opacity: 1; translate: 0px 0px; }
}
@keyframes revealBawahKanan {
    0% { opacity: 0; translate: 40px 40px; }
    100% { opacity: 1; translate: 0px 0px; }
}

/* 2. Animasi Hembusan Angin (Swaying/Ayunan) */
/* Menggunakan rotate independen agar tidak bentrok dengan animasi masuk */
@keyframes anginKiri {
    0% { rotate: 0deg; }
    100% { rotate: 4deg; }
}
@keyframes anginKanan {
    0% { rotate: 0deg; }
    100% { rotate: -4deg; }
}

/* Wadah Utama Konten */
#cover-page .cover-content {
    position: relative; 
    z-index: 10; 
    width: 100%; 
    height: 100vh;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; /* Membagi jarak secara otomatis */
    padding: 0 15px;
}

/* Teks "The Wedding of" */
#cover-page .title-small { 
    color: var(--warna-marun); 
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600; 
    font-size: clamp(0.75rem, 2.5vw, 0.9rem); 
    
    /* UBAH BAGIAN INI: Dari -15px menjadi 5px atau 10px */
    margin-bottom: 8px; 
    
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Nama Mempelai */
#cover-page .nama-mempelai { 
    color: var(--warna-marun); 
    font-family: 'Luxurious Script', cursive; 
    
    /* UKURAN DIPERBESAR: 
       Batas minimum dinaikkan (2.5rem), laju pembesaran naik (16vw), maksimal makin besar (5.5rem) */
    font-size: clamp(2.5rem, 16vw, 5.5rem); 
    
    font-weight: 400;
    margin-bottom: 0; 
    line-height: 1.1; 
    padding: 0 10px; 
}

/* Simbol & */
#cover-page .simbol-dan { 
    font-family: 'Luxurious Script', cursive; 
    color: var(--warna-marun); 
    
    /* Ikut diperbesar sedikit agar seimbang dengan nama */
    font-size: clamp(1.5rem, 7vw, 2.5rem); 
    
    vertical-align: middle;
    margin: 0 8px;
    opacity: 0.8; 
}

/* Desain Foto Kubah (Arch) Tengah */
.cover-photo-section {
    position: relative;
    
    /* Margin bawah diperlebar dari 35px menjadi 60px */
    margin: 0 0 45px 0; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Desain Foto Kubah (Arch) Tengah (Dengan Animasi Mengambang) */
.arch-photo {
    width: 180px; 
    height: 245px;
    border-radius: 90px 90px 0 0; 
    overflow: hidden;
    
    /* TAMBAHAN BARU: Garis tepi krem agar foto terlihat lebih tegas */
    border: 2px solid #FDF8F5;
    
    /* Animasi mengambang 6 detik, berulang terus-menerus */
    animation: floatArch 6s ease-in-out infinite; 
}

.arch-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bunga penutup ujung bawah foto (Mengambang Independen) */
.bunga-tengah {
    position: absolute;
    bottom: -25px; 
    width: 220px;
    z-index: 3;
    pointer-events: none;
    
    /* Animasi mengambang dengan delay 1 detik agar tidak bergerak 
       bersamaan persis dengan foto (terlihat lebih organik) */
    animation: floatBunga 6s ease-in-out 1s infinite;
}

/* =========================================================
   KEYFRAMES MENGAMBANG (FLOATING & SHADOW)
   ========================================================= */

/* Animasi untuk Foto Kubah */
@keyframes floatArch {
    0% { 
        transform: translateY(0px); 
        /* UBAH DI SINI: Opacity bayangan dinaikkan (dari 0.15 ke 0.35) agar jauh lebih gelap dan terlihat jelas */
        box-shadow: 0 15px 30px rgba(130, 34, 42, 0.35); 
    }
    50% { 
        transform: translateY(-12px); 
        /* UBAH DI SINI: Bayangan saat foto melayang ke atas juga dipertegas */
        box-shadow: 0 25px 45px rgba(130, 34, 42, 0.20); 
    }
    100% { 
        transform: translateY(0px); 
        box-shadow: 0 15px 30px rgba(130, 34, 42, 0.35); 
    }
}

/* Animasi untuk Bunga Bawah Foto */
@keyframes floatBunga {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { 
        /* Bunga ikut melayang, tapi ditambah sedikit ayunan miring (2 derajat) */
        transform: translateY(-8px) rotate(2deg); 
    }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Bagian Tamu Bawah (Jarak Diperlebar) */
#cover-page .tamu-section { 
    /* Jarak dari nama mempelai ke area tamu dirapatkan sedikit menjadi 40px */
    margin-top: 40px !important; 
    
    background: transparent !important; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 5px; 
}

/* Teks "Kepada Yth:" */
#cover-page .teks-kepada { 
    color: var(--warna-marun); 
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(0.8rem, 3vw, 0.9rem); 
    margin-bottom: 0; 
}

/* Nama Tamu */
#cover-page .nama-tamu { 
    color: var(--warna-marun); 
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(1rem, 4.5vw, 1.25rem); 
    font-weight: 800; 
    margin-bottom: 12px; 
    max-width: 85vw; /* Jangan melebihi 85% lebar layar */
    word-wrap: break-word; /* Jika nama sangat panjang, akan otomatis turun ke baris baru */
}

/* =========================================================
   TOMBOL BUKA UNDANGAN (DENGAN EFEK MENGKILAT)
   ========================================================= */

#cover-page #btn-buka {
    background-color: var(--warna-marun);
    color: #ffffff; 
    border: none;
    padding: 8px 24px; 
    border-radius: 30px; 
    cursor: pointer; 
    font-family: 'Nunito Sans', sans-serif; 
    font-weight: 800; 
    font-size: 0.75rem; 
    letter-spacing: 1px; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(130, 34, 42, 0.3);
    margin-bottom: 12px; 
    transition: all 0.3s ease;
    
    /* DUA BARIS INI WAJIB ADA AGAR KILAPAN BERFUNGSI */
    position: relative; 
    overflow: hidden; /* Memotong kilauan yang keluar dari batas tombol */
}

#cover-page #btn-buka:hover { 
    transform: translateY(-2px); 
    background-color: #5e161c; 
    box-shadow: 0 6px 15px rgba(130, 34, 42, 0.4); 
}

/* Matikan SVG (Ikon surat) jika masih ada */
#cover-page #btn-buka svg {
    display: none;
}

/* Lapisan Kilap (Shine Effect) */
#cover-page #btn-buka::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Mulai dari luar sisi kiri tombol */
    width: 40%;  /* Lebar kilauannya */
    height: 100%;
    
    /* Membuat gradasi cahaya (transparan -> putih -> transparan) */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Memiringkan garis cahaya agar terlihat 3D/Realistis */
    transform: skewX(-25deg);
    
    /* Memutar animasi tanpa henti setiap 3.5 detik */
    animation: kilapTombol 3.5s infinite;
    
    /* Agar lapisan kilap ini tidak menghalangi kursor saat tombol diklik */
    pointer-events: none; 
}

/* Rumus Animasi Kilap */
@keyframes kilapTombol {
    0% { left: -100%; }
    15% { left: 200%; }  /* Cahaya melintas cepat selama 15% dari total waktu */
    100% { left: 200%; } /* Sisa waktunya jeda diam sebelum mengulang */
}

/* Disclaimer Nama */
#cover-page .disclaimer-nama { 
    color: var(--warna-marun); 
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(0.65rem, 2vw, 0.75rem); 
    font-style: italic; 
    opacity: 0.85; 
    line-height: 1.4;
    margin-top: 0;
}

/* Efek Buka Undangan */
#cover-page.slide-up { 
    transform: translateY(-100%); 
    opacity: 0; 
    pointer-events: none; 
}

/* Animasi Masuk (Fade Up) - URUTAN DIBALIK */
#cover-page .cover-photo-section, 
#cover-page .header-cover, 
#cover-page .tamu-section {
    opacity: 0; 
    transform: translateY(20px); 
    animation: teksCoverReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Karena foto di atas, foto muncul paling awal (0.2s) */
#cover-page .cover-photo-section { animation-delay: 0.2s; } 

/* Teks nama menyusul (0.5s) */
#cover-page .header-cover { animation-delay: 0.5s; } 

/* Bagian tombol tamu muncul paling akhir (0.8s) */
#cover-page .tamu-section { animation-delay: 0.8s; }

@keyframes teksCoverReveal { 
    0% { opacity: 0; transform: translateY(20px); } 
    100% { opacity: 1; transform: translateY(0); } 
}

/* SECTIONS UMUM */
.section { min-height: 100vh; padding: 60px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; }

/* =========================================================
   HALAMAN HERO (REDESIGN TERANG & ELEGAN)
   ========================================================= */
.hero-bg {
    background-color: #FDF8F5 !important;
    background-image: url('assets/background.webp') !important;
    background-size: cover;
    background-position: center;
    position: relative; 
    overflow: hidden;
}

/* --- DEKORASI SUDUT HERO --- */
.hero-dekor {
    position: absolute;
    
    /* UBAH ANGKA INI: Naikkan dari 2 menjadi 10 agar posisinya paling depan menutupi bingkai */
    z-index: 10; 
    
    pointer-events: none;
    opacity: 0; 
    will-change: translate, rotate, opacity;
}

/* Posisi Dekorasi Hero (Diperbesar) */
.h-atas-kiri { 
    top: -35px; 
    left: -45px; 
    width: 280px;      /* Diperbesar dari 250px */
    max-width: 70vw;   /* Batas maksimal di HP diperbesar */
    transform-origin: top left; 
}
.h-atas-kanan { 
    top: -35px; 
    right: -45px; 
    width: 280px;      /* Diperbesar dari 250px */
    max-width: 70vw;   
    transform-origin: top right; 
}

.bunga-bawah-latar {
    position: absolute;
    bottom: -45px; 
    left: 50%;
    transform: translateX(-50%);
    width: 130%; 
    max-width: 500px;
    z-index: 3; 
    opacity: 0; 
    pointer-events: none;
    
    /* TAMBAHKAN BARIS INI: Agar saat berayun, akarnya tetap diam di bawah */
    transform-origin: bottom center; 
}
/* =========================================================
   MODE DESKTOP (SIMULATOR PRESISI iPHONE SE - 375x667)
   ========================================================= */
@media (min-width: 500px) {
    /* 1. Latar Belakang Monitor Gelap & Kunci Scroll Browser */
    html {
        background-color: #2b2b2b; /* Warna gelap agar "HP" menonjol */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden; /* Mematikan scroll monitor */
    }
    
    /* 2. Body Berubah Menjadi Layar HP iPhone SE */
    body { 
        width: 375px !important; 
        height: 667px !important; /* Tinggi fix standar iPhone SE */
        max-height: 100vh; /* Jaga-jaga jika monitor kecil */
        margin: 0 !important; 
        background-color: #fcfcfc;
        border-radius: 15px; /* Ujung melengkung ala HP */
        box-shadow: 0 15px 50px rgba(0,0,0,0.5); /* Bayangan HP */
        
        /* PENTING: Scroll sekarang berada di dalam layar HP ini! */
        overflow-y: auto; 
        overflow-x: hidden;
        position: relative;
    }
    
    /* 3. MENGGANTI SEMUA SATUAN "VH" MENJADI PIXEL (PX) */
    /* Karena jika pakai vh, ia akan menghitung tinggi monitor, bukan tinggi HP */
    
    #cover-page { 
        height: 667px !important; 
        position: absolute !important; /* Mengikuti body HP */
        top: 0; left: 0; width: 100%;
    }
    #cover-page.slide-up { 
        transform: translateY(-100%) !important; 
    }
    /* --- PENYESUAIAN KHUSUS KONTEN COVER DI DESKTOP --- */
    #cover-page .cover-content {
        height: 667px !important; /* Kunci tinggi wadah agar teks tidak melar */
        justify-content: flex-start !important; /* Atur ulang posisi flex */
        padding-top: 50px !important; /* Dorong dari atas secara spesifik */
    }

    #cover-page .cover-photo-section {
        margin: 15px 0 35px 0 !important; /* Kunci jarak atas-bawah foto kubah */
    }

    /* Kunci ukuran Font agar tidak menggunakan rumus VW (Viewport Width) yang bikin Font raksasa di Desktop */
    #cover-page .nama-mempelai {
        font-size: 3.5rem !important; /* Ukuran statis untuk layar SE */
        line-height: 1 !important;
    }
    
    #cover-page .simbol-dan {
        font-size: 2rem !important;
    }

    #cover-page .tamu-section {
        margin-top: 30px !important; /* Kunci jarak ruang ke tamu */
    }
    
    #cover-page .nama-tamu {
        font-size: 1.15rem !important; /* Kunci ukuran font nama tamu */
    }
    
    /* Kunci animasi bunga cover agar tidak meleset posisinya */
    #cover-page .atas-kiri, #cover-page .atas-kanan {
        max-width: none !important;
        width: 250px !important;
    }
    #cover-page .bawah-kiri, #cover-page .bawah-kanan {
        max-width: none !important;
        width: 175px !important;
        bottom: -85px !important;
    }

    .section, .countdown-bg, .bg-penutup, .bg-turut {
        min-height: 667px !important;
    }

    #hero .bingkai-tengah {
        max-height: 566px !important; 
        height: 566px !important;
        
        /* TAMBAHKAN BARIS INI: Kunci kerampingan di desktop */
        max-width: 310px !important; 
    }
    /* --- PENYESUAIAN KHUSUS KONTEN HERO DI DESKTOP --- */
    
    /* Kunci ukuran Font Nama Mempelai Vertikal agar tidak melar mengikuti lebar monitor */
    #hero .nama-mempelai-vertikal {
        font-size: 4.5rem !important; /* Ukuran statis yang pas untuk 375px */
        line-height: 1.1 !important;
    }
    
    #hero .nama-mempelai-vertikal .simbol-dan {
        font-size: 2.5rem !important;
        margin: 5px 0 !important;
    }

    /* Kunci padding teks pengantar agar pemotongan barisnya (word-wrap) persis seperti HP */
    #hero .intro-text {
        padding: 0 45px !important;
    }

    /* Kunci ukuran dekorasi sudut Hero agar tidak berantakan */
    #hero .h-atas-kiri, #hero .h-atas-kanan {
        max-width: none !important;
        width: 280px !important;
    }
    
    #hero .h-bawah-kiri, #hero .h-bawah-kanan {
        max-width: none !important;
        width: 210px !important;
        bottom: -90px !important;
    }

    .slideshow-container {
        height: 500px !important; /* 75% dari 667px */
    }

    .countdown-content {
        margin-top: 500px !important; /* 75% dari 667px */
    }

    /* 4. Perbaikan Posisi Tombol yang Mengambang (Fixed/Absolute) */
    .footer-wrapper {
        position: absolute !important; 
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Rumus matematika canggih agar tombol musik terkunci tepat di sudut "layar HP" */
    #music-toggle { 
        position: fixed !important;
        /* (Setengah Monitor - Setengah HP) + Margin Asli */
        right: calc(max(0px, 50vw - 187.5px) + 20px) !important; 
        bottom: calc(max(0px, 50vh - 333.5px) + 85px) !important; 
    }

    /* 5. Matikan efek background fixed di PC agar tidak error di scroll container */
    html body #hero, html body #ayat, html body #profil, html body #countdown, html body #event, html body #story, html body #gallery, html body #gift, html body #rsvp, html body #penutup {
        background-attachment: scroll !important; 
    }
}
/* =========================================================
   PENGECUALIAN UKURAN LILIN (HANYA iPHONE SE & DESKTOP)
   ========================================================= */
@media screen and (max-width: 380px), screen and (min-width: 500px) {
    
    /* Pengecilan Lilin Cover (Menggunakan ID agar prioritasnya tertinggi) */
    #cover-page .bawah-kiri { 
        width: 130px !important; 
        bottom: -60px !important; 
        left: -40px !important; 
        max-width: none !important; 
    }
    #cover-page .bawah-kanan { 
        width: 130px !important; 
        bottom: -60px !important; 
        right: -40px !important; 
        max-width: none !important; 
    }
    
    /* Pengecilan Lilin Hero (Menggunakan ID agar prioritasnya tertinggi) */
    #hero .h-bawah-kiri { 
        width: 140px !important; 
        bottom: -65px !important; 
        left: -40px !important; 
        max-width: none !important; 
    }
    #hero .h-bawah-kanan { 
        width: 140px !important; 
        bottom: -65px !important; 
        right: -40px !important; 
        max-width: none !important; 
    }

}

/* Animasi Aktif HANYA saat layar di-scroll ke bagian Hero (#hero.active) */
#hero.active .h-atas-kiri { animation: revealAtasKiri 2s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginKiri 4s ease-in-out -1.5s infinite alternate; }
#hero.active .h-atas-kanan { animation: revealAtasKanan 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginKanan 3.5s ease-in-out -0.5s infinite alternate; }
#hero.active .h-bawah-kiri { animation: revealBawahKiri 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginKiri 3.8s ease-in-out -2s infinite alternate; }
#hero.active .h-bawah-kanan { animation: revealBawahKanan 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginKanan 4.2s ease-in-out -1s infinite alternate; }

#hero.active .bunga-bawah-latar { 
    animation: heroSlideUpSolid 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, 
               ayunBawahTengahTerkunci 8s ease-in-out -1s infinite !important; 
}

/* KEYFRAME AYUNAN BUNGA HERO (Hanya Mengatur Rotasi agar tidak bentrok dengan pergerakan naik) */
@keyframes ayunBawahTengahTerkunci { 
    /* MURNI HANYA ROTASI, JANGAN ADA KATA 'transform' DI SINI */
    0% { rotate: 0deg; }   
    25% { rotate: 1.5deg; }  
    75% { rotate: -1.5deg; } 
    100% { rotate: 0deg; }  
}
/* --- KONTEN HERO --- */
#hero .cover-content { 
    position: relative; 
    z-index: 5; 
    
    /* UBAH DI SINI: Disamakan dengan batas bingkai baru agar presisi */
    max-width: 310px; 
    
    margin-top: -20px; 
}

/* Menyembunyikan teks sejak awal agar tidak berkedip/bertabrakan saat animasi */
#hero .title-small, 
#hero .nama-mempelai-vertikal, 
#hero .intro-text, 
#hero .tanggal { 
    opacity: 0; 
}

/* Penyesuaian Teks */
#hero .title-small { 
    font-family: 'Nunito Sans', sans-serif; 
    font-weight: 600; 
    font-size: 1.1rem; 
    color: var(--warna-marun); /* Diubah menjadi Hitam */
    margin-top: 20px; 
    margin-bottom: 25px; 
    text-transform: none; 
    letter-spacing: 1px;
}

.nama-mempelai-vertikal { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Luxurious Script', cursive; 
    font-size: clamp(4rem, 18vw, 6rem); /* Nama mempelai diperbesar maksimal */
    font-weight: 400; 
    color: var(--warna-marun); 
    line-height: 1.1; 
}

.nama-mempelai-vertikal .simbol-dan { 
    font-family: 'Luxurious Script', cursive; 
    font-size: clamp(2rem, 9vw, 3rem); 
    margin: 5px 0; 
    color: var(--warna-marun); 
    opacity: 0.8;
}

#hero .intro-text { 
    font-family: 'Nunito Sans', sans-serif; 
    font-size: 0.9rem; 
    line-height: 1.6; 
    margin: 30px auto 20px auto; 
    
    /* UBAH DI SINI: Padding dikurangi agar teks tidak terlalu terjepit di bingkai ramping */
    padding: 0 25px; 
    
    color: var(--warna-marun); 
    font-weight: 500;
}
#hero .tanggal { 
    font-family: 'Nunito Sans', sans-serif; 
    font-size: 1.35rem; 
    font-weight: 800; 
    margin-top: 10px; 
    margin-bottom: 5px; 
    color: var(--warna-marun); /* Diubah menjadi Hitam */
    letter-spacing: 3px; 
}

/* --- BINGKAI KAPSUL TENGAH --- */
#hero .bingkai-tengah { 
    /* UBAH DI SINI: Lebar diperkecil dari 88% menjadi 80%, dan max-width dari 360px menjadi 310px */
    width: 80%; 
    max-width: 310px; 
    
    height: 580px; 
    max-height: 85vh; 
    border-radius: 999px; 
    position: absolute; top: 48%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.85); 
    pointer-events: none; z-index: 4; will-change: transform, opacity;
}

/* Kaca Putih & Pemotong Bunga */
#hero .bingkai-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(253, 248, 245, 0.7); 
    border-radius: 999px; 
    overflow: hidden; /* Memotong bunga agar tetap di dalam kaca */
    box-shadow: 0 15px 35px rgba(130, 34, 42, 0.1);
}


/* Garis Merah Marun (Menempel Pas di Tepi Bingkai) */
#hero .bingkai-tengah::after {
    content: ''; 
    position: absolute; 
    
    /* Ubah semua nilai menjadi 0 agar ukurannya sama persis dengan kaca putih */
    top: 0; left: 0; right: 0; bottom: 0; 
    
    border: 5px solid var(--warna-marun); 
    border-radius: 999px; 
    pointer-events: none; 
    opacity: 0; 
    will-change: clip-path, opacity;
}

/* --- ANIMASI SMART SCROLL (Muncul berurutan dengan mulus) --- */
#hero.active .bingkai-tengah { animation: revealFrameKaca 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#hero.active .bingkai-tengah::after { animation: drawStrokeSweepOrange 2s ease-in-out 0.8s forwards; }

/* Menghapus animasi dari .cover-content agar tidak bentrok, memanggil langsung teksnya */
#hero.active .title-small { animation: heroFadeDown 1.2s ease-out 0.6s forwards; }
#hero.active .nama-mempelai-vertikal { animation: heroZoomIn 1.5s ease-out 0.8s forwards; }
#hero.active .intro-text { animation: heroFadeUp 1.2s ease-out 1s forwards; }
#hero.active .tanggal { animation: heroFadeUp 1.2s ease-out 1.2s forwards; }

/* =========================================================
   KEYFRAMES UMUM (Digunakan oleh Hero dan elemen lain)
   ========================================================= */
@keyframes revealFrameKaca { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85) translateY(20px); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); } }
@keyframes drawStrokeSweepOrange { 0% { opacity: 0; clip-path: inset(0% 50% 100% 50%); } 15% { opacity: 1; clip-path: inset(0% 0% 100% 0%); } 100% { opacity: 1; clip-path: inset(0% 0% 0% 0%); } }
@keyframes heroFadeDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroZoomIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes heroFadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeRight { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes simpleFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes countdownZoomIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(0.75); } }
@keyframes zoomOutReveal { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideFromLeft { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } }
/* Animasi khusus untuk elemen yang posisinya di tengah (menggunakan translateX -50%) */
@keyframes heroFadeUpCenter { 
    /* UBAH DI SINI: Naikkan jarak dari 20px menjadi 80px (atau bahkan 100px) agar kemunculannya lebih terasa */
    0% { opacity: 0; transform: translate(-50%, 80px); } 
    100% { opacity: 1; transform: translate(-50%, 0); } 
}

/* KEYFRAME KHUSUS: Meluncur dari luar layar bawah TANPA efek transparan */
@keyframes heroSlideUpSolid { 
    /* Mengurus posisi dari bawah (100%) ke posisi normal (0) */
    0% { opacity: 1; transform: translate(-50%, 100%); } 
    100% { opacity: 1; transform: translate(-50%, 0); } 
}
/* KEYFRAME MELAYANG UNTUK BUCKET BUNGA EVENT */
@keyframes floatBucket {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); } 
    100% { transform: translateY(0px); }
}

/* CARI DAN GANTI BARIS INI DI BAGIAN 2 (AKAD) */
.event-header + .event-kapsul.active .event-bucket { 
    animation: zoomOutReveal 1.2s ease-out 0.6s forwards, 
               floatBucket 4s ease-in-out 1.8s infinite !important; 
}

/* CARI DAN GANTI BARIS INI DI BAGIAN 3 (RESEPSI) */
.event-kapsul + .event-kapsul.active .event-bucket { 
    animation: zoomOutReveal 1.2s ease-out 0.6s forwards, 
               floatBucket 4.5s ease-in-out 1.8s infinite !important; 
}
/* =========================================================
   HALAMAN AYAT (REDESIGN KAPSUL ELEGAN)
   ========================================================= */
.ayat-bg { 
    background-color: #FDF8F5 !important;
    background-image: url('assets/background.webp') !important;
    background-size: cover;
    background-position: center;
    position: relative; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 60px 15px;
}

/* --- DEKORASI AYAT --- */
.ayat-dekor {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    will-change: translate, rotate, opacity;
}

/* Bunga Atas (Sama dengan Hero/Cover) */
.a-atas-kiri { top: -35px; left: -45px; width: 280px; max-width: 70vw; transform-origin: top left; }
.a-atas-kanan { top: -35px; right: -45px; width: 280px; max-width: 70vw; transform-origin: top right; }

/* Bunga Bawah Merambat Naik */
.a-bawah-latar {
    position: absolute;
    bottom: -15px; 
    left: -50%;
    right: -50%;
    margin: 0 auto;
    width: 115%; 
    max-width: 500px; 
    z-index: 3; 
    
    /* Titik pusat putaran diatur di tengah bawah agar ayunannya natural */
    transform-origin: bottom center;
}

/* Animasi Aktif HANYA saat layar di-scroll ke bagian Ayat (#ayat.active) */
#ayat.active .a-atas-kiri { animation: revealAtasKiri 2s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginKiri 4s ease-in-out -1.5s infinite alternate; }
#ayat.active .a-atas-kanan { animation: revealAtasKanan 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginKanan 3.5s ease-in-out -0.5s infinite alternate; }
#ayat.active .a-bawah-latar { animation: heroFadeUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; } 

/* --- BINGKAI KAPSUL AYAT --- */
.bingkai-kapsul-ayat {
    position: relative;
    z-index: 5;
    width: 90%;
    max-width: 360px;
    background: rgba(253, 248, 245, 0.7); 
    border-radius: 999px;
    padding: 50px 20px 70px 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 35px rgba(130, 34, 42, 0.08); 
    opacity: 0; 
}
/* Garis Merah Marun (Sama seperti halaman Hero) */
.bingkai-kapsul-ayat::after {
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    border: 5px solid var(--warna-marun); 
    border-radius: 999px; 
    pointer-events: none; 
    opacity: 0; 
    will-change: clip-path, opacity;
}

/* --- ISI KONTEN AYAT --- */
.bunga-bucket-ayat {
    width: 175px; /* Ukuran pas untuk bucket bunga tengah */
    height: auto;
    margin-bottom: 15px;
    opacity: 0;
}

.inisial-ayat {
    font-family: 'Luxurious Script', cursive;
    font-size: clamp(4rem, 18vw, 5rem);
    color: var(--warna-marun);
    margin-bottom: 25px;
    opacity: 0;
    line-height: 1;
}

.inisial-ayat .simbol-dan {
    font-size: clamp(2rem, 8vw, 3rem);
    margin: 0 10px;
}

.teks-ayat {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--warna-marun);
    line-height: 1.6;
    padding: 0 15px;
    margin-bottom: 20px;
    opacity: 0;
    font-weight: 500;
}

.sumber-ayat {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--warna-marun);
    letter-spacing: 1px;
    opacity: 0;
}

/* --- ANIMASI SMART SCROLL AYAT (Muncul Berurutan) --- */
#ayat.active .bingkai-kapsul-ayat { animation: heroFadeUp 1.5s ease-out 0.2s forwards; }

/* Animasi garis kapsul menyapu mengelilingi bingkai */
#ayat.active .bingkai-kapsul-ayat::after { animation: drawStrokeSweepOrange 2s ease-in-out 0.8s forwards; }

/* Bunga bawah muncul lalu berayun pelan ke kiri dan kanan */
#ayat.active .a-bawah-latar { animation: heroFadeUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards, anginBawahTengah 4s ease-in-out -1s infinite alternate; }

#ayat.active .bunga-bucket-ayat { animation: zoomOutReveal 1.5s ease-out 0.6s forwards; }
#ayat.active .inisial-ayat { animation: heroZoomIn 1.5s ease-out 0.8s forwards; }
#ayat.active .teks-ayat { animation: heroFadeUp 1.2s ease-out 1s forwards; }
#ayat.active .sumber-ayat { animation: heroFadeUp 1.2s ease-out 1.2s forwards; }

/* Ayunan khusus untuk bunga yang berada di tengah bawah */
@keyframes anginBawahTengah { 
    0% { transform: rotate(-2deg); } 
    100% { transform: rotate(2deg); } 
}

/* =========================================================
   HALAMAN PROFIL (REDESIGN)
   ========================================================= */
.profil-bg {
    background-color: var(--warna-marun) !important;
    background-image: none !important; 
    position: relative;
    overflow: hidden;
    
    /* UBAH DI SINI: Diperkecil dari 100px menjadi 50px agar kapsul lebih rapat ke atas dan bawah layar */
    padding: 50px 15px; 
}


/* --- CONTAINER UTAMA (BINGKAI KAPSUL PROFIL) --- */
.profil-container {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92%;
    max-width: 420px; 
    margin: 15px auto; 
    
    /* UBAH DI SINI: Background menggunakan gambar kanvas/tekstur secara solid */
    background-color: #FDF8F5; /* Warna dasar krem */
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    
    border: 5px solid #FDF8F5; 
    border-radius: 250px; 
    padding: 60px 15px 10px 15px; 
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
    overflow: hidden; 
}

/* --- BUCKET BUNGA PROFIL BARU --- */
.bucket-profil {
    width: 190px; /* Ukuran yang estetik dan pas, seimbang dengan teks */
    height: auto;
    margin: 0 auto 20px auto; /* Memberi jarak manis ke judul We Are Getting Married */
    position: relative;
    z-index: 6; 
    opacity: 0; /* Disembunyikan dulu sebelum animasi berjalan */
}

/* --- BUNGA DI DALAM KAPSUL --- */
.kapsul-dekor {
    position: absolute;
    
    /* UBAH DI SINI: Lebar diperbesar dari 100% menjadi 125% */
    width: 125%; 
    
    /* TAMBAHAN PENTING: Trik agar bunga membesar dari titik tengah, tidak melenceng ke samping */
    left: 50% !important;
    transform: translateX(-50%);
    
    z-index: 1; 
    opacity: 1; 
    pointer-events: none;
}

.k-atas {
    /* Karena bunganya membesar ke bawah, kita tarik sedikit ke atas agar lebih proporsional */
    top: -40px; 
}

.k-bawah {
    /* Karena bunganya membesar ke atas, kita dorong sedikit ke bawah */
    bottom: -40px; 
}

/* Pastikan semua teks dan foto berada di ATAS bunga transparan */
.profil-header, .mempelai-card, .pemisah-profil {
    position: relative;
    z-index: 5; 
}

/* --- HEADER PROFIL --- */
.profil-header {
    margin-top: 0; /* Dikembalikan ke 0 karena sudah didorong oleh padding kapsul */
}

.title-married {
    font-family: 'cinzel decorative', sans-serif;
    font-size: 1.5rem;
    font-weight: bold; /* Tetap tebal seperti permintaan sebelumnya */
    
    /* TAMBAHAN BARU: Membuat hurufnya menjadi miring */
    font-style: normal; 
    
    color: var(--warna-marun);
    line-height: 1.6;
    margin-bottom: 15px;
}
.teks-pengantar-profil {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--warna-marun); /* Diubah menjadi Hitam */
    
    /* Mengatur agar teks tidak melebar */
    max-width: 280px; /* Membatasi lebar maksimal teks */
    margin: 0 auto 50px auto; /* margin auto agar tetap di tengah */
    
    line-height: 1.6;
    font-weight: 600;
}

/* --- KARTU MEMPELAI --- */
.mempelai-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mempelai-card:last-child {
    /* UBAH DI SINI: Margin bawah diperbesar menjadi 130px (sebelumnya 70px) agar aman dari bunga solid bawah */
    margin-bottom: 130px; 
}

/* --- BINGKAI FOTO KUBAH (ARCH) --- */
.foto-frame {
    position: relative;
    width: 150px; 
    height: 190px; 
    
    /* UBAH ANGKA INI: Dinaikkan menjadi 70px agar memberi ruang
       untuk bunga yang kita geser ke bawah, supaya tidak menabrak nama panggilan */
    margin-bottom: 70px; 
}

.foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px 100px 15px 15px; 
    
    /* TAMBAHAN BARU: Efek bayangan elegan (kombinasi hitam & marun transparan) */
    box-shadow: 0 15px 30px rgba(130, 34, 42, 0.25);
    
    /* Opsional: Garis tepi tipis agar foto semakin tegas dari background */
    border: 2px solid #FDF8F5; 
}

.bunga-foto {
    position: absolute;
    
    /* UBAH ANGKA INI: Minus diperbesar menjadi -45px (sebelumnya -30px)
       untuk menggeser bunga menjauh ke bawah dari foto */
    bottom: -45px; 
    
    left: 50%;
    transform: translateX(-50%);
    width: 120%; 
    z-index: 2;
}

/* --- TIPOGRAFI MEMPELAI --- */
.nama-panggilan {
    font-family: 'Luxurious Script', cursive;
    font-size: 3.5rem;
    color: var(--warna-marun);
    font-weight: 400;
    margin-bottom: 5px;
    line-height: 1;
}
.nama-lengkap {
    font-family: 'Nunito Sans', sans-serif;
    font-style: bold;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--warna-marun); /* Diubah menjadi Hitam */
    margin-bottom: 10px;
}
.nama-ortu {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--warna-marun); /* Diubah menjadi Hitam */
    line-height: 1.4;
    margin-bottom: 20px;
}

/* --- TOMBOL INSTAGRAM --- */
.btn-ig {
    background-color: var(--warna-marun);
    color: #FDF8F5;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.75rem;
    padding: 6px 18px;
    border-radius: 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(130, 34, 42, 0.2);
}

/* --- PEMISAH (GARIS & GARIS) --- */
.pemisah-profil {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85%;
    margin: 40px 0;
    gap: 15px;
}
.pemisah-profil .garis {
    flex-grow: 1;
    height: 1.5px;
    background-color: var(--warna-marun);
}
.pemisah-profil .simbol-dan {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 3rem;
    color: var(--warna-marun);
    line-height: 1;
}

/* =========================================================
   ANIMASI SMART SCROLL PROFIL (BERDASARKAN VIEWPORT)
   ========================================================= */

/* Sembunyikan elemen sebelum masuk ke layar */
.profil-intro .bucket-profil,
.profil-intro .title-married,
.profil-intro .teks-pengantar-profil,
.wanita-card .foto-frame, .wanita-card .nama-panggilan, .wanita-card .nama-lengkap, .wanita-card .nama-ortu, .wanita-card .btn-ig,
.pria-card .foto-frame, .pria-card .nama-panggilan, .pria-card .nama-lengkap, .pria-card .nama-ortu, .pria-card .btn-ig,
.pemisah-profil {
    opacity: 0;
}

/* ================= BAGIAN 1: HEADER & INTRO ================= */
.profil-intro.active .bucket-profil { animation: zoomOutReveal 1.2s ease-out 0s forwards; }
.profil-intro.active .title-married { animation: heroZoomIn 1.2s ease-out 0.2s forwards; }
.profil-intro.active .teks-pengantar-profil { animation: heroFadeUp 1.2s ease-out 0.4s forwards; }

/* ================= BAGIAN 2: MEMPELAI WANITA ================= */
.wanita-card.active .foto-frame { animation: zoomOutReveal 1.2s ease-out 0s forwards; }
.wanita-card.active .nama-panggilan { animation: heroFadeRight 1.2s ease-out 0.2s forwards; } 
.wanita-card.active .nama-lengkap { animation: heroZoomIn 1.2s ease-out 0.4s forwards; }
.wanita-card.active .nama-ortu { animation: heroFadeUp 1.2s ease-out 0.6s forwards; } 
.wanita-card.active .btn-ig { animation: zoomOutReveal 1.2s ease-out 0.8s forwards; }

/* ================= PEMISAH ================= */
.pemisah-profil.active { animation: heroZoomIn 1s ease-out 0s forwards; }

/* ================= BAGIAN 3: MEMPELAI PRIA ================= */
.pria-card.active .foto-frame { animation: zoomOutReveal 1.2s ease-out 0s forwards; }
.pria-card.active .nama-panggilan { animation: heroFadeLeft 1.2s ease-out 0.2s forwards; }
.pria-card.active .nama-lengkap { animation: heroZoomIn 1.2s ease-out 0.4s forwards; }
.pria-card.active .nama-ortu { animation: heroFadeUp 1.2s ease-out 0.6s forwards; }
.pria-card.active .btn-ig { animation: zoomOutReveal 1.2s ease-out 0.8s forwards; }

/* Pastikan keyframe heroFadeLeft terdefinisi dengan benar */
@keyframes heroFadeLeft { 
    0% { opacity: 0; transform: translateX(30px); } 
    100% { opacity: 1; transform: translateX(0); } 
}

/* =========================================================
   HALAMAN COUNTDOWN (EDITORIAL SPLIT LAYOUT)
   ========================================================= */
.countdown-split-bg {
    padding: 0 !important; /* Dibuat nol agar layout memenuhi layar penuh */
    background-color: #FDF8F5; /* Latar dasar krem */
    background-image: url('assets/background.webp');
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

.split-layout {
    display: flex;
    width: 100%;
    height: 100vh; /* Memenuhi tinggi layar perangkat */
}

/* --- KIRI: Area 3 Foto Bertumpuk --- */
.split-kiri {
    flex: 0 0 42%; /* Lebar kolom kiri 42% */
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 3px solid var(--warna-marun); /* Garis batas tegas marun */
}

.split-kiri img {
    width: 100%;
    height: 33.333%; /* Dibagi 3 rata */
    object-fit: cover;
    border-bottom: 2px solid var(--warna-marun);
}
.split-kiri img:last-child {
    border-bottom: none;
}

/* --- KANAN: Area Teks & Angka --- */
.split-kanan {
    flex: 1; /* Mengambil sisa layar (58%) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px 10px;
}


.split-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.15rem;
    color: var(--warna-marun);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 800;
}

.split-inisial-box {
    margin-bottom: 30px;
    text-align: center;
}

.split-inisial {
    font-family: 'Luxurious Script', cursive;
    font-size: 2.8rem;
    color: var(--warna-marun);
    line-height: 1;
    margin: 0;
}

/* --- TIPOGRAFI ANGKA RAKSASA (TIMER) --- */
.split-timer-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar angka */
    margin-bottom: 35px;
    width: 100%;
}

.split-timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.split-timer-item span {
    font-family: 'Cinzel Decorative', serif; /* Font klasik tajam */
    font-size: 3.8rem; /* Angka raksasa seperti di referensi */
    font-weight: 700;
    color: var(--warna-marun);
    line-height: 0.9;
}

.split-timer-item p {
    font-family: 'Luxurious Script', cursive; /* Keterangan berupa tulisan latin tegak bersambung */
    font-size: 1.5rem;
    color: #444; /* Abu-abu tua agar tidak menyaingi angka */
    margin-top: -5px;
    margin-bottom: 0;
}

/* --- TOMBOL SIMPAN TANGGAL --- */
.btn-split-save {
    background: var(--warna-marun);
    color: #FDF8F5;
    padding: 12px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(130, 34, 42, 0.3);
    transition: 0.3s;
    letter-spacing: 1px;
}
.btn-split-save:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.4);
}

/* =========================================================
   HALAMAN EVENT (DESAIN KAPSUL MARUN)
   ========================================================= */
.event-bg {
    background-color: var(--warna-marun);
    
    /* UBAH DI SINI: Padding atas diperbesar menjadi 100px agar tidak sesak */
    padding: 100px 15px 100px 15px; 
    
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}

.event-wrapper {
    display: flex;
    flex-direction: column;
    
    /* Jarak otomatis antara Judul, Kotak Akad, dan Kotak Resepsi (sudah pas 50px) */
    gap: 50px;  
    
    width: 92%; 
    max-width: 420px; 
    margin: 0 auto; 
}

/* --- HEADER EVENT BARU (JUDUL & KETERANGAN) --- */
.event-header {
    text-align: center;
    padding: 0 10px;
}

.event-main-title {
    font-family: 'Cinzel Decorative', serif; /* Font klasik mewah */
    font-size: 2rem;
    color: #FDF8F5; /* Warna Putih/Krem */
    margin-bottom: 15px;
    font-weight: bold;
}

.event-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    color: #FDF8F5; 
    line-height: 1.6;
    opacity: 0.9; 
    
    /* TAMBAHAN BARU: Membatasi lebar teks dan menaruhnya persis di tengah */
    max-width: 320px; 
    margin: 0 auto; 
}

/* --- KOTAK KAPSUL EVENT --- */
.event-kapsul {
    position: relative;
    
    /* UBAH DI SINI: Background menggunakan gambar tekstur solid agar sama dengan profil */
    background-color: #FDF8F5; /* Warna dasar/cadangan */
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    
    border: 5px solid #FDF8F5; 
    border-radius: 250px; 
    padding: 50px 20px 130px 20px; 
    text-align: center;
    overflow: hidden; 
    color: var(--warna-marun); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --- BUNGA BAWAH SOLID --- */
.event-bunga-bawah {
    position: absolute;
    
    /* Posisinya diturunkan sedikit karena gambarnya membesar */
    bottom: -25px; 
    
    /* UBAH DI SINI: Trik agar gambar membesar namun tetap persis di tengah */
    left: 50%;
    transform: translateX(-50%);
    
    /* UBAH ANGKA INI: Diperbesar dari 100% menjadi 130% */
    width: 130%; 
    
    z-index: 1; 
    opacity: 1; 
    pointer-events: none;
}

/* --- KONTEN DALAM KAPSUL --- */
.event-content {
    position: relative;
    z-index: 5; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-bucket {
    /* UBAH ANGKA INI: Diperbesar signifikan menjadi 180px */
    width: 180px; 
    
    /* Margin bawah disesuaikan agar tetap rapi dengan judul */
    margin-bottom: 25px; 
}

.event-title {
    font-family: 'Cinzel Decorative', serif; 
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--warna-marun); /* Teks Marun */
}

.event-date {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--warna-marun); /* Teks Marun */
}

/* BLOK WAKTU DENGAN TEKS PUTIH */
.event-time {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 20px;
    
    /* Dibuat seperti lencana agar teksnya bisa berwarna putih */
    background-color: var(--warna-marun); 
    color: #FDF8F5; /* Teks Putih */
    padding: 6px 18px;
    border-radius: 25px;
    font-weight: bold;
}

/* --- IKON RUMAH & GARIS STRIP --- */
.event-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}
.event-divider .garis {
    height: 1px;
    width: 50px;
    background-color: var(--warna-marun); /* Garis Marun */
}
.event-divider i {
    font-size: 1.2rem;
    color: var(--warna-marun); 
    
    /* TAMBAHAN BARU: Memaksa ikon solid untuk muncul */
    font-weight: 900; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif; /* Berjaga-jaga jika font tertimpa Nunito */
    display: inline-block;
}

.event-place {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--warna-marun); /* Teks Marun */
}

.event-address {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    margin-bottom: 25px;
    line-height: 1.5;
    opacity: 0.9;
    max-width: 250px;
    color: var(--warna-marun); /* Teks Marun */
}

/* --- TOMBOL MAPS (TEKS PUTIH) --- */
.btn-maps {
    background: var(--warna-marun); /* Latar tombol Marun */
    color: #FDF8F5; /* Teks Putih */
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(130, 34, 42, 0.3);
}
.btn-maps:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.4);
}

/* =========================================================
   HALAMAN STORY (TIMELINE DESIGN)
   ========================================================= */
.story-bg {
    position: relative;
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    
    /* UBAH DI SINI: Padding atas dikurangi menjadi 60px (sebelumnya 120px), sedangkan bawah tetap 120px untuk ruang bunga */
    padding: 60px 15px 120px 15px; 
    
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* --- BUNGA ATAS & BAWAH --- */
.story-bunga-atas {
    position: absolute;
    
    /* UBAH DI SINI: Memberikan nilai minus untuk mendorongnya naik ke atas */
    top: -25px; 
    
    /* Trik agar saat membesar, posisinya tetap persis di tengah */
    left: 50%;
    transform: translateX(-50%);
    
    /* UBAH DI SINI: Diperbesar sedikit dari 100% menjadi 115% */
    width: 115%; 
    
    z-index: 1;
    pointer-events: none;
}

.story-bunga-bawah {
    position: absolute;
    
    /* UBAH DI SINI: Memberikan nilai minus yang lebih besar agar turun ke bawah */
    bottom: -35px; 
    
    /* Trik agar saat membesar, posisinya tetap persis di tengah */
    left: 50%;
    transform: translateX(-50%);
    
    /* UBAH DI SINI: Diperbesar sedikit dari 100% menjadi 115% */
    width: 115%; 
    
    z-index: 1;
    pointer-events: none;
}

/* --- KONTAINER UTAMA DIBUAT TRANSPARAN --- */
.story-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 420px;
    
    /* UBAH DI SINI: Menghapus warna latar, garis, dan bayangan agar menyatu dengan halaman */
    background: transparent; 
    border: none;
    box-shadow: none;
    
    padding: 20px 10px; 
}

.story-main-title {
    font-family: 'Cinzel Decorative', serif; /* Font senada dengan judul profil */
    font-size: 2.2rem;
    color: var(--warna-marun);
    text-align: center;
    margin-bottom: 40px;
    font-weight: bold;
}

/* --- REL LINIMASA (TIMELINE) --- */
.timeline {
    position: relative;
    /* PENTING: Pastikan TIDAK ADA border-left di sini */
    border-left: none; 
    margin-left: 10px; 
    padding-left: 25px; 
}

/* Garis Rel Animasi */
.timeline-line {
    position: absolute;
    top: 0;
    /* Geser ke kiri untuk mengimbangi margin-left di .timeline agar titik pas di tengah */
    left: 0px; 
    width: 2px;
    height: 100%; 
    
    /* INILAH SATU-SATUNYA GARIS YANG HARUS ADA */
    border-left: 2px dashed var(--warna-marun);
    
    /* Titik tumpu transformasi dari atas ke bawah */
    transform-origin: top center; 
    
    /* Pastikan elemen ini MENGHILANG sepenuhnya sebelum dianimasikan */
    opacity: 0;
    transform: scaleY(0);
}

.timeline-item {
    position: relative;
    margin-bottom: 35px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}

/* --- TITIK PADA REL --- */
.timeline-dot {
    position: absolute;
    /* UBAH left INI: Bereksperimenlah antara -30px hingga -33px sampai titiknya pas di tengah garis */
    left: -32.5px; 
    top: 0;
    width: 13px;
    height: 13px;
    background-color: #ffffff;
    border: 3px solid var(--warna-marun);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(253, 248, 245, 0.9);
}

/* --- KOTAK CERITA --- */
.timeline-content {
    background-color: #FDF8F5; 
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.1); 
    
    /* UBAH DI SINI: Memberikan stroke marun di seluruh sisi kotak (bukan cuma di kiri) */
    border: 2px solid var(--warna-marun); 
    
    position: relative;
}

/* Panah kecil menunjuk ke rel */
.timeline-content::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -10px;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent #d4153f transparent transparent;
}

.story-date {
    display: inline-block;
    background-color: var(--warna-marun);
    color: #ffffff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.story-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--warna-marun);
    margin-bottom: 8px;
    font-weight: 800;
}

.story-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

/* =========================================================
   HALAMAN GALLERY (MAROON THEME)
   ========================================================= */
.gallery-bg {
    /* Latar belakang Marun sesuai permintaan */
    background-color: var(--warna-marun); 
    padding: 80px 15px;
    display: flex;
    justify-content: center;
}

.gallery-wrapper {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.gallery-title {
    font-family: 'Cinzel Decorative', serif; /* Memakai font klasik yang sama dengan judul sebelumnya */
    font-size: 2.2rem;
    
    /* Judul diubah menjadi Putih/Krem agar kontras di atas Marun */
    color: #FDF8F5; 
    
    margin-bottom: 35px;
    font-weight: bold;
}

/* --- GRID FOTO DINAMIS (POTRET & LANSKAP) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Membagi halaman jadi 2 kolom */
    gap: 15px; 
}

.gallery-item {
    width: 100%;
    overflow: hidden;
    border-radius: 12px; 
    border: 2px solid #FDF8F5; /* Bingkai putih estetik */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25); 
}

/* Pengaturan Khusus Foto Potret (Memanjang ke atas) */
.potret {
    aspect-ratio: 3 / 4; /* Rasio tinggi standar foto potret */
}

/* Pengaturan Khusus Foto Lanskap (Melebar dan menggabungkan 2 kolom) */
.lanskap {
    grid-column: span 2; /* Trik agar foto membentang menyatukan 2 kolom menjadi 1 */
    aspect-ratio: 16 / 9; /* Rasio lebar standar foto lanskap */
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mencegah gambar menjadi gepeng */
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.05); /* Sedikit zoom saat disentuh */
}


/* =========================================================
   HALAMAN WEDDING GIFT (ELEGANT THEME)
   ========================================================= */
.gift-bg {
    position: relative;
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Menyamakan efek dari halaman story */
    padding: 100px 15px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* --- BUNGA ATAS & BAWAH --- */
.gift-bunga-atas {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: 115%;
    z-index: 1;
    pointer-events: none;
}
.gift-bunga-bawah {
    position: absolute;
    bottom: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: 115%;
    z-index: 1;
    pointer-events: none;
}

/* --- PEMBUNGKUS UTAMA (IDENTIK DENGAN STORY BOX) --- */
.gift-main-box {
    position: relative;
    z-index: 5;
    width: 92%; /* Menyamakan lebar dengan kapsul profil/event */
    max-width: 420px;
    background: rgba(253, 248, 245, 0.85); /* Efek Kaca Krem Semi-Transparan */
    border: 2px solid var(--warna-marun);
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.gift-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    color: var(--warna-marun);
    margin-bottom: 15px;
    font-weight: bold;
}

.gift-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    color: var(--warna-marun);
    margin-bottom: 35px;
    line-height: 1.5;
}

/* --- KONTAINER KARTU DALAM KOTAK --- */
.gift-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gift-card {
    background-color: #FDF8F5; /* Krem Solid agar teks tetap kontras */
    border: 1px solid rgba(130, 34, 42, 0.3); /* Stroke marun tipis untuk kartu internal */
    border-radius: 15px;
    padding: 25px 15px;
}


.bank-name {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--warna-marun);
    margin-bottom: 8px;
}

.account-number {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--warna-marun);
    margin-bottom: 5px;
    letter-spacing: 2px; /* Jarak antar angka agar mudah dibaca */
}

.account-name {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    color: var(--warna-marun);
    margin-bottom: 25px;
}

/* --- TOMBOL SALIN REKENING --- */
.btn-copy {
    background-color: var(--warna-marun);
    color: #FDF8F5;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(130, 34, 42, 0.3);
}

.btn-copy:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.4);
}
/* --- IKON UNTUK KADO FISIK --- */
.gift-icon-address {
    font-size: 2rem;
    color: var(--warna-marun);
    margin-bottom: 15px;
}

/* --- TOMBOL TOGGLE BUKA/TUTUP HADIAH --- */
.btn-toggle-gift {
    background-color: var(--warna-marun);
    color: #FDF8F5;
    border: none;
    padding: 14px 25px;
    border-radius: 25px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* UBAH DI SINI: Margin di-reset agar jaraknya seimbang dengan teks di atasnya */
    margin: 0 auto; 
    
    transition: all 0.3s ease;
    width: 100%;
    max-width: 250px;
    box-shadow: 0 5px 15px rgba(130, 34, 42, 0.3);
}

.btn-toggle-gift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.4);
    background-color: #6d121a;
}

/* --- TOMBOL WHATSAPP GIFT (TEMA MARUN) --- */
.btn-wa {
    background-color: var(--warna-marun); 
    color: #FDF8F5; /* Teks krem seperti tombol salin lainnya */
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(130, 34, 42, 0.3); /* Bayangan marun elegan */
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.btn-wa:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.4); /* Bayangan marun lebih pekat saat disentuh */
    background-color: #6d121a; /* Marun sedikit lebih gelap saat disentuh, senada dengan tombol Klik Disini */
    color: #FDF8F5;
}

/* --- KONTAINER HADIAH TERSEMBUNYI --- */
.hidden-gifts-container {
    display: none; /* Disembunyikan di awal */
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 15px; 
}

/* Saat Javascript memberikan class .show, kontainer menjadi flex */
.hidden-gifts-container.show {
    display: flex;
}

/* 
   Pastikan kotak-kotak di dalamnya tidak terlihat sebelum 
   animasi dimulai (Saat statusnya sedang disembunyikan) 
*/
.hidden-gifts-container .gift-card {
    opacity: 0;
    transform: scale(0.85); /* Mengecil di awal */
    will-change: transform, opacity;
}

/* Keyframe Animasi Zoom In Halus untuk Kartu */
@keyframes giftCardZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(-10px); /* Mulai dari kecil dan agak di atas */
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0); /* Mekar ke ukuran normal */
    }
}

/* 
   Menerapkan animasi pada kotak (gift-card) saat kontainer memilik class .show.
   Kita atur berurutan dengan jeda 0.15 detik antar kotak.
*/
.hidden-gifts-container.show .gift-card:nth-child(1) {
    animation: giftCardZoomIn 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s forwards;
}

.hidden-gifts-container.show .gift-card:nth-child(2) {
    animation: giftCardZoomIn 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards;
}

.hidden-gifts-container.show .gift-card:nth-child(3) {
    animation: giftCardZoomIn 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
}

.hidden-gifts-container.show .gift-card:nth-child(4) {
    animation: giftCardZoomIn 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.45s forwards;
}

/* (Opsional) Jika tombol ditutup, kita hilangkan animasinya agar reset */
.hidden-gifts-container:not(.show) .gift-card {
    animation: none; 
}

/* =========================================================
   ANIMASI SMART SCROLL WEDDING GIFT
   ========================================================= */

/* Sembunyikan pembungkus utama dan isinya sebelum masuk ke layar */
.gift-main-box {
    opacity: 0;
}
.gift-main-box .gift-title,
.gift-main-box .gift-subtitle,
.gift-main-box .btn-toggle-gift {
    opacity: 0;
}

/* 1. Pembungkus Utama (Kotak Kaca) memudar dan membesar dari bawah */
.gift-main-box.active {
    animation: heroFadeUp 1.2s ease-out 0s forwards !important;
}

/* 2. Judul "Wedding Gift" membesar (Zoom In) di dalam kotak */
.gift-main-box.active .gift-title {
    animation: heroZoomIn 1s ease-out 0.4s forwards !important;
}

/* 3. Teks Keterangan ("Doa restu Anda...") meluncur dari bawah */
.gift-main-box.active .gift-subtitle {
    animation: heroFadeUp 1s ease-out 0.6s forwards !important;
}

/* 4. Tombol "Klik Disini" membesar memantul sedikit (Zoom Out Reveal) */
.gift-main-box.active .btn-toggle-gift {
    animation: zoomOutReveal 1s ease-out 0.9s forwards !important;
}

/* Catatan: 
   Animasi kotak hadiah di dalam #hidden-gifts 
   tetap dikendalikan secara terpisah oleh klik tombol (toggleGifts)
*/
/* =========================================================
   STYLE HALAMAN RSVP (PREMIUM & GLASSMORPHISM)
   ========================================================= */
.bg-rsvp {
    position: relative;
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Menyamakan efek dari halaman story */
    padding: 100px 15px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.rsvp-container {
    position: relative;
    z-index: 2; /* Agar berada di atas overlay */
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.header-rsvp {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-rsvp {
    font-family: 'Cinzel Decorative', serif;
    color: var(--warna-marun); 
    font-size: 2.2rem;
    margin-bottom: 25px;
}

.subtitle-rsvp {
    font-family: 'Poppins', serif;
    color: var(--warna-marun); 
    font-size: 0.8rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* Kotak Form dan Wall Glassmorphism */
.rsvp-form-box, .wish-wall-box {
    background: var(--warna-marun); 
    border: 1px solid rgba(255, 227, 190, 0.25);
    border-radius: 16px;
    padding: 30px 20px;
    margin-bottom: 25px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   Styling Input Form (Background Putih, Teks Hitam, Font Biasa)
   ========================================================= */
.form-group {
    margin-bottom: 15px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    background-color: #ffffff; /* Background diubah menjadi putih solid */
    border: 1px solid rgba(255, 255, 255, 0.8); /* Garis batas tetap ada sentuhan emas/krem */
    color: #111111; /* Teks diubah menjadi hitam */
    padding: 12px 15px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif; /* Font diubah ke standar/biasa agar jelas */
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

/* Warna Placeholder (Teks petunjuk sebelum diketik) */
.form-group input::placeholder, .form-group textarea::placeholder {
    color: #888888; /* Diubah jadi abu-abu agar kontras di atas putih */
    font-family: Arial, Helvetica, sans-serif;
}

/* Efek saat form diklik (Fokus) */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #c1121f; /* Garis batas berubah merah saat diketik */
    box-shadow: 0 0 8px rgba(193, 18, 31, 0.3);
}

/* Khusus Dropdown Select (Pilihan Kehadiran) */
.form-group select option {
    background-color: #ffffff; /* Background pilihan jadi putih */
    color: #111111; /* Teks pilihan jadi hitam */
}

/* Tombol Submit Premium */
.btn-submit {
    width: 100%;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px;
    font-size: 1rem;
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-submit:hover, .btn-submit:active {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 227, 190, 0.2);
}

/* Area Scroll untuk Buku Tamu */
.wish-messages {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Styling Scrollbar Kustom agar Estetik */
.wish-messages::-webkit-scrollbar { width: 5px; }
.wish-messages::-webkit-scrollbar-track { background: rgba(255, 227, 190, 0.1); border-radius: 10px; }
.wish-messages::-webkit-scrollbar-thumb { background: rgba(255, 227, 190, 0.4); border-radius: 10px; }
/* =========================================================
   STYLE BALON UCAPAN BUKU TAMU (BACKGROUND PUTIH & FONT STANDAR)
   ========================================================= */
.wish-item {
    background-color: #ffffff; /* Latar putih solid */
    border: 1px solid #dddddd; /* Garis batas abu-abu halus */
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    text-align: left;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Tambahan sedikit bayangan agar menonjol */
}

.wish-item:hover {
    transform: translateX(5px); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.wish-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px dashed #ffffff; /* Garis putus-putus abu-abu */
    padding-bottom: 8px;
}

.wish-name {
    color: #111111; /* Teks nama hitam pekat */
    font-family: Arial, Helvetica, sans-serif; /* Font biasa */
    font-size: 1rem;
    font-weight: bold;
}

.wish-status {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: Arial, Helvetica, sans-serif; /* Font biasa */
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wish-text {
    color: #333333; /* Teks ucapan abu-abu gelap/hitam */
    font-family: Arial, Helvetica, sans-serif; /* Font biasa */
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    font-style: normal; /* Dibuat tegak (tidak miring) agar makin mudah dibaca */
}

/* =========================================================
   HALAMAN PENUTUP (ELEGAN & TERANG)
   ========================================================= */
.penutup-bg { 
    position: relative; 
    background-image: url('assets/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* Padding bawah lebih besar untuk memberi ruang tombol navigasi dan credit */
    padding: 80px 20px 150px 20px; 
    overflow: hidden; 
}

/* --- BUNGA ATAS PENUTUP --- */
.penutup-bunga-atas {
    position: absolute;
    
    /* UBAH DI SINI: Tarik ke atas. Ubah -25px menjadi angka yang lebih ekstrem, misalnya -50px atau -60px */
    top: -60px; 
    
    left: 50%;
    transform: translateX(-50%);
    
    /* UBAH DI SINI: Perbesar ukuran bunga. Naikkan dari 115% ke 130% atau 140% */
    width: 140%; 
    
    z-index: 1;
    pointer-events: none;
}

.penutup-content { 
    position: relative; 
    z-index: 5; 
    text-align: center; 
    width: 100%; 
    max-width: 400px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- TEKS --- */
.teks-penutup { 
    font-family: 'Nunito Sans', sans-serif; 
    color: var(--warna-marun); 
    font-size: 0.95rem; 
    line-height: 1.6; 
    font-weight: 600;
    margin-bottom: 25px; 
    padding: 0 10px;
}

.terima-kasih { 
    font-family: 'Cinzel Decorative', serif; 
    color: var(--warna-marun); 
    font-size: 1.1rem; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    margin-bottom: 10px;
    font-weight: bold;
}

.nama-mempelai-penutup { 
    font-family: 'Luxurious Script', cursive; 
    color: var(--warna-marun); 
    font-size: 3.5rem; /* Dibuat besar dan menyamping/horizontal */
    font-weight: 400;
    margin-bottom: 0; 
    line-height: 1;
}

/* =========================================================
   CREDIT BOX (TEMA TERANG)
   ========================================================= */
.credit-wrapper { 
    position: absolute; 
    bottom: 95px; /* Posisinya tepat di atas rel tombol navigasi */
    left: 0; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    z-index: 100; 
}

.credit-box { 
    background-color: #FDF8F5; /* Krem Solid */
    color: var(--warna-marun); 
    border: 1px solid var(--warna-marun); 
    padding: 10px 22px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-family: 'Nunito Sans', sans-serif; 
    font-size: 0.8rem; 
    font-weight: 800; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    transition: all 0.3s ease; 
    box-shadow: 0 5px 15px rgba(130, 34, 42, 0.15); 
}

.credit-box span { 
    font-weight: 400; 
    font-style: italic; 
    color: #666; 
}

.credit-box:hover { 
    background-color: var(--warna-marun); 
    color: #FDF8F5; 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(130, 34, 42, 0.3); 
}

.credit-box:hover span { 
    color: #FDF8F5; 
    opacity: 0.8;
}

/* =========================================================
   NAVIGASI BAWAH (HANYA DI HALAMAN PENUTUP)
   ========================================================= */
.footer-wrapper { 
    position: absolute; /* Dikembalikan ke absolute agar diam di halaman penutup */
    bottom: 25px; 
    left: 0; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    z-index: 1000; 
    pointer-events: auto; 
    
    /* MENGHAPUS SEMUA EFEK TRANSISI DAN TRANSFORM */
    transition: none !important; 
    transform: none !important;
}

.nav-bottom { 
    background-color: var(--warna-marun); 
    border: 2px solid #FDF8F5; 
    padding: 8px 15px; 
    border-radius: 50px; 
    display: flex; 
    gap: 10px; 
    box-shadow: 0 10px 25px rgba(130, 34, 42, 0.4); 
    pointer-events: auto;
}

.nav-btn { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background-color: transparent; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: all 0.3s ease; 
    text-decoration: none;
}

.nav-btn img { 
    width: 18px; 
    height: 18px; 
    object-fit: contain; 
    filter: brightness(0) invert(1); /* Memastikan Ikon Tetap Putih Bersih */
    transition: all 0.3s ease; 
}

/* Efek saat ikon navigasi disentuh/diklik */
.nav-btn:hover, .nav-btn:active { 
    background-color: rgba(253, 248, 245, 0.25); /* Sorotan krem transparan yang elegan */
    transform: translateY(-4px); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

/* --- TOMBOL MUSIK --- */
#music-toggle { 
    position: fixed; 
    bottom: 85px; 
    right: 20px; 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    z-index: 101; 
    display: none; 
    justify-content: center; 
    align-items: center; 
    font-size: 1.1rem; 
    font-weight: bold; 
    
    background-color: var(--warna-marun); /* Latar Marun */
    color: #FDF8F5; /* Ikon Krem/Putih */
    border: 2px solid #FDF8F5; /* Bingkai Krem */
    
    box-shadow: 0 4px 15px rgba(130, 34, 42, 0.4); 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

#music-toggle:active { 
    background-color: #6d121a; /* Marun lebih gelap saat ditekan */
    transform: translateY(-3px); 
    box-shadow: 0 6px 12px rgba(130, 34, 42, 0.5); 
}
/* =========================================================
   MODE DESKTOP (SIMULATOR PRESISI iPHONE SE - 375x667)
   ========================================================= */
@media (min-width: 500px) {
    
    /* ... kode html tetap sama ... */

    body { 
        width: 375px !important; 
        height: 667px !important; 
        margin: 0 !important; 
        background-color: #fcfcfc;
        border-radius: 15px; 
        box-shadow: 0 15px 50px rgba(0,0,0,0.5); 
        
        overflow-y: auto; 
        overflow-x: hidden;
        position: relative;

        /* UBAH DI SINI: Scrollbar tipis elegan untuk Firefox */
        scrollbar-width: thin; 
        scrollbar-color: var(--warna-marun) transparent; 
    }

    /* UBAH DI SINI: Styling Scrollbar estetik untuk Chrome, Safari, dan Edge */
    body::-webkit-scrollbar {
        width: 6px; /* Membuat scrollbar menjadi sangat tipis */
    }
    
    body::-webkit-scrollbar-track {
        background: transparent; /* Latar belakang scrollbar transparan agar menyatu dengan layar */
    }
    
    body::-webkit-scrollbar-thumb {
        background-color: var(--warna-marun); /* Batang scrollbar berwarna marun sesuai tema */
        border-radius: 10px; /* Ujung batang scroll dibuat melengkung halus */
    }

    /* ... sisa kode pengunci (cover, hero, dll) tetap di bawahnya ... */
}
.countdown-split-bg, .split-layout, .split-kiri {
        height: 667px !important;
        min-height: 667px !important;
    }

/* =========================================================
   HALAMAN TURUT MENGUNDANG (STUDIO DESIGN STANDARD)
   ========================================================= */
.turut-bg {
    position: relative;
    
    /* UBAH DI SINI: Menghapus gambar background lama dan menggantinya dengan warna marun */
    background-color: var(--warna-marun); 
    background-image: none; /* Memastikan tidak ada gambar yang menimpa */
    
    padding: 100px 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.turut-wrapper {
    width: 92%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Jarak antar kotak diperlebar agar tidak sesak */
}

/* --- KARTU ELEGAN DENGAN EFEK BINGKAI DALAM --- */
.turut-card {
    background: #ffffff; /* Kaca krem hampir solid agar teks sangat terbaca */
    border: 4px solid rgba(130, 34, 42, 0.3); /* Border luar sangat tipis */
    border-radius: 15px; /* Lengkungan sedikit dikurangi agar terkesan lebih formal */
    padding: 45px 25px; /* Ruang dalam diperluas */
    text-align: center;
    box-shadow: 0 20px 40px rgba(130, 34, 42, 0.08); /* Bayangan sangat lembut */
    position: relative;
    overflow: hidden;
}

/* Bingkai Ornamen Dalam (Inner Frame) khas Undangan Cetak Premium */
.turut-card::before {
    content: "";
    position: absolute;
    top: 8px; 
    left: 8px; 
    right: 8px; 
    bottom: 8px;
    border: 1px dashed rgba(130, 34, 42, 0.35); /* Garis putus-putus samar */
    border-radius: 10px;
    pointer-events: none; /* Agar tidak mengganggu klik/scroll */
}

/* Pastikan konten berada di atas bingkai dalam */
.turut-card > * {
    position: relative;
    z-index: 2;
}

/* --- TIPOGRAFI JUDUL --- */
.turut-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    color: var(--warna-marun);
    margin-bottom: 30px; /* Jarak judul ke isi dijauhkan */
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Ornamen Bintang/Diamond di bawah Judul */
.turut-title::after {
    content: "✧ ✦ ✧"; 
    font-size: 0.75rem;
    color: rgba(130, 34, 42, 0.5);
    letter-spacing: 4px;
}

/* --- TIPOGRAFI DOA (SYAHDU & JELAS) --- */
.doa-arab {
    font-family: 'Traditional Arabic', 'Amiri', serif; /* Font kaligrafi yang lebih luwes */
    font-size: 2rem;
    color: var(--warna-marun);
    line-height: 2;
    margin-bottom: 15px;
}

.doa-latin {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(130, 34, 42, 0.85); /* Marun sedikit diredupkan */
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.doa-terjemahan {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
    color: #555; /* Abu-abu gelap agar kontras dengan teks arab/latin */
    line-height: 1.6;
    margin-bottom: 10px;
}

.doa-sumber {
    font-size: 0.8rem;
    color: var(--warna-marun);
    font-weight: 800;
    letter-spacing: 1px;
}

/* --- TIPOGRAFI DAFTAR NAMA KELUARGA --- */
.list-turut {
    list-style: none;
    padding: 0;
    text-align: center;
}

.list-turut li {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    color: #2b2b2b;
    margin-bottom: 15px; /* Jarak antar nama dirapatkan sedikit tapi tetap proporsional */
    font-weight: 700;
    line-height: 1.4;
}

/* Garis Pembatas Gradien Transparan (Bukan Garis Solid) */
.list-turut li:not(:last-child)::after {
    content: "";
    display: block;
    width: 60%; /* Hanya selebar 60% dari kotak, tidak penuh */
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(130, 34, 42, 0.4), transparent); /* Gradasi mewah yang memudar di ujungnya */
    margin: 15px auto 0 auto;
}

/* --- PENYESUAIAN DESKTOP --- */
@media (min-width: 500px) {
    .turut-bg {
        background-attachment: scroll !important;
        min-height: 667px !important;
    }
    
    .turut-wrapper {
        width: 100% !important;
    }
    
    .turut-card {
        padding: 40px 15px !important;
    }
}
/* =========================================================
   ANIMASI SMART SCROLL COUNTDOWN (SPLIT LAYOUT)
   ========================================================= */

/* Sembunyikan semua elemen di awal */
.split-kiri img,
.split-kanan .split-bunga-samar,
.split-kanan .split-title,
.split-kanan .split-inisial-box,
.split-timer-item,
.split-kanan .btn-split-save {
    opacity: 0;
}

/* --- ANIMASI KOLOM KIRI (FOTO) --- */
/* Foto muncul berurutan dari bawah ke atas */
.split-kiri.active img:nth-child(1) { animation: heroFadeUp 1s ease-out 0s forwards !important; }
.split-kiri.active img:nth-child(2) { animation: heroFadeUp 1s ease-out 0.2s forwards !important; }
.split-kiri.active img:nth-child(3) { animation: heroFadeUp 1s ease-out 0.4s forwards !important; }


/* --- ANIMASI KOLOM KANAN (TEKS & TIMER) --- */
/* Bunga sudut kanan perlahan muncul dan berputar sedikit */
.split-kanan.active .split-bunga-samar { 
    animation: zoomOutReveal 1.5s ease-out 0.5s forwards !important; 
}

/* Judul "Save The Date" meluncur dari atas */
.split-kanan.active .split-title { 
    animation: heroFadeDown 1.2s ease-out 0.6s forwards !important; 
}

/* Inisial Mempelai membesar dari tengah */
.split-kanan.active .split-inisial-box { 
    animation: heroZoomIn 1.2s ease-out 0.8s forwards !important; 
}

/* Angka Timer muncul satu per satu dengan efek geser dari kanan */
.split-kanan.active .split-timer-item:nth-child(1) { animation: heroFadeLeft 1s ease-out 1.0s forwards !important; } /* Hari */
.split-kanan.active .split-timer-item:nth-child(2) { animation: heroFadeLeft 1s ease-out 1.2s forwards !important; } /* Jam */
.split-kanan.active .split-timer-item:nth-child(3) { animation: heroFadeLeft 1s ease-out 1.4s forwards !important; } /* Menit */
.split-kanan.active .split-timer-item:nth-child(4) { animation: heroFadeLeft 1s ease-out 1.6s forwards !important; } /* Detik */

/* Tombol Simpan Tanggal memantul/membesar sedikit di akhir */
.split-kanan.active .btn-split-save { 
    animation: zoomOutReveal 1s ease-out 1.9s forwards !important; 
}

/* =========================================================
   ANIMASI SMART SCROLL EVENT (SEQUENTIAL 3 BAGIAN)
   ========================================================= */

/* Sembunyikan elemen sebelum masuk ke layar */
.event-header .event-main-title,
.event-header .event-subtitle,
.event-kapsul {
    opacity: 0;
}

/* Sembunyikan isi di dalam kapsul */
.event-kapsul .event-bunga-bawah,
.event-kapsul .event-bucket,
.event-kapsul .event-title,
.event-kapsul .event-date,
.event-kapsul .event-time,
.event-kapsul .event-divider,
.event-kapsul .event-place,
.event-kapsul .event-address,
.event-kapsul .btn-maps {
    opacity: 0;
}

/* ================= BAGIAN 1: HEADER EVENT ================= */
/* Judul dari atas, keterangan dari bawah */
.event-header.active .event-main-title { animation: heroFadeDown 1.2s ease-out 0s forwards !important; }
.event-header.active .event-subtitle { animation: heroFadeUp 1.2s ease-out 0.3s forwards !important; }


/* ================= TAMBAHAN KEYFRAME KHUSUS ================= */
/* Keyframe khusus agar bunga bawah tetap terkunci di tengah (X: -50%) saat meluncur dari bawah */
@keyframes fadeUpCenterFixed {
    0% { opacity: 0; transform: translateX(-50%) translateY(30px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================= BAGIAN 2: KOTAK AKAD NIKAH ================= */
/* Kapsul Akad (Kapsul pertama yang ada tepat di bawah event-header) meluncur dari KIRI */
.event-header + .event-kapsul.active { 
    animation: heroFadeRight 1s ease-out 0s forwards !important; 
}

/* Bunga bawah menggunakan animasi baru agar tidak geser ke kanan */
.event-header + .event-kapsul.active .event-bunga-bawah { 
    animation: fadeUpCenterFixed 1.2s ease-out 0.4s forwards !important; 
}

/* Bucket Bunga Zoom Out */
.event-header + .event-kapsul.active .event-bucket { animation: zoomOutReveal 1.2s ease-out 0.6s forwards !important; }

/* Judul Akad Zoom In */
.event-header + .event-kapsul.active .event-title { animation: heroZoomIn 1s ease-out 0.8s forwards !important; }

/* Tanggal & Waktu memudar masuk */
.event-header + .event-kapsul.active .event-date { animation: simpleFadeIn 1s ease-out 1.0s forwards !important; }
.event-header + .event-kapsul.active .event-time { animation: simpleFadeIn 1s ease-out 1.0s forwards !important; }

/* Garis Pemisah Zoom Out */
.event-header + .event-kapsul.active .event-divider { animation: zoomOutReveal 1s ease-out 1.4s forwards !important; }

/* Detail Lokasi meluncur dari bawah */
.event-header + .event-kapsul.active .event-place { animation: heroFadeUp 1s ease-out 1.6s forwards !important; }
.event-header + .event-kapsul.active .event-address { animation: heroFadeUp 1s ease-out 1.6s forwards !important; }

/* Tombol Maps memantul di akhir */
.event-header + .event-kapsul.active .btn-maps { animation: heroZoomIn 1s ease-out 1.8s forwards !important; }


/* ================= BAGIAN 3: KOTAK RESEPSI ================= */
/* Kapsul Resepsi (Kapsul yang berada SETELAH kapsul akad) meluncur dari KANAN */
.event-kapsul + .event-kapsul.active { 
    animation: heroFadeLeft 1s ease-out 0s forwards !important; 
}

/* Bunga bawah menggunakan animasi baru agar tidak geser ke kanan */
.event-kapsul + .event-kapsul.active .event-bunga-bawah { 
    animation: fadeUpCenterFixed 1.2s ease-out 0.4s forwards !important; 
}

/* Bucket Bunga Zoom Out */
.event-kapsul + .event-kapsul.active .event-bucket { animation: zoomOutReveal 1.2s ease-out 0.6s forwards !important; }

/* Judul Resepsi Zoom In */
.event-kapsul + .event-kapsul.active .event-title { animation: heroZoomIn 1s ease-out 0.8s forwards !important; }

/* Tanggal & Waktu memudar masuk */
.event-kapsul + .event-kapsul.active .event-date { animation: simpleFadeIn 1s ease-out 1.0s forwards !important; }
.event-kapsul + .event-kapsul.active .event-time { animation: simpleFadeIn 1s ease-out 1.0s forwards !important; }

/* Garis Pemisah Zoom Out */
.event-kapsul + .event-kapsul.active .event-divider { animation: zoomOutReveal 1s ease-out 1.4s forwards !important; }

/* Detail Lokasi meluncur dari bawah */
.event-kapsul + .event-kapsul.active .event-place { animation: heroFadeUp 1s ease-out 1.6s forwards !important; }
.event-kapsul + .event-kapsul.active .event-address { animation: heroFadeUp 1s ease-out 1.6s forwards !important; }

/* Tombol Maps memantul di akhir */
.event-kapsul + .event-kapsul.active .btn-maps { animation: heroZoomIn 1s ease-out 1.8s forwards !important; }

/* =========================================================
   ANIMASI SMART SCROLL STORY (SEQUENTIAL 3 BAGIAN)
   ========================================================= */

/* Sembunyikan elemen sebelum masuk ke layar */
.story-header .story-main-title,
.timeline-item .timeline-dot,
.timeline-item .timeline-content,
.timeline-item .story-date,
.timeline-item .story-title,
.timeline-item .story-text {
    opacity: 0;
}

/* Keyframe untuk menggambar rel dari atas ke bawah */
@keyframes drawTimelineLine {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}


/* ================= BAGIAN 1: HEADER ================= */
/* Judul Love Story meluncur elegan dari bawah */
.story-header.active .story-main-title { 
    animation: heroFadeUp 1.2s ease-out 0s forwards !important; 
}

/* ================= BAGIAN 2: GARIS REL ================= */
/* Pastikan keyframe bekerja memanjangkan garis dan menebalkannya */
@keyframes drawTimelineLine {
    0% { transform: scaleY(0); opacity: 0; }
    /* Opacity langsung penuh di 10% agar warnanya jelas saat mengalir ke bawah */
    10% { transform: scaleY(0.1); opacity: 1; } 
    100% { transform: scaleY(1); opacity: 1; }
}

/* Garis rel putus-putus tergambar perlahan ke bawah */
.timeline-line.active {
    animation: drawTimelineLine 2.5s ease-in-out 0.3s forwards !important;
}

/* ================= BAGIAN 3: KOTAK CERITA ================= */

/* CERITA 1 (Perkenalan) */
.timeline-item.active:nth-of-type(2) .timeline-dot { animation: heroZoomIn 0.8s ease-out 0s forwards !important; }
.timeline-item.active:nth-of-type(2) .timeline-content { animation: heroFadeLeft 1s ease-out 0.2s forwards !important; } /* Meluncur dari Kanan */
.timeline-item.active:nth-of-type(2) .story-date { animation: simpleFadeIn 1s ease-out 0.6s forwards !important; }
.timeline-item.active:nth-of-type(2) .story-title { animation: heroFadeLeft 1s ease-out 0.8s forwards !important; } /* Meluncur dari Kanan */
.timeline-item.active:nth-of-type(2) .story-text { animation: heroFadeUp 1s ease-out 1.0s forwards !important; }

/* CERITA 2 (Lamaran) */
.timeline-item.active:nth-of-type(3) .timeline-dot { animation: heroZoomIn 0.8s ease-out 0.3s forwards !important; }
.timeline-item.active:nth-of-type(3) .timeline-content { animation: heroFadeLeft 1s ease-out 0.5s forwards !important; } /* Meluncur dari Kanan */
.timeline-item.active:nth-of-type(3) .story-date { animation: simpleFadeIn 1s ease-out 0.9s forwards !important; }
.timeline-item.active:nth-of-type(3) .story-title { animation: heroFadeLeft 1s ease-out 1.1s forwards !important; } /* Meluncur dari Kanan */
.timeline-item.active:nth-of-type(3) .story-text { animation: heroFadeUp 1s ease-out 1.3s forwards !important; }

/* CERITA 3 (Pernikahan) */
.timeline-item.active:nth-of-type(4) .timeline-dot { animation: heroZoomIn 0.8s ease-out 0.6s forwards !important; }
.timeline-item.active:nth-of-type(4) .timeline-content { animation: heroFadeLeft 1s ease-out 0.8s forwards !important; } /* Meluncur dari Kanan */
.timeline-item.active:nth-of-type(4) .story-date { animation: simpleFadeIn 1s ease-out 1.2s forwards !important; }
.timeline-item.active:nth-of-type(4) .story-title { animation: heroFadeLeft 1s ease-out 1.4s forwards !important; } /* Meluncur dari Kanan */
.timeline-item.active:nth-of-type(4) .story-text { animation: heroFadeUp 1s ease-out 1.6s forwards !important; }

/* =========================================================
   ANIMASI SMART SCROLL GALLERY (ZOOM IN BERURUTAN - SATU PICUAN)
   ========================================================= */

/* Sembunyikan elemen sebelum masuk layar */
.gallery-header .gallery-title,
.gallery-grid .gallery-item {
    opacity: 0;
}

/* Keyframe Khusus: Zoom In Dramatis */
@keyframes zoomInDramatic {
    0% { opacity: 0; transform: scale(0.3) rotate(-5deg); }
    70% { opacity: 1; transform: scale(1.05) rotate(1deg); } 
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ================= BAGIAN 1: JUDUL ================= */
.gallery-header.active .gallery-title { 
    animation: heroFadeDown 1.2s ease-out 0s forwards !important; 
}

/* ================= BAGIAN 2: GRID FOTO ================= */
/* 
   Ketika .gallery-grid diberi class .active oleh Javascript,
   semua .gallery-item di dalamnya akan terpicu animasinya
   secara berurutan berdasarkan delay yang sudah diatur.
*/
.gallery-grid.active .gallery-item:nth-of-type(1) { animation: zoomInDramatic 1.2s ease-out 0.2s forwards !important; }
.gallery-grid.active .gallery-item:nth-of-type(2) { animation: zoomInDramatic 1.2s ease-out 0.4s forwards !important; }
.gallery-grid.active .gallery-item:nth-of-type(3) { animation: zoomInDramatic 1.2s ease-out 0.6s forwards !important; } /* Lanskap 1 */
.gallery-grid.active .gallery-item:nth-of-type(4) { animation: zoomInDramatic 1.2s ease-out 0.8s forwards !important; }
.gallery-grid.active .gallery-item:nth-of-type(5) { animation: zoomInDramatic 1.2s ease-out 1.0s forwards !important; }
.gallery-grid.active .gallery-item:nth-of-type(6) { animation: zoomInDramatic 1.2s ease-out 1.2s forwards !important; } /* Lanskap 2 */

/* =========================================================
   ANIMASI SMART SCROLL HALAMAN RSVP (REVEAL)
   ========================================================= */

/* 1. Sembunyikan elemen sebelum masuk ke area layar */
#rsvp .header-rsvp,
#rsvp .rsvp-form-box,
#rsvp .wish-wall-box {
    opacity: 0;
    will-change: transform, opacity; /* Optimasi rendering GPU */
}

/* 2. Animasi Judul RSVP (Meluncur dari atas) */
#rsvp.active .header-rsvp {
    /* Menggunakan keyframe heroFadeDown yang sudah Anda buat sebelumnya */
    animation: heroFadeDown 1.2s ease-out 0s forwards !important; 
}

/* 3. Animasi Kotak Form Input (Meluncur dari bawah dengan jeda) */
#rsvp.active .rsvp-form-box {
    /* Menggunakan keyframe heroFadeUp dengan delay 0.3s */
    animation: heroFadeUp 1.2s ease-out 0.3s forwards !important; 
}

/* 4. Animasi Kotak Buku Tamu (Meluncur dari bawah dengan jeda lebih lama) */
#rsvp.active .wish-wall-box {
    /* Delay 0.6s agar muncul berurutan setelah kotak form */
    animation: heroFadeUp 1.2s ease-out 0.6s forwards !important; 
}
/* =========================================================
   ANIMASI SMART SCROLL HALAMAN TURUT MENGUNDANG (DETAIL BERURUTAN)
   ========================================================= */

/* 1. Sembunyikan semua elemen internal sebelum masuk ke area layar */
#turut-mengundang .turut-card,
#turut-mengundang .turut-title,
#turut-mengundang .doa-arab,
#turut-mengundang .doa-latin,
#turut-mengundang .doa-terjemahan,
#turut-mengundang .doa-sumber,
#turut-mengundang .list-turut li {
    opacity: 0;
    will-change: transform, opacity;
}

/* ================= BAGIAN 1: KOTAK DOA RESTU ================= */

/* Kotak utama muncul dari bawah (Jeda: 0s) */
#turut-mengundang.active .turut-card:nth-child(1) {
    animation: heroFadeUp 1s ease-out 0s forwards !important;
}

/* Judul "Doa Restu" meluncur turun dari atas (Jeda: 0.3s) */
#turut-mengundang.active .turut-card:nth-child(1) .turut-title {
    animation: heroFadeDown 1s ease-out 0.3s forwards !important;
}

/* Teks Arab membesar perlahan di tengah (Jeda: 0.6s) */
#turut-mengundang.active .doa-arab {
    animation: heroZoomIn 1.2s ease-out 0.6s forwards !important;
}

/* Teks Latin, Terjemahan, dan Sumber mengalir naik satu per satu */
#turut-mengundang.active .doa-latin {
    animation: heroFadeUp 1s ease-out 0.9s forwards !important;
}
#turut-mengundang.active .doa-terjemahan {
    animation: heroFadeUp 1s ease-out 1.1s forwards !important;
}
#turut-mengundang.active .doa-sumber {
    animation: heroFadeUp 1s ease-out 1.3s forwards !important;
}

/* ================= BAGIAN 2: KOTAK DAFTAR KELUARGA ================= */

/* Kotak kedua muncul menyusul setelah kotak pertama mulai stabil (Jeda: 0.6s) */
#turut-mengundang.active .turut-card:nth-child(2) {
    animation: heroFadeUp 1s ease-out 0.6s forwards !important;
}

/* Judul "Turut Mengundang" meluncur turun dari atas (Jeda: 0.9s) */
#turut-mengundang.active .turut-card:nth-child(2) .turut-title {
    animation: heroFadeDown 1s ease-out 0.9s forwards !important;
}

/* Daftar Nama Keluarga Muncul Naik Satu per Satu (Jeda Kelipatan 0.2s) */
#turut-mengundang.active .list-turut li:nth-child(1) { animation: heroFadeUp 1s ease-out 1.2s forwards !important; }
#turut-mengundang.active .list-turut li:nth-child(2) { animation: heroFadeUp 1s ease-out 1.4s forwards !important; }
#turut-mengundang.active .list-turut li:nth-child(3) { animation: heroFadeUp 1s ease-out 1.6s forwards !important; }
#turut-mengundang.active .list-turut li:nth-child(4) { animation: heroFadeUp 1s ease-out 1.8s forwards !important; }
#turut-mengundang.active .list-turut li:nth-child(5) { animation: heroFadeUp 1s ease-out 2.0s forwards !important; }

/* Jika nama keluarga lebih dari 5, sisanya akan dimunculkan secara bersamaan di akhir */
#turut-mengundang.active .list-turut li:nth-child(n+6) { animation: heroFadeUp 1s ease-out 2.2s forwards !important; }

/* =========================================================
   ANIMASI SMART SCROLL HALAMAN PENUTUP (REVEAL & HIDE)
   ========================================================= */

/* 1. Kondisi Awal (Disembunyikan) & Efek Menutup Perlahan */
#penutup .cover-photo-section,
#penutup .teks-penutup,
#penutup .terima-kasih,
#penutup .nama-mempelai-penutup,
#penutup .credit-wrapper {
    opacity: 0;
    transform: translateY(20px); /* Posisi awal sedikit di bawah */
    
    /* RAHASIA EFEK MENUTUP: 
       Saat pengguna menggulir ke atas dan JS mencabut class .active, 
       elemen tidak akan langsung hilang (snap), melainkan memudar turun perlahan */
    transition: opacity 0.6s ease, transform 0.6s ease; 
    
    will-change: transform, opacity;
}

/* ================== URUTAN KEMUNCULAN ================== */
/* Kita menggunakan selector .penutup-content.active agar terhubung dengan JS */

/* 1. Foto Kubah/Arch membesar perlahan (Jeda 0s) */
#penutup .penutup-content.active .cover-photo-section {
    animation: zoomOutReveal 1.2s ease-out 0s forwards !important;
}

/* 2. Teks Pengantar meluncur dari bawah (Jeda 0.3s) */
#penutup .penutup-content.active .teks-penutup {
    animation: heroFadeUp 1s ease-out 0.3s forwards !important;
}

/* 3. Tulisan "Terima Kasih" membesar fokus di tengah (Jeda 0.6s) */
#penutup .penutup-content.active .terima-kasih {
    animation: heroZoomIn 1s ease-out 0.6s forwards !important;
}

/* 4. Nama Mempelai Horizontal meluncur anggun (Jeda 0.9s) */
#penutup .penutup-content.active .nama-mempelai-penutup {
    animation: heroFadeUp 1.2s ease-out 0.9s forwards !important;
}

/* 5. Kotak Credit (Invitekita) meluncur paling akhir (Jeda 1.2s) */
/* Karena credit ada di luar .penutup-content, kita trigger dari id penutup */
#penutup.active .credit-wrapper {
    animation: heroFadeUp 1s ease-out 1.2s forwards !important;
}

/* =========================================================
   STYLE & ANIMASI TOMBOL LIVE STREAMING
   ========================================================= */

.btn-live-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-top: 10px;
}

.btn-live {
    color: #ffffff;
    border: none;
    padding: 14px 25px;
    border-radius: 25px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 250px;
    transition: all 0.3s ease;
    
    /* Disembunyikan di awal untuk animasi berurutan */
    opacity: 0; 
    will-change: transform, opacity;
}

.btn-live:hover {
    transform: translateY(-3px);
    color: #ffffff;
}

/* Warna Asli Brand Instagram dengan Gradasi Mewah */
.btn-ig-live {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.3);
}

.btn-ig-live:hover {
    box-shadow: 0 8px 20px rgba(220, 39, 67, 0.5);
}

/* Warna Asli YouTube */
.btn-yt-live {
    background-color: #FF0000;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

.btn-yt-live:hover {
    background-color: #cc0000;
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.5);
}

/* --- ANIMASI SMART SCROLL UNTUK TOMBOL LIVE --- */
/* Karena tombol ada di dalam kotak yang memiliki class .active (dari Smart Scroll),
   kita bisa mengatur pemunculannya secara berurutan. */

.gift-main-box.active .btn-live:nth-child(1) {
    /* Instagram muncul duluan */
    animation: zoomOutReveal 1s ease-out 0.8s forwards !important;
}

.gift-main-box.active .btn-live:nth-child(2) {
    /* YouTube muncul setelahnya */
    animation: zoomOutReveal 1s ease-out 1.0s forwards !important;
}