/* --- 2. DESAIN CSS GLOBAL --- */
        * { box-sizing: border-box; }
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f4f6f9;
            margin: 0; padding: 0;
            color: #333;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        /* HEADER */
        .hero-header {
            background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
            padding: 40px 15px 70px 15px;
            color: white; text-align: center;
            border-radius: 0 0 25px 25px;
            position: relative; width: 100%;
        }
        .hero-title { font-size: 1.6rem; font-weight: 700; margin: 0; text-transform: uppercase; }
        .hero-subtitle { font-size: 0.85rem; opacity: 0.8; margin-top: 5px; }

        /* MENU CONTAINER */
        .dashboard-container {
            width: 100%; max-width: 500px;
            margin: -50px auto 20px auto;
            padding: 0 15px;
            position: relative; z-index: 10;
        }

        /* KARTU MENU */
        .menu-card {
            background: white; border-radius: 15px;
            padding: 18px; margin-bottom: 12px;
            display: flex; align-items: center; justify-content: space-between;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            width: 100%; cursor: pointer; transition: 0.2s;
        }
        .menu-card:active { transform: scale(0.98); background: #f8fafc; }

        .menu-icon {
            width: 45px; height: 45px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; margin-right: 15px; flex-shrink: 0;
        }
        .bg-blue { background: #e0f2fe; color: #0284c7; }
        .bg-purple { background: #f3e8ff; color: #9333ea; }
        .bg-orange { background: #ffedd5; color: #ea580c; }
        
        .menu-text h3 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #1e293b; }
        .menu-text p { margin: 2px 0 0 0; font-size: 0.75rem; color: #64748b; }

        /* WIDGET INFO & PEMBAYARAN */
        .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
        .info-card {
            background: white; padding: 12px; border-radius: 12px;
            text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        }
        .payment-box {
            background: white; padding: 15px; border-radius: 15px;
            margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            text-align: center;
        }
        .pay-icons {
            display: flex; justify-content: center; gap: 8px;
            margin-top: 10px; flex-wrap: wrap;
        }
        .pay-badge {
            background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b;
            padding: 4px 8px; border-radius: 6px; font-size: 0.65rem; font-weight: 600;
            display: flex; align-items: center; gap: 4px;
        }

        /* PRODUK PAGE */
        .page-container {
            display: none; /* Default Hidden */
            background: #f8f9fa; min-height: 100vh; width: 100%;
        }
        .sticky-nav {
            background: white; padding: 15px;
            display: flex; align-items: center;
            position: sticky; top: 0; z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .btn-back {
            background: #f1f5f9; border: none; width: 35px; height: 35px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin-right: 15px; cursor: pointer; color: #334155;
        }
        .filter-scroll {
            padding: 10px 15px; overflow-x: auto; white-space: nowrap;
            background: white; border-bottom: 1px solid #f1f5f9;
        }
        .filter-scroll::-webkit-scrollbar { display: none; }
        .filter-btn {
            padding: 8px 16px; border-radius: 50px; border: 1px solid #e2e8f0;
            background: white; color: #64748b; margin-right: 8px; font-size: 0.8rem;
        }
        .filter-btn.active { background: #0f172a; color: white; border-color: #0f172a; }

        .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; }
        .card-prod {
            background: white; padding: 12px; border-radius: 12px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04); position: relative;
            display: flex; flex-direction: column; justify-content: space-between;
        }
        .brand-lbl {
            position: absolute; top: 8px; right: 8px; font-size: 0.6rem;
            background: #f1f5f9; color: #475569; padding: 2px 6px; border-radius: 4px;
        }
        .btn-buy {
            background: #0f172a; color: white; text-align: center;
            padding: 8px; border-radius: 8px; text-decoration: none;
            font-size: 0.8rem; font-weight: 500; display: block;
        }
        /* --- FOOTER CANTIK (Tambahan) --- */
.footer-clean {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px; /* Jarak aman dari bawah layar */
    color: #94a3b8;      /* Warna abu-abu soft */
    font-size: 0.8rem;
}

.footer-clean p {
    margin: 0 0 10px 0;
    font-weight: 500;
}

.footer-links {
    display: inline-block;
    background: rgba(255,255,255, 0.5); /* Latar sedikit putih transparan */
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
}

.footer-links a {
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #0284c7; /* Berubah biru saat disentuh */
}

.divider {
    margin: 0 10px;
    color: #cbd5e1;
}