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

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Memotong elemen yang melebihi batas kiri/kanan */
    position: relative; /* Menjadi patokan untuk elemen absolute seperti bunga */
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    background-color: #fcfcfc;
}

/* Kunci scroll saat di cover */
body.locked {
    overflow: hidden;
}

.title-small {
    font-weight: 300;
    font-size: 1rem;
    color: #5B8FB9;
}

.nama-mempelai {
    font-family: 'Great Vibes', cursive;
    font-size: 3rem;
    color: #081b2b;
    margin: 10px 0;
    line-height: 1.2;
    font-weight: normal;
}

/* --- COVER PAGE --- */
#cover-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('assets/bg_cover1.webp') center/cover; /* Menggunakan .webp */
    color: white; 
    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; 
}

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

#cover-page .title-small {
    margin-top: 0; 
    margin-bottom: 10px; /* Jarak dasar dengan nama mempelai */
    position: relative;
    top: 40px; 
    color: #1B2631; /* Warna hitam kebiruan */
}

#cover-page .nama-mempelai {
    text-align: center;
    font-size: 3.3rem; 
    position: relative;
    top: 60px; 
    margin-top: 0;
    margin-bottom: 0;
    color: #1B2631;
}

/* Jika simbol '&' dirasa kurang mengimbangi besarnya nama, sesuaikan juga: */
.simbol-dan {
    display: inline-block;
    font-size: 0.6em; 
    margin: 0 10px; 
}

/* 1. Tarik teks "Kepada Yth:" lebih tinggi lagi agar tidak tertimpa */
.tamu-section p:first-child {
    position: relative;
    top: -40px; 
    margin-bottom: 0;
    color: #1B2631;
}

.tamu-section .nama-tamu {
    font-size: 1.2rem; 
    font-weight: 600;
    position: relative;
    top: -25px; 
    margin-top: 0;
    margin-bottom: 0px; 
    color: #1B2631;
}

#cover-page .disclaimer {
    opacity: 0; 
    animation: entranceText 1.2s ease 1s forwards;
    will-change: transform, opacity;
}

#btn-buka {
    background: linear-gradient(135deg, #89B6D8 0%, #5B8FB9 50%, #3A6487 100%);
    color: #ffffff; 
    border: 2px solid #C5A059; /* Border emas tetap dipertahankan */
    padding: 8px 20px;       
    font-size: 0.9rem;       
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0;
    
    /* --- EFEK KILAU & BAYANGAN (TETAP SAMA) --- */
    position: relative;
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.4); 
    animation: entranceButton 1.2s ease 2.2s forwards, pulseButtonGold 3s ease 3.4s infinite;
    will-change: transform, opacity;
    margin-top: 0px;      
    margin-bottom: 15px;  
    top: -10px;
}

/* --- LOGIKA ANIMASI KILAUAN CAHAYA --- */
#btn-buka::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%; /* Mulai dari luar tombol sebelah kiri */
    width: 50px;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shineEffect 4s infinite ease-in-out;
}

.tamu-section .disclaimer {
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    margin-top: 5px; 
    position: relative;
    top: -10px; 
    color: #1B2631;
    opacity: 0.9; 
}

/* --- 1. COVER PHOTO --- */
.cover-photo {
    margin-top: 80px; /* Dorong foto turun ke dalam area shape oval */
    width: 160px;
    height: 220px; 
    object-fit: cover;
    padding: 6px; 
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border-radius: 50%;
    margin-bottom: 10px; /* Sedikit dirapatkan dengan teks "Kepada Yth" */
    
    opacity: 0;
    animation: entrancePhoto 1.2s ease 1s forwards, floatPhoto 4s ease-in-out 2.2s infinite;
    will-change: transform, opacity, filter;
    filter: drop-shadow(0 4px 15px rgba(212, 175, 55, 0.4));
}

.cover-content {
    position: relative;
    z-index: 20;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0px; 
}

.tamu-section {
    margin-top: 150px; /* Sesuaikan angka ini (misal 120px atau 180px) sampai posisinya pas di tengah oval */
    background: transparent !important; 
    padding: 0 !important; 
    backdrop-filter: none !important; 
    border: none !important; 
    width: 90%; 
    max-width: 400px; 
    margin-left: auto; 
    margin-right: auto;
    color: #5B8FB9;
}

/* --- BINGKAI OVAL GOLD (Tetap Dipertahankan) --- */
.cover-photo, .hero-photo, .mempelai-card img, .penutup-photo {
    width: 160px; 
    height: 220px; 
    object-fit: cover;
    padding: 6px; 
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border-radius: 50%; /* Bentuk Oval */
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 15px rgba(212, 175, 55, 0.4));
}

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

/* =========================================================
   PENYESUAIAN NAMA MEMPELAI (HERO) & FIX CENTER POSISI
   ========================================================= */

/* 1. Kunci kontainer utama agar semua isinya rata tengah */
.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

/* 2. Pastikan foto hero tegak lurus di tengah */
.hero-photo {
    width: 170px; 
    height: 220px;
    object-fit: cover;
    padding: 6px;
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border-radius: 50%;
    margin: 0 auto 20px auto !important; /* FIXED CENTER */
    display: block;
    filter: drop-shadow(0 4px 15px rgba(212, 175, 55, 0.3));
    position: relative;
    z-index: 10; 
    opacity: 0;
}

.hero-content .title-small {
    font-weight: 400 !important; 
    font-size: 1rem !important;  
    letter-spacing: 3px;         
    text-transform: uppercase;   
    margin-bottom: 10px;         
    display: block;
}

/* 3. Atur nama mempelai */
.hero-content .nama-mempelai {
    font-family: 'Great Vibes', cursive; 
    font-size: 3.5rem !important; 
    font-weight: 400 !important; 
    margin: 25px auto 5px auto !important;
    padding: 0 !important;
    line-height: 1.2;
    display: block;
    width: 100%;
    text-align: center;
    color: #800000; 
}

/* Penyesuaian untuk tampilan HP agar tidak terlalu raksasa */
@media (max-width: 768px) {
    .hero-content .nama-mempelai {
        font-size: 2.8rem !important;
    }
}

/* --- HALAMAN 2 (HERO) --- */
.hero-bg {
    background: url('assets/bg_hero1.webp') center/cover; /* Menggunakan .webp */
    background-attachment: fixed; 
}

/* Class text-maroon dipertahankan namanya agar tidak merusak HTML lama, tapi warnanya diubah biru */
.text-maroon {
    color: #5B8FB9 !important;
}

.hero-bg .title-small {
    color: #5B8FB9 !important;
    font-weight: 600;
    margin-bottom: -5px;
}

.intro-text {
    max-width: 600px;
    margin: 20px auto; 
    padding: 0 20px; 
    line-height: 1.6;
    font-size: 0.8rem;
    color: #5B8FB9; 
    font-weight: 500;
}

.tanggal {
    font-weight: 600;
    font-size: 1.1rem;
    
    /* UBAH DI SINI: Kurangi angkanya (sebelumnya 20px, sekarang 5px) */
    margin-bottom: 3px; 
    
    color: #5B8FB9; 
}

/* --- DESAIN BARU COUNTDOWN (SEJAJAR & ANGKA LURUS) --- */
#countdown {
    display: flex;
    justify-content: center; 
    gap: 10px;
    margin: 30px auto 15px auto; 
    padding: 0 15px; 
    flex-wrap: nowrap;
    width: 100%;
}

.cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
}

.cd-box span { 
    position: relative; 
    width: 60px; 
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; 
    font-size: 1.5rem; 
    font-weight: 400; 
    color: #5B8FB9; 
    background: rgba(255, 255, 255, 0.7); 
    z-index: 1;
}

.cd-box p { 
    font-size: 0.75rem; 
    margin-top: 0; 
    text-transform: capitalize; 
    letter-spacing: 0.5px; 
    color: #444; 
    font-weight: 500;
}

/* --- PROFIL SECTIONS (Halaman 3) --- */
#profil {
    background: url('assets/bg_hero1.webp') center/cover; /* Menggunakan .webp */
    background-attachment: fixed;
    padding: 80px 20px;
}

.salam-pengantar {
    text-align: center;
    max-width: 90%;
    margin: 0 auto 40px auto;
}

.img-bismillah-pembuka {
    display: block;
    margin: 0 auto 20px auto; /* Kunci posisi selalu di tengah */
    width: 80%; /* Lebar aman untuk layar HP sempit */
    max-width: 260px; /* Batas maksimal agar tidak terlalu raksasa di layar besar */
    height: auto;
}

.teks-pembuka-pernikahan {
    color: #1B2631 !important; /* Warna biru gelap sesuai permintaan */
    font-size: 0.8rem;
    line-height: 1.8;
    font-weight: 500;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}


/* =========================================================
   STYLE AYAT AL-QURAN
   ========================================================= */

.ayat-quran {
    max-width: 700px;
    font-family: 'Poppins', sans-serif;
    font-style: italic; /* Membuat teks menjadi huruf miring */
    font-weight: 400 !important; /* Membuat huruf standar/tidak terlalu tebal */
    line-height: 1.8;
    margin-bottom: 50px;
    font-size: 0.85rem;
    
    /* Warna biru gelap agar selaras dengan tema */
    color: #1B2631 !important; 
    
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 15px 25px; 
    border-radius: 20px; 
    backdrop-filter: blur(5px); 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

.ayat-quran span {
    display: block;
    margin-top: 10px;
    
    /* Mengurangi ketebalan (sebelumnya 'bold' sekarang '500' / medium) */
    font-weight: 500; 
    
    font-style: italic; 
    color: #1B2631; /* Disamakan warnanya agar benar-benar selaras */
}

.mempelai-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.mempelai-card {
    background: rgba(255, 255, 255, 0.6); 
    
    /* UBAH BAGIAN INI: Padding atas ditambah menjadi 40px */
    padding: 40px 20px 25px 20px !important; 
    
    border-radius: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    max-width: 350px;
    position: relative;
    overflow: visible !important;
}

/* --- 3. PHOTO PROFIL MEMPELAI --- */
.mempelai-card img {
    width: 150px;
    height: 200px;
    object-fit: cover;
    padding: 6px;
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border-radius: 50%; /* Bentuk Oval */
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.3));
}

.mempelai-card h2 {
    font-family: 'Great Vibes', cursive;
    font-size: 2.4rem;
    color: #5B8FB9; 
    margin-top: 15px;
    margin-bottom: 12px;
    line-height: 1.2;
}

.ortu {
    font-family: 'Poppins', sans-serif; /* Menyelaraskan jenis font */
    font-size: 0.85rem;
    color: #1B2631 !important; /* Menyelaraskan warna menjadi biru gelap */
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 5px; /* Memberi sedikit jarak bernapas dengan tombol Instagram */
}

/* --- MUSIC TOGGLE BUTTON --- */
#music-toggle {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background-color: rgba(91, 143, 185, 0.85); 
    backdrop-filter: blur(5px); 
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5); 
    font-size: 1.1rem; 
    cursor: pointer;
    z-index: 10000;
    display: none; 
    box-shadow: 0 4px 10px rgba(91, 143, 185, 0.4);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
}

#music-toggle:hover {
    transform: scale(1.1); 
    background-color: #5B8FB9; 
}

/* --- PENYESUAIAN JARAK AGAR LEBIH LEGA --- */
.calendar-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; 
    opacity: 0; 
    will-change: opacity, transform;
}

#btn-save-date {
    background-color: rgba(255, 255, 255, 0.85); 
    color: #5B8FB9; 
    border: 2px solid #c5a059; 
    padding: 10px 25px;
    border-radius: 30px; 
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(91, 143, 185, 0.15); 
}

#btn-save-date:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(91, 143, 185, 0.25);
}

#calendar-options {
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid rgba(91, 143, 185, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
    width: 200px;
}

#calendar-options.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    position: absolute; 
    visibility: hidden;
}

#calendar-options.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    visibility: visible;
}

.btn-cal-option {
    text-decoration: none;
    color: #444;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* =========================================================
   DIVIDER ESTETIK (AYAT QURAN) - BENTUK EMAS BARU
   ========================================================= */

.divider-estetik {
    position: relative;
    width: 60%; 
    max-width: 250px; /* Sedikit dilebarkan agar lebih proporsional */
    height: 1.5px; /* Dibuat sedikit lebih tipis agar elegan */
    
    /* Gradasi garis emas yang memudar di kedua ujungnya */
    background: linear-gradient(to right, rgba(255,255,255,0), #b38728, #fcf6ba, #b38728, rgba(255,255,255,0));
    
    margin: 30px auto; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Menambahkan ornamen belah ketupat (diamond) emas di tengah garis */
.divider-estetik::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    
    /* Menggunakan gradasi emas kilap yang sama dengan bingkai */
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    
    transform: rotate(45deg); /* Memutar bentuk persegi menjadi belah ketupat */
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5); /* Memberikan efek cahaya/kilau */
}

/* =========================================================
   HALAMAN 4 (EVENT / DETAIL ACARA)
   ========================================================= */
.bg-event {
    background: url('assets/bg_event1.webp') center/cover; 
    background-attachment: fixed; 
}

.event-container {
    width: 100%;
    max-width: 800px;
}

.header-event {
    text-align: center;
    margin-bottom: 40px;
}

.title-section {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #ffffff; 
    margin-bottom: 5px;
}

.subtitle-event {
    font-size: 0.95rem;
    color: #ffffff; 
    font-weight: 500;
}

.event-cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; 
    width: 100%;
}

/* =========================================================
   BINGKAI EMAS DALAM PADA KOTAK EVENT (AKAD & RESEPSI)
   ========================================================= */

.event-card {
    position: relative; /* Wajib ada agar border emas menempel di sini */
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.9);
    padding: 35px 20px;
    border-radius: 20px;
}

/* Mengambil desain bingkai emas yang sama dengan mempelai-card */
.event-card::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 12px;
    padding: 2.5px;
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 5;
}

.event-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.event-card h3 {
    font-family: 'Great Vibes', cursive; 
    font-size: 2.7rem; 
    color: #5B8FB9;
    margin-bottom: 15px;
    font-weight: 400; 
}

.event-info p {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #444;
}

.event-date { font-weight: 700; color: #5B8FB9; }
.event-location { font-weight: 600; }
.event-address {
    font-size: 0.85rem !important;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 25px !important;
    padding: 0 10px;
}

.btn-lokasi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Gradasi Biru yang sama dengan #btn-buka */
    background: linear-gradient(135deg, #89B6D8 0%, #5B8FB9 50%, #3A6487 100%) !important;
    
    color: #ffffff !important;
    border: 2px solid #C5A059 !important; /* Border Emas */
    padding: 10px 25px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.4);
    
    /* Lebar tombol */
    width: 80%;
    max-width: 250px;
    z-index: 10; /* Agar berada di atas border emas */
}

/* Tambahkan Efek Kilau (Shine) agar sama persis */
.btn-lokasi::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 50px;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shineEffect 4s infinite ease-in-out;
}

/* Animasi Pulse agar tombol menarik perhatian */
.btn-lokasi:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.6);
}

/* =========================================================
   HALAMAN 5 (WEDDING GIFT)
   ========================================================= */
.bg-gift {
    background: url('assets/bg_gift1.webp') center/cover; 
    background-attachment: fixed;
}

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

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

.title-gift {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem; 
    color: #5B8FB9; 
    margin-bottom: 10px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(255, 255, 255, 1);
}

.subtitle-gift {
    font-size: 0.8rem; 
    color: #5B8FB9; 
    font-weight: 500;
    line-height: 1.8;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9);
}

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

.atm-card {
    background: linear-gradient(135deg, #5B8FB9 0%, #3A6487 100%); 
    width: 100%;
    max-width: 350px; 
    border-radius: 15px;
    padding: 25px;
    color: white;
    box-shadow: 0 10px 25px rgba(91, 143, 185, 0.4);
    position: relative;
    overflow: hidden;
    text-align: left;
}

.atm-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.atm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.bank-name { font-size: 1.2rem; font-weight: 700; font-style: italic; }
.rek-number { font-size: 1.6rem; font-family: 'Courier New', monospace; font-weight: 600; margin-bottom: 5px; }
.rek-name { font-size: 0.85rem; opacity: 0.9; margin-bottom: 20px; }

.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
}

.wa-confirm-wrapper {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px dashed rgba(91, 143, 185, 0.3);
}

.wa-text { font-size: 0.8rem; color: #444; margin-bottom: 15px; font-weight: 500; }
.btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #5B8FB9; 
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}

/* =========================================================
   HALAMAN 6 (WEDDING WISH & RSVP)
   ========================================================= */
.bg-rsvp {
    /* Menggunakan gradasi biru transparan dan foto bg_galeri.webp yang sama */
    background: linear-gradient(rgba(27, 38, 49, 0.85), rgba(91, 143, 185, 0.75)), url('assets/bg_galeri.webp') center/cover;
    background-attachment: fixed;
}

.rsvp-container { width: 100%; text-align: center; }
.header-rsvp { margin-bottom: 40px; padding: 0 15px; }
.title-rsvp { font-family: 'Great Vibes', cursive; font-size: 3.5rem; color: #ffffff; margin-bottom: 10px; }
.subtitle-rsvp { font-size: 0.85rem; color: #ffffff; font-weight: 500; line-height: 1.8; }

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

.rsvp-form-box, .wish-wall-box {
    background: rgba(255, 255, 255, 0.85); 
    padding: 30px 20px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    width: 100%;
    max-width: 380px;
    text-align: left;
}

.form-group { margin-bottom: 15px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 15px; border: 1px solid rgba(91, 143, 185, 0.3);
    border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.95rem;
}

.btn-submit {
    width: 100%; background-color: #5B8FB9; color: #ffffff; padding: 12px;
    border-radius: 10px; border: none; font-size: 1rem; font-weight: 600;
    cursor: pointer;
}

.wish-messages { max-height: 400px; overflow-y: auto; padding-right: 10px; display: flex; flex-direction: column; gap: 15px; }
.wish-card { background: white; padding: 15px; border-radius: 12px; border-left: 4px solid #5B8FB9; }
.wish-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wish-name { font-size: 0.95rem; color: #333; }
.wish-text { font-size: 0.85rem; color: #555; line-height: 1.6; margin-bottom: 8px; }
.wish-time { font-size: 0.7rem; color: #999; font-style: italic; }

.badge { font-size: 0.7rem; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
.badge-hadir { background-color: #e8f5e9; color: #2e7d32; }
.badge-absen { background-color: #ffebee; color: #c62828; }
.badge-ragu { background-color: #fff8e1; color: #f57f17; }

/* =========================================================
   HALAMAN 7 (PENUTUP)
   ========================================================= */
#penutup {
    padding: 80px 20px 140px 20px; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; 
}

/* =========================================================
   RESET & UPDATE HALAMAN PENUTUP
   ========================================================= */

.bg-penutup {
    /* Transparansi biru dibuat lebih tipis (0.5 dan 0.3) agar foto lebih menonjol */
    background: linear-gradient(rgba(27, 38, 49, 0.5), rgba(91, 143, 185, 0.3)), 
                url('assets/penutup1.webp') center/cover !important; 
    background-attachment: fixed !important;
}

/* Mematikan semua kemungkinan bingkai dari pseudo-element */
.penutup-container::before, 
.penutup-container::after {
    display: none !important;
    content: none !important;
}

.penutup-container {
    text-align: center;
    max-width: 600px;
    border: none !important; 
    box-shadow: none !important; 
    
    /* Tambahkan baris ini untuk mendorong teks ke bawah */
    margin-top: 120px; 
}

/* Mengatur teks menjadi putih solid tanpa shadow */
.penutup-container .teks-pengantar,
.penutup-container .nama-mempelai,
.penutup-container p,
.penutup-container h1 {
    color: #ffffff !important;
    text-shadow: none !important; /* Menghapus semua shadow */
    background: transparent !important;
}


.footer-wrapper {
    position: absolute; bottom: 0; left: 0; width: 100%;
    display: flex; flex-direction: column;
}

.nav-bottom {
    display: flex; justify-content: center; gap: 12px; padding: 20px 10px;
}

.nav-btn {
    background-color: #ffffff; width: 45px; height: 45px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); text-decoration: none;
}
.nav-btn svg { width: 20px; height: 20px; }

.watermark-footer {
    background-color: #5B8FB9; color: rgba(255, 255, 255, 0.8); 
    text-align: center; padding: 15px; font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* =========================================================
   ANIMASI AWAL & KEYFRAMES 
   ========================================================= */
.reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translateY(0); }

#hero .hero-photo, #hero .title-small, #hero .nama-mempelai, #hero .intro-text, #hero .tanggal, #countdown, .calendar-actions { opacity: 0; will-change: opacity, transform; }

body:not(.locked) #hero .hero-photo { 
    animation: 
        entrancePhoto 1.5s ease 0.5s forwards, 
        floatPhoto 4s ease-in-out 2s infinite; 
}

/* 1. Teks "The Wedding Of" */
body:not(.locked) #hero .title-small { 
    animation: entranceText 1s ease 1.5s forwards; 
}

/* 2. Nama Mempelai */
body:not(.locked) #hero .nama-mempelai { 
    animation: entranceText 1s ease 1.7s forwards; 
}

/* 3. Teks Intro */
body:not(.locked) #hero .intro-text { 
    animation: entranceText 1s ease 1.9s forwards; 
}

/* 4. Tanggal Pernikahan */
body:not(.locked) #hero .tanggal { 
    animation: entranceText 1s ease 2.1s forwards; 
}

/* 5. Kotak Countdown */
body:not(.locked) #countdown { 
    animation: entranceButton 1s ease 2.3s forwards; 
}

/* 6. Tombol Save the Date */
body:not(.locked) .calendar-actions { 
    animation: entranceButton 1s ease 2.5s both; 
}

@keyframes entranceText { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes entrancePhoto { 0% { opacity: 0; transform: scale(0.6) translateY(-40px); } 70% { opacity: 1; transform: scale(1.05) translateY(5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes floatPhoto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes entranceButton { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pulseButton { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(91, 143, 185, 0.5); } 50% { transform: scale(1.03); box-shadow: 0 6px 20px rgba(91, 143, 185, 0.7); } }

/* 1. Animasi Mekar */
@keyframes bloomReveal {
    0% {
        opacity: 0;
        scale: 0.3; 
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}

/* 2. Animasi Angin Kiri */
@keyframes swayLeft {
    0% { rotate: -8deg; }
    100% { rotate: 3deg; }
}

/* 3. Animasi Angin Kanan */
@keyframes swayRight {
    0% { rotate: 8deg; }
    100% { rotate: -3deg; }
}

@keyframes fadeInGate {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media (max-width: 768px) {
    .title-section, .title-gift, .title-rsvp { font-size: 2.8rem; }
}

@media (min-width: 500px) {
    html {
        background-color: #e9ecef;
        background-image: radial-gradient(#c2c2c2 1px, transparent 1px);
        background-size: 20px 20px;
        min-height: 100vh;
    }
    body {
        width: 100%;
        max-width: 414px; 
        margin: 0 auto;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
        min-height: 100vh;
        background-color: #fcfcfc;
        position: relative;
        overflow: hidden !important; 
    }
    #cover-page { 
        width: 414px !important; 
        left: 50% !important; 
        transform: translateX(-50%) !important; 
    }
    #cover-page.slide-up { 
        transform: translate(-50%, -100%) !important; 
    }
    #music-toggle { 
        right: calc(50vw - 207px + 25px) !important; 
    }
    .hero-bg, #profil, .bg-event, .bg-gift, .bg-rsvp, .bg-penutup {
        background-attachment: fixed !important; 
        background-position: center top !important; 
        background-size: 414px 100vh !important; 
        background-repeat: no-repeat !important;
    }
}

/* --- PENGATURAN KALIGRAFI ARAB --- */
.teks-salam.arab {
    font-family: 'Aref Ruqaa', serif; 
    font-size: 2.2rem; 
    font-weight: 400;
    font-style: normal;
    line-height: 1.4; 
    margin-bottom: 15px;
    display: block;
    direction: rtl;
    color: #5B8FB9; 
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

@media (max-width: 480px) {
    .teks-salam.arab {
        font-size: 1.8rem; 
    }
}

/* ORNAMEN BUNGA SUDUT COVER */
.bunga-sudut {
    position: absolute;
    max-width: 250px; 
    width: 55vw; 
    pointer-events: none; 
    z-index: 10; 
    opacity: 0; 
    will-change: transform, opacity; 
}

.atas-kiri { top: -40px; left: -50px; }
.atas-kanan { top: -40px; right: -50px; }
.bawah-kiri { bottom: -30px; left: -50px; }
.bawah-kanan { bottom: -30px; right: -50px; }

.atas-kiri   { transform-origin: top left; }
.bawah-kiri  { transform-origin: bottom left; }
.atas-kanan  { transform-origin: top right; }
.bawah-kanan { transform-origin: bottom right; }

.atas-kiri, .bawah-kiri {
    animation: 
        bloomReveal 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, 
        swayLeft 5s ease-in-out 0.5s infinite alternate;
}

.atas-kanan, .bawah-kanan {
    animation: 
        bloomReveal 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, 
        swayRight 5s ease-in-out 0.5s infinite alternate;
}

.shape-oval {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;        
    max-width: none;   
    height: auto;      
    z-index: 1;        
    pointer-events: none; 
    opacity: 0;
    animation: fadeInBackground 2s ease 0.5s forwards;
}

@keyframes fadeInBackground {
    0% { opacity: 0; scale: 0.9; }
    100% { opacity: 1; scale: 1; }
}

@keyframes fadeInLarge {
    0% { opacity: 0; transform: translate(-50%, -45%) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* =========================================================
   MODE DESKTOP 
   ========================================================= */
@media (min-width: 600px) {
    html {
        background-color: #e2e8f0;
        background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
        background-size: 20px 20px;
    }
    
    body {
        width: 414px !important; 
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow-x: hidden !important;
        background-color: #fcfcfc;
    }

    #cover-page {
        width: 414px !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    #cover-page.slide-up {
        transform: translate(-50%, -100%) !important; 
    }

    #music-toggle {
        right: calc(50vw - 207px + 25px) !important; 
    }
    
    .hero-bg, #profil, .bg-event, .bg-gift, .bg-rsvp, .bg-penutup {
        background-size: 414px 100vh !important; 
        background-position: center top !important;
    }
}

.dekorasi-atas {
    width: 130px;
    height: auto;
    display: block;
    margin: 0 auto;
    z-index: 10;
    margin-bottom: 0px; 
    position: relative;
    top: -20px; 
}

/* =========================================================
   ANIMASI REVEAL COVER 
   ========================================================= */
.dekorasi-atas,
#cover-page .title-small,
#cover-page .nama-mempelai,
.tamu-section p:first-child,
.tamu-section .nama-tamu,
.tamu-section .disclaimer {
    opacity: 0;
    will-change: transform, opacity;
}

.dekorasi-atas { animation: entranceText 1s ease 2.2s forwards; }
#cover-page .title-small { animation: entranceText 1s ease 2.5s forwards; }
#cover-page .nama-mempelai { animation: entranceText 1s ease 2.7s forwards; }
.tamu-section p:first-child { animation: entranceText 1s ease 2.9s forwards; }
.tamu-section .nama-tamu { animation: entranceText 1s ease 3.1s forwards; }
#btn-buka { animation: entranceButton 1.2s ease 3.3s forwards, pulseButton 3s ease 4.5s infinite !important; }
.tamu-section .disclaimer { animation: entranceText 1s ease 3.5s forwards !important; }

/* --- PENGATURAN BUNGA BAWAH (TENGAH) --- */
.bunga-bawah {
    position: absolute;
    bottom: -40px;      
    left: 50%;         
    transform: translateX(-50%); 
    width: 400px;       
    max-width: 80vw;    
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    will-change: transform, opacity;
    transform-origin: bottom center; 

    animation: 
        bloomFromBottom 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, 
        swayBottom 5s ease-in-out 0.5s infinite alternate;
}

@keyframes bloomFromBottom {
    0% { opacity: 0; transform: translateX(-50%) translateY(50px) scale(0.5); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes swayBottom {
    0% { rotate: -2deg; }
    100% { rotate: 2deg; }
}

@keyframes shineEffect {
    0% { left: -150%; }
    20% { left: 150%; } 
    100% { left: 150%; } 
}

@keyframes pulseButtonGold { 
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 15px rgba(197, 160, 89, 0.4); 
    } 
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 6px 20px rgba(197, 160, 89, 0.6); 
    } 
}

/* --- PENGATURAN BINGKAI EMAS COVER --- */
.bingkai-emas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 420px;         
    height: auto;
    z-index: 5;           
    pointer-events: none; 
    opacity: 0;
    animation: fadeInLarge 2s ease 0.6s forwards; 
}

/* =========================================================
   DEKORASI HALAMAN HERO (BUNGA ATAS)
   ========================================================= */
#hero { position: relative; }

.bunga-hero-atas {
    position: absolute; 
    top: -75px; 
    left: 50%;
    transform: translateX(-50%);
    width: 170%;
    max-width: 500px; 
    z-index: 1; 
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

body:not(.locked) .bunga-hero-atas {
    animation: 
        entranceFromTop 1.2s ease 0.5s forwards,
        floatFlowerTop 4s ease-in-out 1.7s infinite;
}

.hero-content {
    position: relative;
    z-index: 10; 
}

@keyframes entranceFromTop {
    0% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes floatFlowerTop {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(5px); }
}

/* =========================================================
   DEKORASI BUNGA POJOK BAWAH HALAMAN HERO
   ========================================================= */
.bunga-sudut-hero {
    position: absolute;
    max-width: 250px; 
    width: 55vw; 
    pointer-events: none; 
    z-index: 5; 
    opacity: 0;
    will-change: transform, opacity;
}

.bawah-kiri-hero { bottom: -30px; left: -50px; transform-origin: bottom left; }
.bawah-kanan-hero { bottom: -30px; right: -50px; transform-origin: bottom right; }

body:not(.locked) .bawah-kiri-hero {
    animation: 
        bloomReveal 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, 
        swayLeft 5s ease-in-out 0.5s infinite alternate;
}

body:not(.locked) .bawah-kanan-hero {
    animation: 
        bloomReveal 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, 
        swayRight 5s ease-in-out 0.5s infinite alternate;
}

/* =========================================================
   DEKORASI BUNGA SISI TENGAH (COVER) - FIXED & SMOOTH
   ========================================================= */
.bunga-sisi {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 
    max-width: 180px;
    width: 40vw;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    scale: 0.3;
    will-change: opacity, scale, rotate;
}

.kiri-tengah {
    left: -70px;
    transform-origin: center left;
    animation: 
        bloomSide 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards,
        swaySideLeft 7s ease-in-out 0.5s infinite alternate; 
}

.kanan-tengah {
    right: -70px;
    transform-origin: center right;
    animation: 
        bloomSide 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards,
        swaySideRight 7s ease-in-out 0.5s infinite alternate; 
}

@keyframes bloomSide {
    0% { opacity: 0; scale: 0.3; }
    100% { opacity: 1; scale: 1; }
}

@keyframes swaySideLeft {
    0% { rotate: -1.5deg; }
    100% { rotate: 1deg; } 
}

@keyframes swaySideRight {
    0% { rotate: 1.5deg; }
    100% { rotate: -1deg; }
}

/* =========================================================
   PERUBAHAN WARNA TEKS HALAMAN HERO
   ========================================================= */
#hero .title-small,
#hero .nama-mempelai,
#hero .intro-text,
#hero .tanggal {
    color: #1B2631 !important;
}

#hero .cd-box span,
#hero .cd-box p {
    color: #1B2631 !important;
}

#hero #btn-save-date {
    color: #1B2631 !important;
}

/* =========================================================
   BORDER GRADASI EMAS (COUNTDOWN & TOMBOL SAVE DATE)
   ========================================================= */
.cd-box span::before { display: none !important; }

/* Mengubah isi dalam kotak angka menjadi putih polos */
.cd-box span {
    border: 2px solid transparent !important;
    background: 
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) border-box !important;
}

/* Mengubah isi dalam tombol menjadi putih polos */
#btn-save-date {
    border: 2px solid transparent !important;
    background: 
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) border-box !important;
}

/* Sedikit efek visual saat tombol disentuh (berubah jadi abu-abu super muda) */
#btn-save-date:hover {
    background: 
        linear-gradient(#f8f9fa, #f8f9fa) padding-box,
        linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) border-box !important;
}



/* =========================================================
   PERBAIKAN TERAKHIR: MEPET MAKSIMAL (NEGATIVE MARGIN)
   ========================================================= */
.pembatas-bunga-profil {
    position: relative;
    width: 100%;
    height: 0; 
    margin-top: -30px; 
    z-index: 999 !important; 
    display: flex;
    justify-content: center;
    align-items: center;
    transform: none !important; 
    opacity: 1 !important; 
}

.bunga-profil {
    position: absolute;
    top: 0; 
    transform: translateY(-50%); 
    max-width: 180px;
    width: 45vw;
    pointer-events: none;
    opacity: 0;
    scale: 0.3;
    will-change: opacity, scale, rotate;
}

.pembatas-bunga-profil.active .profil-kiri {
    left: -100px;
    transform-origin: center left;
    animation: 
        bloomSide 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards,
        swaySideLeft 7s ease-in-out 0.2s infinite alternate;
}

.pembatas-bunga-profil.active .profil-kanan {
    right: -100px;
    transform-origin: center right;
    animation: 
        bloomSide 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards,
        swaySideRight 7s ease-in-out 0.2s infinite alternate;
}

/* =========================================================
   FINAL: BUNGA NGINTIP DI BELAKANG POJOK KIRI ATAS BINGKAI
   ========================================================= */
.bingkai-wrapper {
    position: relative !important; 
    display: inline-block !important; 
    margin: 0 auto 15px auto !important; 
}

.bingkai-wrapper img:not(.bunga-dekor-profil) {
    position: relative !important;
    z-index: 10 !important; 
}

.bingkai-wrapper .bunga-dekor-profil {
    border: none !important;
    outline: none !important;            
    background: transparent !important; 
    background-image: none !important;  
    padding: 0 !important;              
    margin: 0 !important;
    box-shadow: none !important;        
    border-radius: 0 !important;        
    filter: none !important;            

    position: absolute !important;
    top: -15px !important;    
    left: -45px !important;   
    width: 110px !important;  
    height: auto !important;
    
    z-index: 1 !important;    
    opacity: 0.9 !important;
    display: block !important;
    pointer-events: none;
    transform: scaleX(-1) rotate(-10deg) !important; 
}

/* =========================================================
   TOMBOL INSTAGRAM PROFIL
   ========================================================= */

.btn-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Jarak antara ikon dan tulisan */
    margin-top: 15px;
    padding: 6px 18px;
    
    /* Warna latar belakang biru sangat pudar agar elegan */
    background-color: rgba(91, 143, 185, 0.1); 
    color: #5B8FB9; 
    border: 1px solid rgba(91, 143, 185, 0.3);
    border-radius: 20px; /* Membuat ujungnya membulat seperti kapsul */
    
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

/* Efek saat tombol disentuh/di-klik (Hover) */
.btn-instagram:hover {
    background-color: #5B8FB9; /* Berubah jadi biru penuh */
    color: #ffffff; /* Teks dan ikon berubah putih */
    transform: translateY(-2px); /* Efek sedikit terangkat */
    box-shadow: 0 4px 10px rgba(91, 143, 185, 0.3);
}

/* Memastikan SVG di dalam tombol ikut selaras secara vertikal */
.btn-instagram svg {
    margin-bottom: 2px;
}

/* =========================================================
   BINGKAI EMAS DALAM (INSET BORDER) PADA KARTU PROFIL
   ========================================================= */

/* Membuat elemen virtual di dalam kartu mempelai */
.mempelai-card::before {
    content: '';
    position: absolute;
    
    /* MENGATUR JARAK KE DALAM (Area Putih Luar) */
    /* Ubah angka 10px menjadi lebih besar (misal 15px) jika ingin border lebih ke tengah */
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    
    /* Lengkungan sudut bingkai dalam (sedikit lebih tajam dari lengkungan kartu luar) */
    border-radius: 12px; 
    
    /* Ketebalan garis bingkai emas */
    padding: 2.5px; 
    
    /* Warna gradasi emas (Senada dengan bingkai foto) */
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    
    /* Trik Masking: Memotong bagian tengah warna agar hanya tersisa garis tepinya saja */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    /* SANGAT PENTING: Agar bingkai tidak menghalangi klik pada tombol Instagram */
    pointer-events: none;
    z-index: 5;
}


/* Responsif untuk HP Kecil */
@media (max-width: 360px) {
    .teks-pembuka-pernikahan {
        font-size: 0.85rem;
    }
}

/* =========================================================
   HALAMAN GALLERY
   ========================================================= */
/* Background foto berlapis warna biru (theme color) yang transparan */
.bg-gallery {
    background: linear-gradient(rgba(27, 38, 49, 0.85), rgba(91, 143, 185, 0.75)), url('assets/bg_galeri.webp') center/cover;
    background-attachment: fixed;
}

.gallery-container {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

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

.title-gallery {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #ffffff;
    margin-bottom: 5px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

.subtitle-gallery {
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 500;
}

/* Menggunakan CSS Grid agar foto rapi berjajar 2 kolom */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 15px;
}

/* Kotak untuk membingkai gambar dengan gradasi emas */
.gallery-item {
    position: relative;
    width: 100%;
    padding: 4px; /* Ketebalan bingkai emas */
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
}

.gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px; /* Dibuat sedikit melengkung agar pas di dalam bingkai */
    transition: transform 0.4s ease;
}

/* Efek zoom saat foto disentuh/di-hover */
.gallery-item:hover img {
    transform: scale(1.08);
}

/* Trik Jeda Animasi (Staggered Animation): 
   Membuat foto muncul bergantian (satu per satu) bukan berbarengan 
*/
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.55s; }
.delay-5 { transition-delay: 0.7s; }
.delay-6 { transition-delay: 0.85s; }

/* Menyesuaikan grid jika layar lebih besar (opsional) */
@media (min-width: 600px) {
    .gallery-grid {
        /* UBAH DARI 3 MENJADI 2 KOLOM AGAR PAS DENGAN DESAIN */
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
    .gallery-item img {
        height: 200px;
        width: 100%;
        display: block;
    }
}

/* =========================================================
   VARIAN UKURAN GALERI (BENTO GRID STYLE)
   ========================================================= */

/* Menargetkan foto urutan ke-3 dan ke-6 untuk membentang penuh (full width) */
.gallery-item:nth-child(3),
.gallery-item:nth-child(6) {
    grid-column: 1 / -1; /* Trik agar elemen mengambil seluruh kolom yang tersedia */
}

/* Penyesuaian tinggi khusus untuk foto yang lebar (Opsional) */
.gallery-item:nth-child(3) img,
.gallery-item:nth-child(6) img {
    height: 220px; /* Dibuat sedikit lebih tinggi dari foto kotak agar proporsional */
}

/* Penyesuaian untuk Desktop (Jika layar lebih besar dari 600px) */
@media (min-width: 600px) {
    .gallery-item:nth-child(3) img,
    .gallery-item:nth-child(6) img {
        height: 280px; /* Di layar besar, foto horizontal dibuat lebih megah */
    }
}

/* =========================================================
   OUR STORY (CSS PERBAIKAN TOTAL - PERSEGI PANJANG & PADAT)
   ========================================================= */

/* Kontainer utama kartu cerita */
.story-card {
    background: rgba(255, 255, 255, 0.744); /* Latar belakang transparan efek kaca */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px; /* Padding lebih besar agar lebih lega */
    border-radius: 20px;
    max-width: 500px; /* Sedikit diperlebar agar proporsional */
    margin: 20px auto 0 auto;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex; /* Menggunakan Flexbox untuk tata letak */
    flex-direction: column; /* Tata letak vertikal */
    align-items: center; /* Rata tengah horizontal */
    text-align: center; /* Teks rata tengah */
}

/* Bingkai Foto Cerita (Emas Padat & Persegi Panjang) */
.story-image-rect {
    position: relative;
    width: 250px; /* Lebar persegi panjang */
    height: 180px; /* Tinggi persegi panjang, proporsional */
    margin-bottom: 25px; /* Jarak dengan teks */
    padding: 6px; /* Ketebalan bingkai emas (sama seperti gallery-item) */
    
    /* Gunakan gradasi emas padat yang sama seperti gallery-item dan bingkai foto profil */
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    
    /* Sudut membulat kecil (persegi panjang), sama seperti gallery-item */
    border-radius: 12px; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Pastikan foto terpotong rapi */
    display: flex; /* Untuk menempatkan gambar */
}

/* Foto cerita persegi panjang */
.story-image-rect img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pastikan foto tidak melar */
    border-radius: 8px; /* Dibuat sedikit melengkung agar pas di dalam bingkai */
    display: block !important; /* Pastikan gambar ditampilkan */
}

/* Tipografi untuk Sub-judul, Tanggal, dan Teks Cerita */
.story-details {
    width: 100%;
}

.story-subtitle {
    font-size: 1.2rem; /* Sedikit diperbesar */
    font-weight: 700;
    letter-spacing: 2px;
    color: #1B2631; /* Warna teks keemasan agar masuk dengan tema */
    margin-bottom: 8px;
}

.story-date {
    font-size: 0.9rem; /* Sedikit diperbesar */
    font-style: italic;
    color: #1B2631; /* Warna teks keemasan agar masuk dengan tema */
    margin-bottom: 20px;
}

.story-text {
    font-size: 0.8rem; /* Sedikit diperbesar */
    line-height: 1.8; /* Baris lebih renggang agar mudah dibaca */
    font-weight: 400;
    color: #1B2631; /* Warna teks keemasan agar masuk dengan tema */
    padding: 0 10px; /* Padding samping agar teks tidak mentok */
}

/* OUR_LAMARAN (Komentar Diperbaiki) */

/* Memberikan jarak antar kartu cerita agar lebih menjauh */
.story-wrapper .story-card + .story-card {
    margin-top: 100px; /* Diperbesar dari 50px menjadi 100px */
    position: relative;
}

/* =========================================================
   DEKORASI HALAMAN HERO (BUNGA TAMBAHAN DI BAWAH)
   ========================================================= */
#hero { position: relative; }

.bunga-hero-tambah-bawah {
    position: absolute;
    bottom: -40px; /* Atur posisi vertikal di paling bawah */
    left: 50%; /* Tengahkan secara horizontal */
    transform: translateX(-50%); 
    width: 400px; /* Sesuaikan ukuran */
    max-width: 80vw;    
    pointer-events: none; /* Klik bisa menembus bunga */
    z-index: 10; /* Berada di atas latar belakang, di bawah konten utama */
    opacity: 0;
    will-change: transform, opacity;
    transform-origin: bottom center; 
}

/* Animasi mekar dari bawah saat undangan dibuka */
body:not(.locked) .bunga-hero-tambah-bawah {
    animation: 
        bloomFromBottom 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, 
        swayBottom 5s ease-in-out 0.5s infinite alternate;
}

/* =========================================================
   ANIMASI DRAMATIS UNTUK SELURUH HALAMAN
   ========================================================= */

/* Menggabungkan semua section agar memiliki efek awal yang sama */
#profil .reveal,
#event .reveal,
#gallery .reveal,
#gift .reveal,
#rsvp .reveal,
#penutup .reveal {
    opacity: 0;
    transform: translateY(100px) scale(0.90); 
    /* Durasi 2.5 detik dengan kurva pengereman halus (sinematik) */
    transition: all 2.5s cubic-bezier(0.22, 1, 0.36, 1); 
}

/* Mengatur gaya saat konten masuk ke layar (aktif) */
#profil .reveal.active,
#event .reveal.active,
#gallery .reveal.active,
#gift .reveal.active,
#rsvp .reveal.active,
#penutup .reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* (Tetap pertahankan efek napas foto profil di bawahnya) */
#profil .mempelai-card.active img:not(.bunga-dekor-profil) {
    animation: floatPhoto 5s ease-in-out 1s infinite;
}
/* =========================================================
   RESPONSIVE DESIGN KHUSUS LAYAR HP KECIL / PENDEK
   (Berlaku jika lebar layar di bawah 400px atau tinggi di bawah 720px)
   ========================================================= */

@media (max-width: 400px), (max-height: 720px) {
    
    /* 1. PERBAIKAN HALAMAN COVER AGAR TIDAK PADAT */
    #cover-page .nama-mempelai {
        font-size: 2.6rem !important; /* Huruf dikecilkan */
        top: 35px; /* Jarak dirapatkan */
    }
    
    .cover-photo {
        width: 130px; /* Lebar bingkai dikecilkan */
        height: 180px; /* Tinggi bingkai dikecilkan */
        margin-top: 50px; /* Didorong ke atas agar tidak menabrak tombol */
    }
    
    .tamu-section {
        margin-top: 110px; /* Dirapatkan ke arah foto */
    }
    
    .tamu-section p:first-child { top: -25px; }
    .tamu-section .nama-tamu { font-size: 1.1rem; top: -15px; }
    
    #btn-buka {
        padding: 6px 15px; /* Tombol dibuat lebih ramping */
        font-size: 0.8rem;
    }

    /* 2. PENGECILAN FOTO & BINGKAI DI HALAMAN LAIN */
    .hero-photo, 
    .mempelai-card img, 
    .story-image-rect {
        width: 130px;
        height: 180px;
    }

    .story-image-rect {
        width: 200px !important; /* Khusus galeri story */
        height: 140px !important;
    }

    /* 3. PENGECILAN JUDUL UTAMA (HERO, EVENT, GALLERY, DLL) */
    .hero-content .nama-mempelai,
    .title-section,
    .title-gallery,
    .title-gift,
    .title-rsvp,
    .mempelai-card h2 {
        font-size: 2.4rem !important; 
    }

    /* 4. PENYESUAIAN KOTAK COUNTDOWN */
    .cd-box span {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    /* 5. MERAMPINGKAN KOTAK KONTEN AGAR LEBIH LEGA */
    .section {
        padding: 40px 15px; /* Mengurangi ruang kosong di atas/bawah */
    }

    .mempelai-card, 
    .event-card, 
    .atm-card, 
    .rsvp-form-box, 
    .wish-wall-box {
        padding: 25px 15px !important; /* Area dalam kotak dikurangi */
    }

    /* 6. MENGECILKAN ORNAMEN BUNGA SUDUT */
    .bunga-sudut, 
    .bunga-sudut-hero {
        width: 75vw;
        max-width: 165px;
    }
}

/* =========================================================
   RESPONSIVE EKSTRA UNTUK HP SANGAT KECIL (Contoh: iPhone 5/SE)
   ========================================================= */
@media (max-width: 350px) {
    #cover-page .nama-mempelai { font-size: 2.2rem !important; }
    .cover-photo { width: 110px; height: 150px; }
    .hero-content .nama-mempelai, .title-section, .title-gallery { font-size: 2rem !important; }
    .tamu-section { margin-top: 90px; }
}