@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%);
            }
        }

        /* Animasi Pohon Melambai (Swaying) */
        @keyframes sway {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(2deg);
            }

            /* Goyang sedikit ke kanan */
            100% {
                transform: rotate(0deg);
            }
        }

        /* Animasi Masuk Pohon Kanan 2 (Rotasi 346deg) */
        @keyframes slideInTreeRight2 {
            from {
                opacity: 0;
                transform: translateX(100px) rotate(346deg);
            }

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

        /* Animasi Masuk Pohon Kanan 3 (Rotasi -15deg) */
        @keyframes slideInTreeRight3 {
            from {
                opacity: 0;
                transform: translateX(100px) rotate(-15deg);
            }

            to {
                opacity: 1;
                transform: translateX(0) rotate(-15deg);
            }
        }

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

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

        /* Animasi Sway (Goyang) tetap menggunakan variabel agar fleksibel */
        @keyframes swayMirror {
            0% {
                transform: rotate(var(--rotasi-asal));
            }

            50% {
                transform: rotate(calc(var(--rotasi-asal) + 2deg));
            }

            100% {
                transform: rotate(var(--rotasi-asal));
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* 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;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Times New Roman', Times, serif;
            margin: 0;
            padding: 0;
            color: #4a4a4a;
            height: 100%;
            overflow-x: hidden;
        }

        .wrapper {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* --- BAGIAN KIRI (DESKTOP VIEW) --- */
        .left-section {
            flex: 1.4;
            /* Ganti dengan foto prewedding utama yang senada dengan tema garden */

            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 80px 60px;
            position: relative;
            overflow: hidden;
        }

        /* Overlay Gradasi: Menggunakan nuansa Maroon Gelap ke Transparan */
        .left-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #ffffff, #839077);
            z-index: 1;
        }

        .left-content {
            position: relative;
            z-index: 3;
            color: white;
            text-align: center;
            animation: fadeInUp 1.5s ease;
        }

        /* Dekorasi Ornamen Garden di Samping */
        .left-decor {
            position: absolute;
            top: 50px;
            right: -20px;
            width: 250px;
            z-index: 2;
            opacity: 0.8;
            transform: rotate(15deg);
            pointer-events: none;
        }

        .left-garden-ornament {
            width: 100%;
            filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.3));
        }

        .left-content h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            letter-spacing: 6px;
            font-size: 0.9rem;
            margin-bottom: 0;
            text-transform: uppercase;
            color: var(--gold-text);
            /* Gunakan warna gold */
        }

        .bride-name-cursive {
            font-family: 'Great Vibes', cursive;
            /* Konsisten dengan mobile */
            font-size: 5.5rem;
            margin: 10px 0;
            font-weight: 400;
            color: white;
            text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.5);
        }

        /* Divider Baru: Line Gold dengan Icon */
        .left-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
        }

        .gold-line {
            width: 80px;
            height: 1px;
            background: var(--gold-gradient);
        }

        .gold-heart {
            color: var(--gold-text);
            font-size: 0.8rem;
        }

        .wedding-date {
            font-family: 'Montserrat', sans-serif;
            letter-spacing: 5px;
            font-weight: 400;
            font-size: 1rem;
            text-transform: uppercase;
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Responsif: Tetap disembunyikan di mobile agar fokus ke undangan */
        @media (max-width: 1024px) {
            .left-section {
                display: none;
            }
        }

        .reveal-up,
        .reveal-left,
        .reveal-right {
            opacity: 0;
            visibility: hidden;
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform, opacity;
        }

        .reveal-up {
            transform: translateY(50px);
        }

        .reveal-left {
            transform: translateX(-50px);
        }

        .reveal-right {
            transform: translateX(50px);
        }

        /* --- BAGIAN KANAN (SAMPUL ELEGAN) --- */
        .right-section {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            background: url('redgarden/images/bg-sampul-goldred.webp') no-repeat center center;
            background-size: cover;
            scroll-behavior: smooth;
        }

        .section {
            min-height: 100vh;
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

        :root {
            --primary-text: #333333;
            --text-green: #558554;
            --button-bg: #4a6741;
            --button-text: #ffffff;
            --animation-duration: 1.5s;
            --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .first-screen {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            /* Gunakan background image bg-shinta.png */
            background-image: url('../images/bg-shinta.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .first-screen-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Mengubah justify-content agar elemen menyebar ke atas dan bawah */
            justify-content: space-between;
            height: 85vh;
            /* Sedikit dikurangi agar tidak terlalu mentok layar */
            width: 100%;
            max-width: 600px;
            z-index: 10;
            padding: 40px 0;
            /* Memberi ruang di dalam container */
            box-sizing: border-box;
        }

        /* --- Animasi --- */

        /* Keyframes untuk slide-up */
        @keyframes slideUpFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* Keyframes untuk fade-in sederhana (untuk latar belakang bunga/pasangan) */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Terapkan animasi slide-up ke elemen teks dan tombol */
        .section-title,
        .couple-names,
        .guest-text,
        .cta-button {
            opacity: 0;
            animation: slideUpFadeIn var(--animation-duration) var(--ease-out) forwards;
        }

        /* Terapkan fade-in ke latar belakang gambar pasangan jika perlu dipisahkan */
        /* Namun, di sini, biarkan latar belakang (bg-shinta.png) muncul */

        /* --- Tipografi & Elemen --- */

        .section-title {
            font-size: 1.5rem;
            color: var(--primary-text);
            margin-top: 2rem;
            /* Mengatur jarak spesifik dari atas */
            font-weight: 300;
            animation-delay: 0.2s;
        }

        .couple-names {
            font-size: 3rem;
            /* Font besar dan elegan */
            color: var(--primary-text);
            margin: 0.5rem 0 0.5rem 0;
            /* Jarak atas/bawah */
            font-weight: bold;
            display: flex;
            flex-direction: column;
            line-height: 1.1;
            animation-delay: 0.4s;
            /* Delay bertahap */
        }

        .couple-names .name {
            display: block;
        }

        .couple-names .ampersand {
            font-size: 2.2rem;
            margin: 0.2rem 0;
            display: block;
        }

        .date-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-text);
            font-size: 1.3rem;
            margin: 0.5rem 0 1rem 0;
            animation-delay: 0.6s;
        }

        .date-divider::before,
        .date-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background-color: var(--primary-text);
            margin: 0 1rem;
        }

        .bottom-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin-bottom: 2rem;
            /* Jarak dari bawah layar */
        }

        .guest-text {
            font-size: 1rem;
            color: var(--text-green);
            margin-bottom: 1.5rem;
            /* Jarak antara nama tamu dan tombol */
            line-height: 1.5;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            animation-delay: 0.8s;
        }

        .guest-text .salutation {
            font-weight: 300;
        }

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

        .cta-button {
            background-color: var(--button-bg);
            color: var(--button-text);
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            border-radius: 8px;
            cursor: pointer;
            text-transform: capitalize;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, background-color 0.2s;
            margin-top: 0;
            /* Reset margin karena sudah diatur oleh container */
            animation-delay: 1.0s;
            /* Jarak dari teks tamu */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-decoration: none;
            /* Untuk tag 'a' jika digunakan */
        }

        .cta-button:hover {
            background-color: #3e5635;
            /* Sedikit lebih gelap saat hover */
            transform: translateY(-2px);
        }

        .cta-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Gunakan SVG untuk ikon email (amplop) di tombol */
        .button-icon {
            width: 18px;
            height: 18px;
            fill: currentcolor;
        }

        /* --- Media Queries --- */
        @media (max-width: 600px) {
            .section-title {
                font-size: 1.3rem;
                margin-top: 4rem;
            }

            .couple-names {
                font-size: 2.2rem;
            }

            .couple-names .ampersand {
                font-size: 1.8rem;
            }

            .date-divider {
                font-size: 1.1rem;
                margin: 0.5rem 0 1rem 0;
            }

            .guest-text {
                font-size: 0.9rem;
            }

            .guest-text .name {
                font-size: 1.1rem;
            }

            .cta-button {
                font-size: 0.9rem;
                padding: 10px 20px;
            }
        }

        .top-content {
            position: relative;
            /* padding: 40px 0px; */
            /* background-image: url(shadow-white.webp); */
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.95;
            animation: fadeInDown 1.2s forwards;
            z-index: 4;
        }

        /* Karena .top-content sudah punya animasi, kita hapus animasi individual di teks 
   agar muncul bersamaan dengan background shadow-nya */
        .the-wedding,
        .couple-names {
            opacity: 1 !important;
            animation: none !important;
        }

        /* opening/ */
        .opening-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('../images/bg-pembuka-shinta.png');
            background-size: cover;
            background-position: center;
            padding: 20px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .frame-container {
            position: relative;
            width: 100%;
            max-width: 450px;
            /* Ukuran maksimal layar HP */
            height: 70vh;
            border: 2px solid #555;
            /* Border halus seperti di gambar */
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(2px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* padding: 40px 20px; */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .opening-text-wrapper {
            text-align: center;
            z-index: 5;
            margin-bottom: 20px;
            color: #333;
        }

        .groom-name {
            font-family: 'Great Vibes', cursive;
            /* Gunakan font latin/serif yang cantik */
            font-size: 2.5rem;
            margin: 0;
        }

        .bin-text {
            font-family: 'Cinzel', serif;
            font-size: 1.8rem;
            font-weight: 400;
            margin: 5px 0;
        }

        .parents-info {
            font-family: 'EB Garamond', serif;
            font-size: 0.9rem;
            line-height: 1.4;
            margin-top: 15px;
            font-weight: 500;
        }

        .video-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Menutup seluruh frame */
            z-index: 1;
            overflow: hidden;
            border-radius: 18px;
            /* Mengikuti lekukan frame-container */
        }

        #openingVideo {
            width: 100%;
            height: 100%;
            transform: scale(1);
            /* Sedikit zoom agar border hitam youtube tidak kelihatan */
            pointer-events: none;
            /* User tidak bisa klik video */
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Efek gradasi agar teks di atas lebih terbaca */
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 10%, transparent 40%);
            z-index: 2;
        }

        .opening-text-wrapper {
            position: relative;
            z-index: 10;
            /* Pastikan teks di atas video */
            text-align: center;
            margin-top: 40px;
        }

        /* Responsif untuk layar sangat kecil */
        @media (max-width: 380px) {
            .groom-name {
                font-size: 2rem;
            }

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

            .frame-container {
                height: 70h;
            }
        }

        /* Class untuk Animasi On Scroll (Triggered by JS) */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .opening-sub {
            color: #000000;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 50px;
        }

        /* quotes/ */
        .quotes-section {
            position: relative;
            padding: 35px 20px 0 20px;
            background: linear-gradient(to bottom, #fdfdfd, #96a58d);
            /* Gradasi hijau lembut seperti gambar */
            text-align: center;
            overflow: hidden;
            min-height: 75vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .quotes-title {
            font-family: 'Great Vibes', cursive;
            font-size: 2.8rem;
            color: #4a5d45;
            margin-bottom: 30px;
        }

        /* Countdown Styles */
        .countdown-wrapper {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
            width: 100%;
        }

        .countdown-item {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(5px);
            width: 75px;
            padding: 15px 5px;
            border-radius: 50px 50px 0 0;
            /* Membuat bentuk arch/busur */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .countdown-item span {
            font-size: 1.8rem;
            font-weight: bold;
            color: #4a5d45;
            line-height: 1;
        }

        .countdown-item small {
            font-size: 0.8rem;
            color: #666;
            margin-top: 5px;
        }

        /* Quotes Text */
        .quotes-text-content {
            max-width: 500px;
            margin: 0 auto;
            padding: 0 15px;
            color: #333;
        }

        .arabic-quote {
            font-style: italic;
            font-family: 'EB Garamond', serif;
            line-height: 1.6;
            font-size: 1.05rem;
            margin-bottom: 15px;
        }

        .surah-name {
            font-weight: bold;
            font-size: 1rem;
        }

        /* Flower Footer */
        .flower-footer {
            width: 100%;
            margin-top: auto;
            /* Memaksa bunga ke paling bawah */
            line-height: 0;
        }

        .flower-footer img {
            width: 100%;
            height: auto;
            max-height: 250px;
            object-fit: cover;
        }

        /* --- Base Animation Classes (reveal-up) --- */
        .reveal-up {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1s ease-out;
        }

        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Media Query Layar HP Kecil */
        @media (max-width: 400px) {
            .countdown-item {
                width: 65px;
            }

            .quotes-title {
                font-size: 2.2rem;
            }
        }

        /* --- GLOBAL ANIMATION SYSTEM --- */

        /* State Awal (Tersembunyi) */

        .reveal-left,
        .reveal-right {
            opacity: 0;
            visibility: hidden;
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform, opacity;
        }


        .reveal-left {
            transform: translateX(-50px);
        }

        .reveal-right {
            transform: translateX(50px);
        }

        /* State Akhir (Muncul) */
        .active {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translate(0, 0) !important;
        }

        /* --- CUSTOM DELAYS (Opsional per Section) --- */
        #save-the-date .reveal-up:nth-child(1) {
            transition-delay: 0.2s;
        }

        #save-the-date .reveal-up:nth-child(2) {
            transition-delay: 0.4s;
        }

        /* couple/ */
        .couple-section {
            padding: 60px 20px 0;
            background-color: #e2ede3;
            /* Warna background hijau pucat sesuai gambar */
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .section-subtitle {
            font-family: 'Great Vibes', cursive;
            font-size: 2.5rem;
            color: #4a5d45;
            margin-bottom: 40px;
        }

        .couple-item {
            margin-bottom: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Bingkai Arch (Lengkungan di Atas) */
        .couple-img-wrapper {
            position: relative;
            width: 250px;
            height: 350px;
            margin-bottom: 20px;
        }

        .profile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 125px 125px 0 0;
            /* Membuat bentuk arch pada gambar */
            position: relative;
            z-index: 1;
        }

        .arch-frame {
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 3px solid #d4af37;
            /* Warna emas bingkai */
            border-radius: 135px 135px 0 0;
            z-index: 0;
        }

        /* Info Mempelai */
        .instagram-icon {
            display: inline-block;
            width: 35px;
            height: 35px;
            background: #fff;
            border-radius: 50%;
            padding: 7px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            transition: transform 0.3s ease;
        }

        .instagram-icon:hover {
            transform: scale(1.1);
        }

        .instagram-icon img {
            width: 100%;
            height: auto;
        }

        .couple-name {
            font-family: 'Great Vibes', cursive;
            font-size: 2rem;
            color: #333;
            margin: 10px 0;
        }

        .child-of {
            font-size: 0.9rem;
            font-weight: bold;
            color: #555;
            margin-bottom: 5px;
        }

        .parent-name {
            font-family: 'EB Garamond', serif;
            font-size: 1rem;
            line-height: 1.6;
            color: #444;
        }

        /* Simbol & di Tengah */
        .couple-divider {
            margin: 30px 0;
        }

        .ampersand-symbol {
            font-family: 'Great Vibes', cursive;
            font-size: 3.5rem;
            color: #d4af37;
            opacity: 0.6;
        }

        /* Dekorasi Bunga Bawah */
        .flower-footer {
            width: 100%;
            margin-top: 40px;
            line-height: 0;
        }

        .flower-footer img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* Animasi Base (Sesuaikan dengan observer Anda) */

        /* Countdown Section */
        .countdown-container {
            position: relative;
            /* Hilangkan margin-top negatif jika sudah menggunakan margin-bottom negatif pada slider-wrapper */
            z-index: 4;
            text-align: center;
            padding: 0 20px;
        }

        .flower-mini {
            width: 80px;
            margin-bottom: 10px;
        }

        .std-title {
            font-family: 'Pinyon Script', cursive;
            font-style: italic;
            font-size: 2.2rem;
            color: #efbc4b;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }

        /* Timer Box Style (Adopsi dari gambar referensi) */
        .timer-wrapper {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
        }

        .timer-box {
            background-color: #d4b581;
            /* Warna krem emas sesuai referensi */
            width: 70px;
            height: 70px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .timer-box span {
            font-size: 1.5rem;
            font-weight: 700;
            color: #46281e;
        }

        .timer-box p {
            font-size: 0.7rem;
            margin: 0;
            text-transform: uppercase;
            color: #46281e;
        }

        /* Button & Text */
        .btn-calendar {
            background-color: white;
            color: #333;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

        .btn-calendar:hover {
            background-color: #e91e63;
            color: white;
        }

        .std-invitation-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            line-height: 1.6;
            max-width: 320px;
            margin: 0 auto;
        }


        /* event/ */
        .event-section {
            padding: 80px 20px;
            background-image: url('../images/bg-pembuka-shinta.png');
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .event-container {
            width: 100%;
            max-width: 400px;
            position: relative;
        }

        /* Desain Bingkai Arch Emas */
        .event-arch-frame {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(5px);
            border: 5px solid #d4af37;
            /* Border emas */
            border-radius: 200px 200px 0 0;
            /* Bentuk arch sempurna */
            padding: 60px 30px 40px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .event-title {
            font-family: 'Great Vibes', cursive;
            font-size: 2.2rem;
            color: #333;
            margin-bottom: 20px;
        }

        /* Penataan Tanggal */
        .event-date {
            margin-bottom: 30px;
            color: #4a5d45;
        }

        .event-date .day {
            font-size: 1.2rem;
            letter-spacing: 2px;
            font-weight: 600;
        }

        .event-date .date-number {
            font-size: 3.5rem;
            font-weight: bold;
            margin: 5px 0;
            line-height: 1;
        }

        .event-date .month-year {
            font-size: 1.1rem;
            letter-spacing: 1px;
        }

        /* Detail Acara */
        .event-detail-item {
            margin-bottom: 25px;
            font-family: 'EB Garamond', serif;
            color: #444;
        }

        .detail-label {
            font-weight: bold;
            text-decoration: underline;
            margin-bottom: 5px;
            font-size: 1rem;
        }

        .event-detail-item p {
            margin: 3px 0;
            font-size: 0.95rem;
        }

        .venue-name {
            font-weight: bold;
            font-size: 1.1rem;
        }

        .note {
            font-style: italic;
            font-size: 0.8rem;
            display: block;
            margin-top: 5px;
        }

        /* Tombol Maps */
        .maps-button {
            display: inline-block;
            background-color: #5d6d53;
            /* Hijau gelap estetik */
            color: white;
            padding: 12px 35px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .maps-button:hover {
            background-color: #4a5d45;
            transform: translateY(-2px);
        }

        /* Base Animasi */
        .reveal-up {
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsif untuk layar kecil */
        @media (max-width: 380px) {
            .event-arch-frame {
                padding: 40px 20px 30px;
                border-width: 3px;
            }

            .date-number {
                font-size: 2.8rem;
            }
        }

        /* Button Google Map Gold Pill */
        .btn-google-maps {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--gold-gradient);
            color: var(--maroon-solid);
            padding: 10px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.9rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: 0.3s ease;
        }

        .btn-google-maps:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(191, 149, 63, 0.4);
        }

        /* story/ */
        /* --- STORY SECTION --- */
        .section-story {
            padding: 100px 20px;
            background-color: #fffaf5;
            /* Cream lembut agar warna gold & green menonjol */
            overflow: hidden;
        }

        .story-container {
            max-width: 900px;
            margin: 0 auto;
        }

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

        .story-main-title {
            font-family: 'Great Vibes', cursive;
            font-size: 3.5rem;
            color: #800000;
            /* Deep Red/Maroon */
            margin-bottom: 10px;
        }

        .story-line {
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, transparent, #d4af37, transparent);
            /* Antique Gold */
            margin: 0 auto;
        }

        /* --- STORY ITEM LAYOUT --- */
        .story-item {
            display: flex;
            align-items: center;
            margin-bottom: 80px;
            gap: 40px;
        }

        /* Membuat Layout Zigzag */
        .story-item.item-reverse {
            flex-direction: row-reverse;
        }

        /* --- IMAGE STYLING --- */
        .story-image-box {
            flex: 1;
            position: relative;
            padding: 15px;
        }

        .story-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 15px;
            z-index: 2;
            position: relative;
            filter: sepia(20%);
            /* Memberikan kesan vintage/classic */
        }

        /* Frame Emas di belakang foto */
        .image-frame-gold {
            position: absolute;
            top: 0;
            left: 0;
            width: 90%;
            height: 90%;
            border: 3px solid #d4af37;
            /* Gold */
            border-radius: 15px;
            z-index: 1;
            transform: translate(25px, 25px);
            /* Offset agar terlihat artistik */
        }

        /* --- TEXT STYLING --- */
        .story-text {
            flex: 1;
        }

        .story-date {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            color: #2d5a27;
            /* Forest Green */
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .story-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            color: #800000;
            /* Red */
            margin-bottom: 15px;
        }

        .story-text p {
            font-family: 'Crimson Text', serif;
            font-size: 1.1rem;
            color: #444;
            line-height: 1.6;
        }

        /* Responsive Mobile */
        @media (max-width: 768px) {

            .story-item,
            .story-item.item-reverse {
                flex-direction: column;
                gap: 30px;
                text-align: center;
            }

            .story-image-box {
                width: 100%;
            }

            .image-frame-gold {
                transform: translate(15px, 15px);
            }
        }

        /* --- ANIMATION SYSTEM --- */

        /* State Awal: Tersembunyi di kiri */
        .reveal-left {
            opacity: 0;
            transform: translateX(-80px);
            /* Geser ke kiri */
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform, opacity;
        }

        /* State Awal: Tersembunyi di kanan */
        .reveal-right {
            opacity: 0;
            transform: translateX(80px);
            /* Geser ke kanan */
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform, opacity;
        }

        /* State Akhir: Muncul ke posisi normal */
        .reveal-left.active,
        .reveal-right.active {
            opacity: 1;
            transform: translateX(0);
        }

        /* Tambahan: Delay beruntun jika ada elemen yang berdekatan */
        .delay-1 {
            transition-delay: 0.2s;
        }

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

        /* galeri/ */
        .gallery-section {
            padding: 80px 20px;
            background-color: var(--maroon-solid);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .gallery-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .gallery-title {
            font-family: 'Pinyon Script', cursive;
            font-size: 3.5rem;
            color: var(--gold-gradient);
            margin-bottom: 10px;
        }

        .gallery-subtitle {
            font-size: 1rem;
            color: var(--gold-text);
            margin-bottom: 50px;
        }

        /* Video Styling */
        .video-wrapper {
            position: relative;
            width: 100%;
            max-width: 800px;
            /* margin: 0 auto 0px; */
            padding: 10px;
            background: var(--gold-gradient);
            /* Frame Emas */
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(128, 0, 0, 0.15);
        }

        .video-frame {
            position: relative;
            padding-bottom: 56.25%;
            /* Ratio 16:9 */
            height: 0;
            overflow: hidden;
            border-radius: 10px;
        }

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

        .flower-video-decor {
            position: absolute;
            width: 90px;
            top: -40px;
            right: -30px;
            z-index: 3;
        }

        /* Photo Grid Styling */
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* 2 kolom di mobile */
            grid-auto-rows: 150px;
            /* Tinggi dasar baris */
            gap: 12px;
            padding: 0 10px;
        }

        .photo-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            /* Lebih rounded sesuai gambar referensi */
            border: 2px solid var(--gold-text);
            display: block;
        }

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

        /* Variasi Ukuran Item */
        .photo-item.tall {
            grid-row: span 2;
            /* Mengambil 2 baris (lebih tinggi) */
        }

        .photo-item.big {
            grid-row: span 2;
            grid-column: span 1;
        }

        .photo-item:hover img {
            transform: scale(1.1);
        }

        /* Styling Video Frame */
      

        .video-frame {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 15px;
        }

        .flower-video-decor {
            position: absolute;
            width: 100px;
            top: -45px;
            right: -35px;
            z-index: 3;
        }

        .flower-gallery-bottom {
            width: 82px;
            margin-top: -130px;
            opacity: 0.9;
            margin-left: -38px;
        }

        /* Responsif untuk Tablet & Desktop */
        @media (min-width: 768px) {
            .photo-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 3 kolom di layar besar */
                grid-auto-rows: 200px;
                gap: 20px;
            }

            .photo-item.big {
                grid-column: span 2;
                /* Gambar utama jadi lebih lebar di desktop */
                grid-row: span 2;
            }
        }

        .gift-section {
            padding: 50px 20px;
            background-color: #839077;
            color: #e8e8e8;
            text-align: center;
            min-height: 80vh;
        }

        .gift-container {
            max-width: 500px;
            margin: 0 auto;
        }

        .gift-title {
            font-family: 'Great Vibes', cursive;
            font-size: 3rem;
            margin-bottom: 25px;
            color: #ffffff;
        }

        .gift-intro {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 40px;
            font-family: 'EB Garamond', serif;
        }

        /* Card Style */
        .bank-card,
        .address-card {
            margin-bottom: 35px;
        }

        .bank-name,
        .address-label {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .account-holder,
        .address-detail {
            font-size: 1rem;
            margin-bottom: 12px;
            opacity: 0.9;
        }

        /* Tombol Copy */
        .btn-copy {
            background-color: transparent;
            border: 1px solid #ffffff;
            color: #ffffff;
            padding: 6px 25px;
            font-size: 0.8rem;
            letter-spacing: 1px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .btn-copy:hover {
            background-color: #ffffff;
            color: #839077;
        }

        /* Footer Section */
        .gift-footer {
            margin-top: 50px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 40px;
        }

        .closing-statement {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 30px;
        }

        .with-love {
            font-size: 1rem;
            margin-bottom: 10px;
        }

        .couple-signature {
            font-family: 'Great Vibes', cursive;
            font-size: 2.5rem;
            color: #ffffff;
        }

        /* Base Animasi reveal-up */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* rsvp/ */
        .rsvp-section {
            padding: 0px 20px;
            background: linear-gradient(to bottom, rgb(131 144 119) 0%, rgb(131 144 119) 30%, rgb(255 255 255) 70%, #ffffff 100%);
            display: flex;
            justify-content: center;
            min-height: 50vh;
        }

        .rsvp-container {
            width: 100%;
            max-width: 600px;
        }

        .rsvp-title {
            font-family: 'Great Vibes', cursive;
            font-size: 3rem;
            color: #4a5d45;
            text-align: center;
            margin-bottom: 10px;
        }

        .rsvp-subtitle {
            text-align: center;
            font-family: 'EB Garamond', serif;
            color: #ffffff;
            margin-bottom: 40px;
        }

        /* Form Styles */
        .rsvp-form {
            background: #ffffff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            margin-bottom: 50px;
        }

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

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-family: inherit;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }

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

        .btn-submit {
            width: 100%;
            padding: 15px;
            background-color: #4a5d45;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-submit:hover {
            background-color: #3e4d3a;
        }

        .divider {
            border: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, #ccc, transparent);
            margin: 40px 0;
        }

        /* Wishes Display */
        .wishes-count {
            font-family: 'EB Garamond', serif;
            color: #4a5d45;
            margin-bottom: 20px;
        }

        .wishes-list {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
            text-align: left;
        }

        .wish-item {
            background: white;
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 15px;
            box-shadow: 3px 0px 10px rgb(0 0 0 / 39%);
        }

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

        .status-badge {
            background: #eef2eb;
            color: #4a5d45;
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: bold;
        }

        .wish-text {
            font-size: 0.95rem;
            color: #444;
            line-height: 1.5;
        }

        .wish-time {
            display: block;
            margin-top: 10px;
            color: #999;
            font-size: 0.8rem;
        }

        /* Custom Scrollbar untuk List Ucapan */
        .wishes-list::-webkit-scrollbar {
            width: 5px;
        }

        .wishes-list::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .wishes-list::-webkit-scrollbar-thumb {
            background: #839077;
            border-radius: 10px;
        }

        /* Animasi reveal-up */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* closing/ */
        /* --- CLOSING SECTION DENGAN FOTO BACKGROUND --- */
        .closing-section {
            padding: 100px 20px 0 20px;
            background: linear-gradient(to bottom, #ffffff, #839077);
            /* Gradasi kembali ke terang */
            text-align: center;
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .closing-container {
            width: 100%;
            max-width: 600px;
        }

        .closing-text {
            font-family: 'EB Garamond', serif;
            font-size: 1.1rem;
            line-height: 1.8;
            color: #4a5d45;
            /* Teks putih di atas area hijau sage */
            margin-bottom: 40px;
        }

        .closing-greeting {
            font-family: 'EB Garamond', serif;
            font-size: 1rem;
            color: #4a5d45;
            margin-bottom: 10px;
            font-style: italic;
        }

        .closing-couple-names {
            margin-bottom: 40px;
        }

        .closing-couple-names h2 {
            font-family: 'Great Vibes', cursive;
            font-size: 3.5rem;
            color: #4a5d45;
            margin: 0;
            line-height: 1.2;
        }

        .closing-couple-names .ampersand {
            font-family: 'Great Vibes', cursive;
            font-size: 2.5rem;
            color: #d4af37;
            /* Aksen emas pada ampersand */
            display: block;
            margin: 5px 0;
        }

        .closing-hashtag {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 60px;
        }

        .closing-hashtag span {
            font-family: 'EB Garamond', serif;
            font-size: 1rem;
            letter-spacing: 3px;
            color: #ffffff;
            font-weight: bold;
        }

        /* Main Footer Styles */
        .main-footer {
            width: 100%;
            padding: 30px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .main-footer p {
            font-size: 0.85rem;
            color: #ffffff;
            letter-spacing: 1px;
        }

        .main-footer i {
            color: #e74c3c;
            /* Warna hati merah */
            margin: 0 3px;
        }

        /* --- Animasi --- */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1s ease-out;
        }

        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsif Layar Kecil */
        @media (max-width: 480px) {
            .closing-couple-names h2 {
                font-size: 2.8rem;
            }

            .closing-text {
                font-size: 1rem;
            }
        }