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

/* Reset & Base */
* { 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; /* Standar mobile invitation */
    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');
}

/* Background Patterns */
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: calc(50% - 240px); } /* Menyesuaikan posisi di desktop */
body::after { bottom: 10px; right: calc(50% - 240px); transform: rotate(180deg); }

@media (max-width: 500px) {
    body::before { left: 10px; }
    body::after { right: 10px; }
}

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

section { padding: 60px 20px; text-align: center; position: relative; }

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

.no-scroll { overflow: hidden; height: 100vh; }

/* Cover */
#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.2s 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(-110%); }

.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; border-radius: 4px;
}

/* Frame & Timer */
.frame-batik {
    width: 220px; height: 320px; margin: 0 auto 25px;
    border: 8px solid var(--paper); outline: 1px solid var(--gold);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); overflow: hidden;
    border-radius: 110px 110px 0 0;
}
.frame-batik img { width: 100%; height: 100%; object-fit: cover; }

.timer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.timer-item { border: 1px solid var(--gold); padding: 10px 5px; background: rgba(184, 134, 11, 0.05); border-radius: 8px; }
.timer-item span { display: block; font-size: 1.2rem; font-weight: 700; color: var(--sogan); }
.timer-item small { font-size: 0.6rem; color: var(--gold); text-transform: uppercase; }

/* Cards & Gallery */
.card-adat {
    background: var(--paper); padding: 30px 20px; border: 1px solid var(--gold);
    margin-bottom: 25px; border-radius: 0 40px 0 40px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
}

.masonry-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px;
    gap: 10px; margin-top: 25px;
}
.masonry-item { border: 3px solid white; outline: 1px solid var(--gold); overflow: hidden; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.item-large { grid-column: span 2; grid-row: span 2; height: 320px; }

/* Form */
.rsvp-form { text-align: left; margin-top: 20px; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea {
    width: 100%; padding: 12px; margin-bottom: 15px; background: #fff;
    border: 1px solid #ddd; border-bottom: 2px solid var(--gold); 
    font-family: inherit; outline: none;
}
.btn-submit { width: 100%; padding: 15px; background: var(--sogan); color: var(--cream); border: none; font-weight: 700; cursor: pointer; }

/* Music Floating Button */
.music-control { 
    position: fixed; bottom: 25px; right: 25px; /* Pindah ke kanan agar jempol mudah menjangkau */
    z-index: 1000; 
}
.music-btn {
    width: 50px; height: 50px; border-radius: 50%; background: var(--paper);
    color: var(--sogan); border: 2px solid var(--gold); 
    display: flex; justify-content: center; align-items: center; 
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.playing i { animation: rotateVinyl 3s linear infinite; }
@keyframes rotateVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }