/* ============================================================
   KAINBET — TEMA v2 (replika metrik kawanpaito)
   Nilai dari computed style referensi:
     bg halaman    #001D14 · padding .background-top 30px 30px 0
     header kartu  #005339 · radius 20px 20px 0 0 · padding 6-8px 12px · tinggi 52px
     body kartu    #00442F
     bar strip     #070707
     jackpot       Open24DisplaySt 70px
     pasaran       4 kolom, item ~270-285px, jarak 11 px
     logo provider 128x89
     topbar        12px, jarak 40px, tanpa pill
     slider        full width, 487px, tanpa radius
     footer        padding 40px 0 20px, #f1f2f3
   Semua rule !important karena markup asli inline style.
   ============================================================ */

:root {
    --kb-bg: #001D14;
    --kb-head: #005339;
    --kb-body: #00442F;
    --kb-strip: #070707;
    --kb-accent: #e6a233;
    --kb-accent-2: #ffcc4d;
    --kb-text: #ffffff;
    --kb-radius: 20px;
}

/* 1. halaman */
body {
    background: #001D14 !important;
    background-image: none !important;
    color: var(--kb-text) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.background-top {
    background: #001D14 !important;
    background-image: none !important;
    padding: 30px 30px 0 !important;
}

.background-top > .container,
.background-top > div {
    max-width: 1202px;
}

/* 2. slider */
.slider,
.slider .carousel-inner,
.slider .item,
.slider .item img {
    border-radius: 0 !important;
    overflow: hidden;
}

.slider {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 769px) {
    .slider .item img {
        height: 487px !important;
        object-fit: cover;
    }
}

.slider .carousel-indicators li {
    background: rgba(255, 255, 255, .35);
    border: 0;
}

.slider .carousel-indicators .active {
    background: var(--kb-accent);
}

/* 3. topbar teks polos */
.menu-opt.topbar-opt {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 !important;
}

.menu-opt.topbar-opt .menu-opt {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 4px 40px 4px 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #fff !important;
}

.menu-opt.topbar-opt .menu-opt:hover {
    color: var(--kb-accent) !important;
}

/* 4. marquee */
.announcement-container {
    background: transparent !important;
    border: 0 !important;
    margin: 0 31px !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    color: #fff !important;
}

.announcement-container a {
    color: var(--kb-accent-2) !important;
}

/* 5. jackpot */
#progressive_jackpot {
    font-family: "Open24DisplaySt", sans-serif !important;
    font-size: 70px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* 6. bar judul kategori */
.background-top [style*="background-color: #070707"],
.background-top [style*="background-color:#070707"] {
    background-color: var(--kb-head) !important;
    border-left: 0 !important;
    border-radius: var(--kb-radius) var(--kb-radius) 0 0 !important;
    padding: 8px 12px !important;
    min-height: 52px;
    box-sizing: border-box;
}

.background-top [style*="background-color: #070707"] div[style*="font-weight: bold"],
.background-top [style*="background-color:#070707"] div[style*="font-weight: bold"] {
    color: #fff !important;
    font-size: 16px !important;
}

.background-top [style*="border-radius: 25px"],
.background-top [style*="border-radius:25px"] {
    background-color: var(--kb-accent) !important;
    color: #101010 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
}

/* 7. kartu pasaran */
ul.lottery_market {
    background: transparent !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
}

ul.lottery_market > li {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 285px;
    padding: 0 12px 12px 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

ul.lottery_market > li > div > div[onclick] {
    background: var(--kb-body) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    padding: 10px 12px !important;
    color: #fff !important;
}

ul.lottery_market b,
ul.lottery_market strong {
    color: var(--kb-accent) !important;
    letter-spacing: 2px;
}

/* 8. kategori & provider */
.main-menu-outer-container {
    background: var(--kb-head) !important;
    border-radius: var(--kb-radius) var(--kb-radius) 0 0;
    padding: 10px 0 !important;
}

.main-menu-outer-container img {
    border-radius: 10px;
}

.background-top img[src*="provider-game-scroll"],
.background-top img[src*="/cat/"] {
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

/* 9. tabel */
#tabelHist tbody tr,
#tabelDeposit tbody tr,
#tabelWd tbody tr {
    background: var(--kb-body) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

#tabelHist thead th,
#tabelDeposit thead th,
#tabelWd thead th {
    background: var(--kb-head) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

/* 10. form */
.form-control,
select.market_id {
    background: var(--kb-body) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--kb-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 162, 51, .16) !important;
}

/* 11. tombol */
.btn-success,
.btn-primary {
    background: linear-gradient(180deg, var(--kb-accent-2), var(--kb-accent)) !important;
    border: 0 !important;
    color: #17120A !important;
    border-radius: 12px !important;
    font-weight: 700;
}

/* 12. footer */
.footer-bg {
    background: #00251A !important;
    background-image: none !important;
    border-radius: 0 !important;
    padding: 40px 0 20px !important;
    color: #f1f2f3 !important;
}

.footer-bg a {
    color: #f1f2f3 !important;
}

.footer-bg a:hover {
    color: var(--kb-accent) !important;
}

/* 13. scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--kb-body);
}

::-webkit-scrollbar-thumb {
    background: rgba(230, 162, 51, .5);
    border-radius: 8px;
}

/* 14. mobile */
@media (max-width: 768px) {
    .background-top {
        padding: 14px 10px 0 !important;
    }

    ul.lottery_market > li {
        flex: 0 0 50% !important;
        width: 50% !important;
    }

    .menu-opt.topbar-opt .menu-opt {
        margin: 4px 14px 4px 0 !important;
    }

    #progressive_jackpot {
        font-size: 40px !important;
    }
}
/* ============================================================
   KAINBET — TEMA v3 : topbar, navbar, nav kategori, tata letak
   Metrik referensi:
     konten max-width 1202px · padding samping 30px
     topbar teks 12px, jarak item 40px, latar transparan
     nav kategori teks 12px, jarak 28px, di atas slider
   ============================================================ */

:root {
    --kb-wrap: 1202px;
    --kb-pad: 30px;
}

/* ---------- topbar: transparan, tipis, rata kiri ---------- */
body > div[style*="position: fixed"] > div[style*="background-color: var(--tertiary-color)"] {
    background-color: transparent !important;
    padding: 0 !important;
}

body > div[style*="position: fixed"] > div[style*="background-color: var(--tertiary-color)"] > div {
    width: 100% !important;
    max-width: none !important;
    padding: 0 var(--kb-pad) !important;
    box-sizing: border-box;
}

.menu-opt.topbar-opt {
    margin: 6px 40px 6px 0 !important;
}

.menu-opt.topbar-opt > img {
    display: none !important;   /* ref: teks polos tanpa ikon */
}

.menu-opt.topbar-opt > div {
    margin-left: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
}

.menu-opt.topbar-opt:hover > div {
    color: var(--kb-accent) !important;
}

/* ---------- nav kategori (baru) ---------- */
.kb-catnav {
    background: #00251A;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.kb-catnav-inner {
    max-width: var(--kb-wrap);
    margin: 0 auto;
    padding: 10px var(--kb-pad);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.kb-catnav-inner a {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.kb-catnav-inner a:hover,
.kb-catnav-inner a.active {
    color: var(--kb-accent);
    text-decoration: none;
}

/* ---------- slider full-bleed, konten 1202 ---------- */
.slider {
    margin: 0 !important;
}

.background-top {
    padding: 30px var(--kb-pad) 0 !important;
}

.background-top > .container,
.background-top > div {
    max-width: var(--kb-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.announcement-container {
    max-width: var(--kb-wrap);
    margin: 8px auto !important;
    padding: 8px var(--kb-pad) !important;
    box-sizing: border-box;
}

/* ---------- strip logo provider (jangan disembunyikan) ---------- */
.main-menu-outer-container {
    background: #005339 !important;
    border-radius: 20px 20px 0 0;
    padding: 10px 12px !important;
    overflow: hidden;
}

/* ---------- jarak antar blok beranda ---------- */
.background-top > div > div {
    margin-bottom: 14px;
}

/* ---------- footer ---------- */
.footer-bg > div {
    max-width: var(--kb-wrap);
    margin: 0 auto;
    padding: 0 var(--kb-pad);
    box-sizing: border-box;
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
    :root {
        --kb-pad: 12px;
    }

    .kb-catnav-inner {
        gap: 16px;
        padding: 8px var(--kb-pad);
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .menu-opt.topbar-opt {
        margin: 6px 16px 6px 0 !important;
    }
}
/* ============================================================
   KAINBET — TEMA v4 : koreksi berdasarkan diff terukur vs referensi
   Diff yang diperbaiki:
     body bg        hitam → #001D14        (inline style header menang, perlu html body)
     .menu-opt      14px/pad6 → 12px/pad0
     .slider        h487 → max 422 (rasio 1265x422), object-fit cover
     .announcement  bg #201E21 → transparan, pad 8px 0, w 1202
     .background-top pad 30px 30px 0 → 30px 0 (konten dibatasi 1202)
     .lottery li    275x227 → 285x192, hanya 8 item tampil (ref 1 baris)
     .kb-catnav a   16px → 12px
     footer         bg rgba(0,0,0,.5) → transparan di atas #00251A
   ============================================================ */

/* ---------- body & latar ---------- */
html body {
    background: #001D14 !important;
    background-image: none !important;
    color: #fff !important;
}

/* ---------- topbar item ---------- */
html .menu-opt.topbar-opt,
html .menu-opt.topbar-opt > div {
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    line-height: 18px !important;
}

html .menu-opt.topbar-opt {
    margin: 4px 40px 4px 0 !important;
    height: 20px !important;
}

/* ---------- slider: rasio referensi 1265x422 ---------- */
@media (min-width: 769px) {
    html .slider .item img {
        height: auto !important;
        max-height: 422px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}

/* ---------- marquee ---------- */
html .announcement-container {
    background: transparent !important;
    background-color: transparent !important;
    max-width: 1202px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
}

/* ---------- area konten ---------- */
html .background-top {
    padding: 30px 0 !important;
    background: #001D14 !important;
}

html .background-top > .container,
html .background-top > div {
    max-width: 1202px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- nav kategori: 12px ---------- */
html .kb-catnav-inner a {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 17px !important;
}

html .kb-catnav-inner {
    max-width: 1202px !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* ---------- daftar pasaran: 4 kolom, maksimal 8 item ---------- */
html ul.lottery_market {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 1142px !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

html ul.lottery_market > li {
    flex: 0 0 285px !important;
    width: 285px !important;
    max-width: 285px !important;
    height: auto !important;
    padding: 0 15px 11px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html ul.lottery_market > li:nth-child(n+9) {
    display: none !important;
}

/* kartu pasaran di dalam li: badan #00442F, sudut bawah 16px */
html ul.lottery_market > li > div > div[onclick] {
    background: #00442F !important;
    border-radius: 0 0 16px 16px !important;
    padding: 10px 12px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35) !important;
    color: #fff !important;
}

/* ---------- jackpot ---------- */
html #progressive_jackpot {
    font-size: 70px !important;
    line-height: 100px !important;
    height: 100px !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%) !important;
}

/* ---------- footer ---------- */
html .footer-bg {
    background: #00251A !important;
    background-image: none !important;
    padding: 40px 0 20px !important;
    color: #f1f2f3 !important;
}

html .footer-bg > div {
    max-width: 1202px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
/* ============================================================
   v5 — rapatkan daftar pasaran agar setara referensi (1 baris, tinggi ~192px)
   Diff sebelumnya: 8 item / 452px  vs ref 4 item / 203px
   ============================================================ */
html ul.lottery_market > li:nth-child(n+5) { display: none !important; }

html ul.lottery_market {
    height: auto !important;
    min-height: 0 !important;
}

html ul.lottery_market > li {
    height: 192px !important;
    max-height: 192px !important;
    overflow: hidden !important;
    padding: 0 15px 0 0 !important;
}

html ul.lottery_market > li > div {
    height: 100% !important;
}

html ul.lottery_market > li > div > div[onclick] {
    height: 100% !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}

/* blok beranda lebih rapat, meniru tinggi total referensi */
html .background-top > div > div {
    margin-bottom: 10px !important;
}
/* ============================================================
   v6 — KHUSUS BERANDA (guest home), desktop + mobile
   Pakai aset resmi kawanpaito (izin pemilik situs):
     main-bg.jpg   → latar .background-top (desktop) & body (mobile)
     footer.jpg    → latar .footer-bg
   Di-scope ke body.kb-home supaya halaman lain tidak berubah.
   ============================================================ */
:root {
    --kb-mainbg: url("https://kawanpaito.dataklmsad902.site/asset/images/main-bg.jpg");
    --kb-footerbg: url("https://kawanpaito.dataklmsad902.site/asset/images/footer.jpg");
}

/* ---------- DESKTOP ---------- */
@media (min-width: 769px) {
    body.kb-home {
        background-color: #001D14 !important;
        background-image: none !important;
    }

    body.kb-home .background-top {
        background-image: var(--kb-mainbg) !important;
        background-color: #001D14 !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        min-height: 900px;
    }

    body.kb-home .footer-bg {
        background-image: var(--kb-footerbg) !important;
        background-color: #00251A !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-size: cover !important;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    body.kb-home {
        background-color: #001D14 !important;
        background-image: var(--kb-mainbg) !important;
        background-repeat: repeat-y !important;
        background-position: center top !important;
        background-size: 100% auto !important;
    }

    body.kb-home .background-top {
        background-image: none !important;
        background-color: transparent !important;
        padding: 14px 10px 0 !important;
        min-height: 0;
    }

    body.kb-home .footer-bg {
        background-image: var(--kb-footerbg) !important;
        background-color: #00251A !important;
        background-size: cover !important;
        background-position: center bottom !important;
    }
}
/* ============================================================
   v7 — HEADER BERANDA (guest) meniru referensi
     topbar bar   : bg #00442F, tinggi 52px
     item menu    : 12px putih + ikon 20x20
     MASUK        : outline 1px #fff, radius 20px, pad 3px 20px
     DAFTAR       : bg #FDC23A, teks #1a1a1a, radius 20px
     logo         : ~213x80
     bar kategori : bg #00442F, teks 12px, ikon 20px, jarak 28px
   ============================================================ */
body.kb-home { --kb-bar: #00442F; --kb-gold: #FDC23A; }

/* baris topbar */
body.kb-home > div[style*="position: fixed"] > div[style*="background-color: var(--tertiary-color)"],
body.kb-home > div[style*="position: fixed"] > div[style*="background-color: var(--tertiary-color)"] > div {
    background-color: var(--kb-bar) !important;
    min-height: 52px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* item menu + ikon */
body.kb-home .menu-opt.topbar-opt { margin: 0 40px 0 0 !important; height: 20px !important; }
body.kb-home .menu-opt.topbar-opt > img {
    display: inline-block !important;
    width: 20px !important; height: 20px !important;
    object-fit: contain !important;
    margin-right: 6px !important;
}
body.kb-home .menu-opt.topbar-opt > div {
    font-size: 12px !important; font-weight: 400 !important; color: #fff !important; line-height: 20px !important;
}

/* tombol MASUK */
body.kb-home .menu-opt.topbar-opt ~ div[onclick*="login"] ,
body.kb-home [onclick*="'/login'"]  {
    background: transparent !important;
    border: 1px solid #fff !important;
    border-radius: 20px !important;
    padding: 3px 20px !important;
    height: 28px !important;
    font-size: 14px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* tombol DAFTAR */
body.kb-home [onclick*="'/register'"] {
    background: var(--kb-gold) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 3px 20px !important;
    height: 26px !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

/* logo */
body.kb-home img[alt] { max-height: 80px; }
body.kb-home nav img, body.kb-home header img { max-height: 80px; width: auto; }

/* bar kategori (nav teks) */
body.kb-home .kb-catnav {
    background: var(--kb-bar) !important;
    border: 0 !important;
}
body.kb-home .kb-catnav-inner { gap: 28px !important; padding: 8px 0 !important; }
body.kb-home .kb-catnav-inner a { font-size: 12px !important; color: #fff !important; }

@media (max-width: 768px) {
    body.kb-home .menu-opt.topbar-opt { margin-right: 16px !important; }
    body.kb-home .kb-catnav-inner { gap: 16px !important; padding: 8px 10px !important; }
}
/* v8 — warna tombol DAFTAR disamakan dengan referensi (#FDC23A) + rapatkan header mobile */
body.kb-home .register-btn,
body.kb-home a.register-btn {
    background: #FDC23A !important;
    background-image: none !important;
    color: #1a1a1a !important;
}
body.kb-home .login-btn { border-color: #fff !important; color: #fff !important; }

@media (max-width: 768px) {
    body.kb-home .login-btn,
    body.kb-home .register-btn { padding: 3px 14px !important; font-size: 12px !important; }
}

/* v8b — logo mobile dikecilkan agar header tidak jebol */
@media (max-width: 768px) {
    body.kb-home img[src*="logo-kainbet"] { max-height: 44px !important; width: auto !important; }
    body.kb-home .kb-catnav-inner a { font-size: 11px !important; }
}

/* v9 — koreksi hasil diff 1:1 (viewport 1406)
   ref: slider 1391x535 (rasio 2.6), announcement 1280 (=95%)   */
@media (min-width: 769px) {
    body.kb-home .slider .item img {
        max-height: none !important;
        height: auto !important;
        aspect-ratio: 2.6 / 1 !important;
        object-fit: cover !important;
    }
    body.kb-home .announcement-container {
        max-width: 95% !important;
        width: 95% !important;
        margin: 0 auto !important;
    }
}

/* v10 — kalibrasi akhir header/hero: slider rasio 2.75, marquee maks 1280 */
@media (min-width: 769px) {
    body.kb-home .slider .item img { aspect-ratio: 2.75 / 1 !important; }
    body.kb-home .announcement-container { max-width: 1280px !important; width: 95% !important; }
}

/* v11 — banner sekarang memakai aset referensi: tinggi mengikuti rasio asli gambar */
@media (min-width: 769px) {
    body.kb-home .slider .carousel-inner,
    body.kb-home .slider .item { height: auto !important; }
    body.kb-home .slider .item img {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}

/* v12 — frame slider DIPATOK (bukan ikut gambar): semua banner dipotong rapi (cover)
   desktop rasio 3:1 (≈464px @1398), mobile 223px. Tidak ada lompatan tinggi antar slide. */
@media (min-width: 769px) {
    body.kb-home .slider,
    body.kb-home .slider .carousel-inner,
    body.kb-home .slider .item {
        height: 464px !important;
        max-height: 464px !important;
        overflow: hidden !important;
    }
    body.kb-home .slider .item img {
        width: 100% !important;
        height: 464px !important;
        max-height: 464px !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}
@media (max-width: 768px) {
    body.kb-home .slider,
    body.kb-home .slider .carousel-inner,
    body.kb-home .slider .item,
    body.kb-home .slider .item img {
        height: 223px !important;
        max-height: 223px !important;
        overflow: hidden !important;
        object-fit: cover !important;
    }
}