/* =========================================================================
   Tiket #677 (26 Agt 2026) - goldenkoi.store
   Lebar konten mengikuti lebar layar di rentang tablet / layar sedang.

   Bawaan Bootstrap: .container mentok 540px (576-767px) dan 720px (768-991px).
   iPad mini 7 portrait = viewport 744px -> kena tingkat 540px, sisa ruang
   kosong kiri-kanan ~200px. Di sini container dibuat mengisi penuh sampai
   1199.98px, lalu jumlah kolom kartu disesuaikan biar tidak melar.
   ========================================================================= */

@media (min-width: 576px) and (max-width: 1199.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Footer: kolom kanan (banner aplikasi, lebar tetap 400px) bikin halaman
   bisa digeser ke samping di 769-991px. Dibungkus biar turun ke bawah.
   Prefix "body" dipakai karena aturan footer aslinya ditulis inline di layout,
   yang posisinya lebih belakang dari file ini. */
@media (min-width: 769px) and (max-width: 991.98px) {
  body .kiosfooter {
    padding-left: 24px;
    padding-right: 24px;
  }

  body .kiosfooter .container {
    flex-wrap: wrap;
    gap: 32px;
  }

  body .kiosfooter-right {
    flex: 1 1 100%;
  }

  body .kiosfooter .kiosapp-banner {
    max-width: 100%;
  }
}

/* --- tablet kecil (576-767px, termasuk iPad mini portrait) --------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Populer Saat Ini: 2 -> 3 kolom */
  .containerPopuler .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  /* Daftar produk/game di halaman depan: 2 -> 3 kolom */
  #data_games .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  /* Pilihan nominal di halaman game: 2 -> 3 kolom */
  #categoryTabContent .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 33.3333%;
  }
}

/* --- tablet besar (768-991px) ------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Daftar produk/game: col-md-6 (2 kolom) terlalu lebar saat container penuh.
     Dibikin 3 kolom biar sejajar dengan grid "Populer Saat Ini" dan nama game
     tidak kepotong. */
  #data_games .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 33.3333%;
  }
}

/* =========================================================================
   Tiket #687 (26 Agt 2026) - menu akun kepotong di layar HP.

   .hisTabs = 8 tombol (Isi Saldo, Upgrade Level, Transaksi, Mutasi Saldo,
   Point, Affiliate, Setting, Keluar). Di HP lebar totalnya ~670px, sementara
   ruang di dalam .cards-saldo cuma ~290px. Aturan lama cuma flex +
   justify-content:center TANPA overflow, jadi kelebihannya terbagi rata ke
   KIRI dan KANAN; bagian kiri (Isi Saldo & Upgrade Level) tidak pernah bisa
   dijangkau karena halaman hanya bisa digeser ke arah kanan.

   Di halaman game pola yang benar sudah dipakai (.navTabs: nowrap +
   overflow-x), di sini tinggal disamakan: barisnya jadi bisa digeser sendiri
   dan mulai dari tombol pertama. "safe center" bikin tetap ketengah kalau
   memang muat; browser lama mengabaikan baris itu dan pakai flex-start.
   ========================================================================= */
@media (max-width: 767.98px) {
  body .hisTabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* strip digeser mepet tepi kartu biar ruang gesernya lega */
    margin-left: -26px;
    margin-right: -26px;
    padding: 2px 26px;
  }

  body .hisTabs::-webkit-scrollbar {
    display: none;
  }

  body .hisTabs > .nav-item,
  body .hisTabs .btnHisTabs {
    flex: 0 0 auto;
  }
}