:root {
            /* Light Mode Variables */
            --primary: #D32F2F;
            --primary-gradient: linear-gradient(135deg, #ff3b3b 0%, #ff8f00 100%);
            --secondary-gradient: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            --pwa-banner-bg: linear-gradient(90deg, #b71c1c 0%, #d32f2f 100%);
            
            --bg-body: #f4f6f8;
            --bg-card: #ffffff;
            --bg-sidebar: #ffffff;
            --text-main: #333333;
            --text-muted: #777777;
            --border-color: #e0e0e0;
            --nav-bg: #ffffff;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            --radius: 16px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            /* --- Shared Theme Variables --- */
            --features-bg: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
            --features-border: #e0e0e0;
            --features-text: #2c3e50;
            --features-text-muted: #7f8c8d;
            --features-item-bg: #ffffff;
            --features-item-border: #e0e0e0;
            --features-icon-bg: rgba(211, 47, 47, 0.08);
            --features-icon-color: var(--primary);

            /* --- Gold Voucher Banner Specifics (Light Mode) --- */
            --gold-bg: #FFF8E1;
            --gold-border: #FF8F00;
            --gold-text-main: #E65100;
            --gold-text-sub: #8D6E63;
            --gold-icon-bg: #FFECB3;
            --gold-icon-color: #FF6F00;
        }

        /* DARK MODE DEFAULT */
        [data-theme="dark"] {
            --primary: #ff4d4d;
            --primary-gradient: linear-gradient(135deg, #ff3b3b 0%, #d32f2f 100%);
            --secondary-gradient: linear-gradient(135deg, #4a148c 0%, #0d47a1 100%);
            --pwa-banner-bg: linear-gradient(90deg, #880e4f 0%, #b71c1c 100%);

            --bg-body: #121212;
            --bg-card: #1e1e1e;
            --bg-sidebar: #1e1e1e;
            --text-main: #ffffff;
            --text-muted: #aaaaaa;
            --border-color: #333333;
            --nav-bg: #1e1e1e;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

            --features-bg: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
            --features-border: #333333;
            --features-text: #ffffff;
            --features-text-muted: #aaaaaa;
            --features-item-bg: rgba(255, 255, 255, 0.05);
            --features-item-border: rgba(255, 255, 255, 0.1);
            --features-icon-bg: rgba(255, 255, 255, 0.1);
            --features-icon-color: #ffffff;

            /* --- Gold Voucher Banner Specifics (Dark Mode) --- */
            --gold-bg: rgba(255, 160, 0, 0.08);
            --gold-border: #FF8F00;
            --gold-text-main: #FFD54F;
            --gold-text-sub: #FFB74D;
            --gold-icon-bg: rgba(255, 160, 0, 0.2);
            --gold-icon-color: #FFD54F;
        }

        /* --- RESET & BASE FIXES --- */
        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

        html {
            width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-body);
            display: flex;
            justify-content: center;
            min-height: 100vh;
            color: var(--text-main);
            overflow-x: hidden; /* Mencegah scroll horizontal di body */
            width: 100%;
        }

        /* Mobile Container */
        .app-container {
            width: 100%;
            max-width: 600px;
            background-color: var(--bg-body);
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 50px rgba(255, 0, 0, 0.05);
            overflow-x: hidden;
            padding-bottom: 80px; 
            display: flex;
            flex-direction: column;
            margin: 0 auto; 
        }

        /* --- Sidebar --- */
        .sidebar-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6); z-index: 999;
            opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(4px);
        }
        .sidebar-overlay.active { opacity: 1; visibility: visible; }

        .sidebar {
            position: fixed; top: 0; left: 0; width: 280px; height: 100%;
            background: var(--bg-sidebar); z-index: 1000; transform: translateX(-100%);
            transition: var(--transition); padding: 20px;
            display: flex; flex-direction: column; border-right: 1px solid var(--border-color);
        }
        .sidebar.active { transform: translateX(0); }

        .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
        .sidebar-brand { font-weight: 800; font-size: 1.5rem; color: var(--primary); }
        .sidebar-menu { list-style: none; }
        .sidebar-menu li { margin-bottom: 5px; }
        
        .sidebar-link {
            display: flex; align-items: center; gap: 15px; padding: 12px 15px;
            text-decoration: none; color: var(--text-main); border-radius: 10px;
            font-weight: 500; transition: var(--transition);
        }
        .sidebar-link:hover, .sidebar-link.active { background: rgba(211, 47, 47, 0.1); color: var(--primary); }
        .sidebar-link i { font-size: 1.2rem; }

        /* --- Header --- */
        header {
            padding: 10px 15px; 
            background: var(--features-bg); 
            display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 100; 
            border-bottom: 1px solid var(--features-border); 
            width: 100%;
            left: 0;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s;
            gap: 8px; 
        }
        [data-theme="dark"] header { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        header::before {
            content: ''; position: absolute; top: -30px; right: -30px;
            width: 80px; height: 80px; background: var(--primary); filter: blur(50px);
            opacity: 0.15; pointer-events: none; z-index: 0;
        }
        [data-theme="dark"] header::before { opacity: 0.2; }
        
        /* 
           --- FIX HEADER LAYOUT ---
           Menggunakan flexbox untuk memastikan logo tidak terpotong 
           dan search bar fleksibel (auto shift/shrink).
        */
        .header-left { 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            position: relative; 
            z-index: 1; 
            flex: 1 1 auto; /* Container ini akan mengambil sisa ruang */
            min-width: 0; /* Penting untuk flex children agar bisa mengecil */
        }

        .menu-btn { 
            background: transparent; 
            border: none; 
            font-size: 1.4rem; /* Sedikit lebih kecil default */
            color: var(--text-main); 
            cursor: pointer; 
            flex-shrink: 0; /* Tombol menu tidak boleh mengecil */
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .brand { 
            font-size: 1.2rem; 
            font-weight: 800; 
            background: var(--primary-gradient); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            white-space: nowrap; 
            
            /* PENTING: Mencegah Logo Terpotong */
            flex-shrink: 0; 
        }

        /* --- Header Search Bar --- */
        .header-search {
            /* Menggunakan flex: 1 agar search bar mengisi sisa ruang secara otomatis */
            flex: 1; 
            position: relative;
            z-index: 1;
            /* Batasi lebar maksimal di layar besar, tapi min-width di layar kecil */
            max-width: 200px; 
            min-width: 40px; /* Search bar tidak boleh hilang total */
            margin-left: 2px;
        }
        
        .search-wrapper {
            display: flex;
            align-items: center;
            width: 100%;
            background: var(--bg-card);
            border-radius: 50px; 
            border: 1px solid var(--border-color);
            overflow: hidden;
            transition: var(--transition);
        }
        .search-wrapper:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
        }
        
        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 8px 12px; /* Padding lebih tipis */
            font-family: inherit;
            color: var(--text-main);
            font-size: 0.8rem;
            outline: none;
            min-width: 0;
        }
        .search-input::placeholder { 
            color: var(--text-muted); 
            font-size: 0.7rem; 
            /* Placeholder hilang jika layar terlalu sempit agar tidak berantakan (lihat media query) */
        }

        .search-btn {
            background: transparent;
            border: none;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            cursor: pointer;
            margin-right: 2px;
            transition: var(--transition);
            flex-shrink: 0; /* Ikon pencarian tetap terlihat */
        }
        .search-btn:hover { color: var(--primary); background: rgba(211, 47, 47, 0.05); }

        .header-right { display: flex; gap: 4px; position: relative; z-index: 1; flex-shrink: 0; }
        .icon-btn {
            background: rgba(255,255,255,0.05); border: 1px solid var(--features-border);
            width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; color: var(--text-main); transition: var(--transition);
            position: relative; flex-shrink: 0;
        }
        .icon-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--features-icon-bg); }

        /* --- NEW: Notification Badge & Shake Animation --- */
        .notif-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 10px;
            height: 10px;
            background-color: #ff0000;
            border-radius: 50%;
            border: 2px solid var(--features-bg);
            animation: pulse-red 2s infinite;
            pointer-events: none;
        }

        @keyframes pulse-red {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255, 0, 0, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
        }

        @keyframes shake-bell {
            0% { transform: rotate(0deg); }
            15% { transform: rotate(15deg); }
            30% { transform: rotate(-10deg); }
            45% { transform: rotate(5deg); }
            60% { transform: rotate(-5deg); }
            75% { transform: rotate(2deg); }
            100% { transform: rotate(0deg); }
        }

        .bell-shake {
            animation: shake-bell 2.5s infinite ease-in-out;
        }

        /* --- PWA --- */
        .pwa-container { padding: 15px 20px 0; position: relative; }
        .pwa-banner {
            background: var(--pwa-banner-bg); border-radius: var(--radius);
            padding: 15px 15px 15px 15px;
            display: flex; justify-content: space-between; align-items: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden;
            animation: slideDown 0.5s ease;
        }
        .pwa-banner::after {
            content: ''; position: absolute; right: -30px; bottom: -30px;
            width: 120px; height: 120px; background: rgba(255,255,255,0.1); border-radius: 50%;
        }
        .pwa-content { z-index: 1; }
        .pwa-headline { color: white; font-weight: 800; font-size: 1.1rem; margin-bottom: 0; text-transform: uppercase; }
        
        .pwa-right-controls { display: flex; gap: 10px; align-items: center; z-index: 2; }
        .btn-install {
            background: #ffffff; color: #b71c1c; border: none; padding: 8px 20px;
            border-radius: 25px; font-weight: 800; font-size: 0.85rem; cursor: pointer;
            transition: transform 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            display: flex; align-items: center; gap: 6px;
        }
        .btn-install:active { transform: scale(0.95); }
        .btn-close-pwa {
            background: rgba(0,0,0,0.2); border: none; color: rgba(255,255,255,0.8);
            width: 30px; height: 30px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            transition: background 0.2s;
        }
        .btn-close-pwa:hover { background: rgba(0,0,0,0.4); color: white; }

        /* --- Sections --- */
        .section-title { font-size: 1.1rem; font-weight: 700; border-left: 4px solid var(--primary); padding-left: 10px; }
        .section-header { padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; margin-top: 5px; }

        /* --- Fresh Sale Section --- */
        .fresh-sale-container { margin: 20px 0; padding: 0 20px; }
        .fresh-sale-header { background: linear-gradient(90deg, #ff8f00, #ff3b3b); border-radius: 12px 12px 0 0; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: white; }
        .fresh-sale-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.9rem; font-style: italic; }
        .fresh-sale-timer { display: flex; gap: 5px; align-items: center; }
        .timer-box { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; font-family: monospace; }
        .fresh-sale-body { background: var(--bg-card); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 12px 12px; padding: 15px 10px; display: flex; overflow-x: auto; gap: 12px; scrollbar-width: none; scroll-behavior: smooth; align-items: center; scroll-snap-type: x mandatory; touch-action: pan-x; }
        
        .sale-item { min-width: 78px; background: var(--bg-card); border-radius: 12px; overflow: hidden; border: 2px solid var(--border-color); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; flex-shrink: 0; align-items: center; scroll-snap-align: start; border-color: var(--fs-color, var(--border-color)); }
        .sale-item:hover { transform: translateY(-3px); box-shadow: 0 4px 12px var(--fs-color, transparent); filter: brightness(1.05); }
        .sale-img-wrapper { height: 50px; width: 78px; position: relative; overflow: hidden; }
        .sale-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px 10px 0 0; }
        .sale-badge { position: absolute; top: 0; right: 0; background: var(--fs-color, #ff3b3b); color: white; font-size: 0.4rem; font-weight: 700; padding: 1px 2px; border-bottom-left-radius: 4px; z-index: 5; }
        .sale-info { padding: 6px 4px; width: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; }
        .sale-name { font-size: 0.6rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; margin-bottom: 2px;}
        .sale-publisher { font-size: 0.5rem; color: var(--fs-color, var(--primary)); font-weight: 700; }
        .old-price { font-size: 0.45rem; color: var(--text-muted); text-decoration: line-through; margin-bottom: 1px; display: block; }
        .sale-item:nth-child(4n+1) { --fs-color: #4285F4; } .sale-item:nth-child(4n+2) { --fs-color: #EA4335; } .sale-item:nth-child(4n+3) { --fs-color: #FBBC05; } .sale-item:nth-child(4n+4) { --fs-color: #34A853; } 

        /* --- NEW: Gold Voucher Section --- */
        .gold-voucher-section {
            margin-top: 5px;
            padding: 0 20px;
        }
        .gold-voucher-banner {
            background: var(--gold-bg);
            border: 2px solid var(--gold-border);
            border-radius: var(--radius);
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(255, 143, 0, 0.15);
            position: relative;
            overflow: hidden;
        }
        .gold-voucher-banner:active {
            transform: scale(0.98);
        }
        
        .gold-icon-wrapper {
            flex-shrink: 0;
            width: 45px;
            height: 45px;
            background: var(--gold-icon-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 143, 0, 0.3);
            color: var(--gold-icon-color);
            font-size: 1.2rem;
            position: relative;
            z-index: 2;
        }

        .gold-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 2;
            min-width: 0; /* Mencegah text overflow */
        }
        .gold-title {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--gold-text-main);
            margin-bottom: 2px;
            line-height: 1.2;
        }
        .gold-desc {
            font-size: 0.7rem;
            color: var(--gold-text-sub);
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .gold-arrow {
            flex-shrink: 0;
            color: var(--gold-text-main);
            opacity: 0.6;
            font-size: 1.2rem;
            position: relative;
            z-index: 2;
        }

        .gold-voucher-banner::before {
            content: '';
            position: absolute;
            right: -20px;
            top: -20px;
            width: 80px;
            height: 80px;
            background: var(--gold-border);
            filter: blur(40px);
            opacity: 0.2;
            pointer-events: none;
            z-index: 1;
        }

        /* --- PROMO SECTION (MOBILE FIX) --- */
        .promo-section-wrapper { margin-top: 20px; position: relative; }
        .promo-slider {
            display: flex; overflow-x: auto; padding: 0; /* Padding dihapus, dialihkan ke scroll-padding */
            gap: 15px;
            scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 20px;
            -webkit-overflow-scrolling: touch; cursor: grab; scroll-behavior: smooth; touch-action: pan-x; 
            will-change: scroll-position;
        }
        .promo-slider::-webkit-scrollbar { display: none; }
        .promo-slider:active { cursor: grabbing; }
        
        /* PERBAIKAN UTAMA: Menggunakan vw agar responsif terhadap lebar layar, bukan parent container */
        .promo-card {
            width: 85vw; /* Mengambil 85% lebar layar viewport */
            max-width: 400px; /* Batas maksimal untuk tablet/desktop */
            height: 150px; 
            border-radius: var(--radius);
            background: var(--bg-card); position: relative; overflow: hidden;
            border: 1px solid var(--border-color); flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always;
            display: flex; justify-content: center; align-items: center; padding: 20px; transition: transform 0.3s ease;
            margin-left: 20px; /* Kompensasi padding container */
            margin-right: 5px; /* Jarak aman untuk scroll */
        }
        /* Item pertama agar tidak ada margin kiri yang berlebihan saat start */
        .promo-card:first-child {
            margin-left: 20px; 
        }
        .promo-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(0.7); transition: transform 5s ease; }
        .promo-slider:hover .promo-card .promo-bg { transform: scale(1.1); }
        .promo-overlay {
            position: relative;
            z-index: 2;
            background: rgb(12 9 9 / 50%);
            backdrop-filter: blur(28px);
            padding: 12px 20px; /* Dikurangi paddingnya agar muat di layar kecil */
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .promo-label { background: var(--secondary-gradient); color: white; font-size: 0.6rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; margin-bottom: 6px; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
        .promo-text { color: #eeb308; font-size: 0.9rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,1); line-height: 1.3; width: 100%; word-wrap: break-word; }
        
        .promo-pagination { display: flex; justify-content: center; gap: 8px; padding: 15px 0 0; }
        .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); transition: all 0.3s ease; cursor: pointer; }
        .dot.active { width: 24px; background: var(--primary); border-radius: 10px; }

        /* --- Games Grid --- */
        .games-section-wrapper { padding: 0 20px; margin-top: 20px; }
        .games-container {
            background: var(--features-bg);
            border: 1px solid var(--features-border);
            border-radius: var(--radius);
            padding: 15px 15px 20px 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        [data-theme="dark"] .games-container { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .games-container::before {
            content: ''; position: absolute; top: -50px; left: -50px; width: 100px; height: 100px;
            background: var(--primary); filter: blur(60px); opacity: 0.15; pointer-events: none; z-index: 0;
        }
        [data-theme="dark"] .games-container::before { opacity: 0.2; }
        .tabs { display: flex; padding: 0; gap: 20px; margin-bottom: 15px; position: relative; z-index: 1; overflow-x: auto; white-space: nowrap; }
        .tab-btn { background: none; border: none; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); padding-bottom: 5px; cursor: pointer; position: relative; flex-shrink: 0; }
        .tab-btn.active { color: var(--primary); }
        .tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--primary); border-radius: 3px; }
        .games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; position: relative; z-index: 1; }
        .game-card { 
            background: var(--bg-card); border-radius: 12px; overflow: hidden; 
            border: 1px solid var(--border-color); transition: var(--transition); 
            cursor: pointer; text-align: center; display: flex; flex-direction: column; 
            box-shadow:0 2px 5px rgba(0,0,0,0.05);
        }
        .game-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .game-cover { width: 100%; height: auto; aspect-ratio: 150 / 100; object-fit: cover; display: block; }
        .game-info { padding: 8px 4px; width: 100%; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
        .game-title { font-size: 0.65rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .game-publisher { font-size: 0.5rem; color: var(--text-muted); }

        /* --- FEATURES SECTION --- */
        .features-section { padding: 0 20px; margin-top: 35px; margin-bottom: 10px; }
        .features-card-container {
            background: var(--features-bg); border: 1px solid var(--features-border);
            border-radius: var(--radius); padding: 20px; position: relative;
            overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        [data-theme="dark"] .features-card-container { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .features-card-container::before {
            content: ''; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px;
            background: var(--primary); filter: blur(60px); opacity: 0.15;
        }
        [data-theme="dark"] .features-card-container::before { opacity: 0.2; }
        .features-header {
            color: var(--features-text); font-size: 1rem; font-weight: 800;
            text-align: center; text-transform: uppercase; margin-bottom: 20px;
            position: relative; z-index: 1; letter-spacing: 0.5px;
        }
        .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; position: relative; z-index: 1; }
        .feature-card { 
            background: var(--features-item-bg); padding: 12px; border-radius: 12px; 
            display: flex; align-items: center; gap: 10px; 
            border: 1px solid var(--features-item-border);
            backdrop-filter: blur(4px); transition: transform 0.2s ease;
        }
        .feature-card:hover { transform: translateY(-2px); border-color: var(--primary); }
        .feature-icon { 
            width: 36px; height: 36px; border-radius: 8px; background: var(--features-icon-bg); 
            color: var(--features-icon-color); display: flex; align-items: center; justify-content: center; 
            font-size: 1.1rem; border: 1px solid var(--features-item-border); flex-shrink: 0;
        }
        .feature-text { min-width: 0; } /* Mencegah overflow teks */
        .feature-text h4 { font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: var(--features-text); }
        .feature-text span { font-size: 0.65rem; color: var(--features-text-muted); }

        /* --- PAYMENT METHODS SECTION --- */
        .payment-section { margin: 20px 0; padding: 0 20px; }
        .payment-container {
            background: var(--features-bg); border: 1px solid var(--features-border);
            border-radius: var(--radius); overflow: hidden; display: flex;
            flex-direction: column; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        [data-theme="dark"] .payment-container { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .payment-container::before {
            content: ''; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px;
            background: var(--primary); filter: blur(60px); opacity: 0.15; pointer-events: none; z-index: 0;
        }
        [data-theme="dark"] .payment-container::before { opacity: 0.2; }
        .payment-header {
            padding: 12px 15px; font-weight: 700; color: var(--text-main); 
            border-bottom: 1px solid var(--features-border); background: rgba(255,255,255,0.5); 
            backdrop-filter: blur(5px); z-index: 1; flex-shrink: 0; 
        }
        [data-theme="dark"] .payment-header { background: rgba(255,255,255,0.02); }
        .payment-body { padding: 15px 5px; z-index: 1; position: relative; overflow: hidden; }
        .payment-slider { display: flex; overflow-x: auto; gap: 12px; padding: 5px 5px 10px 5px; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; touch-action: pan-x; }
        .payment-slider::-webkit-scrollbar { display: none; }
        .payment-card { 
            min-width: 90px; background: var(--bg-card); border: 1px solid var(--border-color); 
            border-radius: 12px; padding: 12px; display: flex; flex-direction: column; 
            align-items: center; justify-content: center; flex-shrink: 0; scroll-snap-align: center; 
            cursor: pointer; transition: transform 0.2s, border-color 0.2s; position: relative; z-index: 1;
        }
        .payment-card:active { transform: scale(0.95); }
        .payment-card:hover { border-color: var(--primary); }
        .pay-logo { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.85rem; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); text-transform: uppercase; }
        .pay-name { font-size: 0.7rem; font-weight: 600; color: var(--text-main); margin-bottom: 2px; text-align: center; }
        .pay-type { font-size: 0.6rem; color: var(--text-muted); text-align: center; }
        .logo-bca { background: #0056D2; } .logo-cimb { background: #FF0000; } .logo-mandiri { background: #ffb81c; color: #003d79; } .logo-bni { background: #2b98ab; color: #e55300; } .logo-sinarmas { background: #D32F2F; } .logo-dana { background: #118eea; } .logo-ovo { background: #4c3494; } .logo-gopay { background: #00b14f; } .logo-paypal { background: #003087; }

        /* --- FOOTER & VERSION SECTION --- */
        .app-footer { margin-top: 10px; padding: 30px 20px 20px; text-align: center; color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; }
        .footer-text { margin-bottom: 5px; opacity: 0.8; }
        
        .footer-version {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

        /* Text Line */
        .version-top-text {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-muted); /* Use main color for visibility */
            margin-bottom: 10px; /* Space between text and logos */
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* Logo Container Line */
        .version-bottom-logos {
            display: flex;
            justify-content: center; /* Center logos */
            align-items: center;
            gap: 5px; /* Small gap between logos */
        }

        /* Logo Styling */
        .brand-logo {
            width: 22px; height: 22px; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            background: var(--bg-card);
            border: 1px solid var(--border-color); 
            position: relative;
            transition: var(--transition);
        }
        .brand-logo:hover { transform: scale(1.1); }
        .brand-logo i { font-size: 12px; }
        
        /* Logo Colors */
        .logo-google i { color: #4285F4; }
        .logo-apple i { color: #000; } 
        [data-theme="dark"] .logo-apple i { color: #fff; } /* Apple white in dark mode */
        .logo-safe i { color: #00C851; }


        /* --- Bottom Nav --- */
        .bottom-nav { 
            position: fixed; bottom: 0; width: 100%; max-width: 600px; 
            background: var(--features-bg); display: flex; justify-content: space-around; padding: 6px 0;
            border-top: 1px solid var(--features-border); z-index: 100; 
            box-shadow: 0 -4px 15px rgba(0,0,0,0.05); backdrop-filter: blur(10px);
            transition: all 0.3s; left: 50%; transform: translateX(-50%);
        }
        [data-theme="dark"] .bottom-nav { box-shadow: 0 -4px 15px rgba(0,0,0,0.3); }
        .bottom-nav::before {
            content: ''; position: absolute; bottom: -30px; right: -30px; width: 80px; height: 80px;
            background: var(--primary); filter: blur(50px); opacity: 0.15; pointer-events: none; z-index: 0;
        }
        [data-theme="dark"] .bottom-nav::before { opacity: 0.2; }
        .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); text-decoration: none; font-size: 0.7rem; gap: 2px; position: relative; z-index: 1; }
        .nav-item i { font-size: 1.2rem; transition: var(--transition); }
        .nav-item.active { color: var(--primary); }
        .nav-item.active i { transform: translateY(-2px); }

        /* --- Toast --- */
        .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(30,30,30,0.95); color: #fff; padding: 10px 20px; border-radius: 25px; font-size: 0.8rem; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 2000; display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); white-space: nowrap; max-width: 80%; } /* Added max-width */
        [data-theme="light"] .toast { background: rgba(0,0,0,0.8); border: 1px solid rgba(0,0,0,0.1); } 
        .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

        @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

        /* --- RESPONSIVE HEADER FIXES FOR SMALL MOBILES (CSS ONLY CHANGES) --- */
        
        /* 1. Untuk layar kecil (max-width 380px) - Galaxy J/A, iPhone SE */
        @media screen and (max-width: 380px) {
            header {
                padding: 8px 10px; /* Kurangi padding agar lebih lega */
                gap: 5px;          /* Kurangi jarak antar elemen */
            }

            .header-left {
                gap: 5px;
            }

            .brand {
                font-size: 0.95rem; /* Ukuran font disesuaikan */
            }

            .header-search {
                max-width: 100px; /* Paksa search bar mengecil agar muat */
            }

            .search-input {
                padding: 6px 7px;
                font-size: 0.75rem;
            }

            .search-btn {
                width: 20px;
                height: 20px;
            }
            
            .header-right {
                gap: 2px;
            }

            .icon-btn {
                width: 30px;
                height: 30px;
            }
            
            .icon-btn i {
                font-size: 0.9rem;
            }
        }

        /* 2. Untuk layar sangat kecil (max-width 340px) - Sangat ketat */
        @media screen and (max-width: 340px) {
            .brand {
                font-size: 0.85rem; /* Font lebih kecil lagi tapi tetap terbaca */
            }

            .header-search {
                min-width: 35px; /* Minimum lebar search bar agar ikon tetap terlihat */
                max-width: 60px;
            }

            /* Sembunyikan placeholder text agar tidak berantakan */
            .search-input::placeholder {
                color: transparent;
            }

            .menu-btn {
                width: 28px;
                height: 28px;
                font-size: 1rem;
            }
        }