:root {
            --sogan: #4E342E;
            --gold: #B8860B;
            --cream: #F5F5DC;
            --paper: #FFFDF5;
            --text: #2D221E;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html { scroll-behavior: smooth; background-color: #3E2723; overflow-x: hidden; }

        body {
            font-family: 'Lora', serif;
            color: var(--text);
            background-color: var(--paper);
            max-width: 500px;
            margin: 0 auto;
            min-height: 100vh;
            box-shadow: 0 0 60px rgba(0,0,0,0.5);
            position: relative;
            background-image: url('https://www.transparenttextures.com/patterns/batik-fractal.png');
        }

        body::before, body::after {
            content: '';
            position: fixed;
            width: 80px;
            height: 80px;
            background-image: url('https://img.icons8.com/color/512/traditional-mediterranean-pattern.png');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 999;
            opacity: 0.15;
            pointer-events: none;
        }
        body::before { top: 10px; left: 10px; }
        body::after { bottom: 10px; right: 10px; transform: rotate(180deg); }

        h1, h2, h3 { font-family: 'Cinzel', serif; color: var(--sogan); font-weight: 700; }
        .cursive { font-family: 'Sacramento', cursive; color: var(--gold); font-size: 3.2rem; }
        .arabic { font-family: 'Amiri', serif; font-size: 1.8rem; color: var(--sogan); direction: rtl; padding: 20px 0; }

        section { padding: 80px 25px; text-align: center; position: relative; }

        .reveal { opacity: 0; transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
        .reveal-bottom { transform: translateY(50px); }
        .reveal-left { transform: translateX(-50px); }
        .reveal-right { transform: translateX(50px); }
        .reveal.active { opacity: 1; transform: translate(0,0); }

        #cover {
            position: fixed; top: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 500px; height: 100%;
            background: linear-gradient(rgba(62, 39, 35, 0.8), rgba(62, 39, 35, 0.9)),
                        url('https://images.unsplash.com/photo-1574045431143-69324523293e?auto=format&fit=crop&w=800');
            background-size: cover; background-position: center;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 10000; transition: 1.5s cubic-bezier(0.85, 0, 0.15, 1); color: var(--cream);
            text-align: center; border: 12px double var(--gold);
        }
        #cover.hide { transform: translateX(-50%) translateY(-100%); }

        .btn-open {
            padding: 12px 35px; background: var(--gold); color: var(--paper);
            border: none; font-family: 'Cinzel', serif; font-weight: 700;
            cursor: pointer; letter-spacing: 2px; margin-top: 30px;
        }

        .gunungan { width: 90px; margin-bottom: 20px; filter: sepia(1) brightness(1.2); }
        .frame-batik {
            width: 240px; height: 340px; margin: 0 auto 25px;
            border: 8px solid var(--paper); outline: 2px solid var(--gold);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2); overflow: hidden;
            border-radius: 120px 120px 0 0;
        }
        .frame-batik img { width: 100%; height: 100%; object-fit: cover; }

        .timer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 30px; }
        .timer-item { border: 1px solid var(--gold); padding: 12px 5px; background: rgba(184, 134, 11, 0.05); }
        .timer-item span { display: block; font-size: 1.3rem; font-weight: 700; color: var(--sogan); }
        .timer-item small { font-size: 0.55rem; color: var(--gold); }

        /* EVENT CARD SEKAR JAGAD */
        .card-adat {
            background: var(--paper); padding: 40px 20px; border: 1px solid var(--gold);
            margin-bottom: 30px; border-radius: 0 40px 0 40px;
            box-shadow: inset 0 0 20px rgba(184, 134, 11, 0.1);
            text-align: center;
        }
        .btn-maps {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 20px; background: var(--sogan); color: var(--cream);
            text-decoration: none; font-size: 0.75rem; font-weight: 700;
            margin-top: 20px; border: 1px solid var(--gold); transition: 0.3s;
        }
        .btn-maps:hover { background: var(--gold); color: var(--paper); }

        /* CSS Tambahan untuk Galeri Foto */

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px; /* Menambah tinggi baris agar foto vertikal lebih terlihat */
    gap: 12px;
    margin-top: 30px;
}

.masonry-item {
    border: 4px solid white;
    outline: 1px solid var(--gold);
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0; /* Placeholder warna sebelum gambar dimuat */
}

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Kunci agar foto penuh/full tanpa distorsi */
    object-position: center top; /* Fokus pada wajah/bagian atas foto */
    transition: transform 0.8s ease;
    display: block;
}

/* Hover Effect: Memberi kesan interaktif saat foto disentuh/di-hover */
.masonry-item:hover img {
    transform: scale(1.05);
}

.item-large {
    grid-column: span 2;
    grid-row: span 2;
    height: 350px; /* Tinggi khusus untuk foto utama berdua */
}

/* Responsive adjustment untuk layar kecil */
@media (max-width: 400px) {
    .masonry-grid {
        grid-auto-rows: 150px;
    }
    .item-large {
        height: 280px;
    }
}

        .rsvp-form { text-align: left; margin-top: 30px; }
        .rsvp-form input, .rsvp-form select, .rsvp-form textarea {
            width: 100%; padding: 15px; margin-bottom: 15px; background: var(--paper);
            border: 1px solid var(--gold); color: var(--text); font-family: inherit; outline: none;
        }
        .btn-submit { width: 100%; padding: 15px; background: var(--sogan); color: var(--cream); border: none; font-weight: 700; cursor: pointer; text-transform: uppercase; }

        .music-control { position: fixed; bottom: 30px; left: 50%; transform: translateX(-235px); z-index: 1000; }
        .music-btn {
            width: 45px; height: 45px; border-radius: 50%; background: var(--paper);
            color: var(--sogan); border: 2px solid var(--gold); display: flex; justify-content: center; align-items: center; cursor: pointer;
        }
        .playing i { animation: rotateVinyl 4s linear infinite; }
        @keyframes rotateVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        .back-to-top { color: var(--gold); text-decoration: none; font-size: 0.7rem; font-weight: 700; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }