/* ============================================
   WEDDING INVITATION - TEGUH & JIHAN
   Elegant Earth Tone Theme
   ============================================ */

/* ============================================
   CSS VARIABLES & ROOT
   ============================================ */
:root {
    /* Primary Colors - Earth Tone Palette */
    --color-primary: #9CAF88;
    --color-primary-light: #B5C7A5;
    --color-primary-dark: #7A8F6B;
    
    /* Secondary Colors */
    --color-secondary: #D4AF37;
    --color-secondary-light: #E5C76B;
    --color-secondary-dark: #B8962F;
    
    /* Background Colors */
    --color-bg-primary: #FAF8F3;
    --color-bg-secondary: #F5F1E8;
    --color-bg-cream: #FDFCF9;
    
    /* Text Colors */
    --color-text-primary: #3D3D3D;
    --color-text-secondary: #6B6B6B;
    --color-text-light: #9A9A9A;
    --color-text-white: #FFFFFF;
    
    /* Accent Colors */
    --color-accent-rose: #D4A5A5;
    --color-accent-sage: #9CAF88;
    --color-accent-gold: #D4AF37;
    
    /* Border & Shadow */
    --color-border: #E8E4DB;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --font-serif: 'Playfair Display', 'Cinzel', Georgia, serif;
    --font-sans: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --section-padding: 80px;
    --container-max-width: 1200px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-slower: 0.8s ease;
    
    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-full: 50%;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    
    /* MENGUNCI LAYAR AGAR TIDAK BOCOR KE KANAN */
    overflow-x: hidden;
    width: 100vw;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* MENGUNCI SUMBU X (ANTI GESER KANAN KIRI) */
    overflow-x: hidden; 
    width: 100%;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-normal);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.hidden {
    display: none !important;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SECTION HEADER STYLES
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-subtitle {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

/* ============================================
   AESTHETIC PRELOADER (LOADING SCREEN)
   ============================================ */
.preloader-wrapper {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: #fdfbf7; /* Warna dasar cream elegan */
    z-index: 999999; /* Posisi paling atas menutupi segalanya */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Animasi Jantung Berdetak */
.heart-pulse {
    color: #d4af37; /* Warna Emas Mewah */
    font-size: 2.5rem;
    animation: heartBeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes heartBeat {
    0% { transform: scale(0.95); }
    5% { transform: scale(1.1); }
    39% { transform: scale(0.85); }
    45% { transform: scale(1); }
    60% { transform: scale(0.95); }
    100% { transform: scale(0.9); }
}

/* Teks Kedap-kedip Halus */
.preloader-text {
    font-family: 'Playfair Display', serif; /* Sesuaikan dengan font undanganmu */
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    animation: pulseText 2s infinite ease-in-out;
}

@keyframes pulseText {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Garis Loading Estetik */
.loading-bar-container {
    width: 150px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
}

.loading-bar {
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: 40%;
    background: #d4af37;
    border-radius: 5px;
    animation: loadingSlide 1.5s infinite ease-in-out;
}

@keyframes loadingSlide {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* Perintah untuk MENGHILANGKAN preloader */
body.loaded #elegant-preloader {
    opacity: 0;
    visibility: hidden;
}

/* Mencegah layar bisa di-scroll saat masih loading */
body.is-loading {
    overflow: hidden;
}

/* ============================================
   AESTHETIC COVER MODAL (FIXED HEIGHT & CLICKABLE)
   ============================================ */
.cover-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1), opacity 1s;
    /* PERBAIKAN: Ubah hidden menjadi auto agar tombol tetap bisa di-scroll jika layar terlalu pendek */
    overflow-y: auto; 
    overflow-x: hidden;
    padding: 20px 0;
}

.cover-modal.slide-up {
    transform: translateY(-100%);
    opacity: 0;
}

/* Latar Belakang & Overlay */
.custom-bg-cover {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.cover-overlay {
    position: fixed; /* Diubah ke fixed agar overlay tidak ikut ter-scroll */
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(15, 15, 15, 0.7) 0%, rgba(5, 5, 5, 0.85) 100%);
    z-index: 1;
}

/* Konten Cover Utama */
.cover-content {
    position: relative;
    z-index: 5;
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto; /* Menjaga posisi tetap di tengah */
}

/* Monogram (Inisial T & J) */
.monogram-box {
    margin-bottom: 20px; /* Jarak diperkecil */
    animation: fadeInDown 1.5s ease;
}

.monogram-initials {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--color-secondary); 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px 30px;
    border-top: 1px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
}

.monogram-initials i {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Teks Utama */
.cover-subtitle {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px; /* Jarak diperkecil */
    animation: fadeIn 2s ease 0.5s both;
}

.cover-names {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vh, 4rem); /* Ukuran font dinamis menyesuaikan tinggi layar */
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 15px; /* Jarak diperkecil */
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1.5s ease 0.8s both;
}

/* Tanggal Elegan */
.cover-date-elegant {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px; /* Jarak diperkecil */
    animation: fadeIn 2s ease 1.2s both;
}

.date-line-elegant {
    width: 40px;
    height: 1px;
    background: rgba(212, 175, 55, 0.6); 
}

.date-text-elegant {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-secondary-light);
}

/* Kotak Nama Tamu */
.cover-guest-box {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 20px 25px; /* Padding diperkecil */
    margin-bottom: 30px; /* Jarak diperkecil */
    width: 90%;
    animation: fadeInUp 1.5s ease 1.5s both;
}

.guest-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.guest-name {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 5px;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    padding-bottom: 8px;
}

.guest-apology {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

/* Tombol Buka Undangan */
.btn-royal-open {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 15px 45px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease;
    animation: fadeInUp 1.5s ease 2s both;
    margin-bottom: 20px; /* Agar tombol tidak nempel ke dasar browser */
}

.btn-royal-open:hover {
    background: var(--color-secondary);
    color: #000000;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
    transform: translateY(-3px);
}

/* Animasi Partikel Cahaya */
.light-particles {
    position: fixed; /* Ubah ke fixed agar diam saat discroll */
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    bottom: -10px;
    width: 4px; height: 4px;
    background: rgba(212, 175, 55, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.5);
    animation: floatParticle 8s infinite ease-in;
    opacity: 0;
}

.particle:nth-child(1) { left: 10%; animation-duration: 9s; animation-delay: 0s; width: 3px; height: 3px; }
.particle:nth-child(2) { left: 25%; animation-duration: 12s; animation-delay: 2s; }
.particle:nth-child(3) { left: 40%; animation-duration: 8s; animation-delay: 4s; width: 5px; height: 5px; }
.particle:nth-child(4) { left: 55%; animation-duration: 11s; animation-delay: 1s; }
.particle:nth-child(5) { left: 70%; animation-duration: 10s; animation-delay: 5s; width: 2px; height: 2px; }
.particle:nth-child(6) { left: 85%; animation-duration: 14s; animation-delay: 3s; }
.particle:nth-child(7) { left: 20%; animation-duration: 13s; animation-delay: 6s; }
.particle:nth-child(8) { left: 80%; animation-duration: 9s; animation-delay: 7s; }

@keyframes floatParticle {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

/* ============================================
   RESPONSIF MOBILE & LAPTOP KECIL
   ============================================ */

/* Penyesuaian Jika Layar Laptop Pendek (Max Tinggi 750px) */
@media (max-height: 750px) {
    .cover-names { font-size: 3rem; }
    .cover-guest-box { margin-bottom: 20px; padding: 15px 20px; }
    .btn-royal-open { padding: 12px 35px; }
}

/* Penyesuaian Mobile HP */
@media (max-width: 767px) {
    .cover-content {
        padding: 20px 15px;
    }
    .monogram-initials {
        font-size: 1.5rem;
        padding: 8px 25px;
    }
    .cover-subtitle {
        font-size: 0.75rem;
        letter-spacing: 3px;
    }
    .cover-names {
        font-size: 3.2rem;
        margin-bottom: 20px;
    }
    .date-text-elegant {
        font-size: 0.85rem;
    }
    .cover-guest-box {
        padding: 20px 15px;
        width: 100%;
        margin-bottom: 30px;
    }
    .guest-name {
        font-size: 1.5rem;
    }
    .btn-royal-open {
        width: 100%;
        padding: 15px 0;
    }
}

/* ============================================
   AESTHETIC HERO SECTION (CINEMATIC GLASS)
   ============================================ */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 20px;
}

/* ============================================
   CINEMATIC SLIDESHOW BACKGROUND
   ============================================ */
.hero-slideshow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #000; /* Warna dasar hitam jika gambar telat loading */
}

.slide-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Semua gambar disembunyikan awalnya */
    /* Durasi 1 siklus penuh adalah 18 detik */
    animation: cinematicFade 18s infinite;
}

/* Mengatur Jeda Kemunculan Tiap Gambar */
.slide-bg:nth-child(1) {
    animation-delay: 0s;
}
.slide-bg:nth-child(2) {
    animation-delay: 6s; /* Gambar 2 muncul setelah 6 detik */
}
.slide-bg:nth-child(3) {
    animation-delay: 12s; /* Gambar 3 muncul setelah 12 detik */
}

/* Animasi Memudar & Zoom Lambat (Ken Burns Effect) */
@keyframes cinematicFade {
    0% { 
        opacity: 0; 
        transform: scale(1); 
    }
    5% { 
        opacity: 1; /* Muncul sempurna di detik ke-1 */
    }
    33% { 
        opacity: 1; 
        transform: scale(1.08); /* Perlahan nge-zoom */
    }
    38% { 
        opacity: 0; 
        transform: scale(1.1); /* Hilang perlahan saat sudah nge-zoom */
    }
    100% { 
        opacity: 0; 
        transform: scale(1.1); 
    }
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(10,10,10,0.4) 0%, rgba(15,15,15,0.85) 100%);
    z-index: 1;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 60px; /* SOLUSI DESKTOP: Memberi jarak bawah agar tidak menabrak Scroll Indicator */
}

.hero-subtitle {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

/* Nama Raksasa & Tipografi Elegan */
.hero-names {
    display: flex;
    flex-direction: row; /* Memaksa selalu sejajar mendatar */
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.hero-names .name {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 6.5rem); /* Dinamis mengecil kalau layar sempit */
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.hero-names .ampersand {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 4rem);
    font-style: italic;
    color: var(--color-secondary-light); 
    margin-top: 5px; /* Disesuaikan agar & tidak terlalu ke atas/bawah */
}

/* Tanggal Box Mewah */
.hero-date-box {
    margin-bottom: 50px;
    border-top: 1px solid rgba(212, 175, 55, 0.4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    padding: 10px 40px;
}

.hero-date {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 8px;
    color: #FFFFFF;
    margin: 0;
}

/* ============================================
   KOTAK COUNTDOWN KACA (GLASSMORPHISM)
   ============================================ */
.countdown-glass-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 20px 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.countdown-glass-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
}

.countdown-number {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 0 15px rgba(255,255,255,0.4);
}

.countdown-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}

.countdown-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
}

/* ============================================
   ANIMASI SCROLL BAWAH (MOUSE INDICATOR)
   ============================================ */
.scroll-down-indicator {
    position: absolute;
    bottom: 25px; /* Disesuaikan agar lebih menempel ke bawah */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
    opacity: 0.7;
}

.scroll-text {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Bentuk Mouse Modern */
.mouse-icon {
    width: 22px;
    height: 35px;
    border: 1.5px solid #FFFFFF;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: center;
}

.wheel {
    width: 3px;
    height: 6px;
    background-color: var(--color-secondary);
    border-radius: 2px;
    margin-top: 5px;
    animation: scrollWheel 2s infinite ease-in-out;
}

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

/* ============================================
   RESPONSIF MOBILE (Penyesuaian Lebar & Jarak)
   ============================================ */
@media (max-width: 767px) {
    .hero-content {
        padding-bottom: 80px; /* Jarak ekstra di HP agar mouse tidak tertabrak countdown */
    }

    /* SOLUSI MOBILE: Nama sejajar 1 baris */
    .hero-names {
        flex-direction: row; /* Memaksa 1 baris ke samping */
        gap: 10px; /* Jarak antar nama dirapatkan */
    }
    
    .hero-names .name {
        font-size: clamp(2.2rem, 10vw, 3rem); /* Font diperkecil otomatis agar muat 1 baris */
    }

    .hero-names .ampersand {
        margin: 0; /* Menghapus margin agar rata */
        font-size: 2rem;
    }
    
    .hero-date-box {
        padding: 8px 20px;
        margin-bottom: 35px;
    }
    
    .countdown-glass-container {
        padding: 15px;
        gap: 5px;
        width: 95%; 
    }
    
    .countdown-glass-item {
        min-width: 55px;
    }
    
    .countdown-number {
        font-size: 2.2rem;
    }
    
    .countdown-divider {
        margin: 0 5px;
        height: 30px;
    }
}
/* ============================================
   AESTHETIC QUOTE SECTION (MODERN OFFSET BOX)
   ============================================ */
.quote-offset-section {
    padding: 150px 20px;
    background: var(--color-bg-cream);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Mencegah elemen offset keluar layar */
}

/* Container Pembungkus Efek Tumpang Tindih */
.offset-wrapper {
    position: relative;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* ============================================
   1. BINGKAI KAWAT EMAS (Di Belakang)
   ============================================ */
.gold-wireframe {
    position: absolute;
    /* Sengaja digeser ke Kanan dan Bawah */
    top: 40px;
    right: -30px;
    bottom: -40px;
    left: 30px;
    border: 1px solid var(--color-secondary);
    z-index: 1;
}

/* ============================================
   2. KOTAK KONTEN SOLID (Di Depan)
   ============================================ */
.content-solid-box {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    padding: 70px 60px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ikon Kutip Emas Elegan */
.quote-icon-top {
    margin-bottom: 30px;
}

.quote-icon-top i {
    font-size: 2.5rem;
    color: var(--color-secondary);
    opacity: 0.4;
}

/* Tipografi Super Bersih */
.quote-text-clean {
    font-family: var(--font-serif);
    /* Ukuran Dinamis: Presisi di HP, Lega di Desktop */
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 400;
    line-height: 2.2;
    color: var(--color-text-primary);
    font-style: italic;
    margin-bottom: 40px;
    letter-spacing: 0.5px;
}

/* Penulis / Sumber QS */
.quote-author-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.author-line {
    width: 40px;
    height: 2px;
    background: var(--color-secondary);
}

.author-name {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

/* ============================================
   3. ANIMASI MASUK (CLEAN & MINIMALIST)
   ============================================ */

/* Bingkai Emas Muncul Lebar dari Tengah */
.anim-draw-box.scroll-reveal {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.anim-draw-box.scroll-reveal.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Kotak Putih Meluncur Halus dari Bawah menutupi Bingkai */
.anim-slide-up-box.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s !important; /* Delay 0.3s agar bingkai muncul duluan */
}
.anim-slide-up-box.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIF MOBILE (Kunci Kerapian Sempurna)
   ============================================ */
@media (max-width: 767px) {
    .quote-offset-section {
        padding: 100px 15px;
    }
    
    /* Offset di HP diperkecil agar tidak bocor keluar layar */
    .gold-wireframe {
        top: 20px;
        right: -10px;
        bottom: -20px;
        left: 10px;
    }
    
    .content-solid-box {
        padding: 40px 25px; /* Padding dalam diperkecil agar teks muat */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    }
    
    .quote-icon-top {
        margin-bottom: 20px;
    }
    
    .quote-icon-top i {
        font-size: 1.8rem;
    }
    
    /* Tipografi di HP: Line-height dirapatkan sedikit agar tidak terlalu panjang ke bawah */
    .quote-text-clean {
        font-size: 0.95rem;
        line-height: 1.9;
        margin-bottom: 30px;
    }
    
    .author-line {
        width: 30px;
    }
    
    .author-name {
        font-size: 0.8rem;
        letter-spacing: 3px;
    }
}
/* ============================================
   AESTHETIC COUPLE SECTION & BACKGROUND (FIXED PARALLAX)
   ============================================ */
:root {
    --card-w: 280px;
    --card-h: 380px;
}

.custom-bg-cover {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.couple-editorial-section {
    padding: 130px 0;
    position: relative;
    /* overflow: hidden; -> Dihapus agar tidak bentrok dengan efek Fixed di beberapa browser HP */
    
    /* === KUNCI EFEK DIAM DITABRAK SCROLL (PARALLAX) === */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; 
    
    /* Kode transform (translateZ) Dihapus total dari sini karena mematikan efek Parallax */
}

/* OVERLAY GELAP (Agar Teks & Kartu Terbaca) */
.couple-editorial-section::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(15, 20, 18, 0.65); 
    z-index: 1;
    pointer-events: none;
}

.couple-editorial-section .container,
.couple-editorial-section .infinite-slider-wrapper {
    position: relative;
    z-index: 2;
}

/* CINEMATIC DARK SHADOW & COLORING */
.arab-bismillah,
.editorial-main-title,
.couple-intro-text,
.role-title,
.editorial-name,
.parents-info p,
.parents-info strong,
.parents-ampersand,
.pulse-ampersand,
.pulse-ring {
    text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.9) !important;
}

.editorial-main-title,
.couple-intro-text,
.editorial-name,
.parents-info p,
.parents-info strong {
    color: #ffffff !important;
}

.arab-bismillah,
.role-title,
.parents-ampersand,
.pulse-ampersand,
.pulse-ring {
    color: var(--color-secondary) !important;
}

/* --- HEADER, GARIS GOLD, & PENGANTAR --- */
.editorial-header {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arab-bismillah {
    font-family: 'Amiri', serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    display: block;
    margin-bottom: 10px;
}

.editorial-main-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.header-decor-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.line-gold {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

.pulse-ring {
    font-size: 1.2rem;
    animation: heartbeat 2s infinite;
}

.couple-intro-text {
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    line-height: 1.9;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================
   ANIMATION CLASSES (SCROLL REVEAL)
   ============================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.scroll-reveal.slide-left { transform: translateX(-50px); }
.scroll-reveal.slide-right { transform: translateX(50px); }
.scroll-reveal.scale-in { transform: scale(0.8); }

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }

/* ============================================
   INFINITE PHOTO SLIDER
   ============================================ */
.infinite-slider-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 80px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.slider-track {
    display: flex;
    width: fit-content;
    animation: scrollMarquee 30s linear infinite; 
    will-change: transform; 
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slide-group {
    display: flex;
    gap: 15px;
    padding-right: 15px;
}

.slide-box {
    width: 220px;
    height: 220px; 
    flex-shrink: 0;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #FFFFFF;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.slide-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.slide-box:hover img {
    transform: scale(1.1);
}

/* ============================================
   GRID LAYOUT & TYPOGRAPHY
   ============================================ */
.editorial-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.editorial-row {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 30px;
}

.editorial-text {
    text-align: center;
    max-width: 400px;
}

.role-title {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.editorial-name {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 6vw, 3.5rem); 
    line-height: 1.15;
    margin-bottom: 25px;
}

.parents-info {
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 2vw, 1rem); 
    line-height: 1.8;
}

.parents-info strong {
    font-family: var(--font-serif);
    font-size: 1.1em;
    font-weight: 600;
}

.parents-ampersand {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-style: italic;
}

.editorial-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}

.divider-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

.pulse-ampersand {
    font-family: var(--font-serif);
    font-size: 3.5rem; 
    font-style: italic;
    line-height: 1;
    animation: heartbeat 2.5s infinite; 
}

/* ============================================
   THE MAGIC: 3D CARD HOVER EFFECT
   ============================================ */
.editorial-card-wrapper {
    display: flex;
    justify-content: center;
    perspective: 2500px;
}

.card-3d {
    width: var(--card-w);
    height: var(--card-h);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
}

.card-wrapper-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 140px 140px 15px 15px; 
    overflow: hidden;
    border: 4px solid #FFFFFF;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-wrapper-bg::before,
.card-wrapper-bg::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 100px;
    transition: all 0.6s;
    position: absolute;
    left: 0;
}

.card-wrapper-bg::before { top: 0; background-image: linear-gradient(to top, transparent 40%, rgba(0,0,0, 0.6) 100%); }
.card-wrapper-bg::after { bottom: 0; background-image: linear-gradient(to bottom, transparent 40%, rgba(0,0,0, 0.8) 100%); }

.character-image {
    width: 125%; 
    height: auto;
    position: absolute;
    bottom: -30px; 
    z-index: 2; 
    opacity: 0; 
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: drop-shadow(0 20px 25px rgba(0,0,0,0.6)); 
    pointer-events: none; 
}

.card-3d:hover .card-wrapper-bg {
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    box-shadow: 0 40px 40px -10px rgba(0, 0, 0, 0.6);
}

.card-3d:hover .card-wrapper-bg::before,
.card-3d:hover .card-wrapper-bg::after { opacity: 1; }
.card-3d:hover .card-wrapper-bg::after { height: 140px; }

.card-3d:hover .character-image {
    opacity: 1; 
    transform: translate3d(0%, -80px, 120px) scale(1.15); 
}

/* ============================================
   KEYFRAMES (ANIMASI)
   ============================================ */
@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    20% { transform: scale(1.15); }
    40% { transform: scale(1); }
    60% { transform: scale(1.15); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* ============================================
   RESPONSIF DESKTOP (LAYAR LEBAR)
   ============================================ */
@media (min-width: 992px) {
    .editorial-row {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        gap: 50px;
    }

    .reverse-row {
        flex-direction: row-reverse;
    }

    .align-left {
        text-align: left;
        border-left: 2px solid var(--color-secondary); 
        padding-left: 25px;
    }

    .align-right {
        text-align: right;
        border-right: 2px solid var(--color-secondary); 
        padding-right: 25px;
    }
}

/* ============================================
   RESPONSIF MOBILE (LAYAR HP)
   ============================================ */
@media (max-width: 767px) {
    .couple-editorial-section {
        padding: 90px 15px;
        /* PASTIKAN TETAP FIXED DI HP */
        background-attachment: fixed !important; 
    }

    .couple-intro-text { padding: 0 10px; }
    .infinite-slider-wrapper { margin-bottom: 60px; }
    
    .slide-box {
        width: 150px;
        height: 150px;
        border-radius: 10px;
    }

    :root {
        --card-w: 230px;
        --card-h: 320px;
    }

    .card-wrapper-bg {
        border-radius: 115px 115px 12px 12px; 
    }

    .card-3d:hover .character-image {
        transform: translate3d(0%, -60px, 100px) scale(1.1); 
    }

    .editorial-grid { gap: 40px; }
    .editorial-row { gap: 25px; }
    .editorial-row.reverse-row { flex-direction: column-reverse; }

    .align-left, .align-right {
        text-align: center;
        border: none;
        padding: 0;
    }

    .editorial-name { margin-bottom: 15px; }
    .pulse-ampersand { font-size: 2.5rem; }

    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }
    .delay-4 { transition-delay: 0.4s; }

    .scroll-reveal.slide-left,
    .scroll-reveal.slide-right {
        transform: translateY(30px);
    }
}
/* ============================================
   AESTHETIC EVENT SECTION (ASYMMETRIC MUSEUM)
   ============================================ */
.luxury-event-section {
    padding: 130px 0;
    background: var(--color-bg-cream);
    position: relative;
    overflow: hidden;
}

.luxury-events-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
    align-items: center;
}

/* ============================================
   1. DESAIN KARTU ASIMETRIS (THE MAGIC)
   ============================================ */
.luxury-event-card {
    position: relative;
    background: #FFFFFF;
    width: 100%;
    max-width: 480px;
    padding: 50px 40px;
    border: 1px solid rgba(212, 175, 55, 0.3); /* Emas tipis */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

/* Lengkungan Cermin Keren! */
.shape-left {
    border-radius: 60px 0 60px 0;
}

.shape-right {
    border-radius: 0 60px 0 60px;
}

.luxury-event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.1);
}

/* Watermark Raksasa di Background */
.date-watermark {
    position: absolute;
    bottom: -30px;
    right: 10px;
    font-family: var(--font-serif);
    font-size: 14rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-secondary);
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* ============================================
   2. ISI KARTU (CLEAN TYPOGRAPHY)
   ============================================ */
.card-content {
    position: relative;
    z-index: 2;
}

.event-type {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.event-type i {
    font-size: 2rem;
    color: var(--color-secondary);
}

.event-type h3 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 0;
}

/* Blok Informasi */
.event-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.info-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.info-value {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.info-value strong {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Tombol Teks Sleek */
.btn-sleek-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-primary);
    transition: all 0.3s ease;
}

.btn-sleek-arrow i {
    transition: transform 0.3s ease;
}

.btn-sleek-arrow:hover {
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
}

.btn-sleek-arrow:hover i {
    transform: translateX(5px); /* Panah bergerak ke kanan */
}

/* ============================================
   3. PANORAMIC FLOATING MAP (PETA MEWAH)
   ============================================ */
.panoramic-map-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.map-text-header h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.map-text-header p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 30px;
}

/* Bingkai Peta Lebar */
.map-frame-luxury {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 40px; /* Sangat melengkung estetik */
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 5px solid #FFFFFF;
}

/* Tombol Maps Melayang di Dalam Peta */
.btn-floating-map {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(20, 30, 25, 0.9); /* Hijau Gelap Transparan */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FFFFFF;
    padding: 15px 35px;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    white-space: nowrap;
}

.btn-floating-map:hover {
    background: var(--color-secondary);
    color: #000000;
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

/* ============================================
   RESPONSIF DESKTOP & MOBILE
   ============================================ */
@media (min-width: 992px) {
    .luxury-events-grid {
        flex-direction: row; /* Jejer ke samping di Laptop */
        justify-content: center;
        align-items: stretch;
        gap: 50px;
    }
}

@media (max-width: 767px) {
    .luxury-event-section {
        padding: 90px 15px;
    }
    
    .luxury-event-card {
        padding: 40px 25px;
    }
    
    /* Lengkungan diperkecil sedikit di HP */
    .shape-left { border-radius: 40px 0 40px 0; }
    .shape-right { border-radius: 0 40px 0 40px; }
    
    .date-watermark {
        font-size: 10rem;
        bottom: -20px;
        right: 0;
    }
    
    .event-type {
        margin-bottom: 30px;
        padding-bottom: 15px;
    }
    
    .event-type h3 {
        font-size: 1.5rem;
    }
    
    .info-label {
        font-size: 0.7rem;
    }
    
    .info-value {
        font-size: 0.9rem;
    }
    
    .info-value strong {
        font-size: 1rem;
    }
    
    .map-frame-luxury {
        height: 350px; /* Peta lebih pendek di HP */
        border-radius: 25px;
        border-width: 3px;
    }
    
    .btn-floating-map {
        padding: 12px 25px;
        font-size: 0.85rem;
        bottom: 20px;
    }
}

/* ============================================
   AESTHETIC STORY SECTION (CINEMATIC BLENDED - REVISED)
   ============================================ */
.story-section {
    padding: var(--section-padding) 0;
    background: var(--color-bg-cream);
    overflow: hidden;
}

/* Layout Grid Fleksibel */
.blended-story-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Di HP jadi 1 kolom berjejer ke bawah */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Kartu Cerita Sinematik */
.blended-card {
    position: relative;
    width: 100%;
    min-height: 520px; /* DITAMBAH TINGGINYA agar foto di atas makin lega */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transform: translateZ(0); 
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Foto Full Cover di dalam Kartu */
.blended-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* INI KUNCINYA: Memaksa fokus foto ke arah atas/wajah */
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blended-card:hover .blended-img {
    transform: scale(1.1); 
}

/* Gradasi Gelap dari Bawah */
.blended-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%; /* DIKURANGI jadi 70% agar gradasi hitam tidak terlalu naik ke wajah */
    background: linear-gradient(to top, rgba(15, 15, 15, 0.95) 0%, rgba(15, 15, 15, 0.75) 45%, rgba(15, 15, 15, 0) 100%);
    z-index: 2;
}

/* Konten Teks di dalam Kartu */
.blended-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 25px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Tahun Emas */
.blended-year {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-secondary); 
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Judul Cerita */
.blended-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: #FFFFFF; 
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Teks Deskripsi Cerita */
.blended-desc {
    font-family: var(--font-sans);
    font-size: 0.9rem; 
    line-height: 1.6; /* Dirapatkan sedikit agar tidak makan tempat ke atas */
    color: rgba(255, 255, 255, 0.85); 
    text-align: left;
    margin: 0;
}

/* ============================================
   4 ANIMASI MASUK BERBEDA (SUPER SLOW & CINEMATIC)
   ============================================ */

/* 1. Slide Halus dari Kiri (Sangat Pelan) */
.anim-slide-in-left.scroll-reveal { 
    opacity: 0; 
    transform: translateX(-80px); /* Jarak geser diperbesar sedikit */
    /* Durasi 1.8 detik, Delay 0.4 detik */
    transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.4s !important; 
}
.anim-slide-in-left.scroll-reveal.revealed { 
    opacity: 1; 
    transform: translateX(0); 
}

/* 2. Slide Halus dari Kanan (Sangat Pelan) */
.anim-slide-in-right.scroll-reveal { 
    opacity: 0; 
    transform: translateX(80px); 
    transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.4s !important; 
}
.anim-slide-in-right.scroll-reveal.revealed { 
    opacity: 1; 
    transform: translateX(0); 
}

/* 3. Membesar dari Tengah (Zoom Out Mengayun Lambat) */
.anim-scale-up.scroll-reveal { 
    opacity: 0; 
    transform: scale(0.8); 
    transition: all 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s !important; 
}
.anim-scale-up.scroll-reveal.revealed { 
    opacity: 1; 
    transform: scale(1); 
}

/* 4. Efek Balik 3D (3D Flip Terbuka Sangat Halus) */
.anim-3d-flip.scroll-reveal { 
    opacity: 0; 
    transform: perspective(1000px) rotateX(-15deg) translateY(60px); 
    transition: all 1.8s ease-out 0.4s !important; 
}
.anim-3d-flip.scroll-reveal.revealed { 
    opacity: 1; 
    transform: perspective(1000px) rotateX(0) translateY(0); 
}
/* ============================================
   RESPONSIF DESKTOP (Grid 2 Kolom)
   ============================================ */
@media (min-width: 768px) {
    .blended-story-wrapper {
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px;
    }
    
    .blended-card {
        min-height: 550px; /* Ditinggikan lagi untuk versi Desktop */
    }
    
    .blended-content {
        padding: 40px;
    }
    
    .blended-title {
        font-size: 2.2rem;
    }
    
    .blended-desc {
        font-size: 0.95rem;
    }
}

/* ============================================
   AESTHETIC GALLERY SECTION (NO WIDE PHOTOS!)
   Semua foto hanya Tinggi / Kotak. Anti Terpotong!
   ============================================ */
.gallery-section {
    padding: var(--section-padding) 0;
    background: var(--color-bg-cream);
    position: relative;
}

.gallery-masonry {
    display: grid;
    gap: 12px;
    padding: 0 15px;
    grid-auto-flow: dense; /* Penambal lubang otomatis */
}

/* Desain Dasar Item Galeri */
.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateZ(0);
    
    /* KUNCI UTAMA: Semua foto MAKSIMAL 1 KOLOM! 
       Tidak akan ada foto melebar yang bikin wajah terpotong! */
    grid-column: span 1 !important; 
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(0.95);
}

.gallery-item:hover img {
    transform: scale(1.12);
    filter: brightness(1);
}

/* Overlay Saat Disentuh / Di-hover */
.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(30, 30, 30, 0.1), rgba(15, 15, 15, 0.6));
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.6s ease; z-index: 2;
}

.gallery-overlay i {
    color: #FFFFFF; font-size: 1.5rem;
    transform: scale(0.5) translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item:hover .gallery-overlay i { transform: scale(1) translateY(0); color: var(--color-secondary); }

/* ============================================
   ANIMASI MASUK SUPER PELAN BERGANTIAN (DELAY)
   ============================================ */
.anim-super-delay.scroll-reveal { 
    opacity: 0; 
    transform: translateY(60px); 
    transition: opacity 2s ease, transform 2s ease !important; 
}
.anim-super-delay.scroll-reveal.revealed { 
    opacity: 1; 
    transform: translateY(0); 
}

/* ============================================
   1. GRID KHUSUS MOBILE / HP (2 KOLOM RAPI)
   ============================================ */
@media (max-width: 767px) {
    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 130px; /* Tinggi dasar dinaikkan agar estetik */
    }

    /* POLA ZIG-ZAG (Tinggi & Kotak Bergantian) */
    .gallery-item:nth-child(odd) { grid-row: span 2; }  /* Ganjil: Tinggi */
    .gallery-item:nth-child(even) { grid-row: span 1; } /* Genap: Kotak Biasa */

    /* JURUS SAKTI ANTI-BOLONG BAWAH (HP) */
    /* 2 Foto terakhir dipaksa jadi Kotak Biasa agar kakinya sejajar rata! */
    .gallery-item:last-child,
    .gallery-item:nth-last-child(2) {
        grid-row: span 1 !important;
    }

    /* Efek Delay untuk HP */
    .gallery-item:nth-child(4n + 1) { transition-delay: 0.1s !important; }
    .gallery-item:nth-child(4n + 2) { transition-delay: 0.3s !important; }
    .gallery-item:nth-child(4n + 3) { transition-delay: 0.5s !important; }
    .gallery-item:nth-child(4n + 4) { transition-delay: 0.7s !important; }
}


/* ============================================
   2. GRID KHUSUS TABLET & DESKTOP (3 KOLOM MEWAH)
   ============================================ */
@media (min-width: 768px) {
    .gallery-masonry {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
        gap: 15px; 
    }
    
    .gallery-overlay i { font-size: 2.2rem; }

    /* POLA ZIG-ZAG DESKTOP (Kiri, Kanan, Tengah Bergantian Tinggi) */
    .gallery-item:nth-child(4n + 1) { grid-row: span 2; } /* Tinggi */
    .gallery-item:nth-child(4n + 2) { grid-row: span 1; } /* Kotak */
    .gallery-item:nth-child(4n + 3) { grid-row: span 2; } /* Tinggi */
    .gallery-item:nth-child(4n + 4) { grid-row: span 1; } /* Kotak */

    /* JURUS SAKTI ANTI-BOLONG BAWAH (DESKTOP) */
    /* 3 Foto terakhir dipaksa jadi Kotak Biasa agar menyentuh lantai dengan rata! */
    .gallery-item:last-child,
    .gallery-item:nth-last-child(2),
    .gallery-item:nth-last-child(3) {
        grid-row: span 1 !important;
    }

    /* Reset animasi delay untuk Desktop (6 Foto) */
    .gallery-item:nth-child(6n + 1) { transition-delay: 0.1s !important; }
    .gallery-item:nth-child(6n + 2) { transition-delay: 0.3s !important; }
    .gallery-item:nth-child(6n + 3) { transition-delay: 0.5s !important; }
    .gallery-item:nth-child(6n + 4) { transition-delay: 0.7s !important; }
    .gallery-item:nth-child(6n + 5) { transition-delay: 0.9s !important; }
    .gallery-item:nth-child(6n + 6) { transition-delay: 1.1s !important; }
}

@media (min-width: 1024px) {
    .gallery-masonry {
        grid-auto-rows: 250px;
        gap: 25px;
    }
    .gallery-item {
        border-radius: 16px;
    }
}

/* ============================================
   AESTHETIC VIDEO SECTION (CINEMATIC THEATER)
   ============================================ */
.video-section {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-cream) 100%);
    position: relative;
    overflow: hidden;
}

/* --- THEATER WRAPPER --- */
.video-theater-wrapper {
    max-width: 900px; /* Ukuran lebar layar bioskop di Desktop */
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bingkai Kaca (Glass Frame) */
.video-glass-frame {
    width: 100%;
    padding: 15px; /* Jarak bingkai ke video */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px; /* Sudut melengkung mewah */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

/* Kontainer Rasio Video (16:9) */
.video-inner-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Rasio 16:9 agar video tidak gepeng */
    height: 0;
    overflow: hidden;
    border-radius: 20px; /* Melengkung di bagian video juga */
    background: #000; /* Warna dasar hitam saat video loading */
}

.video-inner-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- DEKORASI BAWAH VIDEO --- */
.video-footer-decor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.video-footer-decor .decor-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

.video-footer-decor i {
    color: var(--color-secondary);
    font-size: 1.2rem;
    opacity: 0.7;
}

.pulse-icon {
    animation: pulseIcon 2s infinite ease-in-out;
}

@keyframes pulseIcon {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* ============================================
   RESPONSIF MOBILE (WAJIB RAPI 100%)
   ============================================ */
@media (max-width: 767px) {
    .video-section {
        padding: 80px 15px; /* Padding lebih rapat di HP */
    }

    .video-glass-frame {
        padding: 8px; /* Bingkai lebih tipis di HP agar video lebih lebar */
        border-radius: 20px;
    }

    .video-inner-container {
        border-radius: 12px;
    }

    .video-footer-decor {
        margin-top: 30px;
        gap: 15px;
    }

    .video-footer-decor .decor-line {
        width: 50px;
    }
}

/* Animasi Masuk Super Smooth */
.anim-fade-up-slow.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.anim-fade-up-slow.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   AESTHETIC GIFT SECTION (FROSTED PEARL)
   ============================================ */
.gift-pearl-section {
    padding: 130px 0;
    background: var(--color-bg-cream); /* Latar website */
    position: relative;
    overflow: hidden;
}

.gift-message {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px;
}

.gift-message p {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.pearl-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ============================================
   1. DESAIN KARTU KACA MUTIARA (FROSTED PEARL)
   ============================================ */
.pearl-card {
    flex: 1;
    min-width: 340px;
    max-width: 450px;
    height: 250px; /* Proporsi kartu asli */
    border-radius: 20px;
    position: relative;
    /* Background Putih Mutiara dengan efek Kaca (Glassmorphism) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 244, 248, 0.85) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 1); /* Bingkai luar putih terang */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(212, 175, 55, 0.2); /* Shadow lembut + garis emas tipis di dalam */
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

.pearl-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(212, 175, 55, 0.5);
}

/* Efek Pantulan Cahaya Estetik (Glare) */
.card-glare-light {
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 1;
    pointer-events: none;
    transition: left 0.8s ease;
}

.pearl-card:hover .card-glare-light {
    left: 200%;
}

.pearl-card-inner {
    position: relative;
    z-index: 2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* ============================================
   2. HEADER: CHIP & LOGO BANK (BIRU)
   ============================================ */
.p-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Chip Kuningan Elegan */
.emv-chip-gold {
    width: 45px;
    height: 35px;
    background: linear-gradient(135deg, #f5d796 0%, #c99b4d 100%);
    border-radius: 6px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 2px 5px rgba(0,0,0,0.1);
}

.emv-chip-gold::before {
    content: ''; position: absolute; top: 25%; bottom: 25%; left: 0; right: 0;
    border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1);
}
.emv-chip-gold::after {
    content: ''; position: absolute; left: 30%; right: 30%; top: 0; bottom: 0;
    border-left: 1px solid rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.1);
}

/* Logo Bank Asli (Akan terlihat sangat jelas di latar putih ini) */
.bank-logo-img {
    height: 28px; 
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* ============================================
   3. BODY: NOMOR REKENING ENGRAVED
   ============================================ */
.p-card-body {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.card-label-dark {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 5px;
}

.card-number-dark {
    font-family: 'Courier New', monospace; 
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    font-weight: 700;
    color: var(--color-text-primary); /* Warna gelap elegan */
    letter-spacing: 4px;
    margin: 0;
    /* Efek teks diukir ke dalam (Engraved) */
    text-shadow: 1px 1px 1px rgba(255,255,255,1), -1px -1px 1px rgba(0,0,0,0.1);
}

/* ============================================
   4. FOOTER: NAMA & TOMBOL SALIN
   ============================================ */
.p-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-holder-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-holder-dark {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

/* Tombol Salin Estetik (Outline Emas) */
.btn-copy-pearl {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 8px 18px;
    border-radius: 30px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-copy-pearl:hover {
    background: var(--color-secondary);
    color: #FFFFFF;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* ============================================
   RESPONSIF MOBILE
   ============================================ */
@media (max-width: 767px) {
    .gift-pearl-section {
        padding: 100px 15px;
    }
    
    .pearl-cards-container {
        gap: 25px;
    }
    
    .pearl-card {
        min-width: 100%;
        height: 220px; 
    }
    
    .pearl-card-inner {
        padding: 25px 20px;
    }
    
    .bank-logo-img {
        height: 22px; 
    }
    
    .card-number-dark {
        letter-spacing: 3px;
    }
    
    .card-holder-dark {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }
    
    .btn-copy-pearl {
        padding: 8px 15px;
        font-size: 0.7rem;
    }
}
/* ============================================
   AESTHETIC WISHES & RSVP (SYMMETRICAL LAYOUT)
   ============================================ */
.wishes-section {
    padding: var(--section-padding) 0;
    background: url('../assets/images/pattern-bg.png') center/cover, var(--color-bg-primary); 
    position: relative;
}

.wishes-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch; /* Memaksa anak kolom untuk sama tinggi */
}

/* Kotak Formulir & Daftar Ucapan (Gaya Kaca/Glassmorphism) */
.rsvp-form-wrapper,
.wishes-list-wrapper {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Pita aksen emas di atas kotak */
.rsvp-form-wrapper::before,
.wishes-list-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 5px;
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-secondary));
}

/* Header Box */
.form-header-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
}

.form-header-box i {
    font-size: 1.8rem;
    color: var(--color-secondary);
}

.form-title, .wishes-list-title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

/* ============================================
   DESAIN INPUT FORM KEKINIAN (FLOATING LABEL)
   ============================================ */
.elegant-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex: 1; /* Supaya form bisa mengisi sisa ruang */
}

.input-floating {
    position: relative;
}

.input-floating input,
.input-floating textarea {
    width: 100%;
    padding: 18px 20px 10px;
    border: 2px solid transparent;
    border-bottom: 2px solid var(--color-border);
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-primary);
    transition: all 0.3s ease;
    outline: none;
}

.input-floating textarea {
    resize: none;
    height: 100%; /* Menyesuaikan tinggi otomatis */
    min-height: 120px;
}

.textarea-floating {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-floating input:focus,
.input-floating textarea:focus {
    background: rgba(255, 255, 255, 1);
    border-bottom: 2px solid var(--color-secondary);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.05);
}

.input-floating label {
    position: absolute;
    left: 20px;
    top: 15px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text-light);
    pointer-events: none;
    transition: all 0.3s ease;
}

.input-floating input:focus ~ label,
.input-floating input:not(:placeholder-shown) ~ label,
.input-floating textarea:focus ~ label,
.input-floating textarea:not(:placeholder-shown) ~ label {
    top: 2px;
    font-size: 0.75rem;
    color: var(--color-secondary);
    font-weight: 600;
}

/* ============================================
   PILIHAN KEHADIRAN (KOTAK RADIO ELEGAN)
   ============================================ */
.custom-radio-group {
    margin-bottom: 5px;
}

.radio-title {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.radio-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.box-radio input {
    display: none; 
}

.box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.box-content i {
    font-size: 1.2rem;
    color: var(--color-text-light);
    transition: all 0.3s;
}

.box-content span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.box-radio input:checked + .box-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.box-radio input:checked + .box-content.hadir { border-color: #4CAF50; background: rgba(76, 175, 80, 0.05); }
.box-radio input:checked + .box-content.hadir i, .box-radio input:checked + .box-content.hadir span { color: #4CAF50; }

.box-radio input:checked + .box-content.tidak { border-color: #F44336; background: rgba(244, 67, 54, 0.05); }
.box-radio input:checked + .box-content.tidak i, .box-radio input:checked + .box-content.tidak span { color: #F44336; }

.box-radio input:checked + .box-content.ragu { border-color: #FFC107; background: rgba(255, 193, 7, 0.05); }
.box-radio input:checked + .box-content.ragu i, .box-radio input:checked + .box-content.ragu span { color: #FF9800; }

/* Tombol Kirim Premium */
.btn-submit-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 10px 25px rgba(156, 175, 136, 0.4);
    cursor: pointer;
    transition: all 0.4s ease;
    margin-top: 10px;
}

.btn-submit-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(156, 175, 136, 0.5);
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.btn-submit-premium i {
    animation: floatIcon 2s ease-in-out infinite;
}

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

/* ============================================
   DAFTAR UCAPAN (GAYA CHAT BUBBLE MODERN)
   ============================================ */
.chat-style-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1; /* Mengisi sisa ruang ke bawah */
    overflow-y: auto;
    padding-right: 15px; 
}

.chat-style-list::-webkit-scrollbar { width: 6px; }
.chat-style-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); border-radius: 10px; }
.chat-style-list::-webkit-scrollbar-thumb { background: var(--color-secondary-light); border-radius: 10px; }
.chat-style-list::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }

.chat-bubble-item {
    display: flex;
    gap: 15px;
    animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-avatar {
    width: 45px; height: 45px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(156, 175, 136, 0.3);
}

.chat-avatar.bg-alt {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.chat-content { flex: 1; }

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

.chat-name {
    font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
    color: var(--color-text-primary);
}

.chat-badge {
    font-family: var(--font-sans); font-size: 0.7rem; padding: 3px 10px; border-radius: 20px;
    display: inline-flex; align-items: center; gap: 4px;
}
.badge-hadir { background: rgba(76, 175, 80, 0.1); color: #4CAF50; border: 1px solid rgba(76, 175, 80, 0.2); }

.chat-box {
    background: #FFFFFF; padding: 15px 20px;
    border-radius: 0 16px 16px 16px; 
    border: 1px solid var(--color-border);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    margin-bottom: 8px;
}

.chat-box p {
    margin: 0; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6;
    color: var(--color-text-secondary);
}

.chat-time {
    font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-text-light); margin-left: 5px;
}

/* ============================================
   RESPONSIF DESKTOP (KUNCI TINGGI SIMETRIS)
   ============================================ */
@media (min-width: 992px) {
    .wishes-container {
        grid-template-columns: 1fr 1fr; /* Membelah 2 di layar besar */
        gap: 50px;
    }
    
    /* Mengunci kedua kotak agar tingginya mutlak sama */
    .rsvp-form-wrapper,
    .wishes-list-wrapper {
        height: 600px; 
    }
    
    .chat-style-list {
        max-height: 480px; /* List akan tertahan di batas ini dan bisa di-scroll rapi */
    }
}

/* Penyesuaian Responsif HP */
@media (max-width: 767px) {
    .rsvp-form-wrapper,
    .wishes-list-wrapper {
        padding: 30px 20px;
    }
    .radio-boxes { gap: 5px; }
    .box-content { padding: 10px 5px; }
    .box-content span { font-size: 0.65rem; }
    .chat-bubble-item { gap: 10px; }
    .chat-avatar { width: 35px; height: 35px; font-size: 1rem; }
    .chat-style-list { max-height: 450px; }
}

/* ============================================
   AESTHETIC FOOTER (CINEMATIC DARK HORIZON)
   ============================================ */
.footer-horizon {
    position: relative;
    /* Latar belakang gelap elegan (Hijau/Navy sangat gelap) */
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, #0a110d 100%);
    padding: 150px 0 50px; /* Padding atas besar untuk ruang napas konten */
    text-align: center;
    /* PENTING: Jangan pakai overflow: hidden di sini agar ombak bisa keluar ke atas */
    z-index: 10; 
}

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

/* ============================================
   1. ANIMASI GELOMBANG PRESISI (DI ATAS FOOTER)
   ============================================ */
.horizon-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 5;
    /* INI KUNCINYA: Mengangkat ombak 99% ke atas menembus batas footer */
    transform: translateY(-99%); 
    line-height: 0;
}

.waves-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.parallax-waves > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes move-forever {
    0% { transform: translate3d(-90px,0,0); }
    100% { transform: translate3d(85px,0,0); }
}

/* ============================================
   2. KONTEN UTAMA (GRAND FINALE)
   ============================================ */
.footer-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.finale-greeting {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.greeting-text {
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 20px;
}

.greeting-thanks {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-style: italic;
    color: var(--color-secondary); /* Warna emas */
    letter-spacing: 2px;
}

/* --- TIPOGRAFI NAMA MEMPELAI (ANTI-NUMPUK) --- */
.finale-couple {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    width: 100%;
}

.finale-couple .name {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 6rem); /* Rumus ajaib: Mengecil otomatis di HP */
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.finale-couple .ampersand {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 4rem);
    font-style: italic;
    color: var(--color-secondary);
    margin: 0 10px;
}

/* --- TANGGAL FINALE --- */
.finale-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.finale-date .date-line {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

.finale-date p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-secondary-light); /* Emas terang */
    margin: 0;
}

/* ============================================
   3. CREDIT & COPYRIGHT (PEMBUAT WEB)
   ============================================ */
.footer-credits {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.copyright-text {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin: 0;
}

.creator-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.beat-heart {
    color: #ff4d4d;
    font-size: 0.9rem;
    animation: heartbeat 1.5s infinite;
}

.creator-name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary); /* Nama kamu menyala Emas! */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 2px;
}

/* ============================================
   4. ANIMASI MASUK (ELEGAN)
   ============================================ */
.anim-fade-up.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.anim-fade-up.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.anim-fade-scale.scroll-reveal {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.anim-fade-scale.scroll-reveal.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   RESPONSIF MOBILE (WAJIB RAPI 100%)
   ============================================ */
@media (max-width: 767px) {
    .footer-horizon {
        padding: 100px 15px 40px; /* Padding atas disesuaikan untuk HP */
    }
    
    .horizon-waves {
        height: 60px; /* Ombak lebih kecil/pendek di HP agar proporsional */
        transform: translateY(-99%); /* Tetap diangkat ke atas batas footer */
    }
    
    .footer-core {
        margin-bottom: 50px;
    }
    
    .greeting-text {
        font-size: 0.85rem;
        padding: 0 5px;
    }
    
    .greeting-thanks {
        font-size: 1.1rem;
    }
    
    /* MENCEGAH NAMA NUMPUK DI HP: Susun tegak ke bawah */
    .finale-couple {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 35px;
    }
    
    .finale-couple .name {
        font-size: 4rem; /* Cukup besar tapi aman di layar sempit */
    }
    
    .finale-couple .ampersand {
        font-size: 2.5rem;
        margin: 5px 0;
    }
    
    .finale-date .date-line {
        width: 30px;
    }
    
    .finale-date p {
        font-size: 0.8rem;
        letter-spacing: 3px;
    }
    
    .footer-credits {
        padding-top: 25px;
        gap: 12px;
    }
    
    .copyright-text {
        font-size: 0.7rem;
    }
    
    .creator-box {
        font-size: 0.75rem;
    }
    
    .creator-name {
        font-size: 0.9rem;
    }
}
/* ============================================
   FLOATING CONTROLS STYLES
   ============================================ */
.floating-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.control-btn {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-normal);
    position: relative;
}

.control-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-strong);
}

.control-btn.playing i {
    animation: musicRotate 3s linear infinite;
}

.control-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    animation: pulse 2s infinite;
}

.control-btn.playing .control-pulse {
    opacity: 0.4;
}

/* ============================================
   LIGHTBOX STYLES
   ============================================ */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.lightbox.active {
    display: flex;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    transition: var(--transition-normal);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-small);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    transition: var(--transition-normal);
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* ============================================
   TOAST NOTIFICATION STYLES
   ============================================ */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: #333;
    color: white;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    border-radius: 50px;
    box-shadow: var(--shadow-strong);
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast i {
    color: #4CAF50;
    font-size: 1.25rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.5;
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes musicRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE STYLES - TABLET
   ============================================ */
@media (min-width: 768px) {
    :root {
        --section-padding: 100px;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .cover-names {
        font-size: 4rem;
    }
    
    .hero-names .name {
        font-size: 5rem;
    }
    
    .hero-names .ampersand {
        font-size: 4rem;
    }
    
    .countdown-item {
        padding: 25px 35px;
        min-width: 100px;
    }
    
    .countdown-number {
        font-size: 3rem;
    }
    
    .events-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-item.large {
        grid-column: span 2;
    }
    
    .gift-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        padding-left: 0;
        width: 50%;
    }
    
    .timeline-item:nth-child(odd) {
        margin-left: 0;
        padding-right: 50px;
    }
    
    .timeline-item:nth-child(even) {
        margin-left: 50%;
        padding-left: 50px;
    }
    
    .timeline-marker {
        left: auto;
    }
    
    .timeline-item:nth-child(odd) .timeline-marker {
        right: -10px;
    }
    
    .timeline-item:nth-child(even) .timeline-marker {
        left: -10px;
    }
    
    .timeline-date {
        left: auto;
    }
    
    .timeline-item:nth-child(odd) .timeline-date {
        right: 35px;
    }
    
    .timeline-item:nth-child(even) .timeline-date {
        left: 35px;
    }
}

/* ============================================
   RESPONSIVE STYLES - DESKTOP
   ============================================ */
@media (min-width: 1024px) {
    :root {
        --section-padding: 120px;
    }
    
    .container {
        padding: 0 40px;
    }
    
    .section-title {
        font-size: 3.5rem;
    }
    
    .cover-names {
        font-size: 5rem;
    }
    
    .hero-names .name {
        font-size: 6rem;
    }
    
    .hero-names .ampersand {
        font-size: 5rem;
    }
    
    .couple-container {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 80px;
    }
    
    .couple-profile {
        flex: 1;
        max-width: 350px;
    }
    
    .couple-connector {
        flex-direction: column;
        justify-content: center;
        padding-top: 80px;
    }
    
    .connector-ampersand {
        font-size: 5rem;
    }
    
    .wishes-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-item.large {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* ============================================
   RESPONSIVE STYLES - LARGE DESKTOP
   ============================================ */
@media (min-width: 1200px) {
    .hero-names .name {
        font-size: 7rem;
    }
    
    .profile-image {
        width: 260px;
        height: 260px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .cover-modal,
    .floating-controls,
    .scroll-indicator {
        display: none !important;
    }
    
    .main-content {
        display: block !important;
    }
    
    section {
        page-break-inside: avoid;
    }
}
/* ============================================
   CUSTOM PREWEDDING BACKGROUND & OVERLAY
   ============================================ */
/* Ganti URL gambar dengan path foto prewedding kamu */
.custom-bg-cover {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.custom-bg-hero {
    background: url('../assets/images/COVERTEGUH.jpeg') center/cover no-repeat !important;
    background-attachment: fixed; /* Parallax effect */
}

/* Overlay agar text berwarna putih terbaca jelas di atas foto */
.cover-overlay, 
.hero-overlay {
    background: rgba(0, 0, 0, 0.6) !important; /* Warna gelap transparan */
    z-index: 1;
}

/* Membuat text menjadi putih khusus di atas foto prewedding */
.text-light-mode .cover-subtitle,
.text-light-mode .cover-names,
.text-light-mode .date-text,
.text-light-mode .hero-subtitle,
.text-light-mode .hero-names .name,
.text-light-mode .hero-date,
.text-light-mode .countdown-number,
.text-light-mode .countdown-label,
.text-light-mode .countdown-separator,
.text-light-mode .scroll-text {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Efek bayangan agar makin terbaca */
}

.text-light-mode .date-line {
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent) !important;
}

.text-light-mode .hero-names .ampersand {
    color: var(--color-secondary-light) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.text-light-mode .countdown-item {
    background: rgba(0, 0, 0, 0.4) !important; /* Kotak countdown semi-transparan hitam */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.justify-center {
    justify-content: center;
}
/* ============================================
   RESPONSIVE STYLES - MOBILE PERFECT 100%
   ============================================ */
@media (max-width: 767px) {
    /* Penyesuaian Typography */
    .cover-names { font-size: 2.2rem; }
    .hero-names .name { font-size: 2.8rem; }
    .hero-names .ampersand { font-size: 2rem; margin: 5px 0; }
    .section-title { font-size: 2rem; }
    
    /* Penyesuaian Padding */
    .hero-section { padding: 40px 15px; }
    .section-header { margin-bottom: 30px; }
    :root { --section-padding: 60px; }

    /* Kotak Countdown Responsif */
    .countdown-container { gap: 10px; }
    .countdown-item {
        min-width: 65px;
        padding: 12px 10px;
    }
    .countdown-number { font-size: 1.5rem; }
    .countdown-label { font-size: 0.65rem; }
    .countdown-separator { font-size: 1.5rem; margin-top: -15px; }

    /* Profile Mempelai di HP */
    .couple-profile { margin-bottom: 40px; }
    .profile-image {
        width: 160px;
        height: 160px;
    }
    .profile-name { font-size: 1.6rem; }
    .profile-parents { font-size: 0.85rem; line-height: 1.6; }
    
    /* Tombol Responsif */
    .btn-open-invitation, .btn-submit, .btn-whatsapp {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.875rem;
    }

    /* Event Section & Timeline */
    .timeline::before { left: 20px; }
    .timeline-item { padding-left: 55px; }
    .timeline-dot { width: 15px; height: 15px; left: 2.5px; }
    .timeline-date { left: 25px; top: -8px; }
    .date-year { font-size: 0.75rem; padding: 3px 8px; }
    .timeline-image { height: 150px; }
    .timeline-title { font-size: 1.1rem; }
    
    /* Form & Wishes Responsif */
    .rsvp-form-wrapper, .wishes-list-wrapper { padding: 25px 15px; }
    .form-title, .wishes-list-title { font-size: 1.3rem; }
    .radio-label { flex-direction: row; font-size: 0.85rem; }
    
    /* Account Text Size */
    .account-number { font-size: 1.2rem; }
}

/* ============================================
   FIX RUANG KOSONG UNTUK OMBAK FOOTER
   ============================================ */
/* Pastikan kamu menyesuaikan nama class/ID di bawah ini 
   dengan ID section Doa & Kehadiran milikmu (misal: #rsvp, #wishes, dll) */

#rsvp, 
.rsvp-section, 
.wishes-section,
.doa-section {
    padding-bottom: 180px !important; /* Memberi ruang kosong super lega di bawah konten */
    position: relative;
    z-index: 1; /* Memastikan dia berada di bawah ombak */
}

/* Penyesuaian Ruang Ombak di HP */
@media (max-width: 767px) {
    #rsvp, 
    .rsvp-section, 
    .wishes-section,
    .doa-section {
        padding-bottom: 100px !important; /* Ruang ombak di HP agak dikecilkan */
    }
}

/* ============================================
   ANTI HORIZONTAL SCROLL (KEAMANAN EKSTRA) - REVISI
   ============================================ */
/* HAPUS 'footer' dari daftar ini agar ombak tidak terpotong! */
section, header, main {
    overflow-x: hidden;
    width: 100%;
}

/* Kunci utama agar ombak bisa keluar dari batas atas footer */
.footer-horizon {
    overflow: visible !important; 
}