/**
 * ============================================================
 *  RESPONSIVE.CSS — Global Responsive Foundation
 *  White-Label Node Platform
 * ============================================================
 *  Breakpoints:
 *    xs:  0 – 479px    (phones portrait)
 *    sm:  480 – 639px  (phones landscape)
 *    md:  640 – 767px  (small tablets)
 *    lg:  768 – 1023px (tablets / small laptops)
 *    xl:  1024 – 1279px (desktops)
 *    2xl: 1280px+      (large desktops)
 * ============================================================
 */

/* ────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ──────────────────────────────────────────── */
:root {
    --container-padding: 16px;
    --container-max: 100%;
    --grid-gap: 10px;
    --font-scale: 1;
}

/* ────────────────────────────────────────────
   1b. MODERN VIEWPORT 100dvh & SAFE AREA (FE-06 / ACT-09)
   Menghindari tertimpa URL bar / navigation bar pada iOS Safari & Android Chrome.
   ──────────────────────────────────────────── */
@supports (min-height: 100dvh) {
    .min-h-screen {
        min-height: 100dvh !important;
    }
}
@supports (height: 100dvh) {
    .h-screen {
        height: 100dvh !important;
    }
}
@supports (max-height: 100dvh) {
    .max-h-screen {
        max-height: 100dvh !important;
    }
}
body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pb-24 {
    padding-bottom: max(6rem, calc(5rem + env(safe-area-inset-bottom, 16px))) !important;
}

@media (min-width: 768px) {
    :root {
        --container-padding: 24px;
        --container-max: 720px;
        --grid-gap: 14px;
        --font-scale: 1.05;
    }
}
@media (min-width: 1024px) {
    :root {
        --container-padding: 32px;
        --container-max: 960px;
        --grid-gap: 16px;
        --font-scale: 1.1;
    }
}
@media (min-width: 1280px) {
    :root {
        --container-padding: 40px;
        --container-max: 1200px;
        --grid-gap: 18px;
        --font-scale: 1.15;
    }
}

/* ────────────────────────────────────────────
   2. ADAPTIVE CONTAINER
   ──────────────────────────────────────────── */
.app-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Narrower container for forms/transactions */
.app-container--narrow {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
@media (min-width: 768px) {
    .app-container--narrow { max-width: 600px; }
}
@media (min-width: 1024px) {
    .app-container--narrow { max-width: 720px; }
}
@media (min-width: 1280px) {
    .app-container--narrow { max-width: 800px; }
}

/* Wide container for game grids */
.app-container--wide {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
@media (min-width: 1024px) {
    .app-container--wide { max-width: 1100px; }
}
@media (min-width: 1280px) {
    .app-container--wide { max-width: 1400px; }
}

/* ────────────────────────────────────────────
   3. RESPONSIVE GAME GRIDS
   ──────────────────────────────────────────── */

/* 3-col mobile → scales up */
.grid-games {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}
@media (min-width: 640px) {
    .grid-games { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .grid-games { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1280px) {
    .grid-games { grid-template-columns: repeat(6, 1fr); }
}

/* 2-col mobile → scales up (casino style) */
.grid-casino {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .grid-casino { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .grid-casino { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (min-width: 1280px) {
    .grid-casino { grid-template-columns: repeat(5, 1fr); }
}

/* Promo cards grid */
.grid-promo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .grid-promo { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .grid-promo { grid-template-columns: repeat(3, 1fr); }
}

/* Footer logo grid — adaptive */
.grid-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (min-width: 768px) {
    .grid-logos { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1024px) {
    .grid-logos { grid-template-columns: repeat(8, 1fr); }
}

/* ────────────────────────────────────────────
   4. PROVIDER WRAPPER (slots page)
   ──────────────────────────────────────────── */
.provider-responsive {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 10px;
    padding: 15px 10px;
}
.provider-responsive::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .provider-responsive {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
        padding: 20px 30px;
        gap: 12px;
    }
}

/* ────────────────────────────────────────────
   5. RESPONSIVE TYPOGRAPHY
   ──────────────────────────────────────────── */
.text-responsive-xs {
    font-size: 9px;
}
.text-responsive-sm {
    font-size: 10px;
}
.text-responsive-base {
    font-size: 12px;
}
.text-responsive-lg {
    font-size: 14px;
}
.text-responsive-xl {
    font-size: 18px;
}
.text-responsive-2xl {
    font-size: 24px;
}

@media (min-width: 768px) {
    .text-responsive-xs  { font-size: 10px; }
    .text-responsive-sm  { font-size: 11px; }
    .text-responsive-base { font-size: 13px; }
    .text-responsive-lg  { font-size: 16px; }
    .text-responsive-xl  { font-size: 20px; }
    .text-responsive-2xl { font-size: 28px; }
}

@media (min-width: 1024px) {
    .text-responsive-xs  { font-size: 11px; }
    .text-responsive-sm  { font-size: 12px; }
    .text-responsive-base { font-size: 14px; }
    .text-responsive-lg  { font-size: 18px; }
    .text-responsive-xl  { font-size: 22px; }
    .text-responsive-2xl { font-size: 32px; }
}

/* ────────────────────────────────────────────
   6. VISIBILITY HELPERS
   ──────────────────────────────────────────── */
.hide-mobile   { display: none !important; }
.hide-desktop  { display: block !important; }
.hide-desktop-flex { display: flex !important; }
.hide-desktop-grid { display: grid !important; }

@media (min-width: 1024px) {
    .hide-mobile       { display: block !important; }
    .hide-mobile-flex  { display: flex !important; }
    .hide-mobile-grid  { display: grid !important; }
    .hide-desktop      { display: none !important; }
    .hide-desktop-flex { display: none !important; }
    .hide-desktop-grid { display: none !important; }
}

/* ────────────────────────────────────────────
   7. FORM RESPONSIVENESS
   ──────────────────────────────────────────── */
.form-responsive {
    width: 100%;
}
@media (min-width: 768px) {
    .form-responsive input,
    .form-responsive select,
    .form-responsive textarea {
        font-size: 14px;
        padding: 14px 16px;
    }
    .form-responsive button[type="submit"] {
        font-size: 13px;
        padding: 16px;
    }
}

/* ────────────────────────────────────────────
   8. DESKTOP SPLIT LAYOUT (for transaction pages)
   ──────────────────────────────────────────── */
.split-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 1024px) {
    .split-layout {
        flex-direction: row;
        gap: 32px;
    }
    .split-layout > .split-main {
        flex: 1;
    }
    .split-layout > .split-aside {
        flex: 0 0 320px;
    }
}

/* ────────────────────────────────────────────
   9. HORIZONTAL SCROLL → WRAPPED GRID (desktop)
   ──────────────────────────────────────────── */
.scroll-to-grid {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 12px;
    padding: 5px 20px;
    scroll-behavior: smooth;
}
.scroll-to-grid::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .scroll-to-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        overflow-x: visible;
        padding: 10px 20px;
        gap: 14px;
    }
}

/* Items inside scroll-to-grid */
.scroll-to-grid > * {
    flex: 0 0 98px;
}
@media (min-width: 1024px) {
    .scroll-to-grid > * {
        flex: none;
        width: 100%;
    }
}

/* ────────────────────────────────────────────
   10. DESKTOP HEADER — INLINE LOGIN FORM
   (GalaxyWin303 style)
   ──────────────────────────────────────────── */
.desktop-nav {
    display: none;
}

/* Desktop header: Logo left, Login form right */
.desktop-header-actions {
    display: none;
}
@media (min-width: 1024px) {
    .header-container-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .desktop-nav { display: none; /* replaced by sub-nav bar */ }
    .desktop-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .desktop-header-actions input {
        background: var(--bg-surface);
        border: 1px solid #333;
        border-radius: 6px;
        padding: 8px 14px;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        width: 150px;
        outline: none;
        font-family: inherit;
        transition: border-color 0.2s;
    }
    .desktop-header-actions input::placeholder {
        color: #555;
        font-weight: 500;
    }
    .desktop-header-actions input:focus {
        border-color: var(--warna-utama, #facc15);
    }
    .btn-header-masuk {
        padding: 8px 22px;
        background: transparent;
        border: 1px solid var(--warna-utama, #facc15);
        color: var(--warna-utama, #facc15);
        border-radius: 6px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }
    .btn-header-masuk:hover {
        background: var(--warna-utama, #facc15);
        color: #fff;
    }
    .btn-header-daftar {
        padding: 8px 22px;
        background: var(--warna-utama, #facc15);
        border: 1px solid var(--warna-utama, #facc15);
        color: var(--accent-fg, #fff);
        border-radius: 6px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }
    .btn-header-daftar:hover {
        opacity: 0.85;
    }
}

/* ────────────────────────────────────────────
   10b. DESKTOP SUB-NAVIGATION BAR
   (Below header, with emoji icons + labels)
   ──────────────────────────────────────────── */
.desktop-subnav {
    display: none;
}
@media (min-width: 1024px) {
    .desktop-subnav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border-soft);
        padding: 0 20px;
        height: 53px;
        position: -webkit-sticky;
        position: sticky;
        top: var(--header-h, 64px);
        z-index: 49;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .desktop-subnav.is-hidden {
        transform: translateY(-100%);
    }
    .desktop-subnav-inner {
        display: flex;
        align-items: center;
        max-width: 1200px;
        width: 100%;
    }
    .desktop-subnav-left {
        display: flex;
        align-items: center;
        gap: 0;
        flex: 1;
    }
    .desktop-subnav-right,
    .subnav-divider {
        display: none !important;
    }
    .subnav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        color: var(--text-muted, #a1a1aa);
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        transition: all 0.2s;
        border-radius: 6px;
        white-space: nowrap;
    }
    .subnav-link:hover {
        color: var(--fg, #fff);
        background: rgba(127,127,127,0.14);
    }
    .subnav-link.active {
        color: var(--accent-fg, #05070a);
        background: var(--warna-utama, #facc15);
        border-radius: 20px;
    }
    .subnav-link .subnav-emoji {
        font-size: 14px;
        line-height: 1;
    }
    .subnav-icon {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }
    /* If the link is active, turn the icon dark (black) because the background is light/yellow */
    .subnav-link.active .subnav-icon {
        filter: var(--accent-fg-filter, brightness(0));
    }
    .subnav-divider {
        width: 1px;
        height: 20px;
        background: var(--border-soft, #222);
        margin: 0 6px;
    }

    /* ─── DESKTOP MEGA-MENU PROVIDER DROPDOWN ─── */
    .subnav-item-wrapper {
        position: static;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .subnav-chevron {
        margin-left: 2px;
        opacity: 0.6;
        transition: transform 0.22s ease, opacity 0.22s ease, stroke 0.22s ease;
    }
    .subnav-item-wrapper:hover .subnav-chevron {
        transform: rotate(180deg);
        opacity: 1;
        stroke: var(--warna-utama, #facc15);
    }
    .subnav-item-wrapper:hover .subnav-link:not(.active) {
        color: var(--fg, #fff);
        background: rgba(127,127,127,0.14);
    }
    .subnav-item-wrapper.has-dropdown::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 14px;
        display: none;
        z-index: 98;
    }
    .subnav-item-wrapper.has-dropdown:hover::after {
        display: block;
    }

    .ssg-mega-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 99;
        background: rgba(12, 14, 20, 0.96);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-top: 2px solid var(--warna-utama, #facc15);
        border-bottom: 4px solid var(--warna-utama, #facc15);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.92), 0 0 35px rgba(var(--warna-utama-rgb, 250, 204, 21), 0.16);
        padding: 16px 24px 22px;
        box-sizing: border-box;
        animation: ssgDropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes ssgDropdownSlide {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .subnav-item-wrapper:hover .ssg-mega-dropdown,
    .subnav-item-wrapper:focus-within .ssg-mega-dropdown {
        display: block;
    }

    .ssg-mega-dropdown-inner {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        max-height: calc(82vh - 70px);
        overflow-y: auto;
        padding-right: 8px;
    }
    .ssg-mega-dropdown-inner::-webkit-scrollbar {
        width: 6px;
    }
    .ssg-mega-dropdown-inner::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 4px;
    }
    .ssg-mega-dropdown-inner::-webkit-scrollbar-thumb {
        background: rgba(var(--warna-utama-rgb, 250, 204, 21), 0.5);
        border-radius: 4px;
    }
    .ssg-mega-dropdown-inner::-webkit-scrollbar-thumb:hover {
        background: var(--warna-utama, #facc15);
    }

    .ssg-mega-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ssg-mega-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .ssg-mega-title-icon {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
    .ssg-mega-count {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 12px;
        background: rgba(var(--warna-utama-rgb, 250, 204, 21), 0.16);
        color: var(--warna-utama, #facc15);
        font-size: 11px;
        font-weight: 700;
    }
    .ssg-mega-view-all {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--warna-utama, #facc15);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .ssg-mega-view-all:hover {
        opacity: 0.85;
        transform: translateX(2px);
    }

    .ssg-mega-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    @media (min-width: 1280px) {
        .ssg-mega-grid {
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
        }
    }
    @media (min-width: 1440px) {
        .ssg-mega-grid {
            grid-template-columns: repeat(6, 1fr);
            gap: 14px;
        }
    }
    .ssg-prov-card-wrap {
        min-width: 0;
    }
    .ssg-prov-card {
        display: block;
        width: 100%;
        aspect-ratio: 350 / 202;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        text-decoration: none;
        background: #11131a;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
        will-change: transform;
    }
    .ssg-prov-card:hover {
        transform: scale(1.05) translateY(-2px);
        border-color: var(--warna-utama, #facc15);
        box-shadow: 0 8px 24px rgba(var(--warna-utama-rgb, 250, 204, 21), 0.38), 0 0 12px rgba(var(--warna-utama-rgb, 250, 204, 21), 0.2);
        z-index: 2;
    }
    .ssg-prov-card-bg {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.4) 100%);
        pointer-events: none;
    }
    .ssg-prov-card-fg {
        position: absolute;
        inset: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform 0.22s ease;
    }
    .ssg-prov-card:hover .ssg-prov-card-fg {
        transform: scale(1.02);
    }
    .ssg-prov-card-label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 4px 6px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,9,14,0.92) 80%);
        color: #e2e4eb;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.9;
        transition: color 0.15s ease, opacity 0.15s ease;
    }
    .ssg-prov-card:hover .ssg-prov-card-label {
        color: #ffffff;
        opacity: 1;
    }
}

/* ────────────────────────────────────────────
   10c. DESKTOP BANNER SPLIT LAYOUT
   (Banner left 65% + Live Winner right 35%)
   ──────────────────────────────────────────── */
.banner-split-wrapper {
    display: block;
}
@media (min-width: 1024px) {
    .banner-split-wrapper {
        display: flex;
        max-width: 1200px;
        margin: 16px auto 0;
        padding: 0 20px;
        gap: 16px;
    }
    .banner-split-main {
        flex: 1;
        min-width: 0;
        border-radius: 12px;
        overflow: hidden;
    }
    .banner-split-main .banner-full {
        max-width: 100%;
        margin: 0;
    }
    .banner-split-main .swiper-slide img {
        border-radius: 12px;
        width: 100%;
        height: auto;
        display: block;
    }
    .banner-split-side {
        display: flex;
        flex-direction: column;
        width: 300px;
        flex-shrink: 0;
        background: var(--bg-elevated);
        border: 1px solid var(--border-soft);
        border-radius: 12px;
        overflow: hidden;
    }
}

/* Live Winner panel (desktop sidebar) */
.live-winner-panel {
    display: none;
}
@media (min-width: 1024px) {
    .live-winner-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .live-winner-header {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-soft);
        text-align: center;
    }
    .live-winner-header span {
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .live-winner-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
    }
    .live-winner-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        margin-bottom: 4px;
        transition: background 0.2s;
    }
    .live-winner-item:hover {
        background: rgba(255,255,255,0.03);
    }
    .winner-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 900;
        color: #555;
        flex-shrink: 0;
    }
    .winner-info {
        flex: 1;
        min-width: 0;
    }
    .winner-name {
        font-size: 11px;
        font-weight: 800;
        color: #ccc;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .winner-game {
        font-size: 9px;
        color: #555;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .winner-amount {
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
    }
    .winner-badge {
        font-size: 8px;
        font-weight: 900;
        padding: 2px 6px;
        border-radius: 4px;
        text-transform: uppercase;
        margin-right: 4px;
    }
}

/* ────────────────────────────────────────────
   10d. PROVIDER PILL TAGS (desktop)
   ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    .menu-wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }
}
.provider-pills {
    display: none;
}
@media (min-width: 1024px) {
    .provider-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    .provider-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        background: var(--bg-surface);
        border: 1px solid #222;
        border-radius: 20px;
        color: #aaa;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s;
        cursor: pointer;
    }
    .provider-pill:hover,
    .provider-pill.active {
        border-color: var(--warna-utama, #facc15);
        color: var(--warna-utama, #facc15);
        background: rgba(255,255,255,0.03);
    }
}

/* Hide old desktop nav link style */
.desktop-nav-link {
    padding: 8px 16px;
    color: #a1a1aa;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* ────────────────────────────────────────────
   11. BOTTOM NAVBAR: HIDE ON DESKTOP
   ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    .ft-nav-fixed {
        display: none !important;
    }
    .ft-main-container {
        padding-bottom: 40px !important;
    }
}

/* ────────────────────────────────────────────
   12. DESKTOP FOOTER (replaces bottom nav)
   ──────────────────────────────────────────── */
.desktop-footer {
    display: none;
}
@media (min-width: 1024px) {
    .desktop-footer {
        display: block;
        background: #050505;
        border-top: 1px solid var(--border-soft);
        padding: 40px 0 20px;
    }
    .desktop-footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .desktop-footer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        margin-bottom: 30px;
    }
    .desktop-footer-title {
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }
    .desktop-footer-link {
        display: block;
        color: #71717a;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 0;
        transition: color 0.2s;
    }
    .desktop-footer-link:hover { color: #fff; }
    .desktop-footer-bottom {
        border-top: 1px solid var(--border-soft);
        padding-top: 20px;
        text-align: center;
        font-size: 10px;
        color: #3f3f46;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

/* ────────────────────────────────────────────
   13. ADMIN PANEL RESPONSIVE
   ──────────────────────────────────────────── */
.admin-main-content {
    margin-left: 0;
    padding: 20px 16px;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}
@media (min-width: 769px) {
    .admin-main-content {
        margin-left: 260px;
        padding: 24px 32px;
    }
}

/* ────────────────────────────────────────────
   14. RESPONSIVE CARD UTILITIES
   ──────────────────────────────────────────── */
.card-responsive {
    background: var(--bg-elevated);
    border: 1px solid #1f1f23;
    border-radius: 16px;
    padding: 16px;
}
@media (min-width: 768px) {
    .card-responsive {
        padding: 20px;
        border-radius: 20px;
    }
}
@media (min-width: 1024px) {
    .card-responsive {
        padding: 24px;
        border-radius: 24px;
    }
}

/* ────────────────────────────────────────────
   15. PROFILE 2-COL DESKTOP
   ──────────────────────────────────────────── */
.profile-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 1024px) {
    .profile-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* ────────────────────────────────────────────
   16. HISTORY TABLE VIEW (desktop)
   ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    .history-card {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 20px;
    }
}

/* ────────────────────────────────────────────
   17. BANNER DESKTOP CONSTRAINT
   (Slide height follows uploaded image ratio — no crop)
   ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    .banner-full {
        max-width: 100%;
        margin: 0;
    }
    .banner-full .swiper-slide img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }
}

/* ────────────────────────────────────────────
   18. CONTENT BOTTOM PADDING
   ──────────────────────────────────────────── */
.pb-mobile-nav {
    padding-bottom: 120px;
}
@media (min-width: 1024px) {
    .pb-mobile-nav {
        padding-bottom: 40px;
    }
}

/* ────────────────────────────────────────────
   19. DESKTOP: HIDE AUTH BUTTONS + MENU GRID
   ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Hide Login/Daftar CTA buttons on desktop */
    .auth-container {
        display: none !important;
    }
    /* Grid ikon kategori hanya untuk layar kecil. Di desktop perannya sudah
       diambil .desktop-subnav di lib/header.php — daftar yang sama persis
       (dibangun dari kat_aktif() juga), lengkap dengan ikon tiap kategori.
       Menampilkan keduanya berarti dua navigasi kategori bertumpuk. */
    .menu-wrapper {
        display: none !important;
    }
    /* Provider pills still visible */
    .provider-pills {
        display: flex !important;
    }
}

/* ────────────────────────────────────────────
   20. DESKTOP JACKPOT / WINNER BAR — BIGGER
   ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    .jackpot-winslit-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 20px;
    }
    .jackpot-container {
        max-width: 100% !important;
    }
    .jackpot-content {
        padding: 10px 10px 10px 28px !important;
        border-radius: 60px !important;
    }
    .winner-text {
        font-size: 1.1rem !important;
        letter-spacing: 2px !important;
    }
    .winner-text img {
        width: 28px !important;
        height: 28px !important;
    }
    .jackpot-amount-box {
        padding: 14px 36px !important;
        border-radius: 60px !important;
    }
    .jackpot-amount-text {
        font-size: 1.1rem !important;
    }
    #jackpot-amount {
        font-size: 1.6rem !important;
    }
}

/* ────────────────────────────────────────────
   21. MARQUEE / RUNNING TEXT
   ──────────────────────────────────────────── */
.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-base) 100%);
    border-bottom: 1px solid var(--border-soft);
    padding: 9px 0;
}
/* Hairline aksen tema di tepi atas — memisahkan dari header tanpa garis tebal */
.marquee-container::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--mq-line, rgba(255,255,255,0.16)) 20%,
        var(--mq-line, rgba(255,255,255,0.16)) 80%, transparent);
}
.marquee-inner {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    gap: 12px;
}

/* Badge INFO — pill dengan dot berdenyut sebagai penanda "live" */
.marquee-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    background: color-mix(in srgb, var(--mq-accent) 14%, transparent);
    border: 1px solid rgba(255,255,255,0.22);
    border: 1px solid color-mix(in srgb, var(--mq-accent) 45%, transparent);
}
.marquee-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mq-accent);
    box-shadow: 0 0 0 0 var(--mq-accent);
    animation: marqueePulse 2s ease-out infinite;
}
@keyframes marqueePulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mq-accent) 70%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mq-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mq-accent) 0%, transparent); }
}
.marquee-badge-text {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mq-accent);
    line-height: 1;
}

/* Track — fade di kedua tepi supaya teks meleleh masuk/keluar, bukan terpotong */
.marquee-track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.marquee-move {
    display: flex;
    width: max-content;
    animation: marqueeScroll 38s linear infinite;
    will-change: transform;
}
.marquee-track:hover .marquee-move { animation-play-state: paused; }

.marquee-seq {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.marquee-item {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #a8adb9;
    white-space: nowrap;
}
/* Separator berlian kecil antar pesan */
.marquee-sep {
    flex-shrink: 0;
    width: 5px; height: 5px;
    margin: 0 18px;
    transform: rotate(45deg);
    background: var(--mq-accent);
    opacity: 0.55;
}

/* Duplikatnya persis setengah track, jadi -50% mendarat tepat di awal */
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-move { animation: none; }
    .marquee-dot  { animation: none; }
}

@media (min-width: 768px) {
    .marquee-container { padding: 11px 0; }
    .marquee-item { font-size: 12px; }
    .marquee-badge-text { font-size: 10px; }
}

/* ────────────────────────────────────────────
   22. AUTO-SCROLL ANIMATION FOR GAME CARDS
   ──────────────────────────────────────────── */
@keyframes autoScrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.auto-scroll-container {
    display: flex;
    overflow: hidden;
    width: 100%;
}
.auto-scroll-track {
    display: flex;
    gap: 12px;
    animation: autoScrollLeft 25s linear infinite;
    will-change: transform;
    width: max-content;
}
.auto-scroll-track:hover {
    animation-play-state: paused;
}
@media (min-width: 1024px) {
    .auto-scroll-track { gap: 14px; }
    .auto-scroll-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
}



/* ==========================================================================
   SSG ENGINE — HOTPLAY88-TIER UI/UX INJECTION (ui-improve.css)
   Inspired by Hotplay88 & Top-Tier Modern iGaming Platforms
   Mobile & Desktop Optimized
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & SYSTEM RESET
   -------------------------------------------------------------------------- */
:root {
    --ssg-primary: var(--warna-utama, var(--warna-utama));
    --ssg-primary-rgb: var(--warna-utama-rgb, 247, 111, 4);
    --ssg-primary-glow: 0 0 24px rgba(var(--ssg-primary-rgb), 0.45);
    --ssg-primary-subtle: rgba(var(--ssg-primary-rgb), 0.12);
    --ssg-primary-border: rgba(var(--ssg-primary-rgb), 0.4);
    
    /* Dark Surface Elevation Layers */
    --ssg-bg-base: #0c0d10;
    --ssg-bg-surface: #14151a;
    --ssg-bg-elevated: #1a1b22;
    --ssg-bg-glass: rgba(18, 19, 24, 0.88);
    
    /* Borders & Hairlines */
    --ssg-border-subtle: rgba(255, 255, 255, 0.08);
    --ssg-border-medium: rgba(255, 255, 255, 0.15);
    --ssg-border-active: var(--ssg-primary);
    
    /* Radii */
    --ssg-radius-sm: 8px;
    --ssg-radius-md: 12px;
    --ssg-radius-lg: 16px;
    --ssg-radius-xl: 24px;
    --ssg-radius-full: 9999px;
    
    /* Animation Timings */
    --ssg-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ssg-transition: all 0.25s var(--ssg-ease);
}

/* Global Font & Antialiasing */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--ssg-bg-base) !important;
    color: #e4e4e7 !important;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Slim Neon Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(10, 10, 14, 0.7);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ssg-primary);
    box-shadow: 0 0 8px var(--ssg-primary);
}

/* --------------------------------------------------------------------------
   2. HEADER & TOP NAVIGATION (HOTPLAY88 STYLE)
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--ssg-bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--ssg-border-subtle) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6) !important;
    transition: var(--ssg-transition) !important;
    z-index: 90 !important;
}

.site-header.is-stuck {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85) !important;
    border-bottom-color: var(--ssg-primary-border) !important;
}

/* Logo Polish */
.site-header img {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease, filter 0.3s ease;
}
.site-header a:hover img {
    transform: scale(1.04);
    filter: drop-shadow(0 0 16px rgba(var(--ssg-primary-rgb), 0.5));
}

/* Top Categories Bar on Desktop */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.desktop-nav a {
    color: #a1a1aa !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 8px 14px !important;
    border-radius: var(--ssg-radius-md) !important;
    transition: var(--ssg-transition) !important;
    position: relative;
}
.desktop-nav a:hover,
.desktop-nav a.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.desktop-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    background: var(--ssg-primary);
    border-radius: 999px;
    box-shadow: 0 0 8px var(--ssg-primary);
}

/* Desktop Inline Guest Login */
.desktop-header-actions {
    display: none !important;
}
@media (min-width: 1024px) {
    .desktop-header-actions {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
}
.desktop-header-actions input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--ssg-radius-md) !important;
    padding: 8px 14px !important;
    color: #fff !important;
    font-size: 11px !important;
    outline: none !important;
    transition: var(--ssg-transition) !important;
    width: 120px !important;
}
.desktop-header-actions input:focus {
    border-color: var(--ssg-primary) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(var(--ssg-primary-rgb), 0.25) !important;
    width: 145px !important;
}

.btn-header-masuk {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ssg-radius-md) !important;
    padding: 8px 18px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3) !important;
    transition: var(--ssg-transition) !important;
}
.btn-header-masuk:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.5) !important;
    filter: brightness(1.1) !important;
}

.btn-header-daftar {
    background: linear-gradient(135deg, var(--ssg-primary) 0%, rgba(var(--ssg-primary-rgb), 0.8) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ssg-radius-md) !important;
    padding: 8px 18px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 12px rgba(var(--ssg-primary-rgb), 0.35) !important;
    transition: var(--ssg-transition) !important;
}
.btn-header-daftar:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(var(--ssg-primary-rgb), 0.6) !important;
    filter: brightness(1.1) !important;
}

/* Logged-In User Bar (Hotplay88 Capsule Style) */
.hdr-account-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--ssg-border-subtle) !important;
    border-radius: var(--ssg-radius-full) !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    transition: var(--ssg-transition) !important;
}
.hdr-account-btn:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--ssg-primary-border) !important;
    box-shadow: 0 0 20px rgba(var(--ssg-primary-rgb), 0.25) !important;
}
.hdr-balance-value {
    color: var(--ssg-primary) !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 12px rgba(var(--ssg-primary-rgb), 0.4) !important;
}

/* User Quick Links on Desktop */
.hdr-user-links {
    gap: 8px !important;
}
.hdr-user-link {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--ssg-radius-md) !important;
    padding: 7px 15px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: var(--ssg-transition) !important;
}
.hdr-user-link:hover {
    background: var(--ssg-primary-subtle) !important;
    border-color: var(--ssg-primary) !important;
    color: var(--ssg-primary) !important;
    transform: translateY(-1px) !important;
}
.hdr-user-link[href*="deposit"] {
    background: linear-gradient(135deg, var(--ssg-primary) 0%, rgba(var(--ssg-primary-rgb), 0.8) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(var(--ssg-primary-rgb), 0.35) !important;
}
.hdr-user-link[href*="deposit"]:hover {
    box-shadow: 0 4px 18px rgba(var(--ssg-primary-rgb), 0.6) !important;
    filter: brightness(1.1) !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE BOTTOM NAVIGATION (ORIGINAL COLOR PRESERVED)
   -------------------------------------------------------------------------- */
/* Pewarnaan asli tombol login & footer mobile dipertahankan sesuai keinginan user */
.ft-nav-fixed {
    touch-action: manipulation !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.ft-menu-item {
    -webkit-tap-highlight-color: transparent !important;
}

/* --------------------------------------------------------------------------
   4. UNIFIED CATEGORY HEADER & PAGE LAYOUT (SINKRON & KONSISTEN)
   -------------------------------------------------------------------------- */
.kat-header {
    text-align: center;
    padding: 24px 16px 14px;
    max-width: 1200px;
    margin: 0 auto;
}
.kat-header h1,
.kat-header .slot-page-title,
.kat-header .hot-title {
    font-family: 'Oxanium', sans-serif;
    font-weight: 900;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    color: #ffffff;
}
.kat-header h1 span,
.kat-header .slot-page-title span,
.kat-header .hot-title span {
    color: var(--warna-utama, #f76f04);
}
.kat-header p,
.kat-header .hot-subtitle {
    font-size: 13px;
    color: #a1a1aa;
    margin: 6px 0 0;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .kat-header {
        padding: 32px 24px 18px;
    }
    .kat-header h1,
    .kat-header .slot-page-title,
    .kat-header .hot-title {
        font-size: 30px;
    }
}
@media (min-width: 1024px) {
    .kat-header {
        padding: 36px 32px 20px;
    }
}

/* --------------------------------------------------------------------------
   BREADCRUMBS NAVIGATION (SINKRON & KONSISTEN)
   -------------------------------------------------------------------------- */
.ssg-breadcrumbs {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    max-width: 1200px;
    margin: 0 auto 6px;
    font-size: 12px;
    font-weight: 600;
    color: #71717a;
}
@media (min-width: 768px) {
    .ssg-breadcrumbs {
        padding: 10px 24px;
        margin: 0 auto 8px;
    }
}
.ssg-breadcrumbs a {
    color: #a1a1aa;
    text-decoration: none;
    transition: color 0.2s;
}
.ssg-breadcrumbs a:hover {
    color: var(--warna-utama, #f76f04);
}
.ssg-breadcrumbs-sep {
    color: #52525b;
    font-size: 11px;
}
.ssg-breadcrumbs-current {
    color: #ffffff;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. GAME CATALOG (SLOTS, CASINO, SPORTS)
   -------------------------------------------------------------------------- */
/* Provider Selector Pills Carousel */
.provider-wrapper {
    background: rgba(14, 15, 19, 0.7) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--ssg-border-subtle) !important;
    padding: 16px 12px !important;
    gap: 12px !important;
    scroll-behavior: smooth !important;
}
@media (min-width: 768px) {
    .provider-wrapper {
        padding: 20px 24px !important;
        gap: 16px !important;
    }
}

.prov-logo-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--ssg-radius-lg) !important;
    padding: 8px !important;
    transition: var(--ssg-transition) !important;
}
.prov-item:hover .prov-logo-box {
    border-color: var(--ssg-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--ssg-primary-rgb), 0.3) !important;
    transform: translateY(-3px) !important;
}
.prov-item.active .prov-logo-box {
    border-color: var(--ssg-primary) !important;
    background: var(--ssg-primary-subtle) !important;
    box-shadow: 0 0 18px rgba(var(--ssg-primary-rgb), 0.5) !important;
}
.prov-name {
    letter-spacing: 0.5px !important;
    margin-top: 4px !important;
    transition: color 0.2s ease !important;
}
.prov-item:hover .prov-name,
.prov-item.active .prov-name {
    color: var(--ssg-primary) !important;
}

/* Quick Category Filter Chips (Semua, Hot, Megaways, Buy Spin) */
.ssg-game-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 12px 14px;
    max-width: 1200px;
    margin: 0 auto;
    scrollbar-width: none;
}
.ssg-game-chips::-webkit-scrollbar { display: none; }
.ssg-game-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ssg-radius-full);
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 800;
    color: #a1a1aa;
    cursor: pointer;
    transition: var(--ssg-transition);
}
.ssg-game-chip svg {
    color: #ffffff;
    stroke: currentColor;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.ssg-game-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.ssg-game-chip.is-active {
    background: var(--warna-utama, var(--ssg-primary, #f76f04)) !important;
    border-color: var(--warna-utama, var(--ssg-primary, #f76f04)) !important;
    color: var(--accent-fg, #ffffff) !important;
    box-shadow: 0 2px 10px rgba(var(--warna-utama-rgb, 247, 111, 4), 0.35);
}
.ssg-game-chip.is-active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.ssg-chip-icon {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    transition: filter 0.2s ease;
}
.ssg-game-chip.is-active .ssg-chip-icon {
    filter: brightness(0) invert(1) !important;
}
.ssg-chip-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 3px;
    transition: background 0.2s ease, color 0.2s ease;
}
.ssg-game-chip.is-active .ssg-chip-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Search Box Polish */
.search-container {
    padding: 12px 12px 16px !important;
}
.search-box {
    position: relative !important;
}
.search-box input {
    background: rgba(20, 21, 26, 0.95) !important;
    border: 1px solid var(--ssg-border-subtle) !important;
    border-radius: var(--ssg-radius-lg) !important;
    padding: 14px 20px 14px 44px !important;
    font-size: 13px !important;
    color: #fff !important;
    transition: var(--ssg-transition) !important;
}
.search-box input:focus {
    border-color: var(--ssg-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--ssg-primary-rgb), 0.25), 0 6px 25px rgba(0,0,0,0.6) !important;
}

/* Game Card (Hotplay88 Architecture) */
.game-grid {
    gap: 12px !important;
    padding: 0 12px 60px !important;
}
@media (min-width: 768px) {
    .game-grid {
        gap: 18px !important;
        padding: 0 24px 80px !important;
    }
}

.game-card {
    position: relative !important;
    background: #111216 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--ssg-radius-lg) !important;
    overflow: hidden !important;
    transition: var(--ssg-transition) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
.game-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--ssg-primary-border) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--ssg-primary-rgb), 0.25) !important;
}

.game-media {
    position: relative !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.game-img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s var(--ssg-ease), filter 0.4s var(--ssg-ease) !important;
}
.game-card:hover .game-img {
    transform: scale(1.08) !important;
}

/* Desktop Hover Veil & Action Button (Hotplay88 pattern) */
.game-card-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
@media (min-width: 1024px) {
    .game-card:hover .game-card-hover-overlay {
        display: flex;
        opacity: 1;
    }
}
.game-btn-play {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, var(--ssg-primary) 0%, rgba(var(--ssg-primary-rgb), 0.85) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--ssg-radius-full) !important;
    padding: 10px 20px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    pointer-events: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(var(--ssg-primary-rgb), 0.5) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.game-btn-play svg {
    transition: transform 0.2s ease;
}
.game-btn-play:hover {
    transform: scale(1.06) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--ssg-primary-rgb), 0.75) !important;
}
.game-btn-play:hover svg {
    transform: translateX(2px);
}

/* Corner Provider Badge (Hotplay88 watermark style) - Authentic Provider Branding */
.game-prov-corner {
    position: absolute;
    top: 0;
    right: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom-left-radius: 9px;
    padding: 3px 7px;
    font-size: 8px;
    font-weight: 800;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
    z-index: 6;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    transition: transform 0.2s ease;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-left: 1px solid rgba(148, 163, 184, 0.35);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
@media (min-width: 640px) {
    .game-prov-corner {
        font-size: 8.5px;
        padding: 4px 8px;
        border-bottom-left-radius: 11px;
    }
}

/* 1. Pragmatic Play — Iconic Warm Orange / Gold Crown */
.game-prov-corner.prov-pragmatic {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.95) 0%, rgba(194, 65, 12, 0.98) 100%) !important;
    border-left: 1px solid rgba(251, 146, 60, 0.6) !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.6) !important;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.45) !important;
}

/* 2. PG Soft — Iconic Electric Violet / Neon Purple */
.game-prov-corner.prov-pgsoft {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95) 0%, rgba(91, 33, 182, 0.98) 100%) !important;
    border-left: 1px solid rgba(167, 139, 250, 0.6) !important;
    border-bottom: 1px solid rgba(167, 139, 250, 0.6) !important;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.45) !important;
}

/* 3. Habanero — Iconic Fiery Chili Red */
.game-prov-corner.prov-habanero {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95) 0%, rgba(185, 28, 28, 0.98) 100%) !important;
    border-left: 1px solid rgba(248, 113, 113, 0.6) !important;
    border-bottom: 1px solid rgba(248, 113, 113, 0.6) !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.45) !important;
}

/* 4. Joker Gaming — Iconic Golden Yellow */
.game-prov-corner.prov-joker {
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.95) 0%, rgba(161, 98, 7, 0.98) 100%) !important;
    border-left: 1px solid rgba(250, 204, 21, 0.6) !important;
    border-bottom: 1px solid rgba(250, 204, 21, 0.6) !important;
    box-shadow: 0 2px 10px rgba(202, 138, 4, 0.45) !important;
}

/* 5. JILI — Iconic Neon Cyan / Bright Blue */
.game-prov-corner.prov-jili {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.95) 0%, rgba(14, 116, 144, 0.98) 100%) !important;
    border-left: 1px solid rgba(34, 211, 238, 0.6) !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.6) !important;
    box-shadow: 0 2px 10px rgba(8, 145, 178, 0.45) !important;
}

/* 6. CQ9 — Iconic Royal Blue */
.game-prov-corner.prov-cq9 {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.95) 0%, rgba(30, 64, 175, 0.98) 100%) !important;
    border-left: 1px solid rgba(96, 165, 250, 0.6) !important;
    border-bottom: 1px solid rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 2px 10px rgba(29, 78, 216, 0.45) !important;
}

/* 7. Spadegaming — Iconic Emerald Green Spade */
.game-prov-corner.prov-spadegaming {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.95) 0%, rgba(4, 120, 87, 0.98) 100%) !important;
    border-left: 1px solid rgba(52, 211, 153, 0.6) !important;
    border-bottom: 1px solid rgba(52, 211, 153, 0.6) !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.45) !important;
}

/* 8. Playtech — Iconic Deep Navy / Cobalt Blue */
.game-prov-corner.prov-playtech {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95) 0%, rgba(29, 78, 216, 0.98) 100%) !important;
    border-left: 1px solid rgba(96, 165, 250, 0.6) !important;
    border-bottom: 1px solid rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.45) !important;
}

/* 9. JDB 168 — Iconic Crimson Red */
.game-prov-corner.prov-jdb {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.95) 0%, rgba(190, 18, 60, 0.98) 100%) !important;
    border-left: 1px solid rgba(251, 113, 133, 0.6) !important;
    border-bottom: 1px solid rgba(251, 113, 133, 0.6) !important;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.45) !important;
}

/* 10. Microgaming — Iconic Dark Teal / Mint */
.game-prov-corner.prov-microgaming {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.95) 0%, rgba(15, 118, 110, 0.98) 100%) !important;
    border-left: 1px solid rgba(45, 212, 191, 0.6) !important;
    border-bottom: 1px solid rgba(45, 212, 191, 0.6) !important;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.45) !important;
}

/* 11. NoLimit City — Iconic Underground Acid / Toxic Lime */
.game-prov-corner.prov-nolimit {
    background: linear-gradient(135deg, rgba(101, 163, 13, 0.95) 0%, rgba(77, 124, 15, 0.98) 100%) !important;
    border-left: 1px solid rgba(163, 230, 53, 0.6) !important;
    border-bottom: 1px solid rgba(163, 230, 53, 0.6) !important;
    box-shadow: 0 2px 10px rgba(101, 163, 13, 0.45) !important;
}

/* 12. Play'n GO — Iconic Azure Blue */
.game-prov-corner.prov-playngo {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.95) 0%, rgba(3, 105, 161, 0.98) 100%) !important;
    border-left: 1px solid rgba(56, 189, 248, 0.6) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45) !important;
}

/* 13. Yggdrasil — Iconic World Tree Forest Green */
.game-prov-corner.prov-yggdrasil {
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.95) 0%, rgba(22, 101, 52, 0.98) 100%) !important;
    border-left: 1px solid rgba(74, 222, 128, 0.6) !important;
    border-bottom: 1px solid rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 2px 10px rgba(21, 128, 61, 0.45) !important;
}

/* 14. BGaming — Iconic Magenta Pink */
.game-prov-corner.prov-bgaming {
    background: linear-gradient(135deg, rgba(219, 39, 119, 0.95) 0%, rgba(190, 24, 93, 0.98) 100%) !important;
    border-left: 1px solid rgba(244, 114, 182, 0.6) !important;
    border-bottom: 1px solid rgba(244, 114, 182, 0.6) !important;
    box-shadow: 0 2px 10px rgba(219, 39, 119, 0.45) !important;
}

/* 15. NetEnt — Iconic Vivid Lime */
.game-prov-corner.prov-netent {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.95) 0%, rgba(101, 163, 13, 0.98) 100%) !important;
    border-left: 1px solid rgba(190, 242, 100, 0.6) !important;
    border-bottom: 1px solid rgba(190, 242, 100, 0.6) !important;
    box-shadow: 0 2px 10px rgba(132, 204, 22, 0.45) !important;
}

/* 16. Fastspin / Nextspin — Iconic Sunset Orange */
.game-prov-corner.prov-fastspin,
.game-prov-corner.prov-nextspin {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95) 0%, rgba(194, 65, 12, 0.98) 100%) !important;
    border-left: 1px solid rgba(251, 146, 60, 0.6) !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.6) !important;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.45) !important;
}

/* 17. Evolution Gaming — Iconic VIP Champagne Gold */
.game-prov-corner.prov-evolution {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.95) 0%, rgba(180, 83, 9, 0.98) 100%) !important;
    border-left: 1px solid rgba(251, 191, 36, 0.6) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.6) !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.45) !important;
}

/* 18. Reel Kingdom — Iconic Royal Crown Purple */
.game-prov-corner.prov-reelkingdom {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.95) 0%, rgba(88, 28, 135, 0.98) 100%) !important;
    border-left: 1px solid rgba(196, 181, 253, 0.6) !important;
    border-bottom: 1px solid rgba(196, 181, 253, 0.6) !important;
    box-shadow: 0 2px 10px rgba(109, 40, 217, 0.45) !important;
}

/* 19. Sportsbook (CMD / IBC / SBO / M9BET) — Iconic Stadium Turf Green */
.game-prov-corner.prov-sports {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.95) 0%, rgba(4, 120, 87, 0.98) 100%) !important;
    border-left: 1px solid rgba(52, 211, 153, 0.6) !important;
    border-bottom: 1px solid rgba(52, 211, 153, 0.6) !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.45) !important;
}

/* 20. Default Fallback — Elegant Dark Slate */
.game-prov-corner,
.game-prov-corner.prov-default {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-left: 1px solid rgba(148, 163, 184, 0.4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

/* Badge Corner Style: Pindah ke Pojok Kanan Atas
   game-badge: top: 0, right: 0, border-bottom-left-radius
*/
.game-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 9px !important;
    border-bottom-right-radius: 0 !important;
    padding: 3px 7px !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65) !important;
    z-index: 6 !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    transition: transform 0.2s ease;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.95) 0%, rgba(194, 65, 12, 0.98) 100%) !important;
    border-top: none !important;
    border-right: none !important;
    border-left: 1px solid rgba(251, 146, 60, 0.6) !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.6) !important;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
@media (min-width: 640px) {
    .game-badge {
        font-size: 8.5px !important;
        padding: 4px 8px !important;
        border-bottom-left-radius: 11px !important;
        border-bottom-right-radius: 0 !important;
    }
}
.badge-hot {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.95) 0%, rgba(194, 65, 12, 0.98) 100%) !important;
    border-left: 1px solid rgba(251, 146, 60, 0.6) !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.45) !important;
    color: #ffffff !important;
}
.badge-new {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.98) 100%) !important;
    border-left: 1px solid rgba(52, 211, 153, 0.6) !important;
    border-bottom: 1px solid rgba(52, 211, 153, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
}
.badge-buyspin,
.badge-popular {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95) 0%, rgba(217, 119, 6, 0.98) 100%) !important;
    border-left: 1px solid rgba(251, 191, 36, 0.6) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45) !important;
    color: #ffffff !important;
}
.badge-cas-baccarat,
.badge-arc-casual {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(109, 40, 217, 0.98) 100%) !important;
    border-left: 1px solid rgba(196, 181, 253, 0.6) !important;
    border-bottom: 1px solid rgba(196, 181, 253, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.45) !important;
    color: #ffffff !important;
}
.badge-cas-roulette {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.95) 0%, rgba(190, 24, 93, 0.98) 100%) !important;
    border-left: 1px solid rgba(249, 168, 212, 0.6) !important;
    border-bottom: 1px solid rgba(249, 168, 212, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.45) !important;
    color: #ffffff !important;
}
.badge-cas-blackjack {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(29, 78, 216, 0.98) 100%) !important;
    border-left: 1px solid rgba(147, 197, 253, 0.6) !important;
    border-bottom: 1px solid rgba(147, 197, 253, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.45) !important;
    color: #ffffff !important;
}
.badge-arc-crash,
.badge-fish-jackpot {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.95) 0%, rgba(3, 105, 161, 0.98) 100%) !important;
    border-left: 1px solid rgba(125, 211, 252, 0.6) !important;
    border-bottom: 1px solid rgba(125, 211, 252, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.45) !important;
    color: #ffffff !important;
}
.badge-cb-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(67, 56, 202, 0.98) 100%) !important;
    border-left: 1px solid rgba(165, 180, 252, 0.6) !important;
    border-bottom: 1px solid rgba(165, 180, 252, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45) !important;
    color: #ffffff !important;
}
.badge-cb-dice {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.95) 0%, rgba(15, 118, 110, 0.98) 100%) !important;
    border-left: 1px solid rgba(94, 234, 212, 0.6) !important;
    border-bottom: 1px solid rgba(94, 234, 212, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(20, 184, 166, 0.45) !important;
    color: #ffffff !important;
}
.badge-sb-soccer {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(4, 120, 87, 0.98) 100%) !important;
    border-left: 1px solid rgba(110, 231, 183, 0.6) !important;
    border-bottom: 1px solid rgba(110, 231, 183, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
}
.badge-sb-basket {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95) 0%, rgba(194, 65, 12, 0.98) 100%) !important;
    border-left: 1px solid rgba(253, 186, 116, 0.6) !important;
    border-bottom: 1px solid rgba(253, 186, 116, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.45) !important;
    color: #ffffff !important;
}
.badge-sb-virtual {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.95) 0%, rgba(126, 34, 206, 0.98) 100%) !important;
    border-left: 1px solid rgba(216, 180, 254, 0.6) !important;
    border-bottom: 1px solid rgba(216, 180, 254, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.45) !important;
    color: #ffffff !important;
}
.badge-lt-4d {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.95) 0%, rgba(161, 98, 7, 0.98) 100%) !important;
    border-left: 1px solid rgba(253, 224, 71, 0.6) !important;
    border-bottom: 1px solid rgba(253, 224, 71, 0.6) !important;
    border-right: none !important;
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.45) !important;
    color: #ffffff !important;
}

/* RTP Bar Polish */
.rtp-bar {
    height: 15px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}
.rtp-bar-fill {
    border-radius: 999px 0 0 999px !important;
}
.rtp-bar-text {
    font-size: 8.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 3px #000, 0 0 4px #000 !important;
}

/* Sembunyikan watermark provider di atas gambar (.game-prov-corner) */
.game-prov-corner {
    display: none !important;
}

.rtp-tag {
    display: none !important;
}

/* Tampilkan nama provider di bawah nama game dengan identitas warna otentik masing-masing provider */
.game-prov,
.gp-game-prov {
    display: inline-block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    padding: 1.5px 6px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    pointer-events: none !important;
}
@media (min-width: 640px) {
    .game-prov,
    .gp-game-prov {
        font-size: 8.5px !important;
        margin-top: 4px !important;
        padding: 2px 7px !important;
    }
}

/* Warna Masing-Masing Provider di Bawah Nama Game */
.game-prov.prov-pragmatic, .gp-game-prov.prov-pragmatic {
    color: #fb923c !important;
    border-color: rgba(251, 146, 60, 0.35) !important;
    background: rgba(234, 88, 12, 0.12) !important;
    box-shadow: 0 0 6px rgba(234, 88, 12, 0.15) !important;
}
.game-prov.prov-pgsoft, .gp-game-prov.prov-pgsoft {
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.15) !important;
}
.game-prov.prov-habanero, .gp-game-prov.prov-habanero {
    color: #f87171 !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    background: rgba(220, 38, 38, 0.12) !important;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.15) !important;
}
.game-prov.prov-joker, .gp-game-prov.prov-joker {
    color: #c084fc !important;
    border-color: rgba(147, 51, 234, 0.35) !important;
    background: rgba(147, 51, 234, 0.12) !important;
    box-shadow: 0 0 6px rgba(147, 51, 234, 0.15) !important;
}
.game-prov.prov-jili, .gp-game-prov.prov-jili {
    color: #22d3ee !important;
    border-color: rgba(8, 145, 178, 0.35) !important;
    background: rgba(8, 145, 178, 0.12) !important;
    box-shadow: 0 0 6px rgba(8, 145, 178, 0.15) !important;
}
.game-prov.prov-cq9, .gp-game-prov.prov-cq9 {
    color: #fb7185 !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
    background: rgba(225, 29, 72, 0.12) !important;
    box-shadow: 0 0 6px rgba(225, 29, 72, 0.15) !important;
}
.game-prov.prov-spadegaming, .gp-game-prov.prov-spadegaming {
    color: #fbbf24 !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
    background: rgba(217, 119, 6, 0.12) !important;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.15) !important;
}
.game-prov.prov-playtech, .gp-game-prov.prov-playtech {
    color: #38bdf8 !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
    background: rgba(2, 132, 199, 0.12) !important;
    box-shadow: 0 0 6px rgba(2, 132, 199, 0.15) !important;
}
.game-prov.prov-jdb, .gp-game-prov.prov-jdb {
    color: #fde047 !important;
    border-color: rgba(202, 138, 4, 0.35) !important;
    background: rgba(202, 138, 4, 0.12) !important;
    box-shadow: 0 0 6px rgba(202, 138, 4, 0.15) !important;
}
.game-prov.prov-microgaming, .gp-game-prov.prov-microgaming {
    color: #60a5fa !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    background: rgba(37, 99, 235, 0.12) !important;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.15) !important;
}
.game-prov.prov-nolimit, .gp-game-prov.prov-nolimit {
    color: #fef08a !important;
    border-color: rgba(234, 179, 8, 0.35) !important;
    background: rgba(234, 179, 8, 0.12) !important;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.15) !important;
}
.game-prov.prov-playngo, .gp-game-prov.prov-playngo {
    color: #5eead4 !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
    background: rgba(20, 184, 166, 0.12) !important;
    box-shadow: 0 0 6px rgba(20, 184, 166, 0.15) !important;
}
.game-prov.prov-yggdrasil, .gp-game-prov.prov-yggdrasil {
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    background: rgba(16, 185, 129, 0.12) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.15) !important;
}
.game-prov.prov-bgaming, .gp-game-prov.prov-bgaming {
    color: #a78bfa !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    background: rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.15) !important;
}
.game-prov.prov-netent, .gp-game-prov.prov-netent {
    color: #34d399 !important;
    border-color: rgba(5, 150, 105, 0.35) !important;
    background: rgba(5, 150, 105, 0.12) !important;
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.15) !important;
}
.game-prov.prov-fastspin, .game-prov.prov-nextspin,
.gp-game-prov.prov-fastspin, .gp-game-prov.prov-nextspin {
    color: #fdba74 !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
    background: rgba(249, 115, 22, 0.12) !important;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.15) !important;
}
.game-prov.prov-evolution, .gp-game-prov.prov-evolution {
    color: #fef3c7 !important;
    border-color: rgba(180, 83, 9, 0.35) !important;
    background: rgba(180, 83, 9, 0.12) !important;
    box-shadow: 0 0 6px rgba(180, 83, 9, 0.15) !important;
}
.game-prov.prov-reelkingdom, .gp-game-prov.prov-reelkingdom {
    color: #fdba74 !important;
    border-color: rgba(194, 65, 12, 0.35) !important;
    background: rgba(194, 65, 12, 0.12) !important;
    box-shadow: 0 0 6px rgba(194, 65, 12, 0.15) !important;
}
.game-prov.prov-sports, .gp-game-prov.prov-sports {
    color: #34d399 !important;
    border-color: rgba(5, 150, 105, 0.35) !important;
    background: rgba(5, 150, 105, 0.12) !important;
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.15) !important;
}

/* Optimasi Nama Game & Container Game Info agar tampil profesional & modern */
.game-info,
.gp-game-info {
    padding: 8px 6px 9px !important;
    text-align: center !important;
    background: #090a0f !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 36px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.game-title,
.game-name,
.gp-game-name {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #f4f4f5 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.game-card:hover .game-title,
.game-card:hover .game-name,
.gp-game-card:hover .gp-game-name {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(var(--ssg-primary-rgb), 0.45) !important;
}

@media (min-width: 640px) {
    .game-info,
    .gp-game-info {
        padding: 9px 8px 10px !important;
        min-height: 40px !important;
    }
    .game-title,
    .game-name,
    .gp-game-name {
        font-size: 11.5px !important;
    }
}

@media (min-width: 1024px) {
    .game-info,
    .gp-game-info {
        padding: 10px 10px 12px !important;
        min-height: 42px !important;
    }
    .game-title,
    .game-name,
    .gp-game-name {
        font-size: 12px !important;
        letter-spacing: 0.25px !important;
    }
}

/* --------------------------------------------------------------------------
   6. MOBILE GAME BOTTOM SHEET MODAL (HOTPLAY88 BENCHMARK)
   -------------------------------------------------------------------------- */
.ssg-game-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ssg-game-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.ssg-game-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #14151a;
    border-top: 1px solid var(--ssg-primary-border);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95);
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 100001;
    transform: translateY(100%);
    transition: transform 0.35s var(--ssg-ease);
}
.ssg-game-sheet.is-open {
    transform: translateY(0);
}

/* Sembunyikan bottom navigation bar saat bottom sheet game terbuka */
body.ssg-sheet-open .ft-nav-fixed {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}
.ft-nav-fixed {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ssg-sheet-bar,
.ssg-sheet-handle {
    width: 44px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    margin: 0 auto 16px !important;
}
.ssg-sheet-bar.is-loading {
    width: 70px !important;
    background: linear-gradient(90deg, var(--ssg-primary) 0%, #ffffff 50%, var(--ssg-primary) 100%) !important;
    background-size: 200% 100% !important;
    animation: ssgBarGlow 1s infinite linear !important;
}
@keyframes ssgBarGlow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes ssgSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ssg-sheet-header,
.ssg-sheet-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
    padding: 4px 2px !important;
    text-align: left !important;
}

.ssg-sheet-thumb-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #090a0f !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(var(--ssg-primary-rgb), 0.2) !important;
}

.ssg-sheet-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.ssg-sheet-details {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: left !important;
}

.ssg-sheet-prov-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ssg-sheet-prov-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    line-height: 1.4 !important;
}

.ssg-sheet-prov {
    margin: 0 !important;
}

.ssg-sheet-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.2px !important;
}

.ssg-sheet-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: #a1a1aa !important;
    margin: 0 !important;
}

.ssg-sheet-meta-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8) !important;
}
.ssg-sheet-actions {
    display: flex;
    gap: 12px;
}
.ssg-sheet-btn-main {
    flex: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    background: linear-gradient(135deg, var(--ssg-primary) 0%, rgba(var(--ssg-primary-rgb), 0.85) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--ssg-radius-lg) !important;
    padding: 14px 20px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--ssg-primary-rgb), 0.5) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ssg-sheet-btn-main svg {
    transition: transform 0.2s ease;
}
.ssg-sheet-btn-main:active {
    transform: scale(0.97) !important;
    filter: brightness(1.1) !important;
}
.ssg-sheet-btn-main:active svg {
    transform: translateX(2px);
}
.ssg-sheet-btn-close {
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d8;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ssg-radius-lg);
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. MEMBER TRANSACTIONS (DEPOSIT, WITHDRAW, RIWAYAT, PROFIL)
   -------------------------------------------------------------------------- */
/* Embossed Virtual Debit Card for Deposit */
.ssg-virtual-card {
    background: linear-gradient(135deg, #1f2029 0%, #111216 100%);
    border: 1px solid var(--ssg-primary-border);
    border-radius: var(--ssg-radius-xl);
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 25px rgba(var(--ssg-primary-rgb), 0.15);
    position: relative;
    overflow: hidden;
}
.ssg-virtual-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(var(--ssg-primary-rgb), 0.18) 0%, transparent 70%);
    border-radius: 50%;
}
.ssg-card-chip {
    width: 38px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    border-radius: 6px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
}
.ssg-card-number {
    font-family: monospace;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ssg-card-holder {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #a1a1aa;
    letter-spacing: 1px;
}
.ssg-card-bank {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ssg-primary);
}

/* Quick Preset Chips on Deposit */
.ssg-preset-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0 20px;
}
@media (min-width: 640px) {
    .ssg-preset-chips {
        grid-template-columns: repeat(6, 1fr);
    }
}
.ssg-preset-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ssg-radius-md);
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 800;
    color: #e4e4e7;
    text-align: center;
    cursor: pointer;
    transition: var(--ssg-transition);
}
.ssg-preset-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--ssg-primary);
    color: #fff;
    transform: translateY(-2px);
}
.ssg-preset-chip.is-active {
    background: var(--ssg-primary);
    border-color: var(--ssg-primary);
    color: #000;
    box-shadow: 0 0 15px rgba(var(--ssg-primary-rgb), 0.5);
}

/* Withdraw Quick Percentage Chips */
.ssg-wd-chips {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 16px;
}
.ssg-wd-chip {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ssg-radius-md);
    padding: 8px;
    font-size: 10px;
    font-weight: 800;
    color: #d4d4d8;
    text-align: center;
    cursor: pointer;
    transition: var(--ssg-transition);
}
.ssg-wd-chip:hover,
.ssg-wd-chip.is-active {
    background: var(--ssg-primary-subtle);
    border-color: var(--ssg-primary);
    color: var(--ssg-primary);
}

/* Copy to Clipboard Buttons */
.ssg-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ssg-radius-sm);
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: var(--ssg-transition);
}
.ssg-copy-btn:hover {
    background: var(--ssg-primary);
    border-color: var(--ssg-primary);
    color: #000;
}
.ssg-copy-btn.is-copied {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   8. MOBILE PAGE TOP BUTTON (#pagetop) — Pamtoto Pattern
   -------------------------------------------------------------------------- */
.pageTop-element {
  display: none;
  position: fixed;
  right: 12px;
  bottom: 86px;
  z-index: 9999 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 20, 26, 0.92) 0%, rgba(10, 10, 14, 0.96) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--warna-utama, #f76f04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(var(--warna-utama-rgb, 247, 111, 4), 0.35);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
              background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767.98px) {
  .pageTop-element {
    display: flex;
  }
}

.pageTop-element.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: translateY(0);
}

/* Selaraskan posisi widget melayang .to-pill agar naik di atas pagetop saat muncul */
@media (max-width: 1023.98px) {
  body:has(.pageTop-element.is-visible) .to-pill {
    bottom: 154px !important;
  }
}

/* Hilang otomatis saat popup kontak / chat dial / ssg-sheet terbuka agar tidak bentrok */
body:has(#chatDialList.open) .pageTop-element,
body:has(.ft-contact-popup.open) .pageTop-element,
body:has(.chat-dial-list.open) .pageTop-element,
body.ssg-sheet-open .pageTop-element,
body:has(.ssg-game-sheet.is-open) .pageTop-element,
.pageTop-element.chat-dial-suppressed {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
}

.pageTop-element:hover,
.pageTop-element:active,
.pageTop-element:focus-visible {
  background: var(--warna-utama, #f76f04) !important;
  color: var(--accent-fg, #ffffff) !important;
  border-color: var(--warna-utama, #f76f04) !important;
  box-shadow: 0 0 18px rgba(var(--warna-utama-rgb, 247, 111, 4), 0.7) !important;
  transform: translateY(-2px) scale(0.96) !important;
}

.pageTop-element i.icon-angle-up {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid var(--warna-utama, #f76f04);
  border-left: 2.5px solid var(--warna-utama, #f76f04);
  transform: rotate(45deg);
  margin-bottom: 3px;
  margin-top: 2px;
  transition: border-color 0.2s ease;
}

.pageTop-element:hover i.icon-angle-up,
.pageTop-element:active i.icon-angle-up,
.pageTop-element:focus-visible i.icon-angle-up {
  border-color: var(--accent-fg, #ffffff) !important;
}

.pageTop-element span {
  font-size: 10.5px;
  color: #fff;
  letter-spacing: 0.4px;
  transition: color 0.2s ease;
}

.pageTop-element:hover span,
.pageTop-element:active span,
.pageTop-element:focus-visible span {
  color: var(--accent-fg, #ffffff) !important;
}

/* --------------------------------------------------------------------------
   9. ELIMINASI ANIMASI GIMMICK (animasi-wrapper)
   -------------------------------------------------------------------------- */
/* Menghilangkan animasi kartun mengambang yang memakan ruang dan tampak tidak profesional */
.animasi-wrapper,
.animasi-inner,
.z-img-zeus,
.z-img-x500 {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   10. LUXURY ABOUT SECTION (DARK GLASS ACCORDION CARD)
   -------------------------------------------------------------------------- */
.about-section {
    padding: 24px 16px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}
@media (min-width: 768px) {
    .about-section {
        padding: 36px 28px !important;
        margin-top: 36px !important;
        margin-bottom: 36px !important;
    }
}

.about-card {
    background: linear-gradient(180deg, rgba(20, 21, 28, 0.85) 0%, rgba(13, 14, 18, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--ssg-radius-xl) !important;
    padding: 24px 20px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative !important;
    overflow: hidden !important;
}
@media (min-width: 768px) {
    .about-card {
        padding: 32px 32px !important;
    }
}

/* Section Header Bar */
.about-title {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
}
.about-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: var(--ssg-primary);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--ssg-primary);
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .about-title { font-size: 1.8rem !important; }
    .about-title::before { height: 24px; }
}

.about-tagline {
    color: var(--ssg-primary) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 20px !important;
    padding-left: 16px;
}

/* --------------------------------------------------------------------------
   11. PROFESSIONAL FOOTER SYSTEM (.ft-footer)
   -------------------------------------------------------------------------- */
.ft-footer {
    background: linear-gradient(180deg, #0d0e12 0%, #060709 100%) !important;
    border-top: 1px solid rgba(var(--ssg-primary-rgb), 0.25) !important;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.8) !important;
    padding-top: 24px !important;
    padding-bottom: 110px !important;
}
@media (min-width: 1024px) {
    .ft-footer {
        padding-top: 32px !important;
        padding-bottom: 40px !important;
    }
}

/* Featured Products (Game Categories in Footer) */
.ft-featured-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--ssg-radius-lg) !important;
    padding: 20px !important;
    transition: var(--ssg-transition) !important;
    backdrop-filter: blur(6px);
}
.ft-featured-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--ssg-primary-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--ssg-primary-rgb), 0.25) !important;
    transform: translateY(-3px) !important;
    opacity: 1 !important;
}
.ft-featured-icon-circle {
    background: var(--ssg-primary-subtle) !important;
    border: 1px solid var(--ssg-primary-border) !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 0 12px rgba(var(--ssg-primary-rgb), 0.3) !important;
}
.ft-featured-icon-circle svg {
    color: var(--ssg-primary) !important;
    width: 20px !important;
    height: 20px !important;
}
.ft-featured-card h4 {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
}

/* Transaction Speed Cards */
.ft-speed-card {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--ssg-radius-lg) !important;
    padding: 18px 20px !important;
    transition: var(--ssg-transition) !important;
}
.ft-speed-card:hover {
    border-color: var(--ssg-primary-border) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-2px) !important;
}
.ft-speed-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--ssg-radius-md) !important;
}
.ft-speed-card:nth-child(1) .ft-speed-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}
.ft-speed-card:nth-child(2) .ft-speed-icon {
    background: linear-gradient(135deg, var(--ssg-primary) 0%, rgba(var(--ssg-primary-rgb), 0.8) 100%) !important;
    box-shadow: 0 4px 15px rgba(var(--ssg-primary-rgb), 0.4) !important;
}
.ft-speed-info h5 {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
.ft-speed-info p {
    color: #10b981 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
.ft-speed-card:nth-child(2) .ft-speed-info p {
    color: var(--ssg-primary) !important;
}

/* Sitemap Column Links */
.ft-sitemap {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.ft-col-title {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    position: relative;
    padding-left: 12px;
}
.ft-col-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background: var(--ssg-primary);
    border-radius: 999px;
}
.ft-link-list a {
    color: #a1a1aa !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: var(--ssg-transition) !important;
    display: inline-block;
}
.ft-link-list a:hover {
    color: var(--ssg-primary) !important;
    transform: translateX(4px);
}

/* Provider Logos in Footer */
.ft-provider-grid {
    gap: 12px !important;
}
.ft-provider-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--ssg-radius-md) !important;
    transition: var(--ssg-transition) !important;
    padding: 6px !important;
}
.ft-provider-item:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    transform: scale(1.05) !important;
}
.ft-provider-item img {
    filter: grayscale(1) opacity(0.65) !important;
    transition: filter 0.25s ease !important;
}
.ft-provider-item:hover img {
    filter: grayscale(0) opacity(1) !important;
}

/* --------------------------------------------------------------------------
   12. BROWSER DUKUNGAN (MURNI SVG IMAGES — TANPA BADGE)
   -------------------------------------------------------------------------- */
.ft-browsers {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.ft-browsers .ft-cert-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #a1a1aa !important;
    white-space: nowrap !important;
}
.ft-browsers .ft-badges {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.ft-browser-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
    cursor: default;
}
.ft-browser-icon:hover {
    background: transparent !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.15) !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}
.ft-browser-icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

/* --------------------------------------------------------------------------
   13. MODERN PROVIDER DROPDOWN & SEARCHABLE GRID SHEET (NO HORIZONTAL SCROLL)
   -------------------------------------------------------------------------- */
/* Hide the clunky 44-item horizontal scroller */
.provider-bar-wrap {
    display: none !important;
}

/* Control Bar Container */
.ssg-prov-nav-bar {
    max-width: 1200px;
    margin: 12px auto 8px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 768px) {
    .ssg-prov-nav-bar {
        padding: 0 24px;
        margin: 18px auto 12px;
        gap: 12px;
    }
}
@media (min-width: 1024px) {
    .ssg-prov-nav-bar {
        padding: 0 32px;
        margin: 20px auto 14px;
    }
}

/* Main Dropdown Trigger Row */
.ssg-prov-trigger-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.ssg-prov-dropdown-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, rgba(24, 25, 33, 0.96) 0%, rgba(14, 15, 20, 0.98) 100%);
    border: 1px solid var(--ssg-primary-border);
    border-radius: var(--ssg-radius-md);
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--ssg-primary-rgb), 0.12);
    transition: var(--ssg-transition);
    user-select: none;
}
@media (min-width: 768px) {
    .ssg-prov-dropdown-btn {
        min-height: 52px;
        padding: 10px 18px;
        border-radius: var(--ssg-radius-lg);
    }
}
.ssg-prov-dropdown-btn:hover {
    border-color: var(--ssg-primary);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75), 0 0 16px rgba(var(--ssg-primary-rgb), 0.25);
    transform: translateY(-1px);
}

.ssg-prov-btn-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}
.ssg-cur-prov-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .ssg-cur-prov-logo {
        width: 36px;
        height: 36px;
        padding: 4px;
    }
}
.ssg-cur-prov-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ssg-cur-prov-label {
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #a1a1aa;
    line-height: 1.1;
    white-space: nowrap;
}
.ssg-cur-prov-name {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .ssg-cur-prov-name {
        font-size: 14px;
    }
}

.ssg-prov-btn-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}
.ssg-prov-count-badge {
    background: var(--ssg-primary-subtle);
    border: 1px solid var(--ssg-primary-border);
    color: var(--ssg-primary);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    flex-shrink: 0;
}
.ssg-prov-chevron {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    display: inline-block;
    color: #a1a1aa;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}
.ssg-prov-dropdown-btn.is-active .ssg-prov-chevron {
    transform: rotate(180deg);
    color: var(--ssg-primary);
}

/* Quick Top Provider Pills */
.ssg-prov-quick-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.ssg-prov-quick-pills::-webkit-scrollbar { display: none; }

.ssg-quick-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ssg-radius-full);
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    color: #d4d4d8;
    cursor: pointer;
    transition: var(--ssg-transition);
}
.ssg-quick-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-1px);
}
.ssg-quick-pill.is-active {
    background: var(--ssg-primary);
    border-color: var(--ssg-primary);
    color: #000;
    box-shadow: 0 0 12px rgba(var(--ssg-primary-rgb), 0.4);
}
.ssg-quick-pill-all {
    background: var(--ssg-primary-subtle);
    border-color: var(--ssg-primary-border);
    color: var(--ssg-primary);
}

/* --------------------------------------------------------------------------
   PROVIDER MODAL & BOTTOM SHEET (SEARCHABLE 44-PROVIDER GRID)
   -------------------------------------------------------------------------- */
.ssg-prov-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 99995;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
@media (min-width: 768px) {
    .ssg-prov-modal-backdrop {
        align-items: center;
        padding: 24px;
    }
}
.ssg-prov-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.ssg-prov-modal {
    width: 100%;
    max-height: 78vh;
    background: #121319;
    border-top: 1px solid var(--ssg-primary-border);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(var(--ssg-primary-rgb), 0.2);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s var(--ssg-ease);
    overflow: hidden;
}
@media (min-width: 768px) {
    .ssg-prov-modal {
        max-width: 620px;
        max-height: 70vh;
        border: 1px solid var(--ssg-primary-border);
        border-radius: var(--ssg-radius-xl);
        transform: scale(0.94) translateY(15px);
    }
    .ssg-prov-modal-backdrop.is-open .ssg-prov-modal {
        transform: scale(1) translateY(0);
    }
}
.ssg-prov-modal-backdrop.is-open .ssg-prov-modal {
    transform: translateY(0);
}

/* Modal Header */
.ssg-prov-modal-header {
    padding: 14px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ssg-prov-modal-title {
    font-size: 13.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ssg-prov-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #a1a1aa;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    transition: var(--ssg-transition);
}
.ssg-prov-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Modal Search Filter */
.ssg-prov-search-wrap {
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
.ssg-prov-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--ssg-radius-md) !important;
    padding: 8px 14px 8px 36px !important;
    font-size: 12px !important;
    color: #fff !important;
    outline: none !important;
    transition: var(--ssg-transition) !important;
}
.ssg-prov-search-input:focus {
    border-color: var(--ssg-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--ssg-primary-rgb), 0.25) !important;
}
.ssg-prov-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    pointer-events: none;
}

/* Modal 44-Provider Grid */
.ssg-prov-grid {
    padding: 12px 14px 20px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 52vh;
}
@media (min-width: 640px) {
    .ssg-prov-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 16px 20px 24px;
        max-height: 48vh;
    }
}

.ssg-prov-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ssg-radius-md);
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: var(--ssg-transition);
    position: relative;
    min-height: 74px;
}
.ssg-prov-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ssg-primary-border);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.ssg-prov-card.is-active {
    background: var(--ssg-primary-subtle);
    border-color: var(--ssg-primary);
    box-shadow: 0 0 14px rgba(var(--ssg-primary-rgb), 0.35);
}
.ssg-prov-card-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: 6px;
}
.ssg-prov-card-name {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: #d4d4d8;
    line-height: 1.2;
}

/* ALL Provider Icon Box & Badges - State-Aware */
.ssg-prov-all-icon-wrap,
.prov-all-logo-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sizing Container */
.ssg-cur-prov-logo.ssg-prov-all-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #0f1015 !important;
    border: 1.5px solid var(--ssg-primary, var(--utama)) !important;
    box-shadow: 0 0 10px rgba(var(--ssg-primary-rgb), 0.35) !important;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .ssg-cur-prov-logo.ssg-prov-all-icon-wrap {
        width: 36px;
        height: 36px;
    }
}

.ssg-prov-card-logo.ssg-prov-all-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.prov-all-logo-box {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Sizing Icon SVG */
.ssg-cur-prov-logo.ssg-prov-all-icon-wrap svg {
    width: 16px;
    height: 16px;
}
.ssg-prov-card-logo.ssg-prov-all-icon-wrap svg {
    width: 20px;
    height: 20px;
}
.prov-all-logo-box svg {
    width: 22px;
    height: 22px;
}

/* 1. STATE INACTIVE (Default saat provider lain dipilih):
   Border redup halus, icon abu perak, teks muted */
.prov-item[data-code="ALL"] .prov-all-logo-box,
.ssg-prov-card[data-code="ALL"] .ssg-prov-card-logo.ssg-prov-all-icon-wrap {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}
.prov-item[data-code="ALL"] .prov-all-logo-box svg,
.ssg-prov-card[data-code="ALL"] .ssg-prov-card-logo.ssg-prov-all-icon-wrap svg {
    stroke: #a1a1aa !important;
    color: #a1a1aa !important;
    fill: none !important;
    transition: stroke 0.25s ease, color 0.25s ease !important;
}
.prov-item[data-code="ALL"] .prov-all-logo-box svg rect,
.ssg-prov-card[data-code="ALL"] .ssg-prov-card-logo.ssg-prov-all-icon-wrap svg rect {
    stroke: #a1a1aa !important;
    transition: stroke 0.25s ease !important;
}
.prov-item[data-code="ALL"] .prov-name {
    color: #71717a !important;
    font-weight: 700 !important;
    transition: color 0.25s ease !important;
}
.ssg-prov-card[data-code="ALL"] .ssg-prov-card-name {
    color: #71717a !important;
    font-weight: 700 !important;
    transition: color 0.25s ease !important;
}

/* 2. STATE ACTIVE (Saat ALL sedang dipilih player):
   Border Brand Color solid + Glow halus + Icon Putih Bersih + Teks Putih Tebal */
.prov-item[data-code="ALL"].active .prov-all-logo-box,
.ssg-prov-card.is-active[data-code="ALL"] .ssg-prov-card-logo.ssg-prov-all-icon-wrap {
    border: 1.5px solid var(--ssg-primary, var(--utama)) !important;
    background: #0f1015 !important;
    box-shadow: 0 0 14px rgba(var(--ssg-primary-rgb), 0.45) !important;
}
.prov-item[data-code="ALL"].active .prov-all-logo-box svg,
.prov-item[data-code="ALL"].active .prov-all-logo-box svg rect,
.ssg-prov-card.is-active[data-code="ALL"] .ssg-prov-card-logo.ssg-prov-all-icon-wrap svg,
.ssg-prov-card.is-active[data-code="ALL"] .ssg-prov-card-logo.ssg-prov-all-icon-wrap svg rect,
.ssg-cur-prov-logo.ssg-prov-all-icon-wrap svg,
.ssg-cur-prov-logo.ssg-prov-all-icon-wrap svg rect {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
}
.prov-item[data-code="ALL"].active .prov-name,
.ssg-prov-card.is-active[data-code="ALL"] .ssg-prov-card-name,
.ssg-cur-prov-name {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* 3. STATE HOVER:
   Menyala halus ke Brand Color dan icon memutih */
.prov-item[data-code="ALL"]:hover .prov-all-logo-box,
.ssg-prov-card[data-code="ALL"]:hover .ssg-prov-card-logo.ssg-prov-all-icon-wrap {
    border-color: var(--ssg-primary, var(--utama)) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 10px rgba(var(--ssg-primary-rgb), 0.3) !important;
}
.prov-item[data-code="ALL"]:hover .prov-all-logo-box svg,
.prov-item[data-code="ALL"]:hover .prov-all-logo-box svg rect,
.ssg-prov-card[data-code="ALL"]:hover .ssg-prov-card-logo.ssg-prov-all-icon-wrap svg,
.ssg-prov-card[data-code="ALL"]:hover .ssg-prov-card-logo.ssg-prov-all-icon-wrap svg rect {
    stroke: #ffffff !important;
    color: #ffffff !important;
}
.prov-item[data-code="ALL"]:hover .prov-name,
.ssg-prov-card[data-code="ALL"]:hover .ssg-prov-card-name {
    color: #ffffff !important;
}
.ssg-prov-card.is-active .ssg-prov-card-name {
    color: var(--ssg-primary);
}
.ssg-prov-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    background: var(--ssg-primary);
    color: #000;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}
.ssg-prov-card.is-active .ssg-prov-check {
    display: flex;
}

/* --------------------------------------------------------------------------
   14. HOME DESKTOP 1-LINE SLIDER (SLOTS, CASINO, FISHING)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .gp-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 6px 24px 20px !important;
        gap: 16px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        cursor: grab;
    }
    .gp-scroll:active {
        cursor: grabbing;
    }
    .gp-scroll::-webkit-scrollbar {
        display: none !important;
    }
    .gp-game-card {
        flex: 0 0 138px !important;
        min-width: 138px !important;
        max-width: 138px !important;
        scroll-snap-align: start !important;
        border-radius: var(--ssg-radius-md) !important;
    }
    .gp-scroll--casino .gp-game-card {
        flex: 0 0 152px !important;
        min-width: 152px !important;
        max-width: 152px !important;
    }
    
    /* Header Navigation Wrapper */
    .gp-cat-header-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .gp-slide-nav-group {
        display: none !important;
    }
    @media (min-width: 768px) {
        .gp-slide-nav-group {
            display: flex !important;
            align-items: center;
            gap: 6px;
        }
    }
    .gp-slide-nav {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--ssg-transition);
        user-select: none;
    }
    .gp-slide-nav:hover {
        background: var(--ssg-primary);
        border-color: var(--ssg-primary);
        color: #000;
        box-shadow: 0 0 12px rgba(var(--ssg-primary-rgb), 0.4);
        transform: scale(1.08);
    }
    .gp-slide-nav:active {
        transform: scale(0.95);
    }
}
@media (min-width: 1024px) {
    .gp-scroll {
        padding: 6px 32px 24px !important;
        gap: 18px !important;
    }
    .gp-game-card {
        flex: 0 0 152px !important;
        min-width: 152px !important;
        max-width: 152px !important;
    }
    .gp-scroll--casino .gp-game-card {
        flex: 0 0 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
    }
}

/* --------------------------------------------------------------------------
   15. ALWAYS-STICKY DESKTOP HEADER (PREVENT AUTO-HIDE ON SCROLL DOWN)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .site-header {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        transform: translateY(0) !important;
        will-change: auto !important;
        transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
        z-index: 99990 !important;
    }
    .site-header.is-hidden {
        transform: translateY(0) !important;
    }
    .desktop-subnav {
        transform: translateY(0) !important;
    }
    .desktop-subnav.is-hidden {
        transform: translateY(0) !important;
    }
}

/* --------------------------------------------------------------------------
   16. FLOATING MENU SISI KIRI (float-left-wrapper) — BRAND BORDER & TOOLTIP
   -------------------------------------------------------------------------- */
.float-left-wrapper {
    z-index: 99999 !important;
}

/* Border warna brand yang melapisi menu-items */
.float-left-wrapper .menu-items {
    background: linear-gradient(180deg, rgba(20, 22, 28, 0.94) 0%, rgba(12, 13, 17, 0.98) 100%) !important;
    border: 1.5px solid var(--ssg-primary) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 18px rgba(var(--ssg-primary-rgb), 0.35) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 10px !important;
    gap: 12px !important;
}

/* Individual float button styling */
.float-left-wrapper .float-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--ssg-transition) !important;
}

.float-left-wrapper .float-btn:hover,
.float-left-wrapper .float-btn:active {
    border-color: var(--ssg-primary) !important;
    background: var(--ssg-primary-subtle) !important;
    box-shadow: 0 0 14px rgba(var(--ssg-primary-rgb), 0.45) !important;
    transform: scale(1.1) !important;
}

.float-left-wrapper .float-btn img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) !important;
}

/* Tombol panah toggle */
.float-left-wrapper .toggle-float {
    background: linear-gradient(135deg, var(--ssg-primary) 0%, rgba(var(--ssg-primary-rgb), 0.8) 100%) !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 4px 0 16px rgba(var(--ssg-primary-rgb), 0.4) !important;
}

/* Tooltip Teks Melayang ("Live RTP", "Lucky Spin", "Mystery Box") */
.ssg-float-tooltip {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    background: rgba(18, 20, 26, 0.96);
    border: 1.5px solid var(--ssg-primary);
    border-radius: 8px;
    padding: 6px 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 12px rgba(var(--ssg-primary-rgb), 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s var(--ssg-ease), transform 0.25s var(--ssg-ease), visibility 0.25s;
    z-index: 100000;
}

/* Arrow kecil di kiri tooltip menunjuk ke tombol */
.ssg-float-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--ssg-primary) transparent transparent;
}

/* Tampil saat di-hover (desktop) atau saat di-tahan / active (mobile) */
.float-btn:hover .ssg-float-tooltip,
.float-btn.is-held .ssg-float-tooltip,
.float-btn.is-active .ssg-float-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* --------------------------------------------------------------------------
   17. OBSIDIAN SLATE MESH LIGHTING & REFINED ELEVATION
   -------------------------------------------------------------------------- */
/* Tingkatkan pencahayaan agar tidak terlalu gelap mati / kusam */
body {
    background-color: #0e0f14 !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(var(--ssg-primary-rgb), 0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(var(--ssg-primary-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 40%) !important;
    background-attachment: fixed !important;
}

.card,
.game-card,
.profile-card,
.deposit-card,
.withdraw-card {
    border-color: rgba(255, 255, 255, 0.09) !important;
}

/* --------------------------------------------------------------------------
   18. PROVIDER PLACEHOLDER SYSTEM (ANTI BROKEN-IMAGE / ANTI GUNUNG)
   -------------------------------------------------------------------------- */
.ssg-prov-placeholder {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(var(--ssg-primary-rgb), 0.16) 0%, rgba(18, 20, 26, 0.95) 100%) !important;
    border: 1px solid var(--ssg-primary-border) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    color: var(--ssg-primary) !important;
    text-align: center !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

.ssg-cur-prov-logo.ssg-prov-placeholder {
    width: 38px !important;
    height: 38px !important;
    padding: 3px !important;
}

.ssg-prov-card-logo.ssg-prov-placeholder {
    width: 44px !important;
    height: 44px !important;
    padding: 4px !important;
    margin-bottom: 6px !important;
}

.ssg-prov-placeholder.ssg-prov-all-logo {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    color: var(--utama, var(--ssg-primary, #fbbf24)) !important;
    background: linear-gradient(135deg, rgba(var(--ssg-primary-rgb, 245, 158, 11), 0.25) 0%, rgba(18, 20, 26, 0.98) 100%) !important;
    border: 1px solid var(--utama, var(--ssg-primary, #fbbf24)) !important;
    box-shadow: 0 0 10px rgba(var(--ssg-primary-rgb, 245, 158, 11), 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
.ssg-prov-card-logo.ssg-prov-all-logo {
    font-size: 12px !important;
}

.ssg-placeholder-text {
    font-size: 8px !important;
    font-weight: 900 !important;
    color: var(--ssg-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.2px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   19. MOBILE SIDEBAR MENU POLISH & LOGO RESIZING (#sidebar)
   -------------------------------------------------------------------------- */
#sidebar {
    width: 290px !important;
    background: rgba(13, 14, 19, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-left: 1px solid var(--ssg-primary-border) !important;
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85) !important;
    z-index: 100010 !important;
}

#sidebarOverlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100008 !important;
}

/* Ukuran logo sidebar disesuaikan agar proporsional dan tidak kekecilan */
.logo-sidebar img {
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) !important;
    display: block !important;
}

/* Tombol close X di sidebar */
#sidebar .sidebar-close-btn,
#sidebar button[onclick="toggleSidebar()"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #a1a1aa !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: var(--ssg-transition) !important;
}
#sidebar .sidebar-close-btn:hover,
#sidebar button[onclick="toggleSidebar()"]:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-color: var(--ssg-primary) !important;
}

/* Tombol Login & Daftar di mobile sidebar */
#sidebar .btn-sidebar-login {
    width: 100% !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1.5px solid var(--warna-utama, #f76f04) !important;
    color: var(--warna-utama, #f76f04) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}
#sidebar .btn-sidebar-login:hover {
    background: rgba(var(--warna-utama-rgb, 247, 111, 4), 0.12) !important;
}

#sidebar .btn-sidebar-daftar {
    width: 100% !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: var(--warna-utama, #f76f04) !important;
    border: 1.5px solid var(--warna-utama, #f76f04) !important;
    color: var(--accent-fg, #ffffff) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(var(--warna-utama-rgb, 247, 111, 4), 0.35) !important;
    transition: all 0.2s ease !important;
}
#sidebar .btn-sidebar-daftar:hover {
    filter: brightness(1.12) !important;
}

/* Link item di dalam sidebar */
#sidebar .menu-link {
    border-radius: var(--ssg-radius-md) !important;
    padding: 11px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #d4d4d8 !important;
    transition: var(--ssg-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid transparent !important;
}
#sidebar .menu-link:hover,
#sidebar .menu-link.active {
    background: var(--ssg-primary-subtle) !important;
    color: #fff !important;
    border-color: var(--ssg-primary-border) !important;
    transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   20. USER WALLET BAR (HOME PAGE LOGGED-IN — MINIMALIST & FUNCTIONAL)
   -------------------------------------------------------------------------- */
/* Hilangkan mobile-saldo-nav bawaan yang redundant */
.mobile-saldo-nav {
    display: none !important;
}

/* Sembunyikan banner saat user sudah login di halaman home */
body.ssg-user-logged-in .banner-full {
    display: none !important;
}

.ssg-user-wallet-hero {
    padding: 10px 12px 12px;
    margin: 0 auto;
    max-width: 1200px;
}
@media (min-width: 768px) {
    .ssg-user-wallet-hero {
        padding: 16px 24px 16px;
    }
}

/* Clean, flat, utilitarian wallet strip (No AI Slop / No Fluff) */
.ssg-wallet-bar {
    background: linear-gradient(135deg, rgba(20, 22, 29, 0.96) 0%, rgba(13, 14, 18, 0.98) 100%);
    border: 1px solid var(--ssg-primary-border);
    border-radius: var(--ssg-radius-lg);
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 768px) {
    .ssg-wallet-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 24px;
        min-height: 56px;
    }
}

.ssg-wallet-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
@media (min-width: 768px) {
    .ssg-wallet-left {
        justify-content: flex-start;
        gap: 18px;
    }
}

.ssg-wallet-user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ssg-wallet-avatar-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1a1aa;
}
.ssg-wallet-username {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ssg-wallet-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    display: none;
}
@media (min-width: 768px) {
    .ssg-wallet-divider {
        display: block;
    }
}

.ssg-wallet-balance-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ssg-wallet-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #71717a;
    letter-spacing: 0.8px;
}
.ssg-wallet-val {
    font-size: 14px;
    font-weight: 900;
    color: var(--ssg-primary);
    letter-spacing: 0.4px;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .ssg-wallet-val {
        font-size: 16px;
    }
}

.ssg-hero-refresh-btn {
    background: transparent;
    border: none;
    color: #71717a;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}
.ssg-hero-refresh-btn:hover {
    color: var(--ssg-primary);
}

/* Action Buttons: Pure utilitarian Deposit & Withdraw */
.ssg-wallet-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 768px) {
    .ssg-wallet-btn-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

.ssg-btn-wallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--ssg-radius-md);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ssg-transition);
    user-select: none;
}
.ssg-btn-wallet:active {
    transform: scale(0.96);
}

.ssg-btn-depo {
    background: var(--ssg-primary);
    color: #000;
    border: 1px solid var(--ssg-primary);
    box-shadow: 0 2px 10px rgba(var(--ssg-primary-rgb), 0.35);
}
.ssg-btn-depo:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 15px rgba(var(--ssg-primary-rgb), 0.5);
    transform: translateY(-1px);
}

.ssg-btn-wd {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.ssg-btn-wd:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--ssg-primary);
    color: var(--ssg-primary);
    transform: translateY(-1px);
}
/* --------------------------------------------------------------------------
   21. BORDER LUMINANCE & SURFACE SEPARATION REFINEMENT
   -------------------------------------------------------------------------- */
/* Ganti border yang warnanya menyatu dengan background agar struktur terlihat tegas */
.menu-wrapper {
    background: linear-gradient(180deg, #13141b 0%, #0d0e13 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.menu-icon-box {
    background: linear-gradient(145deg, #181a24 0%, #101117 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.menu-item:hover .menu-icon-box,
.menu-item.active .menu-icon-box {
    border-color: var(--warna-utama, var(--ssg-primary)) !important;
}

.gp-section {
    background: transparent !important;
}
.gp-divider {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* Game Category Slider Bar above ssg-prov-dropdown-btn */
.ssg-cat-slider-bar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 12px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.ssg-cat-slider-bar::-webkit-scrollbar {
    display: none;
}
.ssg-cat-slider-track {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    width: max-content;
}
@media (min-width: 768px) {
    .ssg-cat-slider-bar {
        padding: 0 24px;
    }
}
@media (min-width: 1024px) {
    .ssg-cat-slider-bar {
        padding: 0 32px;
    }
    .ssg-cat-slider-track {
        width: 100%;
        justify-content: flex-start;
    }
}

.ssg-cat-pill-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.ssg-cat-pill.is-active .ssg-cat-pill-icon {
    filter: brightness(0) invert(1);
}

.ssg-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #a1a1aa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
}
.ssg-cat-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}
.ssg-cat-pill.is-active {
    background: var(--warna-utama, #f76f04) !important;
    color: var(--accent-fg, #ffffff) !important;
    border-color: var(--warna-utama, #f76f04) !important;
    box-shadow: 0 2px 10px rgba(var(--warna-utama-rgb, 247, 111, 4), 0.35);
}
.ssg-cat-pill svg {
    flex-shrink: 0;
}

/* Modern Search Box Optimization */
.search-container {
    padding: 12px 12px !important;
    position: relative !important;
}
.search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
.search-box::before {
    content: '';
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
    transition: all 0.2s ease;
}
.search-box:focus-within::before {
    filter: brightness(1.6);
}
.search-box input {
    width: 100% !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 40px 0 42px !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    outline: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.search-box input::placeholder {
    color: #71717a !important;
    font-size: 13px !important;
}
.search-box input:focus {
    border-color: var(--warna-utama, #f76f04) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 0 3px rgba(var(--warna-utama-rgb, 247, 111, 4), 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* Game Chips under search box */
.search-container .ssg-game-chips,
.ssg-game-chips {
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    padding: 4px 2px !important;
}

/* Penyelarasan Layout Halaman Hot Games (/hot-games) — konsisten dengan /slots dan /sports */
.search-container.hot-games-nav-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 12px 16px !important;
}
.ssg-cat-slider-bar:has(+ .hot-games-nav-container) {
    max-width: 1200px !important;
    margin: 16px auto 12px !important;
    padding: 0 16px !important;
}
.ssg-cat-slider-bar:has(+ .hot-games-nav-container) .ssg-cat-slider-track {
    width: max-content !important;
    justify-content: flex-start !important;
}
.ssg-hot-cat-chips {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    padding: 4px 2px !important;
}
@media (min-width: 768px) {
    .search-container.hot-games-nav-container {
        padding: 20px 24px !important;
    }
    .ssg-cat-slider-bar:has(+ .hot-games-nav-container) {
        margin: 24px auto 16px !important;
        padding: 0 24px !important;
    }
    .ssg-cat-slider-bar:has(+ .hot-games-nav-container) .ssg-cat-slider-track {
        width: max-content !important;
        justify-content: flex-start !important;
    }
    .ssg-hot-cat-chips {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
}
@media (min-width: 1024px) {
    .search-container.hot-games-nav-container {
        padding: 20px 32px !important;
    }
    .ssg-cat-slider-bar:has(+ .hot-games-nav-container) {
        padding: 0 32px !important;
    }
    .ssg-cat-slider-bar:has(+ .hot-games-nav-container) .ssg-cat-slider-track {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}