/* =====================================================================
 *  STYLE DASAR — seluruh aturan tema, warna aksen sebagai variabel CSS
 *
 *  Dimuat BERSAMA style-warna<N>.css, yang hanya mendefinisikan variabelnya.
 *  Menggantikan style-main1..7.css: tujuh salinan 367 baris yang hanya
 *  berbeda warna. Mengubah aturan kini cukup di berkas ini, sekali.
 *
 *  Dibangun 2026-09-13 dari style-main1.css dan DIVERIFIKASI: tiap tema,
 *  setelah variabelnya diisi, menghasilkan CSS identik dengan berkas
 *  aslinya. Tidak ada perubahan tampilan.
 *
 *  NILAI CADANGAN: setiap var() membawa warna tema 3 (biru) — tema yang
 *  terpasang di situs saat berkas ini dibuat. Gunanya untuk peramban yang
 *  tidak mengenal variabel CSS (mis. Opera Mini mode hemat data, WebView
 *  Android yang sangat lama). Tanpa cadangan, tombol, kartu, dan radio
 *  terpilih menjadi TRANSPARAN di peramban itu — termasuk di checkout.
 *  Dengan cadangan, pengguna itu melihat persis situs hari ini.
 *  Bila tema aktif diganti, pengguna peramban lama tetap melihat biru:
 *  tampak berbeda, tetapi tetap terbaca dan bisa diklik.
 *
 *  JANGAN menambahkan warna aksen literal di sini. Pakai var(--aksen) dan
 *  kawan-kawannya, supaya ketujuh tema — dan mode terang nanti — ikut.
 * ===================================================================== */

/* =====================================================================
 *  TOKEN NETRAL — warna permukaan & teks tema GELAP
 *
 *  Sama untuk ketujuh tema aksen, jadi tinggal di sini, bukan di
 *  style-warnaN.css. Dipakai lewat var() di templat PHP: atribut style=""
 *  dan blok <style> tertanam, di 29 berkas etalase.
 *
 *  Nilai di bawah SAMA PERSIS dengan warna literal yang digantikannya, dan
 *  setiap var() di templat membawa nilai literal itu sebagai cadangan.
 *  Dua syarat itulah yang menjamin tidak ada perubahan tampilan.
 *
 *  LANGKAH 3 (mode terang) cukup mendefinisikan ulang token ini di bawah
 *  @media (prefers-color-scheme: light). Sebelum membalik --teks, PERIKSA
 *  hasil render: sebagian `color:#fff` berada di atas latar AKSEN (tombol,
 *  lencana), bukan latar gelap — teks itu harus TETAP putih, dan butuh
 *  pengecualian tersendiri.
 *
 *  Yang SENGAJA tidak dijadikan token: latar putih kotak logo bank/e-wallet,
 *  kotak saran pencarian (#res, .link-class), warna brand WhatsApp/Facebook/
 *  Instagram, warna status, kalkulator, dan struk cetak (page/struk*.php).
 * ===================================================================== */
:root {
  --teks:          #fff;                     /* teks di atas latar gelap        */
  --teks-utama:   #F5F5FF;                  /* teks di atas permukaan gelap    */
  --teks-redup:    #b8b8b8;                  /* teks sekunder, garis <hr>        */
  --teks-samar:    #9aa3ab;                  /* keterangan, placeholder          */
  --latar:         #1e2124;                  /* permukaan utama                  */
  --latar-dalam:   #151819;                  /* permukaan lebih gelap            */
  --latar-dalam-2: #15181a;                  /* varian 1 tingkat — dijaga persis */
  --latar-kotak:   #333333;                  /* tombol bulat, kotak gelap        */
  --garis:         #eee;                     /* garis pemisah <hr>               */
  --lapis-tipis:   rgba(255,255,255,.08);    /* lapisan putih transparan         */
  --lapis-sedang:  rgba(255,255,255,.12);
  --lapis-tebal:   rgba(255,255,255,.15);
}

/*Indicator Load*/
.progress-container{width:100%;position:fixed;top:0;left:0;z-index:9999;}.progress-bar{height:2px;background:var(--aksen, #065FB4);width:0%;}
/*Scroll Bar*/
html{scrollbar-width:thin;}html::-webkit-scrollbar{width:5px;background-color:#F5F5F5;}html::-webkit-scrollbar-thumb{background-color:var(--aksen, #065FB4);border-radius:0px;}.element{scrollbar-width:thin;}.element::-webkit-scrollbar{width:5px;background-color:#F5F5F5;}.element::-webkit-scrollbar-thumb{background-color:var(--aksen, #065FB4);border-radius:0px;}
/*Back to Top*/
.back-top{display:none;position:fixed;bottom:220px;right:23px;width:40px;height:40px;background:var(--aksen, #065FB4);cursor:pointer;overflow:hidden;font-size:22px;color:#ffffff;text-align:center;line-height:40px;border-radius:50px;z-index:9999;}.back-top:hover{opacity:1;background:#333333;}@media screen and(max-width:880px){.navbar-scrolled.back-top{opacity:0!important;}}
/*SR-Only and Custom*/
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}body,html{padding:0!important;margin:0!important;touch-action:manipulation!important;}img{border-radius:5px}img.lazyload:not([src]){visibility:hidden;}img:-moz-broken{opacity:0;}img::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;}iframe{border-radius:5px;}

.bg-custom {
  background-color: var(--latar, #1e2124);
  border-bottom: 1px;
}

.h5, h5 {
  font-size: 18px;
  line-height: 22px;
}

.strip-primary {
  background-color: var(--aksen, #065FB4);
  position: absolute;
  width: 50px;
  height: 5px;
  border-radius: 2px;
}

.row {
  margin-right: -12.5px;
  margin-left: -12.5px;
}

.game {
  justify-content: center;
  width: auto;
}

.zoom {
  transition: transform .5s; /* Animation */
}

.zoom:hover {
  transform: scale(1.1);
}

.card {
  border-radius: 10px;
  background-color: var(--aksen, #065FB4);
}

img.card {
  padding: .25rem .50rem;
  box-shadow: 0 5px 15px rgba(57, 98, 254, 0.02), 0 3px 6px rgba(117, 108, 254, 0.12);
  border-radius: 3px;
  background-color: #F5F5FF;
}

.card-game {
  margin-top: -30px;
  margin-bottom: 0;
}

.card-title {
  min-height: 30px;
  margin-top: -5px;
  font-weight: 600;
  font-size: 12px;
  color: var(--teks-utama, #F5F5FF);
}

.card-subtitle {
  margin-top: -12px;
  font-weight: 400;
  font-size: 9px;
  color: var(--teks-utama, #F5F5FF);
}

.card-topup {
  margin-top: 0px;
  border: none;
  padding: .70rem .70rem;
}

.btn-topup {
  color: #F5F5FF;
  background-color: #ffe43b;
  margin-top: 0px;
  padding: .20rem .20rem;
  border-radius: 5px;
}

.btn-topup:hover {
  color: #F5F5FF;
  background-color: var(--aksen-topup-hover, #065FB4);
}

.btn-primary {
  color: #F5F5FF;
  transition: transform .5s;
  background-color: var(--aksen, #065FB4);
  border: 1px solid var(--aksen, #065FB4);
}

.btn-primary:hover {
  color: #F5F5FF;
  background-color: var(--aksen-hover, #0D8BF2);
  border: 1px solid var(--aksen-hover, #0D8BF2);
}

.bg-footer {
  position: relative;
  background: url('../../assets/themes/footer.png') no-repeat center center var(--latar-dalam, #151819);;
  width: 100%;
  border-top: 1px;
}

.section {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: var(--latar-dalam, #151819);
}

.circle-primary {
  background-color: var(--aksen, #065FB4);
  border-radius: 50%;
  height: 35px;
  width: 35px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF!important;
}

ul.nav-tabs {
  border-bottom: 0px!important;
}

ul.nav-tabs li.nav-item a.nav-link {
  background: var(--latar, #1e2124)!important;
  border-bottom: 5px solid var(--latar, #1e2124)!important;
  border-radius: 0px!important;
  color: var(--teks-utama, #F5F5FF);
}

ul.nav-tabs li.nav-item a.nav-link.active {
  background-color: none;
  border-bottom: 5px solid var(--tab-aktif-garis, #0D8BF2)!important;
  border-radius: 0px!important;
  color: var(--tab-aktif-teks, #0D8BF2);
}

.radio-nominal {
    color: white;
    display: none;
    margin: 10px;
    cursor: pointer;
}

.radio-nominal + label {
  text-align: left;
  color: var(--teks-utama, #F5F5FF);
  display: inline-block;
  padding: 5px;
  background-color: var(--latar, #1e2124);
  border: 2px solid var(--aksen, #065FB4);
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  font-size: 12px;
  margin-bottom: 0px;
}

.radio-nominal:checked + label {
  text-align: left;
  background-image: none;
  background-color: var(--aksen, #065FB4);
  color: #F5F5FF;
  border: 2px solid var(--aksen, #065FB4);
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  font-size: 12px;
}

.radio-nominal:checked + label::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 35px;
  height: 35px;
  content: "";
  background: url('../../assets/images/verified.png') top/cover;
  text-align: center;
}

.radio-nominale {
    color: white;
    display: none;
    margin: 10px;
    cursor: pointer;
}

.radio-nominale + label {
  text-align: left;
  color: var(--teks-utama, #F5F5FF);
  display: inline-block;
  padding: 13px;
  background-color: var(--latar, #1e2124);
  border: 2px solid var(--aksen, #065FB4);
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  font-size: 12px;
}

.radio-nominale:checked + label {
  text-align: left;
  background-image: none;
  background-color: var(--aksen, #065FB4);
  color: #F5F5FF;
  border: 2px solid var(--aksen, #065FB4);
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  font-size: 12px;
}

.radio-nominale:checked + label::after {
  position: absolute;
  top: 3px;
  right: 16px;
  width: 28px;
  height: 26px;
  content: "";
  background: url('../../assets/images/verified.png') top/cover;
  text-align: center;
}

.form-control {
  border: 1px solid #F5F5FF;
  background-color: #F5F5FF;
  color: #495057 !important;
}

.form-control:focus{
  border: 1px solid #F5F5FF;
  background-color: #F5F5FF;
  color: #495057 !important;
}

::placeholder {
  color: #9c9c9c !important;
  font-size: 15px;
  opacity: .5 !important;
}

.accordion .card {
    background: rgba(174,174,174,.261);
    border: 1px solid rgba(174,174,174,.261);
}

.accordion .card .card-header {
    background: var(--latar, #1e2124);
}

.accordion .card .card-header button {
    color: #fff!important;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

.metode-bayar {
  padding-top: .30rem;
  padding-left: .50rem;
  padding-right: .30rem;
  padding-bottom: .10rem;
  box-shadow: 0 5px 15px rgba(57, 98, 254, 0.02), 0 3px 6px rgba(117, 108, 254, 0.12);
  border-radius: 3px;
  background-color: #F5F5FF;
}

.product-tile__clip-path[data-v-10b0ebbe] {
  display: flex;
padding: 0;
  padding-top: 0px;
padding-top: 0px;
margin-top: -39px;
width: 100%;
height: 50px;
position: absolute;
top: -10px;
background-color: var(--latar-dalam, #151819);;
clip-path: polygon(0 23%,6% 72%,12% 47%,18% 70%,24% 51%,32% 80%,38% 47%,44% 80%,50% 49%,56% 70%,60% 86%,66% 42%,72% 65%,78% 38%,84% 64%,90% 17%,96% 20%,100% 1%,100% calc(100% + 1px),0 calc(100% + 1px));
-webkit-clip-path: polygon(0 23%,6% 72%,12% 47%,18% 70%,24% 51%,32% 80%,38% 47%,44% 80%,50% 49%,56% 70%,60% 86%,66% 42%,72% 65%,78% 38%,84% 64%,90% 17%,96% 20%,100% 1%,100% calc(100% + 1px),0 calc(100% + 1px));
}

.product-tile__clip-paths[data-v-10b0ebbe] {
  display: flex;
  padding: 0;
  padding-top: 0px;
  margin-top: -39px;
  width: 100%;
  height: 50px;
  position: relative;
  top: -10px;
  background-color: var(--aksen, #065FB4);
  clip-path: polygon(0 23%,6% 72%,12% 47%,18% 70%,24% 51%,32% 80%,38% 47%,44% 80%,50% 49%,56% 70%,60% 86%,66% 42%,72% 65%,78% 38%,84% 64%,90% 17%,96% 20%,100% 1%,100% calc(100% + 1px),0 calc(100% + 1px));
  -webkit-clip-path: polygon(0 23%,6% 72%,12% 47%,18% 70%,24% 51%,32% 80%,38% 47%,44% 80%,50% 49%,56% 70%,60% 86%,66% 42%,72% 65%,78% 38%,84% 64%,90% 17%,96% 20%,100% 1%,100% calc(100% + 1px),0 calc(100% + 1px));
}

/* Sidebar */

.sticky-left {
    position: fixed;
    top: 180px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: #2e3238;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 100px;
}

.sidenav ul.flex-column li.nav-item a.nav-link {
  color: var(--teks-utama, #F5F5FF);
  font-size: 16px;
  font-weight: 500;
  -webkit-transition: line-height 0.3s ease-in-out;
  transition: line-height 0.3s ease-in-out;
}

.sidenav ul.flex-column li.nav-item a.nav-link:hover {
  color: #eee!important;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 36px;
  margin-left: 50px;
  color: var(--teks-utama, #F5F5FF);
}

@media screen and (max-width: 778px){
    .navbar-collapse {
        background:var(--latar, #1e2124);
    }
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 14px;}
}


/* =====================================================================
 *  MODE TERANG — aktif HANYA bila <html> berkelas "tema-terang"
 *
 *  Bawaan situs tetap GELAP. Kelas dipasang oleh skrip kecil di <head>
 *  (dari pilihan tersimpan di localStorage) dan oleh tombol ganti tema di
 *  partial/top_menu.php. Tanpa kelas itu, SELURUH blok ini tidak berlaku,
 *  sehingga tampilan gelap terbukti tidak berubah.
 *
 *  Aksen per tema TIDAK di sini, melainkan di style-warnaN.css masing-
 *  masing: warna aksen yang dirancang untuk latar gelap tidak terbaca di
 *  atas putih (kuning #FDD017 hanya 1,48:1), jadi tiap tema punya versi
 *  terangnya sendiri, dihitung dengan rona yang sama.
 *
 *  Diverifikasi 2026-09-13 dengan audit kontras WCAG pada beranda,
 *  /games/freefire, /mobile/telkomsel, /emoney/dana, /cek-pesanan, /login:
 *  0 teks tak terbaca akibat mode terang, 0 permukaan gelap tersisa.
 *
 *  CATATAN PENGUJIAN: audit WAJIB mematikan transisi CSS lebih dulu. Di
 *  peramban tersembunyi garis waktu animasi berhenti, dan transisi warna
 *  pada .btn (Bootstrap: color .15s) membeku di nilai awalnya — transisi
 *  mengalahkan bahkan !important, sehingga hasil audit tertipu ke dua arah.
 * ===================================================================== */

/* Hijau "sukses" — Bootstrap #28a745 dengan teks putih hanya kontras 2,89
   (batas terbaca 4,5). Rona sama, kecerahan diturunkan: dasar 4,62,
   hover 6,09, aktif 7,17. Berlaku di mode gelap dan terang. */
.btn-success,
.btn-success.disabled, .btn-success:disabled {
  background-color: #1f8035;
  border-color: #1f8035;
}
.btn-success:hover, .btn-success:focus, .btn-success.focus {
  background-color: #1a6b2c;
  border-color: #1a6b2c;
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  background-color: #175f27;
  border-color: #175f27;
}
.badge-success { background-color: #1f8035; }
a.badge-success:hover, a.badge-success:focus { background-color: #1a6b2c; }

/* Tulisan contoh (placeholder) di kotak isian — #9c9c9c pada opacity .5
   di atas latar #f5f5ff hanya 1,5:1. Kotak isian selalu berlatar terang
   di kedua mode, jadi satu warna abu gelap cukup (5,3:1). Dibatasi ke
   .form-control agar kolom pencarian bergaya sendiri tidak ikut. */
.form-control::placeholder { color: #5f6670 !important; opacity: 1 !important; }

/* Bilah .alert-info: teks putih di atas biru langit #14b6ff hanya 2,3:1 */
.alert-info { color: #05293a; }
.alert-info .alert-link { color: #05293a; }

/* .btn-secondary: teks putih di atas #6c757d 4,3:1 — sedikit digelapkan */
.btn-secondary { background-color: #5a6268; border-color: #5a6268; }
.btn-secondary:hover, .btn-secondary:focus { background-color: #484e53; border-color: #484e53; }

/* .btn-outline-secondary cokelat #94614f di atas latar gelap 3,5:1 —
   diterangkan di mode gelap; mode terang memakai cokelat aslinya (5,2:1) */
.btn-outline-secondary { color: #c4907c; border-color: #c4907c; }
.btn-outline-secondary:hover { color: #f5f5ff; background-color: #94614f; border-color: #94614f; }

/* --- token netral (lihat :root di atas untuk nilai gelapnya) --- */
html.tema-terang {
  --teks:          #1a1d21;
  --teks-utama:    #1a1d21;
  --teks-redup:    #5f6670;
  --teks-samar:    #5b636c;
  --latar:         #ffffff;
  --latar-dalam:   #f7f8fa;
  --latar-dalam-2: #f7f8fa;
  --latar-kotak:   #e5e7eb;
  --garis:         #dee2e6;
  --lapis-tipis:   rgba(0,0,0,.04);
  --lapis-sedang:  rgba(0,0,0,.06);
  --lapis-tebal:   rgba(0,0,0,.08);
}

/* --- penimpa untuk CSS vendor (app-style.css, bootstrap.min.css) ---
   Berkas vendor sengaja tidak disunting: perubahan di sana hilang saat
   vendor merilis pembaruan. */
html.tema-terang body { background-color: #eef0f3; color: #1a1d21; }
html.tema-terang h1, html.tema-terang h2, html.tema-terang h3,
html.tema-terang h4, html.tema-terang h5, html.tema-terang h6,
html.tema-terang .h1, html.tema-terang .h2, html.tema-terang .h3,
html.tema-terang .h4, html.tema-terang .h5, html.tema-terang .h6 { color: #1a1d21; }

/* tautan biasa jadi gelap — TIDAK termasuk .btn, karena tombol berlatar
   aksen harus tetap bertuliskan putih */
html.tema-terang a:not(.btn) { color: #1a1d21; }
html.tema-terang .btn-primary, html.tema-terang .btn-primary:hover { color: #ffffff; }

/* .text-white di atas permukaan yang kini terang — kecuali tombol & lencana */
html.tema-terang .text-white:not(.btn):not(.badge):not(.circle-primary) { color: #1a1d21 !important; }
html.tema-terang .navbar .text-white:not(.btn),
html.tema-terang .bg-custom .text-white:not(.btn) { color: #1a1d21 !important; }

/* tab kategori: warnanya dikunci !important di aturan tab di atas */
html.tema-terang ul.nav-tabs li.nav-item a.nav-link { color: #374151 !important; }
html.tema-terang ul.nav-tabs li.nav-item a.nav-link.active { color: var(--tab-aktif-teks) !important; }

/* utilitas Bootstrap yang dirancang untuk latar gelap */
html.tema-terang .text-primary { color: var(--aksen) !important; }
html.tema-terang .text-success { color: #166534 !important; }

/* menu samping ponsel — latarnya #2e3238 belum bertoken */
html.tema-terang .sidenav { background: #ffffff; }
html.tema-terang .sidenav ul.flex-column li.nav-item a.nav-link:hover { color: var(--aksen) !important; }

/* akordeon metode bayar: tombolnya dikunci #fff !important */
html.tema-terang .accordion .card .card-header button,
html.tema-terang .card-header .btn-link { color: #1a1d21 !important; }

/* jawaban FAQ beranda (gaya inline #cfd2d6) */
html.tema-terang details > div { color: #4b5563 !important; }

/* peringatan jam tutup produk: oranye #ff9f43 dirancang untuk latar gelap.
   Flag "i" karena atribut style bisa ditulis huruf besar. */
html.tema-terang [style*="#ff9f43" i] { color: #b45309 !important; }

/* --- tombol ganti tema di navbar --- */
.tombol-tema .ikon-ke-gelap { display: none; }
html.tema-terang .tombol-tema .ikon-ke-terang { display: none; }
html.tema-terang .tombol-tema .ikon-ke-gelap { display: inline-block; }

/* Kalkulator: label <font color=white> dan angka slider biru muda yang tak terbaca di atas putih */
html.tema-terang font[color="white" i] { color: #1a1d21; }
html.tema-terang [style*="#30cdf8" i] { color: #0369a1 !important; }

/* Kotak isian di mode terang: latar #f5f5ff dan garis sewarna di atas
   kartu #f7f8fa/putih praktis tak terlihat (1,02:1). Latar putih dengan
   garis abu 3,3:1 (batas minimum komponen antarmuka 3:1). */
html.tema-terang .form-control { background-color: #ffffff; border-color: #868e96; }
html.tema-terang .form-control:focus { border-color: var(--aksen); box-shadow: 0 0 0 1px var(--aksen); }
html.tema-terang .form-control:disabled,
html.tema-terang .form-control[readonly] { background-color: #e9ecef; border-color: #adb5bd; color: #495057 !important; }
html.tema-terang .text-warning { color: #b45309 !important; }
html.tema-terang .btn-outline-secondary { color: #94614f; border-color: #94614f; }
html.tema-terang .btn-outline-secondary:hover { color: #ffffff; }