/* ==========================================================================
   Koperasi Mart — tema korporat hijau & emas (koperasi konsumen syariah)
   ========================================================================== */
:root{
  --hijau-900:#063A25;
  --hijau-800:#08472E;
  --hijau-700:#0B5D3B;
  --hijau-600:#0E6E45;
  --hijau-500:#12855A;
  --hijau-100:#E4F1E9;
  --hijau-50:#F1F8F4;
  --emas-700:#9C7A1E;
  --emas-600:#B8912F;
  --emas-500:#C9A24A;
  --emas-300:#E4CE94;
  --emas-100:#F7EFD8;
  --krem:#F5F7F3;
  --putih:#FFFFFF;
  --ink:#152A20;
  --muted:#5E7268;
  --line:#E1E8E2;
  --merah:#B3261E;
  --biru:#1B5E8C;
  --kuning:#9A6B00;
  --radius:16px;
  --shadow:0 4px 18px rgba(6,58,37,.07);
  --shadow-lg:0 14px 40px rgba(6,58,37,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Ukuran bawaan ikon SVG inline: tanpa ini SVG memakai ukuran bawaan peramban (300x150)
   sehingga tombol ber-ikon membengkak (pernah membuat tombol "Keranjang" setinggi 104px). */
svg{width:1.12em;height:1.12em;flex:0 0 auto}
.btn svg{width:17px;height:17px}
.btn-sm svg{width:15px;height:15px}
.btn-lg svg{width:19px;height:19px}
.chip svg{width:15px;height:15px}
.kartu-mini svg{width:18px;height:18px}
.judul-bagian svg{width:18px;height:18px}
body{
  background:var(--krem);
  color:var(--ink);
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--hijau-700);text-decoration:none}
a:hover{color:var(--emas-600)}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25;font-weight:700;letter-spacing:-.2px}
h1{font-size:1.7rem}h2{font-size:1.3rem}h3{font-size:1.08rem}
p{margin:0 0 .8rem}
.wadah{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}
/* Beranda: bagian disusun mengikuti urutan yang diatur admin (order dari server) */
.wadah-bagian{display:flex;flex-direction:column}
.wadah-bagian > .bagian{min-width:0}
/* pembungkus kategori+toko dilebur agar tiap bagian dapat diatur urutannya sendiri */
.wadah-bagian > .hp-blok-tambahan{display:contents}
.wadah-sempit{max-width:820px}
.baris{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.baris-antara{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.kanan{margin-left:auto}
.tenang{color:var(--muted)}
.kecil{font-size:.82rem}
.tebal{font-weight:700}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:38px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-detail{grid-template-columns:380px minmax(0,1fr)}
/* Layout utama + panel samping (checkout, detail pesanan, keranjang) */
.grid-samping{grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
/* Layout chat: daftar percakapan + ruang pesan */
.grid-chat{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:start}
.grid-chat-admin{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
.sembunyi{display:none!important}

/* ------------------------------- Topbar ------------------------------- */
.strip-atas{background:linear-gradient(90deg,var(--hijau-800),var(--hijau-600));color:#DCEDE2;font-size:.8rem}
.strip-atas .wadah{display:flex;gap:18px;align-items:center;justify-content:space-between;padding-top:7px;padding-bottom:7px}
.strip-atas a{color:#F4FAF6}
.strip-atas a:hover{color:var(--emas-300)}

/* ------------------------------- Header ------------------------------- */
.header{background:var(--putih);border-bottom:3px solid var(--emas-500);position:sticky;top:0;z-index:40;box-shadow:0 2px 12px rgba(6,58,37,.06)}
.header-utama{display:flex;gap:18px;align-items:center;padding:14px 18px;max-width:1200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;min-width:210px}
.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--hijau-600),var(--hijau-800));display:grid;place-items:center;color:var(--emas-300);font-weight:800;font-size:1.05rem;box-shadow:inset 0 0 0 2px rgba(201,162,74,.55)}
.brand-teks strong{display:block;font-size:1.02rem;color:var(--hijau-800);line-height:1.15}
.brand-teks span{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.2px}

/* ---------- LOGO & NAMA BRAND "KlekKlek" (header, halaman masuk, footer) ----------
   Ikon: img/logo-klek-klek.svg (vektor). Wordmark ditulis sebagai teks dua warna agar tajam,
   bisa dibaca mesin pencari/pembaca layar, dan tetap tampil walau berkas CSS ini gagal dimuat. */
.brand-logo{display:inline-flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.brand-logo__ikon{width:46px;height:46px;flex:0 0 auto;display:block}
.brand-logo__teks{display:flex;flex-direction:column;min-width:0;line-height:1}
.brand-logo__nama{font-weight:800;font-size:1.32rem;letter-spacing:-.7px;line-height:1.06;white-space:nowrap}
.brand-logo__sub{display:block;font-size:.565rem;font-weight:600;color:#4C6B57;letter-spacing:.05px;
  line-height:1.25;margin-top:3px;max-width:250px}
/* gradasi emas pada "Klek" kedua (mengikuti logo asli); jatuh ke warna solid bila gradasi tak didukung */
.brand-logo__emas{background:linear-gradient(180deg,#FFD75E,#D99A11);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#D99A11}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.brand-logo__emas{color:#D99A11}}
/* Header menyempit: tagline disembunyikan, ikon & nama tetap */
@media (min-width:901px) and (max-width:1180px){
  .brand-logo__sub{display:none}
  .brand-logo__ikon{width:42px;height:42px}
  .brand-logo__nama{font-size:1.2rem}
}
/* Halaman masuk: logo lebih besar & di tengah */
.kotak-login .atas .brand-logo{justify-content:center;text-align:left;margin:0 auto 10px}
.kotak-login .atas .brand-logo__ikon{width:58px;height:58px}
.kotak-login .atas .brand-logo__nama{font-size:1.5rem}
.kotak-login .atas .brand-logo__sub{color:#CFE3D6;max-width:280px}
.kotak-login .atas .brand-logo__emas{background:linear-gradient(180deg,#FFDE7A,#E9AE22);-webkit-background-clip:text;background-clip:text}
/* Footer: versi ringkas */
.footer .brand-logo{margin-bottom:8px}
.footer .brand-logo__ikon{width:40px;height:40px}
.footer .brand-logo__nama{font-size:1.1rem}
.footer .brand-logo__sub{font-size:.55rem;max-width:210px}
.cari{flex:1;display:flex;background:var(--putih);border:1.5px solid var(--line);border-radius:12px;overflow:hidden;min-width:200px}
.cari:focus-within{border-color:var(--hijau-600);box-shadow:0 0 0 3px var(--hijau-100)}
.cari input{flex:1;border:0;padding:11px 14px;font:inherit;outline:none;background:transparent}
.cari button{border:0;background:linear-gradient(120deg,var(--hijau-600),var(--hijau-700));color:#fff;padding:0 20px;cursor:pointer;font:inherit;font-weight:600}
.header-aksi{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.ikon-tombol{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:1px;color:var(--hijau-800);font-size:.7rem;padding:6px 9px;border-radius:12px;border:1px solid transparent}
.ikon-tombol:hover{background:var(--hijau-50);border-color:var(--line)}
.ikon-tombol svg{width:22px;height:22px}
/* BAR SALDO (.saldo-bar-umum) — satu elemen untuk SEMUA ukuran layar.
   Gaya utamanya INLINE di partials/atas.php (tidak bergantung berkas ini), karena pernah terjadi
   saldo tidak muncul di perangkat yang memakai CSS lama/terblokir. Aturan di bawah hanya merapikan. */
.saldo-bar-umum{width:100%}
.saldo-bar-umum .hms-saldo:hover{background:rgba(255,255,255,.26)}
/* Kolom SIMPANAN (di samping Saldo, ukuran lebih kecil). Gaya dasar inline di partials/atas.php;
   aturan di sini hanya pemolesan + penyesuaian agar tidak berdesakan di layar sempit. */
.saldo-bar-umum .simp-chip{transition:background .15s ease}
.saldo-bar-umum .simp-chip:hover{background:rgba(255,255,255,.20) !important;border-color:rgba(255,255,255,.4) !important}
.saldo-bar-umum .simp-chip:active{transform:scale(.985)}
.saldo-bar-umum .simp-chip svg{width:12px;height:12px}
@media (max-width:420px){
  /* Layar sempit: kartu SALDO tetap mendominasi lebar, kolom Simpanan lebih kecil,
     dan tombol Top Up/Cairkan mengisi satu baris penuh di bawahnya (rapi & mudah disentuh). */
  .saldo-bar-umum{padding:6px 10px !important;gap:6px !important}
  .saldo-bar-umum .hms-saldo{padding:4px 9px !important}
  .saldo-bar-umum .hms-label{font-size:.6rem !important}
  .saldo-bar-umum .hms-saldo strong{font-size:.96rem !important}
  .saldo-bar-umum .simp-chip{padding:4px 8px !important;max-width:38% !important}
  .saldo-bar-umum .simp-label{font-size:.52rem !important}
  .saldo-bar-umum .simp-nilai{font-size:.78rem !important}
  .saldo-bar-umum .hms-aksi{flex:1 1 100% !important;justify-content:stretch;gap:6px}
  .saldo-bar-umum .hms-tombol{flex:1 1 0;justify-content:center;padding:7px 8px !important;font-size:.76rem !important}
}
.saldo-bar-umum .hms-tombol{transition:transform .12s ease}
.saldo-bar-umum .hms-tombol:active{transform:scale(.97)}
@media (min-width:901px){
  .saldo-bar-umum{padding:10px 18px !important}
  .saldo-bar-umum > *{max-width:1200px}
  .saldo-bar-umum{justify-content:center}
}
/* Navigasi bawah dengan 6 menu (ada menu "Saldo"): rapatkan sedikit agar tetap satu baris. */
@media (max-width:900px){
  .nav-bawah a{font-size:.66rem;padding:4px 1px}
  .nav-bawah a > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
/* Tombol hidup/matikan bunyi notifikasi (lonceng, bukan tautan) */
.tombol-suara{cursor:pointer;background:transparent;font:inherit}
.suara-notif-ikon{font-size:1.05rem;line-height:1.1}
.tombol-suara[aria-pressed="false"]{color:var(--muted)}
.tombol-suara[aria-pressed="false"].hm-ikon{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.tombol-suara[aria-pressed="true"].hm-ikon{background:rgba(255,255,255,.16)}
.lencana-angka{position:absolute;top:0;right:2px;background:var(--merah);color:#fff;font-size:.62rem;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-weight:700}
.kategori-bar{background:var(--putih);border-top:1px solid var(--line)}
.kategori-bar ul{display:flex;gap:6px;list-style:none;margin:0;padding:8px 18px;max-width:1200px;margin:0 auto;overflow-x:auto}
.kategori-bar a{display:block;padding:7px 13px;border-radius:20px;font-size:.85rem;white-space:nowrap;color:var(--ink)}
.kategori-bar a:hover{background:var(--hijau-50);color:var(--hijau-700)}
.kategori-bar a.aktif{background:var(--hijau-600);color:#fff}

/* ------------------------------ Tombol ------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;border:1.5px solid transparent;background:linear-gradient(120deg,var(--hijau-600),var(--hijau-700));color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:.15s;text-align:center}
.btn:hover{color:#fff;filter:brightness(1.07);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-outline{background:var(--putih);border-color:var(--hijau-600);color:var(--hijau-700)}
.btn-outline:hover{background:var(--hijau-50);color:var(--hijau-800)}
.btn-emas{background:linear-gradient(120deg,var(--emas-500),var(--emas-600));color:#3A2C05}
.btn-emas:hover{color:#3A2C05}
.btn-abu{background:#EAEEEA;color:var(--ink)}
.btn-abu:hover{color:var(--ink)}
.btn-merah{background:linear-gradient(120deg,#C5362C,#96221A)}
.btn-sm{padding:7px 13px;font-size:.82rem;border-radius:10px}
.btn-lg{padding:13px 24px;font-size:1rem}
.btn-block{width:100%}
.btn-tautan{background:none;border:0;color:var(--hijau-700);cursor:pointer;font:inherit;padding:0;text-decoration:underline}

/* ------------------------------ Kartu ------------------------------- */
.kartu{background:var(--putih);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.kartu-pad{padding:20px}
.kartu-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kartu-head h3{margin:0}
.kartu-body{padding:20px}
.kartu-pita{border-top:4px solid var(--emas-500)}

.stat{background:var(--putih);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border-left:5px solid var(--hijau-600)}
.stat.emas{border-left-color:var(--emas-500)}
.stat.merah{border-left-color:#C5362C}
.stat.biru{border-left-color:var(--biru)}
.stat small{color:var(--muted);display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}
.stat strong{display:block;font-size:1.5rem;margin-top:4px;color:var(--hijau-800)}

/* ------------------------------ Form -------------------------------- */
.label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--hijau-800)}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:var(--putih);outline:none;color:var(--ink)}
.input:focus{border-color:var(--hijau-600);box-shadow:0 0 0 3px var(--hijau-100)}
.form-baris{margin-bottom:16px}
.form-grid{display:grid;gap:16px 18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .lebar{grid-column:1/-1}
.petunjuk{font-size:.78rem;color:var(--muted);margin-top:5px}

/* ------------------------------ Tabel ------------------------------- */
.tabel-bungkus{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;font-size:.88rem}
.tabel th{background:var(--hijau-50);color:var(--hijau-800);text-align:left;padding:11px 13px;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabel td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabel tbody tr:hover{background:var(--hijau-50)}
.tabel .angka{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabel-total td{background:var(--emas-100);font-weight:700}

/* ------------------------------ Badge ------------------------------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700;white-space:nowrap}
.badge.hijau{background:var(--hijau-100);color:var(--hijau-700)}
.badge.kuning{background:#FCF0DA;color:var(--kuning)}
.badge.merah{background:#FBE4E2;color:var(--merah)}
.badge.biru{background:#E1EEF7;color:var(--biru)}
.badge.abu{background:#ECEFF0;color:var(--muted)}
.badge.emas{background:var(--emas-100);color:var(--emas-700)}

/* ------------------------------ Alert ------------------------------- */
.alert{padding:13px 16px;border-radius:12px;margin-bottom:14px;border-left:5px solid;font-size:.9rem}
.alert.sukses{background:var(--hijau-50);border-color:var(--hijau-600);color:var(--hijau-800)}
.alert.error{background:#FDF0EF;border-color:#C5362C;color:#7C1D16}
.alert.info{background:#EEF5FA;border-color:var(--biru);color:#134866}
.alert.kuning{background:#FDF6E6;border-color:var(--emas-500);color:#6C5310}

/* --------------------- Banner berjalan & teks bergulir --------------------- */
.teks-berjalan{display:flex;align-items:stretch;gap:0;margin:16px 0 0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--hijau-800)}
.teks-berjalan__label{display:flex;align-items:center;gap:7px;padding:10px 15px;font-size:.78rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:linear-gradient(120deg,var(--hijau-700),var(--hijau-600));color:#fff;white-space:nowrap;flex:0 0 auto}
.teks-berjalan__label svg{width:17px;height:17px}
.teks-berjalan__jendela{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;background:var(--emas-100);border-left:3px solid var(--emas-500)}
.teks-berjalan__isi{display:flex;align-items:center;gap:26px;white-space:nowrap;padding-left:100%;animation:teksJalan 42s linear infinite;font-size:.88rem;font-weight:600;color:#4A3A0A}
.teks-berjalan__item{padding-right:4px}
.teks-berjalan__pisah{color:var(--emas-600);font-weight:800}
.teks-berjalan--hijau .teks-berjalan__jendela{background:var(--hijau-50);border-left-color:var(--hijau-600)}
.teks-berjalan--hijau .teks-berjalan__isi{color:var(--hijau-800)}
.teks-berjalan--merah .teks-berjalan__jendela{background:#FDF0EF;border-left-color:#C5362C}
.teks-berjalan--merah .teks-berjalan__isi{color:#7C1D16}
.teks-berjalan--biru .teks-berjalan__jendela{background:#EEF5FA;border-left-color:var(--biru)}
.teks-berjalan--biru .teks-berjalan__isi{color:#134866}
@keyframes teksJalan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.teks-berjalan:hover .teks-berjalan__isi{animation-play-state:paused}

.banner-berjalan{position:relative;margin:16px 0 0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--hijau-800)}
.banner-berjalan__jalur{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.banner-slide{flex:0 0 100%;position:relative;display:block}
.banner-slide__tautan{display:block;position:relative;color:inherit}
/* Banner tampil UTUH di PC maupun HP: tinggi mengikuti rasio asli gambar (tanpa dipotong).
   Sebelumnya rasio dipaksa 16/5 (PC) dan 16/9 (HP) sehingga sisi/isi gambar terpotong di HP. */
.banner-slide img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block;margin:0 auto}
.banner-slide__keterangan{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(0deg,rgba(6,58,37,.88),rgba(6,58,37,.12) 78%,transparent);color:#fff}
.banner-slide__keterangan strong{font-size:1.15rem;display:block}
.banner-slide__keterangan.merah{background:linear-gradient(0deg,rgba(124,29,22,.9),transparent 80%)}
.banner-slide__keterangan.biru{background:linear-gradient(0deg,rgba(19,72,102,.9),transparent 80%)}
.banner-panah{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--hijau-800);font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 12px rgba(6,58,37,.22);z-index:3}
.banner-panah:hover{background:#fff}
.banner-panah--kiri{left:12px}
.banner-panah--kanan{right:12px}
.banner-titik{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:3}
.banner-titik button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer}
.banner-titik button.aktif{background:var(--emas-500);width:22px;border-radius:6px}
.hero--ringkas{padding:26px 32px}
.hero--ringkas h1{font-size:1.5rem}

/* pratinjau di halaman admin */
.pratinjau-teks-berjalan{border-radius:12px;overflow:hidden;background:var(--emas-100);border-left:3px solid var(--emas-500);padding:9px 12px;margin-bottom:14px;white-space:nowrap;overflow-x:hidden}
.pratinjau-teks-berjalan span{display:inline-block;animation:teksJalan 20s linear infinite;font-size:.82rem;font-weight:600;color:#4A3A0A;padding-left:100%}
.pratinjau-banner-carousel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pratinjau-banner-carousel > div{aspect-ratio:16/5;border-radius:10px;background:linear-gradient(120deg,var(--hijau-700),var(--emas-500));color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;text-align:center;padding:6px}

@media (max-width:680px){
  .banner-panah{width:34px;height:34px;font-size:1.2rem}
  .banner-slide__keterangan strong{font-size:1rem}
  .teks-berjalan__label span{display:none}
  .teks-berjalan__isi{animation-duration:30s}
  .pratinjau-banner-carousel{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .teks-berjalan__isi,.pratinjau-teks-berjalan span{animation:none;padding-left:12px}
  .banner-berjalan__jalur{transition:none}
}

/* ---- blok dua kolom: Produk Rekomendasi (iklan) | Produk Terlaris ----
   Tampil di HP maupun PC (satu baris dibagi dua kolom). Di PC tiap kolom berisi
   4 gambar dalam satu baris; di HP 2×2 agar gambar tetap besar dan jelas. */
.dua-kolom{display:flex;gap:20px;margin:20px 0 4px;align-items:flex-start}
.dua-kolom__kartu{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--putih);overflow:hidden;box-shadow:var(--shadow)}
.dua-kolom__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;
  background:linear-gradient(120deg,var(--hijau-700),var(--hijau-600))}
.dua-kolom__judul{display:flex;align-items:center;gap:6px;min-width:0;font-size:.92rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dua-kolom__judul svg{width:16px;height:16px;flex:0 0 auto}
.dua-kolom__more{color:var(--emas-300);font-size:1.2rem;font-weight:700;line-height:1}
.dua-kolom__bingkai{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px}
.mini-produk{display:block;position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--hijau-50)}
.mini-produk img{width:100%;height:100%;object-fit:cover;display:block}
.mini-produk--iklan::after{content:"Iklan";position:absolute;left:5px;top:5px;background:rgba(201,162,74,.95);color:#3A2C05;
  font-size:.6rem;font-weight:800;text-transform:uppercase;padding:2px 6px;border-radius:6px;letter-spacing:.3px}
.mini-produk--kosong{border:1px dashed var(--line)}

/* ------------------------------ Katalog ------------------------------ */
.hero{background:linear-gradient(115deg,var(--hijau-800) 0%,var(--hijau-600) 55%,var(--emas-600) 130%);color:#fff;border-radius:20px;padding:34px 32px;margin:20px 0 26px;position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:1.85rem;max-width:640px}
.hero p{color:#DCEBE1;max-width:620px;margin-bottom:18px}
.hero .btn-emas{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07)}
.hero-angka{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap}
.hero-angka div strong{display:block;font-size:1.35rem;color:var(--emas-300)}
.hero-angka div span{font-size:.78rem;color:#CFE3D6}

.grid-produk{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:18px}
.kartu-produk{background:var(--putih);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.18s;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(6,58,37,.05)}
.kartu-produk:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--emas-300)}
.kartu-produk .foto{aspect-ratio:1/1;background:var(--hijau-50);position:relative;overflow:hidden}
.kartu-iklan .pita-diskon{left:auto;right:8px}
.kartu-produk{position:relative}
.kartu-produk .foto img{width:100%;height:100%;object-fit:cover}
.kartu-produk .isi{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.kartu-produk .nama{font-size:.88rem;line-height:1.4;height:2.8em;overflow:hidden;color:var(--ink);font-weight:600}
.kartu-produk .harga{color:var(--hijau-700);font-weight:800;font-size:1rem}
.kartu-produk .harga-coret{color:var(--muted);text-decoration:line-through;font-size:.76rem;font-weight:500}
.kartu-produk .meta{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--muted);margin-top:auto}
.tombol-hati{position:absolute;top:0;right:0;z-index:3;padding:8px}
.tombol-hati button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#8A9A91;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(6,58,37,.16);transition:.15s}
.tombol-hati button svg{width:19px;height:19px}
.tombol-hati button:hover{color:#C5362C;transform:scale(1.08)}
.tombol-hati button.aktif{color:#C5362C;background:#FDEBEA}
.tombol-hati button.aktif svg{fill:#C5362C}
.pita-iklan{position:absolute;top:8px;left:8px;z-index:2;background:linear-gradient(120deg,var(--emas-500),var(--emas-700));color:#3A2C05;font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:8px;letter-spacing:.4px;text-transform:uppercase}
.kartu-iklan{border-color:var(--emas-500);box-shadow:0 6px 20px rgba(156,122,30,.16)}
.kartu-iklan.kartu-produk .foto{position:relative}
.pita-diskon{position:absolute;top:8px;left:8px;background:linear-gradient(120deg,#C5362C,#96221A);color:#fff;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:8px}
.pita-habis{position:absolute;inset:0;background:rgba(21,42,32,.55);color:#fff;display:grid;place-items:center;font-weight:700}
.bintang{color:var(--emas-500)}

.judul-bagian{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:28px 0 16px}
.judul-bagian h2{margin:0;position:relative;padding-left:14px}
.judul-bagian h2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--hijau-600),var(--emas-500))}

/* --------------------------- Sidebar admin/seller -------------------- */
.layout-samping{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;padding:22px 18px;max-width:1300px;margin:0 auto;align-items:start}
.layout-samping > *{min-width:0}
.grid > *{min-width:0}
.samping{background:linear-gradient(175deg,var(--hijau-800),var(--hijau-700));border-radius:var(--radius);padding:16px 12px;color:#DCEBE1;position:sticky;top:86px;box-shadow:var(--shadow)}
.samping .samping-judul{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--emas-300);padding:8px 12px 4px}
.samping a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#DCEBE1;font-size:.88rem;font-weight:500}
.samping a:hover{background:rgba(255,255,255,.1);color:#fff}
.samping a.aktif{background:var(--emas-500);color:#3A2C05;font-weight:700}
.samping .pisah{height:1px;background:rgba(255,255,255,.14);margin:10px 6px}
/* Tombol hidup/matikan bunyi notifikasi di panel (bukan tautan, jadi perlu gaya sendiri) */
.samping .samping-tombol{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border-radius:10px;border:0;background:transparent;color:#DCEBE1;
  font:inherit;font-size:.88rem;font-weight:500;cursor:pointer}
.samping .samping-tombol:hover{background:rgba(255,255,255,.1);color:#fff}
.samping .samping-tombol[aria-pressed="false"]{color:#9FB6AB}
.samping .samping-tombol .suara-notif-ikon{font-size:1.05rem}

/* ------------------------------ Timeline ---------------------------- */
.timeline{list-style:none;margin:0;padding:0 0 0 6px}
.timeline li{position:relative;padding:0 0 20px 26px;border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.timeline li.selesai::before{background:var(--hijau-600);border-color:var(--hijau-100)}
.timeline li.kini::before{background:var(--emas-500);border-color:var(--emas-100)}
.timeline strong{display:block;font-size:.92rem}
.timeline span{font-size:.78rem;color:var(--muted)}

/* ------------------------------ Nota / struk ------------------------ */
.nota{border:1px dashed var(--emas-500);border-radius:14px;padding:18px;background:var(--emas-100)}

/* ------------------------------ Toast ------------------------------- */
#toast-area{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;flex-direction:column;gap:10px;max-width:330px}
.toast{background:var(--putih);border-left:5px solid var(--hijau-600);border-radius:12px;box-shadow:var(--shadow-lg);padding:13px 15px;animation:masuk .25s ease}
.toast strong{display:block;font-size:.9rem}
.toast span{font-size:.8rem;color:var(--muted)}
@keyframes masuk{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ------------------------------ Footer ------------------------------ */
.footer{background:var(--hijau-900);color:#BFD8C8;margin-top:44px;padding:36px 0 18px;font-size:.86rem}
.footer h4{color:var(--emas-300);font-size:.9rem;text-transform:uppercase;letter-spacing:.6px}
.footer a{color:#DCEDE2;display:block;padding:3px 0}
.footer a:hover{color:var(--emas-300)}
.footer-bawah{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:14px;text-align:center;font-size:.78rem;color:#9CBCA9}

/* ------------------------------ Login ------------------------------- */
.halaman-login{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(900px 500px at 12% 8%,rgba(14,110,69,.16),transparent),
  radial-gradient(700px 400px at 88% 92%,rgba(201,162,74,.22),transparent),var(--krem);padding:26px 16px}
.kotak-login{width:100%;max-width:430px;background:var(--putih);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
.kotak-login .atas{background:linear-gradient(120deg,var(--hijau-800),var(--hijau-600));padding:24px;color:#fff;text-align:center}
.kotak-login .atas .brand-mark{margin:0 auto 10px;width:52px;height:52px;font-size:1.2rem}
.kotak-login .atas h1{font-size:1.2rem;margin-bottom:2px;color:#fff}
.kotak-login .atas p{font-size:.78rem;color:#CFE3D6;margin:0}

/* ------------------------------ Lain-lain --------------------------- */
.kosong{text-align:center;padding:44px 20px;color:var(--muted)}
.kosong .ikon{font-size:2.4rem;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--hijau-50);border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:.78rem;color:var(--hijau-800)}
.kartu-mini{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--putih);display:flex;gap:12px;align-items:center;min-width:0;flex-wrap:wrap}
.kartu-mini > *{min-width:0}
.kartu-mini strong,.kartu-mini .kecil{overflow-wrap:anywhere}
/* baris pilihan pengiriman di checkout: teks tetap boleh menyusut di ponsel */
.pilihan-kirim{flex-wrap:nowrap}
.pilihan-kirim > div{min-width:0}
.kartu-mini img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--hijau-50)}
.paginasi{display:flex;gap:6px;justify-content:center;margin:26px 0;flex-wrap:wrap}
.paginasi a{min-width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff;padding:0 10px}
.paginasi a.aktif{background:var(--hijau-600);color:#fff;border-color:var(--hijau-600)}
.paginasi .titik{padding:0 4px;color:var(--muted)}
.potongan-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--hijau-600),var(--hijau-800));color:var(--emas-300);display:grid;place-items:center;font-weight:700}
.persen-plafon{height:9px;border-radius:6px;background:#E6EBE6;overflow:hidden}
.persen-plafon span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--hijau-600),var(--emas-500))}

@media (max-width:980px){
  .grid-detail{grid-template-columns:1fr}
  .grid-samping,.grid-chat,.grid-chat-admin{grid-template-columns:1fr}
  .grid-samping > *,.grid-chat > *,.grid-chat-admin > *{position:static!important}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-samping{grid-template-columns:1fr;padding:16px 12px}
  .samping{position:static;display:flex;overflow-x:auto;gap:6px;padding:10px}
  .samping .samping-judul,.samping .pisah{display:none}
  .samping a{white-space:nowrap;padding:8px 12px}
}
@media (max-width:680px){
  .header-utama{flex-wrap:wrap;padding:12px}
  .brand{min-width:0;flex:1 1 auto}
  .header-aksi{gap:6px}
  /* di ponsel tampilkan ikon saja agar tidak melebarkan halaman */
  .ikon-tombol{padding:7px 8px}
  .ikon-tombol > span:not(.lencana-angka){display:none}
  .strip-atas .wadah{flex-wrap:wrap;gap:6px}
  .cari{order:3;flex-basis:100%}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .grid-produk{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hero{padding:24px 20px}
  .hero h1{font-size:1.4rem}
  .brand-teks span{display:none}
  .wadah{padding:0 12px}
}


/* ==========================================================================
   PPOB — isi ulang & pembayaran (pulsa, kuota, e-wallet, PLN, game, tagihan)
   ========================================================================== */
/* Strip di beranda: ringkas, menarik, TIDAK mengalahkan katalog produk fisik
   (satu baris ikon layanan + tautan "Buka PPOB"). */
.ppob-strip{margin:18px 0 4px;border:1px solid var(--line);border-radius:16px;background:var(--putih);
  box-shadow:var(--shadow);overflow:hidden}
.ppob-strip-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;
  background:linear-gradient(120deg,var(--hijau-800),var(--hijau-600) 70%,var(--emas-600));color:#fff}
.ppob-strip-judul{display:flex;align-items:center;gap:7px;min-width:0;font-size:.95rem}
.ppob-strip-judul svg{width:18px;height:18px;flex:0 0 auto}
.ppob-strip-sub{display:block;color:#D6EADF;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppob-strip-more{flex:0 0 auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;
  border-radius:20px;padding:6px 13px;font-size:.8rem;font-weight:700;white-space:nowrap}
.ppob-strip-more:hover{background:#fff;color:var(--hijau-800)}
.ppob-strip-isi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:12px 14px}
.ppob-strip-kat{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:#fff;transition:.16s}
.ppob-strip-kat:hover{border-color:var(--emas-500);background:var(--emas-100);transform:translateY(-2px)}
.ppob-strip-ikon{font-size:1.5rem;line-height:1}
.ppob-strip-nama{font-size:.76rem;font-weight:600;color:var(--ink);line-height:1.25}

/* Halaman PPOB: deretan layanan (geser di HP, rapi di PC) */
.ppob-kategori{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ppob-kat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:14px;
  border:1px solid var(--line);background:var(--putih);text-align:center;transition:.16s}
.ppob-kat:hover{border-color:var(--emas-500);transform:translateY(-2px);box-shadow:var(--shadow)}
.ppob-kat.aktif{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-kat.aktif .ppob-kat-nama{color:var(--hijau-800)}
.ppob-kat-ikon{font-size:1.7rem;line-height:1}
.ppob-kat-nama{font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.25}

.ppob-daftar{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto}
.ppob-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:#fff;transition:.15s}
.ppob-item:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-item-utama{flex:1;min-width:0;display:flex;flex-direction:column}
.ppob-item-harga{font-weight:800;color:var(--hijau-700);white-space:nowrap}
.ppob-item-pilih{font-size:.78rem;font-weight:700;color:var(--emas-700);white-space:nowrap}

.ppob-pilih{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px dashed var(--hijau-600);
  border-radius:12px;background:var(--hijau-50);margin-bottom:12px}
.ppob-pilih-teks{flex:1;min-width:0}
.ppob-pilih-harga{text-align:right}

.ppob-total{display:flex;flex-direction:column;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--emas-100)}
.ppob-total strong{font-size:1.25rem;color:var(--hijau-800)}

.ppob-metode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ppob-metode-pil{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;transition:.15s}
.ppob-metode-pil:hover{border-color:var(--hijau-600)}
.ppob-metode-pil.aktif{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-metode-pil.terkunci{opacity:.65;background:#F6F7F6}
.ppob-metode-pil.terkunci:hover{border-color:var(--line)}
.ppob-metode-pil input{margin-top:3px;flex:0 0 auto}

.ppob-populer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ppob-pop{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.ppob-pop:hover{border-color:var(--emas-500);background:var(--emas-100)}
.ppob-pop-ikon{font-size:1.3rem;line-height:1}
.ppob-pop-teks{display:flex;flex-direction:column;min-width:0}

/* Pemilih penyedia (e-wallet / game): kartu pilihan penyedia sebelum nominal */
.ppob-penyedia{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ppob-penyedia-pil{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;transition:.15s}
.ppob-penyedia-pil:hover{border-color:var(--hijau-600)}
.ppob-penyedia-pil.aktif{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-penyedia-pil input{margin-top:3px;flex:0 0 auto}
.ppob-penyedia-pil span{display:flex;flex-direction:column;min-width:0}

/* Pilihan nominal produk */
.ppob-pilihan{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.ppob-nominal{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;transition:.15s}
.ppob-nominal:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-nominal.aktif{border-color:var(--hijau-600);background:var(--hijau-50);box-shadow:0 2px 10px rgba(6,58,37,.07)}
.ppob-nominal input{flex:0 0 auto}
.ppob-nominal-teks{flex:1;min-width:0;display:flex;flex-direction:column}
.ppob-nominal-harga{font-weight:800;color:var(--hijau-700);white-space:nowrap}

/* Kartu konfirmasi nomor tujuan sebelum pembayaran */
.ppob-konfirmasi{border:1px dashed var(--hijau-600);border-radius:12px;background:var(--hijau-50);padding:12px 14px}
.ppob-konfirmasi-baris{display:flex;justify-content:space-between;gap:10px;padding:3px 0;align-items:baseline}
.ppob-cb-konfirmasi{padding:10px 12px;border:1px solid var(--emas-500);border-radius:12px;background:var(--emas-100);margin-bottom:12px}
.ppob-cb-konfirmasi input{margin-top:3px;flex:0 0 auto}

/* Penunjuk langkah alur PPOB (1 jenis layanan → 5 konfirmasi & bayar) */
.ppob-langkah{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.ppob-langkah li{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 12px}
.ppob-langkah li span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--hijau-50);color:var(--hijau-800);font-size:.7rem;font-weight:800}
.ppob-langkah li.aktif{border-color:var(--hijau-600);background:var(--hijau-50);color:var(--hijau-800)}
.ppob-langkah li.aktif span{background:var(--hijau-600);color:#fff}
.ppob-langkah li.selesai{color:var(--hijau-700)}
.ppob-langkah li.selesai span{background:var(--hijau-600);color:#fff}
.ppob-konfirmasi-total{border-top:1px dashed var(--hijau-600);margin-top:6px;padding-top:8px;
  display:flex;justify-content:space-between;align-items:baseline;font-weight:800}
.ppob-konfirmasi-total strong{font-size:1.35rem;color:var(--hijau-800)}
.ppob-nominal{text-decoration:none}

/* Avatar & foto profil anggota */
.avatar-foto{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--hijau-100)}

/* Status transaksi (real-time) */
.ppob-status .kartu-head{background:var(--hijau-50)}
.ppob-status--sukses .kartu-head{background:#E7F6EE}
.ppob-status--gagal .kartu-head,.ppob-status--dikembalikan .kartu-head{background:#FDF0EF}
.ppob-status .tabel td{padding:9px 10px}
.ppob-status .tabel td:first-child{width:38%;color:var(--muted)}

@media (max-width:680px){
  .ppob-strip{margin:12px 0 2px;border-radius:14px}
  .ppob-strip-kepala{padding:10px 12px;gap:8px}
  .ppob-strip-judul{font-size:.88rem}
  .ppob-strip-sub{display:none}
  .ppob-strip-more{padding:5px 11px;font-size:.76rem}
  /* Di HP: baris layanan digeser ke samping (tidak semua tampil) seperti kategori */
  .ppob-strip-isi{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ppob-strip-isi::-webkit-scrollbar{display:none}
  .ppob-strip-kat{flex:0 0 92px;scroll-snap-align:start;padding:9px 4px}
  .ppob-strip-ikon{font-size:1.35rem}
  .ppob-strip-nama{font-size:.72rem}
  .ppob-kategori{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ppob-kategori::-webkit-scrollbar{display:none}
  .ppob-kat{flex:0 0 96px;scroll-snap-align:start;padding:10px 6px;border-radius:12px}
  .ppob-kat-ikon{font-size:1.5rem}
  .ppob-kat-nama{font-size:.74rem}
  .ppob-metode{grid-template-columns:1fr}
  .ppob-populer{grid-template-columns:1fr}
  .ppob-item{padding:9px 10px}
  .ppob-item-harga{font-size:.92rem}
}


/* ==========================================================================
   TAMPILAN HP (≤900px) — fokus fitur utama, teks jelas, gambar besar.
   Di PC (>900px) header desktop + semua fitur tetap lengkap.
   ========================================================================== */
.header-mobile,.nav-bawah{display:none}

@media (max-width:900px){
  /* ---- kerangka aplikasi: header ringkas + navigasi bawah ---- */
  body{padding-bottom:74px}
  .strip-atas{display:none}
  .header-utama{display:none}
  /* hanya baris pencarian + saldo yang menempel; baris kategori ikut tergulir (layar lebih lega) */
  .header{position:static;border-bottom:0;box-shadow:none}
  /* header HP berada langsung di bawah <body> agar benar-benar menempel saat digulir */
  .header-mobile{display:block;position:sticky;top:0;z-index:48;
    background:linear-gradient(150deg,var(--hijau-800),var(--hijau-600));padding-top:9px;
    box-shadow:0 2px 10px rgba(6,58,37,.10)}
  /* baris teratas: langsung pencarian + keranjang + chat */
  .hm-baris2{display:flex;align-items:center;gap:8px;padding:0 12px 8px}
  .hm-cari{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:0 12px;height:40px}
  .hm-cari-ikon{display:grid;place-items:center;color:var(--hijau-700)}
  .hm-cari-ikon svg{width:19px;height:19px}
  .hm-cari input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:.95rem;background:transparent;color:var(--ink)}
  .hm-ikon{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;flex:0 0 auto}
  .hm-ikon svg{width:21px;height:21px}
  .hm-ikon .lencana-angka{top:-3px;right:-3px;background:#C5362C;border:1.5px solid var(--hijau-700);min-width:18px;height:18px;font-size:.64rem}

  /* ---- kategori: geser ke samping, tidak ditampilkan semua ---- */
  .kategori-bar{border-top:0;background:#fff;position:relative}
  .kategori-bar ul{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:9px 14px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}
  .kategori-bar ul::-webkit-scrollbar{display:none}
  .kategori-bar li{scroll-snap-align:start;flex:0 0 auto}
  .kategori-bar a{padding:8px 14px;font-size:.86rem;border:1px solid var(--line);border-radius:20px;background:#fff}
  .kategori-bar a.aktif{background:var(--hijau-600);border-color:var(--hijau-600);color:#fff}
  .kategori-bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;pointer-events:none;
    background:linear-gradient(90deg,transparent,#fff)}

  /* ---- navigasi bawah ---- */
  .nav-bawah{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -3px 14px rgba(6,58,37,.09);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .nav-bawah a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;
    font-size:.7rem;font-weight:600;color:var(--muted);border-radius:10px}
  .nav-bawah a.aktif{color:var(--hijau-700)}
  .nav-bawah .nb-ikon{position:relative;display:grid;place-items:center}
  .nav-bawah .nb-ikon svg{width:23px;height:23px}
  .nav-bawah .nb-ikon .lencana-angka{top:-5px;right:-9px;min-width:17px;height:17px;font-size:.62rem}
  .nav-bawah a.aktif .nb-ikon::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
    width:18px;height:3px;border-radius:2px;background:var(--hijau-600)}

  /* ---- beranda: ringkas & fokus ---- */
  .wadah{padding:0 12px}
  /* hero di HP: ringkas — judul + tombol saja, supaya produk cepat terlihat */
  .hero{padding:16px;margin:12px 0 14px;border-radius:16px}
  .hero h1{font-size:1.08rem;line-height:1.35;margin-bottom:10px}
  .hero p{display:none}
  .hero-angka{display:none}
  .hero .baris{gap:8px}
  .hero .btn-lg{padding:9px 15px;font-size:.86rem;flex:1 1 auto;justify-content:center}
  .hero::after{display:none}

  /* tombol keranjang di kartu: kompak agar gambar & teks lebih lapang */
  .kartu-produk form[data-qty] .btn{padding:7px 8px;font-size:.8rem;border-radius:9px}
  .judul-bagian{margin:18px 0 10px}
  .judul-bagian h2{font-size:1.06rem;padding-left:11px}
  .judul-bagian h2::before{width:4px}
  .hero--ringkas{padding:16px}

  /* ---- kartu produk: gambar besar, teks jelas ---- */
  .grid-produk{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kartu-produk{border-radius:12px}
  .kartu-produk .foto{aspect-ratio:1/1}
  .kartu-produk .isi{padding:9px 10px 11px;gap:5px}
  .kartu-produk .nama{font-size:.92rem;line-height:1.35;height:2.7em;font-weight:600}
  .kartu-produk .harga{font-size:1.06rem;font-weight:800}
  .kartu-produk .harga-coret{font-size:.78rem}
  .kartu-produk .meta{font-size:.76rem}
  .kartu-produk .meta.kecil,.kartu-produk .kecil.tenang{font-size:.76rem}
  .pita-diskon{font-size:.72rem;padding:3px 9px}
  .tombol-hati{padding:6px}
  .tombol-hati button{width:34px;height:34px}

  /* ---- kategori pilihan di beranda: jadi baris yang bisa digeser ---- */
  .kategori-geser-hp{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;
    grid-template-columns:none;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .kategori-geser-hp::-webkit-scrollbar{display:none}
  .kategori-geser-hp > *{flex:0 0 104px;scroll-snap-align:start;text-align:center;padding:12px 8px}
  .kategori-geser-hp > * strong{display:block;font-size:.84rem;line-height:1.3}
  .kategori-geser-hp > * .kecil{font-size:.72rem}

  /* ---- tabel di HP: tetap bisa digeser, teks lebih jelas ---- */
  .tabel{font-size:.84rem}
  .tabel th{font-size:.74rem;padding:9px 10px}
  .tabel td{padding:9px 10px}

  /* ---- footer ringkas: daftar tautan sudah diwakili navigasi bawah ---- */
  .footer{padding:20px 0 8px;margin-top:22px}
  .footer .grid-4{grid-template-columns:1fr;gap:14px}
  .footer .grid-4 > div:nth-child(2),
  .footer .grid-4 > div:nth-child(3){display:none}
  .footer h4{margin-bottom:5px}
  .footer a{padding:4px 0;font-size:.88rem}
  .footer-bawah{margin-top:14px;padding-top:12px;font-size:.74rem}

  /* ---- tombol & form lebih nyaman disentuh ---- */
  .btn{padding:11px 16px}
  .btn-sm{padding:8px 12px;font-size:.84rem}
  .input,select.input,textarea.input{padding:12px 13px;font-size:.95rem}

  /* ---- strip saldo di bawah kolom pencarian ---- */
  .hm-saldo-strip{display:flex;align-items:center;gap:8px;padding:0 12px 9px}
  .hms-saldo{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:6px 11px;color:#fff}
  .hms-label{display:flex;align-items:center;gap:4px;font-size:.66rem;letter-spacing:.3px;text-transform:uppercase;color:#CFE3D6}
  .hms-label svg{width:13px;height:13px}
  .hms-saldo strong{font-size:1.02rem;color:var(--emas-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hms-aksi{display:flex;gap:6px;flex:0 0 auto}
  .hms-tombol{display:flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;padding:8px 11px;border-radius:11px;white-space:nowrap}
  .hms-tombol svg{width:14px;height:14px}
  .hms-topup{background:var(--emas-500);color:#3A2C05}
  .hms-cair{background:rgba(255,255,255,.92);color:var(--hijau-800)}

  /* ---- kategori: HANYA ikon (tanpa nama), tetap bisa digeser ---- */
  .kategori-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:56px;height:56px;padding:0;border-radius:14px;font-size:1.55rem;line-height:1;border:1px solid var(--line)}
  .kategori-bar .kat-nama{display:none}
  .kategori-bar .kat-ikon{display:block;line-height:1}
  .kategori-bar a.aktif{border-color:var(--hijau-600);background:var(--hijau-50)}

  /* ---- dua kolom: Produk Rekomendasi (kiri) & Produk Terlaris (kanan) ---- */
  .dua-kolom{gap:10px;margin:14px 0 4px}
  .dua-kolom__kartu{border-radius:14px}
  .dua-kolom__head{padding:9px 11px;gap:6px}
  .dua-kolom__judul{font-size:.8rem;gap:5px}
  .dua-kolom__judul svg{width:15px;height:15px}
  .dua-kolom__bingkai{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:6px}
  .mini-produk{border-radius:9px}
  .mini-produk--iklan::after{left:4px;top:4px;font-size:.56rem;padding:1px 5px}

  /* ---- katalog produk selalu tampil di beranda HP, tepat setelah blok dua kolom
          dan blok PPOB (order 45), agar produk fisik langsung terlihat tanpa menggulir jauh
          (urutan penuh tetap berlaku di PC) ---- */
  .wadah-bagian .blok-katalog{order:46!important}

  /* ---- notifikasi mengapung naik di atas navigasi bawah ---- */
  #toast-area{right:12px;left:12px;bottom:78px;max-width:none}

  /* ---- elemen khusus desktop disembunyikan di HP ---- */
  .hp-hanya-desktop{display:none!important}
  .sembunyi-hp{display:none!important}
}
@media (max-width:420px){
  .grid-produk{gap:8px}
  .kartu-produk .nama{font-size:.88rem}
  .kartu-produk .harga{font-size:1rem}
}

/* ------------------------------ Isi ulang gaya buku agen ------------------- */
/* Menu utama: saldo besar + grid ikon layanan */
.ppob-hero{border-radius:18px;padding:2px;background:linear-gradient(135deg,var(--hijau-700),var(--hijau-500) 55%,var(--emas-600));
  box-shadow:0 10px 26px rgba(6,58,37,.16)}
.ppob-hero-isi{border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  padding:20px 20px 18px;color:#fff;display:flex;flex-direction:column;gap:6px}
.ppob-hero-label{display:flex;align-items:center;gap:7px;font-size:.82rem;opacity:.9;font-weight:600}
.ppob-hero-label svg{width:17px;height:17px}
.ppob-hero-saldo{font-size:2.05rem;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.ppob-hero-aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ppob-hero-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;font-size:.83rem;font-weight:700;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;text-decoration:none}
.ppob-hero-btn:hover{background:#fff;color:var(--hijau-800)}
.ppob-hero-btn svg{width:16px;height:16px}

.ppob-judul-bagian{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:800;color:var(--hijau-800);
  margin:22px 0 10px;text-transform:uppercase;letter-spacing:.4px}
.ppob-judul-bagian svg{width:17px;height:17px;color:var(--emas-600)}
.ppob-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ppob-menu-pil{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 10px;
  border:1px solid var(--line);border-radius:16px;background:var(--putih);text-decoration:none;box-shadow:var(--shadow-sm,0 2px 8px rgba(6,58,37,.05))}
.ppob-menu-pil:hover{border-color:var(--emas-500);background:var(--emas-100);transform:translateY(-2px)}
.ppob-menu-ikon{font-size:1.9rem;line-height:1}
.ppob-menu-nama{font-size:.84rem;font-weight:700;color:var(--ink);line-height:1.25}
.ppob-menu-ket{font-size:.7rem;color:var(--muted)}

/* Pilih brand/operator & ringkasannya */
.ppob-brand{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ppob-brand-pil{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--line);border-radius:14px;
  background:var(--putih);text-decoration:none}
.ppob-brand-pil:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-brand-ringkas{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px}
.ppob-mini{flex:0 0 auto;padding:7px 14px;border:1px solid var(--line);border-radius:20px;background:#fff;
  font-size:.8rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.ppob-mini.aktif,.ppob-mini:hover{border-color:var(--hijau-600);background:var(--hijau-50);color:var(--hijau-800)}

/* Grid nominal (kartu angka besar) */
.ppob-nom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ppob-nom{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:14px 10px;
  border:1px solid var(--line);border-radius:14px;background:var(--putih);text-decoration:none}
.ppob-nom:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-nom.aktif{border-color:var(--hijau-600);background:var(--hijau-50);box-shadow:0 3px 12px rgba(6,58,37,.08)}
.ppob-nom-nama{font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.25}
.ppob-nom-harga{font-size:1.02rem;font-weight:800;color:var(--hijau-700)}

/* Keypad angka besar */
.ppob-keypad-layar-input{width:100%;text-align:center;font-size:1.7rem;font-weight:800;letter-spacing:2px;
  padding:14px 12px;border:2px solid var(--hijau-600);border-radius:14px;background:var(--hijau-50);color:var(--hijau-900)}
.ppob-keypad-layar-input::placeholder{font-size:1rem;letter-spacing:0;font-weight:600;color:var(--muted)}
.ppob-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.ppob-keypad button{min-height:56px;font-size:1.4rem;font-weight:800;border:1px solid var(--line);border-radius:14px;
  background:#fff;color:var(--ink);cursor:pointer}
.ppob-keypad button:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.ppob-keypad button:active{transform:scale(.97)}
.ppob-keypad .ppob-keypad-hapus,.ppob-keypad .ppob-keypad-bersih{font-size:1.1rem;background:var(--emas-100);border-color:var(--emas-300);color:var(--emas-700)}
.ppob-keypad .ppob-keypad-hapus span{display:block;font-size:.62rem;font-weight:600;line-height:1}

/* Pop-up konfirmasi (tengah layar) */
.ppob-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(6,32,22,.55);padding:16px;overflow:auto}
.ppob-modal.tampil{display:flex}
.ppob-modal-kotak{width:100%;max-width:520px;background:var(--putih);border-radius:18px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.32);max-height:92vh;display:flex;flex-direction:column}
.ppob-modal-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
  background:linear-gradient(135deg,var(--hijau-700),var(--hijau-500));color:#fff}
.ppob-modal-kepala strong{display:flex;align-items:center;gap:8px;font-size:1rem}
.ppob-modal-kepala svg{width:18px;height:18px}
.ppob-modal-tutup{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.ppob-modal-tutup svg{width:16px;height:16px}
.ppob-modal-isi{padding:16px;overflow:auto}
.ppob-ringkas{border:1px dashed var(--hijau-600);border-radius:14px;background:var(--hijau-50);padding:12px 14px;margin-bottom:14px}
.ppob-ringkas-baris{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:.86rem;align-items:baseline}
.ppob-ringkas-baris span{color:var(--muted)}
.ppob-ringkas-baris strong{text-align:right}
.ppob-ringkas .angka-besar{font-size:1.15rem;color:var(--hijau-800);letter-spacing:1px}
.ppob-ringkas-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;padding-top:9px;
  border-top:1px dashed var(--hijau-600);font-weight:800;text-transform:uppercase;font-size:.8rem;color:var(--hijau-800)}
.ppob-ringkas-total strong{font-size:1.5rem}

/* Bilah aksi bawah (buka lagi pop-up konfirmasi) */
.ppob-bar-bawah{position:fixed;left:0;right:0;bottom:74px;z-index:1100;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.ppob-bar-bawah .btn{margin:0}
.ppob-bar-ubah{flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--muted);text-decoration:none}
@media (min-width:901px){.ppob-bar-bawah{bottom:0}}

/* Riwayat transaksi (daftar, bukan tabel) */
.ppob-riwayat{display:flex;flex-direction:column}
.ppob-riwayat-baris{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--line);text-decoration:none}
.ppob-riwayat-baris:last-child{border-bottom:0}
.ppob-riwayat-baris:hover{background:var(--hijau-50)}
.ppob-riwayat-utama{display:flex;flex-direction:column;min-width:0}
.ppob-riwayat-kanan{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}

@media (max-width:680px){
  .ppob-menu{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .ppob-menu-pil{padding:12px 6px;gap:4px}
  .ppob-menu-ikon{font-size:1.6rem}
  .ppob-menu-nama{font-size:.74rem}
  .ppob-menu-ket{display:none}
  .ppob-hero-saldo{font-size:1.85rem}
  .ppob-nom-grid{gap:10px}
  .ppob-keypad button{min-height:52px}
}

/* ------------- Pemilih hak akses (kelompok menu) & kartu akun staf -------------
   Dipakai halaman Golongan Pengguna & Kelola Akun Staf. Tujuannya supaya isian
   hak akses tidak lagi melebar ke bawah di dalam tabel (keluhan: susah diklik). */
.pa-bungkus{display:flex;flex-direction:column;gap:16px}
.pa-kelompok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pa-bidang{border:1px solid var(--line);border-radius:12px;background:var(--putih);min-width:0;overflow:hidden}
.pa-bidang-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--hijau-50);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pa-daftar{display:flex;flex-direction:column}
.pa-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;min-width:0}
.pa-item:last-child{border-bottom:0}
.pa-item:hover{background:var(--hijau-50)}
.pa-item.terpilih{background:#EAF7EE}
.pa-item input{margin-top:2px;flex:0 0 auto;width:18px;height:18px}
.pa-item > span{min-width:0;display:flex;flex-direction:column}
.pa-label{font-size:.86rem;font-weight:600;overflow-wrap:anywhere}
@media(max-width:900px){
  .pa-kelompok{grid-template-columns:1fr}
  .pa-item{padding:12px}
}
/* Kartu akun staf (daftar pengguna di halaman Admin & Log) */
.grid-staf{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.kartu-staf{display:flex;flex-direction:column;gap:12px;padding:18px}
.kartu-staf__kepala{display:flex;gap:12px;align-items:flex-start}
.kartu-staf__avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--hijau-600),var(--emas-500));color:#fff;font-weight:700;font-size:1rem}
.kartu-staf__nama{font-weight:700;overflow-wrap:anywhere}
.kartu-staf__lencana{display:flex;gap:6px;flex-wrap:wrap}
.kartu-staf__info{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.84rem}
.kartu-staf__aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.kartu-staf__aksi .btn{flex:1 1 auto;justify-content:center}
.pita-akses{height:6px;border-radius:6px;background:#ECEFF0;overflow:hidden}
.pita-akses > span{display:block;height:100%;background:linear-gradient(90deg,var(--hijau-600),var(--emas-500))}

/* ================= KASIR / POS — tampilan kasir profesional =================
   Mengikuti acuan aplikasi kasir: bilah atas (tab + aksi), baris pencarian,
   grid kartu layanan/produk berwarna, dan panel kanan berisi ringkasan +
   tombol aksi besar. Semua ukuran dibuat nyaman disentuh di ponsel kasir. */

/* ---- Bilah atas ---- */
.pos-bilah{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--putih);
  border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.pos-merek{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;font-weight:800;
  background:linear-gradient(135deg,#0E6E45,#12A15F);color:#fff;text-decoration:none;white-space:nowrap}
.pos-merek svg{width:18px;height:18px}
.pos-tab{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--putih);color:inherit;text-decoration:none;font-weight:600;font-size:.88rem;white-space:nowrap}
.pos-tab:hover{background:var(--hijau-50);border-color:var(--hijau-500)}
.pos-tab.aktif{background:#EEF2F6;border-color:#C9D4DE}
.pos-bilah__kanan{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pos-tombol-dash{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px;font-weight:700;
  background:linear-gradient(135deg,#1D4ED8,#3B82F6);color:#fff;text-decoration:none;white-space:nowrap}
.pos-tombol-shift{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px;font-weight:800;
  background:linear-gradient(135deg,#E11D48,#BE123C);color:#fff;text-decoration:none;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.4px;font-size:.82rem}
.pos-ikon-tombol{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  border:1px solid var(--line);background:var(--putih);color:inherit;text-decoration:none}
.pos-ikon-tombol:hover{background:var(--hijau-50)}

/* ---- Baris pencarian / identitas transaksi ---- */
.pos-baris2{display:grid;grid-template-columns:auto minmax(0,1.2fr) auto auto minmax(0,1fr);gap:10px;
  align-items:end;margin-top:14px}
.pos-baris2 .input{margin:0}
.pos-kotak-cari{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;
  background:var(--putih);padding:0 12px}
.pos-kotak-cari svg{width:18px;height:18px;color:var(--muted,#7A8699);flex:0 0 auto}
.pos-kotak-cari input{border:0;background:transparent;padding:11px 0;font:inherit;width:100%;outline:none}
.pos-label-kecil{font-size:.72rem;font-weight:700;color:var(--muted,#6B7A8D);text-transform:uppercase;letter-spacing:.4px}

/* ---- Area utama: kiri (pilihan) + kanan (ringkasan) ---- */
.pos-utama{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start;margin-top:14px}
.pos-panel{background:var(--putih);border:1px solid var(--line);border-radius:14px;min-width:0}
.pos-panel__kepala{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.pos-panel__isi{padding:14px}
.pos-panel__kaki{border-top:1px solid var(--line);padding:12px 14px;background:var(--hijau-50);
  border-radius:0 0 14px 14px}
@media(max-width:1100px){.pos-utama{grid-template-columns:minmax(0,1fr)}.pos-baris2{grid-template-columns:1fr 1fr}}
/* Layar kasir ponsel: baris pencarian menumpuk satu kolom & kotak cari boleh menyusut
   (tanpa ini, min-width kotak cari membuat halaman melebar ~34px di 390px). */
@media(max-width:700px){
  .pos-baris2{grid-template-columns:1fr}
  .pos-kotak-cari{min-width:0}
  .pos-baris2 form{flex-wrap:wrap}
  .pos-baris2 form .input{max-width:none!important}
}

/* ---- Saringan kelompok layanan ---- */
.pos-saring{display:flex;gap:8px;flex-wrap:wrap}
.pos-saring a,.pos-saring button{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--putih);font-size:.84rem;font-weight:600;color:inherit;
  text-decoration:none;cursor:pointer}
.pos-saring a.aktif,.pos-saring button.aktif{background:#EEF2F6;border-color:#C9D4DE}

/* ---- Kartu layanan: warna khas tiap layanan + ikon besar ---- */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pos-ubin{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:13px;
  border:1px solid transparent;text-decoration:none;color:#fff;min-height:132px;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease}
.pos-ubin:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(9,40,28,.24)}
.pos-ubin__ikon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35)}
.pos-ubin__ikon svg{width:24px;height:24px}
.pos-ubin__nama{font-weight:800;font-size:.98rem;line-height:1.2;text-transform:uppercase;letter-spacing:.2px}
.pos-ubin__ket{font-size:.76rem;line-height:1.35;opacity:.95}
.pos-ubin__badge{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.28);border-radius:8px;
  padding:3px 8px;font-size:.68rem;font-weight:700}
.pos-ubin--mati{filter:grayscale(.6);opacity:.72;cursor:not-allowed}
.pos-ubin--mati:hover{transform:none;box-shadow:none}
/* Palet warna layanan */
.lyn-biru{background:linear-gradient(135deg,#0B5D8F,#1E88C7)}
.lyn-hijau{background:linear-gradient(135deg,#0E6E45,#16A34A)}
.lyn-emas{background:linear-gradient(135deg,#9A7418,#D4A72C)}
.lyn-ungu{background:linear-gradient(135deg,#4C1D95,#7C3AED)}
.lyn-oranye{background:linear-gradient(135deg,#B45309,#EA8C26)}
.lyn-teal{background:linear-gradient(135deg,#0F766E,#14B8A6)}
.lyn-merah{background:linear-gradient(135deg,#9F1239,#E11D48)}
.lyn-cyan{background:linear-gradient(135deg,#0E7490,#22A5C3)}

/* ---- Kartu produk PPOB & tenan (gaya kartu produk kasir) ---- */
.pos-produk{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pos-produk form{display:flex}
.pos-produk__kartu{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:100%;min-height:104px;
  padding:14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(135deg,#0B5D8F,#1E88C7);transition:transform .12s ease}
.pos-produk__kartu:hover{transform:translateY(-2px)}
.pos-produk__kartu .tenang{color:rgba(255,255,255,.85)}
.pos-produk__harga{font-weight:800;font-size:1.05rem;color:#FFE08A}

/* ---- Panel kanan: ringkasan, transaksi, dan aksi besar ---- */
.pos-ringkas{display:flex;flex-direction:column}
.pos-ringkas-baris{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:.92rem}
.pos-ringkas-baris:last-child{border-bottom:0}
.pos-ringkas-baris--total{background:var(--hijau-50);font-size:1.02rem}
.pos-ringkas-baris--total strong{font-size:1.4rem;color:var(--hijau-600)}
.pos-aksi-besar{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px 18px;border-radius:13px;border:0;font:inherit;font-weight:800;font-size:1.02rem;color:#fff;
  cursor:pointer;text-decoration:none;background:linear-gradient(135deg,#EA7C1F,#F59E0B)}
.pos-aksi-besar:hover{filter:brightness(1.05)}
.pos-aksi-besar--hijau{background:linear-gradient(135deg,#0E6E45,#16A34A)}
.pos-aksi-besar--biru{background:linear-gradient(135deg,#1D4ED8,#3B82F6)}
.pos-aksi-besar[disabled]{opacity:.55;cursor:not-allowed}
.pos-daftar-transaksi{display:flex;flex-direction:column}
.pos-item{display:flex;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.pos-item:last-child{border-bottom:0}
.pos-item__ikon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  color:#fff}
.pos-item__ikon svg{width:18px;height:18px}
.pos-item__isi{flex:1;min-width:0}
.pos-item__nama{font-weight:700;font-size:.88rem;overflow-wrap:anywhere}
.pos-item__nilai{font-weight:800;white-space:nowrap}
.pos-kosong{padding:18px 14px;text-align:center}

/* ---- Identitas anggota (konfirmasi) ---- */
.pos-identitas{display:flex;gap:14px;align-items:center;padding:13px;border:1px solid var(--line);
  border-radius:12px;background:var(--hijau-50);margin-bottom:14px;flex-wrap:wrap}
.pos-identitas__foto{width:60px;height:74px;border-radius:10px;overflow:hidden;background:#fff;display:grid;
  place-items:center;border:1px solid var(--line);flex:0 0 auto}
.pos-identitas__foto img{width:100%;height:100%;object-fit:cover}
.pos-identitas__nama{font-size:1.12rem;font-weight:800;line-height:1.2}

/* ---- Kotak QRIS mini ATM ---- */
.pos-qris{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.pos-qris__kotak{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--putih);text-align:center}
.pos-qris__kode{font-weight:800;letter-spacing:.4px;margin-bottom:10px}
.pos-qris__gambar{width:196px;height:196px;margin:0 auto;border:1px solid var(--line);border-radius:12px;
  background:repeating-conic-gradient(#152A20 0% 25%, #fff 0% 50%) 50%/16px 16px;display:grid;place-items:center}
.pos-qris__sel{background:#fff;border-radius:10px;padding:10px 14px;border:1px solid var(--line);text-align:center}
.pos-qris__sel span{display:block;font-size:.7rem;letter-spacing:1.4px;color:var(--muted,#635F82)}
.pos-qris__sel strong{display:block;font-size:.95rem;color:var(--merah)}
@media(max-width:900px){
  .pos-qris{grid-template-columns:1fr}
  .pos-qris__gambar{width:168px;height:168px}
  .pos-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .pos-ubin{min-height:124px;padding:14px}
  .pos-ubin__ikon{width:38px;height:38px}
  .pos-bilah{padding:9px}
  .pos-merek,.pos-tab,.pos-tombol-dash,.pos-tombol-shift{padding:8px 12px;font-size:.8rem}
}

/* ---- Pemilih metode bayar di POS ---- */
.bayar-bungkus{display:flex;flex-direction:column;gap:10px}
.bayar-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.bayar-opsi{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--putih);cursor:pointer;min-width:0}
.bayar-opsi:hover{border-color:var(--hijau-500);background:var(--hijau-50)}
.bayar-opsi.terpilih{border-color:var(--hijau-600);background:#EAF7EE;box-shadow:inset 0 0 0 1px var(--hijau-600)}
.bayar-opsi input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}
.bayar-opsi__ikon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hijau-600),var(--emas-500));color:#fff}
.bayar-opsi__ikon svg{width:17px;height:17px}
.bayar-opsi__isi{min-width:0;display:flex;flex-direction:column}
.bayar-opsi__nama{font-weight:700;font-size:.9rem}
.bayar-note{border:1px dashed var(--line);border-radius:11px;padding:11px 13px;background:var(--hijau-50);
  font-size:.82rem;line-height:1.45}
.bayar-note--kuning{background:#FFF7E6;border-color:#F0C36D}
.bayar-note--gateway{background:#EEF4FF;border-color:#B9CDF0}
@media(max-width:700px){.bayar-daftar{grid-template-columns:1fr}}

/* ---- Status verifikasi pembayaran kasir ---- */
.verif-baris{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px;border:1px solid var(--line);
  border-radius:12px;background:var(--putih);margin-bottom:12px;min-width:0}
.verif-baris__utama{flex:1;min-width:220px}
.verif-kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.verif-tagih{font-size:1.25rem;font-weight:800;color:var(--hijau-600);white-space:nowrap}
.verif-unik{background:#FFF7E6;border:1px solid #F0C36D;border-radius:8px;padding:2px 8px;font-weight:700;
  font-size:.78rem;white-space:nowrap}

/* ---- Halaman struk: tombol kembali ke POS ---- */
.struk-aksi{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto 14px;max-width:640px}
.struk-aksi a,.struk-aksi button{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:11px;
  border:1px solid #0E6E45;background:#0E6E45;color:#fff;font:inherit;font-weight:700;font-size:.88rem;
  text-decoration:none;cursor:pointer}
.struk-aksi a.putih{background:#fff;color:#0B5D3B}
.struk-aksi a.utama{background:linear-gradient(135deg,#EA7C1F,#F59E0B);border-color:#EA7C1F}

/* ------------------------------ Cetak potong gaji ------------------- */
.cetak-saja{display:none}
@media print{
  body{background:#fff;font-size:11.5pt}
  .no-print,.header,.footer,.strip-atas,.kategori-bar,#toast-area{display:none!important}
  .cetak-saja{display:block}
  .wadah{max-width:100%;padding:0}
  .kartu{box-shadow:none;border:1px solid #999;border-radius:0}
  .kartu-head{border-bottom:1px solid #999}
  .tabel th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:#000;text-decoration:none}
  @page{margin:1.4cm}
}

/* ------------------------------ Pengunduran diri anggota ------------------- */
/* Penunjuk tahap permohonan (anggota): ringkas, bisa digeser di HP. */
.pgr-stepper{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}
.pgr-stepper::-webkit-scrollbar{display:none}
.pgr-step{display:flex;align-items:center;gap:8px;flex:1 0 auto;min-width:150px;padding:9px 12px;
  border:1px solid var(--line);border-radius:12px;background:#fff;font-size:.8rem;color:var(--abu-600)}
.pgr-step .pgr-titik{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:#EEF2EF;color:#5E7268;font-weight:800;font-size:.78rem;flex:none}
.pgr-step.selesai{border-color:#BFE3CE;background:#F2FAF5;color:#0B5D3B}
.pgr-step.selesai .pgr-titik{background:#0E6E45;color:#fff}
.pgr-step.aktif{border-color:#0E6E45;background:#E9F5EE;color:#0B5D3B;box-shadow:0 2px 10px rgba(14,110,69,.12)}
.pgr-step.aktif .pgr-titik{background:#EA7C1F;color:#fff}
.pgr-dok{border:1px dashed #C8D6CC;border-radius:12px;padding:12px 12px 4px;margin-top:6px;background:#FAFCFA}
.pgr-dok-judul{font-weight:700;font-size:.86rem;color:var(--hijau-800)}
.pgr-setuju{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:.85rem;line-height:1.5;
  padding:12px;border-radius:12px;background:#FFF8E8;border:1px solid #F0DFB5}
.pgr-setuju input{width:20px;height:20px;flex:none;margin-top:1px}
@media (max-width:680px){
  .pgr-step{min-width:132px}
  .pgr-setuju{font-size:.8rem}
}
.pgr-step .pgr-nama{display:flex;flex-direction:column;line-height:1.25}
.pgr-step .pgr-nama small{font-size:.68rem;color:var(--abu-500);font-weight:500}
.pgr-stepper--panel .pgr-step{min-width:118px}

/* Lini masa catatan tiap tahap (anggota & panel) */
.pgr-timeline{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pgr-timeline__baris{position:relative;padding:10px 12px 10px 14px;border:1px solid var(--line);
  border-left:4px solid var(--hijau-600,#0E6E45);border-radius:10px;background:#fff}
.pgr-timeline__baris--kembali{border-left-color:#EA7C1F;background:#FFF9EE}
.pgr-timeline__kepala{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}

/* Rincian simpanan vs hutang: KARTU per baris, isian bertumpuk (tombol tidak menempel isian) */
.pgr-grup{margin-bottom:14px}
.pgr-grup__judul{font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.4px;
  color:var(--hijau-800);margin:0 0 8px}
.pgr-rincian{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px}
.pgr-rincian__nama{font-weight:700;font-size:.9rem}
.pgr-rincian__meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.pgr-rincian__nilai{font-weight:800;font-size:1rem;color:var(--hijau-700);white-space:nowrap;text-align:right}
.pgr-rincian__aksi{grid-column:1 / -1;border-top:1px dashed var(--line);padding-top:10px;
  display:flex;flex-direction:column;gap:8px}
.pgr-koreksi{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:12px;align-items:start}
.pgr-koreksi__bidang{display:flex;flex-direction:column;gap:4px;min-width:0}
.pgr-koreksi__bidang .input{width:100%}
.pgr-koreksi__tombol{grid-column:1 / -1;margin-top:2px}
.pgr-hapus{margin-top:2px}
.pgr-total{border-top:2px solid var(--line);padding-top:10px;margin-top:6px;display:flex;flex-direction:column;gap:6px}
.pgr-total__netto{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-size:1.02rem}
@media (max-width:760px){
  .pgr-koreksi{grid-template-columns:1fr}
  .pgr-rincian{grid-template-columns:1fr}
  .pgr-rincian__nilai{text-align:left}
}