/* =========================================================
   RESET & GLOBAL STYLES (MOBILE-FIRST, 100% FIT DI SEMUA HP)
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    background-color: #2a2a2a; /* Warna gelap layar monitor */
}

body {
    width: 100%;
    max-width: 100%; /* BIARKAN BEBAS: Akan melar penuh di layar HP apapun */
    min-height: 100vh;
    margin: 0 auto; 
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #222222;
    position: relative;
    overflow-x: hidden; 
}

body.locked { overflow-y: hidden; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.w-100 { width: 100%; }

/* SECTIONS */
.section {
    min-height: 100vh;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}
.bg-light { background-color: #fafafa; }

/* TYPOGRAPHY */
h1, h2, h3 { color: #111111; margin-bottom: 10px; font-weight: 600; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.2rem; }
p { font-size: 0.9rem; line-height: 1.6; color: #555555; }
small { font-size: 0.8rem; color: #777777; }

/* COMPONENTS */
.card-minimalis, .frame-minimalis, .ayat-content {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 30px;
    width: 100%;
    max-width: 450px;
    text-align: center;
}
hr { border: none; border-top: 1px solid #ddd; margin: 15px 0; }

/* BUTTONS */
button, .btn-solid, .btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn-solid { background: #222222; color: #ffffff; border: none; }
.btn-solid:hover { background: #000000; }
.btn-outline { background: transparent; color: #222222; border: 1px solid #222222; }
.btn-outline:hover { background: #f0f0f0; }

/* =========================================================
   IMPORT FONT CUSTOM DARI FOLDER ASSETS
   ========================================================= */
@font-face {
    font-family: 'PlaywriteUSModern';
    src: url('assets/PlaywriteUSModern.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'StyleFormal';
    src: url('assets/style_formal.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'DreamAvenue';
    src: url('assets/dream_avenue.otf') format('opentype');
    font-display: swap;
}

/* =========================================================
   HALAMAN COVER & TOMBOL MUSIK (TAMPILAN DEFAULT MOBILE)
   ========================================================= */
#cover-page {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100vh; /* 100% responsif */
    background-image: url('assets/galeri1.webp');
    background-size: cover;
    background-position: center;
    z-index: 9999;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    align-items: center;
    padding: 4vh 20px 8vh 20px; 
    text-align: center;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1); 
}

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



/* Efek bayangan gelap di atas foto agar font putih kontras */
.cover-overlay {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}

.cover-top, .cover-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
}

#cover-page .title-small {
    font-family: 'PlaywriteUSModern', sans-serif;
    /* Ukuran diperkecil sesuai permintaan */
    font-size: 0.85rem; 
    font-weight: normal;
    color: #ffffff;
    /* Margin bawah dirapatkan agar kelompok teks naik menjauhi wajah */
    margin-bottom: 5px; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    letter-spacing: 1px;
}

/* =========================================================
   PERBAIKAN NAMA MEMPELAI (MENJADI LEBIH TIPIS)
   ========================================================= */
#cover-page .nama-mempelai {
    font-family: 'StyleFormal', serif;
    font-size: clamp(2.2rem, 9vw, 3.8rem); /* Sedikit disesuaikan ukuran standarnya */
    font-weight: 300; /* Mengubah ketebalan menjadi lebih tipis/light */
    color: #ffffff;
    line-height: 1.1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Shadow diperhalus agar tidak terkesan bold */
    text-transform: capitalize;
    margin-top: 0; 
}

#cover-page .simbol-dan {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.4em; /* Menggunakan em agar ukurannya proporsional mengikuti font-size h1 */
}

/* =========================================================
   MODE DESKTOP (MOCKUP HP MODERN)
   ========================================================= */
/* Breakpoint 768px: Memastikan mode desktop HANYA aktif di Tablet/PC */
@media (min-width: 768px) {
    body {
        max-width: 414px; /* Lebar HP modern (iPhone Pro Max / Android besar) agar tidak kotak */
        box-shadow: 0 0 50px rgba(0,0,0,0.8); /* Bayangan mockup HP */
    }

    #cover-page {
        left: 50%;
        transform: translateX(-50%);
        width: 414px; /* Sesuaikan dengan body */
    }
    
    #cover-page.slide-up {
        transform: translate(-50%, -100vh); 
    }


}

/* ---------------------------------------------------------
   MEDIA QUERIES UNTUK LAYAR MOBILE
   --------------------------------------------------------- */
@media (max-width: 430px) {
    #cover-page .nama-mempelai {
        font-size: 3rem;
        gap: 10px;
    }
    #btn-buka {
        padding: 9px 22px; /* Lebih kecil sedikit di layar HP */
        font-size: 0.8rem;
    }
}

@media (max-width: 395px) {
    #cover-page .nama-mempelai {
        font-size: 2.6rem;
        gap: 8px;
    }
}

@media (max-width: 340px) {
    #cover-page .nama-mempelai {
        font-size: 2.1rem;
        gap: 6px;
    }
}
/* Penyesuaian khusus untuk layar pendek agar teks tetap di atas */
@media (max-height: 600px) {
    #cover-page {
        padding-top: 2vh;
    }
    #cover-page .nama-mempelai {
        font-size: 2rem;
    }
}

#cover-page .kepada-yth {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

#cover-page .nama-tamu {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 25px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}

#cover-page .disclaimer {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    color: #eeeeee;
    margin-top: 25px;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* =========================================================
   PERBAIKAN UKURAN TOMBOL (MENJADI LEBIH KECIL)
   ========================================================= */
#btn-buka {
    background: linear-gradient(135deg, #4D1A6D 100%, #fe9c0a 100%);
    color: #ffffff;
    border: none;
    /* Padding dan font-size diperkecil agar ukuran tombol lebih pas */
    padding: 10px 24px; 
    font-size: 0.85rem; 
    border-radius: 50px;
    font-family: 'PlaywriteUSModern', sans-serif;
    font-weight: normal; /* Menghilangkan efek bold pada teks tombol jika ada */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(148, 100, 230, 0.35); /* Shadow disesuaikan */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#btn-buka:hover {
    box-shadow: 0 8px 20px rgba(178, 100, 230, 0.5);
}

@keyframes floatBtn {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* =========================================================
   ANIMASI REVEAL BERGANTIAN (SEQUENTIAL)
   ========================================================= */
.reveal-seq {
    opacity: 0;
    transform: translateY(25px);
    will-change: opacity, transform;
}

@keyframes fadeInUpSeq {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mengatur delay kemunculan satu per satu */
#cover-page .title-small.reveal-seq { animation: fadeInUpSeq 1s ease forwards 0.5s; }
#cover-page .nama-mempelai.reveal-seq { animation: fadeInUpSeq 1s ease forwards 1s; }
#cover-page .kepada-yth.reveal-seq { animation: fadeInUpSeq 1s ease forwards 1.8s; }
#cover-page .nama-tamu.reveal-seq { animation: fadeInUpSeq 1s ease forwards 2.3s; }
#cover-page .disclaimer.reveal-seq { animation: fadeInUpSeq 1s ease forwards 3.3s; }

/* Khusus tombol: masuk beranimasi, setelah masuk lanjut melayang */
#cover-page #btn-buka.reveal-seq { 
    animation: 
        fadeInUpSeq 1s ease forwards 2.8s, 
        floatBtn 3s ease-in-out infinite 3.8s; /* Mulai melayang setelah selesai muncul */
}

/* =========================================================
   HERO SECTION COLLAGE
   ========================================================= */
.hero-collage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Memastikan dahan pohon terpotong rapi */
    background-color: #f6f8fa;
    padding: 0;
    margin: 0;
}

/* Base untuk semua layer gambar */
.hero-collage .layer {
    position: absolute;
    pointer-events: none;
    height: auto;
}

/* Layer 0: Background Utama */
.hero-collage .layer-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
}

/* --- KIRI (Pohon 5 s/d 1) --- */
.img-kiri5 { top: -5%;   left: -20%;  width: 53%; z-index: 1; }
.img-kiri4 { top: 12%;   left: -22%;  width: 52%; z-index: 1; }
.img-kiri3 { top: 28%;   left: -23%;  width: 48%; z-index: 1; }
.img-kiri2 { top: 47%;   left: -20%;   width: 40%; z-index: 1; }
.img-kiri1 { top: 58%;   left: -20%;  width: 40%; z-index: 1; }

/* --- KANAN (Pohon 3 s/d 1) --- */
.img-kanan3 { top: -3%;  right: -25%; width: 55%; z-index: 1; } /* Digeser dari -5% ke -10% */
.img-kanan2 { top: 18%;  right: -21%; width: 50%; z-index: 1; } /* Digeser dari -6% ke -11% */
.img-kanan1 { top: 38%;  right: -20%; width: 45%; z-index: 1; } /* Digeser dari -5% ke -10% */

/* --- MIDGROUND (Pohon Merah, Gazebo, Pot) --- */
.img-merah  { bottom: 17%; right: -25%; width: 55%; z-index: 4; }
.img-gazebo { bottom: 18%; right: 16%; width: 56%; z-index: 2; }
.img-pot    { bottom: 15%; left: 10%;  width: 28%; z-index: 3; }

/* --- JALAN / TANGGA --- */
.img-tangga { bottom: 5%;  right: 0%;  width: 80%; z-index: 3; }

/* --- FOREGROUND (Bunga-bunga) --- */
.img-bunga-kiri  { bottom: -2%; left: -6%;  width: 35%; z-index: 99; }
.img-bunga-kanan { bottom: -2%; right: -6%; width: 60%; z-index: 99; }
.img-bunga-bawah { bottom: -1%; left: 15%;  width: 80%; z-index: 5; }

/* =========================================================
   ANIMASI REVEAL & ANGIN SEQUENTIAL (LEBIH LAMBAT & JELAS)
   ========================================================= */

/* 1. Kondisi Awal Default: Gambar transparan & turun 30px */
.hero-collage .layer {
    opacity: 0;
    transform: translateY(30px);
    /* DURASI REVEAL DIPERLAMBAT DARI 1.2s JADI 2.2s */
    animation-duration: 2.2s; 
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 
    animation-fill-mode: forwards; 
}

/* Titik tumpu ayunan pohon (agar berayun dari pangkal pinggir layar) */
.img-kanan1, .img-kanan2, .img-kanan3 { transform-origin: right center; }
.img-kiri1, .img-kiri2, .img-kiri3, .img-kiri4, .img-kiri5 { transform-origin: left center; }

/* 2. Keyframes Muncul Biasa (Bunga, Tangga, Pot, Gazebo) */
@keyframes munculLayer {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 3. Keyframes Muncul Pohon (Slide & Scale, TANPA Fade) */
@keyframes munculPohonKanan {
    0%   { opacity: 1; transform: translateX(80px) scale(0.85) rotate(0deg); }
    100% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
}
@keyframes munculPohonKiri {
    0%   { opacity: 1; transform: translateX(-80px) scale(0.85) rotate(0deg); }
    100% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
}

/* 4. Keyframes Ayunan Angin Sepoy-Sepoy (ROTASI DIPERBESAR KE 4 DERAJAT) */
@keyframes goyangKanan {
    0%, 100% { transform: translateX(0) scale(1) rotate(0deg); }
    50%      { transform: translateX(0) scale(1) rotate(-4deg); }
}
@keyframes goyangKiri {
    0%, 100% { transform: translateX(0) scale(1) rotate(0deg); }
    50%      { transform: translateX(0) scale(1) rotate(4deg); }
}

/* --- TRIGGER ANIMASI (Saat Undangan Dibuka) --- */

/* Urutan 1-5: Elemen Bawah & Tengah (Hanya Reveal) */
body:not(.locked) .img-bunga-bawah { animation-name: munculLayer; animation-delay: 0.5s; }
body:not(.locked) .img-bunga-kiri  { animation-name: munculLayer; animation-delay: 0.7s; }
body:not(.locked) .img-bunga-kanan { animation-name: munculLayer; animation-delay: 0.7s; }
body:not(.locked) .img-tangga      { animation-name: munculLayer; animation-delay: 0.9s; }
body:not(.locked) .img-pot         { animation-name: munculLayer; animation-delay: 1.1s; }
body:not(.locked) .img-gazebo      { animation-name: munculLayer; animation-delay: 1.3s; }
body:not(.locked) .img-merah       { animation-name: munculLayer; animation-delay: 1.3s; }


body:not(.locked) .img-kanan1 { 
    animation: munculPohonKanan 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2s both, 
               goyangKanan 4.2s ease-in-out infinite 3.7s; 
}
body:not(.locked) .img-kanan2 { 
    animation: munculPohonKanan 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2.1s both, 
               goyangKanan 4.8s ease-in-out infinite 3.8s; 
}
body:not(.locked) .img-kanan3 { 
    animation: munculPohonKanan 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2.2s both, 
               goyangKanan 5.4s ease-in-out infinite 3.9s; 
}

/* Urutan 7: Rangkaian Pohon Kiri (Reveal + Angin) */
body:not(.locked) .img-kiri1 { 
    animation: munculPohonKiri 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2s both, 
               goyangKiri 4.0s ease-in-out infinite 3.7s; 
}
body:not(.locked) .img-kiri2 { 
    animation: munculPohonKiri 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2.1s both, 
               goyangKiri 4.6s ease-in-out infinite 3.8s; 
}
body:not(.locked) .img-kiri3 { 
    animation: munculPohonKiri 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2.2s both, 
               goyangKiri 5.2s ease-in-out infinite 3.9s; 
}
body:not(.locked) .img-kiri4 { 
    animation: munculPohonKiri 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2.3s both, 
               goyangKiri 4.4s ease-in-out infinite 4.0s; 
}
body:not(.locked) .img-kiri5 { 
    animation: munculPohonKiri 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2.4s both, 
               goyangKiri 5.0s ease-in-out infinite 4.1s; 
}

/* =========================================================
   STYLE BINGKAI & TEKS HERO (DIPERBAIKI)
   ========================================================= */

/* Wadah Teks Hero agar selalu di tengah */
.hero-text-container {
    position: absolute;
    top: 48%; /* Sedikit di atas tengah agar presisi secara visual */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    text-align: center;
    width: 80%;
}

/* Bingkai Utama */
.img-bingkai-utama {
    top: 50%; left: 50%;
    width: 100%; 
    z-index: 10;
}

/* Bingkai Stroke (Di atas bingkai utama) */
.img-bingkai-stroke {
    top: 50%; left: 50%;
    width: 100%;
    z-index: 11;
    /* Kondisi awal diubah: dipotong 100% dari ATAS */
    clip-path: inset(100% 0 0 0); 
}

/* Tipografi Hero */
.hero-inisial {
    font-family: 'StyleFormal', serif;
    font-size: 3rem;
    color: #4a4a4a;
    /* Margin bawah diubah dari -5px menjadi 15px agar jauh dari "The Wedding Of" */
    margin-bottom: 20px; 
    font-weight: normal;
}

.hero-wedding-of {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    color: #6d6d6d;
    letter-spacing: 2px;
    /* Margin bawah diperbesar agar jauh dari nama mempelai */
    margin-bottom: 20px; 
}

/* Susunan Nama Mempelai (Vertikal / Bersusun) */
.hero-nama {
    font-family: 'DreamAvenue', serif;
    font-size: 3.4rem;
    font-weight: normal;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Jarak antar baris teks (Wanita dan Pria) sedikit dilonggarkan */
    line-height: 1.3; 
    /* Jarak atas-bawah blok nama secara keseluruhan diperbesar */
    margin: 12px 0; 
}

/* Khusus untuk simbol & di tengah nama */
.hero-nama .simbol-dan-hero {
    font-family: 'DreamAvenue', serif;
    font-size: 2.5rem;
    color: #6d6d6d;
    /* Jarak antara nama atas, simbol &, dan nama bawah diperbesar */
    margin: 13px 0; 
}

.hero-tanggal {
    font-family: 'DreamAvenue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 3px;
    font-weight: bold;
    color: #555;
    /* Jarak dari nama mempelai ke tanggal diperbesar tajam */
    margin-top: 20px; 
}

/* =========================================================
   ANIMASI FRAME & TEKS REVEAL (SETELAH POHON)
   ========================================================= */

/* --- Keyframes Frame --- */
@keyframes zoomInBingkai {
    /* Dimulai dari skala 0.8 (80%) agar tidak memantul dari titik 0 */
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* --- Keyframes Frame --- */
@keyframes drawStroke {
    /* 0%: Memastikan centering TERPATAH, clip-path 100% dari ATAS (tersembunyi) */
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%); 
        clip-path: inset(100% 0 0 0); 
    }
    /* 100%: Tampil penuh */
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%); 
        clip-path: inset(0 0 0 0); 
    }
}

/* --- Keyframes Teks --- */
@keyframes fadeInUpText {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- TRIGGER ANIMASI SETELAH POHON (Start after ~4.2s) --- */

/* Bingkai Utama Zoom In */
body:not(.locked) .img-bingkai-utama {
    /* Durasi dipanjangkan sedikit jadi 2s, dan menggunakan bezier pengereman halus (easeOutQuart) */
    animation: zoomInBingkai 2s cubic-bezier(0.25, 1, 0.5, 1) forwards 3s;
}

/* Bingkai Stroke Draw Effect */
body:not(.locked) .img-bingkai-stroke {
    animation: drawStroke 1.6s ease-in-out forwards 3.5s;
}

/* Animasi Teks Berurutan */
.reveal-text { opacity: 0; }

body:not(.locked) .hero-inisial { animation: fadeInUpText 1s forwards 5s; }
body:not(.locked) .hero-wedding-of { animation: fadeInUpText 1s forwards 5.3s; }
body:not(.locked) .hero-nama { animation: fadeInUpText 1s forwards 5.6s; }
body:not(.locked) .hero-tanggal { animation: fadeInUpText 1s forwards 5.9s; }

/* =========================================================
   HALAMAN AYAT (UKURAN KOTAK DIPERKECIL)
   ========================================================= */
.ayat-section {
     /* Meneruskan gradasi violet dari halaman countdown agar menyatu */
  background: url('assets/bg_kotak.webp') center/cover;
    background-attachment: scroll;
    
    padding: 100px 15px 120px 15px; 
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}

/* Kotak Putih di Tengah (Wrapper) */
.ayat-card {
    /* Mengubah background menjadi putih semi-transparan (efek kaca/overlay halus) */
    background-color: rgba(253, 247, 255, 0.9);
    
    width: 100%;
    max-width: 310px; /* Ukuran kotak yang sudah diperkecil */
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* KUNCI: Wajib relative dan z-index agar konten utama berada di atas background transparan */
    position: relative;
    z-index: 1;
   opacity: 0; /* Wajib ada! */
    transform: scale(0.85); /* Wajib ada! */
}

/* efek menyisipkan bg_kotak.webp secara transparan di dalam wrapper */
.ayat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    background-image: url('assets/bg_kotak.webp');
    /* UBAH DI SINI: Memaksa gambar fit 100% ke lebar dan tinggi kotak */
    background-size: 120% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    
    opacity: 0.18; 
    z-index: -1; 
}

/* Foto Mempelai (Otomatis mengikuti lebar kotak baru) */
.ayat-foto {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

/* =========================================================
   INISIAL MONOGRAM DI HALAMAN AYAT
   ========================================================= */
.ayat-inisial {
    font-family: 'StyleFormal', serif; 
    font-size: 3rem; /* Ukuran besar yang megah */
    font-weight: normal;
    
    /* GANTI WARNA INI SESUAI BACKGROUND AYAT ANDA:
       Gunakan #F8E7CD (Soft Gold) jika background ayat gelap/ungu.
       Gunakan #4D1A6D (Violet Pekat) jika background ayat putih/terang. */
    color: #391153; 
    
    margin-bottom: 20px;
    margin-top: 30px;
    text-align: center;
    line-height: 1;
    
    /* Sedikit bayangan untuk dimensi */
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
    
    /* Spasi antar huruf agar terlihat seperti logo monogram premium */
    letter-spacing: 10px; 
}

/* Wadah Teks (Padding disesuaikan agar teks tidak terlalu sesak) */
.ayat-teks-wrapper {
    padding: 0 22px 35px 22px;
    text-align: center;
}

/* Tipografi Ayat */
.ayat-kutipan {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.8rem; /* Ukuran font disesuaikan menjadi 0.8rem agar teks mengalir rapi */
    line-height: 1.6;
    color: #333333;
    margin-bottom: 15px;
opacity: 0;
    transform: translateY(30px); /* Persiapan Fade Up (mulai dari bawah) */
}

.ayat-sumber {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.85rem;
    color: #333333;
    display: block;
    font-weight: bold;
}

/* =========================================================
   KEYFRAMES ANIMASI AYAT
   ========================================================= */
@keyframes ayatZoomIn {
    to { opacity: 1; transform: scale(1); }
}

@keyframes ayatZoomOut {
    to { opacity: 1; transform: scale(1); }
}

@keyframes ayatFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   TRIGGER ANIMASI (Saat class 'is-visible' aktif via JS)
   ========================================================= */
/* 1. Kotak Zoom In (Animasi Pertama) */
.ayat-section.is-visible .ayat-card {
    animation: ayatZoomIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 2. Bunga Zoom Out (Delay 0.6 detik agar menunggu kotak muncul) */
.ayat-section.is-visible .ayat-bunga {
    animation: ayatZoomOut 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.6s;
}

/* 3. Teks Kutipan Fade Up (Delay 1 detik) */
.ayat-section.is-visible .ayat-kutipan {
    animation: ayatFadeUp 1s ease-out forwards 1s;
}

/* 4. Teks Sumber Fade Up (Delay 1.3 detik) */
.ayat-section.is-visible .ayat-sumber {
    animation: ayatFadeUp 1s ease-out forwards 1.3s;
}

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

.salam-pembuka {
    max-width: 650px; 
    margin: 0 auto 40px auto; 
    text-align: center;
    padding: 0 15px;
    position: relative;
    z-index: 10;
}

/* Desain Judul "We Are Getting Married" */
.judul-profil { 
    font-family: 'DreamAvenue', cursive; 
    color: #2d1761; /* Menggunakan biru Navy tema Aa */
    text-align: center; 
    margin-bottom: 20px; 
    line-height: 1.3;
}
.judul-profil .we-are { 
    display: block; 
    font-size: 1.5rem; 
    letter-spacing: 5px; 
    margin-bottom: 5px; 
    opacity: 0.85;
}
.judul-profil .getting-married { 
    display: block; 
    font-size: 1.5rem; 
    font-weight: 700; 
}

/* Desain Teks Pengantar Baru */
.teks-pengantar-profil { 
    font-family: 'PlaywriteUSModern', sans-serif; 
    font-size: 0.75rem; 
    color: #444; 
    text-align: center; 
    line-height: 1.8; 
    font-weight: 500;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9);
}

/* =========================================================
   REDESIGN PROFIL MEMPELAI (KAPSUL VERTIKAL ALA REFERENSI)
   ========================================================= */
.profil-susun-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
}

.profil-item {
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #2d1761; /* Mengikuti warna Navy Tema Aa */
    width: 100%;
}

/* DESAIN FOTO KAPSUL (Capsule Shape) */
.foto-bulat { 
    object-fit: cover; 
    border: none; 
    padding: 4px; 

    position: relative; 
    z-index: 5; /* Angka besar = Pasti di depan */
    
    /* --- UBAH BAGIAN INI UNTUK MEMPERBESAR FOTO --- */
    width: 165px;  /* Silakan naikkan angkanya sesuai selera (contoh: 250px, 300px, atau 100% jika ingin full mengikuti lebar container) */
    height: 250px; /* Naikkan juga tingginya agar proporsional */
    border-radius: 200px; /* Sesuaikan dengan kelengkungan kotak yang kamu buat tadi */
    
    /* Gradasi bingkai kapsul bernuansa Navy dan Putih */
    background: linear-gradient(
        135deg, 
        rgba(66, 26, 93, 0.8) 0%,     
        rgba(255, 255, 255, 1) 15%,   
        rgba(143, 46, 184, 0.2) 50%,  
        rgba(255, 255, 255, 1) 85%,   
        rgba(82, 26, 93, 0.8) 100%    
    );
    
    margin-bottom: 0 !important; 
    box-shadow: 0 8px 15px rgba(77, 26, 93, 0.25);
    position: relative; 
    z-index: 2; 
}

/* =========================================================
   SISTEM BUNGA DI BELAKANG FOTO PROFIL (1 CLASS UNTUK SEMUA)
   ========================================================= */

/* 1. Wadah utama (Menjadi patokan pusat koordinat) */
.foto-wrapper {
    position: relative; 
    display: inline-block;
    margin-bottom: 20px; 
}

/* 2. Foto Mempelai (Layer Depan) */
.foto-bulat {
    position: relative; 
    z-index: 5; /* Angka besar = Pasti di depan */
    /* (Catatan: Lebar, tinggi, dan border-radius kapsul dari kode Aa sebelumnya tetap biarkan ada di sini) */
}

/* 3. Class Tunggal untuk Bunga (Layer Belakang) */
.bunga-belakang-foto {
    position: absolute;
    z-index: 1; /* Angka kecil 1 = Pasti di belakang foto yang z-indexnya 5 */
    width: 130px; /* Atur besaran bunga di sini */
    
    /* Koordinat letak bunga (Nongol di sudut kiri atas foto) */
    top: -30px;  
    left: -50px; 
    
    pointer-events: none; /* Agar tidak mengganggu klik/scroll tamu */
}

/* TIPOGRAFI PROFIL */
.nama-panggilan { 
    font-family: 'StyleFormal', cursive; 
    font-size: 2.5rem; 
    margin-bottom: 5px; 
    color: #2d1761;
}

.nama-lengkap { 
    font-family: 'DreamAvenue', sans-serif; 
    font-size: 1.1rem; 
    font-weight: 600; 
    margin-bottom: 5px; 
    letter-spacing: 1px; 
    color: #2d1761;
}

.status-anak { 
    font-size: 0.85rem; 
    margin-bottom: 15px; 
    margin-top: 10px;
    font-style: italic; 
    line-height: 1.6; /* Dikecilkan dari 1.6 agar baris atas dan bawah lebih merapat */
    letter-spacing: -0.3px; /* Membuat jarak antar huruf sedikit lebih padat */
    color: #444; 
    max-width: 250px; /* Opsional: Mencegah teks terlalu melebar ke samping di layar besar */
    margin-left: auto; /* Memastikan teks tetap berada di tengah */
    margin-right: auto;
}

/* =========================================================
   PERBAIKAN MARGIN & REDESIGN SIMBOL DAN ( --- & --- )
   ========================================================= */

   /* --- BUCKET BUNGA DI ATAS WE ARE (PROFIL) --- */
.foto-bucket-profil {
    width: 135px; /* Ukuran buket, sesuaikan jika kurang besar/kecil */
    height: auto;
    display: block;
    margin: -20px auto 15px auto; /* Margin minus di atas agar agak naik, margin bawah memberi jarak ke teks WE ARE */
    object-fit: contain;
}

/* 1. Memperlebar Jarak Antara Keterangan dan Foto Mempelai Wanita */
#profil .salam-pembuka {
    margin-bottom: 60px !important; /* Jarak diperbesar drastis (sebelumnya 20px/40px) */
}

.simbol-dan-profil { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%; /* (Bisa diubah jadi 100% jika ingin garisnya panjang) */
    
    /* KUNCI PERBAIKAN: Pisahkan dan gunakan !important */
    margin-top: 80px !important; 
    margin-bottom: 80px !important; 
    
    font-family: 'DreamAvenue', cursive; 
    font-size: 3.4rem; 
    color: #2d1761; 
    opacity: 0.8;
}

/* Membuat Garis Panjang Kiri dan Kanan */
.simbol-dan-profil::before,
.simbol-dan-profil::after {
    content: '';
    flex: 1; /* Perintah agar garis otomatis memanjang mengisi sisa ruang kosong */
    height: 5px; /* Ketebalan garis tipis yang elegan */
    background-color: #2d1761; /* Warna garis Navy senada dengan bingkai */
    opacity: 0.4; /* Garis dibuat sedikit transparan agar tidak mengalahkan simbol & */
}

/* Memberikan jarak antara ujung garis dan simbol & di tengah */
.simbol-dan-profil::before {
    margin-right: 25px;
}
.simbol-dan-profil::after {
    margin-left: 25px;
}

/* TOMBOL INSTAGRAM (GRADASI NAVY/BIRU) */
.btn-ig-profil { 
    display: inline-block; 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 0.75rem; 
    padding: 8px 24px; 
    border-radius: 20px; 
    font-weight: bold; 
    position: relative; 
    z-index: 10; 
    border: none; 

    background: linear-gradient(135deg, #4D1A6D 100%, #fe9c0a 100%);
    box-shadow: 0 4px 10px rgba(26, 54, 93, 0.3);
    transition: all 0.3s ease;
}

.btn-ig-profil:hover, .btn-ig-profil:active { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(26, 54, 93, 0.5); 
    background: linear-gradient(135deg, #4D1A6D 100%, #fe9c0a 100%);
}

#profil .profil-susun-container .profil-item:last-child {
    margin-bottom: 20px; 
}
/* =========================================================
   BINGKAI KAPSUL PROFIL (IDENTIK DENGAN HALAMAN HERO)
   ========================================================= */
.profil-frame-wrapper {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 420px;
    margin: 0 auto;
}

.profil-frame-mewah {
    position: relative;
    background: rgba(253, 247, 255, 0.9);
    
    /* Padding atas-bawah dibuat sangat besar (100px) agar teks 
       tidak menabrak lekukan kapsul di ujung atas dan bawah */
    padding: 100px 25px 90px 25px; 
    
    border-radius: 24px; /* Bentuk Kapsul Identik Hero */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 40px rgba(75, 26, 93, 0.3); /* Bayangan lembut */
}



/* Animasi Bingkai Profil Muncul */
.profil-frame-mewah.reveal:not(.active) {
    opacity: 0;
    transform: translateY(60px);
}

.profil-frame-mewah.reveal.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Khusus layar HP yang sangat kecil (opsional) */
@media (max-width: 360px) {
    .judul-profil .getting-married { font-size: 1.6rem; }
    .judul-profil .we-are { font-size: 0.85rem; letter-spacing: 3px; }
}

@media (min-width: 500px) {
    .teks-salam-arab {
        font-size: 2.2rem; 
    }
}

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

/* =========================================================
   HALAMAN COUNTDOWN (CLEAN CELESTIAL - FLOWER TOP)
   ========================================================= */
#countdown-celestial {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px 80px 20px; 
    overflow: hidden;

    /* UBAH: Sudut gradasi diluruskan ke bawah agar nyambung dengan Event */
    background: linear-gradient(to bottom, #32104d 0%, #4D1A6D 40%, #7B1FA2 100%);
    
    /* TRIK RAHASIA: Menarik halaman ini 1 pixel ke atas untuk menutupi celah putih browser */
    margin-top: -1px; 
}

/* =========================================================
   REVISI: PHOTO SLIDER POTRET SEMA (z-index: 1)
   ========================================================= */
.slider-container-celestial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    /* UBAH: Rasio diperbesar dari 45vh menjadi 70vh agar mewah di HP Potret */
    height: 70vh; 
    
    z-index: 1;
    overflow: hidden;
    
    /* MASKING DIPERBAIKI: Foto memudar lebih halus dan lebih panjang ke bawah */
    -webkit-mask-image: linear-gradient(to bottom, 
                        rgba(0,0,0,1) 0%, 
                        rgba(0,0,0,1) 50%, /* Area fokus foto tajam setengah layar */
                        rgba(0,0,0,0) 100%); /* Memudar total di ujung bawah 70vh */
    mask-image: linear-gradient(to bottom, 
                rgba(0,0,0,1) 0%, 
                rgba(0,0,0,1) 50%, 
                rgba(0,0,0,0) 100%);
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    
    /* Animasi 4 detik per slide (Total 12 detik) */
    animation: fadeSliderV2 12s infinite; 
}

/* Animasi untuk 3 foto assets/galeri1.webp, galeri2.webp, galeri6.webp */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

@keyframes fadeSliderV2 {
    0% { opacity: 0; transform: scale(1.1); } 
    /* Opacity disesuaikan agar tidak terlalu pudar di atas violet pekat */
    10% { opacity: 0.8; } 
    33.33% { opacity: 0.8; transform: scale(1); }
    43.33% { opacity: 0; }
    100% { opacity: 0; }
}

/* Masking overlay gradasi tipis di depan foto */
.slider-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, 
                rgba(26, 10, 38, 0.4) 0%, 
                transparent 100%);
    z-index: 2;
}

/* =========================================================
   REVISI: PENYESUAIAN KONTEN COUNTDOWN (Jauh dari Slider)
   ========================================================= */
.countdown-content {
    position: relative;
    z-index: 5; 
    
    /* KUNCI PERBAIKAN: Angka ini didorong lebih jauh ke bawah. 
       Dari 55vh menjadi 68vh agar benar-benar lepas dari foto utama. 
       (Jika masih kurang turun, jadikan 70vh atau 75vh) */
    margin-top: 68vh; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 50px;
}

.ornamen-bunga-atas {
    position: relative;
    width: 165px !important; 
    height: auto !important;
    display: block;
    
    /* UBAH: Hilangkan margin negatif penumpuk. 
       Gunakan margin normal agar bunga duduk manis sebagai jembatan visual */
    margin: 0 auto 30px auto; 
    
    opacity: 1; 
    z-index: 10; 
    pointer-events: none;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3)); 
}


/* --- TIPOGRAFI AREA (Menerapkan DreamAvenue & Playwrite) --- */
.header-area-editorial {
    margin-bottom: 70px;
}

.header-area-editorial .eyebrow-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 6px; 
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7); 
    display: block;
    margin-bottom: 15px;
}

.header-area-editorial .judul-save-date {
    font-family: 'DreamAvenue', serif; /* Font VVIP */
    font-size: 3.2rem; /* Ukuran DreamAvenue disesuaikan */
    color: #ffffff; 
    margin: 0;
    margin-bottom: -30px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}

/* =========================================================
   TIMER BENTUK KALENDER (KOTAK PUTIH & TITIK DUA LUAR)
   ========================================================= */
.timer-kalender-wrapper {
    display: flex;
    justify-content: center;
    align-items: center; /* Memastikan kotak dan titik dua sejajar di tengah */
    gap: 8px; /* Jarak yang pas antar elemen */
    margin-bottom: 60px;
    width: 100%;
}

/* Desain Kotak Kalender Putih */
.kalender-blok {
    background: #ffffff; /* Warna putih bersih yang Anda inginkan */
    width: 70px;
    height: 90px;
    border-radius: 12px; /* Sudut melengkung yang modern */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Bayangan lembut untuk efek melayang di atas gradasi violet */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Angka di dalam Kalender */
.kalender-angka {
    font-family: 'DreamAvenue', serif; 
    font-size: 2.2rem;
    color: #1A0A26; /* Violet sangat pekat (hampir hitam) agar terbaca jelas */
    line-height: 1;
    margin-bottom: 2px;
}

/* Label Teks di bawah angka (Hari, Jam) */
.kalender-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #7B1FA2; /* Violet terang sebagai aksen */
    font-weight: 600;
    
    /* Garis tipis pemisah antara angka dan teks */
    border-top: 1px solid rgba(26, 10, 38, 0.1); 
    width: 70%;
    margin-top: 5px;
    padding-top: 8px;
}

/* Titik Dua di antara kotak */
.pemisah-titik {
    font-family: 'DreamAvenue', serif; 
    font-size: 2.5rem;
    color: #ffffff; /* Warna putih agar menonjol di background violet */
    opacity: 0.7;
    margin-top: -15px; /* Sedikit diangkat agar sejajar dengan posisi angka */
}




/* Tanggal Tulisan Tangan */
.tanggal-tulisan-tangan {
    font-family: 'PlaywriteUSModern', cursive; /* Font Personal */
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 50px;
}

/* =========================================================
   TOMBOL KELAS ATAS (OUTLINE GOLD DENGAN IKON DINAMIS)
   ========================================================= */
.btn-celestial-outline {
    background: transparent;
    color: #ffffff; /* Soft Gold */
    border: 2px solid #ffffff; 
    border-radius: 50px;
    padding: 14px 35px; /* Sedikit disesuaikan untuk menampung ikon */
    
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    
    /* MODIFIKASI: Agar Ikon dan Teks sejajar di tengah */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara ikon dan teks */
}

/* --- GAYA IKON SVG DI DALAM TOMBOL --- */
.icon-btn {
    /* Ukuran ikon proporsional terhadap teks */
    width: 1.1rem !important; 
    height: 1.1rem !important;
    
    display: block; /* Mencegah spasi hantu di bawah ikon */
    
    /* KUNCI: Menghapus transisi pada ikon agar tidak delay saat hover */
    transition: none !important; 
}

/* Catatan: Perhatikan kode HTML SVG di atas. 
   Properti stroke="..." di dalam path SVG sudah disetel ke "currentColor".
   Ini memastikan ikon otomatis mengikuti warna .btn-celestial-outline 
   bahkan saat terjadi hover di bawah ini:
*/

.btn-celestial-outline:hover {
    background: #ffffff;
    
    /* Warna teks berubah jadi Violet pekat */
    color: #4D1A6D !important; 
    
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   BUNGA BAWAH HALAMAN COUNTDOWN (DI BELAKANG TEKS)
   ========================================================= */
.bunga-bawah-countdown {
    position: absolute;
    bottom: -55px; 
    left: 50%;
    transform: translateX(-50%); 
    width: 100%; 
    max-width: 500px; 
    
    /* KUNCI PERBAIKAN: Diturunkan drastis dari 10 menjadi 1 */
    z-index: 1; 
    
    pointer-events: none; 
    
    /* Bayangan lembut untuk efek 3D */
    filter: drop-shadow(0 -5px 15px rgba(0, 0, 0, 0.2)); 
    opacity: 0.3; 
}

/* Penyesuaian ukuran kotak kalender untuk layar HP yang sangat kecil */
@media (max-width: 370px) {
    .timer-kalender-wrapper { gap: 4px; }
    .kalender-blok { width: 62px; height: 82px; }
    .kalender-angka { font-size: 1.8rem; }
    .kalender-label { font-size: 0.55rem; letter-spacing: 1px; }
    .pemisah-titik { font-size: 2rem; margin-top: -12px; }
}

/* =========================================================
   HALAMAN EVENT (VVIP VIOLET & GOLD CAPSULE)
   ========================================================= */
.event-bg-celestial {
    /* Meneruskan gradasi violet dari halaman countdown agar menyatu */
   background: linear-gradient(to bottom, #7B1FA2 0%, #4D1A6D 60%, #32104d 100%);
    
    padding: 100px 15px 120px 15px; 
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}

.event-wrapper {
    display: flex;
    flex-direction: column;
    gap: 70px; /* Jarak antar kapsul sedikit direnggangkan agar elegan */
    width: 92%; 
    max-width: 420px; 
    margin: 0 auto; 
}

/* --- HEADER EVENT --- */
.event-header {
    text-align: center;
    padding: 0 10px;
}

.event-main-title {
    font-family: 'DreamAvenue', serif; /* Menggunakan font utama kita */
    font-size: 3rem;
    color: #F8E7CD; /* Soft Gold */
    margin-bottom: 15px;
    font-weight: normal;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.event-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #ffffff; 
    line-height: 1.8;
    opacity: 0.9; 
    max-width: 320px; 
    margin: 0 auto; 
}

/* --- KOTAK KAPSUL EVENT (CLEAN WHITE) --- */
.event-kapsul {
    position: relative;
    background-color: #fdf5ff; /* Putih bersih kontras dengan violet */
    
    /* Outline tipis emas di bagian dalam kapsul */
    box-shadow: inset 0 0 0 2px rgba(248, 231, 205, 0.5), 
                0 20px 40px rgba(0, 0, 0, 0.3);
                
    border-radius: 200px; /* Bentuk kapsul yang sangat melengkung */
    padding: 60px 20px 140px 20px; /* Ruang bawah ekstra untuk bunga */
    text-align: center;
    overflow: hidden; 
}

/* --- BUNGA BAWAH --- */
.event-bunga-bawah {
    position: absolute;
    bottom: -10px; 
    left: 50%;
    transform: translateX(-50%);
    width: 110%; /* Diperbesar agar rimbun */
    z-index: 1; 
    pointer-events: none;
}

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

.event-bucket {
    width: 130px; 
    margin-bottom: 20px; 
}

.event-title {
    font-family: 'StyleFormal', serif; 
    font-size: 3.2rem;
    font-weight: normal;
    margin-bottom: 10px;
    color: #1A0A26; /* Violet pekat */
}

.event-date {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #4D1A6D;
    letter-spacing: 1px;
}

/* BLOK WAKTU LENCANA GOLD */
.event-time {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    margin-bottom: 25px;
    
    background-color: #F8E7CD; /* Soft Gold */
    color: #1A0A26; /* Violet Pekat */
    padding: 8px 24px;
    border-radius: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(248, 231, 205, 0.4);
}

/* --- IKON & GARIS STRIP --- */
.event-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
    color: #4D1A6D; /* Warna garis & ikon violet */
}

.event-divider .garis {
    height: 1px;
    width: 40px;
    background-color: currentColor; 
    opacity: 0.4;
}

/* =========================================
   TAMBAHKAN KODE INI UNTUK MEMPERBESAR IKON
   ========================================= */
.event-divider svg {
    /* Paksa ukuran ikon membesar dari bawaannya yang cuma 20px */
    width: 45px !important; 
    height: 45px !important;
    
    /* Sedikit dipertipis garis ikonnya agar tetap elegan meski besar */
    stroke-width: 1.5; 
}

/* Opsional: Memperbesar sedikit ikon di tombol Maps agar seimbang */
.btn-maps-premium svg {
    width: 18px !important;
    height: 18px !important;
}

.event-place {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #1A0A26;
}

.event-address {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #666; 
    max-width: 250px;
}

/* --- TOMBOL MAPS PREMIUM --- */
.btn-maps-premium {
    background: linear-gradient(135deg, #4D1A6D 100%, #fe9c0a 100%);
    color: #ffffff; /* Teks Gold */
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(77, 26, 109, 0.3);
}

.btn-maps-premium:hover {
    background: #1A0A26; /* Violet lebih gelap saat disentuh */
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(26, 10, 38, 0.4);
}

/* =========================================================
   REVISI: HALAMAN LOVE STORY (BACKGROUND KOTAK FIXED)
   ========================================================= */
.story-bg-celestial {
    /* MENGGUNAKAN GAMBAR BACKGROUND DARI ASSETS */
    background-image: url('assets/bg_kotak.webp');
    
    /* KUNCI: Membuat background diam dan tidak ikut ter-scroll (Efek Parallax) */
    background-attachment: fixed; 
    
    background-size: cover; /* Memastikan gambar menutupi seluruh layar */
    background-position: center; /* Memusatkan gambar */
    background-repeat: no-repeat; /* Mencegah gambar berulang jika ukurannya kecil */
    
    padding: 100px 20px 120px 20px; 
    position: relative;
    overflow: hidden;
}

/* --- PENYESUAIAN WARNA TEKS HEADER STORY --- */
/* (Warna diubah menjadi Violet karena background sekarang terang) */

.story-header {
    text-align: center;
    margin-bottom: 50px;
}

.eyebrow-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    
    /* Ubah ke ungu medium agar kontras di atas bg_kotak */
    color: #4D1A6D; 
    
    text-transform: uppercase;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.story-main-title {
    font-family: 'DreamAvenue', serif;
    font-size: 3rem;
    
    /* Ubah ke ungu pekat agar terbaca sangat jelas */
    color: #1A0A26; 
    
    font-weight: normal;
    /* Memberikan sedikit cahaya putih di belakang teks agar makin tajam */
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8); 
}

/* --- TIMELINE CONTAINER --- */
.timeline-container {
    position: relative;
    padding-left: 20px; /* Memberi ruang untuk garis dan titik di kiri */
}

/* Garis Lurus Emas */
.timeline-line {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 20px;
    width: 2px;
    background: rgba(248, 231, 205, 0.3); /* Emas transparan */
    border-radius: 5px;
}

/* --- ITEM CERITA --- */
.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 35px; /* Jarak dari garis ke kartu konten */
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Titik Ikon Bulat */
.timeline-dot {
    position: absolute;
    left: -13px; /* Menggeser titik tepat ke tengah garis */
    top: 0;
    width: 30px;
    height: 30px;
    background: #4D1A6D; /* Latar Violet */
    color: #F8E7CD; /* Ikon Gold */
    border: 3px solid #F8E7CD; /* Cincin luar emas */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 0 15px rgba(248, 231, 205, 0.4);
}

/* --- KARTU KONTEN CERITA (DENGAN STROKE VIOLET) --- */
.timeline-content {
    background: #ffffff;
    border-radius: 20px; 
    padding: 25px 20px;
    
    /* TAMBAHAN: Garis tepi (stroke) Violet yang tegas namun elegan */
    border: 2px solid #4D1A6D; 
    
    /* Bayangan diubah menjadi bernuansa violet tipis agar serasi */
    box-shadow: 0 10px 25px rgba(77, 26, 109, 0.15); 
    position: relative;
}

/* Trik Desainer: Membuat segitiga panah dengan garis tepi */

/* 1. Segitiga penunjuk (Garis luar / Stroke Violet) */
.timeline-content::before {
    content: '';
    position: absolute;
    top: 15px; 
    left: -11px; /* Posisi didorong keluar */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #4D1A6D; /* Warna garis violet */
}

/* 2. Segitiga penunjuk (Isi dalam / Warna Putih) */
.timeline-content::after {
    content: '';
    position: absolute;
    top: 17px; /* Disesuaikan ukurannya agar pas di dalam stroke */
    left: -8px; 
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff; /* Warna putih sama dengan kartu */
}

.story-date {
    display: inline-block;
    background: #F8E7CD; /* Badge Gold */
    color: #1A0A26; /* Teks Violet Pekat */
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.story-title {
    font-family: 'DreamAvenue', serif;
    font-size: 1.5rem;
    color: #1A0A26;
    margin-bottom: 10px;
    font-weight: normal;
}

.story-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #555555; /* Abu-abu gelap agar nyaman dibaca di layar putih */
    line-height: 1.6;
}

/* =========================================================
   HALAMAN GALLERY (MASONRY GRID & LIGHTBOX INTERAKTIF)
   ========================================================= */
.gallery-bg-celestial {
    /* Gradasi Violet mengalir ke bawah */
    background: linear-gradient(to bottom, #1A0A26 0%, #4D1A6D 50%, #7B1FA2 100%);
    padding: 100px 15px 120px 15px;
    position: relative;
    overflow: hidden;
}

.gallery-wrapper {
    width: 100%;
    max-width: 420px; /* Sesuai standar lebar layar HP */
    margin: 0 auto;
}

/* --- HEADER GALLERY --- */
.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-main-title {
    font-family: 'DreamAvenue', serif; 
    font-size: 3rem;
    color: #ffffff;
    font-weight: normal;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* --- Grid Foto 2 Kolom --- */
.vintage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Otomatis membagi 2 kolom di HP */
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

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

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

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

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

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

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

/* =========================================================
   STYLE HALAMAN GIFT (PREMIUM DESIGN: ATM & KADO)
   ========================================================= */
.bg-gift {
    background-image: url('assets/bg_kotak.webp'); 
    background-size: cover !important; 
    background-repeat: no-repeat !important; 
    background-position: top center !important; 
    background-attachment: fixed !important;
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    position: relative; 
    overflow: hidden; 
    padding: 60px 20px;
}

.header-gift {
    text-align: center;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.title-gift {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.7rem;
    color: #ffffff;
    margin-bottom: 30px; 
    margin-top: 20px;
}

.subtitle-gift {
    font-family: 'Poppins', serif;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 290px;
    margin: 0 auto;
}

.gift-cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 10;
}

.gift-item-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    /* UBAH BARIS INI: 
       Sebelumnya 20px atau 25px, naikkan menjadi 40px atau 50px */
    margin-bottom: 40px; 
}

/* -------------------------------------------
   A. DESAIN KARTU ATM MEWAH (BCA & E-WALLET)
   ------------------------------------------- */
.atm-card-design {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1.586 / 1;
    /* Gradasi Orange ke Putih */
    background: linear-gradient(135deg, #a257d7 0%, #c75a20 100%);
    border: 1px solid rgba(215, 132, 87, 0.3); /* Warna border disesuaikan */
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* Shadow diperhalus (Soft Shadow) */
    position: relative;
    overflow: hidden;
}

.atm-card-design::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    /* Efek pantulan cahaya diubah putih agar cocok dengan tema terang */
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8) 0%, transparent 40%, transparent 100%);
    transform: rotate(30deg);
    pointer-events: none;
}

.atm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2; 
}

.atm-chip {
    width: 42px;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

.atm-bank-name {
    font-family: 'Poppins', serif;
    color: #ffffff; /* Hitam elegan/Abu gelap */
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: none; /* Shadow dihapus agar terlihat profesional & bersih */
    text-transform: uppercase;
}

.atm-body {
    text-align: left;
    z-index: 2;
}

.atm-number {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    color: #ffffff; /* Hitam pekat untuk nomor rekening */
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: none;
    margin-top: 10px;
}

.atm-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 2;
}

.atm-holder {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.atm-label {
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    color: #ffffff; /* Abu-abu netral untuk label */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 3px;
}

.atm-name {
    font-family: 'Poppins', serif;
    font-size: 1.1rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-shadow: none;
}

.btn-copy-inside {
    background: #ffffff; /* Tombol Marun/Orange Gelap sebagai kontras utama */
    border: none;
    color: #000000; /* Teks tombol putih */
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(186, 75, 46, 0.3);
}

.btn-copy-inside svg { width: 14px; height: 14px; }

.btn-copy-inside:hover { 
    background: #2d2d2d; /* Tombol berubah jadi gelap elegan saat ditekan */
    color: #ffffff; 
    transform: scale(1.05); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------
   B. DESAIN KARTU KADO FISIK (GLASSMORPHISM)
   ------------------------------------------- */
.gift-card-premium {
    border-radius: 16px;
    padding: 30px 20px;
    width: 100%;
    max-width: 350px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Gradasi disamakan dengan desain ATM */
    background: linear-gradient(135deg, #a257d7 0%, #c75a20  100%);
    border: 1px solid rgba(215, 132, 87, 0.3);
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.gift-card-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

/* Memastikan nama "Kirim Kado Fisik" yang ada di HTML ikut berubah warna */
.bank-name {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    font-weight: 700;
}

.gift-icon-wrapper svg {
    width: 40px; height: 40px;
    stroke: #ffffff; /* Ikon kado berubah jadi warna tema */
    margin-bottom: 15px;
    opacity: 1;
}

.rek-name {
    margin-bottom: 8px; 
    font-family: 'Poppins', sans-serif; 
    color: #ffffff; /* Teks gelap */
    font-size: 1rem; 
    font-weight: bold;
}

.alamat-kado {
    font-size: 0.95rem; 
    line-height: 1.5; 
    color: #ffffff; /* Abu-abu agar beda hierarki dengan nama penerima */
    margin-bottom: 20px;
}

.btn-copy-premium {
    background-color: #ffffff; /* Solid background untuk tombol utama */
    color: #000000;
    border: none;
    padding: 10px 28px;
    font-size: 0.85rem;
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 5px 15px rgba(186, 75, 46, 0.3);
}

.btn-copy-premium:hover, .btn-copy-premium:active { 
    background-color: #2d2d2d; 
    color: #ffffff; 
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------
   C. TOMBOL WHATSAPP CONFIRM
   ------------------------------------------- */
.wa-confirm-wrapper {
    margin-top: 20px;
    text-align: center;
    z-index: 10;
}

.wa-text {
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 15px;
    font-style: italic;
    opacity: 0.9;
}

.btn-wa-premium {
    background-color: #3d9327;
    color: #ffffff; 
    border: none;
    padding: 8px 24px;
    font-size: 0.9rem;
    border-radius: 20px;
    font-family: 'Poppins', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(82, 12, 35, 0.2);
}

.btn-wa-premium:hover, .btn-wa-premium:active {
    background-color: #753008;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(176, 13, 65, 0.4);
}

/* =========================================================
   STYLE KOTAK KESATUAN (SINGLE BOX GIFT) - REVISI
   ========================================================= */

/* Desain Kotak Utama: Putih, Sedikit Transparan, Tanpa Blur */
.gift-single-box {
    /* 1. Warna Putih dengan Transparansi tinggi (0.9 = 90% padat) */
    background-color: rgba(252, 243, 255, 0.9) !important; 
    
    /* 2. Stroke Orange Tema (#a257d7) dibuat sedikit lebih tebal agar tegas */
    border: 3px solid #a657d7 !important;
    
    /* 3. Pastikan Efek Blur Dimatikan Total */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* 4. Pengaturan Teks Utama menjadi Hitam */
    color: #000000 !important;

    /* Styling dasar lainnya (pertahankan) */
    border-radius: 20px;
    padding: 35px 20px 40px 20px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;

    /* Bayangan disesuaikan agar cocok dengan kotak putih (lebih halus) */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   PENYESUAIAN WARNA TEKS INTERNAL (AGAR HITAM)
   ========================================================= */

/* Memaksa Judul, Subtitle, dan Teks WA menjadi Hitam Peat */
.gift-single-box .title-gift,
.gift-single-box .subtitle-gift,
.gift-single-box .wa-text {
    color: #000000 !important;
    text-shadow: none !important; /* Hapus bayangan teks jika ada */
}

/* Menyesuaikan warna Ornamen Divider agar kontras di atas putih (jadi Orange) */
.gift-single-box .ornament-divider path {
    fill: #a257d7 !important;
    stroke: #a257d7 !important;
}
/* Matikan efek pemutih (filter invert) khusus di dalam kotak putih */
.gift-single-box .ornament-divider {
    filter: none !important; 
}

/* Pastikan warna fill dan stroke berubah menjadi Oranye/Terakota */
.gift-single-box .ornament-divider path {
    fill: #a257d7 !important;
    stroke: #a257d7 !important;
}

/* --- Penyesuaian Kotak ATM/E-wallet --- */
/* Kita buat detail teks di dalam kartu ATM jadi hitam agar serasi */
.gift-single-box .atm-bank-name,
.gift-single-box .atm-number,
.gift-single-box .atm-name {
    color: #ffffff !important;
    text-shadow: none !important;
}

.gift-single-box .atm-label {
    color: #ffffff !important; /* Abu-abu gelap untuk label Card Holder */
}

/* --- Penyesuaian Kado Fisik --- */
/* Mengubah judul "Kirim Kado Fisik" dan Ikon menjadi Marun Tema agar bervariasi */
.gift-single-box .bank-name {
    color: #ffffff !important; 
    border-bottom-color: rgba(0,0,0,0.1) !important;
}

.gift-single-box .gift-icon-wrapper svg {
    stroke: #ffffff !important;
}

/* Tombol Klik Disini / Sembunyikan */
.btn-toggle-gift {
    background-color: #802eba; /* Marun/Terakota */
    color: #ffffff;
    border: 1px solid rgba(239, 190, 255, 0.4);
    padding: 12px 30px;
    border-radius: 30px;
    font-family: 'Poppins', serif;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(179, 46, 186, 0.4);
}

.btn-toggle-gift svg {
    width: 18px;
    height: 18px;
}

.btn-toggle-gift:hover {
    background-color: #e4beff;
    color: #260430;
    border-color: #efbeff;
    transform: translateY(-3px);
}

/* Wadah Data ATM dkk yang tersembunyi */
.hidden-gifts-container {
    display: none; /* Sembunyi dari awal */
    flex-direction: column;
    margin-top: 35px;
    width: 100%;
}

/* Kelas saat tombol diklik (Memunculkan data) */
.hidden-gifts-container.show {
    display: flex;
    /* Efek fade turun halus saat dibongkar */
    animation: dropdownReveal 0.6s ease-out forwards;
}

@keyframes dropdownReveal {
    0% { opacity: 0; transform: translateY(-15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   STYLE TOMBOL LIVE STREAMING (IG & YOUTUBE)
   ========================================================= */

.btn-live-ig, .btn-live-yt {
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 30px;
    font-family: 'Poppins', serif;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 250px;
    transition: all 0.3s ease;
    border: none;
}

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

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

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

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


/* =========================================================
   HALAMAN RSVP & WISHES (CELESTIAL PREMIUM THEME)
   ========================================================= */
.rsvp-bg-celestial {
    /* Gradasi gelap Violet ke Hitam Elegan */
    background: linear-gradient(to bottom, #32104d 0%, #1A0A26 50%, #0d0414 100%);
    padding: 100px 20px 120px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.rsvp-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('assets/bg_kotak.webp');
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.15; /* Tekstur halus di belakang */
    z-index: 1;
    pointer-events: none;
}

.rsvp-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 420px; /* Ukuran pas untuk mobile layout */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.rsvp-bunga-atas {
    width: 130px;
    margin-bottom: -10px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}

.rsvp-main-title {
    font-family: 'DreamAvenue', serif;
    font-size: 3rem;
    color: #F8E7CD; /* Soft Gold */
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* --- KARTU FORM (GLASS/WHITE CAPSULE) --- */
.rsvp-card-premium {
    background: rgba(253, 247, 255, 0.95); /* Putih sedikit transparan */
    border: 2px solid #a657d7; /* Garis tepi violet terang/magenta */
    border-radius: 24px;
    padding: 35px 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

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

/* Kustomisasi Kolom Input */
.form-input {
    width: 100%;
    padding: 16px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #1A0A26;
    background-color: #f6f0fa;
    border: 1px solid rgba(166, 87, 215, 0.3);
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: #4D1A6D;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(166, 87, 215, 0.15);
}

.form-input::placeholder {
    color: #888;
}

/* Kustomisasi Dropdown Select agar panahnya rapi */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234D1A6D%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 18px top 50%;
    background-size: 12px auto;
    cursor: pointer;
}

/* Tombol Kirim */
.btn-rsvp-submit {
    background: linear-gradient(135deg, #4D1A6D 100%, #fe9c0a 100%);
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(77, 26, 109, 0.4);
}

.btn-rsvp-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(77, 26, 109, 0.6);
}

.btn-rsvp-submit:disabled {
    background: #888;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- KOTAK DAFTAR UCAPAN (WISHES CONTAINER) --- */
.rsvp-wishes-container {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 30px 20px;
    border: 1px solid rgba(248, 231, 205, 0.15); /* Outline emas sangat tipis */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wishes-header {
    text-align: center;
    margin-bottom: 25px;
}

.wishes-header h3 {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.95rem;
    color: #F8E7CD;
    margin-bottom: 10px;
    font-weight: normal;
}

.garis-emas-tipis {
    width: 60px;
    height: 2px;
    background: #F8E7CD;
    margin: 0 auto;
    border-radius: 2px;
    opacity: 0.5;
}

.wish-messages-premium {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 10px; /* Jarak scrollbar */
}

/* Styling Scrollbar Khusus Area Ucapan */
.wish-messages-premium::-webkit-scrollbar { width: 5px; }
.wish-messages-premium::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.wish-messages-premium::-webkit-scrollbar-thumb { background: rgba(248, 231, 205, 0.4); border-radius: 10px; }

/* =========================================================
   OVERRIDE (DESAIN ULANG) KARTU UCAPAN DARI JAVASCRIPT
   ========================================================= */
#wishContainer .wish-card {
    background: #ffffff;
    border-left: 5px solid #a657d7; /* Aksen tepi warna Magenta/Violet */
    padding: 16px 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    /* Menghapus border-left tebal hitam bawaan lama */
    border-top: none; border-right: none; border-bottom: none;
}

#wishContainer .wish-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    padding-bottom: 8px;
}

#wishContainer .wish-info strong {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #1A0A26;
    font-weight: 700;
}

#wishContainer .badge {
    background: #f6f0fa;
    color: #4D1A6D;
    font-size: 0.65rem;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(77, 26, 109, 0.2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#wishContainer .wish-card p {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.85rem;
    color: #444;
    margin: 10px 0;
    line-height: 1.7;
}

#wishContainer .wish-card small {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: #999;
    font-family: 'Poppins', sans-serif;
    margin-top: 5px;
}

/* =========================================================
   TOMBOL MUSIK KOMBINASI PUTIH & UNGU (CELESTIAL THEME)
   ========================================================= */
#music-toggle { 
    position: fixed; 
    bottom: 25px; 
    right: 25px; 
    z-index: 9999; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    
    /* ─── KONDISI DIAM (PAUSED) ─── */
    /* Latar belakang putih bersih, border & ikon berwarna ungu */
    background-color: #ffffff !important; 
    border: 2px solid #4D1A6D !important; 
    color: #4D1A6D !important; /* Warna ikon otomatis menjadi ungu pekat */
    
    display: none; /* Muncul via JS saat undangan dibuka */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(77, 26, 109, 0.15);
    transition: transform 0.2s ease-in-out, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#music-toggle svg.icon-music {
    display: block;
    flex-shrink: 0;
    width: 22px !important;
    height: 22px !important;
}

#music-toggle:hover {
    transform: scale(1.08);
}

/* ─── KONDISI BERPUTAR (PLAYING) ─── */
/* Warna ditukar: latar menjadi ungu pekat, border ungu terang, dan ikon putih bersih */
#music-toggle.playing {
    animation: putarMusik 4s linear infinite;
    
    background-color: #4D1A6D !important; 
    border-color: #a657d7 !important; 
    color: #ffffff !important; /* Warna ikon otomatis berganti menjadi putih bersih */
    
    /* Efek pendaran (glow) ungu cerah di sekeliling tombol agar terlihat hidup */
    box-shadow: 0 0 20px rgba(166, 87, 215, 0.6), 0 8px 20px rgba(77, 26, 109, 0.3);
}

/* Animasi Putaran Piringan */
@keyframes putarMusik {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Penyesuaian Posisi Desktop Mode (Mockup HP Tengah) */
@media (min-width: 768px) {
    #music-toggle {
        right: auto;
        left: 50%;
        margin-left: 140px;
    }
}

/* =========================================================
   HALAMAN PENUTUP (MATCHING WITH COVER PAGE DESIGN)
   ========================================================= */
.penutup-bg-cover {
    position: relative;
    min-height: 100vh;
    width: 100%;
    
    background-image: url('assets/galeri1.webp'); 
    background-size: cover;
    background-position: center;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    
    /* --- UBAH DUA BARIS INI UNTUK MENURUNKAN TEKS --- */
    justify-content: flex-end; /* Memaksa seluruh blok konten turun ke bawah layar */
    padding: 20px 20px 15vh 20px; /* 15vh adalah jarak dari bawah. Semakin besar angkanya, semakin naik teksnya. Semakin kecil (misal 5vh), semakin mepet ke bawah */
}

.penutup-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Gradasi gelap dari atas ke bawah untuk mengunci fokus pandangan mata */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
}

.penutup-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Sub-judul atas menggunakan font personal khas cover */
.penutup-title-small {
    font-family: 'PlaywriteUSModern', sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Desain Nama Mempelai disamakan dengan tipografi tipis mewah di Cover */
#penutup h1 {
    font-family: 'StyleFormal', serif;
    font-size: clamp(2.3rem, 8.5vw, 3.5rem) !important;
    font-weight: 300 !important; 
    color: #ffffff !important;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: capitalize;
    margin: 10px 0 !important;
}

/* Teks Ucapan Terima Kasih */
.penutup-teks {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    line-height: 1.8;
    color: #eeeeee;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    margin-top: 15px;
    font-weight: 300;
}

/* Watermark Brand info */
.penutup-watermark {
    margin-top: 50px;
}

.penutup-watermark small {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: 'Poppins', sans-serif;
}

.penutup-watermark a {
    color: #F8E7CD !important; /* Sentuhan warna emas mewah */
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.penutup-watermark a:hover {
    opacity: 0.8;
}

/* Menyesuaikan kerapian visual di mode desktop tablet PC */
@media (min-width: 768px) {
    .penutup-bg-cover {
        max-width: 414px;
        margin: 0 auto;
    }
}

/* =========================================================
   PERBAIKAN SMART REVEAL (ANIMASI 2 ARAH)
   ========================================================= */

/* 1. KONDISI DEFAULT (Saat disembunyikan/Scroll ke atas) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    /* Transisi MUNDUR: Dibuat sedikit lebih cepat agar layar tidak terasa berat */
    transition: opacity 0.4s ease-out, transform 0.5s ease-out !important;
    will-change: opacity, transform;
}

/* 2. KONDISI AKTIF (Saat muncul/Scroll ke bawah) */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
    /* Transisi MAJU: Dibuat lebih lambat dengan efek pengereman elastis */
    transition: opacity 0.8s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* --- PERBAIKAN ANIMASI AYAT (Ubah dari Keyframes ke Transition) --- */
.ayat-card {
    opacity: 0;
    transform: scale(0.85);
    /* Transisi mundur untuk kotak ayat */
    transition: opacity 0.4s ease-out, transform 0.5s ease-out; 
}

.ayat-section.is-visible .ayat-card {
    opacity: 1;
    transform: scale(1);
    animation: none !important; /* Mematikan keyframes lama */
    transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.ayat-kutipan, .ayat-sumber {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Mundur lebih cepat */
}

.ayat-section.is-visible .ayat-kutipan {
    opacity: 1;
    transform: translateY(0);
    animation: none !important;
    transition: opacity 1s ease-out 0.4s, transform 1s ease-out 0.4s; /* Delay 0.4s */
}

.ayat-section.is-visible .ayat-sumber {
    opacity: 1;
    transform: translateY(0);
    animation: none !important;
    transition: opacity 1s ease-out 0.7s, transform 1s ease-out 0.7s; /* Delay 0.7s */
}

/* --- PERBAIKAN ANIMASI GALLERY (Efek Zoom-in Mulus) --- */
.vintage-photo {
    opacity: 0;
    transform: scale(0.85) !important; /* Timpa rotasi sementara saat sembunyi */
    transition: opacity 0.4s ease-out, transform 0.5s ease-out;
}

/* Mengembalikan rotasi miring vintage saat gambar muncul */
.vintage-photo.active:nth-child(odd) {
    opacity: 1;
    transform: scale(1) rotate(-3deg) !important;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.vintage-photo.active:nth-child(even) {
    opacity: 1;
    transform: scale(1) rotate(4deg) !important;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================================
   ANIMASI INDEPENDEN (STAGGER / MUNCUL BERUNTUN)
   ========================================================= */

/* Foto (Tanpa delay, langsung muncul pertama) */
/* delay-1: Nama Panggilan */
.reveal.active.delay-1 { 
    transition: opacity 0.8s ease-out 0.2s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s !important; 
}

/* delay-2: Nama Lengkap */
.reveal.active.delay-2 { 
    transition: opacity 0.8s ease-out 0.4s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s !important; 
}

/* delay-3: Status Anak / Nama Orang Tua */
.reveal.active.delay-3 { 
    transition: opacity 0.8s ease-out 0.6s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s !important; 
}

/* delay-4: Tombol Instagram */
.reveal.active.delay-4 { 
    transition: opacity 0.8s ease-out 0.8s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s !important; 
}

/* =========================================================
   VARIASI ARAH ANIMASI SMART REVEAL (MODIFIERS)
   ========================================================= */

/* 1. Animasi Turun dari Atas */
.reveal.anim-top {
    transform: translateY(-50px) !important;
}

/* 2. Animasi Masuk dari Kiri */
.reveal.anim-left {
    transform: translateX(-50px) !important;
}

/* 3. Animasi Membesar (Zoom In) */
.reveal.anim-zoom {
    transform: scale(0.8) !important;
}

/* MEMASTIKAN SEMUA ELEMEN KEMBALI KE POSISI SEMPURNA SAAT AKTIF */
.reveal.active {
    opacity: 1;
    /* Reset semua sumbu (X, Y) dan Skala menjadi normal secara otomatis */
    transform: translate(0, 0) scale(1) !important; 
}

/* =========================================================
   EKSTENSI VARIASI ARAH & DELAY (HALAMAN EVENT)
   ========================================================= */

/* Animasi Masuk dari Kanan */
.reveal.anim-right {
    transform: translateX(50px) !important;
}

/* Ekstensi Stagger Delay 5 hingga 8 (Penambahan masing-masing 0.2 detik) */

/* delay-5: Garis & Ikon */
.reveal.active.delay-5 { 
    transition: opacity 0.8s ease-out 1.0s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.0s !important; 
}

/* delay-6: Nama Tempat */
.reveal.active.delay-6 { 
    transition: opacity 0.8s ease-out 1.0s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.0s !important; 
}

/* delay-7: Alamat Lengkap */
.reveal.active.delay-7 { 
    transition: opacity 0.8s ease-out 1.0s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.0s !important; 
}

/* delay-8: Tombol Buka Maps */
.reveal.active.delay-8 { 
    transition: opacity 0.8s ease-out 1.0s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.0s !important; 
}

/* FIX: Memaksa elemen animasi dari kanan untuk kembali ke tengah secara presisi */
.reveal.anim-right.active {
    transform: translate(0, 0) scale(1) !important;
}

/* =========================================================
   LIGHTBOX GALLERY (INTERAKTIF FULLSCREEN)
   ========================================================= */

/* Latar belakang gelap transparan & blur */
.lightbox-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(10, 5, 20, 0.95); /* Mengikuti tema gelap/violet pekat */
    z-index: 999999; /* Pastikan menutupi seluruh elemen, termasuk tombol musik */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Animasi menghilang (default) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Saat Lightbox dipanggil JS */
.lightbox-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Animasi gambar muncul (Zoom in lembut) */
.lightbox-overlay img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
    
    /* Persiapan Zoom */
    transform: scale(0.7);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Saat muncul, gambar menjadi ukuran normal */
.lightbox-overlay.show img {
    transform: scale(1);
}

/* --- Desain Tombol X (Close) Menggunakan Teks --- */
.btn-close-lightbox {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(0, 0, 0, 0.4) !important; /* Background hitam transparan halus agar X tetap terlihat jika foto putih */
    color: #ffffff !important; /* Teks X Putih Solid */
    border: 2px solid #ffffff; 
    border-radius: 50%;
    width: 45px;
    height: 45px;
    
    /* Mengatur teks X berada tepat di tengah-tengah lingkaran */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Pengaturan Tipografi Huruf X */
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem; /* Ukuran huruf X yang pas */
    font-weight: bold; /* Membuat huruf X tebal dan solid */
    line-height: 1;
    padding: 0; /* Meriset padding agar tidak menggeser posisi huruf */
    
    cursor: pointer;
    z-index: 1000000;
    transition: all 0.3s ease;
}

/* Efek Hover (Saat Disentuh) */
.btn-close-lightbox:hover {
    background: #ffffff !important; /* Lingkaran berubah jadi putih penuh */
    color: #4D1A6D !important; /* Huruf X berubah jadi ungu pekat tema */
    border-color: #ffffff; 
    transform: scale(1.1); /* Sedikit membesar agar interaktif */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* =========================================================
   ANIMASI RIAK AIR OTONOM (LEBIH HALUS & TRANSPARAN)
   ========================================================= */

.vintage-photo {
    position: relative;
    overflow: hidden; 
}

.vintage-photo::before,
.vintage-photo::after {
    content: '';
    position: absolute;
    top: 40%; 
    left: 50%;
    width: 60px; 
    height: 60px;
    
    /* 1. PERUBAHAN: Garis ditipiskan jadi 1.5px dan warna putihnya dibuat 30% saja (0.3) */
    border: 2px solid rgba(255, 255, 255, 0.7); 
    
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none; 
    z-index: 10;
}

.vintage-photo::before {
    animation: riakOtomatis 3s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.vintage-photo::after {
    animation: riakOtomatis 3s infinite cubic-bezier(0.25, 1, 0.5, 1) 1.5s;
}

@keyframes riakOtomatis {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        
        /* 2. PERUBAHAN: Saat mulai memancar, transparansinya sangat tipis (0.4) */
        opacity: 0.4; 
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5); 
        opacity: 0; 
    }
}

.vintage-photo:hover::before,
.vintage-photo:hover::after {
    opacity: 0;
    transition: opacity 0.3s;
}