/* ============================================================================
   NAV BAWAH + TOMBOL MENU MENGAMBANG  (gaya mengikuti situs referensi)
   file: assets/css/nav-bawah.css                                        v1

   Hanya muncul di layar kecil (maks 900px). Di desktop tidak ada perubahan.

   Yang dilakukan berkas ini:
     1. menu samping PUSAT AKUN (.w88-sisi) yang tadinya menumpuk di atas isi
        halaman -> dijadikan LACI (drawer) yang ditarik dari kiri
     2. bilah navigasi bawah 5 tombol (Beranda / Deposit / Penarikan / Riwayat /
        Akun) menempel di bawah layar
     3. tombol bulat "MENU" di kiri bawah untuk membuka laci
     4. baris tab lama (.w88-tab) disembunyikan karena sudah diwakili nav bawah

   Ukuran mengikuti referensi (bilah ~58px, tombol mengambang 58px,
   sasaran sentuh >= 48px), warnanya tetap palet kita sendiri.
   ========================================================================== */

@media (max-width: 900px) {

    /* --- isi halaman tidak boleh tertutup bilah bawah ---
       Catatan: sebagian halaman memasang ".body-mobile { padding: 0 !important }",
       jadi di sini dipakai html:root body.body-mobile supaya kekuatannya lebih tinggi. */
    html:root body,
    html:root body.body-mobile,
    html:root body.mobile {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    }

    /* --- baris tab lama digantikan nav bawah ---
       Catatan: pemain-desktop.css memakai ".w88-utama .w88-tab { display:grid !important }",
       karena keduanya !important maka pemilih yang lebih kuat menang - makanya di sini
       dipakai "html body .w88-utama .w88-tab" (2 unsur + 2 kelas), bukan ".w88-tab" saja. */
    html body .w88-utama .w88-tab {
        display: none !important;
    }

    /* --- satu kolom, tanpa menu samping menumpuk --- */
    .w88-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 10px !important;
        margin-top: 10px !important;
    }

    /* --- menu samping jadi laci dari kiri --- */
    .w88-sisi {
        display: block !important;
        grid-template-columns: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 84vw !important;
        max-width: 330px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 90px !important;
        border-radius: 0 16px 16px 0 !important;
        border: 0 !important;
        border-right: 1px solid rgba(145, 158, 248, .22) !important;
        background-image: linear-gradient(180deg, #1d1338, #150e2b) !important;
        background-color: #150e2b !important;
        box-shadow: 8px 0 28px rgba(0, 0, 0, .55) !important;
        transform: translateX(-104%);
        transition: transform .26s ease;
        z-index: 960 !important;
    }

    .w88-sisi.terbuka {
        transform: translateX(0) !important;
    }

    html body .w88-sisi a {
        padding: 15px 20px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        min-height: 51px;
        border-bottom: 1px solid rgba(145, 158, 248, .10) !important;
    }

    /* --- lapisan gelap di belakang laci --- */
    .w88-laci-latar {
        position: fixed;
        inset: 0;
        background: rgba(4, 2, 12, .62);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        z-index: 950;
    }

    body.laci-terbuka .w88-laci-latar {
        opacity: 1;
        pointer-events: auto;
    }

    body.laci-terbuka {
        overflow: hidden;
    }

    /* --- bilah navigasi bawah --- */
    .w88-nav-bawah {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 940;
        display: flex !important;
        align-items: stretch;
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: linear-gradient(180deg, #1b1436 0%, #140d28 100%);
        border-top: 1px solid rgba(145, 158, 248, .24);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .45);
    }

    .w88-nav-bawah a {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px 8px;
        text-decoration: none !important;
        color: #9d97c0 !important;
        font: 700 10.5px/1 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
        letter-spacing: .2px;
        -webkit-tap-highlight-color: transparent;
    }

    .w88-nav-bawah a svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .w88-nav-bawah a span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .w88-nav-bawah a.nyala {
        color: #e4ff23 !important;
        background-image: radial-gradient(60% 78% at 50% 100%, rgba(228, 255, 35, .16), rgba(228, 255, 35, 0) 72%);
    }

    .w88-nav-bawah a.nyala svg {
        stroke-width: 2.3;
        filter: drop-shadow(0 0 6px rgba(228, 255, 35, .45));
    }

    .w88-nav-bawah a:active {
        background-color: rgba(145, 158, 248, .12);
    }

    /* --- tombol MENU bulat (hamburger) DIHENTIKAN di v5 ---
       Dulu ada di sini. Sekarang dibuka lewat tab "MENU" di tepi kiri layar,
       jadi tidak ada dua tombol dengan fungsi sama (bilah bawah + tab). */
/* desktop dan tablet besar: tidak ada bilah bawah, menu samping tetap seperti semula */
@media (min-width: 901px) {
    .w88-nav-bawah,
    .w88-laci-latar {
        display: none !important;
    }
}

/* ============================================================================
   MENU SAMPING (LACI) — gaya WARKOPSPIN88: hitam-ungu + trim kuning
   Dipakai halaman publik (index, kategori, akun, promosi, m/index).     v5

   Bentuk mengikuti referensi menu samping: deret tombol persegi ber-trim
   kuning/krem di kiri, plus tab "TUTUP MENU" vertikal menempel di tepi kanan
   panel. Warnanya memakai palet situs sendiri (ungu #191036 / #5401a5 +
   kuning #e4ff23), bukan emas referensi.

   Tab TUTUP MENU diletakkan di LUAR panel yang bisa di-scroll, supaya tetap
   setinggi layar walau daftar menunya panjang.
   ========================================================================== */

/* --- di desktop menu ini tidak ada (sama seperti bilah bawah) --- */
@media (min-width: 901px) {
    html body .w88-laci-sendiri,
    html body .w88-tab-laci {
        display: none !important;
    }
}

@media (max-width: 900px) {

    /* ---------- panel laci ---------- */
    html body .w88-laci-sendiri {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 296px !important; max-width: 88vw !important;
        display: block !important;
        background:
            radial-gradient(120% 42% at 100% 0%, rgba(228, 255, 35, .08), rgba(228, 255, 35, 0) 68%),
            linear-gradient(180deg, #1c1139 0%, #120a26 46%, #0a0518 100%) !important;
        border-right: 1px solid rgba(228, 255, 35, .30) !important;
        box-shadow: 16px 0 42px rgba(0, 0, 0, .68), inset -1px 0 0 rgba(228, 255, 35, .10) !important;
        z-index: 2147483000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-104%) !important;
        transition: transform .28s cubic-bezier(.22, .7, .24, 1) !important;
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    }
    html body .w88-laci-sendiri.terbuka {
        transform: translateX(0) !important;
    }

    /* ---------- kepala panel ---------- */
    html body .w88-laci-sendiri .w88-laci-kepala {
        position: relative !important;
        padding: 20px 18px 15px !important;
        border-bottom: 1px solid rgba(228, 255, 35, .18) !important;
        background: linear-gradient(180deg, #33165f 0%, rgba(51, 22, 95, 0) 100%) !important;
    }
    html body .w88-laci-sendiri .w88-laci-kepala strong {
        display: block !important;
        font-size: 19px !important;
        font-weight: 900 !important;
        color: #e4ff23 !important;
        letter-spacing: 1.2px !important;
        text-shadow: 0 0 14px rgba(228, 255, 35, .35) !important;
    }
    html body .w88-laci-sendiri .w88-laci-kepala span {
        display: block !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        letter-spacing: .3px !important;
        color: #a9b0e2 !important;
    }
    html body .w88-laci-sendiri .w88-laci-kepala::after {
        content: '' !important;
        position: absolute !important;
        left: 18px !important; bottom: -1px !important;
        width: 46px !important; height: 2px !important;
        background: linear-gradient(90deg, #e4ff23, rgba(228, 255, 35, 0)) !important;
    }

    /* ---------- daftar tombol ---------- */
    html body .w88-laci-sendiri ul,
    html body .w88-laci-sendiri ul li,
    html body .w88-laci-sendiri li::marker {
        list-style: none none inside !important;
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .w88-laci-sendiri ul {
        padding: 14px 14px 4px !important;
    }
    html body .w88-laci-sendiri li {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
    }
    /* tema lain di situs memasang penanda daftar (disc) pada li — pastikan tidak menyeruak
       ke dalam laci: sembunyikan penanda di semua lapis */
    html body .w88-laci-sendiri li,
    html body .w88-laci-sendiri li a,
    html body .w88-laci-sendiri li a em,
    html body .w88-laci-sendiri li a span {
        list-style: none !important;
        list-style-type: none !important;
    }
    html body .w88-laci-sendiri li a {
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        min-height: 52px !important;
        padding: 8px 12px 8px 10px !important;
        text-decoration: none !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, #1e1342 0%, #130b28 100%) !important;
        border: 1px solid rgba(228, 255, 35, .34) !important;
        box-shadow: inset 0 0 0 1px rgba(228, 255, 35, .07), 0 3px 10px rgba(0, 0, 0, .38) !important;
        transition: background .16s ease, border-color .16s ease, transform .12s ease !important;
    }
    html body .w88-laci-sendiri li a em {
        flex: 1 1 auto !important;
        font-style: normal !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: .9px !important;
        text-transform: uppercase !important;
        color: #eef1ff !important;
        line-height: 1.25 !important;
    }
    html body .w88-laci-sendiri li a i {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important; height: 34px !important;
        border-radius: 9px !important;
        background: rgba(228, 255, 35, .10) !important;
        border: 1px solid rgba(228, 255, 35, .24) !important;
    }
    html body .w88-laci-sendiri li a i svg {
        width: 19px !important; height: 19px !important;
        fill: none !important;
        stroke: #e4ff23 !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
    html body .w88-laci-sendiri li a > span {
        flex: 0 0 auto !important;
        font-size: 18px !important;
        line-height: 1 !important;
        color: #e4ff23 !important;
        opacity: .6 !important;
    }
    html body .w88-laci-sendiri li a:hover,
    html body .w88-laci-sendiri li a:active {
        background: linear-gradient(180deg, #eaff62 0%, #b6d400 100%) !important;
        border-color: #f4ffa0 !important;
        transform: translateY(-1px) !important;
    }
    html body .w88-laci-sendiri li a:hover em,
    html body .w88-laci-sendiri li a:active em {
        color: #150a24 !important;
    }
    html body .w88-laci-sendiri li a:hover > span,
    html body .w88-laci-sendiri li a:active > span {
        color: #150a24 !important;
        opacity: .85 !important;
    }
    html body .w88-laci-sendiri li a:hover i,
    html body .w88-laci-sendiri li a:active i {
        background: rgba(21, 10, 36, .16) !important;
        border-color: rgba(21, 10, 36, .32) !important;
    }
    html body .w88-laci-sendiri li a:hover i svg,
    html body .w88-laci-sendiri li a:active i svg {
        stroke: #150a24 !important;
    }
    /* tombol yang mewakili halaman aktif */
    html body .w88-laci-sendiri li a.nyala {
        border-color: #e4ff23 !important;
        box-shadow: inset 0 0 0 1px rgba(228, 255, 35, .22), 0 0 16px rgba(228, 255, 35, .18) !important;
    }

    /* ---------- tab laci: "MENU" (buka) & "TUTUP MENU" (tutup) ---------- */
    html body .w88-tab-laci {
        position: fixed !important;
        top: 34% !important; bottom: auto !important;
        height: 132px !important;
        width: 42px !important;
        margin: 0 !important; padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(180deg, #eaff62 0%, #c6e200 48%, #8fae00 100%) !important;
        border: 0 !important;
        border-radius: 0 12px 12px 0 !important;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .55) !important;
        cursor: pointer !important;
        z-index: 2147483001 !important;
        transform: translateX(-560px) !important;
        transition: transform .28s cubic-bezier(.22, .7, .24, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    html body .w88-tab-laci span {
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 1.8px !important;
        text-transform: uppercase !important;
        color: #150a24 !important;
    }
    /* tab BUKA: menempel di tepi kiri layar; hilang saat laci terbuka */
    html body .w88-tab-laci.buka {
        left: 0 !important;
        transform: translateX(0) !important;
        border-right: 1px solid rgba(228, 255, 35, .55) !important;
    }
    body.laci-terbuka .w88-tab-laci.buka {
        transform: translateX(-560px) !important;
    }
    /* tab TUTUP: menempel di tepi kanan panel; lebarnya diukur JS (--laci-lebar) */
    html body .w88-tab-laci.tutup {
        left: var(--laci-lebar, 296px) !important;
        border-left: 1px solid rgba(228, 255, 35, .55) !important;
    }
    body.laci-terbuka .w88-tab-laci.tutup {
        transform: translateX(0) !important;
    }

    /* halaman mana pun yang memuat bilah bawah: beri jarak supaya baris terakhir isi
       tidak tersembunyi di balik bilah (58px) — tombol bulat sudah dipensiunkan. */
    html:root body.punya-nav-bawah {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
    html:root body.punya-nav-bawah.laci-terbuka {
        overflow: hidden !important;
    }
}