[hidden], .game-item[hidden] { display: none !important; }
.category-filter-link { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
.catalog-data-time { font-size: 12px; margin: 8px 12px 12px; color: #ddd; }
.catalog-data-time:empty { display: none; }
.rtp-provider-form { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.rtp-provider-form select { max-width: 320px; }
.rtp-provider-form button { border: 0; padding: 8px 16px; }
.local-rtp-page { margin-top: 20px; }
.form-feedback { color: inherit; border: 1px solid currentColor; border-radius: 4px; padding: 10px; }
.catalog-empty { padding: 30px 10px; text-align: center; }
/* Outgoing cards share the original grid styles while the live grid settles. */
[data-catalog-motion-root] { position: relative; }
[data-catalog-motion-root] > .catalog-transition-layer.game-list {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
[data-catalog-motion-root] > .catalog-transition-layer.game-list > .game-item {
  position: absolute;
  margin: 0;
  pointer-events: none;
}
[data-variant="mobile"] .rtp-provider-form { flex-wrap: wrap; }
[data-variant="mobile"] .rtp-provider-form select { flex: 1; width: auto; max-width: none; }
[data-variant="mobile"] .local-rtp-page { margin-top: 0; }
/* Formulir Provider halaman RTP desktop (D.295): senada dengan panel di bawahnya --
   jarak 20px seperti .filter-section, kotak pilihan = kotak "Cari Permainan",
   tombol = tombol kategori aktif. Variabel dari tema desktop. */
[data-variant="desktop"] .rtp-provider-form { padding: 0 20px; }
[data-variant="desktop"] .rtp-provider-form label { margin: 0; color: var(--arcade-games-cntr-category-filter-link-color); }
[data-variant="desktop"] .rtp-provider-form select {
  border: 0;
  background-color: var(--arcade-games-cntr-filter-section-input-text-bg);
  color: var(--arcade-games-cntr-filter-section-input-text-color);
}
[data-variant="desktop"] .rtp-provider-form button {
  background: var(--arcade-games-cntr-category-filter-link-active-bg);
  color: var(--arcade-games-cntr-category-filter-link-color);
}
.game-item [role="button"] { cursor: pointer; }
:focus-visible { outline: 2px solid #eabc54; outline-offset: 3px; }
/* Tombol melayang kiri bawah (daftar RTP / Telegram / Unduh APK).
   Aturan asli situs acuan: bottom 100px di mobile, 50px di desktop, z-index 2.

   MOBILE mengikuti aslinya, jadi TIDAK ada aturan di sini -- ruangnya cukup,
   tombol Telegram ada di bottom ~44px sehingga keduanya tidak bertabrakan.

   DESKTOP sengaja dinaikkan ke 150px. Di situs asli kedua tombol itu memang
   bertumpuk (FAB 50px lawan tombol Telegram 44px); pemilik template memilih
   supaya keduanya tetap bisa ditekan di sini. Perbedaan yang disengaja. */
[data-variant="desktop"] .floating-action-button { bottom: 150px; z-index: 30; }
.category-filter { scrollbar-width: none; }
.category-filter::-webkit-scrollbar { display: none; }
[data-variant="mobile"] .rtp-provider-form { padding: 0 10px; }
#progressive_jackpot { white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-progressive-jackpot .jackpot-container,
.home-progressive-jackpot .jackpot-inner-container,
.home-progressive-jackpot .jackpot-border-container { min-width: 0; }
#progressive_jackpot[data-information-status="stale"]::after,
#progressive_jackpot[data-information-status="error"]::after {
  content: " •"; color: #eabc54; font-size: 10px; vertical-align: middle;
}
[data-nex4d] .information-note { font-size: 10px; text-align: center; padding: 2px 4px; }
[data-nex4d] .lottery-result img { object-fit: contain; }
[data-winners-ticker] > ul { margin: 0; padding: 0; list-style: none; }
[data-winners-ticker] > ul > li,
[data-winners-ticker] > ul > li > * { margin: 0; }

/* Ikon fitur referral.
   situs acuan memakai SVG yang ukuran alaminya sudah kecil, jadi stylesheet
   aslinya tidak pernah membatasi ukuran <img>. Berkas PNG di sini berukuran
   128x128, sehingga meluber keluar kotak 30x30 miliknya. Dibatasi di sini
   agar stylesheet salinan situs acuan tidak perlu diubah. */
.referral-features-item .feature-icon img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

/* Tombol "Tandai sudah dibaca" pada daftar pesan.
   situs acuan tidak punya tombol ini (kotak masuknya kosong, jadi tidak ada
   contoh markup yang bisa disalin), sementara template kita memang mencatat
   status sudah/belum dibaca. Warnanya mengambil variabel tema di :root,
   sehingga ikut berubah bila temanya diganti. */
.message-item button[type="submit"] {
    width: auto;
    margin-top: 4px;
    padding: 7px 18px;
    border: 0;
    border-radius: 25px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--daily-reward-cntr-std-secondary-btn-color, #fff);
    background: var(--daily-reward-cntr-std-secondary-btn-bg,
                linear-gradient(to bottom, #ff00b2 0%, #be0085 100%));
}

.message-item button[type="submit"]:hover {
    background: var(--daily-reward-cntr-std-secondary-btn-hover-bg,
                linear-gradient(to bottom, #be0085 0%, #ff00b2 100%));
}

/* Tombol "Tetapkan sebagai Default" di halaman detail rekening dibungkus
   <form> supaya bekerja tanpa JavaScript. Pembungkus itu tidak boleh ikut
   mengubah tata letak: di situs acuan tombolnya adalah anak langsung wadah flex,
   jadi melebar penuh. display:contents membuat pembungkusnya "tembus pandang". */
.payment-account-detail-container > form { display: contents; }

/* Rekening Belum Terverifikasi belum bisa dijadikan Default (D.336): tombolnya
   mati dan abu-abu seperti tombol Default yang sudah aktif (CSS situs acuan hanya
   mengenal [data-is-default="true"]), lalu satu baris alasannya. Wadahnya flex
   kolom ber-gap 24px (desktop) / 16px (mobile), jadi alasannya ditarik mendekat. */
.set-as-default-button[data-is-default="false"]:disabled {
    cursor: not-allowed;
    color: var(--set-as-default-btn-default-true-color, #555);
    border-color: var(--set-as-default-btn-default-true-border, #555);
}
.payment-account-detail-container .set-as-default-note {
    margin-top: -14px;
    font-size: 12px;
    text-align: center;
    color: #777;
}
body[data-variant="mobile"] .payment-account-detail-container .set-as-default-note { margin-top: -8px; }

/* Kartu pada popup "Transaksi telah Diproses".
   Kelas .carousel-item bawaan Bootstrap punya display:none, float:left, dan
   margin-right:-100% — di situs acuan semua itu dinetralkan pustaka Slick lewat
   .slick-list/.slick-track. Template ini tidak memuat Slick, jadi dinetralkan
   di sini: tanpa ini kartunya tidak terlihat DAN titik penunjuknya terlempar
   ke pojok karena mengambang di samping float. Yang disembunyikan cukup
   ditandai atribut hidden oleh app.js. */
.resolved-transactions-carousel .carousel-item:not([hidden]) {
    display: block;
    float: none;
    margin-right: 0;
}

/* ------------------------------------------------------------------
   Panel "Akun Tujuan" pada halaman deposit versi MOBILE.

   Satu markup dipakai untuk semua metode, jadi nama dan nomor rekening
   disediakan dua salinan: satu di baris atas, satu di blok rincian. Di situs
   asli, penentuan mana yang tampil dikerjakan bundel JavaScript bawaannya.
   Halaman member di template ini tidak memuat bundel itu, jadi aturannya
   ditulis di sini. Hasilnya cocok dengan yang diukur langsung di situs
   acuan, halaman /mobile/deposit/BANK dan /VA:

     - salinan nama & nomor di blok rincian tidak pernah tampil
     - logo bank tampil di baris bawah (#bank_info_logo_footer), bukan
       di baris atas
     - untuk akun prioritas ("Rekomendasi"), baris atas kosong sama sekali --
       yang tersisa hanya lencana, biaya admin, dan logo

   Dibatasi ke body[data-variant="mobile"] supaya versi desktop tidak ikut
   berubah. */
body[data-variant="mobile"] .bank-info [data-bank-info="header"] > #bank_info_logo,
body[data-variant="mobile"] .bank-info [data-bank-info="header"] > #bank_info_account_name,
body[data-variant="mobile"] .bank-info [data-bank-info="details"] > #bank_info_account_number_container,
body[data-variant="mobile"] .bank-info[data-high-priority="true"] #bank_info_account_number_header_container {
    display: none;
}

/* Panel deposit versi DESKTOP kadang mencetak nomor tujuan DUA KALI: sekali di
   baris atas (#bank_info_account_number_header_container) dan sekali lagi di
   bagian detail (#bank_info_account_number_container). Yang di baris atas
   disembunyikan atas permintaan pemilik, berikut tombol salin di dalamnya.

   Syaratnya PENTING: hanya saat nomornya benar-benar ganda. CSS bawaan
   (Content/Wallet/normad-alpha-desktop-deposit-css.css) menyembunyikan h1 & h2
   di [data-bank-info="details"] ketika .bank-info[data-high-priority="true"].
   Jadi pada bank prioritas -- QR, VA, dan E-Money -- baris atas adalah
   SATU-SATUNYA tempat nomor tampil, dan menyembunyikannya membuat nomornya
   hilang sama sekali. Karena itu aturan ini dibatasi ke bank non-prioritas
   (Bank dan Pulsa), yang memang menampilkannya dua kali.

   Markupnya SENGAJA tetap dicetak, bukan dihapus: assets/app.js masih
   memperbarui isinya saat bank tujuan diganti, dan aturan ini cukup dibuang
   kalau suatu saat mau dimunculkan lagi.

   Versi mobile tidak perlu aturan serupa -- di sana nomornya tidak pernah
   tampil dua kali. */
body[data-variant="desktop"] .bank-info:not([data-high-priority="true"]) #bank_info_account_number_header_container {
    display: none;
}

/* Sisi sebaliknya. Pada bank PRIORITAS (QR, VA, E-Money) nomornya justru hanya
   ada di baris atas, sehingga wadah nomor di bagian detail tinggal menyisakan
   tombol salin yang berdiri sendiri tanpa nomor apa pun di sebelahnya.
   Wadah itu yang disembunyikan, supaya tiap metode berakhir dengan tepat satu
   nomor dan satu tombol salin. */
body[data-variant="desktop"] .bank-info[data-high-priority="true"] [data-bank-info="details"] .bank-account-number-container {
    display: none;
}

/* Label "Belum Terverifikasi" pada kartu Detail Perbankan (Akun Saya, D.223)
   dan menu BANK (daftar & detail rekening, D.241).
   situs acuan tidak punya label ini; bentuknya meniru pil status di tabel Status
   Deposit / Penarikan ([data-ticket-status] di Content/Profile) dan warnanya
   kuning status FAI -- padanan "emas" yang dipakai panel untuk rekening Belum
   Terverifikasi. Variabelnya hanya ada di tema desktop; versi mobile memakai
   warna tetap yang sama (#ffb302 / #fff). .bank-name menulis huruf besar,
   label ini tidak. */
.bank-info-block .bank-verification-label,
.payment-account-title-container .bank-verification-label,
.payment-account-detail-value .bank-verification-label {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--last-transaction-table-status-color, #fff);
    background-color: var(--last-transaction-table-status-fai-bg, #ffb302);
}

/* Kotak "Pilih Bonus" halaman Deposit (D.235, permintaan user 2026-10-03) --
   desktop dan mobile. Latar = --warna-utama (#ff00b2), supaya ikut bila warna
   tema diganti di assets/warna-tema.css. CSS bawaan template tidak diubah;
   aturan di sini menimpanya karena dimuat sesudahnya dengan kekuatan sama. */
.bonus-selection-container {
    height: 40px;
    background: var(--warna-utama, #ff00b2);
    color: #ffffff;
}
/* Panah ">" putih (#ffffff). Berkasnya SVG berwarna, jadi diwarnai lewat
   filter -- tema bawaan memakai filter pink yang hilang di latar pink. */
.bonus-selection-container .bonus-action > img {
    filter: brightness(0) invert(1);
}
.bonus-selection-container .bonus-action .cancel-bonus-button {
    background-color: #ffffff;
    color: #ff00db;
}
/* Sesudah bonus dipilih, isinya dua baris -- nama bonus dan "Bonus: IDR ..."
   -- setinggi 43px (desktop) / 46px (mobile), tidak muat di 40px. Tingginya
   mengikuti isi, dengan jarak atas-bawah 5px. */
.bonus-selection-container[data-selected="true"] {
    height: auto;
    min-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Kartu Hadiah Loyalitas (D.247): gambar produk yang punya versi .webp
   dibungkus <picture> (webp, png cadangan). Aturan bawaan menata
   <img class="item-img"> sebagai anak langsung .item-thumbnail (flex di
   desktop); display:contents membuat pembungkusnya tidak menjadi kotak,
   jadi tata letaknya sama dengan <img> polos. */
/* Detail Hadiah (D.251): Syarat & Ketentuan promo Saldo Bonus (bernomor) dan,
   D.253, daftar bonus yang masih berjalan (berpoin). */
.standard-form-note .loyalty-syarat {
  margin: 4px 0 0;
  padding-left: 18px;
}
.standard-form-note .loyalty-syarat li {
  margin-bottom: 2px;
}
/* Katalog Penukaran (D.256, #product_list_container.grid): kartu Saldo Bonus di grid
   yang menyesuaikan lebar isi. CSS template memberi kartu lebar tetap 345px dalam 2
   kolom (2 x 345 + jarak 14 = 704px) — lebih lebar dari isi halaman (670px), kolom
   kanan terpotong dan muncul geser samping. Halaman Hadiah (etalase geser) & Detail
   Hadiah tidak terkena: keduanya tidak memakai #product_list_container.grid. Di
   layar yang lebih sempit dari satu kolom, wadahnya tetap bisa digeser (bawaan). */
#product_list_container.grid .other-product-container .item-group {
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Kartu mengikuti lebar kolom (±328px, bukan 345px); hanya kolom teks yang boleh
   menyempit — tanpa min-width 0, lebar minimum isinya melebarkan kartu. Kolom
   gambar sengaja tidak: di template mobile ia tidak melebar sendiri (flex-grow 0),
   jadi dengan min-width 0 ia menyusut jadi 2px dan gambar 130px menutupi nama, LP
   & Tukar (D.256b). Di mobile .grid template sudah satu kolom penuh. */
#product_list_container.grid .other-product-container .item-group .item {
  width: 100%;
  min-width: 0;
}
#product_list_container.grid .other-product-container .item-group .item-detail-contaner {
  min-width: 0;
}

/* CSS template menghapus penanda ul; daftar bonus berjalan tetap berpoin. */
.standard-form-note ul.loyalty-syarat {
  list-style: disc;
}

.loyalty-reward-container .item-thumbnail > picture.item-img-picture {
    display: contents;
}

/* Hasil Lucky Draw: label "Pemenang" berwarna #ff00b2 (D.258, keputusan user
   2026-10-05). Hanya label ini — .lp-label lain (lencana "LP" di header,
   riwayat, dll.) tetap oranye template (#ffa200). */
.loyalty-history-list .point-item .lp-label[data-label="pemenang"] {
  background-color: #ff00b2;
  color: #fff;
}

/* Kisi Lucky Draw desktop (D.259, keputusan user 2026-10-05): CSS template
   memberi 3 kolom berlebar tetap 225px (3 x 225 + 2 x 16 = 707px) — lebih lebar
   dari isi halaman (670px), kolom kanan terpotong 37px begitu kartunya lebih
   dari dua (Lihat Semua & Penukaran). Kolomnya kini membagi lebar isi (~213px).
   Khusus desktop: di mobile template sudah 2 kolom penuh (auto auto). */
body[data-variant="desktop"] .loyalty-reward-container .grid .lucky-draw-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-variant="desktop"] .loyalty-reward-container .grid .lucky-draw-container .item {
  width: 100%;
}

/* Judul di kotak halaman detail pengumuman (D.275, keputusan user 2026-10-06):
   lebih besar & tebal di semua detail pengumuman, desktop & mobile. CSS
   situs acuan aslinya tebal normal — 14px di desktop, 16px di mobile. Kartu daftar
   & popup lonceng tidak terkena (bukan di dalam .replied-message). */
.replied-message[data-message-type="announcement"] .notification-title {
  font-size: 16px;
  font-weight: 700;
}
body[data-variant="mobile"] .replied-message[data-message-type="announcement"] .notification-title {
  font-size: 18px;
}
/* Pop Up website jenis Gambar (D.296): tanpa ikon & judul -- gambar selebar kotak popup. */
.popup-modal.popup-gambar .modal-title { display: none; }
.popup-modal.popup-gambar .modal-body img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Slider Pop Up (D.346): beberapa popup dalam satu popup. Panah dan titiknya meniru
   karosel popup "Transaksi telah Diproses" -- nilai dan variabel warna tema yang
   sama (desktop & mobile), hanya tanpa induk .resolved-transaction-popup (induk itu
   mengganti latar popup lewat :has()). Titik ditulis lengkap di sini: aturan dasar
   titik CSS situs hanya ada di versi desktop. */
.popup-situs-karosel {
    --chevron-left-src: url(https://pub-a213d9dbe1564d9090bdd2d887f6f204.r2.dev/Images/icons/chevron-left.svg);
    --chevron-right-src: url(https://pub-a213d9dbe1564d9090bdd2d887f6f204.r2.dev/Images/icons/chevron-right.svg);
    position: relative;
}
.popup-situs-karosel .slick-prev,
.popup-situs-karosel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 42px;
    height: 42px;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: var(--resolved-transaction-carousel-navigation-bg);
    border: solid 1px var(--resolved-transaction-carousel-navigation-border-color);
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
}
.popup-situs-karosel .slick-prev { left: -16px; }
.popup-situs-karosel .slick-next { right: -16px; }
.popup-situs-karosel .slick-prev:before,
.popup-situs-karosel .slick-next:before {
    content: " ";
    display: block;
    width: auto;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--resolved-transaction-carousel-navigation-arrow-filter);
}
.popup-situs-karosel .slick-prev:before { background-image: var(--chevron-left-src); }
.popup-situs-karosel .slick-next:before { background-image: var(--chevron-right-src); }
/* Seperti titik popup transaksi: di bawah isi, bukan melayang di atasnya
   (Bootstrap memasang position:absolute di dasar karosel). */
.popup-situs-karosel .carousel-indicators {
    position: initial;
    margin: 16px auto 0;
    padding: 0;
    list-style: none;
}
.popup-situs-karosel .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px 8px 1px 1px;
    overflow: hidden;
    text-indent: -999px;
    background-color: var(--bank-info-cntr-carousel-indicators-li-bg, #fff);
    border: 1px solid var(--bank-info-cntr-carousel-indicators-li-bg, #fff);
    border-radius: 100px;
    cursor: pointer;
}
/* Mobile menamai warnanya -li-active-bg, desktop -li-hover-bg. */
.popup-situs-karosel .carousel-indicators li.active {
    background-color: var(--bank-info-cntr-carousel-indicators-li-active-bg, var(--bank-info-cntr-carousel-indicators-li-hover-bg, #ff00b2));
    border-color: var(--bank-info-cntr-carousel-indicators-li-active-bg, var(--bank-info-cntr-carousel-indicators-li-hover-bg, #ff00b2));
}
.popup-situs-karosel .carousel-indicators li::marker { content: none; }
/* Lobi Slot dari katalog panel (D.387): provider tanpa gambar menu = ubin nama (data-logo-teks), setinggi ubin bergambar. */
.provider-slide .slide-item[data-logo-teks] > a:not(.game-info) { height: 100%; }
.top-menu .game-list > li > a .foreground[data-logo-teks] {
    inset: 18% 0 0; display: flex; align-items: center; justify-content: center; padding: 0 20px; text-align: center; font-size: 20px;
}
#popular_providers a[data-logo-teks] { min-width: 136px; height: 49px; line-height: 45px; text-align: center; white-space: nowrap; }
.main-menu-container .game-list li[data-logo-teks] > a:not(.game-info) {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; height: auto; padding: 8px; text-align: center;
    font-size: 16px; color: var(--warna-utama, #ff00b2); background: var(--site-menu-li-a-bg, #020f32); border: 1px solid currentColor; border-radius: 0 0 4px 4px;
}
/* Banner game katalog panel (D.387): gambar aggregator potret (600x800) di kartu kotak lama -- dipotong rata tengah,
   tidak ditarik gepeng. Gambar kotak tidak berubah. */
.game-item[data-panel] img, .popular-game-list .game-item img, .popular-game-title-container .game-item img { object-fit: cover; }
/* Keamanan 2FA (D.388): QR atur 2FA dan daftar kode cadangan -- halaman baru (situs acuan tidak punya 2FA).
   Warna mengikuti kotak isian template (var --warna-utama), bukan warna baru. */
.dua-faktor-qr { margin: 12px 0 16px; text-align: center; }
.dua-faktor-qr img { display: inline-block; width: 220px; max-width: 100%; height: auto; padding: 8px; background: #fff; border-radius: 6px; }
.dua-faktor-qr code { font-size: 15px; letter-spacing: 1px; word-break: break-all; color: inherit; }
.dua-faktor-kode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; margin: 8px 0 16px; padding: 0; list-style: none; }
.dua-faktor-kode li { padding: 6px 10px; font-family: monospace; font-size: 15px; text-align: center; border: 1px solid var(--warna-utama, #ff00b2); border-radius: 4px; }
/* SALIN / CETAK (review D.388 P8b): data-disalin dipasang penyalin umum app.js selama 1,5 detik. */
.dua-faktor-tombol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dua-faktor-tombol [data-disalin]::after { content: " \2713"; }
/* Tombol CETAK: hanya kotak kode cadangan yang tercetak, hitam di atas putih. */
@media print {
    .cetak-kode-cadangan body * { visibility: hidden; }
    .cetak-kode-cadangan .dua-faktor-cadangan,
    .cetak-kode-cadangan .dua-faktor-cadangan * { visibility: visible; color: #000 !important; }
    /* Kotak Catatan berlatar gelap: tanpa latar supaya tulisan hitamnya terbaca bila "grafik latar" dicetak. */
    .cetak-kode-cadangan .dua-faktor-cadangan * { background: transparent !important; }
    .cetak-kode-cadangan .dua-faktor-cadangan { position: absolute; top: 0; left: 0; width: 100%; padding: 16px; background: #fff; }
    .cetak-kode-cadangan .dua-faktor-kode li { border-color: #000; }
    .cetak-kode-cadangan .dua-faktor-tombol { display: none; }
}