:root {
            --royal-black: #1A1A1A;
            --royal-gold: #D4AF37;
            --royal-maroon: #4A0404;
            --paper: #FDFBF7;
            --text-light: #E5E5E5;
        }

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

        body {
            font-family: 'Lora', serif;
            color: var(--royal-black);
            background-color: var(--royal-black);
            max-width: 500px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 100px rgba(0,0,0,1);
        }

        .velvet-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
            opacity: 0.5; pointer-events: none; z-index: 0;
        }

        h1, h2, h3 { font-family: 'Cinzel', serif; color: var(--royal-gold); text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
        .cursive { font-family: 'Sacramento', cursive; color: var(--royal-gold); font-size: 3.5rem; }
        .arabic { font-family: 'Amiri', serif; font-size: 1.8rem; color: var(--royal-gold); direction: rtl; padding: 20px 0; }

        section { padding: 90px 25px; text-align: center; position: relative; z-index: 1; }

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

        #cover {
            position: fixed; top: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 500px; height: 100%;
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
                        url('/img/basic-img/bg-hero.png');
            background-size: cover; background-position: center;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 10000; transition: 1.5s ease; color: var(--royal-gold);
            text-align: center; border: 20px solid var(--royal-black);
            outline: 2px solid var(--royal-gold); outline-offset: -10px;
        }
        #cover.hide { transform: translateX(-50%) translateY(-100%); }

        .btn-open {
            padding: 15px 45px; background: transparent; color: var(--royal-gold);
            border: 1px solid var(--royal-gold); font-family: 'Cinzel', serif;
            font-weight: 700; cursor: pointer; letter-spacing: 3px;
            margin-top: 40px; transition: 0.3s;
        }
        .btn-open:hover { background: var(--royal-gold); color: black; }

        .frame-signature {
            width: 260px; height: 380px; margin: 0 auto 25px;
            border: 5px solid var(--royal-gold); padding: 10px;
            background: var(--royal-black); position: relative;
        }
        .frame-signature img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.3); }

        .timer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
        .timer-item { border: 1px solid rgba(212, 175, 55, 0.3); padding: 15px 5px; color: var(--text-light); }
        .timer-item span { display: block; font-size: 1.5rem; font-weight: 700; color: var(--royal-gold); }

        /* EVENT CARD ROYAL */
        .card-royal {
            background: rgba(255,255,255,0.03); padding: 40px 20px; border: 1px solid var(--royal-gold);
            margin-bottom: 30px; position: relative; overflow: hidden;
        }
        .card-royal h3 { margin-bottom: 15px; font-size: 1.8rem; }
        .card-royal p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 5px; }

        .btn-maps {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 12px 25px; border: 1px solid var(--royal-gold);
            color: var(--royal-gold); text-decoration: none; font-size: 0.75rem;
            font-family: 'Cinzel', serif; margin-top: 20px; transition: 0.3s;
        }
        .btn-maps:hover { background: var(--royal-gold); color: black; }

        .masonry-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; margin-top: 30px; }
        .masonry-item {
            border: 2px solid var(--royal-gold);
            overflow: hidden;
            position: relative;

        }
        .masonry-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;

            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 */
        }

        .rsvp-form { text-align: left; background: rgba(255,255,255,0.05); padding: 30px; border: 1px solid var(--royal-gold); }
        .rsvp-form input, .rsvp-form select, .rsvp-form textarea {
            width: 100%; padding: 12px; margin-bottom: 20px; background: transparent;
            border: none; border-bottom: 1px solid var(--royal-gold); color: white; outline: none;
        }
        .btn-submit { width: 100%; padding: 15px; background: var(--royal-gold); color: black; border: none; font-weight: 700; cursor: pointer; }

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

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