/* responsive.css — tata letak dinamis: grid menyesuaikan lebar yang tersedia (bukan jumlah kolom tetap).
   Dimuat PALING AKHIR. Pola: repeat(auto-fit, minmax(min(100%, X), 1fr)) → kolom bertambah/berkurang otomatis. */

/* --- statistik di dalam hero (kaca) --- */
.pr-stats,.pb-stats,.tk-h4,.pd-kpis,.rk-hstats{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))!important}
.pd-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))!important}
.tk-hrow:not(.tk-h4){grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}

/* --- kartu KPI (putih) --- */
.ds-kpis,.py-kpis,.kn-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
@media (max-width:560px){   /* HP: baris KPI tetap bisa digeser (desain mobile) */
  .ds-kpis,.py-kpis{display:flex}
}

/* --- panel berisi beberapa blok kecil --- */
.py-meters{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.kn-duo{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.kn-cats,.ex-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ex-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.pr-dfig,.pb-mfig,.pr-pn{grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr))}
.rk-pgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pf-types{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

/* --- dua kolom utama: satu kolom bila sempit, dua bila lega --- */
.pf-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}

/* --- hero dua kolom (isi + panel samping): panel turun ke bawah bila sempit --- */
.dhero,.kn-hero,.py-hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:1180px){.dhero,.kn-hero,.py-hero{grid-template-columns:1fr}}

/* --- daftar kartu: kolom mengikuti lebar; di layar sangat lebar kartu tak jadi terlalu lebar --- */
@media (min-width:1900px){
  .pr-list{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
  .pd-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .tokogrid,.pb-grid,.rk-grid,.rk-ugrid,.py-stores{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
  .posgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (min-width:2400px){main{padding-left:48px;padding-right:48px}}

/* --- teks & angka besar ikut lebar layar --- */
.dh-val,.kn-hv,.py-hv,.tk-hv{font-size:clamp(30px,2.2vw + 14px,52px)}

/* --- tablet: grid produk/kasir pakai lebih dari 2 kolom --- */
@media (min-width:561px) and (max-width:820px){
  .pd-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .posgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}

/* --- grafik tren mengisi lebar panel (skala proporsional) --- */
.pchart svg,.kn-trend svg{width:100%;height:auto;max-height:340px}

/* pemilih bulan: teks di tengah pil (ruang kiri sama dengan ruang panah di kanan) */
.view select.monthsel{text-align:center;text-align-last:center;padding-left:36px!important;padding-right:36px!important}
.monthsel option{text-align:left}

/* pemilih bulan di hero desktop: selalu di pojok kanan atas HERO (bukan di ujung kolom kiri).
   Kolom kiri dibuat static supaya pil menempel ke hero; blob dekoratif dipindah ke lapisan belakang (isolation) agar tampilan sama. */
@media (min-width:821px){
  .dhero,.kn-hero,.py-hero,.ds-hero{position:relative;isolation:isolate}
  .dhero .dh-bg,.kn-hero .dh-bg,.py-hero .dh-bg,.ds-hero .dh-bg{z-index:-1}
  .dh-main,.py-h-main,.kn-hmain,.ds-h-main{position:static}
  .dh-month,.kn-month,.py-h-month,.ds-h-month{position:absolute;top:24px;right:28px;z-index:3;margin:0}
  .dh-side{margin-top:62px}   /* ruang agar panel samping tak tertimpa pil */
}

/* login mobile: gelombang di bawah hero lebih lebar dari layar, supaya animasi goyang tak membuka celah di tepi kanan */
@media (max-width:899px){
  .lwave-b{left:-24px;right:auto;width:calc(100% + 48px)}
}