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

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

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

/* --- TEMA BIRU AWAN GLOBAL --- */
.text-blue {
    color: #653d26 !important;
}

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

.nama-mempelai {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    color: #653d26;
    margin: 10px 0;
    line-height: 4;
    font-weight: normal;
}

/* =========================================================
   HALAMAN 1 (COVER PAGE) - DESAIN EDITORIAL & MONOGRAM
   ========================================================= */
#cover-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%; /* Lebih aman untuk browser HP */
    background-color: #dcf0fa; /* Pelapis warna solid agar hero tidak ngintip dari area transparan */
    background-image: url('assets/bg_cover1.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 9999;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    overflow: hidden; 
}

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

#cover-page .cover-content {
    text-align: center; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    position: relative;
    z-index: 10; 
}

/* "The Wedding Of" - Gaya Serif Klasik & Navy */
#cover-page .title-small { 
    margin-top: 0 !important; 
    margin-bottom: 80px !important; /* Jarak dirapikan */
    text-align: center;
    letter-spacing: 5px; 
    text-transform: uppercase; 
    font-size: 1rem; 
    font-family: 'Cormorant Garamond', serif; 
    font-weight: 500; 
    color: #653d26 !important; /* Navy Gelap */
    text-shadow: 0 2px 15px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.5) !important;
}

/* Desain Inisial Raksasa (Monogram S & G) */
#cover-page .nama-mempelai {
   margin: 10px 0 20px 0;
    margin-bottom: 25px;
    font-size: 4rem;
    
    
    /* Mengubah susunan menjadi tumpukan vertikal */
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    
    /* Jarak atas-bawah antara nama dan simbol & */
    gap: 0px; 
    
    /* Merapatkan jarak bawaan font agar tumpukannya padat */
    line-height: 0.9; 
}

#cover-page .nama-mempelai br {
    display: none;
}

/* Simbol & di antara inisial */
.simbol-dan-monogram {
     /* Ukuran simbol disesuaikan untuk layout vertikal */
    font-size: 0.5em; 
    
    /* Memberi sedikit ruang napas di atas dan bawah simbol */
    margin: 20px 0; 
    
    color: #653d26 ;
    /* Reset transform yang sebelumnya dipakai di layout horizontal */
    transform: none; 
}

/* Area Kepada Yth & Nama Tamu */
#cover-page .tamu-section {
    margin-top: 20px; 
    background: transparent; 
    padding: 20px;
    width: 90%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    z-index: 20; 
    text-align: center;
}

#cover-page .tamu-section p {
    font-family: 'Cormorant Garamond', serif; 
     font-size: 1.2rem !important;
    color: #653d26 !important; 
    font-weight: 500 !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 10px !important; /* <-- Tambahan jarak di bawah tulisan 'Kepada Yth:' */
}

#cover-page .nama-tamu {
    color: #653d26 !important;
    font-size: 1.2rem !important; /* Sedikit dibesarkan agar proporsional dengan jarak baru */
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 15px rgba(255, 255, 255, 1) !important;
  margin-bottom: 8px !important; /* <-- Jarak didekatkan ke teks pengantar */
}

/* Tombol Buka Undangan (Frosted Glass) */
#btn-buka {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 25px auto !important;
    background: #653d26 !important; 
    color: #ffffff!important; 
    border: 1px solid rgba(255, 255, 255, 0.6) !important; 
    padding: 12px 30px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important; 
    backdrop-filter: blur(8px) !important; 
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* --- TAMBAHAN UNTUK FIX SHADOW GLITCH --- */
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.2) !important; /* Shadow dasar */
    transform: translateZ(0); /* Paksa render GPU agar shadow menempel */
    
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease !important;
}

#btn-buka:hover {
    background: #653d26 !important; 
    color: #653d26 !important; 
    border: 1px solid #653d26 !important;
    transform: translateY(-4px) scale(1.05) !important; 
    box-shadow: 0 12px 30px rgba(26, 54, 93, 0.4) !important; 
    animation-play-state: paused !important; 
}

#btn-buka svg {
    margin-right: 8px !important; 
    vertical-align: text-bottom;
}

/* Disclaimer Cover */
#cover-page .disclaimer {
    font-size: 1rem;
    /* opacity: 0.85 !important; <--- BARIS INI WAJIB DIHAPUS */
    color: #653d26 !important; /* Warna dibuat transparan di sini sebagai gantinya */
    font-weight: 500 !important;
    font-family: 'Cormorant Garamond', serif; 
    max-width: 260px; 
    margin: 30px auto 0 auto; 
    line-height: 1.4; 
}

/* =========================================================
   ANIMASI REVEAL HALUS BERURUTAN (HALAMAN COVER) - DIPERBAIKI
   ========================================================= */
/* 1. Sembunyikan pembungkusnya, BUKAN tombolnya secara langsung */
#cover-page .title-small,
#cover-page .nama-mempelai,
#cover-page .tamu-section p,
#cover-page .nama-tamu,
#cover-page .disclaimer,
.tombol-wrapper-anim {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

/* 2. Keyframes Animasi Mengambang Naik & Fade In */
@keyframes revealCoverSmooth {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 3. Terapkan animasi dengan jeda waktu (delay) berurutan */
#cover-page .title-small { animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
#cover-page .nama-mempelai { animation: revealCoverSmooth 2.5s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards; }
#cover-page .tamu-section p { animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards; }
#cover-page .nama-tamu { animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards; }

/* 4. TUGAS ANIMASI DIPISAH AGAR SHADOW SINKRON! */
/* Wrapper (Pembungkus) bertugas naik dari bawah (Reveal) */
.tombol-wrapper-anim { 
    animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 2.3s forwards; 
}

/* Tombol aslinya memiliki opacity 1 dan HANYA bertugas berdenyut (Pulse) */
#btn-buka { 
    opacity: 1; /* Wajib 1, karena dia menumpang sembunyi di dalam wrapper */
    transform: translateY(0);
    animation: pulseButton 3s ease 4.3s infinite !important; 
}

#cover-page .disclaimer { animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 2.8s forwards; }

/* Responsif Cover HP */
@media (max-width: 430px) { #cover-page .nama-mempelai { font-size: 5rem !important; } }
@media (max-width: 395px) { #cover-page .nama-mempelai { font-size: 4rem !important; } }
@media (max-width: 340px) { #cover-page .nama-mempelai { font-size: 4rem !important; gap: 10px; } }

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

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

/* =========================================================
   ANIMASI TIRAI AWAN HERO
   ========================================================= */
#hero {
    position: relative;
    overflow: hidden; /* Wajib agar awan yang bergeser tidak membuat layar melebar */
}

#hero-cloud-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50; /* Paling atas di dalam hero */
    pointer-events: none; /* Agar tidak menghalangi klik ke tombol di bawahnya */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Pelapis warna langit agar tidak ada celah transparan di antara awan */
.curtain-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #d7b383; /* Warna langit cover */
    z-index: 51;
    opacity: 1;
}

/* Memperbesar awan agar saling menumpuk rapat menutupi layar */
.curtain-cloud {
    position: absolute;
    z-index: 52;
    min-width: 150%; 
    height: auto;
    opacity: 1;
    will-change: transform, opacity;
}

/* Penempatan titik awal awan */
.c1 { top: -10%; left: -30%; width: 200%; }
.c2 { bottom: -10%; right: -30%; width: 180%; }
.c3 { top: 25%; left: -20%; width: 220%; }

/* Animasi Buka Tirai ke Kiri */
@keyframes slideCurtainLeft {
    0% { transform: translateX(0); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(-150%); opacity: 0; }
}

/* Animasi Buka Tirai ke Kanan */
@keyframes slideCurtainRight {
    0% { transform: translateX(0); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(150%); opacity: 0; }
}

/* Animasi Hilangkan Background Pelapis */
@keyframes fadeCurtainBg {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* 
   TRIGGER ANIMASI:
   Animasi HANYA akan berjalan saat class .locked dihapus dari <body>
   (yaitu saat tombol "Buka Undangan" diklik).
   Delay: 2s (tertutup dulu selama 2 detik), Durasi Gerak: 2s
*/
body:not(.locked) .curtain-left {
    animation: slideCurtainLeft 2.5s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}

body:not(.locked) .curtain-right {
    animation: slideCurtainRight 2.5s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}

body:not(.locked) .curtain-bg {
    animation: fadeCurtainBg 1.5s ease-in-out 2s forwards;
}

/* Sembunyikan total container tirai setelah semua animasi selesai (4.5 detik) */
@keyframes hideCurtainContainer {
    0% { visibility: visible; }
    100% { visibility: hidden; }
}
body:not(.locked) #hero-cloud-curtain {
    animation: hideCurtainContainer 0s linear 4.5s forwards;
}

/* Titik awal ditaruh di bawah agar lintasan naiknya panjang */
.flock-left { top: 80%; }
.flock-right { top: 75%; }

/* Desain & Fisika Burung Individual */
.bird-wrap {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 35px;
    height: 25px;
    fill: rgba(25, 25, 25, 0.85);
    animation: birdBob 0.4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
    animation-delay: var(--d);
}

.bird-wrap .wing-l, 
.bird-wrap .wing-r {
    will-change: transform;
    transform-origin: 15px 11px;
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: var(--d);
}
.bird-wrap .wing-l { animation-name: flap-l; }
.bird-wrap .wing-r { animation-name: flap-r; }

@keyframes flap-l {
    0% { transform: rotate(35deg); }    
    100% { transform: rotate(-45deg); } 
}
@keyframes flap-r {
    0% { transform: rotate(-35deg); }   
    100% { transform: rotate(45deg); }  
}

@keyframes birdBob {
    0% { transform: scale(var(--s)) translateY(0px); }    
    100% { transform: scale(var(--s)) translateY(-5px); } 
}

/* Animasi Terbang Bersilang: Murni dari UJUNG Kanan ke UJUNG Kiri */
@keyframes flyFlockLeft {
    /* Mulai dari luar layar kanan (120%), opacity 1 agar langsung terlihat saat paruhnya masuk layar */
    0% { left: 120%; transform: translateY(0) scale(1); opacity: 1; }
    90% { opacity: 1; }
    /* Lenyap di luar batas layar kiri (-50%), melesat ke atas 80% dari tinggi layar (-80vh) */
    100% { left: -50%; transform: translateY(-80vh) scale(0.35); opacity: 0; } 
}

/* Animasi Terbang Bersilang: Murni dari UJUNG Kiri ke UJUNG Kanan */
@keyframes flyFlockRight {
    /* Mulai dari luar layar kiri (-50%) */
    0% { left: -50%; transform: scale(-1, 1) translateY(0); opacity: 1; }
    90% { opacity: 1; }
    /* Lenyap di luar batas layar kanan (120%) */
    100% { left: 120%; transform: scale(-0.35, 0.35) translateY(-80vh); opacity: 0; }
}

/* 
   TRIGGER & TIMING:
   - Kecepatan ekstra (hanya 6 detik menempuh dari ujung ke ujung).
   - Masuk ke layar tanpa delay tambahan dari sisi kita, langsung tancap gas setelah awan terbuka.
*/
body:not(.locked) .flock-left { 
    animation: flyFlockLeft 6s linear 2s infinite; 
}
body:not(.locked) .flock-right { 
    animation: flyFlockRight 6.5s linear 2.3s infinite; 
}

/* =========================================================
   ANIMASI PEMANDANGAN HERO (POHON, KASTIL, BUNGA)
   ========================================================= */
#hero-landscape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Layering: Di atas burung (5), di bawah teks (10) dan awan tirai (50) */
    z-index: 6; 
    pointer-events: none;
    overflow: hidden;
}

.landscape-item {
    position: absolute;
    opacity: 0; /* Disembunyikan sebelum tirai terbuka */
    will-change: transform, opacity;
}

.tree-left {
    top: -5%;
    left: -18%; /* <-- Digeser ke kanan agar lebih terlihat (sebelumnya -25%) */
    width: 60%; 
    max-width: 300px;
    transform-origin: top left;
    position: absolute; /* Pastikan ini ada */
    z-index: 1; /* Dinaikkan agar di depan frame teks */
}

.tree-right {
    top: -5%;
    right: -26%; /* <-- Digeser lebih jauh ke kanan (sebelumnya -15%) */
    width: 60%;
    max-width: 300px;
    transform-origin: top right;
    position: absolute; /* Pastikan ini ada */
    z-index: 1; /* Dinaikkan agar di depan frame teks */
}

.center-castle {
    bottom: 5%; /* Sedikit diangkat agar fondasinya tertutup bunga */
    left: 50%;
    width: 100%;
    max-width: 450px;
    transform: translateX(-50%);
    transform-origin: bottom center;
}

/* --- Pengaturan Posisi & Ukuran Bunga (Diperbesar) --- */
.flower-bottom-left {
    bottom: -25px; /* Digeser sedikit ke bawah agar porsinya pas */
    left: -25px;
    width: 65%; /* Naik dari 55% */
    max-width: 320px; /* Naik dari 250px */
    transform-origin: bottom left;
    position: absolute; /* Pastikan ini ada */
    z-index: 20; /* Dinaikkan agar di depan frame teks */
}

.flower-bottom-right {
    bottom: -25px;
    right: -25px;
    width: 65%; /* Naik dari 55% */
    max-width: 320px; /* Naik dari 250px */
    transform-origin: bottom right;
    position: absolute; /* Pastikan ini ada */
    z-index: 20; /* Dinaikkan agar di depan frame teks */
}
/* --- MEMAKSA POHON & BUNGA KE LAYER PALING DEPAN (DI ATAS BINGKAI) --- */

.flower-bottom-left, 
.flower-bottom-right {
    z-index: 999 !important; /* Angka tertinggi agar menimpa bingkai mewah */
    pointer-events: none; /* Mencegah gambar menghalangi sentuhan jari tamu di layar */
}
/* --- Keyframes Animasi Halus & Dramatis (Reveal) --- */
@keyframes revealTreeL {
    0% { opacity: 0; transform: translateY(-60px) translateX(-40px); }
    100% { opacity: 1; transform: translateY(0) translateX(0); }
}
@keyframes revealTreeR {
    0% { opacity: 0; transform: translateY(-60px) translateX(40px); }
    100% { opacity: 1; transform: translateY(0) translateX(0); }
}
@keyframes revealCastle {
    0% { opacity: 0; transform: translateX(-50%) translateY(120px) scale(0.85); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes revealFlowerL {
    0% { opacity: 0; transform: translateX(-80px) translateY(80px) rotate(-20deg); }
    100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg); }
}
@keyframes revealFlowerR {
    0% { opacity: 0; transform: translateX(80px) translateY(80px) rotate(20deg); }
    100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg); }
}

/* --- Keyframes Goyangan Angin Natural (Sway) --- */
@keyframes swayTreeL {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
}
@keyframes swayTreeR {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-3deg); }
}
@keyframes swayFlowerL {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(4deg); }
}
@keyframes swayFlowerR {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-4deg); }
}

/* --- TRIGGER ANIMASI BERURUTAN: BUNGA -> CASTLE -> POHON --- */

/* 1. BUNGA MUNCUL PERTAMA (Mulai di detik 2.5 & 2.8) */
body:not(.locked) .flower-bottom-left { 
    animation: 
        revealFlowerL 2.5s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards,
        swayFlowerL 6s ease-in-out 5.0s infinite; 
}
body:not(.locked) .flower-bottom-right { 
    animation: 
        revealFlowerR 2.5s cubic-bezier(0.16, 1, 0.3, 1) 2.8s forwards,
        swayFlowerR 6.5s ease-in-out 5.3s infinite; 
}

/* 2. KEMUDIAN CASTLE MUNCUL (Mulai di detik 3.5) */
body:not(.locked) .center-castle { 
    animation: revealCastle 1s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards; 
}

/* 3. TERAKHIR POHON MUNCUL (Mulai di detik 4.5 & 5.0) */
body:not(.locked) .tree-left { 
    animation: 
        revealTreeL 3s cubic-bezier(0.25, 1, 0.5, 1) 3.1s forwards,
        swayTreeL 8s ease-in-out 7.5s infinite; 
}
body:not(.locked) .tree-right { 
    animation: 
        revealTreeR 3s cubic-bezier(0.25, 1, 0.5, 1) 3.4s forwards,
        swayTreeR 8.5s ease-in-out 8.0s infinite; 
}
/* =========================================================
   ANIMASI & DESAIN BINGKAI KAPSUL VERTIKAL (HERO CONTENT)
   ========================================================= */
.hero-frame-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 85%;
    max-width: 320px;
    margin-top: 0 !important; /* Memaksa menghapus sisa dorongan ke atas dari kode lama */
}

.hero-frame-mewah {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    
    
    /* Memaksa bentuk menjadi persegi panjang vertikal / kapsul */
    min-height: 480px; 
    
    /* Padding atas dan bawah diperbesar untuk memberi ruang (60px ke 80px) */
    padding: 80px 25px; 
    
    border-radius: 200px; 
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Mengatur agar konten menyebar dengan rapi */
    align-items: center;
    text-align: center;
    
    opacity: 0; 
    transform: scale(0.85);
    will-change: transform, opacity;
}

/* Inner Stroke (Garis biru agak ke dalam) */
.hero-frame-mewah::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 3px solid #653d26; 
    border-radius: 190px; 
    pointer-events: none;
    
    /* Diubah menjadi 0 agar bersembunyi sebelum animasi dimulai */
    opacity: 0; 
    will-change: clip-path, opacity;
}

/* --- KEYFRAMES: Animasi Efek Menggambar Garis (Sweep Fill) --- */
@keyframes drawStrokeSweep {
    0% { 
        opacity: 0; 
        /* Terkunci tak terlihat di titik paling tengah atas */
        clip-path: inset(0% 50% 100% 50%); 
    }
    15% {
        opacity: 0.7; 
        /* Membuka lengkungan atas ke kiri dan kanan */
        clip-path: inset(0% 0% 100% 0%); 
    }
    100% { 
        opacity: 0.7; 
        /* Menyapu lurus ke bawah hingga menutupi seluruh garis bingkai */
        clip-path: inset(0% 0% 0% 0%); 
    }
}

/* 
   TRIGGER ANIMASI STROKE
   Bingkai utama mulai detik ke-6. Stroke kita mulai detik 7.5.
*/
body:not(.locked) .hero-frame-mewah::before {
    animation: drawStrokeSweep 2s ease-in-out 5s forwards;
}

/* Penyesuaian Teks di dalam Bingkai */
.hero-frame-mewah .title-small {
    margin-top: 20px; 
    margin-bottom: 40px !important;
   font-family: 'Cormorant Garamond', serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* --- Penyesuaian Nama Mempelai Vertikal --- */
.hero-frame-mewah .nama-mempelai {
    margin: 10px 0 20px 0;
    margin-bottom: 25px;
    font-size: 3.4rem;
    
    
    /* Mengubah susunan menjadi tumpukan vertikal */
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    
    /* Jarak atas-bawah antara nama dan simbol & */
    gap: 0px; 
    
    /* Merapatkan jarak bawaan font agar tumpukannya padat */
    line-height: 0.9; 
}

.hero-frame-mewah .simbol-dan {
    /* Ukuran simbol disesuaikan untuk layout vertikal */
    font-size: 0.7em; 
    
    /* Memberi sedikit ruang napas di atas dan bawah simbol */
    margin: 8px 0; 
    opacity: 0.6;
    color: #653d26;
    /* Reset transform yang sebelumnya dipakai di layout horizontal */
    transform: none; 
}
.hero-frame-mewah .intro-text {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #653d26;
    max-width: 90%;
    margin-bottom: 25px;
}
/* --- Penyesuaian Tanggal Estetik (Hari di atas, Tanggal di Kotak) --- */
.hero-frame-mewah .tanggal-kotak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px; 
}

/* Teks Hari (Senin) */
.hero-frame-mewah .tanggal-kotak .hari-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #653d26;
    font-weight: 500;
    margin-bottom: 12px; /* Jarak antara teks hari dan kotak */
}

/* Desain Kotak Waktu Estetik */
.hero-frame-mewah .kotak-waktu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border: 2px solid #653d26;
    border-radius: 50px; /* Bentuk kapsul horizontal */
    background: rgba(255, 255, 255, 0.4); /* Efek isi kotak sedikit putih transparan */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Bayangan sangat halus */
}

/* Angka di dalam kotak (01, 06, 26) */
.hero-frame-mewah .kotak-waktu .angka {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: #653d26;
    font-weight: 600;
    line-height: 1;
}

/* Titik pemisah di dalam kotak */
.hero-frame-mewah .kotak-waktu .titik {
    color: #653d26;
    font-size: 1rem;
    margin: 0 12px;
    line-height: 1;
}

/* --- Animasi Zoom In Halus --- */
@keyframes revealFrameZoom {
    0% { opacity: 0; transform: scale(0.85) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 
   TRIGGER ANIMASI BINGKAI:
   Mulai di detik 6.5, tepat setelah kastil dan bunga selesai muncul 
*/
body:not(.locked) .hero-frame-mewah {
    animation: revealFrameZoom 5s cubic-bezier(0.16, 1, 0.3, 1) 5s forwards;
}

/* --- Penyesuaian khusus untuk HP layar pendek (seperti iPhone SE) --- */
@media (max-height: 700px) {
    .hero-frame-wrapper {
        max-width: 290px; /* Dibuat sedikit lebih ramping agar seimbang */
    }
  .hero-frame-mewah {
        min-height: 380px;
        /* Padding sedikit dikurangi untuk layar pendek */
        padding: 50px 20px; 
    }
    .hero-frame-mewah .title-small {
        margin-top: 10px;
        margin-bottom: 25px !important;
    }
    
    /* Sedikit menyesuaikan ukuran teks agar muat di bingkai yang lebih pendek */
    .hero-frame-mewah .tanggal-kotak {
        margin-bottom: 10px;
    }
    .hero-frame-mewah .kotak-waktu {
        padding: 8px 20px;
    }
    .hero-frame-mewah .kotak-waktu .angka {
        font-size: 1.4rem;
    }
}

/* --- 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: 'cinzel decorative', sans-serif;
    font-size: 0.8rem;
    font-weight: bold; /* Tetap tebal seperti permintaan sebelumnya */
    
    /* TAMBAHAN BARU: Membuat hurufnya menjadi miring */
    font-style: normal; 
    
    color: #653d26;
    line-height: 1.6;
    margin-bottom: 15px;
}
.judul-profil .we-are { 
    display: block; 
    font-size: 1rem; 
    letter-spacing: 5px; 
    margin-bottom: 5px; 
    opacity: 0.85;
}
.judul-profil .getting-married { 
    display: block; 
    font-size: 1.7rem; 
    font-weight: 700; 
}

/* Desain Teks Pengantar Baru */
.teks-pengantar-profil { 
    font-family: 'Poppins', 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);
}

/* 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;
    }
}

.teks-pengantar {
    font-size: 0.85rem; 
    line-height: 1.8;
    color: #444; 
    font-weight: 500;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9);
}

.ayat-quran {
    max-width: 700px;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 50px;
    font-size: 0.85rem;
    color: #444;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 25px; 
    border-radius: 20px; 
    backdrop-filter: blur(5px); 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

.ayat-quran span {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #653d26; 
}

/* =========================================================
   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: #653d26; /* Mengikuti warna Navy Tema Aa */
    width: 100%;
}

/* DESAIN FOTO KAPSUL (Capsule Shape) */
.foto-bulat { 
    width: 120px;  
    height: 180px; 
    border-radius: 999px; 
    object-fit: cover; 
    border: none; 
    padding: 4px; 
    
    /* Gradasi bingkai kapsul bernuansa Navy dan Putih */
    background: linear-gradient(
        135deg, 
        rgba(93, 53, 26, 0.8) 0%,     
        rgba(255, 255, 255, 1) 15%,   
        rgba(184, 106, 46, 0.2) 50%,  
        rgba(255, 255, 255, 1) 85%,   
        rgba(93, 55, 26, 0.8) 100%    
    );
    
    margin-bottom: 0 !important; 
    box-shadow: 0 8px 15px rgba(93, 65, 26, 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: 180px; /* 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: 'Cinzel Decorative', cursive; 
    font-size: 1.3rem; 
    margin-bottom: 5px; 
    color: #653d26;
}

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

.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 ( --- & --- )
   ========================================================= */

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

/* 2. Redesign Simbol & dengan Garis Panjang dan Margin Lebar */
.simbol-dan-profil { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%; /* Membentang penuh dari kiri ke kanan di dalam padding bingkai */
    
    /* Memperlebar margin: 55px ke atas (Wanita) dan 55px ke bawah (Pria) */
    margin: 55px 0; 
    
    font-family: 'Cinzel Decorative', cursive; 
    font-size: 2.8rem; 
    color: #653d26; 
    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: #653d26; /* 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, #b86c2e 0%, #653d26 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, #653d26 0%, #b86c2e 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(255, 255, 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: 200px; /* Bentuk Kapsul Identik Hero */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 40px rgba(26, 54, 93, 0.1); /* Bayangan lembut */
}

/* Inner Stroke (Garis Biru Navy di bagian dalam) */
.profil-frame-mewah::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 3px solid #653d26; 
    border-radius: 185px; /* Mengikuti lengkungan induknya */
    pointer-events: none;
    opacity: 0.7;
}

/* 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);
}

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

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


/* --- BACKGROUND & CONTAINER EVENT --- */
.bg-event {
    background: url('assets/bg_hero1.webp') center/cover no-repeat;
    min-height: auto;
    display: flex; 
    justify-content: center; 
    align-items: flex-start;
    overflow: hidden; 
    background-attachment: fixed;
    position: relative;
    padding: 0px 20px 60px 20px; 
    margin-top: -2px; /* Menghilangkan celah pixel antar section jika ada */
}
.event-container.rampingkan { 
    max-width: 340px; 
    margin: 0 auto; 
    z-index: 10; 
    position: relative;
    padding-top: 0px; 
}

/* --- KARTU KAPSUL BERSARANG --- */
.event-card-premium {
    background-image: url('assets/bg_kotak.webp'); /* Menggunakan background langit sebagai bingkai */
    background-size: cover;
    background-position: center;
    border-radius: 999px; /* Bentuk Kapsul Sempurna */
    padding: 18px; /* Ketebalan bingkai gambar */
    margin-top: 10px; 
    margin-bottom: 40px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2); 
}

.event-card-inner {
    background: rgba(255, 255, 255, 0.92); 
    border-radius: 999px; 
    width: 100%;
    border: 1px solid rgba(26, 54, 93, 0.1);
    padding: 40px 20px 70px 20px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ELEMEN DI DALAM KARTU --- */
.ikon-bucket-event {
    width: 175px;
    height: auto;
    margin-top: 5px; /* Sedikit dorongan dari atas kapsul */
    margin-bottom: 15px; /* Jarak ke judul */
}

.title-small-event { 
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem; 
    color: #653d26;
    margin-bottom: 10px; 
    letter-spacing: 1px;
}

.event-divider {
    width: 50px;
    height: 2px;
    background: #653d26;
    margin-bottom: 20px;
    opacity: 0.3;
}

.tanggal-event { 
    font-family: 'Poppins', sans-serif;
    font-weight: 700; 
    color: #653d26; 
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.waktu-event {
    font-size: 1rem;
    font-weight: 500;
    color: #444; 
    margin-top: 5px;
    margin-bottom: 25px;
}

.teks-penghubung { 
    color: #653d26; 
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.alamat-event {
    color: #555; 
    font-size: 0.8rem; 
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- TOMBOL PREMIUM --- */
.btn-lokasi-premium {
    background: linear-gradient(135deg, #653d26 0%, #794415 100%);
    color: #ffffff;
    padding: 12px 30px;
    font-size: 0.8rem;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(26, 54, 93, 0.3);
}

.btn-lokasi-premium:hover { 
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(26, 54, 93, 0.4);
    filter: brightness(1.1);
}

/* --- ANIMASI REVEAL --- */
.event-card-premium.reveal:not(.active) { 
    opacity: 0; 
    transform: translateY(40px) scale(0.95);
}

.event-card-premium.reveal.active { 
    opacity: 1; 
    transform: translateY(0) scale(1);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- ANIMASI ZOOM IN --- */
.reveal-zoom { 
    opacity: 0;
    transform: scale(0.7); /* Ukuran awal 70% (mengecil) */
}

.reveal-zoom.active { 
    opacity: 1; 
    transform: scale(1); /* Membesar ke ukuran normal 100% */
}

/* --- PENGATURAN WAKTU & JEDA --- */
.event-card-premium.reveal {
    /* Kecepatan animasi dibuat 1.2 detik dengan efek rem yang halus */
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.delay-1.active { transition-delay: 0.2s !important; }
.delay-2.active { transition-delay: 0.5s !important; }

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

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

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

.title-gift {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2rem; 
    color: #653d26; 
    margin-bottom: 10px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(255, 255, 255, 1);
}

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

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

.atm-card {
    background: linear-gradient(135deg, #653d26 0%, #794415 100%); 
    width: 100%;
    max-width: 350px; 
    border-radius: 15px;
    padding: 25px;
    color: white;
    box-shadow: 0 10px 25px rgba(184, 136, 46, 0.4);
    position: relative;
    overflow: hidden;
    text-align: left;
}

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

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

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

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

.wa-confirm-wrapper {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px dashed rgba(46, 130, 184, 0.3);
}

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

/* =========================================================
   HALAMAN 6 (WEDDING WISH & RSVP)
   ========================================================= */
.bg-rsvp {
   background: linear-gradient(rgba(59, 43, 15, 0.95), rgba(93, 62, 26, 0.95)), url('assets/bg_kotak.webp') center/cover;
    background-attachment: fixed;
    padding: 100px 20px;
    position: relative;
}

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

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

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

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

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

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

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

/* =========================================================
   ANIMASI REVEAL (MUNCUL 3S, MENGHILANG HALUS 0.8S)
   ========================================================= */
.reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition: all 0.8s ease-out !important; 
}

.reveal.active {
    opacity: 1; 
    transition: all 3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reveal-zoom { transform: scale(0.8); }
.reveal-zoom.active { opacity: 1; transform: scale(1); }

.reveal-pullup { transform: translateY(80px); }
.reveal-pullup.active { opacity: 1; transform: translateY(0); }

/* Nonaktifkan CSS Jadul saat tidak dilock */
body:not(.locked) #hero .nama-mempelai,
body:not(.locked) #hero .intro-text,
body:not(.locked) #hero .tanggal,
body:not(.locked) #countdown,
body:not(.locked) .calendar-actions {
    animation: none !important; 
}

@keyframes entranceText { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes entrancePhoto { 0% { opacity: 0; transform: scale(0.6) translateY(-40px); } 70% { opacity: 1; transform: scale(1.05) translateY(5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes floatPhoto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes entranceButton { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pulseButton { 
    0%, 100% { 
        transform: scale(1) translateZ(0); 
        box-shadow: 0 4px 15px rgba(26, 54, 93, 0.2); 
    } 
    50% { 
        transform: scale(1.04) translateZ(0); 
        box-shadow: 0 8px 25px rgba(26, 54, 93, 0.4); 
    } 
}

/* Responsif Judul Halaman */
@media (max-width: 768px) {
    .title-section { font-size: 2.8rem; }
}

/* =========================================================
   KUNCI MODE "HANYA HP" (MOBILE VIEW ONLY)
   ========================================================= */
@media (min-width: 500px) {
    html {
        background-color: #e9ecef;
        background-image: radial-gradient(#c2c2c2 1px, transparent 1px);
        background-size: 20px 20px;
        min-height: 100vh;
    }
    body {
        width: 100%;
        max-width: 414px; 
        margin: 0 auto;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
        min-height: 100vh;
        background-color: #fcfcfc;
        position: relative;
        overflow-x: hidden;
    }
 
    #music-toggle { 
        right: calc(50vw - 207px + 25px) !important; 
    }
    .hero-bg, #profil, .bg-event, .bg-gift, .bg-rsvp, .bg-penutup {
        background-attachment: fixed !important; 
        background-position: center top !important; 
        background-size: 414px 100vh !important; 
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   EFEK AWAN / SALJU BERGUGURAN (GANTI DARI SAKURA)
   ========================================================= */
#sakura-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 10000; 
    overflow: hidden;
}

.sakura-petal {
    position: absolute;
    top: -10%;
    background: linear-gradient(135deg, #ffe7cc, #ffece4); 
    border-radius: 50%; 
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear forwards;
    box-shadow: 0 0 8px rgba(250, 239, 224, 0.6);
}

@keyframes fall {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate(var(--end-x), 110vh) rotate(var(--end-rotation)); opacity: 0; }
}

/* =========================================================
   ANIMASI BUNGA COVER
   ========================================================= */
.bunga-cover {
    position: absolute;
    width: 400px; 
    height: auto;
    z-index: 10;
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
}

#bunga-atas {
    width: 260px !important; /* <-- Diperkecil ukurannya */
    top: -100px;              /* <-- Digeser lebih jauh ke atas (sebelumnya -10px) */
    right: -100px;            /* <-- Digeser lebih jauh ke kanan (sebelumnya -10px) */
    transform-origin: top right;
}

#bunga-bawah {
    width: 260px !important; /* <-- Diperkecil ukurannya */
    bottom: -100px;           /* <-- Digeser lebih jauh ke bawah (sebelumnya -10px) */
    left: -100px;             /* <-- Digeser lebih jauh ke kiri (sebelumnya -10px) */
    transform-origin: bottom left;
}

#bunga-kanan-bawah {
    bottom: -30px;  
    right: -70px;   
    transform-origin: bottom right; 
    width: 160px; 
}

@keyframes revealBungaAtas {
    from { opacity: 0; visibility: visible; transform: translateX(100px) rotate(10deg); }
    to { opacity: 1; visibility: visible; transform: translateX(0) rotate(0deg); }
}

@keyframes revealBungaBawah {
    from { opacity: 0; visibility: visible; transform: translateX(-100px) rotate(-10deg); }
    to { opacity: 1; visibility: visible; transform: translateX(0) rotate(0deg); }
}

@keyframes revealBungaKananBawah {
    from { opacity: 0; visibility: visible; transform: translateX(100px) rotate(10deg); }
    to { opacity: 1; visibility: visible; transform: translateX(0) rotate(0deg); }
}

.reveal-bunga-atas { animation: revealBungaAtas 1.5s ease-out forwards; }
.reveal-bunga-bawah { animation: revealBungaBawah 1.5s ease-out forwards; }
.reveal-bunga-kanan-bawah { animation: revealBungaKananBawah 1.5s ease-out forwards; }

/* =========================================================
   ANIMASI BUNGA HERO
   ========================================================= */
#hero {
    position: relative;
    overflow: hidden; 
}

.bunga-hero {
    position: absolute;
    width: 370px; 
    height: auto;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#bunga-hero-atas { 
    width: 260px !important; /* Disamakan ukurannya dengan cover */
    top: -40px;              /* Digeser lebih jauh ke atas */
    left: -40px;             /* Digeser lebih jauh ke kiri */
    transform-origin: top left; 
}

#bunga-hero-bawah { 
    width: 260px !important; /* Disamakan ukurannya dengan cover */
    bottom: -40px;           /* Digeser lebih jauh ke bawah */
    right: -40px;            /* Digeser lebih jauh ke kanan */
    transform-origin: bottom right; 
}

@keyframes revealHeroKiri {
    from { opacity: 0; visibility: visible; transform: translateX(-100px) rotate(-10deg); }
    to { opacity: 1; visibility: visible; transform: translateX(0) rotate(0deg); }
}

@keyframes revealHeroKanan {
    from { opacity: 0; visibility: visible; transform: translateX(100px) rotate(10deg); }
    to { opacity: 1; visibility: visible; transform: translateX(0) rotate(0deg); }
}

.reveal-hero-kiri { animation: revealHeroKiri 1.5s ease-out forwards; }
.reveal-hero-kanan { animation: revealHeroKanan 1.5s ease-out forwards; }

/* =========================================================
   ANIMASI GOYANG ANGIN (UNTUK SEMUA BUNGA)
   ========================================================= */
@keyframes goyanganAngin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(4deg); }
}

.looping-bunga { 
    opacity: 1 !important; 
    visibility: visible !important; 
    animation: goyanganAngin 6s ease-in-out infinite; 
}

/* =========================================================
   PERBAIKAN LAYER HERO (AGAR KONTEN DI ATAS BUNGA)
   ========================================================= */
#hero .foto-berbingkai_mewah,
#hero .title-small,
#hero .nama-mempelai,
#hero .intro-text,
#hero .tanggal,
#countdown,
.calendar-actions {
    position: relative;
    z-index: 10; 
}

/* =========================================================
   ANIMASI BUNGA PROFIL (HALAMAN 4)
   ========================================================= */
.bunga-profil {
    position: absolute; 
    width: 370px; 
    height: auto;
    z-index: 20; 
    opacity: 1 !important; 
    visibility: hidden;
    pointer-events: none;
}

#bunga-profil-atas { 
    width: 260px !important;
    top: -40px; 
    left: -40px; 
    transform-origin: top left; 
}
#bunga-profil-bawah {
    width: 260px !important;
    bottom: -40px; 
    right: -40px;  
    transform-origin: bottom right;
}

#profil .salam-pembuka,
#profil .ayat-quran,
#profil .mempelai-container {
    position: relative;
    z-index: 10; 
}

/* =========================================================
   NEW DESIGN STYLE HALAMAN AYAT (WHITE CARD CONCEPT - NAVY THEME)
   ========================================================= */
#halaman-ayat { 
    position: relative; 
    overflow: hidden; 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 80px 20px; 
}
.bg-ayat { 
    /* Latar belakang menggunakan aset milik Aa */
    background-image: url('assets/bg_ayat.webp') !important; 
    background-size: cover !important; 
    background-position: center top !important; 
    background-attachment: scroll !important; 
}

/* 1. KOTAK PUTIH DENGAN BACKGROUND TEXTURE TRANSPARAN */
#halaman-ayat .cover-content { 
    background-color: #ffffff; 
    
    /* Melapisi bg_kotak.webp dengan warna putih transparan (85% - 90%) 
       agar teksturnya terlihat samar-samar dan elegan */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.90)), 
        url('assets/bg_kotak.webp');
        
    background-size: cover;
    background-position: center;

    padding: 35px 20px 30px 20px; 
    border-radius: 20px; 
    box-shadow: 0 15px 35px rgba(93, 79, 26, 0.15); 
    width: 100%;
    max-width: 340px; 
    z-index: 10; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px; 
    overflow: hidden; 
    margin: 0 auto; 
    
    border: 1px solid rgba(184, 133, 46, 0.2); 
}

/* 2. STYLE GAMBAR BUKET BUNGA DI DALAM KOTAK PUTIH */
#halaman-ayat .foto-ayat-header {
    /* Normalisasi ukuran buket di tengah */
    width: 175px; 
    height: auto; 
    object-fit: contain; 
    margin-top: -10px; 
    margin-bottom: 5px; 
    border-bottom: none; 
}

/* 3. STYLE MONOGRAM S & G DI DALAM KOTAK */
#halaman-ayat .monogram-ayat {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: center;
    gap: 12px; 
    font-family: 'Cinzel Decorative', serif;
    font-size: 3rem; 
    color: #653d26; 
    margin-top: 15px;
    margin-bottom: 10px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(93, 75, 26, 0.1);
}

#halaman-ayat .simbol-dan-ayat {
    font-family: 'Great Vibes', sans-serif; 
    font-size: 0.4em; 
    color: #653d26;
    opacity: 0.7; 
    transform: translateY(5px); 
}

/* 4. STYLE TEKS AYAT DAN SUMBER */
#halaman-ayat .teks-ayat { 
    font-family: 'Poppins', sans-serif; 
    font-size: 0.8rem; 
    line-height: 1.6; 
    color: #333333; 
    font-style: italic; 
    margin: 0; 
    padding: 0 15px; 
    width: 100%; 
    text-align: center; 
}

#halaman-ayat .sumber-ayat { 
    font-family: 'Cormorant Garamond', serif; 
    font-size: 0.95rem; 
    color: #653d26; 
    letter-spacing: 2px; 
    font-weight: 700; 
    margin-top: 5px; 
}

/* =========================================================
   5. ANIMASI AYAT BERURUTAN (BERSIH DARI DUPLIKAT)
   ========================================================= */

/* Sembunyikan elemen dan matikan transisi ganda sebelum di-scroll */
#halaman-ayat .reveal:not(.active) { 
    opacity: 0 !important; 
    animation: none !important; 
    pointer-events: none; 
}
#halaman-ayat .reveal {
    transition: none !important; /* Mencegah glitch dengan CSS lama */
}

/* RUMUS ANIMASI KUNCI */
@keyframes zoomOutReveal { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes simpleFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* TRIGGER ANIMASI BERURUTAN KETIKA DISKROLL (Class .active masuk) */
/* Kotak Putih Utama */
#halaman-ayat .cover-content.reveal.active { animation: entranceText 1s ease-out both; pointer-events: auto; }

/* Buket Bunga (Mulai Detik 0.3) */
#halaman-ayat .foto-ayat-header.reveal.active { animation: zoomOutReveal 1s ease-out 0.3s both; pointer-events: auto; }

/* Monogram (Mulai Detik 0.5) */
#halaman-ayat .monogram-ayat.reveal.active { animation: simpleFadeIn 1s ease-out 0.5s both; pointer-events: auto; }

/* Teks Ayat (Mulai Detik 0.7) */
#halaman-ayat .teks-ayat.reveal.active { animation: entranceText 1s ease-out 0.7s both; pointer-events: auto; }

/* Sumber Ayat (Mulai Detik 0.9) */
#halaman-ayat .sumber-ayat.reveal.active { animation: entranceText 1s ease-out 0.9.s both; pointer-events: auto; }
/* =========================================================
   HALAMAN 7 (PENUTUP) 
   ========================================================= */
#penutup {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; 
    overflow: hidden; 
    padding: 60px 20px;
    background: url('assets/bg_cover1.webp') center/cover;
    background-attachment: fixed;
}

.penutup-container { 
    text-align: center; 
    width: 100%;
    max-width: 400px; 
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.penutup-container .text-blue {
    color: #653d26 !important;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9);
    margin: 5px 0;
}

.nav-bottom {
    display: flex; 
    justify-content: center; 
    flex-wrap: nowrap; 
    gap: 8px; 
    margin-bottom: 20px;
    width: 100%;
}

.nav-btn {
    flex-shrink: 0; 
    background-color: #ffffff; 
    width: 42px; 
    height: 42px; 
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
    text-decoration: none;
    transition: transform 0.2s ease;
}

.nav-btn svg {
    width: 20px; 
    height: 20px;
    display: block;
    stroke: #653d26; /* Tambahkan baris ini untuk mengubah warna garis ikon */
}

.nav-btn:hover {
    transform: scale(1.1);
}

.footer-wrapper-inner {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px !important;
    padding-bottom: 20px;       
}

.watermark-footer-inner {
    background-color: #653d26; 
    color: #ffffff; 
    padding: 5px 15px; 
    border-radius: 20px;
    font-size: 0.65rem; 
    font-weight: 300;   
    display: inline-block;
    box-shadow: 0 4px 8px rgba(46, 130, 184, 0.2);
    letter-spacing: 0.5px; 
    margin-top: 20px !important; 
}

.bunga-penutup {
    position: absolute;
    width: 350px; 
    height: auto;
    z-index: 1; 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#bunga-penutup-atas {
    top: -60px;
    right: -60px;
    transform-origin: top right;
    
}

#bunga-penutup-bawah {
    bottom: -60px;
    left: -60px;
    transform-origin: bottom left;
}

.penutup-container {
    padding: 20px;
    z-index: 10;
    position: relative;
}
/* =========================================================
   PAKSAAN MENGECILKAN BUNGA PENUTUP (ANTI TERTiMPA)
   ========================================================= */
#bunga-penutup-atas, 
#bunga-penutup-bawah {
    width: 250px !important; /* Ukuran dipaksa jadi kecil */
    max-width: 100vw !important; /* Maksimal 40% dari lebar layar HP */
}

/* Jika dirasa masih kurang mepet ke pojok, kita tarik posisinya */
#bunga-penutup-atas {
    top: -70px !important;
    right: -70px !important;
}

#bunga-penutup-bawah {
    bottom: -70px !important;
    left: -70px !important;
}
/* --- 2. FOTO PENUTUP BENTUK KAPSUL ALA PROFIL --- */
.foto-kapsul-penutup {
    width: 160px;  /* Lebar standar kapsul */
    height: 240px; /* Tinggi standar kapsul (Persegi panjang) */
    border-radius: 999px; /* Membentuk kapsul melengkung sempurna */
    object-fit: cover;
    
    /* Bingkai Gradasi Navy-Putih Identik dengan Profil */
    padding: 4px;
    background: linear-gradient(
        135deg, 
        rgba(26, 54, 93, 0.8) 0%,     
        rgba(255, 255, 255, 1) 15%,   
        rgba(46, 130, 184, 0.2) 50%,  
        rgba(255, 255, 255, 1) 85%,   
        rgba(26, 54, 93, 0.8) 100%    
    );
    
    box-shadow: 0 15px 30px rgba(26, 54, 93, 0.25);
    margin-bottom: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    /* Mempertahankan animasi melayang (mengambang) */
    animation: floatPhoto 4s ease-in-out infinite !important;
}

/* =========================================================
   PERBAIKAN KOTAK EVENT & TAMBAHAN BUNGA
   ========================================================= */
.event-card .event-icon,
.event-card h3,
.event-card .event-info,
.event-card .btn-lokasi {
    position: relative;
    z-index: 10;
}

.bunga-event {
    position: absolute;
    width: 250px; 
    height: auto;
    z-index: 1; 
    opacity: 0.4; 
    pointer-events: none;
}

#bunga-akad {
    top: -30px;
    left: -30px;
    transform-origin: top left;
}
#bunga-resepsi {
    top: -30px;
    right: -30px;
    left: auto; 
    transform-origin: top right; 
}


/* =========================================================
   POSISI BUNGA DI KOTAK MEMPELAI
   ========================================================= */
.bunga-mempelai {
    position: absolute;
    max-width: none !important; 
    width: 225px !important; 
    z-index: 0; 
    opacity: 0.9;
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: none !important;
    background: transparent !important;
}

#bunga-mempelai-wanita {
    top: -30px; 
    right: -30px;
}
#bunga-mempelai-pria {
    top: -30px; 
    left: -30px;
}

.mempelai-card img:not(.bunga-mempelai), 
.mempelai-card h2, 
.mempelai-card p {
    position: relative;
    z-index: 2;
}

/* =========================================================
   BINGKAI FOTO MEWAH (UKIRAN EMAS BIRU) DASAR
   ========================================================= */
.foto-berbingkai_mewah {
    position: relative;
    display: inline-block;
    background: transparent !important; 
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.foto-berbingkai_mewah::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/bingkai_mewah_v2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10; 
    pointer-events: none; 
}

.foto-berbingkai_mewah img.foto-profil_isi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50% !important;
    object-fit: cover; 
    border: none !important;
    z-index: 1;
}

/* =========================================================
   SAPU JAGAT: UKURAN BINGKAI SEMUA HALAMAN (DIPERBESAR)
   ========================================================= */
#cover-page .foto-berbingkai_mewah,
#hero .foto-berbingkai_mewah,
#penutup .foto-berbingkai_mewah,
.mempelai-card .foto-berbingkai_mewah {
    width: 210px !important; 
    height: 210px !important;
}

#cover-page .foto-berbingkai_mewah img.foto-profil_isi,
#hero .foto-berbingkai_mewah img.foto-profil_isi,
#penutup .foto-berbingkai_mewah img.foto-profil_isi,
.mempelai-card .foto-berbingkai_mewah img.foto-profil_isi {
    width: 180px !important;
    height: 180px !important;
}

#cover-page .foto-berbingkai_mewah { margin-bottom: 15px !important; }
#hero .foto-berbingkai_mewah { margin-bottom: 40px !important; }
#penutup .foto-berbingkai_mewah { margin-bottom: 20px !important; }


/* =========================================================
   GABUNGAN ANIMASI ZOOM IN & MENGAMBANG DI HERO & PENUTUP
   ========================================================= */
#hero .foto-berbingkai_mewah {
    opacity: 0; 
    animation: none !important; 
}

#hero .foto-berbingkai_mewah.active {
    animation: entrancePhoto 2s ease forwards, floatPhoto 4s ease-in-out 2s infinite !important;
}

#penutup .foto-berbingkai_mewah {
    animation: floatPhoto 4s ease-in-out infinite !important;
}

#penutup .nama-mempelai {
    font-size: 3rem !important; 
    margin-top: -65px !important;
    margin-bottom: -65px !important;
}

/* =========================================================
   ANIMASI KHUSUS TOMBOL SAVE THE DATE (DIPERCEPAT)
   ========================================================= */
.reveal-waktu {
    opacity: 0; 
    transform: translateY(30px); 
    will-change: opacity, transform;
    transition: all 0.5s ease-out !important; 
}

.reveal-waktu.active {
    opacity: 1; 
    transform: translateY(0); 
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#hero .intro-text {
    width: 85% !important;        
    max-width: 380px !important;  
    margin: 20px auto !important; 
    line-height: 1.8 !important;  
}

body:not(.locked) #hero .tanggal,
body:not(.locked) #countdown {
    opacity: 0;
    animation: entranceButton 1.2s ease 1.2s forwards !important; 
}

#hero .tanggal { margin-bottom: 10px !important; }
#countdown { margin-top: 3px !important; margin-bottom: 15px !important; }
#hero .calendar-actions { margin-top: 10px !important; }

.img-bismillah.reveal {
    opacity: 0;
    transform: scale(1.4) !important; 
}

.img-bismillah.reveal.active {
    opacity: 1;
    transform: scale(1) !important; 
    transition: all 2.5s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

/* =========================================================
   OUR GALLERY (ROYAL VIBE)
   ========================================================= */

/* Background: Navy Gelap dengan tekstur samar */
.bg-gallery-royal {
    background: linear-gradient(rgba(59, 34, 15, 0.8), rgba(93, 50, 26, 0.8)), url('assets/bg_kotak.webp') center/cover;
    background-attachment: fixed;
    padding: 100px 20px;
    position: relative;
}

.gallery-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}


.title-gallery-royal {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2rem;
    /* Efek Teks Tinta Emas */
    background: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 5px 15px rgba(253, 245, 166, 0.15);
    margin-bottom: 25px;
}



/* --- GRID LAYOUT --- */
.gallery-grid-royal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px; /* Jarak antar pigura */
    padding: 0 10px;
}

/* --- EFEK BINGKAI EMAS ISTANA (PIGURA) --- */
.gallery-item-royal {
    position: relative;
    /* Gradasi Logam Emas yang Kompleks */
    background: #ffffff;
    padding: 6px; /* Ketebalan Bingkai Emas */
    border-radius: 2px; /* Sudut sedikit tegas ala pigura klasik */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), inset 0 0 5px rgba(0,0,0,0.5); /* Bayangan jatuh di dinding */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0s;
    z-index: 1;
}

.gallery-item-royal img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    /* Garis pembatas gelap di dalam bingkai emas sebelum foto */
    border: 2px solid #0f203b; 
    transition: transform 0.6s ease;
    filter: contrast(1.05) saturate(1.05); /* Sedikit menajamkan warna foto */
}

/* Grand Portrait (Foto ke-3 dan ke-6 membentang penuh) */
.gallery-item-royal.grand-portrait {
    grid-column: 1 / -1; /* Mengisi dari kolom kiri ke kanan */
}

.gallery-item-royal.grand-portrait img {
    height: 260px; /* Lebih tinggi agar megah */
}

/* --- EFEK HOVER (DILIHAT LEBIH DEKAT) --- */
.gallery-item-royal:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.8), 0 0 20px rgba(253, 245, 166, 0.2);
    z-index: 10;
}

.gallery-item-royal:hover img {
    transform: scale(1.03);
}


.simbol-dan {
    font-size: 0.8em; 
    display: inline-block;
    color: #1a5075; 
    vertical-align: middle; 
    margin: 0 10px; 
    color: inherit; 
    opacity: 0.85; 
}

/* =========================================================
   OPTIMASI UKURAN BUNGA BERDASARKAN UKURAN HP
   ========================================================= */
@media (max-width: 430px) {
    .bunga-cover { width: 380px !important; } 
    #bunga-kanan-bawah { width: 155px !important; right: -35px !important; }
    .bunga-hero, .bunga-profil, .bunga-ayat { width: 350px !important; } 
    .bunga-penutup { width: 325px !important; } 
    .bunga-event { width: 235px !important; } 
    .bunga-mempelai { width: 215px !important; } 
}

@media (max-width: 395px) {
    .bunga-cover { width: 320px !important; } 
    #bunga-kanan-bawah { width: 135px !important; right: -30px !important; }
    .bunga-hero, .bunga-profil, .bunga-ayat { width: 290px !important; } 
    .bunga-penutup { width: 260px !important; } 
    .bunga-event { width: 190px !important; } 
    .bunga-mempelai { width: 180px !important; } 
}

@media (max-width: 340px) {
    .bunga-cover { width: 240px !important; }
    #bunga-kanan-bawah { width: 100px !important; right: -20px !important; }
    .bunga-hero, .bunga-profil, .bunga-ayat { width: 210px !important; }
    .bunga-penutup { width: 180px !important; }
    .bunga-event { width: 140px !important; }
    .bunga-mempelai { width: 130px !important; }
    
    .nama-mempelai { font-size: 2.3rem !important; }
    .title-section, .title-gift, .title-rsvp, .title-gallery { font-size: 2.2rem !important; }
    .teks-salam-arab { font-size: 1.5rem !important; }
}

/* =========================================================
   ANIMASI ZOOM IN SUPER DRAMATIS KHUSUS GALERI & STORY
   ========================================================= */

/* 1. KONDISI SEBELUM MUNCUL (DISEMBUNYIKAN & DIPERKECIL) */
.gallery-item-royal.reveal:not(.active),
.timeline-item.reveal:not(.active),
.timeline-line.reveal:not(.active) {
    opacity: 0 !important;
    transform: scale(0.6) !important; 
    /* Untuk garis timeline, jangan gunakan scale, pakai tinggi (height) */
}

/* Khusus untuk garis vertikal di halaman Our Story */
.timeline-line.reveal:not(.active) {
    transform: scale(1) !important;
    height: 0 !important;
}

/* 2. KONDISI SAAT MUNCUL (ZOOM IN LAMBAT & HALUS) */
.gallery-item-royal.reveal.active,
.timeline-item.reveal.active {
    opacity: 1 !important;
    transform: scale(1) !important; 
    
    transition-property: opacity, transform !important;
    transition-duration: 5s !important; /* Durasi dramatis: 5 detik */
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Khusus untuk garis vertikal di halaman Our Story */
.timeline-line.reveal.active {
    opacity: 1 !important;
    height: 100% !important;
    transition: height 5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s !important;
}

/* 3. PENGATURAN WAKTU TUNDA (STAGGERED DELAY) */
/* Memastikan pigura emas muncul satu per satu */
.delay-1 { transition-delay: 0.3s !important; }
.delay-2 { transition-delay: 0.8s !important; }
.delay-3 { transition-delay: 1.3s !important; }
.delay-4 { transition-delay: 1.8s !important; }
.delay-5 { transition-delay: 2.3s !important; }
.delay-6 { transition-delay: 2.8s !important; }

/* 1. Container Awan (Sekarang khusus Hero saja) */
#cloud-container {
    position: absolute; /* <-- Berubah dari 'fixed' menjadi 'absolute' */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* <-- Berubah dari '100vh' menjadi '100%' */
    pointer-events: none; 
    z-index: 2; /* Melayang di atas background hero, di belakang kastil */
    overflow: hidden; 
}

/* KUNCI PENTING: Karena awan sudah di dalam Hero yang dibatasi 414px di laptop, kita cukup reset ukurannya */
@media (min-width: 500px) {
    #cloud-container {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* 2. Container Awan Khusus Cover */
.cloud-cover-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Memaksa awan tampil di atas bg_cover1.webp */
    overflow: hidden;
}

/* 3. PENGAMAN KONTEN: Memastikan semua teks & foto selalu di atas awan */
#cover-page .cover-content,
.gallery-container,
.event-container,
.gift-container,
.rsvp-container,
.penutup-container,
.mempelai-container,
.salam-pembuka,
#halaman-ayat .container {
    position: relative;
    z-index: 10;
}

/* 4. Pengaturan Fisik Awan */
.awan-anim {
    position: absolute;
    filter: brightness(1.2); 
    z-index: 5;
    will-change: left, right;
}

/* Awan yang bergerak ke KIRI */
.awan-kiri {
    animation: awanGerakKiri linear infinite;
}
@keyframes awanGerakKiri {
    0% { left: 100%; }       
    100% { left: -500px; }   /* <-- Diperlebar agar awan raksasa tidak terpotong saat menghilang */
}

/* Awan yang bergerak ke KANAN */
.awan-kanan {
    animation: awanGerakKanan linear infinite;
}
@keyframes awanGerakKanan {
    0% { right: 100%; }      
    100% { right: -500px; }  /* <-- Diperlebar agar awan raksasa tidak terpotong saat menghilang */
}

/* 5. RUMUS WAKTU MINUS (-) AGAR SEMUA AWAN LANGSUNG MUNCUL TANPA DELAY */

/* --- Area Atas --- */
.a1 { top: 2%;   width: 420px; opacity: 0.7;  animation-duration: 25s; animation-delay: -5s; }
.a2 { top: 15%;  width: 350px; opacity: 0.55; animation-duration: 32s; animation-delay: -18s; }

/* --- Area Tengah --- */
.a3 { top: 30%;  width: 380px; opacity: 0.6;  animation-duration: 28s; animation-delay: -12s; }
.a4 { top: 48%;  width: 450px; opacity: 0.75; animation-duration: 35s; animation-delay: -25s; }

/* --- Area Bawah --- */
.a5 { top: 65%;  width: 320px; opacity: 0.5;  animation-duration: 30s; animation-delay: -8s; }
.a6 { top: 78%;  width: 400px; opacity: 0.65; animation-duration: 26s; animation-delay: -22s; }
.a7 { top: 88%;  width: 280px; opacity: 0.4;  animation-duration: 40s; animation-delay: -15s; }
.a8 { top: 95%;  width: 340px; opacity: 0.6;  animation-duration: 33s; animation-delay: -3s; }

/* Responsif untuk Layar Handphone (Diperbesar menyesuaikan ukuran HP) */
@media (max-width: 430px) {
    .a1 { width: 280px; }
    .a2 { width: 220px; }
    .a3 { width: 250px; }
    .a4 { width: 300px; }
    .a5 { width: 200px; }
    .a6 { width: 260px; }
    .a7 { width: 180px; }
    .a8 { width: 220px; }
}

/* =========================================================
   PERBAIKAN ANIMASI PROFIL (MEMATIKAN GLITCH / LOMPAT)
   ========================================================= */

/* 0. MATIKAN TRANSISI BAWAAN CLASS .REVEAL AGAR TIDAK BENTROK (SANGAT PENTING) */
#profil .salam-pembuka.reveal,
#profil .salam-pembuka.reveal.active,
#profil .profil-item.reveal *, 
#profil .simbol-dan-profil.reveal,
#profil .simbol-dan-profil.reveal.active {
    transition: none !important;
}

/* 1. Sembunyikan elemen sebelum masuk layar dengan scale awal yang pas */

/* Salam pembuka */
#profil .salam-pembuka.reveal:not(.active) {
    opacity: 0;
    transform: translateY(40px); 
}

/* Foto Mempelai (Persiapan Zoom In) */
#profil .profil-item.reveal:not(.active) .foto-wrapper {
    opacity: 0;
    transform: scale(0.6); 
    will-change: transform, opacity;
}

/* Teks & Tombol IG (Persiapan Zoom Out) */
#profil .profil-item.reveal:not(.active) h2,
#profil .profil-item.reveal:not(.active) h3,
#profil .profil-item.reveal:not(.active) p,
#profil .profil-item.reveal:not(.active) a {
    opacity: 0;
    transform: scale(1.3); 
    will-change: transform, opacity;
}

/* Simbol & disembunyikan */
#profil .simbol-dan-profil.reveal:not(.active) {
    opacity: 0;
    transform: scale(0.8);
}

/* 2. RUMUS ANIMASI BARU (Dipaksa pakai both agar tidak nge-blink) */
@keyframes profZoomIn {
    0% { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes profZoomOut {
    0% { opacity: 0; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

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

/* =========================================================
   3. TRIGGER ANIMASI SAAT DISKROL (Berurutan Otomatis)
   ========================================================= */

/* Teks Pembuka */
#profil .salam-pembuka.reveal.active {
    /* Menggunakan 'both' agar posisinya terkunci sempurna di awal dan akhir */
    animation: profilFadeUp 1s ease-out both !important;
}

/* FOTO MEMPELAI: Efek Zoom In */
#profil .profil-item.reveal.active .foto-wrapper { 
    animation: profZoomIn 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both !important; 
}

/* TEKS & TOMBOL: Efek Zoom Out */
#profil .profil-item.reveal.active h2 { animation: profZoomOut 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both !important; }
#profil .profil-item.reveal.active h3 { animation: profZoomOut 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both !important; }
#profil .profil-item.reveal.active p  { animation: profZoomOut 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both !important; }
#profil .profil-item.reveal.active a  { animation: profZoomOut 2s cubic-bezier(0.16, 1, 0.3, 1) 1.0s both !important; }

/* SIMBOL & (DAN) BESERTA GARISNYA */
@keyframes profDanMuncul {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
#profil .simbol-dan-profil.reveal.active {
    animation: profDanMuncul 1s ease-out both !important;
}

#profil .simbol-dan-profil::before { transform-origin: right; }
#profil .simbol-dan-profil::after { transform-origin: left; }

#profil .simbol-dan-profil.reveal:not(.active)::before,
#profil .simbol-dan-profil.reveal:not(.active)::after { transform: scaleX(0); }

#profil .simbol-dan-profil.reveal.active::before,
#profil .simbol-dan-profil.reveal.active::after {
    transform: scaleX(1);
    /* Transisi garis dikembalikan karena tidak pakai animation */
    transition: transform 1.2s ease-in-out 0.4s !important;
}

/* --- SECTION COUNTDOWN KERAJAAN --- */
.bg-countdown-royal {
    background: url('assets/bg_hero1.webp') center/cover no-repeat; /* Menggunakan background langit */
    background-attachment: fixed;
    padding: 120px 20px;
    position: relative;
}

/* Overlay agar teks terbaca jelas namun tetap transparan */
.bg-countdown-royal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(250, 231, 220, 0.5) 0%, rgba(250, 236, 220, 0.2) 100%);
}

.royal-content {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.flower-royal-top {
    width: 240px;
    margin-bottom: 20px;
    margin-top: -75px;
    filter: drop-shadow(0 10px 15px rgba(26, 54, 93, 0.2));
}

.royal-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #653d26;
    margin-bottom: 10px;
}

.royal-title {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2.8rem;
    color: #653d26;
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.royal-description {
    font-family: 'Poppins', italic;
    font-size: 1rem;
    color: #653d26;
    line-height: 1.6;
    margin-bottom: 40px;
    padding: 0 20px;
}

/* =========================================================
   TAMPILAN COUNTDOWN (ROYAL ARCH STYLE)
   ========================================================= */
.royal-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Jarak antar kotak */
    margin-bottom: 50px;
    width: 100%;
}

/* Bentuk Kotak Melengkung ala Jendela Istana */
.cd-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 90px;
    
    /* Background putih agak transparan */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(5px);
    
    /* Bingkai emas elegan */
    border: 1px solid #b88746; 
    
    /* Melengkung di atas, siku di bawah */
    border-radius: 40px 40px 12px 12px; 
    
    /* Bayangan lembut */
    box-shadow: 0 10px 20px rgba(26, 54, 93, 0.15), inset 0 0 10px rgba(184, 135, 70, 0.1);
    position: relative;
    overflow: hidden;
}

/* Garis hiasan emas di dalam kotak */
.cd-box::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #b88746, #fdf5a6, #b88746);
}

/* Angka Hitung Mundur */
.cd-val {
    /* Menggunakan Cormorant Garamond karena bentuk angkanya sangat klasik dan rapi */
    font-family: 'Cormorant Garamond', serif; 
    font-size: 2.2rem;
    color: #653d26; /* Biru Navy */
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
    margin-top: 5px;
}

/* Label (Hari, Jam, Menit, Detik) */
.cd-txt {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #b88746; /* Teks Emas */
    font-weight: 600;
}

/* Responsif untuk Layar HP Kecil */
@media (max-width: 380px) {
    .royal-countdown { gap: 10px; }
    .cd-box { width: 65px; height: 80px; border-radius: 35px 35px 10px 10px; }
    .cd-val { font-size: 1.8rem; }
    .cd-txt { font-size: 0.55rem; letter-spacing: 1px; }
}

/* --- ROYAL GOLD BUTTON (SINGLE ACTION) --- */
.royal-actions {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.btn-royal-wrapper {
    position: relative;
    padding: 2px; /* Bingkai emas tipis */
    background: linear-gradient(135deg, #b88746 0%, #fdf5a6 50%, #b88746 100%);
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(26, 54, 93, 0.15);
    transition: all 0.3s ease;
}

.btn-royal-gold {
    background: #653d26; /* Navy kebanggaan Yaya */
    color: #fdf5a6; /* Teks Emas */
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

/* Efek kilatan cahaya premium */
.btn-royal-gold::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(253, 245, 166, 0.2), transparent);
    transform: skewX(-25deg);
    transition: 0.6s;
}

.btn-royal-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(26, 54, 93, 0.25);
}

.btn-royal-wrapper:hover .btn-royal-gold::before {
    left: 150%;
}

.btn-icon svg {
    width: 20px;
    height: 20px;
    color: #fdf5a6;
    display: block;
}

/* Responsif HP */
@media (max-width: 430px) {
    .btn-royal-gold {
        padding: 13px 25px;
        font-size: 0.7rem;
        letter-spacing: 1px;
    }
}
/* --- ANIMASI REVEAL COUNTDOWN --- */

/* Atur durasi transisi umum untuk halaman ini */
#save-the-date .reveal {
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Variasi 1: Pull Up (Muncul dari bawah ke atas) */
#save-the-date .reveal-pullup {
    opacity: 0;
    transform: translateY(50px);
}

/* Variasi 2: Zoom (Muncul membesar halus) */
#save-the-date .reveal-zoom {
    opacity: 0;
    transform: scale(0.8);
}

/* Saat elemen menjadi aktif (terdeteksi oleh Scroll Observer) */
#save-the-date .reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- STAGGERED DELAY (Urutan Muncul) --- */
/* Bunga muncul pertama */
#save-the-date .flower-royal-top.active { transition-delay: 0.2s; }

/* Label 'The Wedding Countdown' */
#save-the-date .royal-label.active { transition-delay: 0.4s; }

/* Judul 'Save The Date' */
#save-the-date .royal-title.active { transition-delay: 0.6s; }

/* Deskripsi teks */
#save-the-date .royal-description.active { transition-delay: 0.8s; }

/* Angka hitung mundur */
#save-the-date .royal-countdown.active { transition-delay: 1.0s; }

/* Tombol terakhir */
#save-the-date .royal-actions.active { transition-delay: 1.2s; }

/* =========================================================
   OUR STORY (TIMELINE LAYOUT)
   ========================================================= */
.bg-story {
    background: url('assets/bg_cover1.webp') center/cover;
    background-attachment: fixed;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.story-container {
    max-width: 360px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

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

.title-story {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2rem;
    color: #653d26;
    text-shadow: 0 4px 10px rgba(93, 74, 26, 0.1);
}

/* Timeline Induk */
.timeline-wrapper {
    position: relative;
    padding-left: 25px; /* Memberi ruang untuk garis di sisi kiri */
}

/* Garis Waktu Vertikal */
.timeline-line {
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 4px; /* Menyesuaikan agar tepat di tengah titik */
    width: 2px;
    background: linear-gradient(to bottom, #653d26 0%, #b8712e 50%, transparent 100%);
    border-radius: 2px;
}

/* Container Masing-masing Cerita */
.timeline-item {
    position: relative;
    margin-bottom: 50px;
}

/* Titik Indikator Timeline */
.timeline-dot {
    position: absolute;
    left: -26px; /* Menarik titik ke garis */
    top: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #653d26;
    box-shadow: 0 0 0 4px rgba(93, 69, 26, 0.1);
    z-index: 2;
}

/* Kartu Cerita Premium */
.story-card-premium {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(93, 75, 26, 0.08);
    border: 1px solid rgba(184, 156, 46, 0.1);
    position: relative;
}

/* Area Gambar */
.story-img-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.story-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.story-card-premium:hover .story-img-wrap img {
    transform: scale(1.08); /* Efek zoom saat ditekan/dilihat */
}

/* Area Teks */
.story-content {
    padding: 25px 20px 20px 20px;
    position: relative;
}

/* Lencana Tanggal (Melayang di antara gambar dan teks) */
.story-date-badge {
    position: absolute;
    top: -15px; /* Ditarik ke atas agar menimpa gambar */
    right: 20px;
    background: linear-gradient(135deg, #653d26, #794215);
    color: #ffffff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(93, 67, 26, 0.3);
}

.story-phase {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    color: #653d26;
    margin-bottom: 8px;
    font-weight: 700;
}

.story-text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #555;
    text-align: justify;
}

/* --- ANIMASI MUNCUL DARI SAMPING KANAN --- */
.timeline-item.reveal:not(.active) {
    opacity: 0;
    transform: translateX(40px); /* Bergeser dari kanan */
}

.timeline-item.reveal.active {
    opacity: 1;
    transform: translateX(0);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Membuat garis memanjang perlahan */
.timeline-line.reveal:not(.active) { height: 0; }
.timeline-line.reveal.active {
    height: 100%;
    transition: height 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

#cover-page .pesan-undangan-cover {
    font-family: 'Poppins', sans-serif;
    font-size: 0.5rem !important; /* Ukuran font kecil agar elegan dan tidak mendominasi */
    color: #653d26 !important; /* Warna selaras dengan tema */
    line-height: 1.6;
    margin-bottom: 25px !important; /* Jarak antara teks ini dengan tombol buka undangan */
    padding: 0 10px;
    font-weight: 500;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9) !important; /* Bayangan putih agar teks terbaca di atas background */
    
    /* Pengaturan Animasi (muncul di detik 2.1) */
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
    animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards;
}
/* --- FIX TEKS PENGANTAR UNDANGAN DI COVER --- */
#cover-page .tamu-section p.pesan-undangan-cover {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important; 
    color: #653d26 !important;
    line-height: 1.6 !important;
    
    /* --- DIPERSEMPIT SEDIKIT LAGI --- */
    width: 104% !important;      /* Turun dari 108% menjadi 104% */
    margin-left: -2% !important; /* Disesuaikan agar tetap presisi di tengah */
    padding: 0 !important; 
    
    margin-top: 0px !important;
    margin-bottom: 25px !important; 
    font-weight: 400 !important;
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.9) !important;
    letter-spacing: 0.5px !important;
    
    /* Animasi muncul belakangan */
    opacity: 0;
    transform: translateY(30px);
    animation: revealCoverSmooth 2s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards !important;
}
/* --- BUCKET BUNGA DI ATAS WE ARE (PROFIL) --- */
.foto-bucket-profil {
    width: 140px; /* 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;
}