/* ==========================================================================
   Menu bar kategori — tema dark-purple (referensi Semesta88)
   Dipakai oleh: index.php (halaman depan) dan kategori.php (halaman kategori)
   Ikon: /images/menu/<slug>.svg + <slug>-active.svg
   ========================================================================== */
    :root {
        --cm-text: #919ef8;
        --cm-hover-text: #e4ff23;
        --cm-active-text: #e2ff7a;
        --cm-active-bracket: #7f9e14;
        --cm-hover-bg: radial-gradient(circle at top center, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 100%);
        --cm-panel-bg: rgba(0,0,0,.9);
        --cm-panel-border: #151515;
        --cm-arrow: #adbed2;
        --cm-font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .menu-slide {
        position: relative;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        background: linear-gradient(90deg, #1c1338 0%, #150e2b 55%, #0f0a20 100%);
        border-top: 1px solid rgba(145,158,248,.14);
        border-bottom: 1px solid rgba(145,158,248,.16);
        font-family: var(--cm-font);
    }
    .menu-slide > i.cm-arrow {
        flex: 0 0 auto; cursor: pointer; color: var(--cm-arrow);
        display: flex; align-items: center; justify-content: center;
        width: 34px; font-size: 16px; background: rgba(0,0,0,.25);
        transition: color .18s, background .18s;
    }
    .menu-slide > i.cm-arrow:hover { color: var(--cm-hover-text); background: rgba(0,0,0,.45); }
    /* panah digambar pakai CSS supaya tetap tampil walau font ikon tidak termuat
       (sebelumnya kalau font ikon gagal, yang muncul karakter aneh/nyasar) */
    .menu-slide > i.cm-arrow { font-size: 0; }
    .menu-slide > i.cm-arrow::before {
        content: ""; display: block; width: 9px; height: 9px;
        border-top: 2px solid currentColor; border-right: 2px solid currentColor;
    }
    .menu-slide > #cm-prev::before { transform: rotate(-135deg); margin-left: 4px; }
    .menu-slide > #cm-next::before { transform: rotate(45deg); margin-right: 4px; }

    .top-menu {
        margin: 0; padding: 0; list-style: none;
        display: flex; flex-wrap: nowrap; flex-grow: 1;
        overflow-x: auto; overflow-y: hidden;
        scroll-behavior: smooth; scrollbar-width: none;
    }
    .top-menu::-webkit-scrollbar { display: none; }
    .top-menu > li {
        flex: 1 0 calc(100% / 12);
        min-width: 84px;
        transition: background-image .18s;
    }
    .top-menu > li:hover,
    .top-menu > li[data-active="true"] { background-image: var(--cm-hover-bg); }

    .top-menu > li > a {
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        width: 100%; height: 100%; box-sizing: border-box;
        padding: 15px 2px 13px;
        text-align: center; text-decoration: none;
        color: var(--cm-text);
        text-transform: uppercase;
        font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: normal;
        transition: box-shadow .18s, color .18s;
    }
    .top-menu > li:hover > a {
        color: var(--cm-active-text);
        box-shadow: inset 1px 0 0 0 var(--cm-active-bracket), inset -1px 0 0 0 var(--cm-active-bracket);
    }
    .top-menu > li[data-active="true"] > a {
        color: var(--cm-active-text); font-weight: 700;
        box-shadow: inset 1px 0 0 0 var(--cm-active-bracket), inset -1px 0 0 0 var(--cm-active-bracket), inset 0 -1px 0 0 var(--cm-active-bracket);
    }

    /* Ikon 30x30: dua lapis (normal + active) cross-fade, tanpa JS */
    .cm-ic { position: relative; display: block; width: 30px; height: 30px; margin: 0 auto 5px; }
    .cm-ic img { position: absolute; inset: 0; width: 30px; height: 30px; display: block; transition: opacity .18s; }
    .cm-ic .cm-ic-on { opacity: 0; }
    .top-menu > li:hover .cm-ic .cm-ic-on,
    .top-menu > li[data-active="true"] .cm-ic .cm-ic-on { opacity: 1; }
    .top-menu > li:hover .cm-ic img:not(.cm-ic-on),
    .top-menu > li[data-active="true"] .cm-ic img:not(.cm-ic-on) { opacity: 0; }

    .cm-txt { display: block; position: relative; }
    .cm-hot {
        position: absolute; top: -14px; right: -15px;
        background: #e4ff23; color: #180f2e;
        font-size: 7px; font-weight: 900; line-height: 1;
        padding: 2px 4px; border-radius: 4px; letter-spacing: .3px;
    }

    /* Panel dropdown */
    .top-menu .game-list {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0; z-index: 16;
        margin: 0; padding: 14px 0 22px; list-style: none;
        flex-wrap: wrap; justify-content: center;
        background-color: var(--cm-panel-bg);
        border-top: 4px solid var(--cm-panel-border);
        border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
        font-family: var(--cm-font);
    }
    .top-menu > li.has-list:hover .game-list { display: flex; }
    .top-menu .game-list > li { flex-basis: 25%; max-width: 25%; box-sizing: border-box; padding: 0 10px; margin: 5px 0; }
    .top-menu .game-list > li > a {
        display: flex; align-items: center; justify-content: center;
        height: 52px; border-radius: 70px; overflow: hidden;
        background: #0b0b12;
        border: 1px solid rgba(145,158,248,.22);
        text-decoration: none;
        transition: transform .25s, border-color .25s, box-shadow .25s, background .25s;
    }
    .top-menu .game-list > li:hover > a {
        transform: scale(1.05);
        border-color: var(--cm-hover-text);
        background: #14121f;
        box-shadow: 0 0 18px rgba(228,255,35,.22);
    }
    .gc-name {
        font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: 1px;
        text-transform: uppercase;
        -webkit-background-clip: text !important; background-clip: text !important;
        -webkit-text-fill-color: transparent; color: transparent;
    }
    .prov-pragmatic { background-image: linear-gradient(to right, #ff416c, #ff4b2b); }
    .prov-pgsoft    { background-image: linear-gradient(to right, #00c6ff, #0072ff); }
    .prov-habanero  { background-image: linear-gradient(to right, #f12711, #f5af19); }
    .prov-joker     { background-image: linear-gradient(to right, #8E2DE2, #4A00E0); }
    .prov-spade     { background-image: linear-gradient(to right, #11998e, #38ef7d); }
    .prov-micro     { background-image: linear-gradient(to right, #fc4a1a, #f7b733); }
    .prov-evolution { background-image: linear-gradient(to right, #ED213A, #93291E); }
    .prov-ion       { background-image: linear-gradient(to right, #1f397b, #99f2c8); }
    .prov-sexy      { background-image: linear-gradient(to right, #c31432, #240b36); }
    .prov-sbobet    { background-image: linear-gradient(to right, #7d8bff, #4a5bd6); }
    .prov-cmd368    { background-image: linear-gradient(to right, #1cb5e0, #000046); }
    .prov-saba      { background-image: linear-gradient(to right, #ff9a9e, #a30000); }

    @media (max-width: 1024px) {
        .top-menu > li { flex: 0 0 16.666%; }
    }
    @media (max-width: 760px) {
        .menu-slide > i.cm-arrow { width: 26px; font-size: 14px; }
        .top-menu > li { flex: 0 0 21%; min-width: 72px; }
        .top-menu > li > a { padding: 11px 2px 10px; font-size: 11px; line-height: 15px; } /* huruf dinaikkan 10->11px mengikuti acuan */
        .cm-ic, .cm-ic img { width: 26px; height: 26px; }
        .top-menu .game-list > li { flex-basis: 50%; max-width: 50%; }
    }

    /* ===== FIX header bertumpuk =====
       .page-header aslinya position:fixed top:0 z-index:999999 — dia menimpa
       top-bar dan menutupi bagian ATAS bar menu (ikonnya tertutup baris logo).
       Karena <header> sendiri sudah fixed, baris logo cukup relatif supaya
       tiga lapis (top-bar → logo → menu) menumpuk normal, dan spacer ikut naik. */
    header#main-site-header { display: block !important; height: auto !important; }
    header#main-site-header > .top-bar { position: relative !important; }
    header#main-site-header > .page-header {
        position: relative !important;
        top: auto !important; left: auto !important;
        z-index: auto !important;
        height: 60px !important;
    }

/* ==========================================================================
   TOMBOL MASUK/DAFTAR DI HALAMAN DEPAN
   Diukur di situs hidup: .top-bar hanya 17px tinggi (karena .buttonlc diposisikan
   absolute) dan overflow:hidden -> tombol 34px-nya terpotong di luar kotak,
   tertutup baris logo. Perbaikan: baris ikut alur, tombol melebar otomatis.
   ========================================================================== */
header#main-site-header > .top-bar {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
header#main-site-header > .top-bar .buttonlc,
header#main-site-header > .top-bar .buttonlc.space,
header#main-site-header > .top-bar .buttonlc.smartb3 {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-right: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    font-size: 11px !important;
}
header#main-site-header > .top-bar .buttonlc a {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}