/* Variabel CSS global - sebaiknya ini ada di style.css */
        :root { --brand-orange: #ff6a00; }
        body { background-color: #080808; color: white; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
        .pixel-font { font-family: 'Silkscreen', cursive; }
        
        .bg-grid {
            background-image: linear-gradient(to right, #151515 1px, transparent 1px), linear-gradient(to bottom, #151515 1px, transparent 1px);
            background-size: 30px 30px;
            background-attachment: fixed; /* Membuat grid tidak bergerak saat scroll */
        }
        @media (min-width: 768px) { .bg-grid { background-size: 50px 50px; } }

        .controller-glow { filter: drop-shadow(0 0 20px rgba(0, 242, 255, 0.3)); }
        .glass-pill { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .btn-orange { background: var(--brand-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transition: all 0.3s; }
        .btn-orange:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 106, 0, 0.6); }

        .section { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 5rem; padding-bottom: 5rem; }
        .active-section { display: flex; }

        /* Product Card Styles */
        .product-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s ease;
        }
        .product-card:hover {
            border-color: var(--brand-orange);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-10px);
        }

        /* Article Card Styles (untuk slider) */
        .article-slide-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            transition: 0.3s;
            overflow: hidden;
        }
        .article-slide-card:hover {
            border-color: var(--brand-orange);
            transform: translateY(-5px);
        }
        .article-slide-card img { transition: 0.5s; filter: grayscale(100%); }
        .article-slide-card:hover img { scale: 1.1; filter: grayscale(0); }

        /* Swiper Custom Overrides */
        .swiper-container { width: 100%; padding: 0 1rem; /* Adjust padding for mobile */ }
        @media (min-width: 768px) { .swiper-container { padding: 0 3rem; } }
        .swiper-slide { width: 300px; /* Lebar default slide */ }
        .swiper-pagination-bullet { background: white !important; }
        .swiper-pagination-bullet-active { background: var(--brand-orange) !important; }

        body { background-color: #080808; color: white; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
        .pixel-font { font-family: 'Silkscreen', cursive; }
        
        .bg-grid {
            background-image: linear-gradient(to right, #151515 1px, transparent 1px), linear-gradient(to bottom, #151515 1px, transparent 1px);
            background-size: 30px 30px;
            background-attachment: fixed;
        }
        @media (min-width: 768px) { .bg-grid { background-size: 50px 50px; } }

        .controller-glow { filter: drop-shadow(0 0 20px rgba(0, 242, 255, 0.3)); }
        .glass-pill { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); }
        
        .section { min-height: 100vh; position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }

        /* Swiper Custom Style */
        .swiper { width: 100%; padding: 50px 0 !important; }
        .swiper-slide { width: 320px; transition: transform 0.3s; }
        .swiper-pagination-bullet { background: white !important; }
        .swiper-pagination-bullet-active { background: var(--brand-orange) !important; }

        .product-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s ease;
        }
        .product-card:hover { border-color: var(--brand-orange); transform: translateY(-10px); }
        :root { --brand-orange: #ff6a00; }
        body { background-color: #080808; color: white; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
        .pixel-font { font-family: 'Silkscreen', cursive; }
        
        .bg-grid {
            background-image: linear-gradient(to right, #151515 1px, transparent 1px), linear-gradient(to bottom, #151515 1px, transparent 1px);
            background-size: 30px 30px;
        }
        @media (min-width: 768px) { .bg-grid { background-size: 50px 50px; } }

        .controller-glow { filter: drop-shadow(0 0 20px rgba(0, 242, 255, 0.3)); }
        .glass-pill { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .btn-orange { background: var(--brand-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transition: all 0.3s; }
        .btn-orange:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 106, 0, 0.6); }

        .section { display: none; min-height: 100vh; }
        .active-section { display: flex; }

        /* Product Card Styles */
        .product-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s ease;
        }
        .product-card:hover {
            border-color: var(--brand-orange);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-10px);
        }

        :root { --brand-orange: #ff6a00; }
        body { 
            background-color: #080808; 
            color: white; 
            font-family: 'Plus Jakarta Sans', sans-serif;
            line-height: 1.6;
        }
        .pixel-font { font-family: 'Silkscreen', cursive; }
        
        /* Grid Background (Static) */
        .bg-grid {
            background-image: linear-gradient(to right, #151515 1px, transparent 1px), linear-gradient(to bottom, #151515 1px, transparent 1px);
            background-size: 50px 50px;
            background-attachment: fixed;
        }

        /* Glassmorphism Header */
        .glass-nav {
            background: rgba(8, 8, 8, 0.8);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Konten Artikel Styling */
        .article-content p {
            margin-bottom: 1.8rem;
            color: #b0b0b0;
            font-size: 1.125rem;
        }
        .article-content h2 {
            font-weight: 800;
            font-size: 2rem;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: -0.025em;
        }
        .article-content strong { color: white; }

        .quote-box {
            border-left: 4px solid var(--brand-orange);
            background: rgba(255, 106, 0, 0.05);
            padding: 2rem;
            margin: 3rem 0;
            font-style: italic;
            font-size: 1.5rem;
            color: white;
        }

        /* Progress Bar di atas */
        #progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: transparent;
            z-index: 1000;
        }
        #progress-bar {
            height: 100%;
            background: var(--brand-orange);
            width: 0%;
        }