/* PENGATURAN KHUSUS VIDEO BACKGROUND & GRADASI */
        .hero {
            background: none !important;
            position: relative;
            overflow: hidden;
        }

        .hero-video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            /* Warna dasar sebagai fallback sebelum video termuat / di jaringan lambat */
            background-color: var(--dark-navy, #0F172A);
        }

        /* Di HP, area hero sengaja dipendekkan (lihat style.css) supaya video landscape
           tidak perlu di-zoom sangat besar untuk menutupi layar potret yang tinggi */
        @media (max-width: 768px) {
            .hero-video-bg {
                object-position: center 35%;
                /* fokuskan crop sedikit ke atas, area paling menarik pada drone shot biasanya bukan di dasar frame */
            }
        }

        .hero-overlay {
            z-index: 1;
            background: linear-gradient(to right, rgba(6, 78, 59, 0.95) 0%, rgba(15, 23, 42, 0.85) 45%, rgba(0, 0, 0, 0) 100%) !important;
        }

        .hero-content {
            z-index: 2;
        }

        @media (max-width: 768px) {
            .hero-overlay {
                background: linear-gradient(to bottom, rgba(6, 78, 59, 0.95) 0%, rgba(15, 23, 42, 0.85) 55%, rgba(0, 0, 0, 0.1) 100%) !important;
            }
        }

        /* Fallback ketika JS belum aktif: menu tetap bisa dibuka via CSS :focus-within */
        .menu-btn {
            cursor: pointer;
            background: none;
            border: none;
        }

        /* Skip-link untuk aksesibilitas keyboard */
        .skip-link {
            position: absolute;
            left: -9999px;
            top: 0;
            background: #fff;
            color: #000;
            padding: 10px 15px;
            z-index: 9999;
        }

        .skip-link:focus {
            left: 10px;
            top: 10px;
        }

        /* ==========================================
           SPLASH INTRO — hanya tampil sekali per sesi kunjungan
           (dikontrol lewat sessionStorage di script bawah, bukan CSS ini)
           ========================================== */
        #splashIntro {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: linear-gradient(135deg, var(--dark-navy) 0%, #1e293b 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        #splashIntro.hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        #splashIntro img {
            width: 90px;
            height: 90px;
            object-fit: contain;
            animation: splashPop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
        }

        #splashIntro p {
            color: white;
            font-weight: 600;
            letter-spacing: 3px;
            font-size: 0.85rem;
            text-transform: uppercase;
            opacity: 0;
            animation: splashFadeUp 0.6s ease 0.4s forwards;
        }

        #splashIntro p .gold-text {
            color: var(--gold);
        }

        @keyframes splashPop {
            0% {
                transform: scale(0.6);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes splashFadeUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Kalau JS mati (jarang, tapi dijaga), langsung sembunyikan splash
           supaya website tetap bisa diakses tanpa terjebak layar splash */
        .no-js #splashIntro {
            display: none;
        }

        @media (prefers-reduced-motion: reduce) {

            #splashIntro img,
            #splashIntro p {
                animation: none;
                opacity: 1;
            }
        }

        /* ==========================================
           FIX PAKSA: NAVBAR HARUS TETAP MENEMPEL DI ATAS
           ==========================================
           Ditulis di sini (dimuat setelah style.css, di akhir <head>)
           supaya otomatis menang dari aturan CSS lain mana pun yang
           mungkin bentrok tanpa disadari. !important dipakai sengaja
           sebagai jaring pengaman terakhir untuk kasus ini saja. */
        .navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            transform: none !important;
        }