/* ================= CSS VARIABLES ================= */
:root {
    --primary: #d78457;       /* Warna Utama (Terakota/Orange Soft) */
    --primary-dark: #ba4b2e;  /* Warna Primer Gelap */
    --bg-light: #fcfaf8;      /* Background Terang */
    --text-dark: #333333;
    --text-light: #ffffff;
    --font-title: 'Cinzel Decorative', serif;
    --font-subtitle: 'Cormorant Garamond', serif;
    --font-body: 'Poppins', sans-serif;
    --radius: 16px;
}

/* ================= IMPORT FONT KUSTOM ================= */
@font-face {
    font-family: 'BaskervilleCustom';
    src: url('assets/Baskvill.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Amoresa';
    src: url('assets/Amoresa.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ================= RESET & BASE ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
    scroll-behavior: smooth; 
    /* Warna area kosong di monitor komputer */
    background-color: #e0d8db; 
}
body {
    font-family: var(--font-body);
    background-color: var(--bg-light); /* Memastikan area undangan tetap putih/terang */
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
}
body.locked { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-title); font-weight: normal; }
.text-white { color: var(--text-light) !important; }
.text-italic { font-style: italic; }
.mb-2 { margin-bottom: 20px; }
.mt-2 { margin-top: 20px; }
.w-100 { width: 100%; }
.text-center { text-align: center; }

/* ================= TAMPILAN DESKTOP (RASIO IPHONE SE) ================= */
@media (min-width: 500px) {
    body { 
        width: 100%;
        max-width: 375px; /* Lebar persis iPhone SE */
        margin: 0 auto; 
        box-shadow: 0 0 50px rgba(0,0,0,0.15); /* Bayangan tegas agar terlihat seperti HP */
        position: relative; 
        
    }
    #music-toggle { 
        right: calc(50vw - 167.5px) !important; /* 187.5px (setengah layar HP) - 20px (margin kanan) */
        bottom: 20px !important; 
    }
    
    
    #cover-page { 
        max-width: 375px; 
        left: 50% !important; 
        /* Mengunci posisi di tengah monitor */
        transform: translateX(-50%); 
    }
    
    /* Memastikan animasi geser ke atas tetap berada di tengah */
    .slide-up { 
        transform: translate(-50%, -100%) !important; 
    }
    
    /* Memastikan menu navigasi sembunyi dengan benar tanpa geser ke samping */
    .nav-bottom-wrapper.hidden { 
        transform: translate(-50%, 150%) !important; 
    }
    
    /* Menjaga tombol musik tetap berada di dalam batas layar HP, 
       tidak menempel di pojok monitor komputer */
    #music-toggle { 
        right: calc(50vw - 167px) !important; /* 375px / 2 = 187.5px dikurangi jarak margin 20px */
    }
}

/* ================= TYPOGRAPHY & BUTTONS ================= */
.title { font-size: 2.2rem; color: var(--primary-dark); margin-bottom: 10px; }
.subtitle { font-family: var(--font-subtitle); font-size: 1.2rem; color: #666; font-style: italic; }

button { border: none; cursor: pointer; font-family: var(--font-body); transition: 0.3s; }
.btn-primary {
    background: var(--primary); color: white; padding: 12px 24px;
    border-radius: 30px; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-3px); }
.btn-outline {
    background: transparent; color: var(--primary); border: 1px solid var(--primary);
    padding: 10px 20px; border-radius: 30px; font-weight: 500; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.btn-outline:hover { background: var(--primary); color: white; }
.btn-wa { background: #25D366; color: white; padding: 12px 24px; border-radius: 30px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600;}

/* ================= COVER PAGE ================= */
#cover-page {
    position: fixed; 
    inset: 0; 
    z-index: 9999;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    background-color: #fff9fa;
    overflow: hidden;
    transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1), opacity 1s ease;
}
.slide-up { transform: translateY(-100%); }

/* Latar Belakang Gambar Asli */
.watercolor-bg {
    position: absolute;
    inset: 0;
    background-image: url('assets/background1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 1; 
}

/* Teks The Wedding Of (Paling Atas) */
.subtitle-top {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1rem;
    color: #a0909c;
    text-transform: uppercase;
    letter-spacing: 6px;
    z-index: 5;
    text-align: center;
    position: absolute; 
    top: 5vh; 
    left: 0;
    width: 100%; 
    margin: 0; 
}

/* Wadah Seni Utama Tengah */
.cover-center-art {
    position: relative;
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-top: -15vh; 
}

/* Layer 1: Sakura */
.img-sakura {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1; 
    pointer-events: none;
}

/* Layer 2: Persegi Ungu */
.img-persegi {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    z-index: 2; 
}

/* Layer 3: Bunga Menggantung */
.flowers-hanging {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%; 
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%); 
    z-index: 3; 
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Layer 4: Teks Nama Mempelai */
.cover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4; 
    width: 100%;
    text-align: center;
}

.nama-mempelai {
    font-family: 'Amoresa', cursive;
    font-size: 3rem; 
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; 
    font-weight: normal;
}

.simbol-dan {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.8rem; 
    margin-top: 5px; 
}

/* Area Tamu Undangan Bawah */
.cover-guest {
    position: absolute;
    bottom: 8%; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 5;
    text-align: center;
}

.kepada-yth {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.1rem;
    color: #a0909c;
    margin-bottom: 5px;
}

.nama-tamu {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #726269;
    margin: 0 0 25px 0;
    text-transform: capitalize;
}

.btn-buka-cover {
    background: #9d8892; 
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(157, 136, 146, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-buka-cover:hover {
    background: #816e77;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(157, 136, 146, 0.6);
}

/* ================= LAYOUT SECTIONS ================= */
.section { padding: 60px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; }
.colored-section { background: var(--primary); color: white; }
.section-header { text-align: center; margin-bottom: 40px; }

.card {
    background: white; border-radius: var(--radius); padding: 30px 20px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); width: 100%; max-width: 400px;
}

/* ================= HERO SECTION (UPDATE) ================= */
#hero { 
    /* Ganti background dengan background2.webp */
    background-image: url('assets/background2.webp'); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    text-align: center; 
    min-height: 100vh;
    position: relative; /* Penting untuk posisi absolut bunga */
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* TAMBAHKAN BARIS INI: 
       Memotong area animasi bunga yang meluber keluar batas, 
       sehingga rasio halaman HP tetap terkunci rapi 100% */
    overflow: hidden; 
}

/* Hilangkan background transparan hero-box agar background2 terlihat */
.hero-box { 
    background: transparent; 
    padding: 0; 
    border-radius: 0; 
    backdrop-filter: none; 
    border: none; 
    width: 100%;
    max-width: 400px;
    z-index: 2; /* Di atas bunga */
}

/* Gaya Bunga Dekorasi */
.hero-flower {
    position: absolute;
    width: 100%; /* Default lebar penuh untuk contain */
    height: auto;
    object-fit: contain;
    z-index: 1; /* Di bawah teks */
    pointer-events: none;
}

.hero-flower-tl {
    top: 0;
    left: 0;
    width: 70%; /* Atur lebar agar tidak memenuhi sudut */
}

.hero-flower-br {
    bottom: 0;
    right: 0;
    width: 70%; /* Atur lebar agar tidak memenuhi sudut */
}

/* =========================================
   GAYA TEKS HERO (UPDATE PERBAIKAN)
========================================= */

/* 1. Perkecil teks THE WEDDING OF */
.subtitle-hero {
    font-family: 'BaskervilleCustom', serif;
    /* UKURAN DIKECILKAN (dari 1rem menjadi 0.75rem) */
    font-size: 0.75rem; 
    color: #a0909c;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px; /* Jarak disesuaikan ulang */
}

/* Perbaiki ujung kanan/kiri huruf yang terpotong */
.bride-name,
.groom-name {
    font-family: 'Amoresa', cursive;
    font-size: 4.3rem; 
    line-height: 1.3; 
    font-weight: normal;
    margin: 0;

    /* PADDING DITAMBAH DI SEMUA SISI:
       Format: atas(25px) kanan(20px) bawah(20px) kiri(20px)
       Ini akan memberikan ruang aman agar ekor huruf 'l' bebas melengkung */
    padding: 25px 20px 20px 20px; 

    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: inline-block; 
}

/* 2. Sesuaikan jarak kata AND agar tidak terlalu jauh */
.hero-and {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.9rem;
    color: #a0909c;
    margin: -15px 0; 
    letter-spacing: 4px;
    
    /* TAMBAHKAN KODE INI: 
       Menggeser teks ke kanan. 
       Silakan ubah angka 8px menjadi lebih besar/kecil sampai posisinya pas di mata Anda */
    transform: translateX(20px); 
}

/* 3. Batasi lebar teks keterangan agar tidak melebar */
.hero-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    color: #726269; /* Warnanya diubah sedikit keunguan agar lebih menyatu */
    line-height: 1.6;
    text-align: center;
    
    /* MENGUNCI LEBAR MAKSIMAL AGAR TERLIHAT RAMPING */
    max-width: 275px; 
    margin: 0 auto 25px auto; /* Margin otomatis di kiri-kanan menjaganya tetap di tengah */
}

/* 4. Buat tanggal jauh lebih estetik */
.hero-date {
    font-family: 'BaskervilleCustom', serif; /* Menggunakan font Serif */
    font-size: 1.3rem;
    color: #a0909c; /* Warna senada dengan The Wedding Of */
    text-align: center;
    margin-top: 10px;
    letter-spacing: 5px; /* Spasi direnggangkan agar terlihat premium */
}

/* =========================================
   AYAT SECTION (UPDATE: BUNGA DI BELAKANG)
========================================= */
#ayat {
   background-image: url('assets/background1.webp'); 
    
    /* 1. MENGAKTIFKAN EFEK GAMBAR DIAM (PARALLAX) */
    background-attachment: fixed; 
    background-position: top center; 
    background-repeat: no-repeat;
    
    /* 2. TRIK AGAR GAMBAR TIDAK NGE-ZOOM RAKSASA */
    /* Alih-alih 'cover', kita paksa tingginya saja yang 100% layar (100vh). 
       Lebarnya akan menyesuaikan otomatis tanpa melebar mengikuti monitor. */
    background-size: auto 100vh; 
    background-color: #fcfaf8; /* Warna cadangan agar menyatu jika ada area kosong */
    
    text-align: center; 
    min-height: 100vh;
    position: relative; 
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. PENTING: Mencegah layar HP goyang / zoom-out akibat nama yang lebarnya 120% */
    overflow: hidden; 
}

/* Kotak Kontainer Utama Tengah */
.ayat-wrapper {
    position: relative;
    width: 100%;
    /* BUKAN fixed lagi */
    
    /* 1. JADIKAN BACKGROUND TRANSPARAN 
       agar pseudo-element di belakangnya bisa terlihat */
    background-color: transparent; 
    
    /* Padding di dalam kotak putih dipertahankan */
    padding: 60px 20px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Jarak vertikal dipertahankan */
    margin: 150px 0; 
    box-shadow: none;
    border-radius: 0;
    
    /* 2. Mengunci stacking context agar z-index anak bekerja */
    z-index: 1; 
}

/* 3. MEMBUAT KOTAK PUTIH SEBAGAI PSEUDO-ELEMENT (PERBAIKAN LAYOUT MAX-WIDTH) */
.ayat-wrapper::before {
    content: "";
    position: absolute;
    
    /* Mengunci tinggi agar sama dengan induknya */
    top: 0;
    bottom: 0;
    
    /* TRIK BARU: Alih-alih 100vw, kita buat melebar menembus padding 20px dari #ayat,
       tapi tetap terkunci pada max-width 375px desktop */
    width: calc(100% + 40px); /* 100% ditambah padding kiri 20px & kanan 20px */
    left: -20px; /* Tarik kembali ke kiri sejauh 20px agar rata menyentuh ujung layar HP */
    
    /* Warna putih opaque */
    background-color: #ffffff; 
    
    /* 4. LAPISAN 2: Kotak Putih berada di tengah-tengah lapisan */
    z-index: 1; 
}

/* Posisi Sakura Atas (Tetap menempel di batas atas kotak) */
.sakura-ayat-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -85%); 
    width: 100%;
    max-width: 480px;
    pointer-events: none;
    
    /* 5. LAPISAN 1 (PALING BELAKANG): Bunga berada di bawah kotak putih */
    z-index: 0; 
}

/* Posisi Sakura Bawah (Tetap menempel di batas bawah kotak) */
.sakura-ayat-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 85%); 
    width: 100%;
    max-width: 480px;
    pointer-events: none;
    
    /* 5. LAPISAN 1 (PALING BELAKANG): Bunga berada di bawah kotak putih */
    z-index: 0; 
}

/* 6. MEMASTIKAN TEKS & BISMILLAH TETAP DI ATAS KOTAK PUTIH */
.img-bismillah,
.text-ayat,
.source-ayat {
    position: relative;
    /* 7. LAPISAN 3 (PALING DEPAN): Teks dan Bismillah harus tumpuk paling atas */
    z-index: 2; 
}

/* --- Gaya Teks & Gambar (Sama seperti sebelumnya) --- */
.img-bismillah {
    width: 70%; max-width: 250px; height: auto;
    object-fit: contain; margin-bottom: 30px;
}
.text-ayat {
    font-family: 'BaskervilleCustom', serif; font-size: 1.1rem;
    color: #a0909c; line-height: 1.7; margin-bottom: 30px;
    max-width: 340px; 
}
.source-ayat {
    font-family: 'BaskervilleCustom', serif; font-size: 1.1rem;
    color: #a0909c; letter-spacing: 2px; margin: 0;
}



/* ================= PROFIL REDESIGN (MODERN ARCH) ================= */
#profil {
    background-image: url('assets/background1.webp'); 
    
    /* 1. MENGAKTIFKAN EFEK GAMBAR DIAM (PARALLAX) */
    background-attachment: fixed; 
    background-position: top center; 
    background-repeat: no-repeat;
    
    /* 2. TRIK AGAR GAMBAR TIDAK NGE-ZOOM RAKSASA */
    /* Alih-alih 'cover', kita paksa tingginya saja yang 100% layar (100vh). 
       Lebarnya akan menyesuaikan otomatis tanpa melebar mengikuti monitor. */
    background-size: auto 100vh; 
    background-color: #fcfaf8; /* Warna cadangan agar menyatu jika ada area kosong */
    
    text-align: center; 
    min-height: 100vh;
    position: relative; 
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. PENTING: Mencegah layar HP goyang / zoom-out akibat nama yang lebarnya 120% */
    overflow: hidden; 
}

/* Bunga Kiri Atas */
.flower-profil-tl {
    position: absolute;
    top: 0;  
    left: 0; 
    
    /* UKURAN DIPERBESAR (sebelumnya 60% dan 250px) */
    width: 75%; 
    max-width: 260px; 
    
    z-index: 1; 
    pointer-events: none; 
    transform: translate(-15%, -15%); 
}

/* Bunga Kanan Bawah */
.flower-profil-br {
    position: absolute;
    bottom: 0; 
    right: 0;  
    
    /* UKURAN DIPERBESAR (sebelumnya 60% dan 250px) */
    width: 75%; 
    max-width: 260px;
    
    z-index: 1; 
    pointer-events: none; 
    transform: translate(15%, 15%); 
}

/* Header Profil */
.we-are-text {
    font-family: 'Amoresa', cursive;
    font-size: 3rem;
    line-height: 1.2; 
    
    /* PADDING BAWAH DIUBAH JADI 0 
       (Atas tetap 20px agar tidak terpotong, kanan/kiri 15px, bawah 0) */
    padding: 20px 15px 0 15px; 
    margin: 0;
    
    display: inline-block; 
    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.getting-married-text {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.5rem;
    color: #a0909c;
    letter-spacing: 3px;
    
    /* MARGIN ATAS DIBUAT NEGATIF (-10px) 
       Ini akan menarik teks "GETTING MARRIED!" ke atas agar lebih menempel dengan "We are" */
    margin: -10px 0 25px 0; 
}

.profil-intro-text {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.95rem;
    color: #a0909c;
    max-width: 320px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

/* Frame Jendela (Arch) */
.window-frame {
    position: relative;
    
    /* UKURAN DIPERKECIL (Sebelumnya width: 220px, height: 300px) */
    width: 170px; 
    height: 230px; 
    
    margin: 0 auto 40px;
    
    /* Lengkungan disesuaikan dengan ukuran baru (setengah dari width) */
    border-radius: 100px 100px 0 0; 
    overflow: visible; 
}

.foto-mempelai {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px 100px 0 0;
    
    /* STROKE / BINGKAI PUTIH DITAMBAHKAN */
    border: 4px solid #ffffff; 
    
    /* Pastikan border tidak membuat ukuran foto melebar dari frame */
    box-sizing: border-box;
    
    /* Bayangan sedikit dipertajam agar kontras dengan bingkai putih */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
}

/* Nama Panggilan Overlap */
.nickname-overlap {
    position: absolute;
    bottom: -35px; 
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    font-family: 'Amoresa', cursive;
    font-size: 3rem; 
    color: #ffffff;
    font-weight: normal;
    
    /* SHADOW DIPERHALUS (Lebih tipis dan transparan) */
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25); 
    
    margin: 0;
    line-height: 1;
    z-index: 2;
}

/* Nama Panjang & Ortu */
.fullname-gold {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.6rem;
    
    /* MARGIN ATAS DIPERBESAR: (Dari 15px menjadi 45px) 
       Agar nama panjang ikut turun dan tidak tertabrak nama panggilan yang baru digeser ke bawah */
    margin: 45px 0 5px 0; 
    
    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.parents-info {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1rem;
    color: #a0909c;
    margin-bottom: 20px;
line-height: 1.5; 
}

/* Tombol IG */
.btn-ig-profil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #a0909c;
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    transition: 0.3s;
}

/* Pemisah "dengan" */
.divider-with-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 90px 0;
}

.divider-with-text .line {
    flex: 1;
    height: 1px;
    background-color: #a0909c;
    max-width: 80px;
}

.dengan-text {
    font-family: 'Amoresa', cursive;
    font-size: 2.2rem;
    color: #a0909c;
}

/* =========================================
   PERBAIKAN SLIDER & TEKS GALERI
========================================= */

.profil-gallery-wrapper {
    margin-top: 60px;
    width: 100%;
    box-sizing: border-box;
    /* PERBAIKAN 1: Buka gembok ini agar slider bisa ditarik mentok ke tepi layar */
    overflow: visible; 
    text-align: center;
}

/* =========================================
   PERBAIKAN JUDUL & TEKS GALERI
========================================= */

/* Pastikan wrapper utama tidak melewati batas layar */
.profil-gallery-wrapper {
    margin-top: 60px;
    width: 100%;
    box-sizing: border-box; /* Kunci agar layout tidak luber */
    overflow: hidden;
    text-align: center;
}

/* --- Judul Estetik --- */
.gallery-header {
    margin-bottom: 15px;
}

.gallery-title {
    font-family: 'Amoresa', cursive;
    /* UKURAN DIPERKECIL agar proporsional di HP */
    font-size: 1.8rem; 
    line-height: 1.2;
    padding: 10px 15px; /* Mencegah huruf atas terpotong shadow/clip */
    margin: 0;
    
    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gallery-line {
    width: 40px;
    height: 1px;
    background-color: #a0909c;
    margin: 0 auto;
    opacity: 0.6;
}

/* --- Penanganan Teks Keterangan --- */
.gallery-desc-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 35px auto;
    
    /* PADDING KIRI KANAN YANG AMAN */
    padding: 0 85px; 
    
    /* SANGAT PENTING: Mencegah padding membuat elemen keluar layar */
    box-sizing: border-box; 
}

.gallery-desc {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.9rem; /* Dikecilkan sedikit agar rapi */
    color: #a0909c;
    line-height: 1.6;
    margin: 0;
    text-align: center;
    
    /* Memaksa teks turun baris jika mentok */
    white-space: normal; 
    word-wrap: break-word;
}

/* =========================================
   PERBAIKAN MUTLAK: SLIDER INFINITY SEAMLESS
========================================= */

.slider-container {
    width: 100%;
    /* Gunakan overflow: hidden bersih untuk mengikis rel trek */
    overflow: hidden; 
    position: relative;
    /* Hapus efek mask-image agar transisi sambungan mulus secara alami */
}

.slider-track {
    display: flex;
    flex-wrap: nowrap;
    /* PENTING: Gunakan panjang trek yang diketahui untuk sambungan yang mulus */
    width: max-content; 
    animation: scrollInfinity 35s linear infinite;
}

.slide-set {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding-right: 12px; /* Jarak sambungan (harus sama dengan gap) */
    
    /* KUNCI UTAMA: Melarang flexbox mengerutkan ukuran grup foto */
    flex-shrink: 0; 
}

/* Menggeser rel trek sejauh panjang satu set foto, dan kemudian browser me-reset ke 0 */
@keyframes scrollInfinity {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Foto Lebih Mungil */
.slide-set img {
    height: 160px; /* Ukuran diperkecil dari 220px */
    aspect-ratio: 1/1; /* Dibuat kotak agar lebih minimalis, atau hapus baris ini jika ingin portrait */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   COUNTDOWN SECTION REDESIGN (MINIMALIS)
========================================= */
#countdown {
    /* Latar belakang sesuai permintaan */
    background-image: url('assets/background2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    padding: 100px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.countdown-wrapper {
    width: 100%;
    max-width: 450px;
}

/* Judul Save the Date */
.save-the-date-title {
    font-family: 'Amoresa', cursive;
    font-size: 4rem;
    line-height: 1.2;
    margin: 0 0 10px 0;
    padding: 20px 15px 5px 15px; /* Mencegah huruf atas terpotong */
    
    /* Gradasi emas yang konsisten dengan tema */
    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Teks Keterangan */
.countdown-desc {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.1rem;
    color: #a0909c;
    line-height: 1.6;
    margin: 0 auto 40px auto;
    max-width: 320px;
}

/* Wadah Kotak Countdown */
.countdown-box-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Jarak antar kotak */
    margin-bottom: 45px;
}

/* Kotak Minimalis */
.cd-box {
    background-color: #a0909c; /* Warna kotak abu ungu */
    color: #ffffff; /* Warna teks di dalam kotak putih */
    width: 65px;
    height: 75px;
    border-radius: 8px; /* Sedikit melengkung agar elegan */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(160, 144, 156, 0.25); /* Bayangan lembut */
}

/* Angka Countdown */
.cd-number {
    font-family: 'Poppins', sans-serif; /* Menggunakan Poppins agar angka terlihat kokoh */
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}

/* Label (Hari, Jam, dll) */
.cd-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tombol Tandai Kalender */
.btn-kalender {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #a0909c;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 30px; /* Bentuk pil / kapsul */
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(160, 144, 156, 0.3);
}

.btn-kalender:hover {
    background-color: #8a7a85; /* Sedikit lebih gelap saat disentuh */
    transform: translateY(-3px); /* Efek terangkat */
    color: #ffffff;
}

/* =========================================
   TAMBAHAN BUNGA DI COUNTDOWN (IDENTIK PROFIL)
========================================= */

/* Pastikan section induk memiliki relative and overflow hidden */
#countdown {
    position: relative; /* Wajib ada untuk penempatan bunga absolut */
    overflow: hidden;   /* Wajib ada agar bunga tidak meluber keluar */
    /* ... (gaya lainnya dari langkah 29 tetap dipertahankan) ... */
}

/* Memastikan konten countdown tetap di depan bunga */
.countdown-wrapper {
    position: relative;
    z-index: 2; /* Angkat konten ke depan */
}

/* Bunga Kiri Atas Countdown */
.flower-cd-tl {
    position: absolute;
    top: 0;
    left: 0;
    
    /* Ukuran DIPERBESAR identik dengan profil */
    width: 75%;
    max-width: 260px;
    
    z-index: 1; /* Di belakang konten (wrapper) */
    pointer-events: none; /* Area kosong tidak menghalangi klik */
    
    /* Efek Geseran identik dengan profil */
    transform: translate(-15%, -15%);
}

/* Bunga Kanan Bawah Countdown */
.flower-cd-br {
    position: absolute;
    bottom: 0;
    right: 0;
    
    /* Ukuran DIPERBESAR identik dengan profil */
    width: 75%;
    max-width: 260px;
    
    z-index: 1; /* Di belakang konten (wrapper) */
    pointer-events: none;
    
    /* Efek Geseran identik dengan profil */
    transform: translate(15%, 15%);
}

/* =========================================
   EVENT SECTION (ADJUSTED LAYERS)
========================================= */
#event {
    background-color: #fdf5f9;
    padding: 200px 20px; 
    display: flex;
    
    /* TAMBAHAN KUNCI: Memastikan kotak tersusun atas-bawah */
    flex-direction: column; 
    
    /* JARAK ANTAR KOTAK: 220px akan memberi ruang aman untuk bunga yang keluar dari kotak */
    gap: 150px; 
    
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: -50px;
}

.event-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
}

/* --- LAYER 1: BUNGA DI BELAKANG (z-index: 1) --- */
.sakura-event-bg-top {
    position: absolute;
    /* GESER LEBIH KE ATAS: Dari -65px ke -110px agar lebih keluar dari kotak */
    top: -110px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 320px;
    z-index: 1; 
    pointer-events: none;
}

.sakura-event-bg-bottom {
    position: absolute;
    /* GESER LEBIH KE BAWAH: Dari -65px ke -110px agar lebih keluar dari kotak */
    bottom: -110px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 320px;
    z-index: 1; 
    pointer-events: none;
}

/* --- LAYER 2: KOTAK PUTIH DI DEPAN (z-index: 2) --- */
.event-box-front {
    background-color: #ffffff;
    position: relative;
    z-index: 2; 
    border-radius: 20px;
    
    /* PERKECIL TINGGI: Mengurangi padding atas/bawah dari 50px ke 35px */
    padding: 35px 25px; 
    
    text-align: center;
    box-shadow: 0 15px 35px rgba(160, 144, 156, 0.15);
}

.event-title-gold {
    font-family: 'Amoresa', cursive;
    
    /* UKURAN DIPERKECIL (sebelumnya 2.8rem) */
    font-size: 2.5rem; 
    
    /* LINE-HEIGHT DIBESARKAN sedikit agar ruang huruf lebih lega */
    line-height: 1.3; 
    
    margin: 0 0 5px 0;
    
    /* PADDING ATAS & BAWAH DITAMBAHKAN: Ini adalah kunci agar ujung/ekor huruf Amoresa tidak terpotong kotak gradasi */
    padding: 15px 5px 15px 5px; 
    
    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Penyesuaian margin internal untuk meringkas tinggi box */
.event-date {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.1rem;
    color: #a0909c;
    margin-bottom: 15px; /* Dari 20px */
}

.event-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #a0909c;
    color: #ffffff;
    
    /* PADDING DIUBAH: Atas/Bawah diperkecil jadi 5px, Kanan/Kiri 20px */
    padding: 5px 20px; 
    
    border-radius: 30px;
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.95rem;
    
    /* Tambahkan line-height 1 agar teks tidak menambah ruang kosong vertikal */
    line-height: 1; 
    
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(160, 144, 156, 0.15);
    transition: 0.3s;
}

.btn-maps-pill {
    margin-top: 10px; /* Dari 15px */
}

.event-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 15px auto; /* Dari 25px */
}

.event-divider-line {
    flex-grow: 1;
    height: 3px;
    background-color: #a0909c;
    opacity: 1;
}

.event-divider-icon {
    color: #a0909c;
    font-size: 1.2rem; /* Dikecilkan sedikit */
    margin: 0 12px;
}

.event-place {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: #a0909c;
    margin-bottom: 3px; /* Dari 5px */
}

.event-address {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.9rem; /* Dikecilkan sedikit */
    color: #a0909c;
    line-height: 1.5;
    margin-bottom: 5px; /* Dari 10px */
}

/* =========================================
   STORY SECTION (TIMELINE RAIL STYLE)
========================================= */
#story {
    background-color: #fdf5f9; /* Latar pink pucat agar kotak menonjol */
    padding: 60px 20px;
    text-align: center; /* Menjaga judul tetap di tengah */
    overflow: hidden;
}

/* Judul Story Tetap di Tengah */
.story-title-gold {
    font-family: 'Amoresa', cursive;
    font-size: 3rem;
    line-height: 1.2;
    margin: 0;
    padding: 10px 5px;
    background: linear-gradient(135deg, #bf9b30 0%, #eac567 50%, #bf9b30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.story-subtitle {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1rem;
    color: #a0909c;
    margin-top: -15px;
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- Container Kotak Cerita (Rel Utama) --- */
.story-card-container {
    position: relative;
    display: flex;
    flex-direction: column; /* Menyusun kotak dari atas ke bawah */
    gap: 40px; /* Jarak vertikal antar kotak */
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    
    /* MEMBERIKAN RUANG DI KIRI UNTUK REL */
    padding-left: 40px; 
    text-align: left; /* Teks di dalam kotak jadi rata kiri */
}

/* --- GARIS REL VERTIKAL --- */
.story-card-container::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px; /* Posisi tiang rel di sebelah kiri */
    width: 3px; /* Ketebalan rel */
    background-color: #a0909c; /* Warna rel (Dusty Purple) */
    border-radius: 3px;
}

/* --- Desain Kotak (Polaroid Card yang Menggantung) --- */
.story-card {
    position: relative;
    background-color: #ffffff; /* Warna kertas */
    width: 100%;
    padding: 15px; 
    border-radius: 8px; /* Sudut sedikit membulat */
    box-shadow: 0 10px 25px rgba(160, 144, 156, 0.15); /* Bayangan estetik */
    box-sizing: border-box;
}

/* --- TITIK PIN PADA REL (Baut Pengait) --- */
.story-card::before {
    content: "";
    position: absolute;
    top: 30px; /* Posisi turun sedikit sejajar dengan foto */
    left: -37.5px; /* Menarik titik pas ke tengah rel */
    
    width: 14px;
    height: 14px;
    background-color: #eac567; /* Warna Emas */
    border: 3px solid #ffffff; /* Frame putih */
    border-radius: 50%;
    
    /* Cincin ungu di luar agar menyatu dengan rel */
    box-shadow: 0 0 0 2px #a0909c; 
    z-index: 2;
}

/* --- GARIS HORIZONTAL PENGAIT (Dari Kotak ke Rel) --- */
.story-card::after {
    content: "";
    position: absolute;
    top: 39px; /* Tinggi sejajar dengan tengah titik pin */
    left: -20px; /* Panjang tarikan garis ke kotak */
    
    width: 20px; /* Panjang garis horizontal */
    height: 3px; /* Ketebalan pengait */
    background-color: #a0909c; 
    z-index: 1;
}

/* --- Foto di dalam Kotak --- */
.story-card-img {
    width: 100%;
    height: 200px; /* Tinggi foto disesuaikan */
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* --- Teks di dalam Kotak --- */
.story-card-text {
    padding: 0 5px;
}

.story-card-text h3 {
    font-family: 'Amoresa', cursive;
    font-size: 2rem;
    color: #bf9b30; /* Emas solid */
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.story-date {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.95rem;
    color: #a0909c; /* Warna tema */
    font-weight: bold;
    font-style: italic;
    display: block;
    margin-bottom: 12px;
}

.story-card-text p {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.9rem; /* Ukuran disesuaikan agar rapi di kotak rata kiri */
    color: #726269;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   GALLERY SECTION (WITH BACKGROUND IMAGE)
========================================= */
#gallery {
    /* KUNCI BACKGROUND: 
       - rgba(253, 245, 249, 0.8) adalah warna pink transparan (0.8 = 80% kepekatan).
       - bg_galeri.webp akan berada di bawah lapisan warna tersebut.
    */
     background: linear-gradient(rgba(255, 205, 230, 0.4), rgba(122, 92, 107, 0.4)), 
                url('assets/bg_galeri.webp');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Membuat efek parallax saat di-scroll */
    
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
}

/* --- Update Warna Judul Gallery --- */
.gallery-title-gold {
    font-family: 'Amoresa', cursive;
    font-size: 3rem;
    line-height: 1.2;
    margin: 0;
    padding: 15px 5px;
    
    /* MENGUBAH GRADASI MENJADI WARNA SOLID */
    color: #ffffff;
    
    /* Menghapus properti background-clip agar warna solid muncul */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    
    display: inline-block;
}
/* --- Grid Foto 2 Kolom --- */
.vintage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Otomatis membagi 2 kolom di HP */
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

/* --- Desain Kertas Polaroid --- */
.vintage-photo {
    background-color: #ffffff; /* Warna putih tulang/kertas kusam */
    padding: 8px 8px 30px 8px; /* Bawah lebih tebal seperti polaroid asli */
    border-radius: 2px;
    box-shadow: 2px 6px 15px rgba(100, 80, 80, 0.15); /* Bayangan kecoklatan */
    transition: 0.4s ease-in-out;
}

/* Efek Miring Estetik (Zig-zag) */
.vintage-photo:nth-child(odd) {
    transform: rotate(-3deg);
}

.vintage-photo:nth-child(even) {
    transform: rotate(4deg);
    margin-top: 20px; /* Diturunkan sedikit agar posisinya asimetris alami */
}

/* --- Efek Filter Warna Vintage (Sepia & Pudar) --- */
.vintage-photo img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 2px;
    
    /* KUNCI VINTAGE: Memberikan efek kekuningan, kontras, dan warna sedikit pudar */
    filter: sepia(20%) contrast(110%) brightness(90%) saturate(75%);
    transition: 0.4s ease-in-out;
}

/* --- Efek Interaktif (Opsional) --- */
/* Saat disentuh, foto akan tegak lurus dan warnanya kembali cerah normal */
.vintage-photo:hover {
    transform: scale(1.05) rotate(0deg);
    z-index: 10;
    position: relative;
    box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.2);
}

.vintage-photo:hover img {
    filter: sepia(0%) contrast(100%) brightness(100%) saturate(100%);
}

/* =========================================
   GIFT & STREAMING SECTION
========================================= */
#gift {
    background-color: #fdf5f9;
    padding: 80px 20px;
    display: flex;
    justify-content: center; /* Memastikan semua ke tengah */
}

.gift-wrapper {
    width: 100%;
    max-width: 450px;
}

/* Kotak Gift (Atas) dan Kotak Streaming (Bawah) */
.gift-box, .streaming-box {
    background-color: #ffffff;
    width: 100%;
    padding: 40px 25px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(160, 144, 156, 0.15);
    box-sizing: border-box;
    text-align: center;
}

/* Memberikan jarak antara kotak gift dan kotak streaming */
.streaming-box {
    margin-top: 30px; 
}

/* Tipografi Judul (Berlaku untuk kedua kotak) */
.gift-title-gold, .streaming-title-gold {
    font-family: 'Amoresa', cursive;
    
    /* UKURAN DIPERKECIL: Dari 2.8rem menjadi 2.2rem */
    font-size: 2.2rem; 
    
    color: #a0909c;
    
    /* Margin bawah sedikit dikurangi agar jarak ke teks lebih pas */
    margin: 0 0 10px 0; 
    
    line-height: 1.2;
}

.gift-desc {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.95rem;
    color: #726269;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Area Hadiah (Tersembunyi) --- */
.btn-gift-main {
    background-color: #a0909c;
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-family: 'BaskervilleCustom', serif;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(160, 144, 156, 0.2);
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-gift-main:hover { background-color: #8a7a85; }

.gift-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    margin-top: 0;
}
.gift-content.show {
    max-height: 1500px;
    opacity: 1;
    margin-top: 30px;
}

.account-card {
    background-color: #fbf8f1; padding: 20px 15px; border-radius: 10px; margin-bottom: 20px; border: 1px dashed #d4c8d0;
}
.bank-name { font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: bold; color: #bf9b30; margin: 0 0 5px 0; letter-spacing: 1px; }
.account-name { font-family: 'BaskervilleCustom', serif; font-size: 1.2rem; color: #726269; margin: 0 0 5px 0; }
.account-number { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: bold; color: #a0909c; margin: 0 0 15px 0; letter-spacing: 2px; }
.account-address { font-family: 'BaskervilleCustom', serif; font-size: 0.95rem; color: #726269; line-height: 1.5; margin: 0 0 15px 0; }

.btn-copy { background-color: #ffffff; color: #a0909c; border: 1px solid #a0909c; padding: 6px 15px; border-radius: 20px; font-family: 'Poppins', sans-serif; font-size: 0.8rem; cursor: pointer; transition: 0.3s; }
.btn-copy:hover { background-color: #a0909c; color: #ffffff; }

.btn-wa { display: inline-flex; align-items: center; gap: 8px; background-color: #25D366; color: #ffffff; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 1rem; margin-top: 10px; }

/* --- Area Streaming --- */
.btn-streaming-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.btn-streaming {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 280px; padding: 12px 20px; border-radius: 30px; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 0.95rem; color: #ffffff; transition: 0.3s ease-in-out;
}

.btn-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.btn-yt { background-color: #FF0000; }
.btn-streaming:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }

/* =========================================================
   HALAMAN 6 (WEDDING WISH & RSVP)
   ========================================================= */
.bg-rsvp {
     /* KUNCI BACKGROUND: 
       - rgba(253, 245, 249, 0.8) adalah warna pink transparan (0.8 = 80% kepekatan).
       - bg_galeri.webp akan berada di bawah lapisan warna tersebut.
    */
    background: linear-gradient(rgba(255, 205, 230, 0.4), rgba(122, 92, 107, 0.4)), 
                url('assets/bg_galeri.webp');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Membuat efek parallax saat di-scroll */
    
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
}


.rsvp-container { width: 100%; text-align: center; }

.header-rsvp { margin-bottom: 40px; padding: 0 15px; }

/* Menyesuaikan Judul dengan tema emas sebelumnya */
.title-rsvp { 
    font-family: 'Amoresa', cursive; /* Disamakan dengan font judul lain */
    font-size: 2.6rem; 
    color: #ffffff; 
    margin-bottom: 10px; 
    line-height: 1.2;
}

.subtitle-rsvp { 
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.9rem; 
    color: #ffffff; 
    line-height: 1.6; 
}

.rsvp-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
    width: 100%;
}

/* Mengubah box menjadi solid putih seperti Story Card */
.rsvp-form-box, .wish-wall-box {
    background-color: #ffffff;
    padding: 40px 25px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(160, 144, 156, 0.15);
    width: 100%;
    max-width: 450px;
    text-align: left;
    box-sizing: border-box;
}

.form-group { margin-bottom: 15px; }

/* Input field bergaya vintage putih tulang */
.form-group input, .form-group select, .form-group textarea {
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid #d4c8d0;
    border-radius: 10px; 
    font-family: 'BaskervilleCustom', serif; 
    font-size: 0.95rem;
    background-color: #fbf8f1;
    color: #726269;
    box-sizing: border-box;
    transition: 0.3s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: #a0909c;
    box-shadow: 0 0 5px rgba(160, 144, 156, 0.2);
}

/* Tombol serasi dengan tombol lain */
.btn-submit {
    width: 100%; 
    background-color: #a0909c; 
    color: #ffffff; 
    padding: 12px;
    border-radius: 30px; 
    border: none; 
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; 
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-submit:hover {
    background-color: #8a7a85;
    transform: translateY(-2px);
}

/* --- Tampilan Wish Wall --- */
.wish-messages { 
    max-height: 400px; 
    overflow-y: auto; 
    padding-right: 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

/* Kustomisasi Scrollbar */
.wish-messages::-webkit-scrollbar { width: 5px; }
.wish-messages::-webkit-scrollbar-track { background: #fdf5f9; }
.wish-messages::-webkit-scrollbar-thumb { background: #d4c8d0; border-radius: 10px; }

/* Desain Komentar Clean */
.wish-card { 
    background: transparent; 
    padding: 15px 5px; 
    border-radius: 0; 
    border-bottom: 1px dashed #d4c8d0;
    border-left: none; /* Menghilangkan border kiri yang kaku */
    margin-bottom: 0;
}

.wish-info { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 8px; 
}

.wish-name { 
    font-family: 'Baskvill', cursive; 
    font-size: 1rem; 
    color: #a0909c; 
    margin: 0;
    line-height: 1;
}

.wish-text { 
    font-family: 'BaskervilleCustom', serif; 
    font-size: 0.95rem; 
    color: #726269; 
    line-height: 1.6; 
    margin-bottom: 8px; 
}

.wish-time { 
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem; 
    color: #b5aab1; 
}

/* Badge Kehadiran yang Kalem */
.badge { 
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem; 
    padding: 3px 10px; 
    border-radius: 20px; 
    font-weight: 500; 
}
.badge-hadir { background-color: #fdf5f9; color: #a0909c; border: 1px solid #a0909c; } /* Pink pastel */
.badge-absen { background-color: #fdf5f9; color: #c62828; border: 1px solid #c62828; } /* Merah */
.badge-ragu { background-color: #fdf5f9; color: #bf9b30; border: 1px solid #bf9b30; } /* Emas */

/* =========================================
   HALAMAN PENUTUP (CLOSING SECTION)
========================================= */
#penutup {
    /* GRADASI PINTAR: 
       - 0% hingga 40% (Atas-Tengah): Sangat transparan agar foto jelas.
       - 80% hingga 100% (Bawah): Menggelap menjadi ungu/coklat pekat agar teks putih terbaca jelas.
    */
    background: linear-gradient(
        to bottom, 
        rgba(255, 205, 230, 0.1) 0%,   
        rgba(255, 205, 230, 0.1) 40%,  
        rgba(122, 92, 107, 0.85) 80%,  
        rgba(122, 92, 107, 1) 100%     
    ), 
    url('assets/bg_galeri.webp');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Menyamakan efek diam dengan halaman RSVP */
    background-repeat: no-repeat;
    
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    
    /* MENDORONG SEMUA KONTEN KE BAWAH */
    justify-content: flex-end; 
    align-items: center;
    
    /* Padding bawah diberi ruang 40px agar credit tidak menabrak pinggir layar HP */
    padding: 0 20px 40px 20px; 
    overflow: hidden;
    box-sizing: border-box;
}

.penutup-content {
    width: 100%;
    max-width: 400px;
    z-index: 2;
    /* Memberi jarak antara teks nama mempelai dengan tombol menu di bawahnya */
    margin-bottom: 25px; 
}

/* Gaya untuk teks "Kami yang berbahagia" */
.kami-berbahagia {
    font-family: 'BaskervilleCustom', serif;
    font-size: 1rem;
    color: #fdf5f9;
    font-style: italic; /* Dibuat miring agar estetik */
    margin: 0 0 5px 0;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Penyesuaian margin nama mempelai karena letaknya di atas */
.nama-mempelai-penutup {
    font-family: 'Amoresa', cursive;
    /* Ukuran nama sedikit dibesarkan agar menjadi fokus utama */
    font-size: 2rem; 
    color: #fdf5f9; 
    margin: 0 0 15px 0; /* Memberi jarak ke teks deskripsi di bawahnya */
    font-weight: normal;
    line-height: 1.2;
}

/* Penyesuaian margin teks deskripsi */
.desc-penutup {
    font-family: 'BaskervilleCustom', serif;
    font-size: 0.95rem;
    color: #fdf5f9; 
    line-height: 1.6;
    margin: 0 auto 20px auto; /* Memberi jarak ke tulisan Terima Kasih di bawahnya */
    max-width: 320px; /* Membatasi lebar teks agar rapi */
}

/* Penyesuaian margin Terima Kasih karena letaknya paling bawah */
.title-penutup {
    font-family: 'Amoresa', cursive;
    /* Ukuran dikecilkan sedikit agar seimbang dengan nama mempelai */
    font-size: 1.4rem; 
    color: #ffffff; 
    margin: 0; /* Margin bawah 0 karena tidak ada teks lagi di bawahnya */
    line-height: 1.2;
}

/* Penyesuaian jarak Credit karena letaknya diubah */
#penutup .credit {
    color: #fdf5f9;
    margin-top: 10px;
    margin-bottom: 25px; /* Memberi jarak ke menu navigasi di bawahnya */
    z-index: 2;
    font-family: 'Poppins', sans-serif;
}

#penutup .credit a {
    color: #eac567;
    text-decoration: none;
    font-weight: bold;
}

/* Memastikan wrapper navigasi tidak punya margin tambahan di penutup */
#penutup .nav-bottom-wrapper {
    margin-top: 0; 
    margin-bottom: 0; /* Menempel dekat dengan dasar layar */
    z-index: 10;
}

/* =========================================
   REDESIGN MENU NAVIGASI
========================================= */
.nav-menu { 
    background-color: #fbf8f1; /* Latar putih tulang khas tema vintage */
    padding: 12px 25px; 
    border-radius: 35px; /* Sedikit lebih membulat (kapsul) */
    
    /* Bayangan lebih tegas tapi lembut agar terlihat mengambang di atas background galeri */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
    
    /* Garis pinggir tipis agar makin estetik */
    border: 1px solid rgba(160, 144, 156, 0.3); 
    
    display: flex; 
    gap: 18px; /* Jarak antar ikon sedikit dilebarkan */
    pointer-events: auto; 
}

.nav-item { 
    color: #a0909c; /* Warna default ikon: Dusty Purple */
    font-size: 1.25rem; 
    transition: all 0.3s ease; 
}

/* Efek saat ikon disentuh atau di-klik */
.nav-item:hover, 
.nav-item:active { 
    color: #eac567; /* Berubah jadi warna Emas (Gold) */
    transform: translateY(-4px); /* Ikon sedikit melompat ke atas */
}

toggle { position: fixed; bottom: 80px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: none; align-items: center; justify-content: center; z-index: 101; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
/* ================= MUSIC TOGGLE BUTTON ================= */
#music-toggle { 
    position: fixed; 
    
    /* POSISI DIUBAH KE POJOK KANAN BAWAH */
    bottom: 20px; /* Jarak dari bawah layar */
    right: 20px;  /* Jarak dari kanan layar */
    
    /* Ukuran sedikit dibesarkan agar proporsional dan mudah ditekan */
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    
    /* WARNA DIUBAH MENJADI DUSTY PURPLE & PUTIH */
    background-color: #a0909c; 
    color: #ffffff; 
    border: 2px solid #ffffff; /* Tambahan garis pinggir putih agar lebih elegan */
    
    display: none; 
    align-items: center; 
    justify-content: center; 
    z-index: 101; 
    box-shadow: 0 5px 15px rgba(160, 144, 156, 0.4); /* Bayangan disesuaikan warnanya */
    transition: all 0.3s ease; 
}

/* Efek saat disentuh/di-klik */
#music-toggle:hover {
    background-color: #8a7a85;
    transform: scale(1.1);
}

/* ================= ANIMATIONS ================= */
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.credit { margin-top: 30px; font-size: 0.8rem; }
.credit a { color: white; font-weight: bold; }

/* =========================================
   ANIMASI REVEAL SPESIFIK (HERO SECTION)
========================================= */
/* 1. Dari bawah ke atas (Fade Up) */
.reveal-fade-up { 
    opacity: 0; 
    transform: translateY(40px); 
    /* DURASI DIPERLAMBAT: Dari 1s menjadi 1.8s */
    transition: all 3s cubic-bezier(0.5, 0, 0, 1); 
}

/* 2. Dari Kiri ke Kanan (Slide Left) */
.reveal-slide-left { 
    opacity: 0; 
    transform: translateX(-50px); 
    transition: all 3s cubic-bezier(0.5, 0, 0, 1); 
}

/* 3. Dari Kanan ke Kiri (Slide Right) */
.reveal-slide-right { 
    opacity: 0; 
    transform: translateX(50px); 
    transition: all 3s cubic-bezier(0.5, 0, 0, 1); 
}

/* 4. Membesar dari kecil (Zoom In) */
.reveal-zoom-in { 
    opacity: 0; 
    transform: scale(0.8); 
    transition: all 3s cubic-bezier(0.5, 0, 0, 1); 
}

/* 5. Mengecil dari besar (Zoom Out) */
.reveal-zoom-out { 
    opacity: 0; 
    transform: scale(1.2); 
    transition: all 3s cubic-bezier(0.5, 0, 0, 1); 
}
/* Animasi Baru: Dari Atas ke Bawah (Fade Down) */
.reveal-fade-down { 
    opacity: 0; 
    transform: translateY(-40px); /* Minus berarti dari atas */
    transition: all 3s cubic-bezier(0.5, 0, 0, 1); 
}

/* =========================================
   STATE AKTIF & PENGATURAN JEDA WAKTU (DELAY)
========================================= */
/* Ketika class .active ditambahkan oleh Javascript */
.reveal-fade-up.active, 
.reveal-slide-left.active, 
.reveal-slide-right.active, 
.reveal-zoom-in.active, 
.reveal-zoom-out.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Tambahkan .reveal-fade-down.active ke dalam daftar ini */
.reveal-fade-up.active, 
.reveal-slide-left.active, 
.reveal-slide-right.active, 
.reveal-zoom-in.active, 
.reveal-zoom-out.active,
.reveal-fade-down.active { 
    opacity: 1;
    transform: translate(0) scale(1);
}

/* JEDA WAKTU DIPERPANJANG: Agar munculnya lebih berjarak dan rileks */
.delay-1 { transition-delay: 0.3s; } /* Muncul sedikit setelah layar terbuka */
.delay-2 { transition-delay: 0.8s; } /* Muncul setelah teks pertama selesai */
.delay-3 { transition-delay: 1.3s; } /* Muncul setelah nama mempelai selesai */
.delay-4 { transition-delay: 1.6s; } /* Paling akhir (Tanggal) */

/* =========================================
   ANIMASI BERURUTAN (AYAT SECTION)
========================================= */

/* 1. Kondisi Awal (Sembunyi) & Transisi Menutup (Cepat 0.4 detik) */
.ayat-wrapper .ayat-anim-down,
.ayat-wrapper .ayat-anim-up,
.ayat-wrapper .ayat-anim-zoom {
    opacity: 0;
    transition: all 0.4s ease; 
}

/* Titik mulai (Start Position) */
.ayat-wrapper .ayat-anim-down { transform: translateY(-40px); }
.ayat-wrapper .ayat-anim-up   { transform: translateY(40px); }
.ayat-wrapper .ayat-anim-zoom { transform: scale(0.85); } /* Zoom lebih lembut */

/* 2. Kondisi Aktif (Saat tersorot layar) */
.ayat-wrapper.active .ayat-anim-down,
.ayat-wrapper.active .ayat-anim-up,
.ayat-wrapper.active .ayat-anim-zoom {
    opacity: 1;
    transform: translate(0) scale(1);
    /* Kecepatan dasar saat muncul: 1.8 detik */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* 3. KOREOGRAFI JEDA (Diatur menggunakan modul class delay) */
.ayat-wrapper.active .delay-0 { transition-delay: 0s; }   /* Sakura Top & Bottom */
.ayat-wrapper.active .delay-2 { transition-delay: 0.2s; } /* Bismillah */
.ayat-wrapper.active .delay-4 { transition-delay: 0.4s; } /* Teks Ayat */
.ayat-wrapper.active .delay-6 { transition-delay: 0.6s; } /* Sumber Ayat */

/* =========================================
   ANIMASI BERURUTAN (PROFIL HEADER)
========================================= */

/* 1. Kondisi Awal (Sembunyi) & Transisi saat Menutup */
.profil-header .anim-down,
.profil-header .anim-up,
.profil-header .anim-zoom {
    opacity: 0;
    /* Durasi menutup tetap cepat (0.4s) dan SERENTAK tanpa delay agar tidak nyangkut saat scroll cepat */
    transition: all 0.4s ease; 
}

/* Posisi Awal Spesifik */
.profil-header .anim-down { transform: translateY(-40px); }
.profil-header .anim-up   { transform: translateY(40px); }
.profil-header .anim-zoom { transform: scale(0.8); }


/* 2. Kondisi Aktif (Saat tersorot layar) */
.profil-header.active .anim-down,
.profil-header.active .anim-up,
.profil-header.active .anim-zoom {
    opacity: 1;
    transform: translate(0) scale(1);
    /* Kecepatan dasar saat muncul: 1.8 detik */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* 3. KOREOGRAFI JEDA (Delay 0.2 detik berurutan) */
.profil-header.active .anim-down {
    transition-delay: 0s; /* Keluar pertama, langsung */
}

.profil-header.active .anim-up {
    transition-delay: 0.2s; /* Keluar kedua, nunggu 0.2 detik */
}

.profil-header.active .anim-zoom {
    transition-delay: 0.4s; /* Keluar ketiga, nunggu 0.4 detik */
}

/* =========================================
   ANIMASI KARTU MEMPELAI & DIVIDER (PROFIL)
========================================= */

/* 1. Kondisi Awal (Sembunyi) & Transisi Cepat Saat Menutup */
.trigger-group .p-anim-zoom-in,
.trigger-group .p-anim-zoom-out,
.trigger-group .p-anim-slide-left,
.trigger-group .p-anim-slide-right,
.trigger-group .p-anim-fade-zoom-up,
.trigger-group .p-anim-draw-line {
    opacity: 0;
    transition: all 0.4s ease;
}

/* Transformasi Awal (Posisi sebelum masuk layar) */
.trigger-group .p-anim-zoom-in      { transform: scale(0.6); }            /* Foto: Dimulai dari kecil */
.trigger-group .p-anim-zoom-out     { transform: scale(1.5); }            /* Panggilan: Dimulai dari besar */
.trigger-group .p-anim-slide-left   { transform: translateX(-60px); }     /* Geser dari luar kiri */
.trigger-group .p-anim-slide-right  { transform: translateX(60px); }      /* Geser dari luar kanan */
.trigger-group .p-anim-fade-zoom-up { transform: translateY(40px) scale(0.8); } /* Bawah & Kecil */

/* Khusus Animasi Garis Draw Fill */
.trigger-group .p-anim-draw-line {
    max-width: 0 !important; /* Dimulai dari titik nol */
}

/* 2. Kondisi Aktif (Tersorot Layar) */
.trigger-group.active .p-anim-zoom-in,
.trigger-group.active .p-anim-zoom-out,
.trigger-group.active .p-anim-slide-left,
.trigger-group.active .p-anim-slide-right,
.trigger-group.active .p-anim-fade-zoom-up {
    opacity: 1;
    transform: translate(0) scale(1); /* Kembali ke posisi/ukuran normal */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* Aktifasi Garis Draw Fill */
.trigger-group.active .p-anim-draw-line {
    opacity: 1;
    max-width: 80px !important; /* Tumbuh hingga 80px */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* 3. Delay Modul (Digunakan bersama agar kode bersih) */
.trigger-group.active .delay-0 { transition-delay: 0s; }
.trigger-group.active .delay-2 { transition-delay: 0.2s; }
.trigger-group.active .delay-4 { transition-delay: 0.4s; }
.trigger-group.active .delay-6 { transition-delay: 0.6s; }
.trigger-group.active .delay-8 { transition-delay: 0.8s; }

/* =========================================
   PERBAIKAN: ZOOM OUT KHUSUS POSISI TENGAH
========================================= */

/* 1. Kondisi Awal (Membesar & Terkunci di Tengah) */
.trigger-group .p-anim-zoom-out-center {
    opacity: 0;
    transform: translateX(-50%) scale(1.5);
    transition: all 0.4s ease;
}

/* 2. Kondisi Aktif (Kembali ke ukuran normal, tetap di Tengah) */
.trigger-group.active .p-anim-zoom-out-center {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* =========================================
   ANIMASI SLIDER GALERI (Fade Up Murni)
========================================= */

/* 1. Kondisi Awal (Sembunyi & Berada di bawah) */
.trigger-group .p-anim-fade-up {
    opacity: 0;
    transform: translateY(40px); /* Hanya bergeser ke bawah, tanpa scale/zoom */
    transition: all 0.4s ease;
}

/* 2. Kondisi Aktif (Bergerak naik ke posisi normal) */
.trigger-group.active .p-anim-fade-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* =========================================
   ANIMASI COUNTDOWN (DURASI KHUSUS 3 DETIK)
========================================= */

/* 1. Kondisi Awal (Sembunyi) */
.trigger-group .cd-anim-zoom-out,
.trigger-group .cd-anim-zoom-in,
.trigger-group.cd-number-trigger {
    opacity: 0;
    transition: all 0.4s ease;
}

/* Titik Awal Transformasi */
.trigger-group .cd-anim-zoom-out { transform: scale(1.5); } /* Dari Besar */
.trigger-group .cd-anim-zoom-in  { transform: scale(0.6); } /* Dari Kecil */
.trigger-group.cd-number-trigger { transform: translateY(30px) scale(0.9); } /* Kotaknya sedikit melayang & mekar */

/* 2. Kondisi Aktif (DURASI 2 DETIK SESUAI REQUEST) */
.trigger-group.active .cd-anim-zoom-out,
.trigger-group.active .cd-anim-zoom-in,
.trigger-group.cd-number-trigger.active {
    opacity: 1;
    transform: translate(0) scale(1);
    /* Transisi diperlambat menjadi 2 detik */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1); 
}

/* =========================================
   ANIMASI BUNGA POJOK COUNTDOWN (DURASI 2s)
========================================= */

/* 1. Kondisi Awal (Sembunyi) & Transisi Cepat Saat Menutup */
/* Kita pakai class pemicu baru 'cd-flower-tl-trigger' */
.cd-flower-tl-trigger, .cd-flower-br-trigger {
    opacity: 0;
    transition: all 0.4s ease; /* Menutup cepat (0.4s) tanpa delay agar tidak nyangkut saat scroll cepat */
    z-index: 1; /* Pastikan di belakang konten utama */
}

/* Titik Awal Transformasi (Ditarik jauh ke pojok luar) */
.cd-flower-tl-trigger { 
    transform: translate(-30%, -30%); /* Ditarik ke kiri-atas */
}

.cd-flower-br-trigger { 
    transform: translate(30%, 30%); /* Ditarik ke kanan-bawah */
}

/* 2. Kondisi Aktif (Saat tersorot layar) */
/* Kita mengunci posisi normal asli yang Anda buat sebelumnya di CSS statis */
.cd-flower-tl-trigger.active {
    opacity: 1;
    transform: translate(-15%, -15%); /* Posisi normal kiri-atas asli */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

.cd-flower-br-trigger.active {
    opacity: 1;
    transform: translate(15%, 15%); /* Posisi normal kanan-bawah asli */
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* =========================================
   ANIMASI EVENT SECTION (4 SEC DRAW LINE)
========================================= */

/* 1. Kondisi Awal (Sembunyi) */
.trigger-group .e-anim-zoom-in,
.trigger-group .e-anim-zoom-in-center,
.trigger-group .e-anim-zoom-out,
.trigger-group .e-anim-slide-left,
.trigger-group .e-anim-slide-up,
.trigger-group .e-anim-fade-in {
    opacity: 0;
    transition: all 0.4s ease;
}

/* Transformasi Titik Awal */
.trigger-group .e-anim-zoom-in        { transform: scale(0.7); }
.trigger-group .e-anim-zoom-in-center { transform: translateX(-50%) scale(0.7); }
.trigger-group .e-anim-zoom-out       { transform: scale(1.4); }
.trigger-group .e-anim-slide-left     { transform: translateX(-50px); }
.trigger-group .e-anim-slide-up       { transform: translateY(40px); }
.trigger-group .e-anim-fade-in       { transform: scale(0.5); }

/* Garis Draw: 4 DETIK */
.trigger-group .e-anim-draw-line {
    opacity: 0;
    max-width: 0 !important;
    transition: all 0.4s ease;
}

/* 2. Kondisi Aktif (Tersorot Layar) */
.trigger-group.active .e-anim-zoom-in,
.trigger-group.active .e-anim-zoom-out,
.trigger-group.active .e-anim-slide-left,
.trigger-group.active .e-anim-slide-up,
.trigger-group.active .e-anim-fade-in {
    opacity: 1;
    transform: translate(0) scale(1);
    transition: all 1.8s cubic-bezier(0.5, 0, 0, 1);
}

/* Spesifik Sakura Center Aktif */
.trigger-group.active .e-anim-zoom-in-center {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition: all 1.8s cubic-bezier(0.5, 0, 0, 1);
}

/* Spesifik Garis Draw Aktif (4 DETIK) */
.trigger-group.active .e-anim-draw-line {
    opacity: 1;
    max-width: 100% !important;
    transition: max-width 4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease;
}

/* Re-use Delay dari profil atau tambahkan jika diperlukan */

/* =========================================
   EKSTRA JEDA WAKTU (Untuk Konten Menunggu Kotak)
========================================= */
.trigger-group.active .delay-10 { transition-delay: 1.0s; } /* Nunggu 1 detik */
.trigger-group.active .delay-12 { transition-delay: 1.2s; } /* Nunggu 1.2 detik */
.trigger-group.active .delay-14 { transition-delay: 1.4s; } /* Nunggu 1.4 detik */
.trigger-group.active .delay-16 { transition-delay: 1.6s; } /* Nunggu 1.6 detik */

/* =========================================
   LANJUTAN JEDA WAKTU (Untuk Bagian Bawah Kotak Acara)
========================================= */
.trigger-group.active .delay-18 { transition-delay: 1.8s; } /* Menyusul setelah garis */
.trigger-group.active .delay-20 { transition-delay: 2.0s; } 
.trigger-group.active .delay-22 { transition-delay: 2.2s; } /* Tombol keluar paling akhir */

/* =========================================
   ANIMASI STORY SECTION (REL + KARTU)
========================================= */

/* 1. Kondisi Awal (Sembunyi) */
.trigger-group .s-anim-title-up,
.trigger-group .s-anim-card-left {
    opacity: 0;
    transition: all 0.4s ease; /* Transisi tutup cepat saat scroll ke atas */
}

/* Titik Mulai Transformasi */
.trigger-group .s-anim-title-up {
    transform: translateY(60px); /* Judul ditarik ke bawah */
}

.trigger-group .s-anim-card-left {
    transform: translateX(120px); /* Kartu ditarik menjauh ke kanan */
}

/* --- Spesifik Rel Vertikal (::before) Kondisi Awal --- */
.story-card-container.trigger-group::before {
    opacity: 0;
    /* Kita "kikis" relnya agar tingginya 0% dari atas */
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0); 
    transition: all 0.4s ease;
}


/* 2. Kondisi Aktif (Tersorot Layar) */

/* Judul (Durasi: 2 Detik) */
.trigger-group.active .s-anim-title-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* --- Spesifik Rel Vertikal (::before) Kondisi Aktif --- */
/* Kita pakai durasi lambat 4 detik agar rel mengalir pelan mengantarkan kartu */
.story-card-container.trigger-group.active::before {
    opacity: 1;
    /* Kita buka kunciannya agar rel terlihat 100% (Draw Down) */
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transition: -webkit-clip-path 4s cubic-bezier(0.4, 0, 0.2, 1), clip-path 4s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease;
}

/* Kotak Story Meluncur (Durasi: 3 Detik) */
/* PERBAIKAN: Tambahkan tanda '>' agar tidak bocor tertrigger oleh wadah utamanya */
.trigger-group.active > .s-anim-card-left {
    opacity: 1;
    transform: translateX(0);
    transition: all 3s cubic-bezier(0.2, 0.8, 0.2, 1); 
}

/* =========================================
   ANIMASI GALLERY (VINTAGE GRID)
========================================= */

/* 1. Kondisi Awal (Sembunyi) */
.trigger-group .g-anim-title-up,
.trigger-group .g-anim-zoom-in {
    opacity: 0;
    transition: all 0.4s ease;
}

/* Titik Awal Transformasi */
.trigger-group .g-anim-title-up {
    transform: translateY(60px);
}

.trigger-group .g-anim-zoom-in {
    transform: scale(0.5); /* Dimulai dari setengah ukuran asli */
}

/* 2. Kondisi Aktif (Tersorot Layar) */

/* Judul: Reveal dari Bawah (Durasi: 2 Detik) */
.trigger-group.active .g-anim-title-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* Foto: Zoom In Berurutan (Durasi: 4 Detik) */
.trigger-group.active .g-anim-zoom-in {
    opacity: 1;
    transform: scale(1);
    /* Durasi sangat lambat (4s) untuk kesan sinematik */
    transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- LOGIKA JEDA BERURUTAN OTOMATIS (Stagger) --- */
/* Foto 1 */ .trigger-group.active .vintage-photo:nth-child(1) { transition-delay: 0.1s; }
/* Foto 2 */ .trigger-group.active .vintage-photo:nth-child(2) { transition-delay: 0.4s; }
/* Foto 3 */ .trigger-group.active .vintage-photo:nth-child(3) { transition-delay: 0.7s; }
/* Foto 4 */ .trigger-group.active .vintage-photo:nth-child(4) { transition-delay: 1.0s; }
/* Foto 5 */ .trigger-group.active .vintage-photo:nth-child(5) { transition-delay: 1.3s; }
/* Foto 6 */ .trigger-group.active .vintage-photo:nth-child(6) { transition-delay: 1.6s; }


/* PENTING: Menjaga agar rotasi estetik (zig-zag) tetap ada setelah animasi selesai */
.vintage-photo:nth-child(odd).active {
    transform: scale(1) rotate(-3deg) !important;
}

.vintage-photo:nth-child(even).active {
    transform: scale(1) rotate(4deg) !important;
    margin-top: 20px;
}

/* =========================================
   ANIMASI GIFT SECTION KHUSUS (DURASI 2s)
========================================= */

/* 1. Kondisi Awal (Sembunyi) */
.trigger-group .gf-anim-title-up,
.trigger-group .gf-anim-zoom-in {
    opacity: 0;
    transition: all 0.4s ease; /* Transisi tutup kilat saat layar ditinggalkan */
}

/* Titik Awal Transformasi */
.trigger-group .gf-anim-title-up {
    transform: translateY(60px); /* Ditarik ke bawah */
}

.trigger-group .gf-anim-zoom-in {
    transform: scale(0.6); /* Kotak mengecil sebelum mekar */
}

/* 2. Kondisi Aktif (Tersorot Layar) */

/* Judul (Durasi: 2 Detik) */
.trigger-group.active .gf-anim-title-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 2s cubic-bezier(0.5, 0, 0, 1);
}

/* Kotak Gift & Live Streaming: Zoom In Independen (Durasi: 2 Detik) */
.trigger-group.active .gf-anim-zoom-in {
    opacity: 1;
    transform: scale(1);
    transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}