@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Newsreader:wght@400;700&family=Playfair+Display:wght@700&family=Tangerine:wght@400;700&display=swap');

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

        html {
            scroll-behavior: smooth;
        }

        body {
            overflow: hidden; 
            background-color: #000;
        }

        /* =========================================
           SECTION 1: HALAMAN COVER (REVISI)
           ========================================= */
        .cover-page {
            position: relative;
            width: 100%;
            height: 100vh;
            height: 100dvh; /* Mencegah terpotong UI browser mobile */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Ubah ke center agar tidak terlempar ke ujung layar */
            align-items: center;
            padding: 20px; /* Hapus padding vh yang terlalu besar */
            text-align: center;
            background-color: #ffffff; /* Latar terang */
            background-image: url('assets/bg-motif.webp');
            background-size: cover;
            background-position: center;
            overflow: hidden;
            z-index: 10;
            gap: 40px;
        }

        .cover-page::before,
        .cover-page::after {
            display: none !important;
        }

        /* --- ORNAMEN BUNGA --- */
        .ornament-top-left {
            position: absolute;
            top: 0;
            left: 0;
            width: 55%; 
            max-width: 250px;
            z-index: 2; 
            pointer-events: none;
        }

        .ornament-bottom-right {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 55%;
            max-width: 250px;
            z-index: 2;
            pointer-events: none;
        }

        /* --- KONTEN UTAMA --- */
        .header-section, 
        .footer-section, 
        .envelope-container {
            position: relative;
            z-index: 5; /* Memastikan teks dan amplop selalu di atas bunga */
            width: 100%;
        }

        /* Header */
        .wedding-of {
            font-family: 'Great Vibes', cursive;
            font-size: 1.85rem;
            font-weight: 400;
            margin-bottom: 5px;
            color: #3b0009;
        }

        .names {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            text-transform: uppercase;
            font-weight: 700;
            color: #3b0009;
            line-height: 1.1;
            text-shadow: none; /* Hapus bayangan agar bersih */
        }

        /* Amplop */
        .envelope-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: -40px;
        }

        .envelope-img {
            width: 85%;
            max-width: 320px;
            height: auto;
            cursor: pointer;
            transition: transform 0.2s ease;
            filter: drop-shadow(0px 8px 15px rgba(0,0,0,0.25)); /* Efek kedalaman amplop */
        }

        #btn-open:active {
            transform: scale(0.95);
        }

        .envelope-instruction {
            font-family: 'Newsreader', serif;
            font-size: 0.85rem;
            color: #3b0009;
            margin-top: -40px;
            font-weight: 500;
        }

        /* Footer */
        .to-text {
            font-family: 'Newsreader', serif;
            font-size: 1rem;
            margin-bottom: 5px;
            color: #3b0009;
        }

        .guest-name {
            font-family: 'Newsreader', serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: #3b0009;
        }

        /* =========================================
           SECTION 3: HALAMAN DOA & KUTIPAN
           ========================================= */
        .quote-section {
            position: relative;
            width: 100%;
            max-width: 1080px;
            aspect-ratio: 1080 / 1700;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f2eeeb;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
        }

        .frame-wrapper {
            position: relative;
            width: 118%; 
            max-width: 480px; 
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

        .quote-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 63%; 
            height: 72%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #f2eeeb;
            font-family: 'Newsreader', serif;
            box-sizing: border-box;
            padding: 0 5px;
        }

        .bismillah {
            font-size: clamp(14.5px, 4.7vw, 2rem); 
            margin-bottom: 8px;
        }

        .quote-text {
            font-size: clamp(8px, 3vw, 12px); 
            line-height: 1.5;
            padding: 10px 10px;
        }

        .quote-source {
            font-size: clamp(11px, 3.4vw, 14.5px);
            margin-top: 4px;
        }

        /* =========================================
        ANIMASI SCROLL MEWAH (UPDATE ANTI BENTROK)
        ========================================= */
        .fade-scroll-elegant {
            opacity: 0;
            translate: 0 40px;
            transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        translate 1.5s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, translate;
        }

        .fade-scroll-elegant.is-visible {
            opacity: 1;
            translate: 0 0;
        }

        .fade-slide-left {
            opacity: 0;
            translate: -40px 0;
            transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        translate 1.5s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, translate;
        }

        .fade-slide-right {
            opacity: 0;
            translate: 40px 0;
            transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        translate 1.5s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, translate;
        }

        .fade-slide-left.is-visible,
        .fade-slide-right.is-visible {
            opacity: 1;
            translate: 0 0;
        }

        /* =========================================
           SECTION 4: PROFIL MEMPELAI
           ========================================= */
        .profile-section {
            min-height: 100vh;
            position: relative;
            padding: 60px 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #3b0009;
        }

        .profile-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('assets/bg-motif.webp');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            z-index: -2;
        }

        .profile-section::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(242, 238, 235, 0.7);
            z-index: -1;
        }

        .profile-content {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
        }

        .profile-title {
            font-family: 'Great Vibes', cursive;
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 0px;
            margin-top: -10px;
            font-weight: 400;
        }

        .profile-divider {
            width: 50%;
            margin: 0 auto 15px auto;
            border: none;
            border-top: 1px solid #3b0009;
        }

        .profile-intro {
            font-family: 'Newsreader', serif;
            font-size: 12px;
            text-align: center;
            line-height: 1.5;
            margin-bottom: 40px;
        }

        .awan {
            position: absolute;
            width: 25%;
            max-width: 120px;
            z-index: 1; 
            opacity: 0.9;
        }

        .awan-kiri {
            top: 28%;
            left: -15px;
        }

        .awan-kanan {
            bottom: 30%;
            right: -15px;
            transform: scaleX(-1); 
        }

        .renda-atas, .renda-bawah {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 3;
            pointer-events: none;
        }

        .renda-atas {
            top: 0;
        }

        .renda-bawah {
            bottom: 0;
            transform: scaleY(-1);
        }

        .img-divider {
            width: 80%;
            max-width: 250px;
            display: block;
            margin: 0 ;
        }

        .profile-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15px 0;
            position: relative;
            z-index: 2;
        }

        .profile-text {
            flex: 1;
            padding: 0 15px;
            text-align: center;
        }

        .text-right {
            text-align: center;
        }

        .text-left {
            text-align: center;
        }

        .profile-name {
            font-family: 'Tangerine', cursive;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.1;
        }

        .img-divider {
            width: 80%;
            max-width: 250px;
            display: block; 
            object-fit: contain;
            margin-top: -50px;
            margin-bottom: -35px;
            margin-left: auto;
            margin-right: auto;
        }

        .img-short-divider {
            width: 120px;
            height: auto;
            display: block;
            margin-top: -20px;
            margin-bottom: -20px;
            object-fit: contain;
        }

        .text-right .img-short-divider {
            margin-left: auto;
            margin-right: auto;
        }

        .text-left .img-short-divider {
            margin-left: auto;
            margin-right: auto;
        }

        .profile-desc {
            font-family: 'Newsreader', serif;
            font-size: 11px;
            line-height: 1.5;
        }

        .profile-img {
            width: 45%;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.1));
        }

        .ampersand {
            font-family: 'Great Vibes', cursive;
            font-size: 3.5rem;
            text-align: center;
            margin: 10px 0;
            line-height: 1;
        }

        /* =========================================
           SECTION 5: DETAIL ACARA (Waktu & Lokasi)
           ========================================= */
        .event-details.fixed-bg-wrapper {
            position: relative;
            min-height: 100vh;
            background-color: #3b0009; 
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 80px 20px;
            overflow: hidden;
            z-index: 1;
        }

        .lace-border {
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            z-index: 10;
        }
        
        .lace-border.top {
            top: 0;
        }
        
        .lace-border.bottom {
            bottom: 0;
            transform: scaleY(-1); 
        }

        .event-title {
            font-family: 'Great Vibes', cursive;
            font-size: 2.5rem;
            color: #f2eeeb; 
            margin-bottom: 10px;
            margin-top: -50px;
            font-weight: 400;
            text-align: center;
            z-index: 2;
        }

        .event-divider-img {
            width: 60%;
            max-width: 200px;
            margin-bottom: -30px;
            margin-top: -40px;
            z-index: 2;
        }

        .event-card-wrapper {
            position: relative;
            width: 85%;
            max-width: 320px;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
        }

        .event-bg-img {
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.3));
        }

        .event-bg-img.flipped {
            transform: scaleY(-1);
        }

        .event-content {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #3b0009; 
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
            z-index: 3;
        }
        
        .event-name {
            font-family: 'Tangerine', cursive;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .event-date {
            font-family: 'Newsreader', serif;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .event-time {
            font-family: 'Newsreader', serif;
            font-size: 13px;
            margin-bottom: 15px;
        }

        .event-address {
            font-family: 'Newsreader', serif;
            font-size: 12px;
            line-height: 1.5;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .btn-location {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #3b0009; 
            color: #f2eeeb; 
            font-family: 'Newsreader', serif;
            font-size: 14px;
            text-decoration: none;
            padding: 8px 24px;
            border-radius: 50px;
            gap: 8px;
            font-weight: 700;
            transition: opacity 0.2s ease;
        }

        .btn-location:active {
            opacity: 0.8;
        }

        .btn-location svg {
            width: 16px;
            height: 16px;
            fill: #f2eeeb; 
        }

        .event-cloud {
            position: absolute;
            width: 50%;
            z-index: 4;
        }

        .bottom-left {
            bottom: -50px;
            left: -50px;
        }

        .bottom-right {
            bottom: -50px;
            right: -50px;
            transform: scaleX(-1);
        }

        .top-left {
            top: -50px;
            left: -50px;
            transform: scaleY(-1);
        }

        .top-right {
            top: -50px;
            right: -50px;
            transform: scale(-1, -1); 
        }

        .ring-separator {
            width: 80px;
            height: auto;
            margin: 0px 0;
            z-index: 2;
        }

        /* =========================================
           SECTION 6: COUNTDOWN & DRESS CODE
           ========================================= */
        .cd-dresscode-section {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .countdown-wrapper {
            background-color: #f2eeeb;
            padding: 40px 20px;
            text-align: center;
        }

        .section-header {
            font-family: 'Great Vibes', cursive;
            font-size: 2.4rem;
            margin-bottom: 5px;
            margin-top: -20px;
            font-weight: 400;
        }
        .section-header2 {
            font-family: 'Great Vibes', cursive;
            font-size: 2.2rem;
            margin-bottom: 5px;
            margin-top: -20px;
            font-weight: 400;
        }
        
        .header-dark { color: #3b0009; }
        .header-light { color: #f2eeeb; }

        .section-divider {
            width: 40%;
            margin: 0 auto 20px auto;
            border: none;
        }

        .divider-dark { border-top: 1px solid #3b0009; }
        .divider-light { border-top: 1px solid #f2eeeb; }

        .couple-illustration {
            width: 85%;
            max-width: 320px;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: -50px;
            margin-bottom: -20px;
        }

        .countdown-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            margin-top: 30px;
            padding: 0 15px; 
        }

        .cd-box {
            background-color: #3b0009;
            color: #f2eeeb;
            border-radius: 15px;
            padding: 10px 4.5px;
            min-width: 55px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .cd-number {
            font-family: 'Newsreader', serif;
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 3px;
        }

        .cd-label {
            font-family: 'Newsreader', serif;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.7px;
            text-transform: uppercase;
        }

        .cd-colon {
            font-family: 'Newsreader', serif;
            font-size: 1.5rem;
            color: #3b0009;
            font-weight: 700;
            margin-bottom: 10px; 
        }

        .btn-calendar {
            background-color: #3b0009;
            color: #f2eeeb;
            border-radius: 15px;
            padding: 12px 24px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
            font-family: 'Newsreader', serif;
            font-weight: 700;
            font-size: 14px;
        }

        .lace-divider-mid {
            width: 100%;
            transform: scaleY(-1); 
            height: auto;
            display: block;
            background-color: #f2eeeb; 
        }

        .dresscode-wrapper {
            background-color: #3b0009;
            padding: 40px 20px 40px 20px;
            text-align: center;
            color: #f2eeeb;
        }

        .dc-quote {
            font-family: 'Newsreader', serif;
            font-size: 12px;
            line-height: 1.5;
            margin-top: 10px;
            margin-bottom: 20px;
            max-width: 400px;
        }

        .dresscode-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 5px;
        }

        .dc-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .dc-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent; 
        }

        .dc-label {
            font-family: 'Newsreader', serif;
            font-size: 15px;
            font-weight: 700;
        }

        /* =========================================
           SECTION 7: LOVE STORY (Parallax & Timeline)
           ========================================= */
        .love-story-section {
            position: relative;
            padding: 80px 20px; 
            background-image: url('assets/bg-motif.webp');
            background-attachment: fixed; 
            background-size: cover;
            background-position: center;
            color: #3b0009;
            overflow: hidden; 
        }

        .love-story-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(242, 238, 235, 0.7);
            z-index: 0;
        }

        .ls-content {
            position: relative;
            z-index: 2;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .ls-frame-img {
            display: block;
            margin: auto auto;
            width: 95%;
            max-width: 300px;
            height: auto;
        }

        .timeline-container {
            position: relative;
            margin: 40px auto 20px auto;
            width: 90%;
            max-width: 400px;
            border-left: 1.5px solid #3b0009; 
            padding-left: 20px;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 30px;
            text-align: left;
        }

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

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -26.5px; 
            top: 5px;
            width: 10px;
            height: 10px;
            background-color: #f2eeeb;
            border: 2px solid #3b0009;
            border-radius: 50%;
        }

        .timeline-title {
            font-family: 'Newsreader', serif;
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .timeline-text {
            font-family: 'Newsreader', serif;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        /* =========================================
           SECTION 8: GALERI FOTO
           ========================================= */
        .gallery-section {
            background-color: #3b0009;
            color: #f2eeeb;
            position: relative;
            padding: 80px 20px;
            overflow: hidden;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .gallery-quote {
            font-family: 'Newsreader', serif;
            font-size: 14px;
            line-height: 1.5;
            margin-top: 10px;
            margin-bottom: 10px;
            max-width: 400px;
        }

        .carousel-container {
            width: 100%;
            overflow: hidden;
            margin: 30px 0;
            padding: 10px 0;
        }

        .carousel-track {
            display: flex;
            gap: 15px;
            width: max-content;
            animation: scroll-carousel 15s linear infinite;
        }

        .carousel-img {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
        }

        @keyframes scroll-carousel {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } 
        }

        .slider-container {
            width: 100%;
            max-width: 90%;
            margin: 0 auto;
            position: relative;
        }

        .slider-main-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border: 3px solid #f2eeeb;
            border-radius: 10px;
            transition: opacity 0.3s ease;
        }

        .slider-nav {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0 10px;
        }

        .slider-btn {
            background: transparent;
            color: #f2eeeb;
            border: 1px solid #f2eeeb;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.2s ease;
            
            pointer-events: auto; 
            position: relative;
            z-index: 10;
        }

        .slider-btn:active {
            background-color: rgba(242, 238, 235, 0.3);
        }

        /* =========================================
           SECTION 9: LOVE GIFT
           ========================================= */
        .lovegift-section {
            position: relative;
            background-color: #f2eeeb;
            padding: 80px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #3b0009;
            overflow: hidden;
        }

        .lovegift-intro {
            font-family: 'Newsreader', serif;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 30px;
            max-width: 90%;
            z-index: 2;
        }

        /* Gaya Tombol Buka Hadiah */
        .btn-toggle-gift {
            background-color: #3b0009;
            color: #f2eeeb;
            font-family: 'Newsreader', serif;
            font-size: 15px;
            font-weight: 700;
            padding: 12px 25px;
            border: 2px solid #3b0009;
            border-radius: 25px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .btn-toggle-gift:active {
            transform: scale(0.95);
            opacity: 0.9;
        }

        /* Container Rekening (Mode Tersembunyi Default) */
        .gift-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.6s ease-out, opacity 0.4s ease-out, margin-top 0.4s ease;
        }

        /* Mode Tampil Rekening */
        .gift-container.show {
            max-height: 1000px; /* Angka besar agar muat banyak konten */
            opacity: 1;
            margin-top: 25px;
        }

        .bank-card {
            background-color: #3b0009; 
            color: #f2eeeb; 
            width: 100%;
            max-width: 320px;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: left;
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
            z-index: 2;
        }

        .bank-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .bank-logo-text {
            font-family: 'Newsreader', serif;
            font-weight: bold;
            font-size: 1.4rem;
            color: #f2eeeb; 
        }

        .bank-divider-line {
            border: none;
            border-top: 1px solid rgba(242, 238, 235, 0.5);
            margin-bottom: 15px;
        }

        .bank-details {
            font-family: 'Newsreader', serif;
            font-size: 15px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .btn-copy {
            width: 100%;
            background-color: #f2eeeb;
            color: #3b0009;
            font-family: 'Newsreader', serif;
            font-size: 14px;
            font-weight: 700;
            padding: 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .btn-copy:active {
            transform: scale(0.97);
            opacity: 0.9;
        }

        .btn-copy svg {
            width: 18px;
            height: 18px;
            fill: #3b0009;
        }

        .toast-notification {
            position: fixed;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(59, 0, 9, 0.9);
            color: #f2eeeb;
            padding: 12px 25px;
            border-radius: 50px;
            font-family: 'Newsreader', serif;
            font-weight: 700;
            font-size: 14px;
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            
            opacity: 0;
            visibility: hidden;
            transition: bottom 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease, visibility 0.3s ease;
        }

        .toast-notification.show {
            bottom: 40px;
            opacity: 1;
            visibility: visible;
        }

        /* =========================================
           SECTION 10: RSVP & BUKU TAMU
           ========================================= */
        .rsvp-guestbook-section {
            position: relative;
            background-color: #f2eeeb;
            background-image: url('assets/bg-motif.webp');
            background-attachment: fixed;
            background-size: cover;
            padding: 80px 20px; 
            color: #3b0009;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        .rsvp-card, .guestbook-card {
            background-color: #3b0009;
            color: #f2eeeb;
            border-radius: 15px;
            padding: 30px 20px;
            margin: 20px auto;
            width: 100%;
            max-width: 380px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            text-align: left;
            z-index: 2;
        }

        .rsvp-card-title {
            font-family: sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-align: center;
            letter-spacing: 1px;
        }

        .form-group label {
            font-family: 'Newsreader', serif;
            font-weight: 700;
            font-size: 14px;
            display: block;
        }

        .form-input, .form-select, .form-textarea {
            background-color: #f2eeeb;
            color: #3b0009;
            border: none;
            border-radius: 8px;
            padding: 12px;
            width: 100%;
            margin-top: 5px;
            margin-bottom: 15px;
            font-family: 'Newsreader', serif;
            box-sizing: border-box;
        }

        .form-textarea {
            resize: none;
            height: 100px;
        }

        .btn-submit {
            background-color: #3b0009;
            color: #f2eeeb;
            border: 1px solid #f2eeeb;
            border-radius: 8px;
            padding: 12px;
            width: 100%;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Newsreader', serif;
            font-size: 16px;
        }

        .btn-submit:active {
            transform: scale(0.97);
            background-color: rgba(242, 238, 235, 0.2);
        }
        
        .btn-submit:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .form-note {
            font-size: 10px;
            text-align: center;
            margin-top: 15px;
            opacity: 0.7;
            font-family: sans-serif;
        }

        .guestbook-card {
            max-height: 400px;
            overflow-y: auto;
        }

        .guestbook-card::-webkit-scrollbar {
            width: 6px;
        }
        .guestbook-card::-webkit-scrollbar-track {
            background: rgba(242, 238, 235, 0.1);
            border-radius: 10px;
        }
        .guestbook-card::-webkit-scrollbar-thumb {
            background: #f2eeeb;
            border-radius: 10px;
        }

        .guestbook-item {
            border-bottom: 1px solid rgba(242, 238, 235, 0.3);
            padding-bottom: 15px;
            margin-bottom: 15px;
        }

        .guestbook-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .gb-name {
            font-family: 'Newsreader', serif;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .gb-message {
            font-family: 'Newsreader', serif;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .loading-text {
            text-align: center;
            font-family: 'Newsreader', serif;
            font-style: italic;
        }

        /* =========================================
           SECTION 11: PENUTUP (FINAL)
           ========================================= */
        .closing-section { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10vh 20px 5vh 20px; text-align: center; color: #fef8ed; overflow: hidden; background-image: url('assets/close.webp'); background-size: cover; background-position: center; }
        .closing-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(59, 0, 9, 0.9); z-index: 1; }
        .closing-content { position: relative; z-index: 2; margin-top: 5vh; }
        .closing-text { font-family: 'Newsreader', serif; font-size: 13px; line-height: 1.6; margin-bottom: 50px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); max-width: 90%; margin-left: auto; margin-right: auto; margin-top: -20px; }
        .closing-sub { font-family: 'Newsreader', serif; font-weight: 700; font-size: 14.5px; margin-bottom: 15px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); margin-top: 10px; }
        .closing-names { font-family: 'Great Vibes', cursive; font-size: 2.5rem; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); font-weight: 400; line-height: 1.1; }
        .closing-footer { position: relative; z-index: 2; width: 100%; margin-top: auto; }
        .vendor-text { font-family: 'Newsreader', serif; text-decoration: none; font-weight: 700; font-size: 0.9rem; margin-bottom: 15px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
        .vendor-link { color: #fef8ed; text-decoration: none; }
        .social-icons { display: flex; justify-content: center; gap: 15px; }
        .social-link { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 2px solid #fef8ed; border-radius: 50%; color: #fef8ed; text-decoration: none; transition: transform 0.2s ease, background-color 0.2s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }
        .social-link svg { width: 20px; height: 20px; fill: #fef8ed; transition: fill 0.2s ease; }
        .social-link:active { transform: scale(0.95); background-color: #fef8ed; }
        .social-link:active svg { fill: #3b0009; }
        
        .copyright-text { font-family: 'Newsreader', serif; font-size: 11px; color: rgba(254, 248, 237, 0.7); /* Warna teks senada namun sedikit transparan */margin-top: 25px; letter-spacing: 0.5px;line-height: 1.5;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
        .copyright-text a { color: rgba(254, 248, 237, 0.7); text-decoration: none;}
        .copyright-text a:hover {color: #fef8ed;}

        /* =========================================
           TAMBAHAN DESKTOP WRAPPER (MOBILE DEFAULT)
           ========================================= */
        .desktop-left {
            display: none; 
        }

        .mobile-container {
            width: 100%;
            height: auto;
        }

        /* =========================================
           TOMBOL MUSIK (FLOATING)
           ========================================= */
        .music-toggle {
            position: fixed;
            bottom: 30px;
            right: 20px;
            width: 45px;
            height: 45px;
            background-color: rgba(59, 0, 9, 0.9);
            border: 2px solid #f2eeeb;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
            opacity: 0; /* Disembunyikan sebelum undangan dibuka */
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.2s ease;
        }

        .music-toggle.show {
            opacity: 1;
            visibility: visible;
        }

        .music-toggle:active {
            transform: scale(0.9);
        }

        .music-toggle svg {
            width: 20px;
            height: 20px;
            fill: #f2eeeb;
        }

        /* Animasi berputar untuk musik menyala */
        .music-toggle.playing svg {
            animation: spin-music 3s linear infinite;
        }

        /* Garis coret saat musik dimatikan */
        .music-toggle:not(.playing)::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 2px;
            background-color: #f2eeeb;
            transform: rotate(45deg);
        }

        @keyframes spin-music {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Penyesuaian jarak di layar desktop agar tidak tertutup scrollbar/tepi */
        @media (min-width: 1024px) {
            .music-toggle {
                bottom: 40px;
                right: 20px;
            }
        }

        /* =========================================
           MEDIA QUERY UNTUK DESKTOP (SPLIT-SCREEN)
           ========================================= */
            @media (min-width: 1024px) {
            body {
            margin: 0;
            padding: 0;
            overflow: hidden !important;
            background-color: #000;
            }
            .desktop-wrapper {
            width: 100vw;
            height: 100vh;
            display: flex;
            background-color: #000;
            position: fixed;
            }

            .desktop-left {
            position: relative;
            z-index: 1;
            flex: 1; /* Otomatis mengisi area sisa di kiri tanpa menabrak container kanan */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fffccf; /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); */
            background-image: url("assets/wp-red.webp");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            }

            .desktop-title {
                font-family: 'Great Vibes', cursive;
                font-size: 3rem;
                font-weight: 400;
                margin-bottom: 10px;
                color: #ffff;
            }

            .desktop-names {
                font-family: 'Playfair Display', serif;
                font-size: 4rem;
                text-transform: uppercase;
                font-weight: 700;
                line-height: 1.1;
                margin-bottom: 20px;
                color: #ffff;
            }

            .desktop-date {
                font-family: 'Newsreader', serif;
                font-size: 1.2rem;
                font-weight: 700;
                color: #ffff;
            }

            .mobile-container {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 420px; 
                height: 100vh;
                overflow-y: hidden;
                overflow-x: hidden;
                border: none; 
                background-color: #000;
                box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5); /* Pisahkan kontainer dari background desktop */
            }

            /* Menyembunyikan Scrollbar Bawaan PC */
            .mobile-container::-webkit-scrollbar {
                width: 0px;
                background: transparent;
            }
        
            /* 1. Kita pindahkan background motif ke kontainer utama. 
                Sifat bawaan pada elemen yang bisa di-scroll adalah background-nya 
                akan otomatis 'diam' sementara konten di dalamnya bergerak turun. */
            .mobile-container {
                background-image: url('assets/bg-motif.webp');
                background-size: cover;
                background-position: center;
                background-color: #f2eeeb;
            }

            /* 2. Kita buat section yang butuh motif menjadi tembus pandang, 
                agar motif dari kontainer utama di atas bisa terlihat. */
            .profile-section::before {
                display: none !important;
            }

            .love-story-section {
                background-image: none !important;
                background-color: transparent !important;
            }

            .rsvp-guestbook-section {
                background-image: none !important;
                background-color: transparent !important;
            }
        }
        @supports (-webkit-touch-callout: none) { .profile-section, .love-story-section, .love-story-section::before, .rsvp-guestbook-section { background-attachment: scroll !important; } }

        html::-webkit-scrollbar, 
        body::-webkit-scrollbar, 
        .mobile-container::-webkit-scrollbar {
            display: none;
        }

        html, 
        body, 
        .mobile-container {
            -ms-overflow-style: none;  /* IE dan Edge */
            scrollbar-width: none;     /* Firefox */
        }