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

        :root {
            /* Main Colors */
            --primary-green: #4A5D23;      /* Hijau Zaitun - Header, judul, highlight */
            --cream-white: #FBF8F1;        /* Putih Gading - Background utama */
            
            /* Supporting Colors */
            --olive-green: #6B7F3C;        /* Hijau Zaitun Muda - Accent */
            --dark-olive: #3A4A1C;         /* Hijau Zaitun Gelap - Text strong */
            --gold-accent: #C9A961;        /* Gold - Border, icon */
            --warm-beige: #E8DCC4;         /* Beige Hangat - Secondary background */
            --soft-brown: #8B7355;         /* Brown Lembut - Text secondary */
            
            /* Overlays */
            --overlay-dark: rgba(74, 93, 35, 0.7);     /* Green overlay */
            --overlay-light: rgba(74, 93, 35, 0.4);    /* Light green overlay */
            --overlay-cream: rgba(251, 248, 241, 0.9); /* Cream overlay */
        }

        body {
            font-family: 'Georgia', serif;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            background: var(--cream-white);
        }

        /* ========== SMOOTH SCROLLING ========== */
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 0;
        }

        /* Webkit smooth scrolling */
        @supports (scrollbar-width: thin) {
            * {
                scrollbar-width: thin;
                scrollbar-color: var(--gold-accent) var(--warm-beige);
            }
        }

        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--warm-beige);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gold-accent);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-green);
        }

        /* ========== SUCCESS MODAL ========== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(74, 93, 35, 0.85);
            backdrop-filter: blur(8px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: var(--cream-white);
            padding: 50px 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: scale(0.7) translateY(50px);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .modal-overlay.show .modal-content {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        .modal-icon {
            margin-bottom: 25px;
        }

        .checkmark {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

        .checkmark-circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke: var(--primary-green);
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }

        .checkmark-check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            stroke-width: 3;
            stroke: var(--primary-green);
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
        }

        @keyframes stroke {
            100% {
                stroke-dashoffset: 0;
            }
        }

        .modal-title {
            font-size: 2rem;
            color: var(--primary-green);
            margin-bottom: 15px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .modal-message {
            font-size: 1.1rem;
            color: var(--dark-olive);
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .modal-subtitle {
            font-size: 0.95rem;
            color: var(--soft-brown);
            font-style: italic;
            margin-bottom: 30px;
        }

        .modal-close {
            background: var(--primary-green);
            color: var(--cream-white);
            border: none;
            padding: 14px 45px;
            font-size: 1rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(74, 93, 35, 0.3);
        }

        .modal-close:hover {
            background: var(--dark-olive);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 93, 35, 0.4);
        }

        .modal-close:active {
            transform: translateY(0);
        }

        /* ========== ENVELOPE COVER ========== */
        .envelope-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--olive-green) 50%, var(--gold-accent) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.8s ease;
        }

        .envelope-wrapper.opened {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }

        .envelope-content {
            text-align: center;
            color: var(--cream-white);
            animation: fadeIn 1s ease;
        }

        .envelope-content h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            letter-spacing: 3px;
            font-weight: 300;
            text-shadow: 0 2px 15px rgba(0,0,0,0.3);
        }

        .envelope-content .divider {
            width: 150px;
            height: 2px;
            background: var(--gold-accent);
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
        }

        .envelope-content p {
            font-size: 1.3rem;
            margin-bottom: 40px;
            opacity: 0.95;
        }

        .open-button {
            padding: 15px 40px;
            font-size: 1.1rem;
            background: var(--cream-white);
            color: var(--primary-green);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-family: 'Georgia', serif;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .open-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            background: var(--warm-beige);
            color: var(--dark-olive);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        /* ========== AUDIO PLAYER ========== */
        .audio-player {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9998;
        }

        .audio-toggle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-green);
            border: 3px solid var(--gold-accent);
            color: var(--cream-white);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(74, 93, 35, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .audio-toggle:hover {
            transform: scale(1.1);
            background: var(--olive-green);
            box-shadow: 0 8px 30px rgba(74, 93, 35, 0.6);
        }

        .audio-toggle.muted {
            background: var(--soft-brown);
            border-color: var(--warm-beige);
        }

        /* ========== VIDEO LOADING OVERLAY ========== */
        .video-loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--cream-white);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            transition: opacity 0.5s ease;
        }

        .video-loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid var(--warm-beige);
            border-top-color: var(--primary-green);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .video-loading p {
            color: var(--primary-green);
            margin-top: 20px;
            font-size: 1rem;
        }

        /* ========== MAIN CONTENT ========== */
        .main-content {
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s ease 0.5s;
            position: relative;
            min-height: 100vh;
            width: 100%;
        }

        .main-content.active {
            opacity: 1 !important;
            pointer-events: all !important;
            display: block !important;
        }

        /* ========== VIDEO BACKGROUND ========== */
        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            z-index: 0;
            background: var(--cream-white); /* Fallback background */
        }

        .video-background video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
            /* Optimization untuk streaming */
            will-change: auto;
        }

        /* ========== SECTIONS ========== */
        .section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 80px 40px;
            position: relative;
            overflow: hidden;
            will-change: transform;
            z-index: 1;
        }

        /* Section overlay for readability */
        .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--overlay-cream);
            z-index: 0;
        }

        .section-hero::before {
            background: rgba(251, 248, 241, 0.7);
        }

        .section-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            width: 100%;
        }

        /* ========== SECTION 1 - HERO ========== */
        .hero-content {
            text-align: center;
            color: var(--dark-olive);
        }

        .hero-title {
            font-size: 4rem;
            letter-spacing: 8px;
            margin-bottom: 20px;
            font-weight: 300;
            text-shadow: 0 2px 10px rgba(0,0,0,0.1);
            color: var(--primary-green);
        }

        .hero-divider {
            width: 150px;
            height: 2px;
            background: var(--gold-accent);
            margin: 30px auto;
            box-shadow: 0 0 15px rgba(201, 169, 97, 0.4);
        }

        .hero-subtitle {
            font-size: 1.5rem;
            font-style: italic;
            margin-bottom: 50px;
            color: var(--soft-brown);
        }

        .verse-box {
            max-width: 700px;
            margin: 0 auto;
            padding: 30px;
            background: rgba(251, 248, 241, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 2px solid var(--gold-accent);
            box-shadow: 0 5px 30px rgba(74, 93, 35, 0.15);
        }

        .verse-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            color: var(--dark-olive);
        }

        .verse-reference {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-green);
        }

        .scroll-hint {
            margin-top: 40px;
            font-size: 1rem;
            color: var(--soft-brown);
            opacity: 0.8;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        /* ========== SECTION 2 & 3 - IMAGE SECTIONS (ISTIQLAL & KA'BAH) ========== */
        .section-istiqlal,
        .section-kabah {
            padding: 0;
        }

        .section-bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            z-index: 0;
        }

        .section-istiqlal::before,
        .section-kabah::before {
            background: var(--overlay-dark);
        }

        .image-overlay-content {
            text-align: center;
            color: var(--cream-white);
            z-index: 2;
        }

        .section-title {
            font-size: 3.5rem;
            letter-spacing: 8px;
            margin-bottom: 20px;
            color: var(--gold-accent);
            text-shadow: 0 3px 20px rgba(0,0,0,0.6);
            font-weight: 300;
        }

        .section-description {
            font-size: 1.3rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.8;
            text-shadow: 0 2px 15px rgba(0,0,0,0.5);
            color: var(--cream-white);
        }

        /* ========== SECTION 4 - FORM ========== */
        .section-form {
            background: linear-gradient(180deg, var(--warm-beige) 0%, var(--cream-white) 100%);
        }

        .section-form::before {
            background: transparent;
        }

        .form-content {
            color: var(--dark-olive);
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
        }

        .form-title {
            font-size: 3rem;
            letter-spacing: 5px;
            margin-bottom: 20px;
            color: var(--primary-green);
        }

        .form-subtitle {
            font-size: 1.3rem;
            margin-bottom: 40px;
            line-height: 1.8;
            color: var(--soft-brown);
        }

        .form-subtitle strong {
            color: var(--primary-green);
            font-size: 1.5rem;
        }

        /* COUNTDOWN TIMER */
        .countdown-container {
            margin: 40px 0;
            padding: 30px;
            background: rgba(251, 248, 241, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 2px solid var(--gold-accent);
            box-shadow: 0 5px 20px rgba(74, 93, 35, 0.1);
        }

        .countdown-container h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary-green);
        }

        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .countdown-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 80px;
        }

        .countdown-value {
            font-size: 3rem;
            font-weight: bold;
            color: var(--primary-green);
            text-shadow: 0 2px 10px rgba(74, 93, 35, 0.2);
        }

        .countdown-label {
            font-size: 0.9rem;
            color: var(--soft-brown);
            margin-top: 5px;
        }

        /* FORM STYLES */
        .quotes-form {
            margin: 40px 0;
            text-align: left;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 1.1rem;
            color: var(--primary-green);
            font-weight: bold;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 15px;
            font-size: 1rem;
            font-family: 'Georgia', serif;
            border: 2px solid var(--gold-accent);
            border-radius: 10px;
            background: var(--cream-white);
            color: var(--dark-olive);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .form-group select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5D23' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            padding-right: 40px;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--primary-green);
            background: white;
            box-shadow: 0 0 20px rgba(74, 93, 35, 0.2);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--soft-brown);
            opacity: 0.6;
        }

        .form-group small {
            display: block;
            margin-top: 5px;
            color: var(--soft-brown);
            font-size: 0.9rem;
            font-style: italic;
        }

        .submit-btn {
            width: 100%;
            padding: 18px;
            font-size: 1.2rem;
            font-family: 'Georgia', serif;
            font-weight: bold;
            background: var(--primary-green);
            color: var(--cream-white);
            border: 2px solid var(--gold-accent);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(74, 93, 35, 0.3);
        }

        .submit-btn:hover {
            background: var(--olive-green);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(74, 93, 35, 0.5);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .submit-btn:disabled {
            background: var(--soft-brown);
            cursor: not-allowed;
            border-color: var(--warm-beige);
        }

        .form-message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            font-size: 1rem;
            display: none;
        }

        .form-message.success {
            display: block;
            background: rgba(34, 197, 94, 0.2);
            border: 2px solid #22c55e;
            color: #86efac;
        }

        .form-message.error {
            display: block;
            background: rgba(239, 68, 68, 0.2);
            border: 2px solid #ef4444;
            color: #fca5a5;
        }

        /* PRIZE INFO */
        .prize-info {
            margin-top: 40px;
            padding: 30px;
            background: linear-gradient(135deg, var(--gold-accent) 0%, var(--warm-beige) 100%);
            border-radius: 15px;
            color: var(--dark-olive);
            box-shadow: 0 5px 30px rgba(201, 169, 97, 0.4);
        }

        .prize-info h3 {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--primary-green);
        }

        .prize-info p {
            font-size: 1.2rem;
            color: var(--dark-olive);
        }

        .prize-info strong {
            font-size: 1.4rem;
            color: var(--primary-green);
        }

        /* ========== SECTION 5 - CLOSING ========== */
        .section-closing {
            background: linear-gradient(180deg, var(--cream-white) 0%, var(--warm-beige) 100%);
        }

        .section-closing::before {
            background: transparent;
        }

        .closing-content {
            color: var(--dark-olive);
            text-align: center;
        }

        .closing-title {
            font-size: 3.5rem;
            margin-bottom: 40px;
            color: var(--primary-green);
        }

        .closing-text {
            font-size: 1.3rem;
            line-height: 2;
            max-width: 700px;
            margin: 0 auto 40px;
            color: var(--soft-brown);
        }

        .closing-message {
            font-size: 1.6rem;
            font-style: italic;
            margin-top: 40px;
            color: var(--primary-green);
        }

        /* ========== ANIMATION UTILITIES ========== */
        .animate-element {
            will-change: transform, opacity;
            backface-visibility: hidden;
        }

        .section-content > * {
            transform-origin: center;
        }

        .hero-title {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 768px) {
            .envelope-content h1 { font-size: 2rem; letter-spacing: 2px; }
            .hero-title { font-size: 2.5rem; letter-spacing: 3px; }
            .section-title, .form-title, .closing-title {
                font-size: 2rem;
                letter-spacing: 3px;
            }
            .verse-text, .section-description, .form-subtitle, .closing-text {
                font-size: 1rem;
            }
            .section { 
                padding: 60px 20px; 
            }
            .countdown-value {
                font-size: 2rem;
            }
            .countdown-item {
                min-width: 60px;
            }
            .audio-player {
                bottom: 20px;
                right: 20px;
            }
            .audio-toggle {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
            .form-content {
                padding: 0 10px;
            }
        }

        @media (max-width: 480px) {
            .hero-title { font-size: 1.8rem; }
            .section-title { font-size: 1.5rem; }
            .countdown {
                gap: 10px;
            }
            .countdown-item {
                min-width: 50px;
            }
            .countdown-value {
                font-size: 1.5rem;
            }
        }