/* first/ */
@font-face {
    font-family: 'Symphony Pro';
    src: url('../font/symphony-pro-regular.otf') format('opentype');
}

@font-face {
    font-family: 'Awesome Lathusca';
    src: url('../font/Awesome-Lathusca.ttf') format('truetype');
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px) translateX(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes slideInUpAccent {
    from {
        opacity: 0;
        transform: translateY(50px) translateX(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

/* Mengatur delay agar elemen muncul bergantian */

/* Variasi delay untuk elemen berurutan (stagger effect) */
.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

.delay-3 {
    transition-delay: 0.6s;
}

/* --- Penerapan pada Elemen --- */

/* Delay berbeda untuk setiap daun agar lebih dinamis */


/* State dasar sebelum animasi */
.animate-hidden {
    opacity: 0;
    transform: translateY(40px);
    /* Muncul dari bawah */
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: hidden;
}

/* State saat elemen masuk ke viewport */
.animate-show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* --- Animasi Pesan Penutup (Fade In saja) --- */


/* --- Animasi Thank You (Expand Letter Spacing) --- */
.thank-you-text.animate-hidden {
    opacity: 0;
    letter-spacing: 10px;
    transform: scale(1.1);
    transition: all 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.thank-you-text.animate-show {
    opacity: 1;
    letter-spacing: -2px;
    /* Kembali ke gaya rapat sesuai gambar */
    transform: scale(1);
}

/* --- Animasi Foto Closing (Zoom Out ke Frame) --- */
.closing-photo.animate-hidden {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1.5s ease-out;
}

.closing-photo.animate-show {
    opacity: 1;
    transform: scale(1);
}

/* Mengaktifkan scroll halus untuk seluruh halaman */
html {
    scroll-behavior: smooth;
}

/* --- CUSTOM SCROLLBAR --- */
/* Ukuran scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

/* Bagian jalur (track) scrollbar */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Bagian batang (thumb) scrollbar */
::-webkit-scrollbar-thumb {
    background: #8da1b9;
    /* Warna biru sesuai Save The Date Anda */
    border-radius: 10px;
}

/* Batang scrollbar saat diarahkan kursor (hover) */
::-webkit-scrollbar-thumb:hover {
    background: #343638;
    /* Warna gelap sesuai tema card Anda */
}

* {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    overflow-x: hidden;
    /* Mencegah scroll horizontal seluruh halaman */
    margin: 0;
    padding: 0;
    width: 100%;
}

.wrapper {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Reset & Base Font */
body,
html {

    color: #6d5d4b;
    background-color: #1a2a33;

}

.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    /* Mencegah seluruh halaman scroll */
}

/* Class khusus untuk nama pengantin */

/* --- BAGIAN KIRI (FIXED/STATIS) --- */
/* --- Sidebar Kiri (Desktop) --- */
.left-section {
    color: #ffffff;
    /* Mengganti ke putih agar lebih kontras di navy */
    flex: 1.4;
   
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Konten di bawah sesuai gambar referensi */
    padding: 60px;
    position: relative;
    overflow: hidden;
}

/* Overlay Gradasi Biru Gelap (Vignette) */
.left-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradasi dari transparan ke biru gelap pekat sesuai tema Gift Section */
    background: linear-gradient(to top, rgb(255 235 217 / 40%) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
}

.left-content {
    position: relative;
    z-index: 2;
    text-align: left;
    /* Sesuai layout visual gambar */
    padding-bottom: 20px;
}

.left-content h2 {
    font-family: sans-serif;
    font-weight: 400;
    letter-spacing: 4px;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.left-content h1 {
    font-family: 'Symphony Pro', sans-serif;
    /* Font utama tema */
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 15px;
}

.left-content p {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #bfa37e;
    /* Menggunakan aksen Gold/Bronze dari tema Save The Date */
}

/* Dekorasi Tambahan: Bunga di pojok bawah */
.left-section::after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 250px;
    height: 250px;
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
}

/* Ukuran font diperbesar agar Beau Rivage terlihat jelas */

/* --- BAGIAN Kanan (SCROLLABLE) --- */
.right-section {
    position: relative;
    /* Penting sebagai acuan video container */
    flex: 1;
    overflow-y: auto;
    background-color: #000000;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.video-bg-container {
    position: absolute;
    /* Mengikuti tinggi total konten scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Di belakang konten */
    pointer-events: none;
    /* Video tidak bisa di-klik */
}

#bg-video {
    position: fixed;
    /* Membuat video tetap diam saat di-scroll */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Agar video memenuhi layar tanpa distorsi */
    z-index: -1;
}

/* Overlay Dark di atas Video */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    /* Sesuaikan kegelapan (0.5 = 50%) */
    z-index: 0;
    pointer-events: none;
}

.section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.0); */
}

@media (max-width: 1024px) {
    .left-section {
        display: none;
        /* Sembunyikan bagian kiri */
    }

    .right-section {
        flex: 1;
        width: 100%;
    }
}


/* ==========================================
   SECTION FIRST-SCREEN LAYOUT
   ========================================== */
.first-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #ffffff; */
    /* Latar belakang bersih sesuai gambar mockup */
    padding: 20px;
    text-align: center;
    position: relative;
}

.cover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
}

/* ==========================================
   TYPOGRAPHY LAYOUT (Mengadopsi Gambar 2)
   ========================================== */

/* Nama Tamu (Merah Coral/Aksen hangat) */
.guest-name {
    font-family: 'Awesome Lathusca', cursive;
    color: #000000;
    font-size: 1.5rem;
    letter-spacing: 2px;
    font-weight: normal;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 20px rgb(0 0 0 / 19%);
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.2s;
    font-weight: 700;
}

/* "YOU'RE INVITED" (Hijau Olive Gelap) */
.invitation-text {
    font-family: 'Awesome Lathusca', cursive;
    color: #ffffff;
    font-size: 1.8rem;
    letter-spacing: 1px;
    font-weight: normal;
    /* margin-bottom: 0.5rem; */
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.4s;
}

/* "To Our Wedding" (Gold Cursive/Script) */
.couple-names {
    font-family: 'Symphony Pro', sans-serif;
    color: #c4a003;
    font-size: 4rem;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.6s;
}

/* "OPEN THE INVITATION" (Di bawah amplop) */
.action-text {
    font-family: 'Awesome Lathusca', cursive;
    color: #ffffff;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-top: 1.5rem;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1s;
}


/* ==========================================
   AMPLOP BUTTON & ANIMATION
   ========================================== */
.btn-envelope {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    max-width: 280px;
    /* Ukuran amplop proposional di layar mobile/desktop */
    width: 100%;
    transition: transform 0.3s ease-in-out;

    /* Animasi Masuk */
    opacity: 0;
    animation: envelopeEntrance 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.8s;
}

.envelope-img {
    width: 100%;
    height: auto;
    display: block;
    /* Memberikan bayangan halus di bawah kertas agar terlihat 3D nyata */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.08));
}

/* Efek Interaktif Saat Kursor/Jari Menyentuh Amplop */
.btn-envelope:hover {
    transform: scale(1.05);
}

.btn-envelope:active {
    transform: scale(0.98);
}


/* ==========================================
   KEYFRAMES ANIMASI (ON LOAD)
   ========================================== */

/* Efek Muncul Teks */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Efek Muncul Amplop (Sedikit memantul/Pop-up lembut) */
@keyframes envelopeEntrance {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive Scaling untuk Layar Lebih Kecil */
@media (max-width: 480px) {
    .couple-names {
        font-size: 3rem;
    }

    .invitation-text {
        font-size: 1.4rem;
    }

    .guest-name {
        font-size: 1.2rem;
    }

    .btn-envelope {
        max-width: 280px;
    }
}

/* opening */
/* ==========================================
   SECTION OPENING LAYOUT
   ========================================== */
.opening-section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* background-color: #0b140d; */
    /* Warna gelap emerald murni untuk kontras background */
    overflow: hidden;
    padding: 40px 20px;
}

/* Sesuai Gambar 1: Background dengan tekstur gelap vertikal halus */
.opening-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%); */
    z-index: 1;
}

.opening-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
}

/* Wrapper Utama */
.envelope-opening-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
    /* State Awal Sebelum Scroll */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* Gambar Dasar (`amplop-opening.jpg`) */
.envelope-base {
    width: 100%;
    height: auto;
    top: -10%;
    display: block;
    position: relative;
    z-index: 3;
    /* Berada di atas kertas agar ilusi menyelip berfungsi sempurna */
    filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.5));
}

/* ==========================================
   SURAT DI DALAM AMPLOP (LETTER PAPER)
   ========================================== */
.letter-paper {
    position: absolute;
    /* Posisikan tepat di area kertas bulat berenda pada gambar */
    top: 0%;
    left: 14%;
    width: 72%;
    height: 48%;

    /* UBAH Bagian Ini: Naikkan z-index agar berada di depan/atas gambar amplop */
    z-index: 4;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* State Awal Sebelum Scroll: Kertas bersembunyi sedikit ke bawah */
    transform: translateY(35px);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1.2s ease;
    transition-delay: 0.5s;
    /* Muncul setelah amplop stabil */
}

/* Penataan Tipografi (Mengadopsi Font Symphony Pro) */
.letter-text-content {
    font-family: 'Symphony Pro', sans-serif;
    color: #1e3524;
    /* Hijau tua gelap pekat agar terbaca jelas di kertas krem */
    width: 100%;
    padding: 10px;
}

.couple-name-text {
    transform: rotate(357deg);
    font-size: 4rem;
    font-weight: normal;
    line-height: 0.5;
    letter-spacing: 4px;
    font-family: 'Symphony Pro', sans-serif;
}

.ampersand {
    display: block;
    font-family: 'Symphony Pro', sans-serif;
    font-size: 2.4rem;
    /* margin: 0.2rem 0; */
    opacity: 0.8;
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */

/* Ketika class .reveal ditambahkan oleh JavaScript */
.opening-section.reveal .envelope-opening-wrapper {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.opening-section.reveal .letter-paper {
    opacity: 1;
    transform: translateY(0);
    /* Efek kertas meluncur ke atas dari dalam wadah */
}

/* Responsive Handler */
@media (max-width: 480px) {
    .couple-name-text {
        font-size: 4rem;
    }

    .ampersand {
        font-size: 2.4rem;
    }

    .opening-container {
        width: 420px;
    }
}

/* quotes  */
/* --- Quotes Section Layout --- */
/* ==========================================
   SECTION QUOTES LAYOUT
   ========================================== */
.quotes-section {
  width: 100%;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    background:
        linear-gradient(180deg,
            rgb(0 0 0 / 36%) 0%,
            rgb(0 0 0 / 0%) 100%),
        url(../images/bg-pohon.webp) no-repeat center center;

    background-size: cover;
    background-attachment: scroll;
    overflow: hidden;
    padding: 60px 20px;

    /* Feather */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.2) 8%,
        rgba(0,0,0,0.6) 15%,
        black 25%
    );
    mask-image: linear-gradient(to bottom, transparent 1%, rgb(0 0 0 / 15%) 8%, rgb(0 0 0 / 40%) 15%, #000000 25%);
}

/* Wrapper Frame Renda */
.quotes-frame-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    /* Menjaga skala proporsi seperti mockup mobile */
    display: inline-block;

    /* State Awal Sebelum Scroll (Mengecil & Transparan) */
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* Gambar Bingkai Kertas Renda */
.frame-overlay-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.3));
}

/* ==========================================
   TEXT CONTENT INSIDE FRAME
   ========================================== */
.quotes-inner-content {
    position: absolute;
    /* Menempatkan teks presisi di dalam ruang kosong frame */
    top: 14%;
    left: 14%;
    width: 72%;
    height: 72%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;

    /* State Awal Teks Sebelum Scroll */
    opacity: 0;
    transform: translateY(15px);
    transition: transform 1s ease, opacity 1s ease;
    transition-delay: 0.6s;
    /* Muncul setelah framenya selesai membesar */
}

/* Gaya Judul Surah (Menggunakan Symphony Pro) */
.surah-title {
    font-family: 'Symphony Pro', sans-serif;
    color: #2c4230;
    /* Hijau zaitun gelap hangat */
    letter-spacing: 2px;
  font-size: 1.5rem;
    font-weight: normal;
    line-height: 1;
}

.surah-verse-num {
    font-family: 'Symphony Pro', sans-serif;
    color: #4a634e;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

/* Gaya Teks Arab (Menggunakan font sistem serif agar rapi) */
.arabic-text {
    font-family: 'Traditional Arabic', 'Times New Roman', serif;
    font-size: 0.5rem;
    color: #1a1a1a;
    line-height: 1.6;
    font-weight: bold;
    margin-bottom: 1rem;
    word-spacing: 2px;
    padding: 0px 25px;
}

/* Gaya Terjemahan */
.translation-text {
    font-family: sans-serif;
    /* Mengikuti style clean minimalis di gambar */
    font-size: 0.5rem;
    color: #5d5d5d;
    line-height: 1.4;
    max-height: 40%;
    /* Membatasi tinggi teks agar tidak meluber keluar renda */
    overflow-y: auto;
    /* Antisipasi jika teks terjemahan terlalu panjang pada layar kecil */
    padding: 0 35px;
}

/* Menghilangkan scrollbar bawaan di dalam teks terjemahan */
.translation-text::-webkit-scrollbar {
    width: 0px;
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */

/* Triger saat kelas .reveal disuntikkan oleh JS */
.quotes-section.reveal .quotes-frame-wrapper {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.quotes-section.reveal .quotes-inner-content {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Scaling untuk perangkat mobile kecil */
@media (max-width: 390px) {
    .surah-title {
        font-size: 1.5rem;
    }

    .arabic-text {
        font-size: 0.8rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    .translation-text {
        font-size: 8px;
        line-height: 1;
    }

    .quotes-frame-wrapper {
        width: 350px;
    }
}

/* couple/ */
/* --- Couple Section Layout --- */
/* =========================================
   COUPLE SECTION - FULL STYLES
   ========================================= */

/* ==========================================
   SECTION COUPLE LAYOUT
   ========================================== */
.couple-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 50%) 100%), url(../images/bg-pohon.webp) no-repeat center center;
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.couple-container {
    width: 100%;
    max-width: 480px;
    /* Lebar standar layout mobile undangan lipat */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

/* Base Card Mempelai */
.bride-groom-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* State Awal Sebelum Di-scroll */
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* Animasi Masuk Arah Berlawanan */
.bride-card {
    transform: translateX(-40px);
}

.groom-card {
    transform: translateX(40px);
}

/* Separator Ampersand */
.couple-separator {
    opacity: 0;
    transition: opacity 1s ease;
    transition-delay: 0.8s;
}

.ampersand-big {
    font-family: 'Symphony Pro', sans-serif;
    color: #e2cb99;
    font-size: 2.5rem;
}

/* ==========================================
   AVATAR FRAME & OVAL MASKING TRICK
   ========================================== */
.avatar-frame-wrapper {
    position: relative;
    width: 200px;
    height: 250px;
    margin-bottom: 1.5rem;
}

.frame-mempelai-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 3;
    /* Di atas foto, di bawah pita */
    filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.3));
}

/* Foto Mempelai yang Dipotong Mengikuti Pola Oval */
.mempelai-photo {
    position: absolute;
    top: 10%;
    left: 14%;
    width: 72%;
    height: 80%;
    z-index: 2;
    /* Di balik renda */
    background-size: cover;
    background-position: center;
    clip-path: ellipse(50% 50% at 50% 50%);
}

/* ==========================================
   DETAILS TYPOGRAPHY (Sesuai Arahan Font)
   ========================================== */
.mempelai-details {
    width: 100%;
    padding: 0 10px;
}

/* Nama Mempelai (Symphony Pro) */
.mempelai-name {
    font-family: 'Symphony Pro', sans-serif;
    color: #f7f5f0;
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
}

/* Detail Lainnya (Arial/Clean Sans-Serif) */
.mempelai-child {
    font-family: Arial, Helvetica, sans-serif;
    color: #b1c2b5;
    /* Hijau sage pudar estetik */
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.parents-name {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Memberikan jarak otomatis antara icon dan teks */
    font-family: Arial, Helvetica, sans-serif;
    color: #e2cb99;
    font-size: 0.85rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}

.instagram-link:hover {
    opacity: 0.8;
}

.ribbon-decor {
    position: absolute;
    width: 90px;
    /* Ukuran pita yang proporsional di atas kepala frame */
    height: auto;
    z-index: 4;
    /* Paling atas menutupi sebagian renda */
    pointer-events: none;
    /* Mencegah bentrok sentuhan sensor mobile */
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25));
}

/* Pengaturan Posisi Pita Mempelai Wanita (Agak ke bawah kiri) */
.ribbon-bride {
    bottom: -15px;
    left: 30px;
    transform: rotate(-12deg);
    /* Sedikit dimiringkan agar natural */
}

/* Pengaturan Posisi Pita Mempelai Pria (Agak ke bawah kanan) */
.ribbon-groom {
    bottom: -15px;
    right: 7px;
    transform: rotate(342deg);
}

/* Perbaikan Responsivitas */
@media (max-width: 480px) {
    .mempelai-name {
        font-size: 2rem;
    }

    .avatar-frame-wrapper {
        width: 200px;
        height: 250px;
    }

    .couple-container {
        gap: 2rem;
    }

    /* Ukuran pita disesuaikan sedikit pada layar sangat kecil jika diperlukan */
    .ribbon-decor {
        width: 80px;
    }
}

.couple-intro-wrapper {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 15px;
}

/* Kaligrafi Arab Tradisional Bersih */
.arabic-salam {
    font-family: 'Traditional Arabic', 'Times New Roman', serif;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1rem;
    word-spacing: 3px;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease;
}

/* Teks Latin Salam (Arial Bold Menyerupai Layout Gambar) */
.salam-img-container {
    width: 100%;
    max-width: 260px;
    /* Batas lebar ideal grafis salam di layar mobile */
    margin: 0 auto 1.2rem auto;
    display: flex;
    justify-content: center;

    /* State Awal Sebelum Scroll */
    opacity: 0;
    transform: translateY(15px);
    transition: transform 1s ease, opacity 1s ease;
}

.salam-graphic-img {
    width: 100%;
    height: auto;
    display: block;
    /* Memberikan efek putih-bersih jika gambar memiliki latar transparan/gelap */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
}

/* Teks Latin Salam */
.latin-salam {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.2px;
    margin-bottom: 0.8rem;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease 0.15s;
}

/* Deskripsi Teks Pengantar */
.couple-intro-desc {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: normal;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease 0.25s;
}

/* Judul Intro Atas (Menggunakan Awesome Lathusca) */
.couple-intro-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    /* Warna aksen emas lembut */
    font-size: 2.5rem;
    font-weight: normal;
    margin-bottom: 0.8rem;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}


/* ==========================================
   INTERSECTION OBSERVER INTEGRATION STATES
   ========================================== */
.couple-section.reveal .arabic-salam,
.couple-section.reveal .salam-img-container,
.couple-section.reveal .latin-salam,
.couple-section.reveal .couple-intro-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Scaling Handphone */
@media (max-width: 414px) {
    .arabic-salam {
        font-size: 1.8rem;
    }

    .salam-img-container {
        max-width: 210px;
    }

    .latin-salam {
        font-size: 0.85rem;
    }

    .couple-intro-desc {
        font-size: 0.8rem;
        line-height: 1.5;
    }
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.couple-section.reveal .bride-card,
.couple-section.reveal .groom-card {
    opacity: 1;
    transform: translateX(0);
}

/* Memberikan jeda delay agar mempelai pria muncul sedikit setelah wanita */
.couple-section.reveal .groom-card {
    transition-delay: 0.3s;
}

.couple-section.reveal .couple-separator {
    opacity: 1;
}



/* --- Animasi On-Scroll (Reveal) --- */
/* ==========================================
   SECTION SAVE THE DATE LAYOUT
   ========================================== */
.save-the-date {
    width: 100%;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Tetap konsisten dengan background pohon gelap agar menyatu */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.std-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    text-align: center;
}

/* Judul Atas (Menggunakan Symphony Pro) */
.std-title {
    font-family: 'Symphony Pro', sans-serif;
    color: #c7af22;
    font-size: 3.5rem;
    font-weight: normal;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

/* ==========================================
   DATE COMPONENT FRAME
   ========================================== */
.date-frame-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    /* Sesuai proporsi gambar agar teks di dalam pas */
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.2s;
}

.frame-date-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.25));
}

/* Penempatan Konten di Tengah Oval Kertas Renda */
.date-inner-content {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #1e3524;
    /* Hijau zaitun gelap dari mockup asli */
}

.wedding-day,
.wedding-month-year {
    font-family: 'Symphony Pro', sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 1px;
}

.wedding-date-num {
    font-family: 'Awesome Lathusca', cursive;
    font-size: 4.5rem;
    font-weight: normal;
    line-height: 1;
    margin: 0.4rem 0;
}

/* ==========================================
   COUNTDOWN TIMER COMPONENT
   ========================================== */
.countdown-wrapper {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    width: 100%;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
    transition-delay: 0.4s;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    /* Kotak transparan minimalis */
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    padding: 12px;
    border-radius: 8px;
    min-width: 65px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.countdown-number {
    font-family: 'Symphony Pro', sans-serif;
    color: #e2cb99;
    /* Aksen emas lembut */
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1;
}

.countdown-label {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.75rem;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* ==========================================
   BUTTON GOOGLE CALENDAR
   ========================================== */
.btn-calendar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e2cb99;
    /* Latar belakang emas */
    color: #1e3524;
    /* Teks warna gelap agar kontras */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    transition-property: transform, background-color, opacity;
    transition-duration: 1s;
    transition-delay: 0.6s;
}

.btn-calendar:hover {
    background-color: #f1dfb8;
    transform: translateY(-2px);
}

.btn-calendar:active {
    transform: translateY(0);
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.save-the-date.reveal .std-title,
.save-the-date.reveal .date-frame-wrapper,
.save-the-date.reveal .countdown-wrapper,
.save-the-date.reveal .btn-calendar {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Responsive Scaling */
@media (max-width: 414px) {

    .wedding-day,
    .wedding-month-year {
        font-size: 1.5rem;
    }

    .wedding-date-num {
        font-size: 3.8rem;
    }

    .date-frame-wrapper {
        max-width: 330px;
    }

    .countdown-item {
        min-width: 55px;
        padding: 8px;
    }

    .countdown-number {
        font-size: 1.3rem;
    }
}

/* event/ */
/* --- Event Section Layout --- */
/* ==========================================
   SECTION EVENT LAYOUT
   ========================================== */
.event-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 50%) 100%), url(../images/bg-pohon.webp) no-repeat center center;
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.event-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    z-index: 2;
}

/* ==========================================
   EVENT CARD STYLING
   ========================================== */
.event-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 10px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(40px);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* Judul Utama Acara (Symphony Pro) */
.event-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    /* Aksen Gold */
    font-size: 2.2rem;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 1;
}

.session-badge {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-top: 4px;
}

/* ==========================================
   DATE DIVIDER LAYOUT (Sesuai Gambar 1 & 2)
   ========================================== */
.event-date-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.8rem 0;
    color: #ffffff;
}

.event-day,
.event-month {

    font-size: 1.3rem;
    width: 35%;
    letter-spacing: 1px;
}

.event-day {
    text-align: right;
    padding-right: 15px;
}

.event-month {
    text-align: left;
    padding-left: 15px;
}

/* Wadah Tanggal Tengah & Garis Vertikal Kiri Kanan */
.event-center-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    padding: 0 10px;
    border-left: 1.5px solid rgba(226, 203, 153, 0.5);
    /* Garis kiri */
    border-right: 1.5px solid rgba(226, 203, 153, 0.5);
    /* Garis kanan */
}

.date-num {

    font-size: 2.5rem;
    line-height: 1;
}

.date-year {

    font-size: 1rem;
    letter-spacing: 1px;
    margin-top: 2px;
    opacity: 0.8;
}

/* ==========================================
   TIME & LOCATION TYPOGRAPHY (Arial)
   ========================================== */
.event-time-info {
    margin-bottom: 1.5rem;
}

.label-pukul {

    color: #e2cb99;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.time-range {

    color: #ffffff;
    font-size: 1.3rem;
}

.event-location-info {
    margin-bottom: 2rem;
    padding: 0 10px;
}

.location-name {
    font-family: 'Symphony Pro', sans-serif;
    /* Mengikuti style Gambar 4 */
    color: #e2cb99;
    font-size: 2.6rem;
    font-weight: normal;
    margin-bottom: 0.6rem;
}

.location-address {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.8;
}

/* ==========================================
   BUTTON MAPS STYLING (Sesuai Gambar 3)
   ========================================== */
.btn-maps {
    display: inline-block;
    background-color: #e2cb99;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 35px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-maps:hover {
    background-color: #f1dfb8;
    transform: translateY(-2px);
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.event-section.reveal .event-card {
    opacity: 1;
    transform: translateY(0);
}

/* Mengatur Jeda Kemunculan Kartu Berurutan */
.event-section.reveal .event-card:nth-child(1) {
    transition-delay: 0s;
}

.event-section.reveal .event-card:nth-child(2) {
    transition-delay: 0.25s;
}

.event-section.reveal .event-card:nth-child(3) {
    transition-delay: 0.5s;
}

/* Responsive Handling */
@media (max-width: 414px) {
    .event-title {
        font-size: 1.9rem;
    }

    .location-name {
        font-size: 2.4rem;
    }

    .event-day,
    .event-month {
        font-size: 1.1rem;
    }

    .date-num {
        font-size: 2.1rem;
    }

    .event-container {
        gap: 2.5rem;
    }
}

/* ==========================================
   SECTION DRESSCODE LAYOUT
   ========================================== */
.dresscode-section {
    width: 100%;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Konsisten menggunakan latar belakang pohon gelap */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.dresscode-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
}

/* Typography Penataan Kepala Section (Sesuai Gambar Referensi) */
.dc-main-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    /* Warna emas senada dengan tema utama */
    font-size: 4.5rem;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 0.8rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.dc-sub-title {

    color: #ffffff;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 1.2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.2s;
}

.dc-instruction {
    font-family: 'Awesome Lathusca', cursive;
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1.4;
    max-width: 320px;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.3s;
}

/* ==========================================
   COLOR PALETTE GRID BLOCK (3 Kolom Simetris)
   ========================================== */
.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 1.5rem;
    /* Jarak vertikal 2.5rem, horisontal 1.5rem */
    width: 100%;
    max-width: 380px;
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Lingkaran Swatch */
.color-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* State Awal Animasi Lingkaran */
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

/* Kode Hex di Bawah Lingkaran */
.color-hex {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.75rem;
    margin-top: 0.8rem;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.dresscode-section.reveal .dc-main-title,
.dresscode-section.reveal .dc-sub-title,
.dresscode-section.reveal .dc-instruction {
    opacity: 1;
    transform: translateY(0);
}

/* Efek Muncul Berurutan (*Staggered*) untuk Lingkaran & Teks Hex */
.dresscode-section.reveal .color-circle,
.dresscode-section.reveal .color-hex {
    opacity: 1;
    transform: scale(1);
}

/* Pengaturan Delay Setiap Lingkaran */
.dresscode-section.reveal .color-item:nth-child(1) .color-circle,
.dresscode-section.reveal .color-item:nth-child(1) .color-hex {
    transition-delay: 0.4s;
}

.dresscode-section.reveal .color-item:nth-child(2) .color-circle,
.dresscode-section.reveal .color-item:nth-child(2) .color-hex {
    transition-delay: 0.5s;
}

.dresscode-section.reveal .color-item:nth-child(3) .color-circle,
.dresscode-section.reveal .color-item:nth-child(3) .color-hex {
    transition-delay: 0.6s;
}

.dresscode-section.reveal .color-item:nth-child(4) .color-circle,
.dresscode-section.reveal .color-item:nth-child(4) .color-hex {
    transition-delay: 0.7s;
}

.dresscode-section.reveal .color-item:nth-child(5) .color-circle,
.dresscode-section.reveal .color-item:nth-child(5) .color-hex {
    transition-delay: 0.8s;
}

.dresscode-section.reveal .color-item:nth-child(6) .color-circle,
.dresscode-section.reveal .color-item:nth-child(6) .color-hex {
    transition-delay: 0.9s;
}

/* Responsive Handling untuk Layar Mobile Kecil */
@media (max-width: 414px) {
    .dc-main-title {
        font-size: 3.5rem;
    }

    .dc-sub-title {
        font-size: 1.3rem;
    }

    .dc-instruction {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .color-circle {
        width: 68px;
        height: 68px;
    }

    .color-palette-grid {
        gap: 1.8rem 1rem;
    }
}

/* story/ */
/* ==========================================
   SECTION STORY TIMELINE LAYOUT
   ========================================== */
.story-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.story-container {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* Typography Title (Awesome Lathusca & Arial) */
.story-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.story-description {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.2s;
}

/* Container Utama Trek Garis Tengah */
.story-timeline {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* Membuat Garis Vertikal Samar di Bagian Belakang */
.story-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, rgba(226, 203, 153, 0) 0%, rgba(226, 203, 153, 0.4) 15%, rgba(226, 203, 153, 0.4) 85%, rgba(226, 203, 153, 0) 100%);
    transform: translateX(-50%);
}

/* ==========================================
   STORY BLOK CARDS (Zig-zag Layout)
   ========================================== */
.story-item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Penanda Titik Tahun di Tengah */
.story-badge {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    background-color: #e2cb99;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Struktur Kotak Isi Konten */
.story-card {
    width: 88%;
    /* Menyisakan ruang pinggir agar tidak terpotong */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

    /* State Awal Animasi */
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

/* Set Arah Slide Transisi Berbeda */
.item-left .story-card {
    transform: translateX(-35px);
}

.item-right .story-card {
    transform: translateX(35px);
}

/* Frame Foto */
.story-photo-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.story-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Detail Teks Cerita */
.story-text-content {
    padding: 20px;
    text-align: left;
}

.story-text-content h3 {
    font-family: 'Symphony Pro', sans-serif;
    color: #e2cb99;
    font-size: 1.4rem;
    font-weight: normal;
    margin-bottom: 8px;
}

.story-text-content p {
    font-family: Arial, Helvetica, sans-serif;
    color: #e0e0e0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.story-section.reveal .story-title,
.story-section.reveal .story-description,
.story-section.reveal .story-card {
    opacity: 1;
    transform: translate(0);
}

/* Staggered Delay untuk Masing-masing Babak */
.story-section.reveal .story-item:nth-child(1) .story-card {
    transition-delay: 0.2s;
}

.story-section.reveal .story-item:nth-child(2) .story-card {
    transition-delay: 0.4s;
}

.story-section.reveal .story-item:nth-child(3) .story-card {
    transition-delay: 0.6s;
}

/* Responsive Adjustments */
@media (max-width: 414px) {
    .story-title {
        font-size: 2.1rem;
    }

    .story-photo-wrapper {
        height: 220px;
    }

    .story-text-content h3 {
        font-size: 1.25rem;
    }
}

/* gallery/ */
/* --- Gallery Section Layout --- */
/* ==========================================
   SECTION GALLERY LAYOUT
   ========================================== */
.gallery-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.gallery-container {
    width: 100%;
    max-width: 460px;
    /* Standar grid kolom tunggal rapi untuk seluler */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    text-align: center;
}

/* Typography Title (Awesome Lathusca & Arial) */
.gallery-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.gallery-description {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.2s;
}

/* ==========================================
   RESPONSIVE YOUTUBE EMBED 
   ========================================== */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* Aspek Rasio 16:9 Sempurna */
    height: 0;
    margin-bottom: 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* State Awal Animasi Video */
    opacity: 0;
    transform: scale(0.95);
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================
   PHOTO GRID MASONRY INTERACTIVE STYLE
   ========================================== */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Kolom sejajar */
    grid-auto-rows: 140px;
    gap: 12px;
    width: 100%;
}

.grid-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    /* State Awal Animasi Gambar */
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}

/* Variasi Ukuran Elemen Grid Mosaik */
.grid-item.tall {
    grid-row: span 2;
    /* Memakan 2 baris vertikal */
}

.grid-item.wide {
    grid-column: span 2;
    /* Memakan 2 kolom penuh horizontal */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Efek Hover Masking Kursor */
.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 43, 30, 0.4);
    /* Overlay hijau zaitun transparan */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zoom-icon {
    color: #e2cb99;
    font-size: 1.2rem;
    transform: scale(0.7);
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.06);
}

.grid-item:hover .img-overlay {
    opacity: 1;
}

.grid-item:hover .zoom-icon {
    transform: scale(1);
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.gallery-section.reveal .gallery-title,
.gallery-section.reveal .gallery-description,
.gallery-section.reveal .video-wrapper,
.gallery-section.reveal .grid-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Pengaturan Delay Efek Muncul Beruntun untuk Item Foto */
.gallery-section.reveal .grid-item:nth-child(1) {
    transition-delay: 0.4s;
}

.gallery-section.reveal .grid-item:nth-child(2) {
    transition-delay: 0.5s;
}

.gallery-section.reveal .grid-item:nth-child(3) {
    transition-delay: 0.6s;
}

.gallery-section.reveal .grid-item:nth-child(4) {
    transition-delay: 0.7s;
}

.gallery-section.reveal .grid-item:nth-child(5) {
    transition-delay: 0.8s;
}

.gallery-section.reveal .grid-item:nth-child(6) {
    transition-delay: 0.9s;
}

/* Responsive Adjustments */
@media (max-width: 414px) {
    .gallery-title {
        font-size: 2.1rem;
    }

    .photos-grid {
        grid-auto-rows: 110px;
        gap: 8px;
    }
}

/* --- Media Queries untuk Layout Grid yang Adaptif --- */

/* gift/ */
/* --- Gift Section Styling --- */
/* ==========================================
   SECTION GIFT LAYOUT
   ========================================== */
.gift-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.gift-container {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    text-align: center;
}

/* Icon Kado Component */
.gift-icon-wrapper {
    margin-bottom: 1rem;
    color: #e2cb99;
    /* Sentuhan warna emas tema */
    opacity: 0;
    transform: scale(0.5);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Header Text (Symphony Pro & Arial) */
.gift-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    font-size: 2.3rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.gift-description {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.7rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    padding: 0 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.2s;
}

/* Wrapper Opsi Kartu */
.gift-options-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

/* ==========================================
   GIFT CARDS DESIGN (Amplop & Fisik)
   ========================================== */
.gift-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: left;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    /* State Awal Sebelum Scroll */
    opacity: 0;
    transform: translateY(35px);
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Delay Animasi Kartu Bersamaan di Bawah Teks */
.gift-options-wrapper .gift-card:nth-child(1) {
    transition-delay: 0.4s;
}

.gift-options-wrapper .gift-card:nth-child(2) {
    transition-delay: 0.55s;
}

/* Subtitle Kartu (Menggunakan Arial Tebal/Bold) */
.card-subtitle {
    font-family: Arial, Helvetica, sans-serif;
    color: #e2cb99;
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(226, 203, 153, 0.2);
    padding-bottom: 6px;
}

/* Item Rekening Bank */
.account-item {
    margin-bottom: 2rem;
}

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

.bank-name {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: normal;
    margin-bottom: 2px;
}

.account-holder {
    font-family: Arial, Helvetica, sans-serif;
    color: #b1c2b5;
    /* Warna hijau sage pudar agar teks nama lebih teduh */
    font-size: 0.85rem;
}

/* Detail Alamat Kado Fisik */
.address-text {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.address-text span {
    display: block;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
}

/* Tautan Google Maps */
.maps-inline-link {
    display: inline-flex;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: normal;
    transition: opacity 0.2s ease;
}

.maps-inline-link:hover {
    opacity: 0.8;
}

.pin-emoji {
    margin-right: 6px;
    font-size: 1rem;
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.gift-section.reveal .gift-icon-wrapper {
    opacity: 1;
    transform: scale(1);
}

.gift-section.reveal .gift-title,
.gift-section.reveal .gift-description,
.gift-section.reveal .gift-card {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Scaling */
@media (max-width: 414px) {
    .gift-title {
        font-size: 1.9rem;
    }

    .card-subtitle {
        font-size: 1.05rem;
    }

    .bank-name,
    .address-text {
        font-size: 0.85rem;
    }

    .gift-container {
        max-width: 100%;
    }
}

/* ==========================================
   ADDED UPDATE: BANK ROW & COPY BUTTON
   ========================================== */
.account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    width: 100%;
}

.bank-logo {
    height: 18px;
    /* Mengatur tinggi logo proporsional dengan teks */
    width: auto;
    object-fit: contain;
    display: inline-block;
}

.bank-number {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Desain Tombol Salin Minimalis Premium */
.btn-copy {
    background: rgba(226, 203, 153, 0.15);
    border: 1px solid rgba(226, 203, 153, 0.4);
    color: #e2cb99;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    /* Mendorong tombol otomatis ke ujung kanan */
}

.btn-copy:hover {
    background: #e2cb99;
    color: #1a1a1a;
}

.btn-copy.copied {
    background: #4a634e;
    border-color: #8fbc94;
    color: #ffffff;
}

/* rsvp/ */
/* --- RSVP Section Styling --- */
/* ==========================================
   SECTION RSVP LAYOUT
   ========================================== */
.rsvp-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-size: cover;
    padding: 80px 20px;
    overflow: hidden;
}

.rsvp-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    z-index: 2;
    text-align: center;
}

/* Header Text Styling (Symphony Pro & Arial) */
.rsvp-title {
    font-family: 'Awesome Lathusca', cursive;
    color: #e2cb99;
    font-size: 2.3rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.rsvp-description {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.7rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.2s;
    margin-bottom: 2.5rem;
}

/* ==========================================
   FORM INPUT COMPONENT STYLING
   ========================================== */
.rsvp-form {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 25px 20px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    color: #e2cb99;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #e2cb99;
}

.form-group select option {
    background-color: #1a1a1a;
    color: #ffffff;
}

.btn-submit-rsvp {
    width: 100%;
    background-color: #e2cb99;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: bold;
    padding: 14px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 0.5rem;
}

.btn-submit-rsvp:hover {
    background-color: #f1dfb8;
    transform: translateY(-1px);
}

/* ==========================================
   NOTE BOX COMPONENT
   ========================================== */
.rsvp-note-box {
    width: 100%;
    background: rgba(226, 203, 153, 0.1);
    border-left: 3px solid #e2cb99;
    padding: 15px;
    border-radius: 0 12px 12px 0;
    text-align: left;
    margin-bottom: 3rem;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease 0.4s;
}

.rsvp-note-box .note-title {
    font-family: Arial, Helvetica, sans-serif;
    color: #e2cb99;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.rsvp-note-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.rsvp-note-box ul li {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.5;
    position: relative;
    padding-left: 12px;
    margin-bottom: 4px;
}

.rsvp-note-box ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #e2cb99;
}

.rsvp-note-box ul li span {
    color: #e2cb99;
    font-weight: bold;
}

/* ==========================================
   WISHING WALL / LIST UCAPAN FEEDS
   ========================================== */
.wishes-display-wrapper {
    width: 100%;
    text-align: left;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s ease 0.5s;
}

.wishes-count {
    font-family: 'Symphony Pro', sans-serif;
    color: #e2cb99;
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 8px;
}

.wishes-feed-container {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 5px;
}

/* Kustomisasi Scrollbar Kanan ucapan */
.wishes-feed-container::-webkit-scrollbar {
    width: 4px;
}

.wishes-feed-container::-webkit-scrollbar-thumb {
    background: rgba(226, 203, 153, 0.3);
    border-radius: 10px;
}

.wish-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
}

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

.wish-sender {
    color: #ffffff;
    font-size: 1.05rem;
}

/* Badge Kehadiran */
.badge-status {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.badge-status.hadir {
    background: rgba(74, 99, 78, 0.3);
    color: #8fbc94;
    border: 1px solid rgba(143, 188, 148, 0.4);
}

.badge-status.ragu-ragu {
    background: rgba(226, 203, 153, 0.15);
    color: #e2cb99;
    border: 1px solid rgba(226, 203, 153, 0.3);
}

.wish-text {
    font-family: Arial, Helvetica, sans-serif;
    color: #e0e0e0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.rsvp-section.reveal .rsvp-title,
.rsvp-section.reveal .rsvp-description,
.rsvp-section.reveal .rsvp-form,
.rsvp-section.reveal .rsvp-note-box,
.rsvp-section.reveal .wishes-display-wrapper {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 414px) {
    .rsvp-title {
        font-size: 1.9rem;
    }

    .form-group label {
        font-size: 0.95rem;
    }
}

/* closing/ */
/* ==========================================
   SECTION CLOSING LAYOUT
   ========================================== */
.closing-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Latar belakang pohon gelap dengan gradasi penutup pekat di bagian bawah */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.85) 100%);
    background-size: cover;
    padding: 100px 20px 40px 20px;
    /* Padding bawah disesuaikan untuk footer */
    overflow: hidden;
}

.closing-container {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
    min-height: calc(100vh - 140px);
    /* Memastikan kontainer mengisi ruang proporsional */
    justify-content: center;
}

/* ==========================================
   TYPOGRAPHY & CONTENT BLOCKS
   ========================================== */

/* Paragraf Penutup (Arial Minimalis Clean) */
.closing-paragraph {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.7;
    letter-spacing: 0.3px;
    margin-bottom: 3.5rem;
    padding: 0 15px;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(25px);
    transition: all 1.2s ease;
}

/* Signature Nama Pengantin (Awesome Lathusca Gold) */
.signature-names {
    font-family: 'Symphony Pro', sans-serif;
    color: #e2cb99;
    /* Aksen Gold mengadopsi mockup */
    font-size: 4rem;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 2rem;

    /* State Awal Animasi */
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.2s ease 0.3s;
}

/* Hashtag Penutup */
.wedding-hashtag {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease 0.5s;
    margin-bottom: auto;
    /* Mendorong footer agar otomatis menetap di dasar layar */
}

/* ==========================================
   FOOTER COMPONENTS (Amorra.id)
   ========================================== */
.wedding-footer {
    width: 100%;
    margin-top: 4rem;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    /* State Awal Animasi */
    opacity: 0;
    transition: opacity 1.5s ease 0.7s;
}

.wedding-footer p {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.6;
}

.wedding-footer p i {
    color: #ff4d4d;
    /* Warna merah hati fontawesome */
    margin: 0 2px;
    animation: pulseHeart 1.5s infinite;
}

/* Animasi Detak Jantung pada Icon Footer */
@keyframes pulseHeart {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* ==========================================
   INTERSECTION OBSERVER REVEAL STATES
   ========================================== */
.closing-section.reveal .closing-paragraph,
.closing-section.reveal .signature-names,
.closing-section.reveal .wedding-hashtag,
.closing-section.reveal .wedding-footer {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Handler untuk Layar Handphone Kecil */
@media (max-width: 414px) {
    .closing-paragraph {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .signature-names {
        font-size: 3.2rem;
    }

    .closing-container {
        min-height: auto;
    }
}