body {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Hero Squares Animation */
        .floating-square {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(0, 33, 71, 0.1); /* Navy transparan - removed backdrop-filter */
            border: 1px solid rgba(255, 255, 255, 0.05);
            animation: float-square 10s linear infinite;
            will-change: transform, opacity;
            transform: translateZ(0);
        }
        
        .dark .floating-square {
            background: rgba(228, 211, 41, 0.15); /* Emas transparan */
        }

        @keyframes float-square {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #002147; }
        .dark ::-webkit-scrollbar-thumb { background: #1e293b; }
        .dark ::-webkit-scrollbar-thumb:hover { background: #E4D329; }

        /* Glowing border effect for dark mode cards */
        .dark .glow-border:hover {
            box-shadow: 0 0 15px rgba(228, 211, 41, 0.2);
            border-color: rgba(228, 211, 41, 0.4);
        }

        /* Navbar Text Color Logic (When Transparent) */
        #navbar:not(.scrolled) .nav-text { color: #ffffff !important; }
        #navbar:not(.scrolled) .nav-btn {
            background-color: rgba(255, 255, 255, 0.15) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            color: #ffffff !important;
        }
        #navbar:not(.scrolled) .nav-btn:hover { background-color: rgba(255, 255, 255, 0.25) !important; }
        
        /* Smooth video/image transition */
        .hero-slide { transition: opacity 1s ease-in-out; }

        /* Cloudinary Player Optimization */
        #dashboard-slider .cld-video-player {
            width: 100% !important;
            height: 100% !important;
        }
        
        #dashboard-slider .vjs-tech {
            object-fit: cover !important;
            width: 100% !important;
            height: 100% !important;
        }

        /* Prevent Cloudinary controls from appearing even if initialized */
        .cld-video-player .vjs-control-bar,
        .cld-video-player .vjs-big-play-button {
            display: none !important;
        }

        /* ANIMASI SPOTLIGHT BACKGROUND (NAVY & GOLD SAJA) */
        .spotlight {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px); /* Reduced blur for Chrome performance */
            opacity: 0.6;
            will-change: transform, opacity;
            transform: translateZ(0);
            pointer-events: none;
        }
        
        /* Mode Terang (Light Mode) */
        .spotlight-1 {
            background: rgba(0, 33, 71, 0.1); /* Navy sangat tipis */
            width: 50vw; height: 50vw; top: -10%; left: -10%;
            animation: spot1 12s infinite alternate ease-in-out;
        }
        .spotlight-2 {
            background: rgba(228, 211, 41, 0.15); /* Emas tipis */
            width: 45vw; height: 45vw; bottom: -10%; right: -10%;
            animation: spot2 15s infinite alternate-reverse ease-in-out;
        }
        .spotlight-3 {
            background: rgba(0, 33, 71, 0.08); /* Navy sangat tipis */
            width: 35vw; height: 35vw; top: 40%; left: 30%;
            animation: spot3 18s infinite alternate ease-in-out;
        }

        /* Mode Gelap (Dark Mode) */
        .dark .spotlight { opacity: 0.8; }
        .dark .spotlight-1 { background: rgba(0, 33, 71, 0.9); }
        .dark .spotlight-2 { background: rgba(228, 211, 41, 0.15); }
        .dark .spotlight-3 { background: rgba(0, 33, 71, 0.7); }

        @keyframes spot1 {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(25vw, 15vh) scale(1.2); }
        }
        @keyframes spot2 {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(-25vw, -15vh) scale(1.1); }
        }
        @keyframes spot3 {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(-15vw, 25vh) scale(1.3); }
        }

        /* FAINT PEEKING LOGO (Logo Nyelip di Background) */
        .peeking-logo {
            position: fixed;
            top: 50%;
            right: -10vw; /* Digeser agar hanya terlihat sebagian dari kanan */
            transform: translateY(-50%);
            height: 110vh;
            width: auto; /* Preserve aspect ratio */
            object-fit: contain; /* Ensure no distortion */
            opacity: 0.1; /* Subtler opacity */
            pointer-events: none;
            z-index: 0;
            filter: grayscale(20%);
        }
        .dark .peeking-logo {
            opacity: 0.05; /* Subtler dark mode opacity */
            filter: grayscale(100%) invert(1);
        }

        /* ANIMASI HOVER NAVBAR MENU */
        .nav-hover-line {
            position: relative;
            display: inline-block;
        }
        .nav-hover-line::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            background-color: currentColor; /* Otomatis ikut warna tulisan */
            transition: width 0.3s ease-in-out;
            border-radius: 2px;
        }
        .nav-hover-line:hover::after {
            width: 100%;
        }

        /* ========================================== */
        /* MANDATORY RESPONSIVE GLOBALS */
        /* ========================================== */
        html, body {
            overflow-x: hidden;
            width: 100%;
            position: relative;
        }

        * {
            box-sizing: border-box;
        }

        img, video {
            max-width: 100%;
            height: auto;
        }

        /* ========================================== */
        /* MOBILE & TABLET OPTIMIZATIONS */
        /* ========================================== */

        /* ========================================== */
        /* GLASSMORPHISM UTILITIES - REDUCED TRANSPARENCY */
        /* ========================================== */
        .glass-card {
            background-color: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .dark .glass-card {
            background-color: rgba(10, 19, 37, 0.95) !important;
            backdrop-filter: blur(8px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Hero Action Buttons Glass Effect - More Solid */
        .glass-btn {
            background-color: rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(4px) !important;
            -webkit-backdrop-filter: blur(4px) !important;
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
        }

        /* --- Tablet & Below (max-width: 1200px) --- */
        @media (max-width: 1200px) {
            .peeking-logo {
                right: -20vw;
                height: 90vh;
                opacity: 0.1;
            }
            .glass-card {
                background-color: rgba(255, 255, 255, 0.98) !important;
            }
            .dark .glass-card {
                background-color: rgba(10, 19, 37, 0.98) !important;
            }
        }

        /* --- Tablet (max-width: 992px) --- */
        @media (max-width: 992px) {
            .peeking-logo {
                right: -25vw; /* Less aggressive shift for tablet */
                height: 80vh;
                opacity: 0.1;
            }
            #beranda h1 {
                font-size: 4.5rem;
            }
        }

        /* --- Mobile Large / Small Tablet (max-width: 768px) --- */
        @media (max-width: 768px) {
            .peeking-logo {
                right: -30vw; /* Bring it closer to peek through */
                height: 70vh;
                opacity: 0.08; 
            }
            .glass-card {
                background-color: rgba(255, 255, 255, 1) !important;
            }
            .dark .glass-card {
                background-color: rgba(10, 19, 37, 1) !important;
            }
            #beranda {
                min-height: 100svh; /* Fallback */
                min-height: 100dvh; /* Adaptive height for mobile */
                padding-top: 7rem;
                padding-bottom: 5rem;
            }
            #beranda h1 {
                font-size: 3.5rem;
                line-height: 1.1;
            }
            #beranda p {
                font-size: 1.1rem;
                margin-bottom: 2rem;
            }
            
            .maps-instagram-container {
                gap: 1.5rem;
            }
            
            #mobile-menu {
                max-height: calc(100vh - 80px);
                overflow-y: auto;
            }
        }

        /* --- Mobile Medium (max-width: 576px) --- */
        @media (max-width: 576px) {
            #beranda h1 {
                font-size: 2.8rem;
            }
            .container {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
            #unggulan .grid, #partner .flex {
                gap: 1.25rem;
            }
        }

        /* --- Mobile Small (max-width: 480px) --- */
        @media (max-width: 480px) {
            #beranda h1 {
                font-size: 2.4rem;
            }
            .nav-text.font-bold {
                font-size: 1rem;
            }
            .nav-text.text-\[10px\] {
                font-size: 8px;
            }
            #beranda .flex-wrap {
                flex-direction: column;
                width: 100%;
            }
            #beranda a {
                width: 100%;
                justify-content: center;
                text-align: center;
            }
            
            /* Spacing adjustments */
            section {
                padding-top: 4rem !important;
                padding-bottom: 4rem !important;
            }
            #beranda {
                padding-top: 8rem !important;
            }
        }

        /* --- Mobile Extra Small (max-width: 360px) --- */
        @media (max-width: 360px) {
            #beranda h1 {
                font-size: 2rem;
            }
            .nav-text.font-bold {
                font-size: 0.9rem;
            }
        }

        /* Fix for iOS Safari Toolbars */
        @supports (-webkit-touch-callout: none) {
            #beranda {
                min-height: -webkit-fill-available;
            }
        }

        /* --- Performance Optimization for Mobile --- */
        @media (max-width: 768px) {
            /* Disable heavy background animations on mobile devices */
            .floating-square, 
            .spotlight,
            .spotlight-1, 
            .spotlight-2, 
            .spotlight-3 {
                display: none !important;
                animation: none !important;
            }
        }