:root {
            --primary-core: #6B705C; /* Sage Green */
            --secondary-core: #A5A58D;
            --accent-core: #D4A373; /* Terracotta */
            --bg-light: #FDFDFB;
            --text-dark: #333533;
        }

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

        body {
            font-family: 'Jost', sans-serif;
            color: var(--text-dark);
            background-color: var(--bg-light);
            max-width: 500px;
            margin: 0 auto;
            min-height: 100vh;
            box-shadow: 0 0 50px rgba(0,0,0,0.1);
            position: relative;
        }

        h1, h2, h3 { font-family: 'Volkhov', serif; color: var(--primary-core); }
        .cursive { font-family: 'Sacramento', cursive; color: var(--accent-core); font-size: 3rem; }
        .arabic { font-family: 'Amiri', serif; font-size: 1.8rem; color: var(--primary-core); direction: rtl; padding: 20px 0; }

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

        /* ========== CORE REVEAL ========== */
        .reveal { opacity: 0; transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .reveal-bottom { transform: translateY(40px); }
        .reveal-left { transform: translateX(-40px); }
        .reveal-right { transform: translateX(40px); }
        .reveal.active { opacity: 1; transform: translate(0,0); }

        /* ========== COVER ========== */
        #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.3), rgba(0,0,0,0.5)),
                        url('/img/basic-img/essensial/bg-hero.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: 1s cubic-bezier(0.77, 0, 0.175, 1);
            color: white; padding: 40px; text-align: center;
        }
        #cover.hide { transform: translateX(-50%) translateY(-100%); }

        .btn-open {
            padding: 12px 30px;
            background: transparent;
            color: var(--color-primary);
            border: none;
            border-radius: 50px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            cursor: pointer;
        
            /* Flex di dalam tombol untuk icon & teks */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        
            /* Shadow Awal */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            margin-top: 20px;
            
            /* Animasi Berdetak saat diam (Optional: agar tamu tahu ini tombol) */
            animation: heartbeat 2s infinite;
        }
        
        .btn-open:hover {
            color: #222;
            background: #fff; /* Tetap putih agar cahaya lebih terlihat */
            transform: scale(1.1);
            
            /* Efek Cahaya dan Shadow yang kuat */
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                        0 0 40px rgba(var(--color-primary-rgb), 0.5), 
                        0 10px 30px rgba(0, 0, 0, 0.3);
            
            /* Berdetak lebih cepat saat di-hover */
            animation: heartbeat 0.8s infinite;
        }
        
        /* Kunci Animasi Berdetak */
        @keyframes heartbeat {
            0% {
                transform: scale(1);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }
            50% {
                transform: scale(1.05);
                /* Efek Cahaya memancar saat berdetak */
                box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 
                            0 10px 25px rgba(0, 0, 0, 0.4);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }
        }

        /* ========== COUNTDOWN ========== */
        .timer-container { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
        .timer-box { background: white; width: 70px; height: 75px; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #eee; }
        .timer-box span { font-size: 1.4rem; font-weight: 700; color: var(--accent-core); }
        .timer-box small { font-size: 0.6rem; text-transform: uppercase; color: #999; }

        /* ========== MEMPELAI PHOTO ========== */
        .photo-circle {
            width: 220px; height: 220px; border-radius: 50%;
            margin: 0 auto 25px; border: 8px solid white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden;
        }
        .photo-circle img { width: 100%; height: 40vh; object-fit: cover; }

        /* ========== EVENT CARD ========== */
        .card-event {
            background: white; padding: 40px 20px; border-radius: 30px;
            box-shadow: 0 15px 35px rgba(107, 112, 92, 0.1); margin-bottom: 25px; border: 1px solid #f0f0f0;
        }
        .btn-core {
            display: inline-block; padding: 10px 25px; background: var(--primary-core);
            color: white; text-decoration: none; border-radius: 50px; font-size: 0.8rem; margin-top: 20px;
        }

        /* ========== MASONRY GALLERY ========== */
        .masonry-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; margin-top: 30px; }
        .masonry-item { border-radius: 20px; overflow: hidden; }
        .masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
        .item-large { grid-column: span 1; grid-row: span 2; }

        /* ========== RSVP FORM ========== */
        .rsvp-form { text-align: left; }
        .rsvp-form input, .rsvp-form select, .rsvp-form textarea {
            width: 100%; padding: 15px; margin-bottom: 15px; background: #F8F9F5;
            border: 1px solid #E9EDC6; border-radius: 15px; font-family: inherit; outline: none;
        }
        .btn-submit { width: 100%; padding: 15px; background: var(--primary-core); color: white; border: none; border-radius: 15px; font-weight: 600; cursor: pointer; }

        /* ========== MUSIC VINYL ========== */
        .music-control { position: fixed; bottom: 30px; left: 50%; transform: translateX(-235px); z-index: 1000; }
        .music-btn {
            width: 45px; height: 45px; border-radius: 50%; background: white;
            color: var(--primary-core); border: none; display: flex; justify-content: center; align-items: center;
            cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .playing i { animation: rotateVinyl 4s linear infinite; }
        @keyframes rotateVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* ========== BACK TO TOP ========== */
        .back-to-top { color: var(--primary-core); text-decoration: none; font-size: 0.7rem; font-weight: 600; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 40px; cursor: pointer; }
        .back-to-top i { animation: bounce 2s infinite; }
        @keyframes bounce { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-5px);} }

        body.no-scroll { overflow: hidden; }
        @media (max-width: 500px) { .music-control { left: 20px; transform: none; } }