/* =========================================
   1. VARIABEL & SETUP DASAR
========================================= */
:root {
    --gold: #b88a4d;      /* Warna Emas Utama */
    --gold-dark: #8c6630; /* Emas lebih gelap untuk hover */
    --cream: #f9f5f0;     /* Warna krem latar belakang */
    --dark: #2c2c2c;      /* Warna teks gelap */
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden; /* Mencegah scroll ke samping */
    color: var(--dark);
}

/* Font khusus untuk judul aesthetic */
.font-wedding {
    font-family: 'Great Vibes', cursive;
}

/* Utilitas warna & spacing */
.text-gold { color: var(--gold) !important; }
.bg-gold { background-color: var(--gold) !important; color: white; }
.ls-2 { letter-spacing: 2px; }
.section-padding { padding: 80px 0; }

/* =========================================
   2. KOMPONEN & TOMBOL
========================================= */
/* Tombol Emas */
.btn-gold {
    background-color: var(--gold);
    color: white;
    border: none;
    transition: all 0.3s ease; /* Transisi halus */
    position: relative;
    overflow: hidden;
}

/* Efek kilau saat hover di tombol */
.btn-gold::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg);
    transition: all 0.5s;
    opacity: 0;
}

.btn-gold:hover::after {
    left: 100%;
    opacity: 1;
}

.btn-gold:hover {
    background-color: var(--gold-dark);
    transform: translateY(-3px); /* Tombol naik sedikit */
    box-shadow: 0 10px 20px rgba(184, 138, 77, 0.3);
}


/* =========================================
   3. COVER DEPAN & NAVIGASI
========================================= */
.cover-overlay {
    /* Ganti 'bg-cover.jpg' dengan gambar background utamamu */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('assets/bg-cover.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax di cover */
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1); /* Animasi buka lebih dramatis */
}

/* Efek Kaca (Glassmorphism) di kotak nama tamu */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Navbar bawah */
.navbar.fixed-bottom {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8) !important;
}


/* =========================================
   4. BACKGROUND & PARALLAX PER SECTION
========================================= */
/* Setup dasar untuk semua section ber-background */
.bg-img {
    position: relative;
    background-size: cover;
    background-position: center;
    /* INI KUNCI PARALLAX: Gambar diam saat discroll */
    background-attachment: fixed; 
}

/* Lapisan putih transparan di atas gambar agar tulisan terbaca */
.bg-img::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.4); /* Ubah 0.85 untuk transparansi */
    z-index: 1;
}

/* Gambar background spesifik per section */
.section-hero { background-image: url('assets/bg-cover.jpg'); }
/* Section mempelai pakai background yang sama atau beda, terserah */
.section-mempelai { background-image: url('assets/4371939.jpg'); }
.section-acara { background-image: url('assets/4371939.jpg'); }
.section-galeri { background-image: url('assets/4371933.jpg'); }
.section-gift { background-image: url('assets/4371933.jpg'); }


/* =========================================
   5. KONTEN: MEMPELAI, ACARA, DLL
========================================= */
/* Bingkai Foto Mempelai */
.img-frame {
    width: 220px; height: 220px;
    border: 5px solid var(--gold);
    border-radius: 50%;
    padding: 5px; /* Jarak antara foto dan bingkai emas */
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.5s ease;
}
/* Efek hover di foto mempelai */
.img-frame:hover {
    transform: scale(1.05) rotate(2deg); /* Membesar dan miring sedikit */
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Kartu Kaca di bagian Acara */
.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
    transform: translateY(-10px); /* Naik saat dihover */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
.border-gold { border-color: var(--gold) !important; }


/* =========================================
   6. COUNTDOWN & GALERI FOTO
========================================= */
/* Kotak Waktu Countdown */
.time-box {
    background: var(--gold);
    color: white;
    padding: 15px;
    border-radius: 15px;
    min-width: 80px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Efek hover kotak waktu: seolah-olah ditekan */
.time-box:hover {
    transform: scale(1.1);
    background-color: var(--gold-dark);
}

/* Item Galeri Foto */
.gallery-item {
    /* height: 250px; */
    aspect-ratio: 3 / 4;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    object-position: top center; /* Memaksa fokus gambar ke bagian ATAS TENGAH */
    transition: transform 0.5s ease;
}
/* Efek Hover Galeri: Zoom dan angkat */
.gallery-item:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translateY(-5px);
}
.gallery-item:hover img {
    transform: scale(1.1); /* Gambar membesar dalam kotak */
}


/* =========================================
   7. ANIMASI TAMBAHAN (YANG BIKIN HIDUP)
========================================= */

/* Animasi Wayang Bergoyang Halus */
@keyframes sway {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-5px); }
}
/* Terapkan ke semua gambar wayang */
.section-hero img[alt="Wayang"], .section-acara img[alt="Wayang"] {
    animation: sway 3s ease-in-out infinite; /* Bergoyang selamanya */
}

/* Animasi Teks "The Wedding Of" berdenyut pelan */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
.ls-2 {
    animation: pulse-slow 3s infinite;
}


/* =========================================
   8. RESPONSIVE (PENYESUAIAN HP)
========================================= */
@media (max-width: 768px) {
    .display-1 { font-size: 3.5rem; } /* Judul di cover dikecilkan */
    .display-4 { font-size: 2.5rem; } /* Nama mempelai dikecilkan */
    .img-frame { width: 180px; height: 180px; } /* Foto mempelai dikecilkan */
    /* .gallery-item { height: 150px; } Foto galeri dipendekkan */
    .time-box { min-width: 60px; padding: 10px; } /* Kotak waktu dikecilkan */
    .time-box span.fs-2 { font-size: 1.2rem !important; }
    /* .bg-img, .cover-overlay {
        background-attachment: scroll;
    } */
}