/* Dipindah dari shop/index.php (blok #5, id=bayargg-brand-theme) */
    /* ============================================
       BAYAR GG Brand Theme — solid surfaces, no glass, no cyan
       ============================================ */
    :root {
        color-scheme: dark light;
        --bgg-primary:#1a86ff;
        --bgg-primary-dark:#0f6ee6;
        --bgg-primary-light:#66adff;
        --bgg-primary-soft:#66adff;
        --bgg-electric:#2e93ff;
        --bgg-bg:#000000;
        --bgg-bg-1:#000000;
        --bgg-bg-2:#000000;
        --bgg-bg-3:#000000;
        --bgg-bg-elev:#000000;
        --bgg-bg-surface:#000000;
        --bgg-text:#ffffff;
        --bgg-text-2:rgba(255,255,255,.72);
        --bgg-text-3:rgba(255,255,255,.60);
        --bgg-muted:rgba(255,255,255,.40);
        --bgg-border:rgba(255,255,255,.08);
        --bgg-border-strong:rgba(255,255,255,.14);
        --bgg-green:#00d395;
        --bgg-red:#ff5f52;
        --bgg-yellow:#ffc53d;
        /* Override cyan-ish variables agar pakai biru brand */
        --sg-cyan:#66adff;
        --sg-blue:#1a86ff;
        --sg-blue-2:#2e93ff;
        --od-cyan:#66adff;
        --od-blue:#1a86ff;
        --od-blue-2:#2e93ff;
        --accent-cyan:#66adff;
        --cyan:#66adff;
    }

    /* Tab kategori aktif: biru solid + putih saja */
    .sg-tab.is-active {
        background: #1a86ff !important;
        color: #ffffff !important;
        border-color: #1a86ff !important;
        box-shadow: 0 6px 18px -8px rgba(26, 134, 255,.45) !important;
        animation: none !important;
    }
    .sg-tab.is-active i { color: #ffffff !important; }
    .sg-tab.is-active em {
        background: rgba(255,255,255,.95) !important;
        color: #1a86ff !important;
        font-weight: 800 !important;
    }

    /* Pastikan tidak ada dark-navy yang lolos di dark mode */
    html:not([data-theme="light"]) {
        --bg-body:#000000 !important;
        --bg-card:#000000 !important;
        --bg-card-solid:#000000 !important;
        --bg-input:#000000 !important;
        --od-bg:#000000 !important;
        --od-bg-2:#000000 !important;
        --od-surface:#000000 !important;
        --od-surface-2:#000000 !important;
        --sg-bg-1:#000000 !important;
        --sg-bg-2:#000000 !important;
        --sg-bg-3:#000000 !important;
        --sg-glass:#000000 !important;
        --sg-glass-2:#000000 !important;
        --soft:#000000 !important;
        --card:#000000 !important;
    }
    html:not([data-theme="light"]) body { background:#000000 !important; background-image:none !important; }
    /* Bridge biru di area atas main agar wedge di sisi rounded-corner banner tidak hitam stark */
    html:not([data-theme="light"]) .tg-main,
    html[data-theme="dark"] .tg-main {
        background: linear-gradient(to bottom, #0f6ee6 0px, #1a86ff 30px, rgba(26, 134, 255,.55) 80px, rgba(0,0,0,.85) 160px, #000000 220px) !important;
        background-image: linear-gradient(to bottom, #0f6ee6 0px, #1a86ff 30px, rgba(26, 134, 255,.55) 80px, rgba(0,0,0,.85) 160px, #000000 220px) !important;
        background-color: #000000 !important;
        background-repeat: no-repeat !important;
    }
    html:not([data-theme="light"]) .tg-app,
    html:not([data-theme="light"]) .tg-main,
    html:not([data-theme="light"]) .tg-embed-body,
    html:not([data-theme="light"]) .tg-card,
    html:not([data-theme="light"]) .tg-card-recent,
    html:not([data-theme="light"]) .tg-card-track,
    html:not([data-theme="light"]) .tg-card-market,
    html:not([data-theme="light"]) .tg-card-category,
    html:not([data-theme="light"]) .tg-card-checkout,
    html:not([data-theme="light"]) .tg-card-products,
    html:not([data-theme="light"]) .tg-recent-list .tg-rx,
    html:not([data-theme="light"]) .tg-trust-strip,
    html:not([data-theme="light"]) .tg-trust-item,
    html:not([data-theme="light"]) .tg-divider,
    html:not([data-theme="light"]) .tg-pay-method,
    html:not([data-theme="light"]) .tg-product-card,
    html:not([data-theme="light"]) .tg-game-card,
    html:not([data-theme="light"]) .tg-step-row,
    html:not([data-theme="light"]) .tg-validation-card,
    html:not([data-theme="light"]) .tg-validation-item,
    html:not([data-theme="light"]) .tg-input,
    html:not([data-theme="light"]) .tg-footer,
    html:not([data-theme="light"]) .sg-nav,
    html:not([data-theme="light"]) .sg-card-market,
    html:not([data-theme="light"]) .sg-home-categories,
    html:not([data-theme="light"]) .sg-card-recent,
    html:not([data-theme="light"]) .sg-card-track,
    html:not([data-theme="light"]) .sg-section,
    html:not([data-theme="light"]) .sg-section-card,
    html:not([data-theme="light"]) .sg-benefit-card,
    html:not([data-theme="light"]) .sg-product-card,
    html:not([data-theme="light"]) .sg-cat-card,
    html:not([data-theme="light"]) .sg-tab,
    html:not([data-theme="light"]) .sg-footer,
    html:not([data-theme="light"]) .od-card,
    html:not([data-theme="light"]) .od-payment-card,
    html:not([data-theme="light"]) .od-section,
    html:not([data-theme="light"]) .od-footer,
    html:not([data-theme="light"]) .od-hero { background:#000000 !important; background-image:none !important; }
    html:not([data-theme="light"]) .sg-tab.is-active { background:#1a86ff !important; }
    /* Specificity tinggi untuk override polish layer dark navy */
    html:not([data-theme="light"]) .sg-market-quick .sg-section,
    html:not([data-theme="light"]) .sg-market-quick .tg-market-section {
        background: transparent !important;
        background-image: none !important;
    }
    html:not([data-theme="light"]) .sg-market-quick .sg-section .sg-section-head {
        background: transparent !important;
        background-image: none !important;
    }
    html:not([data-theme="light"]) .sg-card-market .sg-section { background:#000000 !important; background-image:none !important; }

    /* Tab non-aktif: ganti accent cyan → biru/putih */
    .sg-tab i { color:#66adff !important; }
    .sg-tab em { background:#ffffff !important; color:#1a86ff !important; }
    [data-theme="dark"] .sg-tab i { color:#66adff !important; }
    [data-theme="dark"] .sg-tab em {
        background: rgba(255,255,255,.95) !important;
        color: #1a86ff !important;
    }

    /* Product card text: putih di dark, biru di light */
    [data-theme="dark"] .sg-product-cat { color:#ffffff !important; opacity:.78; }
    [data-theme="dark"] .sg-product-name { color:#ffffff !important; }
    [data-theme="dark"] .sg-product-meta { color:#ffffff !important; opacity:.78; }
    [data-theme="dark"] .sg-product-meta strong { color:#ffffff !important; opacity:1; }

    html[data-theme="light"] {
        --bgg-bg:#ffffff;
        --bgg-bg-1:#ffffff;
        --bgg-bg-2:#ffffff;
        --bgg-bg-3:#ffffff;
        --bgg-bg-elev:#ffffff;
        --bgg-bg-surface:#ffffff;
        --bgg-text:#000000;
        --bgg-text-2:#000000;
        --bgg-text-3:#000000;
        --bgg-muted:#64748b;
        --bgg-border:#cfdcff;
        --bgg-border-strong:#1a86ff;
        --bgg-green:#1a86ff;
        --bgg-red:#1a86ff;
        --sg-cyan:#1a86ff;
        --sg-blue:#1a86ff;
        --od-cyan:#1a86ff;
        --od-blue:#1a86ff;
        --accent-cyan:#1a86ff;
    }

    /* No glass */
    * { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

    html, body {
        background: var(--bgg-bg) !important;
        background-image: none !important;
        background-attachment: initial !important;
        color: var(--bgg-text) !important;
    }
    body::before, body::after { display:none !important; }

    /* Navbar solid */
    .tg-nav, .sg-nav, .tg-nav.sg-nav, .tg-nav.od-nav {
        background: var(--bgg-bg-1) !important;
        border-bottom:1px solid var(--bgg-border) !important;
        box-shadow:none !important;
    }
    html[data-theme="light"] .tg-nav,
    html[data-theme="light"] .sg-nav,
    html[data-theme="light"] .tg-nav.sg-nav { background:#ffffff !important; }

    .tg-nav .brand, .sg-nav .brand { color: var(--bgg-text) !important; }
    .tg-nav .brand i { color: var(--bgg-primary-light) !important; }
    .sg-brand-logo { background:linear-gradient(135deg, var(--bgg-primary), var(--bgg-primary-light)) !important; box-shadow:0 8px 22px -10px rgba(26, 134, 255,.55) !important; }
    .sg-brand-text strong { color: var(--bgg-primary-light) !important; }
    html[data-theme="light"] .sg-brand-text strong { color: #000000 !important; }
    .sg-brand-text > span { color: var(--bgg-text) !important; }

    .sg-nav-menu-link { color: var(--bgg-text-3) !important; }
    .sg-nav-menu-link:hover { color: var(--bgg-text) !important; background: var(--bgg-bg-elev) !important; }
    .sg-nav-menu-link.is-active { color: #fff !important; background: rgba(26, 134, 255,.18) !important; }
    html[data-theme="light"] .sg-nav-menu-link { color: var(--bgg-text-3) !important; }
    html[data-theme="light"] .sg-nav-menu-link:hover { background: var(--bgg-bg-3) !important; color: var(--bgg-text) !important; }
    html[data-theme="light"] .sg-nav-menu-link.is-active { color: #000000 !important; background:#eff6ff !important; }

    /* Hero / Header solid blue brand */
    .tg-hero, .sg-hero, header.hero, .hero.order-hero {
        background:
            radial-gradient(900px 360px at 100% -10%, rgba(255,255,255,.14), transparent 60%),
            radial-gradient(800px 320px at 0% 110%, rgba(0,0,0,.18), transparent 60%),
            linear-gradient(135deg, #0f6ee6 0%, #1a86ff 55%, #2e93ff 100%) !important;
        background-color: #1a86ff !important;
        color: #fff !important;
        border-radius: 0 !important;
        padding-bottom: 48px !important;
        position: relative;
        margin-bottom: 0 !important;
    }
    .tg-hero::before, .tg-hero::after,
    .sg-hero::before, .sg-hero::after { display:none !important; }
    .sg-hero-shell, .tg-hero-shell { position: relative; z-index: 1; }
    .sg-hero-bg, .sg-hero-orb, .sg-hero-grid { display:none !important; }
    [data-theme="light"] .tg-hero, [data-theme="light"] .sg-hero {
        background: linear-gradient(135deg, #0f6ee6 0%, #1a86ff 50%, #2e93ff 100%) !important;
        border-radius: 0 !important;
    }
    @media (max-width: 600px) {
        .tg-hero, .sg-hero, header.hero, .hero.order-hero {
            padding-bottom: 36px !important;
            border-radius: 0 !important;
        }
    }
    .sg-hero-search {
        background:#ffffff !important;
        color-scheme: light !important;
    }

    /* ════════════════════════════════════════════════════════════
       CAROUSEL SECTION (terpisah dari hero, full-width)
       Banner images are allowed to keep their own safe composition.
       ════════════════════════════════════════════════════════════ */
    .sg-carousel-section {
        margin: 20px 0 18px !important;
        padding: 0 16px !important;
    }
    .sg-hero-carousel {
        position: relative;
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 18px;
        background: #000000;
        border: 1px solid rgba(255,255,255,.08);
        aspect-ratio: 3 / 2;
        isolation: isolate;
        box-shadow: 0 16px 40px -24px rgba(26, 134, 255,.38);
    }
    @media (min-width: 1024px) {
        .sg-hero-carousel {
            max-width: 680px;
            border-radius: 16px;
        }
        .sg-carousel-section { margin: 16px 0 16px !important; }
    }
    @media (max-width: 760px) {
        .sg-carousel-section { margin: 18px 0 18px !important; padding: 0 12px !important; }
        .sg-hero-carousel { aspect-ratio: 3 / 2; border-radius: 16px; max-width: 100%; }
    }
    @media (max-width: 480px) {
        .sg-hero-carousel { aspect-ratio: 3 / 2; border-radius: 14px; }
    }
    .sg-carousel-track {
        display: flex;
        height: 100%;
        width: 100%;
        transition: transform .65s cubic-bezier(.4,.16,.18,1);
        will-change: transform;
    }
    .sg-carousel-slide {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .sg-carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
    }
    .sg-carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(0,0,0,.55);
        border: 1px solid rgba(255,255,255,.18);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1rem;
        z-index: 2;
        transition: background .2s ease, transform .15s ease, opacity .2s ease;
        opacity: .85;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .sg-carousel-arrow:hover { background: #1a86ff; opacity: 1; transform: translateY(-50%) scale(1.05); }
    .sg-carousel-prev { left: 12px; }
    .sg-carousel-next { right: 12px; }
    .sg-carousel-dots {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        z-index: 2;
    }
    .sg-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        border: none;
        background: rgba(255,255,255,.45);
        cursor: pointer;
        padding: 0;
        transition: width .25s ease, background .2s ease;
    }
    .sg-carousel-dot:hover { background: rgba(255,255,255,.75); }
    .sg-carousel-dot.is-active {
        width: 22px;
        background: #ffffff;
    }
    @media (max-width: 600px) {
        .sg-carousel-arrow { width: 32px; height: 32px; font-size: .9rem; }
        .sg-carousel-prev { left: 8px; }
        .sg-carousel-next { right: 8px; }
        .sg-carousel-dots { bottom: 8px; gap: 5px; }
        .sg-carousel-dot { width: 6px; height: 6px; }
        .sg-carousel-dot.is-active { width: 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .sg-carousel-track { transition: none; }
    }

    /* Home hero — banner + intro sejajar & rapi */
    .sg-home-hero {
        max-width: 680px;
        margin: 0 auto;
        padding: 12px 0 8px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .sg-home-hero .sg-carousel-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    .sg-home-hero .sg-hero-carousel {
        max-width: 100%;
        width: 100%;
    }
    .sg-home-hero .sg-carousel-slide img {
        object-fit: cover;
        object-position: center;
    }
    .sg-home-hero .sg-carousel-slide--safe img {
        object-fit: contain !important;
    }
    .sg-home-hero .sg-promo-banner {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }
    .sg-home-hero .sg-promo-banner-body {
        max-width: 100%;
        margin: 0 auto;
    }
    .sg-home-hero .sg-promo-banner-title {
        font-size: clamp(1.28rem, 2.2vw + .45rem, 1.72rem) !important;
        line-height: 1.22 !important;
        margin: 0 0 10px !important;
        letter-spacing: -.35px;
    }
    .sg-home-hero .sg-promo-banner-desc {
        font-size: .92rem !important;
        line-height: 1.68 !important;
        margin: 0 auto !important;
        max-width: 58ch;
        opacity: .88;
    }
    html[data-theme="light"] .sg-home-hero .sg-promo-banner-desc {
        color: #475569 !important;
        opacity: 1;
    }
    html:not([data-theme="light"]) .sg-home-hero .sg-promo-banner-desc {
        color: rgba(255, 255, 255, .78) !important;
    }
    .sg-home-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 8px;
        max-width: 960px;
        margin: 0 auto;
        width: 100%;
    }
    .sg-home-content .sg-tabs-wrap {
        margin-top: 0 !important;
    }
    .sg-home-content .sg-search-section {
        margin: 4px 0 0 !important;
    }
    .sg-search-results {
        margin: 0 0 20px;
    }
    .sg-search-results[hidden] {
        display: none !important;
    }
    .sg-market-quick.is-search-hidden {
        display: none !important;
    }
    .sg-search-results-empty {
        margin: 12px 0 0;
        padding: 16px;
        border: 1px dashed rgba(148, 163, 184, .45);
        border-radius: 14px;
        text-align: center;
        color: var(--text-muted);
        font-size: .85rem;
    }
    .sg-search-results-empty[hidden] {
        display: none !important;
    }
    .sg-home-content .sg-section-head {
        margin-bottom: 14px !important;
    }
    .sg-home-content .sg-section-title {
        margin-bottom: 6px;
    }
    .sg-home-content .sg-section-desc {
        max-width: 62ch;
    }
    .sg-home-content .sg-benefits {
        margin-top: 8px;
    }
    .sg-home-content .sg-benefits-grid {
        gap: 14px;
    }
    @media (min-width: 1024px) {
        .sg-home-hero {
            max-width: 680px;
            gap: 16px;
            padding-top: 16px;
        }
    }
    @media (max-width: 760px) {
        .sg-home-hero {
            max-width: 100%;
            padding: 8px 0 4px;
            gap: 14px;
        }
        .sg-home-hero .sg-promo-banner {
            text-align: left;
        }
        .sg-home-hero .sg-promo-banner-desc {
            max-width: none;
        }
    }

    /* Mobile native-app layout */
    @media (max-width: 760px) {
        .tg-app {
            min-height: 100svh;
            overflow-x: hidden;
        }

        .tg-main {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto !important;
            padding: 10px 14px calc(12px + var(--sg-bottom-nav-clearance, 64px)) !important;
        }

        .sg-home-hero,
        .sg-home-content {
            width: 100% !important;
            max-width: 100% !important;
            margin-inline: auto !important;
        }

        .sg-home-hero {
            padding-top: 6px !important;
            gap: 12px !important;
        }

        .sg-home-hero .sg-hero-carousel {
            border-radius: 22px !important;
            box-shadow: 0 18px 44px -26px rgba(26, 134, 255,.55) !important;
        }

        .sg-home-hero .sg-promo-banner {
            padding: 4px 4px 2px !important;
            text-align: left !important;
        }

        .sg-home-hero .sg-promo-banner-title {
            font-size: 1.35rem !important;
            line-height: 1.18 !important;
            letter-spacing: -.35px !important;
            margin-bottom: 8px !important;
        }

        .sg-home-hero .sg-promo-banner-desc {
            font-size: .86rem !important;
            line-height: 1.58 !important;
            max-width: none !important;
        }

        .sg-home-content {
            gap: 16px !important;
            padding-top: 8px !important;
        }

        .sg-tabs-wrap {
            margin: 0 !important;
            padding: 14px 14px 10px !important;
            border: 1px solid var(--border) !important;
            border-radius: 24px !important;
            background: rgba(255,255,255,.72) !important;
            box-shadow: 0 16px 40px -30px rgba(15,23,42,.45) !important;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        html:not([data-theme="light"]) .sg-tabs-wrap {
            background: rgba(13,24,40,.74) !important;
            border-color: rgba(148,197,255,.16) !important;
        }

        .sg-section-head {
            margin-bottom: 12px !important;
        }

        .sg-section-title {
            font-size: 1.12rem !important;
            line-height: 1.2 !important;
        }

        .sg-section-desc {
            font-size: .78rem !important;
            line-height: 1.5 !important;
        }

        .sg-tabs {
            margin-inline: -4px !important;
            padding: 2px 4px 4px !important;
            gap: 8px !important;
            scrollbar-width: none;
        }

        .sg-tabs::-webkit-scrollbar {
            display: none;
        }

        .sg-tab {
            min-height: 42px !important;
            padding: 10px 12px !important;
            border-radius: 15px !important;
            box-shadow: none !important;
        }

        .sg-tab em {
            display: none !important;
        }

        .sg-search-section {
            position: sticky;
            top: calc(58px + env(safe-area-inset-top, 0px));
            z-index: 30;
            margin: 0 -2px !important;
            padding: 8px 0 !important;
        }

        .sg-hero-search-standalone {
            min-height: 52px !important;
            border-radius: 18px !important;
            padding: 6px 12px !important;
            box-shadow: 0 16px 34px -26px rgba(26, 134, 255,.65) !important;
        }

        .sg-hero-search-standalone input {
            font-size: .88rem !important;
            padding: 11px 2px !important;
        }

        .sg-catalog-sections {
            gap: 24px !important;
            margin-bottom: 34px !important;
        }

        .sg-product-grid,
        .sg-market-quick .tg-market-subgrid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
        }

        .sg-product-card {
            border-radius: 22px !important;
            min-height: 0 !important;
            box-shadow: 0 16px 34px -28px rgba(26, 134, 255,.65) !important;
            transform: none !important;
        }

        .sg-product-card:hover {
            transform: none !important;
        }

        .sg-market-quick .sg-product-card .sg-product-thumb,
        .sg-product-thumb {
            aspect-ratio: 1 / .92 !important;
            border-radius: 18px 18px 0 0 !important;
            padding: 9px !important;
        }

        .sg-market-quick .sg-product-card .sg-product-thumb img,
        .sg-product-card .sg-product-thumb img {
            border-radius: 14px !important;
            object-fit: cover !important;
        }

        .sg-product-body {
            padding: 10px 10px 12px !important;
            gap: 4px !important;
        }

        .sg-product-cat {
            font-size: .56rem !important;
            letter-spacing: .05em !important;
        }

        .sg-product-name {
            font-size: .78rem !important;
            line-height: 1.26 !important;
            min-height: 2.1em;
        }

        .sg-product-meta {
            margin-top: 4px !important;
            font-size: .64rem !important;
            line-height: 1.15 !important;
        }
    }

    /* Standalone search bar (di atas section Populer) — theme-aware */
    .sg-search-section {
        margin: 24px 0 22px !important;
        padding: 0 !important;
    }
    .sg-hero-search-standalone {
        max-width: 100% !important;
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 8px 8px 8px 18px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        box-shadow: 0 14px 40px -22px rgba(26, 134, 255,.45) !important;
        border: 1px solid #cfdcff !important;
    }
    .sg-hero-search-standalone > i.bi-search {
        color: #1a86ff !important;
        font-size: 1.05rem !important;
    }
    .sg-hero-search-standalone input {
        flex: 1 1 auto !important;
        background: transparent !important;
        background-color: transparent !important;
        color: #000000 !important;
        border: none !important;
        outline: none !important;
        padding: 12px 4px !important;
        font-size: .95rem !important;
        font-family: inherit !important;
    }
    .sg-hero-search-standalone input::placeholder { color:#1a86ff !important; opacity:.55; }
    .sg-hero-search-standalone button {
        flex: 0 0 auto !important;
        background: linear-gradient(135deg, #0f6ee6, #1a86ff) !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 18px !important;
        border-radius: 12px !important;
        font-weight: 800 !important;
        font-size: .92rem !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-shadow: 0 10px 24px -10px rgba(26, 134, 255,.65) !important;
        transition: transform .18s ease, filter .18s ease;
    }
    .sg-hero-search-standalone button:hover { transform: translateY(-1px); filter: brightness(1.08); }

    /* Dark theme: black bg with white text and blue border */
    html[data-theme="dark"] .sg-hero-search-standalone,
    html:not([data-theme="light"]) .sg-hero-search-standalone {
        background: #000000 !important;
        border: 1px solid rgba(26, 134, 255,.4) !important;
        box-shadow: 0 14px 40px -22px rgba(26, 134, 255,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
    }
    html[data-theme="dark"] .sg-hero-search-standalone > i.bi-search,
    html:not([data-theme="light"]) .sg-hero-search-standalone > i.bi-search {
        color: rgba(255,255,255,.65) !important;
    }
    html[data-theme="dark"] .sg-hero-search-standalone input,
    html:not([data-theme="light"]) .sg-hero-search-standalone input {
        color: #ffffff !important;
        background: transparent !important;
        background-color: transparent !important;
    }
    html[data-theme="dark"] .sg-hero-search-standalone input::placeholder,
    html:not([data-theme="light"]) .sg-hero-search-standalone input::placeholder {
        color: rgba(255,255,255,.55) !important;
        opacity: 1;
    }
    html[data-theme="dark"] .sg-hero-search-standalone button,
    html:not([data-theme="light"]) .sg-hero-search-standalone button {
        background: linear-gradient(135deg, #1a86ff, #2e93ff) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px -10px rgba(26, 134, 255,.7) !important;
    }

    @media (max-width: 600px) {
        .sg-search-section { margin: 14px 0 18px !important; }
        .sg-hero-search-standalone { padding: 6px 6px 6px 14px !important; border-radius: 14px !important; }
        .sg-hero-search-standalone input { padding: 11px 2px !important; font-size: .88rem !important; }
        .sg-hero-search-standalone button { padding: 10px 14px !important; border-radius: 11px !important; }
        .sg-hero-search-standalone button span { display:none !important; }
    }
    .sg-hero-search input {
        background:transparent !important;
        background-color:transparent !important;
        -webkit-appearance:none !important;
        appearance:none !important;
        color:#0a0b0d !important;
        color-scheme: light !important;
    }
    .sg-hero-search input::placeholder { color:#94a3b8 !important; }
    .sg-hero-search input::-webkit-search-cancel-button,
    .sg-hero-search input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
    .sg-hero-search button {
        background: linear-gradient(135deg, var(--bgg-primary), var(--bgg-electric)) !important;
        color:#fff !important;
        box-shadow: 0 8px 22px -10px rgba(26, 134, 255,.55) !important;
    }
    .sg-hero-search button::after { display:none !important; }

    /* Promo banner — transparent (no background card) */
    .sg-promo-banner,
    html[data-theme="dark"] .sg-promo-banner,
    html:not([data-theme="light"]) .sg-promo-banner,
    html[data-theme="light"] .sg-promo-banner {
        position: relative;
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color:#ffffff !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html[data-theme="light"] .sg-promo-banner,
    html[data-theme="light"] .sg-promo-banner .sg-promo-banner-title,
    html[data-theme="light"] .sg-promo-banner .sg-promo-banner-desc { color: #000000 !important; }
    html[data-theme="light"] .sg-promo-banner .sg-promo-banner-pill {
        background: rgba(26, 134, 255,.10) !important;
        color: #0f6ee6 !important;
        border: 1px solid #cfdcff !important;
    }
    .sg-promo-banner-art, .sg-promo-orb, .sg-promo-tag-1, .sg-promo-tag-2, .sg-promo-tag-3 { display:none !important; }
    .sg-promo-banner-title, .sg-promo-banner-desc { color:#ffffff !important; }
    /* Hilangkan blur pada entrance reveal khusus banner agar corner bersih */
    .sg-promo-banner.sg-reveal { filter: none !important; }
    .sg-promo-banner.sg-reveal:not(.is-visible) { transform: translate3d(0, 14px, 0); }

    /* Kategori Produk panel — blue (dark theme) */
    html:not([data-theme="light"]) .sg-tabs-wrap {
        position: relative;
        background:
            radial-gradient(1100px 380px at 110% -20%, rgba(255,255,255,.16), transparent 60%),
            radial-gradient(900px 320px at -10% 120%, rgba(0,0,0,.18), transparent 60%),
            linear-gradient(135deg, #0f6ee6 0%, #1a86ff 55%, #2e93ff 100%) !important;
        background-image:
            radial-gradient(1100px 380px at 110% -20%, rgba(255,255,255,.16), transparent 60%),
            radial-gradient(900px 320px at -10% 120%, rgba(0,0,0,.18), transparent 60%),
            linear-gradient(135deg, #0f6ee6 0%, #1a86ff 55%, #2e93ff 100%) !important;
        background-color: #1a86ff !important;
        background-clip: padding-box !important;
        -webkit-background-clip: padding-box !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 22px !important;
        padding: 22px 22px 18px !important;
        box-shadow: 0 18px 50px -24px rgba(26, 134, 255,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
        color:#ffffff !important;
        margin: 18px 0 24px !important;
        isolation: isolate;
        overflow: hidden !important;
    }
    .sg-tabs-wrap.sg-reveal { filter: none !important; }
    .sg-tabs-wrap.sg-reveal:not(.is-visible) { transform: translate3d(0, 14px, 0); }
    .sg-tabs-wrap .sg-section-head { margin-bottom: 14px !important; }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-section-title { color:#ffffff !important; }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-section-desc { color: rgba(255,255,255,.82) !important; }

    /* Tabs inside blue panel: glass pills (dark theme) */
    .sg-tabs-wrap .sg-tabs {
        gap: 10px !important;
        padding: 4px 2px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        cursor: grab;
        touch-action: pan-x;
    }
    .sg-tabs-wrap .sg-tabs.is-dragging {
        cursor: grabbing;
        user-select: none;
    }
    .sg-tabs-wrap .sg-tab {
        scroll-snap-align: none !important;
    }
    .sg-tabs-wrap .sg-tabs::-webkit-scrollbar { display: none !important; height: 0 !important; }

    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab {
        background: rgba(255,255,255,.10) !important;
        background-image: none !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        color: #ffffff !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 6px 18px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab:hover {
        background: rgba(255,255,255,.16) !important;
        border-color: rgba(255,255,255,.28) !important;
        transform: translateY(-1px);
    }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab i { color: #ffffff !important; }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab em {
        background: rgba(255,255,255,.92) !important;
        color: #0f6ee6 !important;
        font-weight: 800 !important;
    }

    /* Active tab on blue panel: solid white with blue text (dark theme) */
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab.is-active {
        background: #ffffff !important;
        background-image: none !important;
        color: #0f6ee6 !important;
        border-color: #ffffff !important;
        box-shadow: 0 14px 28px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,1) !important;
    }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab.is-active i { color: #0f6ee6 !important; }
    html:not([data-theme="light"]) .sg-tabs-wrap .sg-tab.is-active em {
        background: #0f6ee6 !important;
        color: #ffffff !important;
    }

    /* Edge fade for horizontal scroll hint */
    html:not([data-theme="light"]) .sg-tabs-wrap::before,
    html:not([data-theme="light"]) .sg-tabs-wrap::after,
    html[data-theme="light"] .sg-tabs-wrap::before,
    html[data-theme="light"] .sg-tabs-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity .25s ease;
    }
    html:not([data-theme="light"]) .sg-tabs-wrap.is-scrollable::before {
        left: 0;
        background: linear-gradient(90deg, rgba(0,57,179,.55), transparent);
        border-radius: 22px 0 0 22px;
        opacity: 1;
    }
    html:not([data-theme="light"]) .sg-tabs-wrap.is-scrollable.is-at-start::before { opacity: 0; }
    html:not([data-theme="light"]) .sg-tabs-wrap.is-scrollable::after {
        right: 0;
        background: linear-gradient(270deg, rgba(0,57,179,.55), transparent);
        border-radius: 0 22px 22px 0;
        opacity: 1;
    }
    html:not([data-theme="light"]) .sg-tabs-wrap.is-scrollable.is-at-end::after { opacity: 0; }

    html[data-theme="light"] .sg-tabs-wrap.is-scrollable::before {
        left: 0;
        background: linear-gradient(90deg, rgba(255,255,255,.98), transparent);
        border-radius: 22px 0 0 22px;
        opacity: 1;
    }
    html[data-theme="light"] .sg-tabs-wrap.is-scrollable.is-at-start::before { opacity: 0; }
    html[data-theme="light"] .sg-tabs-wrap.is-scrollable::after {
        right: 0;
        background: linear-gradient(270deg, rgba(255,255,255,.98), transparent);
        border-radius: 0 22px 22px 0;
        opacity: 1;
    }
    html[data-theme="light"] .sg-tabs-wrap.is-scrollable.is-at-end::after { opacity: 0; }
    html[data-theme="light"] .sg-tabs-wrap {
        position: relative;
        background: #ffffff !important;
        background-image: none !important;
        border: 1px solid #e8ecef !important;
        border-radius: 22px !important;
        padding: 22px 22px 18px !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
        color: #0f172a !important;
        margin: 18px 0 24px !important;
        isolation: isolate;
        overflow: hidden !important;
    }
    html[data-theme="light"] .sg-tabs-wrap .sg-section-title { color: #0f172a !important; }
    html[data-theme="light"] .sg-tabs-wrap .sg-section-desc { color: #64748b !important; }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab {
        background: #f8fafc !important;
        background-image: none !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab:hover {
        background: #f1f5f9 !important;
        border-color: #cfdcff !important;
        transform: translateY(-1px);
    }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab:not(.is-active) i { color: #000000 !important; }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab:not(.is-active) em {
        background: rgba(0, 0, 0, .06) !important;
        color: #000000 !important;
        font-weight: 800 !important;
    }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active {
        background: #1a86ff !important;
        color: #ffffff !important;
        border-color: #1a86ff !important;
        box-shadow: 0 10px 24px -12px rgba(26, 134, 255, .45) !important;
    }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active i { color: #ffffff !important; }
    html[data-theme="light"] .sg-tabs-wrap .sg-tab.is-active em {
        background: rgba(255, 255, 255, .18) !important;
        color: #ffffff !important;
    }

    @media (max-width: 600px) {
        html:not([data-theme="light"]) .sg-tabs-wrap,
        html[data-theme="light"] .sg-tabs-wrap {
            padding: 18px 16px 14px !important;
            border-radius: 18px !important;
            margin: 14px 0 18px !important;
        }
        html:not([data-theme="light"]) .sg-tabs-wrap.is-scrollable::before,
        html[data-theme="light"] .sg-tabs-wrap.is-scrollable::before {
            width: 36px;
            border-radius: 18px 0 0 18px;
        }
        html:not([data-theme="light"]) .sg-tabs-wrap.is-scrollable::after,
        html[data-theme="light"] .sg-tabs-wrap.is-scrollable::after {
            width: 36px;
            border-radius: 0 18px 18px 0;
        }

        html:not([data-theme="light"]) .sg-market-quick .tg-market-section.sg-section,
        html[data-theme="light"] .sg-market-quick .tg-market-section.sg-section {
            padding: 18px 16px 14px !important;
            border-radius: 18px !important;
        }
    }

    /* Catalog section panels — match Kategori Produk surface */
    .sg-market-quick .tg-market-section.sg-section {
        position: relative;
        isolation: isolate;
        overflow: hidden !important;
    }
    html:not([data-theme="light"]) .sg-market-quick .tg-market-section.sg-section {
        background:
            radial-gradient(1100px 380px at 110% -20%, rgba(255,255,255,.16), transparent 60%),
            radial-gradient(900px 320px at -10% 120%, rgba(0,0,0,.18), transparent 60%),
            linear-gradient(135deg, #0f6ee6 0%, #1a86ff 55%, #2e93ff 100%) !important;
        background-image:
            radial-gradient(1100px 380px at 110% -20%, rgba(255,255,255,.16), transparent 60%),
            radial-gradient(900px 320px at -10% 120%, rgba(0,0,0,.18), transparent 60%),
            linear-gradient(135deg, #0f6ee6 0%, #1a86ff 55%, #2e93ff 100%) !important;
        background-color: #1a86ff !important;
        background-clip: padding-box !important;
        -webkit-background-clip: padding-box !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 22px !important;
        padding: 22px 22px 18px !important;
        box-shadow: 0 18px 50px -24px rgba(26, 134, 255,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
        color: #ffffff !important;
    }
    html:not([data-theme="light"]) .sg-market-quick .tg-market-section.sg-section .sg-section-head {
        background: transparent !important;
        background-image: none !important;
    }
    html:not([data-theme="light"]) .sg-market-quick .tg-market-section.sg-section .sg-section-title { color: #ffffff !important; }
    html:not([data-theme="light"]) .sg-market-quick .tg-market-section.sg-section .sg-section-desc { color: rgba(255,255,255,.82) !important; }
    html[data-theme="light"] .sg-market-quick .tg-market-section.sg-section {
        background: #ffffff !important;
        background-image: none !important;
        border: 1px solid #e8ecef !important;
        border-radius: 22px !important;
        padding: 22px 22px 18px !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
        color: #0f172a !important;
    }
    html[data-theme="light"] .sg-market-quick .tg-market-section.sg-section .sg-section-title { color: #0f172a !important; }
    html[data-theme="light"] .sg-market-quick .tg-market-section.sg-section .sg-section-desc { color: #64748b !important; }

    /* Card surfaces — solid */
    .tg-card, .sg-section, .od-card, .od-payment-card, .od-hero,
    .sg-card-market, .sg-home-categories, .sg-card-recent, .sg-card-track,
    .sg-section-card, .sg-benefit-card, .sg-cat-card,
    .hero-card, .card {
        background: var(--bgg-bg-2) !important;
        border-color: var(--bgg-border) !important;
        box-shadow: var(--bgg-shadow, 0 2px 8px rgba(0,0,0,.18)) !important;
    }
    html[data-theme="light"] .tg-card,
    html[data-theme="light"] .sg-section,
    html[data-theme="light"] .od-card,
    html[data-theme="light"] .od-payment-card,
    html[data-theme="light"] .od-hero,
    html[data-theme="light"] .sg-card-market,
    html[data-theme="light"] .sg-home-categories,
    html[data-theme="light"] .sg-card-recent,
    html[data-theme="light"] .sg-card-track,
    html[data-theme="light"] .sg-section-card,
    html[data-theme="light"] .sg-benefit-card,
    html[data-theme="light"] .sg-cat-card,
    html[data-theme="light"] .hero-card,
    html[data-theme="light"] .card { background:#ffffff !important; border-color: var(--bgg-border) !important; box-shadow:0 1px 0 rgba(15,23,42,.04) !important; }

    .od-payment-card::before { display:none !important; }
    .sg-product-card { background: var(--bgg-bg-elev) !important; border-color: var(--bgg-border) !important; }
    html[data-theme="light"] .sg-product-card { background:#ffffff !important; }

    /* Inputs */
    .tg-input, .input, .od-track-input, .od-empty-form input {
        background: var(--bgg-bg-3) !important;
        border-color: var(--bgg-border) !important;
        color: var(--bgg-text) !important;
    }
    html[data-theme="light"] .tg-input,
    html[data-theme="light"] .input,
    html[data-theme="light"] .od-track-input,
    html[data-theme="light"] .od-empty-form input { background:#f7f8fa !important; color:#0a0b0d !important; }

    /* Buttons primary brand */
    .btn-primary, .sg-btn-primary, .sg-nav-cta-btn, .od-btn-primary, .tg-btn,
    .sg-hero-search button, .sg-track-btn, .od-track-btn {
        background: linear-gradient(135deg, var(--bgg-primary), var(--bgg-electric)) !important;
        box-shadow: 0 12px 28px -14px rgba(26, 134, 255,.6) !important;
        color:#fff !important;
    }

    /* Footer solid black */
    .tg-footer, .sg-footer, .od-footer {
        background: #000000 !important;
        border-top:1px solid var(--bgg-border) !important;
    }
    html[data-theme="light"] .tg-footer,
    html[data-theme="light"] .sg-footer,
    html[data-theme="light"] .od-footer {
        background: #ffffff !important;
        border-top: 1px solid #e8ecef !important;
        color: #64748b !important;
    }