/* =====================================================================
   AMANAH — Design System
   Yayasan Al-Fatihah · Supply Chain & Inventory
   ---------------------------------------------------------------------
   SATU sumber untuk seluruh tampilan. Halaman TIDAK boleh menulis CSS
   sendiri — kalau butuh bentuk baru, tambahkan komponen di sini supaya
   seluruh sistem ikut mendapatkannya.

   Nama token & kelas sengaja dipertahankan dari v3 (--primary, .card,
   .btn-primary, .tag …) sehingga 40 halaman lama langsung ikut berubah
   rupa tanpa disentuh satu per satu.

   Tema GELAP adalah bawaan. Tema terang tetap tersedia lewat tombol —
   petugas gudang kadang bekerja di ruang bercahaya sangat terang tempat
   layar HP murah lebih terbaca dengan latar putih.
   ===================================================================== */

/* =====================================================================
   1. TOKEN — gelap (bawaan)
   ===================================================================== */
:root{
  /* -------------------------------------------------------------------
     TANGGA PERMUKAAN — inilah yang menciptakan kedalaman.

     Sebelumnya tiga lapis di atas latar hanya berbeda 2 satuan kecerahan
     (#0F172A / #111827 / #131B2E). Akibatnya kartu tidak terangkat dari
     sidebar, dropdown tidak melayang di atas kartu, dan kotak isian tidak
     terbenam — seluruh layar jadi satu bidang datar. Bayangan sebagus
     apa pun tidak menolong kalau warnanya sendiri tidak melangkah.

     Sekarang tiap lapis berjarak ±6 satuan, cukup terlihat tapi tetap
     tenang. Urutannya mengikuti ARTI, bukan nomor:

         bg          halaman
         surface-3   kendali & sidebar   — terbenam
         surface     kartu               — bidang kerja
         surface-2   dropdown, modal     — melayang
         surface-4   puncak

     Warna dasar #070B17 dan ungu #7C3AED dipertahankan — itu warna
     lembaga, bukan keputusan saya.
     ------------------------------------------------------------------- */
  --bg:#070B17;
  --surface-3:#0B1120;
  --surface:#101829;
  --surface-2:#161F35;
  --surface-4:#1C2742;

  /* Garis ikut bernada sama dengan permukaannya. Putih murni di atas
     latar kebiruan terbaca kotor — mata menangkapnya sebagai debu, bukan
     sebagai batas yang disengaja. */
  --border:rgba(150,170,220,.13);
  --border-kuat:rgba(160,180,230,.2);

  /* Teks */
  --text:#F8FAFC;
  --text-2:#CBD5E1;
  --muted:#94A3B8;
  --muted-2:#7B8AA6;

  /* Tindakan utama */
  --primary:#7C3AED;
  --primary-2:#8B5CF6;
  --primary-lembut:rgba(124,58,237,.15);
  --primary-grad:#7C3AED;   /* rata — dulu gradien, tapi tombol utama tidak perlu dihias */

  /* Makna — warna adalah data, bukan dekorasi */
  --accent:#06B6D4;        /* persediaan / inventory */
  --info:#3B82F6;
  --blue:#2563EB;
  --green:#10B981;
  --amber:#F59E0B;
  --orange:#F59E0B;
  --red:#EF4444;

  /* -------------------------------------------------------------------
     WARNA TEKS STATUS — disetarakan terangnya.

     Nilai bawaan Tailwind punya terang-terap yang timpang di latar gelap:
     kuning terbaca paling menyala, merah justru paling redup. Akibatnya
     badge "Aman" berteriak lebih keras daripada "Sudah Expired" — persis
     terbalik dari yang seharusnya.

     Sekarang semuanya disetel ke pita terang yang berdekatan, dengan
     merah SEDIKIT di atas yang lain karena ia memang harus paling cepat
     tertangkap mata.
     ------------------------------------------------------------------- */
  --green-t:#35C892;
  --amber-t:#E8AE30;
  --red-t:#FF8B85;
  --info-t:#7CB4FF;
  --accent-t:#2BC3DC;
  --primary-t:#B49CFF;

  /* Bayangan — berlapis, bukan satu sapuan.
     Bayangan tunggal terlihat seperti stiker. Dua lapis (satu rapat untuk
     mendudukkan objek, satu lebar untuk jaraknya) itulah yang membuat
     permukaan terasa benar-benar terangkat. */
  --shadow-1:0 1px 2px rgba(0,0,0,.36);
  --shadow-2:0 1px 2px rgba(0,0,0,.3), 0 6px 18px -6px rgba(0,0,0,.5);
  --shadow-3:0 2px 6px rgba(0,0,0,.35), 0 16px 44px -14px rgba(0,0,0,.72);
  --glow:0 0 0 1px rgba(139,92,246,.32);
  /* Garis cahaya 1px di tepi atas permukaan. Di tema gelap inilah yang
     membedakan "kotak abu" dari "panel kaca" — meniru cahaya yang jatuh
     dari atas. Tidak dipakai di tema terang karena di sana justru kotor. */
  --kilau:inset 0 1px 0 rgba(255,255,255,.045);
  --cincin:0 0 0 3px var(--primary-lembut);

  /* Bentuk */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --sidebar:256px;
  --topbar:68px;
  --nav-jarak:12px;      /* jarak sidebar melayang dari tepi layar */

  /* Jarak — satu tangga, kelipatan 4. Sebelumnya tiap halaman memilih
     angkanya sendiri (13px, 18px, 22px) sehingga ritme vertikalnya kacau. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* -------------------------------------------------------------------
     HURUF — tiga ukuran optis dari keluarga yang sama.

     Windows 11 membawa "Segoe UI Variable" dalam tiga potongan yang
     digambar ulang untuk ukuran berbeda, bukan sekadar diperbesar:

       Small   — untuk label mungil; huruf lebih terbuka & tebal supaya
                 tetap terbaca di 11px
       Text    — untuk kalimat & isi tabel
       Display — untuk judul & angka besar; jarak antarhuruf lebih rapat
                 dan lengkungnya lebih halus

     Inilah cara antarmuka mahal dibuat: bukan menambah hiasan, tapi
     memakai bentuk huruf yang tepat untuk tiap ukuran. Sebelumnya semua
     memakai "Segoe UI" biasa dalam satu bentuk — terbaca, tapi datar.

     Semua tersedia LOKAL di Windows 11. Tidak ada unduhan, tidak ada CDN,
     tetap jalan saat gudang offline. Di komputer lama yang belum punya,
     susunannya turun sendiri ke Segoe UI seperti semula.
     ------------------------------------------------------------------- */
  --f-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-text:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-small:"Segoe UI Variable Small","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,ui-monospace,"SF Mono",monospace;

  /* Tangga ukuran huruf — menggantikan angka yang dulu dipilih sendiri
     per halaman (13.2px, 12.5px, 11.5px …). */
  --h-xs:11.5px; --h-sm:12.5px; --h-base:13.5px; --h-md:15px;
  --h-lg:17px;   --h-xl:21px;   --h-2xl:26px;    --h-3xl:33px;

  /* Gerak */
  --t:180ms cubic-bezier(.4,0,.2,1);
  --t-cepat:140ms cubic-bezier(.4,0,.2,1);
  --t-pelan:260ms cubic-bezier(.32,.72,0,1);
}

/* =====================================================================
   2. TOKEN — terang (lewat tombol tema)
   ===================================================================== */
html[data-theme="light"]{
  /* Masalah kembar dari tema gelap: --surface-3 dan --bg dulu PERSIS
     sama (#F1F5F9), jadi sidebar, kotak isian, dan tombol menyatu dengan
     halaman — tidak ada yang terlihat bisa ditekan.
     Sekarang kendali sedikit lebih kelabu dari halaman, kartu putih
     bersih, dan yang melayang putih dengan bayangan. */
  --bg:#F3F6FA;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#EBF0F7;
  --surface-4:#FFFFFF;

  --border:#E1E8F1;
  --border-kuat:#C6D1E0;

  --text:#0D1526;
  --text-2:#33415A;
  --muted:#61708A;
  --muted-2:#64728A;

  --primary:#6D28D9;
  --primary-2:#7C3AED;
  --primary-lembut:rgba(109,40,217,.08);

  --green:#059669; --amber:#C2740A; --orange:#C2740A; --red:#DC2626;
  --accent:#0891B2; --info:#2563EB;

  /* Di latar terang yang perlu disetarakan adalah GELAPNYA — dan merah
     dibuat paling pekat, dengan alasan yang sama seperti di tema gelap. */
  --green-t:#04705B; --amber-t:#8A5208; --red-t:#B01818;
  --info-t:#1D4ED8;  --accent-t:#0C6178; --primary-t:#7136DC;

  --shadow-1:0 1px 2px rgba(15,23,42,.06);
  --shadow-2:0 1px 2px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.14);
  --shadow-3:0 2px 6px rgba(15,23,42,.08), 0 16px 40px -14px rgba(15,23,42,.22);
  --glow:0 0 0 1px rgba(109,40,217,.2);
  --kilau:none;                 /* garis cahaya hanya masuk akal di tema gelap */
}

/* =====================================================================
   3. DASAR
   ===================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-text);
  background:var(--bg);color:var(--text);font-size:var(--h-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Angka rata kolom — masalah U7 */
  font-variant-numeric:tabular-nums;
  /* Huruf sambung & pembeda angka nol dinyalakan; keduanya bagian dari
     kesan "digambar", bukan "diketik". */
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
}

/* Judul & angka besar memakai potongan Display — jarak antarhurufnya
   lebih rapat, jadi kalimat pendek terlihat padat dan disengaja. Pada
   ukuran besar, huruf yang direnggangkan adalah ciri paling cepat
   dikenali dari antarmuka murah. */
h1,h2,h3,h4,.kpi-v,.kpi .v{font-family:var(--f-display);
  font-feature-settings:"kern" 1,"liga" 1;}
/* Label mungil huruf besar memakai potongan Small — digambar lebih
   terbuka supaya tetap terbaca meski hanya 11px. */
.kpi-l,.label-mini,.nav .sec,.nav button.sec-btn,th,.tag,.step .s small{
  font-family:var(--f-small)}
a{color:inherit;text-decoration:none}

/* Cincin fokus yang sama di SELURUH sistem — keyboard dan pembaca layar
   harus selalu tahu di mana posisinya. Dua lapis: garis gelap di dalam
   supaya tetap terlihat di atas tombol ungu maupun latar gelap. */
:focus-visible{outline:2px solid var(--primary-2);outline-offset:2px;border-radius:5px}
.btn:focus-visible,.icon-btn:focus-visible,.userchip:focus-visible{
  outline:2px solid var(--primary-2);outline-offset:2px;
  box-shadow:0 0 0 4px var(--primary-lembut)}

::selection{background:rgba(124,58,237,.32);color:var(--text)}

/* Batang gulir ramping di seluruh aplikasi — bawaan Windows tebal dan
   abu terang, mencolok sekali di atas latar gelap. */
*{scrollbar-width:thin;scrollbar-color:var(--border-kuat) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-kuat);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2);background-clip:content-box}
code{font-family:var(--f-mono);font-size:.9em;
  background:var(--surface-3);border:1px solid var(--border);padding:1.5px 6px;border-radius:6px}
svg{flex-shrink:0}
.ikon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.ikon-sm{width:15px;height:15px}
.ikon-lg{width:22px;height:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   4. KERANGKA
   ===================================================================== */
/* ---------------------------------------------------------------------
   SIDEBAR MELAYANG (inset)

   Dulu sidebar adalah dinding penuh yang menempel ke tepi layar, dipisah
   sebuah garis. Bentuk itu bawaan kerangka web mana pun — dan itulah
   sebabnya ia terbaca biasa.

   Sekarang ia panel tersendiri: ada jarak ke tepi, sudutnya membulat,
   terangkat oleh bayangan. Isi halaman jadi kanvas di belakangnya. Tidak
   ada isi yang berubah — hanya berhenti menyatu dengan jendela browser.
   --------------------------------------------------------------------- */
.app{display:flex;min-height:100vh}
/* Lebar ditulis SEBAGAI ANGKA, bukan var(--sidebar).
   Properti yang dianimasikan lewat transition tidak selalu ikut berubah
   ketika nilainya berasal dari custom property yang diperbarui — di
   Chrome, `width:var(--sidebar)` bersama `transition:width` membuat
   lebarnya terkunci di nilai lama walau tokennya sudah 72px. Token tetap
   dipakai untuk hitungan margin .main, yang tidak dianimasikan. */
.sidebar{width:256px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-2),var(--kilau);
  position:fixed;top:var(--nav-jarak);bottom:var(--nav-jarak);left:var(--nav-jarak);
  z-index:40;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1)}
.main{flex:1;margin-left:calc(var(--sidebar) + var(--nav-jarak) * 2);
  display:flex;flex-direction:column;min-width:0;
  transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
.content{padding:var(--s7) var(--s8) 52px;max-width:1520px;width:100%;margin:0 auto;flex:1}

/* ---------- merek ---------- */
.brand{display:flex;align-items:center;gap:11px;padding:0 18px;height:var(--topbar);
  border-bottom:1px solid var(--border);flex-shrink:0}
.brand .logo{width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:var(--primary-grad);display:grid;place-items:center;color:#fff;
  box-shadow:0 3px 12px -3px rgba(124,58,237,.7)}
.brand .logo svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.brand b{font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.022em;
  display:block;line-height:1.2}
.brand span{font-size:10.5px;color:var(--muted-2);display:block;letter-spacing:.04em;
  text-transform:uppercase;font-weight:600}
/* Warna merek berbeda per peran — pengguna langsung tahu portal mana */
.sidebar[data-peran="supplier"] .logo{background:linear-gradient(135deg,#06B6D4,#2563EB);
  box-shadow:0 3px 12px -3px rgba(6,182,212,.6)}
.sidebar[data-peran="toko"] .logo{background:linear-gradient(135deg,#10B981,#06B6D4);
  box-shadow:0 3px 12px -3px rgba(16,185,129,.6)}

/* ---------- navigasi ---------- */
.nav{padding:10px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border-kuat) transparent}
.nav::-webkit-scrollbar{width:5px}
.nav::-webkit-scrollbar-thumb{background:var(--border-kuat);border-radius:3px}

.nav .sec{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  padding:14px 11px 5px;font-weight:700;user-select:none}

.nav a{display:flex;align-items:center;gap:11px;padding:9.5px 11px;border-radius:9px;
  color:var(--text-2);font-weight:520;font-size:var(--h-base);position:relative;
  letter-spacing:-.004em;
  transition:background var(--t-cepat),color var(--t-cepat)}
.nav a .ic{width:18px;height:18px;flex-shrink:0;opacity:.7;stroke:currentColor;fill:none;
  stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--t-cepat)}
.nav a .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  padding:1px 6.5px;border-radius:20px;min-width:19px;text-align:center;line-height:1.6}
.nav a .ch{margin-left:auto;width:14px;height:14px;opacity:.4;stroke:currentColor;fill:none;
  stroke-width:2.4;transition:transform var(--t)}
.nav a:hover{background:rgba(255,255,255,.045);color:var(--text)}
html[data-theme="light"] .nav a:hover{background:var(--surface-3)}
.nav a:hover .ic{opacity:1}

.nav a:active{background:rgba(255,255,255,.07)}

/* Penanda halaman aktif: latar lembut DAN batang di tepi kiri.
   Latar saja terlalu samar di layar HP murah dengan sudut pandang miring —
   batang solid tetap terbaca meski warnanya pudar. */
.nav a.active{background:var(--primary-lembut);
  color:var(--text);font-weight:650;box-shadow:inset 0 0 0 1px rgba(139,92,246,.28)}
.nav a.active::before{content:"";position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);width:3px;height:19px;border-radius:0 3px 3px 0;
  background:var(--primary-2)}
.nav a.active .ic{opacity:1;stroke:var(--primary-t)}
.nav a.active .bdg{background:var(--primary)}

/* Grup yang bisa dilipat */
.nav .grup-tutup{display:none}
.nav a.buka .ch{transform:rotate(90deg)}
.nav button.sec-btn{display:flex;align-items:center;width:100%;background:none;border:0;
  cursor:pointer;font:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);padding:14px 11px 5px;font-weight:700;transition:color var(--t-cepat)}
.nav button.sec-btn:hover{color:var(--text-2)}
.nav button.sec-btn svg{margin-left:auto;width:12px;height:12px;stroke:currentColor;fill:none;
  stroke-width:2.6;transition:transform var(--t)}
.nav button.sec-btn[aria-expanded="false"] svg{transform:rotate(-90deg)}

/* =====================================================================
   4b. SIDEBAR TERLIPAT — rel ikon
   ---------------------------------------------------------------------
   Ditandai lewat html[data-nav="rapat"], disimpan di cookie supaya
   pilihannya bertahan antar halaman.

   Rel ikon menyerahkan 184px ruang kembali ke isi halaman — di layar
   laptop 1366px itu selisih antara tabel stok yang harus digeser dan
   tabel yang muat seluruhnya.

   Label TIDAK hilang begitu saja: ia jadi tooltip. Ikon tanpa nama
   memaksa petugas menghafal 18 lambang, dan itu kemunduran, bukan
   kemajuan — semahal apa pun tampilannya.
   ===================================================================== */
html[data-nav="rapat"]{--sidebar:72px}
html[data-nav="rapat"] .sidebar{width:72px}

html[data-nav="rapat"] .brand{padding:0;justify-content:center}
html[data-nav="rapat"] .brand>div{display:none}
html[data-nav="rapat"] .nav{padding:10px 12px}
html[data-nav="rapat"] .nav a{justify-content:center;padding:11px 0;gap:0}
html[data-nav="rapat"] .nav a>span:not(.bdg){display:none}
html[data-nav="rapat"] .nav a.active::before{left:-12px}

/* Judul grup jadi garis pemisah — pengelompokannya tetap terasa
   walau namanya tidak terbaca. */
html[data-nav="rapat"] .nav .sec,
html[data-nav="rapat"] .nav button.sec-btn{
  height:1px;padding:0;margin:11px 6px;overflow:hidden;
  background:var(--border);color:transparent;font-size:0}
html[data-nav="rapat"] .nav button.sec-btn svg{display:none}
html[data-nav="rapat"] .nav .sec:first-child{margin-top:4px}

/* Lencana jadi titik di sudut ikon — angkanya tidak muat, tapi
   keberadaan hal yang menunggu tetap harus terlihat. */
html[data-nav="rapat"] .nav a .bdg{position:absolute;top:5px;right:11px;
  min-width:8px;width:8px;height:8px;padding:0;font-size:0;border-radius:50%;
  border:2px solid var(--surface);box-sizing:content-box}

/* Tooltip — hanya saat terlipat, dan hanya untuk penunjuk presisi.
   Di layar sentuh tooltip tidak pernah muncul, jadi mode rapat juga
   tidak ditawarkan di sana (lihat blok pointer:coarse). */
html[data-nav="rapat"] .nav a::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--surface-4);color:var(--text);border:1px solid var(--border-kuat);
  border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:600;
  white-space:nowrap;box-shadow:var(--shadow-3);z-index:60;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-cepat),transform var(--t-cepat)}
html[data-nav="rapat"] .nav a:hover::after,
html[data-nav="rapat"] .nav a:focus-visible::after{
  opacity:1;transform:translateY(-50%) translateX(0)}

html[data-nav="rapat"] .sb-help{margin:10px;padding:11px;justify-content:center}
html[data-nav="rapat"] .sb-help div{display:none}

/* Tombol lipat di topbar. Hanya untuk tetikus — di layar sentuh
   sidebar sudah berupa panel geser, melipatnya tidak ada gunanya. */
.rail-btn{display:none;background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r-sm);width:37px;height:37px;cursor:pointer;color:var(--muted);
  place-items:center;flex-shrink:0;transition:var(--t)}
.rail-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t)}
.rail-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-kuat)}
html[data-nav="rapat"] .rail-btn svg{transform:rotate(180deg)}
@media(min-width:901px){ .rail-btn{display:grid} }

/* ---------- kartu bantuan di dasar sidebar ---------- */
.sb-help{margin:10px;padding:13px;border-radius:var(--r);flex-shrink:0;
  background:var(--primary-lembut);
  border:1px solid rgba(139,92,246,.26);display:flex;gap:11px;align-items:center;
  transition:transform var(--t),box-shadow var(--t)}
.sb-help:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.sb-help svg{width:19px;height:19px;stroke:var(--primary-t);fill:none;stroke-width:1.85}
.sb-help b{display:block;font-size:12.5px;font-weight:650}
.sb-help small{display:block;font-size:11px;color:var(--muted)}

/* =====================================================================
   5. TOPBAR
   ===================================================================== */
.topbar{position:sticky;top:0;z-index:30;min-height:var(--topbar);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 24px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--text);padding:6px;
  border-radius:var(--r-sm)}
.menu-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.85}
.menu-btn:hover{background:var(--surface-2)}

/* min-width:0 WAJIB di sini. Item flex bawaannya min-width:auto, dan
   lebar bawaan <input> (sekitar 20 karakter) menjadi lantai yang tidak
   bisa ditembus — topbar melebar melewati layar dan seluruh halaman ikut
   bisa digeser menyamping. Kembaran persis dari masalah grid di atas. */
.search{flex:1;max-width:470px;position:relative;min-width:0}
.search input{min-width:0}
.topbar>*{min-width:0}
.search input{width:100%;padding:10px 13px 10px 38px;border:1px solid var(--border-kuat);
  border-radius:var(--r-sm);background:var(--surface-3);color:var(--text);font-size:13.2px;
  font-family:inherit;transition:border-color var(--t),box-shadow var(--t)}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{outline:none;border-color:var(--primary-2);
  box-shadow:0 0 0 3px var(--primary-lembut)}
.search svg{position:absolute;left:12px;top:11px;width:16px;height:16px;stroke:var(--muted-2);
  fill:none;stroke-width:1.85;pointer-events:none}
.search kbd{position:absolute;right:9px;top:9px;font-family:inherit;font-size:10.5px;
  font-weight:650;color:var(--muted-2);background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:2px 6px;pointer-events:none}
.spacer{flex:1}

.icon-btn{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);
  width:37px;height:37px;cursor:pointer;color:var(--text-2);transition:var(--t);
  display:grid;place-items:center;position:relative;flex-shrink:0}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-kuat)}
/* Tombol scan — tindakan paling sering, jadi ditonjolkan & selalu tersedia */
.icon-btn.scan{background:var(--primary-lembut);border-color:rgba(139,92,246,.3);color:var(--primary-t)}
.icon-btn.scan:hover{background:rgba(124,58,237,.24);color:var(--primary-t)}
.icon-btn .dot{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:10px;
  display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}

.userchip{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;
  border:1px solid var(--border);border-radius:30px;background:var(--surface-3);
  cursor:pointer;transition:var(--t)}
.userchip:hover{border-color:var(--border-kuat);background:var(--surface-2)}
.userchip .av{width:29px;height:29px;border-radius:50%;flex-shrink:0;background:var(--primary-grad);
  color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700}
.userchip b{font-size:12.5px;display:block;line-height:1.3;font-weight:650}
.userchip small{display:block;color:var(--muted);font-size:11px;line-height:1.3}
.logout{background:var(--surface-3);border:1px solid var(--border);color:var(--text-2);
  border-radius:var(--r-sm);padding:8px 13px;font-weight:600;font-size:12.5px;cursor:pointer;
  transition:var(--t);font-family:inherit}
.logout:hover{background:rgba(239,68,68,.14);color:var(--red-t);border-color:rgba(239,68,68,.32)}

/* ---------- menu pengguna di topbar ----------
   Keluar dipindah ke sini dari sidebar: itu tindakan akun, bukan bagian
   dari peta aplikasi. Sidebar jadi murni berisi tempat, bukan perintah. */
.usermenu{position:relative}
.usermenu>.userchip{cursor:pointer}
.usermenu[data-buka="1"]>.userchip{border-color:rgba(139,92,246,.4);background:var(--surface-2)}
.usermenu .um-panel{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;z-index:60;
  background:var(--surface-2);border:1px solid var(--border-kuat);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);padding:7px;display:none}
.usermenu[data-buka="1"] .um-panel{display:block;animation:um-in .16s cubic-bezier(.2,.9,.3,1)}
@keyframes um-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.usermenu .um-head{padding:10px 11px 11px;border-bottom:1px solid var(--border);margin-bottom:6px}
.usermenu .um-head b{display:block;font-size:13.5px;font-weight:680;line-height:1.35}
.usermenu .um-head small{display:block;color:var(--muted);font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis}
.usermenu .um-head .tag{margin-top:7px}
.usermenu .um-panel a{display:flex;align-items:center;gap:10px;padding:8px 11px;
  border-radius:var(--r-sm);font-size:13px;font-weight:550;color:var(--text-2);
  transition:var(--t-cepat)}
.usermenu .um-panel a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.usermenu .um-panel a:hover{background:rgba(255,255,255,.05);color:var(--text)}
html[data-theme="light"] .usermenu .um-panel a:hover{background:var(--surface-3)}
.usermenu .um-panel a:hover svg{opacity:1}
.usermenu .um-panel hr{border:0;border-top:1px solid var(--border);margin:6px 0}
.usermenu .um-panel a.bahaya{color:var(--red-t)}
.usermenu .um-panel a.bahaya:hover{background:rgba(239,68,68,.13)}

/* ---------- halaman profil ---------- */
.profil-kepala{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.profil-av{width:76px;height:76px;border-radius:22px;flex-shrink:0;display:grid;place-items:center;
  background:var(--primary-grad);color:#fff;font-size:27px;font-weight:750;letter-spacing:-.02em;
  box-shadow:0 8px 26px -8px rgba(124,58,237,.75)}
.profil-id{min-width:0;flex:1}
.profil-id h3{font-size:var(--h-xl);font-weight:700;letter-spacing:-.03em;margin-bottom:3px}
.row-tag{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.profil-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
@media(max-width:900px){.profil-grid{grid-template-columns:1fr}}
.petunjuk{display:block;color:var(--muted);font-size:12px;margin-top:6px;line-height:1.5}
.field input:disabled{opacity:.6;cursor:not-allowed}

/* =====================================================================
   6. JUDUL HALAMAN
   ===================================================================== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--s6);flex-wrap:wrap;gap:14px;padding-bottom:var(--s5);
  border-bottom:1px solid var(--border)}
.page-head h2{font-size:var(--h-2xl);font-weight:700;letter-spacing:-.032em;line-height:1.16}
.page-head p{color:var(--muted);font-size:var(--h-base);margin-top:7px;max-width:70ch;
  line-height:1.55}
.page-head .aksi{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* =====================================================================
   6b. PENYEMPURNAAN — presisi, bukan hiasan
   ---------------------------------------------------------------------
   Kesan "mahal" pada antarmuka perusahaan tidak datang dari dekorasi.
   Ia datang dari hal-hal yang justru tidak disadari: jarak yang konsisten,
   garis yang tegas 1px, dan setiap keadaan (arahkan, fokus, tekan,
   nonaktif) yang benar-benar dipikirkan. Tidak ada gradien di sini.
   ===================================================================== */

/* Bilah penyaring jadi satu kesatuan, bukan isian yang berserakan. */
.tools{background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r);padding:10px 12px}
.tools:empty{display:none}
.tools label{font-size:12px;color:var(--muted);font-weight:600}

/* Baris tabel yang disorot mendapat batang tipis di tepi kiri. Di daftar
   panjang, latar yang sedikit lebih terang saja tidak cukup terlihat —
   terutama di layar HP murah yang dilihat dari sudut miring. */
tbody tr{position:relative}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--primary-2)}

/* Kartu yang sedang diisi ikut menyala tipis — pengguna tahu formulir
   mana yang sedang aktif tanpa harus mencari kursornya. */
.card:focus-within{border-color:var(--border-kuat)}

/* Judul di dalam kartu yang punya pemisah — dipakai saat isi kartu
   terbagi jadi beberapa bagian. */
.card .bagian{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--muted-2);padding-top:var(--s4);margin-top:var(--s4);
  border-top:1px solid var(--border)}
.card .bagian:first-child{padding-top:0;margin-top:0;border-top:0}

/* =====================================================================
   6c. SEKSI — pembabakan isi halaman
   ---------------------------------------------------------------------
   Dasbor sebelumnya adalah 16 kartu berbobot sama, berderet tanpa jeda.
   Semua isinya berguna, tapi mata tidak pernah diberi tahu di mana satu
   pokok berakhir dan pokok lain dimulai — jadi seluruh halaman terbaca
   sebagai satu tumpukan panjang.

   Seksi memberi halaman babak. Ini perubahan tata letak yang paling
   terasa dan paling murah: tidak ada isi yang ditambah atau dibuang,
   hanya dikelompokkan.
   ===================================================================== */
.seksi{display:flex;align-items:center;gap:var(--s3);margin:var(--s7) 0 var(--s4)}
.seksi:first-child{margin-top:0}
.seksi h4{font-family:var(--f-display);font-size:13.5px;font-weight:660;
  letter-spacing:-.006em;color:var(--text-2);white-space:nowrap}
.seksi svg{width:15px;height:15px;stroke:var(--muted-2);fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.seksi::after{content:"";flex:1;height:1px;background:var(--border)}
.seksi .ket{font-size:var(--h-sm);color:var(--muted-2);white-space:nowrap;order:3}
/* Di layar sempit keterangan seksi disembunyikan. Ia hanya penjelas —
   judulnya sudah cukup — dan `nowrap` membuatnya mendorong halaman
   melebar sampai bisa digeser menyamping. */
@media(max-width:620px){
  .seksi .ket{display:none}
  .seksi{margin:var(--s6) 0 var(--s3)}
}

/* =====================================================================
   7. KARTU
   ===================================================================== */
/* Ruang di dalam kartu dilonggarkan. Kelapangan adalah salah satu tanda
   paling jujur dari antarmuka mahal — ia menyiratkan bahwa ruang layar
   cukup, tidak perlu dijejali. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:22px;box-shadow:var(--shadow-1),var(--kilau);position:relative}
.card h3{font-size:var(--h-md);font-weight:660;letter-spacing:-.018em;margin-bottom:3px;
  line-height:1.35}
.card .sub{color:var(--muted);font-size:var(--h-sm);margin-bottom:var(--s5);line-height:1.5}
/* Judul kartu yang menempel di tepi: garis pemisah sejajar padding kartu,
   bukan mengambang di tengah — detail kecil yang membuat panel terasa
   dirancang, bukan ditumpuk. */
.card>h3:first-child+.sub{margin-bottom:var(--s4)}
a.card{transition:transform var(--t),box-shadow var(--t),border-color var(--t);display:block}
a.card:hover{box-shadow:var(--shadow-2),var(--kilau);transform:translateY(-2px);
  border-color:var(--border-kuat)}
a.card:active{transform:translateY(0)}

/* ---------------------------------------------------------------------
   Tata letak "isi + panel samping" — dipakai di SEMBILAN halaman master
   data (daftar di kiri, formulir di kanan).

   Sebelumnya tiap halaman menulis sendiri:
       style="grid-template-columns:1fr 340px"
   Inline style SELALU menang atas media query, jadi kolom 340px itu tidak
   pernah runtuh di ponsel — kartu selebar 728px dipaksa masuk layar 375px
   dan seluruh halaman bisa digeser menyamping.

   Satu kelas ini menggantikan semuanya, dan runtuh sebagaimana mestinya.
   --------------------------------------------------------------------- */
.dua-kolom{display:grid;grid-template-columns:minmax(0,1fr) var(--sisi,340px);
  gap:var(--s4);align-items:start}
.dua-kolom.sisi-lebar{--sisi:400px}
.dua-kolom.sisi-sempit{--sisi:320px}
.dua-kolom>*{min-width:0}      /* tanpa ini isi tabel memaksa kolom melebar */
@media(max-width:1000px){
  .dua-kolom{grid-template-columns:1fr}
  /* Urutan sengaja TIDAK dibalik. Sempat terpikir menaikkan formulir ke
     atas, tapi orang yang membuka halaman ini di ponsel umumnya mau
     MELIHAT daftarnya; yang mau menambah menekan tombol "Tambah" dan
     langsung dilompatkan ke formulir lewat #formTambah. Membalik urutan
     berarti semua orang menggulir melewati formulir panjang setiap kali. */
}

/* =====================================================================
   8. KPI CARD
   ===================================================================== */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:var(--s3);margin-bottom:var(--s5)}
.kpi .v{font-size:var(--h-2xl);font-weight:700;line-height:1.06;letter-spacing:-.032em}
.kpi .l{color:var(--muted);font-size:var(--h-sm);margin-top:6px;font-weight:500}

/* Kartu KPI sengaja RATA — tanpa gradien.
   Sebelumnya tiap kartu punya sapuan warna di dasarnya. Dengan 12 kartu
   berjajar, hasilnya pelangi: mata tidak tahu mana yang penting karena
   semuanya sama-sama menarik perhatian.
   Sekarang warna hanya dipakai untuk ARTI — ikon kecil, dan angka yang
   memang perlu ditindaklanjuti (hampir habis, expired). Sisanya netral. */
/* Kartu KPI diberi ruang lebih lega dan angka yang jauh lebih berani.
   Angka 26px di kartu selebar 178px terlihat ragu — seolah datanya tidak
   penting. Angka besar dengan label kecil di atasnya adalah bentuk baku
   papan data kelas atas: mata menangkap angkanya lebih dulu, keterangan
   menyusul kalau dibutuhkan. */
.kpi-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s4) 17px 15px;
  box-shadow:var(--kilau);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.kpi-card:hover{border-color:var(--border-kuat);box-shadow:var(--shadow-2),var(--kilau);
  transform:translateY(-1px)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.075em;font-weight:650;
  color:var(--muted);line-height:1.4}
.kpi-ic{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center}
.kpi-ic svg{width:16px;height:16px;stroke:var(--kc,var(--muted-2));fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
/* nowrap wajib: skrip paskanAngkaKPI() di _footer.php mengandalkan
   scrollWidth > clientWidth untuk tahu angkanya tidak muat. Kalau boleh
   membungkus, ia turun baris diam-diam dan tidak pernah terdeteksi. */
.kpi-v{font-size:var(--h-3xl);font-weight:700;letter-spacing:-.035em;margin-top:11px;
  line-height:1.04;color:var(--text);white-space:nowrap;overflow:hidden}
.kpi-v.kecil{font-size:var(--h-xl)}
.kpi-v small{font-size:var(--h-base);font-weight:600;color:var(--muted);letter-spacing:0}
.kpi-d{font-size:12px;color:var(--muted-2);margin-top:5px}
/* Hanya angka yang butuh tindakan yang diberi warna. */
.kpi-card.perlu .kpi-v{color:var(--kc)}
.kpi-card.perlu .kpi-l{color:var(--kc)}

/* =====================================================================
   9. ALERT BAR
   ===================================================================== */
.alert-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:18px}
.alert{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.alert-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--ac,var(--amber)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--ac,var(--amber)) 30%,transparent)}
.alert-ic svg{width:18px;height:18px;stroke:var(--ac,var(--amber));fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.alert-tx{min-width:0;flex:1}
.alert-tx b{display:block;font-size:var(--h-base);font-weight:640;line-height:1.35}
.alert-tx small{color:var(--muted);font-size:12.5px}

/* =====================================================================
   10. TOMBOL
   ===================================================================== */
.btn{cursor:pointer;border:1px solid transparent;border-radius:var(--r-sm);padding:9px 15px;
  font-weight:590;font-size:var(--h-base);font-family:inherit;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;line-height:1.3;white-space:nowrap;min-height:38px;
  transition:background var(--t-cepat),border-color var(--t-cepat),color var(--t-cepat),
             box-shadow var(--t),transform var(--t-cepat)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--primary-grad);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 10px -3px rgba(124,58,237,.6),
             inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{background:var(--primary-2);
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 6px 18px -4px rgba(124,58,237,.7),
             inset 0 1px 0 rgba(255,255,255,.18);transform:translateY(-1px)}
.btn-ghost{background:var(--surface-3);border-color:var(--border-kuat);color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--muted-2)}
.btn-red{background:rgba(239,68,68,.13);color:var(--red-t);border-color:rgba(239,68,68,.32)}
.btn-red:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.btn-green{background:rgba(16,185,129,.13);color:var(--green-t);border-color:rgba(16,185,129,.3)}
.btn-green:hover{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.48)}
.btn-sm{padding:6px 11px;font-size:var(--h-sm);border-radius:7px;min-height:31px}
.btn-sm svg{width:13px;height:13px}
/* Ditekan: turun kembali ke posisi diam. Umpan balik sentuh yang membuat
   tombol terasa benar-benar tertekan, bukan sekadar berganti warna. */
.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-1)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;box-shadow:none}

/* Tombol sedang bekerja — mencegah klik ganda pada simpan/kirim. */
.btn[data-sibuk]{pointer-events:none;opacity:.7;position:relative;color:transparent}
.btn[data-sibuk]::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:putar .6s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}

/* =====================================================================
   11. AKSI CEPAT
   ===================================================================== */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.qa a{display:flex;align-items:center;gap:11px;background:var(--surface-3);
  border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;font-size:13px;
  font-weight:600;color:var(--text-2);transition:var(--t)}
.qa a:hover{background:var(--surface-2);color:var(--text);border-color:rgba(139,92,246,.3);
  transform:translateY(-2px);box-shadow:var(--shadow-2)}
.qa-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--qc,var(--primary)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--qc,var(--primary)) 28%,transparent)}
.qa-ic svg{width:17px;height:17px;stroke:var(--qc,var(--primary));fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   11b. TATA LETAK DASHBOARD
   ===================================================================== */
/* Dua & tiga kolom yang runtuh sendiri. Dipakai berulang di dashboard
   supaya tidak ada lagi grid-template-columns yang ditulis per halaman. */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));
  gap:var(--s4);margin-bottom:var(--s4)}
.dash-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:var(--s4);margin-bottom:var(--s4)}
/* Item grid bawaannya min-width:auto — artinya ia MENOLAK menyusut di
   bawah lebar isinya. Satu tabel lebar di dalamnya cukup untuk memaksa
   kolom melebar melewati layar, walau template-nya sudah 1fr. Inilah
   sebab halaman laporan masih bisa digeser menyamping padahal grid-nya
   sudah runtuh dengan benar. */
.dash-grid>*,.dash-grid-3>*{min-width:0}
@media(max-width:860px){
  .dash-grid,.dash-grid-3{grid-template-columns:1fr}
}

/* Bar mini di dalam sel tabel — perbandingan tanpa perlu grafik terpisah.
   Angka tetap yang utama; bar hanya membantu mata membandingkan baris. */
.barmini{display:inline-block;width:64px;height:6px;border-radius:20px;overflow:hidden;
  background:var(--surface-3);border:1px solid var(--border);vertical-align:middle}
.barmini i{display:block;height:100%;border-radius:20px}

/* ---------- halaman Pengaturan: grid kartu bergrup ---------- */
.set-grup{margin-bottom:28px}
.set-grup>h3{font-size:13px;font-weight:680;letter-spacing:-.01em;margin-bottom:3px}
.set-grup>p{color:var(--muted);font-size:12px;margin-bottom:13px}
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:14px}
.set-grid a.card{padding:17px 18px;display:flex;gap:13px;align-items:flex-start}
.set-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:var(--primary-lembut);border:1px solid rgba(139,92,246,.24)}
.set-ic svg{width:19px;height:19px;stroke:var(--primary-t);fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.set-tx{min-width:0;flex:1}
.set-tx b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.set-tx p{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.5}
.set-jml{margin-top:9px}

/* ---------- halaman Impor Data ---------- */
.imp-ent{display:flex;gap:3px;margin-bottom:20px;border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none}
.imp-ent::-webkit-scrollbar{display:none}
.imp-ent a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:13px;
  font-weight:550;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color var(--t-cepat),border-color var(--t-cepat)}
.imp-ent a:hover{color:var(--text)}
.imp-ent a.aktif{color:var(--primary-t);font-weight:680;border-bottom-color:var(--primary-2)}
.imp-ent svg{stroke:currentColor}

.imp-wrap{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
@media(max-width:900px){.imp-wrap{grid-template-columns:1fr}}

.imp-kol{width:100%;font-size:12.5px;border-collapse:collapse}
.imp-kol td{padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:top}
.imp-kol tr:last-child td{border-bottom:0}
.imp-kol td:first-child{white-space:nowrap;color:#c4b5fd;
  font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:11.5px}
html[data-theme="light"] .imp-kol td:first-child{color:var(--primary)}

.imp-ring{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.imp-ring div{padding:10px 15px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-3);font-size:12.5px;color:var(--muted)}
.imp-ring b{font-size:18px;display:block;line-height:1.3;font-weight:750}
.imp-salah{color:var(--red-t);font-size:11.5px;line-height:1.55}

/* =====================================================================
   KOTAK SCAN — dipakai di semua form yang memasukkan barang
   ---------------------------------------------------------------------
   Dulu disuntikkan dari assets/scan.js dengan warna tema terang yang
   dipatok, sehingga status "berhasil" jadi hijau tua di atas latar gelap
   dan nyaris tak terbaca. Sekarang ikut token seperti komponen lain.
   ===================================================================== */
.scanbox{border:1px solid var(--border-kuat);border-radius:var(--r-lg);
  background:var(--surface-3);padding:16px;margin-bottom:18px}
.scanbox .baris{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.scanbox .kotak{flex:1;min-width:210px}
.scanbox label{display:block;font-size:11.5px;font-weight:680;color:var(--text-2);
  margin-bottom:7px;letter-spacing:.02em}
/* Kotak kode diberi bingkai ungu supaya petugas tahu ke mana harus menembak. */
.scanbox input.kode{width:100%;padding:12px 14px;border:1.5px solid var(--primary-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:16px;
  font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;letter-spacing:.6px}
.scanbox input.kode::placeholder{color:var(--muted-2);letter-spacing:0}
.scanbox input.kode:focus{outline:none;box-shadow:0 0 0 3px var(--primary-lembut)}
.scanbox input.jml{width:88px;padding:12px 10px;border:1px solid var(--border-kuat);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  font-size:15px;font-weight:650}
.scanbox .petunjuk{font-size:11.5px;color:var(--muted-2);margin-top:10px;line-height:1.65}
.scanbox .petunjuk b{color:var(--text-2)}
.scanbox .status{margin-top:12px;font-size:13px;border-radius:var(--r-sm);
  padding:10px 13px;display:none;border:1px solid transparent;line-height:1.55}
.scanbox .status.ok{display:block;background:rgba(16,185,129,.12);color:var(--green-t);
  border-color:rgba(16,185,129,.3)}
.scanbox .status.err{display:block;background:rgba(239,68,68,.12);color:var(--red-t);
  border-color:rgba(239,68,68,.3)}
.scanbox .status.pilih{display:block;background:var(--surface-2);color:var(--text-2);
  border-color:var(--border)}
.scanbox .pilihan{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.scanbox .pilihan button{text-align:left;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:9px 12px;cursor:pointer;font-family:inherit;
  font-size:13px;color:var(--text);transition:var(--t)}
.scanbox .pilihan button:hover{border-color:var(--primary-2);background:var(--primary-lembut)}
.scanbox video{width:100%;max-height:260px;background:#000;border-radius:var(--r);
  object-fit:cover;margin-top:12px;display:none}
.scanbox video.on{display:block}

/* Ringkasan sebelum tombol simpan — pola kasir: angka yang mau dikonfirmasi
   berdiri tepat di atas tombolnya, bukan tersebar di layar. */
.ringkas-simpan{background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r);padding:13px 15px;margin:18px 0 14px;
  display:flex;flex-direction:column;gap:7px}
.ringkas-simpan div{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;gap:14px}
.ringkas-simpan b{font-size:15px;font-weight:750;letter-spacing:-.01em}
.ringkas-simpan div:last-child b{font-size:19px;color:var(--primary-t)}

/* =====================================================================
   Kartu "dikit lagi beres" — panduan penyiapan
   Nadanya sengaja santai, tapi isinya tetap tugas nyata: tiap baris
   menautkan ke layar yang menyelesaikannya.
   ===================================================================== */
.mulai{background:var(--surface);
  border-color:rgba(139,92,246,.28);margin-bottom:18px}
.mulai-kepala{display:flex;gap:17px;align-items:center;margin-bottom:17px}
.mulai-kepala h3{margin-bottom:3px}

/* Cincin kemajuan — conic-gradient, tanpa gambar & tanpa pustaka. */
.mulai-cincin{width:60px;height:60px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:conic-gradient(var(--primary-2) calc(var(--isi) * 1%), var(--surface-3) 0);
  position:relative}
.mulai-cincin::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.mulai-cincin span{position:relative;z-index:1;font-size:13.5px;font-weight:750;letter-spacing:-.02em}

.mulai-daftar{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:9px}
.mulai-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r);
  background:var(--surface-3);border:1px solid var(--border);transition:var(--t)}
.mulai-item:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.mulai-tanda{width:23px;height:23px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  border:2px solid var(--border-kuat)}
.mulai-tanda svg{width:12px;height:12px;stroke:#041210;stroke-width:3.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.mulai-item.beres .mulai-tanda{background:var(--green);border-color:var(--green)}
.mulai-item.beres{opacity:.62}
.mulai-item.beres:hover{opacity:1}
.mulai-tx{min-width:0;flex:1}
.mulai-tx b{display:block;font-size:13px;font-weight:650;line-height:1.35}
.mulai-tx small{color:var(--muted);font-size:11.5px;line-height:1.45;display:block}
.mulai-panah{stroke:var(--primary-t);flex-shrink:0}

/* Chip penyaring — dipakai untuk kanal marketplace, status, dan sejenisnya.
   Bentuknya sengaja berbeda dari tab: tab berpindah halaman, chip menyaring
   isi halaman yang sama. */
.saring{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.saring-lb{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--muted-2);margin-right:3px}
.saring a{display:inline-flex;align-items:center;gap:7px;padding:6.5px 13px;border-radius:20px;
  font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--surface-3);
  border:1px solid var(--border);transition:var(--t)}
.saring a:hover{border-color:var(--border-kuat);color:var(--text)}
.saring a.on{background:var(--primary-lembut);border-color:rgba(139,92,246,.4);
  color:var(--primary-t);font-weight:680}
.saring a .n{font-size:11px;font-weight:700;background:rgba(255,255,255,.07);
  padding:1px 6px;border-radius:20px;color:var(--muted)}
html[data-theme="light"] .saring a .n{background:rgba(15,23,42,.07)}
.saring a.on .n{background:var(--primary);color:#fff}

/* Angka & kode agar sejajar rapi di kolom */
.mono{font-family:var(--f-mono);
  font-size:.92em;letter-spacing:-.01em}

/* =====================================================================
   12. TAB ANTAR-HALAMAN
   ===================================================================== */
.grup-tab{display:flex;gap:3px;margin-bottom:20px;border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none}
.grup-tab::-webkit-scrollbar{display:none}
.grup-tab a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:13px;
  font-weight:550;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color var(--t-cepat),border-color var(--t-cepat)}
.grup-tab a:hover{color:var(--text)}
.grup-tab a.aktif{color:var(--primary-t);font-weight:680;border-bottom-color:var(--primary-2)}
.grup-tab a .bdg{background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  padding:1px 6.5px;border-radius:20px;line-height:1.6}
.grup-tab a.aktif .bdg{background:var(--primary)}

/* Jejak navigasi untuk halaman anak Pengaturan */
.jejak{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
  margin-bottom:16px;transition:color var(--t-cepat)}
.jejak:hover{color:var(--text-2)}
.jejak svg{stroke:currentColor}
.jejak b{color:var(--text-2);font-weight:620}

/* =====================================================================
   13. TABEL
   ===================================================================== */
.tbl-wrap{overflow-x:auto;margin:0 calc(var(--s5) * -1);padding:0 var(--s5)}
/* Daftar panjang: wadahnya diberi tinggi supaya kepala tabel benar-benar
   bisa menempel. Tanpa tinggi, `position:sticky` tidak pernah aktif —
   jadi kelas ini yang membuatnya bekerja, bukan aturan th di bawah. */
.tbl-wrap.tinggi{max-height:min(68vh,620px);overflow-y:auto;
  border-radius:var(--r);border:1px solid var(--border)}
.tbl-wrap.tinggi table{font-size:12.8px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}

/* Kepala tabel MENEMPEL saat digulir. Di daftar stok yang panjang, tanpa
   ini petugas kehilangan jejak kolom mana yang sedang dibacanya di baris
   ke-40 — dan salah baca angka stok berakibat nyata. */
th{text-align:left;color:var(--muted-2);font-size:11px;text-transform:uppercase;
  letter-spacing:.075em;padding:12px 15px;border-bottom:1px solid var(--border-kuat);
  white-space:nowrap;font-weight:650;background:var(--surface-3);
  position:sticky;top:0;z-index:2}
/* Baris diberi nafas. Tabel rapat terasa seperti lembar kerja; tabel
   berjarak terasa seperti data yang dirawat — dan lebih jarang salah
   baca saat petugas menelusurinya dengan jari di layar. */
td{padding:13px 15px;border-bottom:1px solid var(--border);vertical-align:middle;
  color:var(--text-2);font-size:var(--h-base)}
td b,td strong{color:var(--text);font-weight:640}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t-cepat),box-shadow var(--t-cepat)}
tbody tr:hover{background:rgba(255,255,255,.028)}
html[data-theme="light"] tbody tr:hover{background:var(--surface-2)}
tfoot td{background:var(--surface-3);font-weight:700;border-top:1px solid var(--border-kuat);
  color:var(--text);position:sticky;bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* Tabel rapat — untuk panel ringkasan yang isinya banyak baris pendek. */
table.rapat th{padding:8px 11px}
table.rapat td{padding:8px 11px}

/* =====================================================================
   14. BADGE
   ===================================================================== */
.tag{display:inline-flex;align-items:center;gap:5px;padding:3.5px 9.5px;border-radius:7px;
  font-size:11.2px;font-weight:640;white-space:nowrap;letter-spacing:.005em;line-height:1.45}
.t-green{background:rgba(16,185,129,.14);color:var(--green-t);border:1px solid rgba(16,185,129,.28)}
.t-amber{background:rgba(245,158,11,.14);color:var(--amber-t);border:1px solid rgba(245,158,11,.28)}
.t-orange{background:rgba(245,158,11,.14);color:var(--amber-t);border:1px solid rgba(245,158,11,.28)}
.t-red{background:rgba(239,68,68,.14);color:var(--red-t);border:1px solid rgba(239,68,68,.28)}
.t-blue{background:rgba(6,182,212,.14);color:var(--accent-t);border:1px solid rgba(6,182,212,.28)}
.t-purple{background:rgba(124,58,237,.16);color:var(--primary-t);border:1px solid rgba(139,92,246,.3)}
.t-gray{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--border)}
html[data-theme="light"] .t-gray{background:var(--surface-3)}
.thumb{width:32px;height:32px;border-radius:9px;background:var(--surface-3);
  border:1px solid var(--border);display:inline-grid;place-items:center;font-size:15px;flex-shrink:0}
/* Ikon di dalam badge mengikuti warna badge-nya lewat currentColor. */
.tag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Titik status — pengganti emoji 🟢🟡🟠🔴 yang bentuknya berubah antar
   sistem operasi dan tidak bisa diberi warna sesuai makna. */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;
  vertical-align:middle;margin-right:2px}
.d-ok{background:var(--green)}
.d-warn{background:var(--amber)}
.d-warn2{background:var(--orange);box-shadow:0 0 0 2px color-mix(in srgb,var(--orange) 22%,transparent)}
.d-bad{background:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 22%,transparent)}

/* =====================================================================
   15. STEPPER
   ===================================================================== */
.step{display:flex;align-items:center;overflow-x:auto;padding:6px 0;scrollbar-width:none}
.step::-webkit-scrollbar{display:none}
.step .s{display:flex;align-items:center;gap:9px;flex-shrink:0}
.step .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;
  font-weight:700;background:var(--surface-3);border:1px solid var(--border-kuat);color:var(--muted-2)}
.step .n svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3}
.step .s.done .n{background:var(--green);border-color:var(--green);color:#041210}
.step .s.now .n{background:var(--primary-grad);border-color:var(--primary-2);color:#fff;
  box-shadow:var(--glow),0 4px 14px -4px rgba(124,58,237,.7)}
.step .s small{font-size:12px;color:var(--muted);white-space:nowrap}
.step .s.now small{color:var(--text);font-weight:650}
.step .bar{width:28px;height:1px;background:var(--border-kuat);margin:0 9px;flex-shrink:0}

/* =====================================================================
   16. ACTIVITY TIMELINE
   ===================================================================== */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.tl li:last-child{border-bottom:0;padding-bottom:0}
.tl li:first-child{padding-top:0}
.tl-ic{width:31px;height:31px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tc,var(--primary)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tc,var(--primary)) 26%,transparent)}
.tl-ic svg{width:15px;height:15px;stroke:var(--tc,var(--primary));fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.tl-tx{min-width:0;flex:1}
.tl-tx b{display:block;font-size:var(--h-base);font-weight:620;line-height:1.4}
.tl-tx small{color:var(--muted);font-size:12px}
.tl time{margin-left:auto;font-size:11.5px;color:var(--muted-2);white-space:nowrap;flex-shrink:0;
  padding-top:2px}

/* =====================================================================
   17. FORMULIR
   ===================================================================== */
/* ---------------------------------------------------------------------
   DASAR SELURUH KENDALI ISIAN
   Sebelumnya hanya isian di dalam .field dan .tools yang diberi gaya.
   Yang ditulis di luar itu — misalnya pemilih toko di dasbor — tampil
   sebagai kendali bawaan browser: abu-abu, kotak, dan sangat mencolok
   salahnya di atas latar gelap. Satu <select> mentah cukup untuk membuat
   seluruh halaman terlihat belum selesai.
   --------------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  font-family:inherit;font-size:13.2px;color:var(--text);background:var(--surface-3);
  border:1px solid var(--border-kuat);border-radius:var(--r-sm);padding:9px 12px;
  transition:border-color var(--t-cepat),box-shadow var(--t-cepat)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary-2);box-shadow:var(--cincin)}
select{cursor:pointer;padding-right:30px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
select option{background:var(--surface-2);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}

.tools{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.tools input,.tools select{padding:9px 11px;border:1px solid var(--border-kuat);
  border-radius:var(--r-sm);background:var(--surface-3);color:var(--text);font-size:13px;
  font-family:inherit;transition:var(--t)}
.tools input:focus,.tools select:focus{outline:none;border-color:var(--primary-2);
  box-shadow:0 0 0 3px var(--primary-lembut)}
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;font-weight:680;color:var(--text-2);margin-bottom:7px;
  letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;padding:10px 13px;
  border:1px solid var(--border-kuat);border-radius:var(--r-sm);background:var(--surface-3);
  color:var(--text);font-size:13.5px;outline:none;font-family:inherit;transition:var(--t)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary-2);
  box-shadow:0 0 0 3px var(--primary-lembut)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input[type=file]{padding:9px 11px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.req{color:var(--red-t);font-weight:700}

/* ---------------------------------------------------------------------
   Kotak centang & radio
   Sebelumnya sama sekali tidak diberi gaya — masih bawaan browser, 13px,
   abu-abu, dan di tema gelap tampak seperti cacat tampilan. Ia juga
   terlalu kecil untuk ditekan jari.
   --------------------------------------------------------------------- */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex-shrink:0;
  border:1.5px solid var(--border-kuat);background:var(--surface-3);cursor:pointer;
  display:inline-grid;place-content:center;margin:0;vertical-align:middle;
  transition:background var(--t-cepat),border-color var(--t-cepat)}
input[type=checkbox]{border-radius:5px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--primary-2)}
input[type=checkbox]:checked,input[type=radio]:checked{
  background:var(--primary);border-color:var(--primary)}
/* Tanda centang digambar dengan clip-path, bukan gambar — tetap tajam di
   layar kepadatan berapa pun dan ikut warna teks. */
input[type=checkbox]:checked::before{content:"";width:10px;height:10px;background:#fff;
  clip-path:polygon(14% 44%,0 60%,39% 100%,100% 22%,84% 7%,39% 68%)}
input[type=radio]:checked::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid var(--primary-2);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
/* Label yang membungkus kotak centang jadi sasaran tekan yang lega. */
label:has(>input[type=checkbox]),label:has(>input[type=radio]){
  display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 0}
.sel-tbl,.inp-tbl{width:100%;padding:8px 10px;border:1px solid var(--border-kuat);border-radius:8px;
  background:var(--surface-3);color:var(--text);font-family:inherit;font-size:13px}
.sel-tbl:focus,.inp-tbl:focus{outline:none;border-color:var(--primary-2);
  box-shadow:0 0 0 3px var(--primary-lembut)}

/* =====================================================================
   18. PESAN — flash & toast
   ===================================================================== */
.flash{padding:13px 16px;border-radius:var(--r);margin-bottom:18px;font-size:13.2px;
  font-weight:500;line-height:1.6;border:1px solid transparent}
.flash-ok{background:rgba(16,185,129,.1);color:var(--green-t);border-color:rgba(16,185,129,.28)}
.flash-err{background:rgba(239,68,68,.1);color:var(--red-t);border-color:rgba(239,68,68,.3)}
.flash b{color:inherit}

#toast-wrap{position:fixed;bottom:22px;right:22px;z-index:120;display:flex;flex-direction:column;
  gap:10px;max-width:min(390px,calc(100vw - 44px))}
.toast{display:flex;align-items:flex-start;gap:11px;background:var(--surface-2);
  border:1px solid var(--border-kuat);border-left:3px solid var(--tc,var(--primary));
  border-radius:var(--r);padding:12px 15px;box-shadow:var(--shadow-3);
  animation:toast-in .26s cubic-bezier(.2,.9,.3,1)}
.toast.tutup{animation:toast-out .2s ease forwards}
.toast svg{width:17px;height:17px;stroke:var(--tc,var(--primary));fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.toast b{display:block;font-size:13px;font-weight:650}
.toast small{color:var(--muted);font-size:12px}
.toast button{margin-left:auto;background:none;border:0;color:var(--muted-2);cursor:pointer;
  padding:0 0 0 8px;font-size:16px;line-height:1}
@keyframes toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px)}}

/* =====================================================================
   19. EMPTY STATE
   ===================================================================== */
.empty{text-align:center;color:var(--muted);padding:34px 16px;font-size:13px}
.empty-state{text-align:center;padding:40px 20px}
.empty-state .ic{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;display:grid;
  place-items:center;background:var(--primary-lembut);border:1px solid rgba(139,92,246,.24)}
.empty-state .ic svg{width:27px;height:27px;stroke:var(--primary-t);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.empty-state b{font-family:var(--f-display);display:block;font-size:var(--h-lg);font-weight:670;letter-spacing:-.02em;margin-bottom:6px}
.empty-state p{color:var(--muted);font-size:13px;max-width:38ch;margin:0 auto 18px;line-height:1.6}
.empty-state .aksi{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   20. SKELETON
   ===================================================================== */
.sk{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,
  rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shim 1.4s infinite;
  border-radius:6px;height:12px}
html[data-theme="light"] .sk{background:linear-gradient(90deg,#e8edf3 25%,#f4f7fa 50%,#e8edf3 75%);
  background-size:200% 100%}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* =====================================================================
   21. MODAL
   ===================================================================== */
.overlay{position:fixed;inset:0;background:rgba(3,7,18,.7);z-index:35;display:none;
  backdrop-filter:blur(3px)}
.overlay.show{display:block}
dialog.modal{border:1px solid var(--border-kuat);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-xl);padding:0;max-width:min(440px,calc(100vw - 32px));width:100%;
  box-shadow:var(--shadow-3);font-family:inherit}
dialog.modal::backdrop{background:rgba(3,7,18,.7);backdrop-filter:blur(3px)}
.modal-h{display:flex;gap:13px;align-items:flex-start;padding:22px 22px 0}
.modal-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--mc,var(--red)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--mc,var(--red)) 30%,transparent)}
.modal-ic svg{width:18px;height:18px;stroke:var(--mc,var(--red));fill:none;stroke-width:1.85}
.modal-h b{font-family:var(--f-display);font-size:var(--h-lg);font-weight:680;letter-spacing:-.02em;display:block;line-height:1.3}
.modal-h small{color:var(--muted);font-size:12.5px}
.modal-b{padding:16px 22px 0;font-size:13px;color:var(--text-2);line-height:1.65}
.modal-obj{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;margin-bottom:14px}
.modal-obj b{display:block;font-size:13.5px;color:var(--text)}
.modal-obj small{color:var(--muted);font-size:12px;
  font-family:var(--f-mono)}
.modal-f{display:flex;gap:9px;justify-content:flex-end;padding:18px 22px 22px}

/* =====================================================================
   21b. UTILITAS
   ---------------------------------------------------------------------
   Kelas kecil untuk pola yang dulu ditulis sebagai style="..." inline
   dan terulang puluhan kali di banyak halaman. Bukan framework utility
   penuh — hanya pola yang memang sudah terbukti berulang, supaya tidak
   ada lagi warna atau jarak yang ditulis ulang per halaman.
   ===================================================================== */
/* Potong teks panjang jadi maksimal dua baris. Dipakai untuk daftar yang
   digabung jadi satu sel (mis. sembilan nama toko milik satu akun) —
   tanpa ini satu baris data bisa menjadi kartu setinggi 400px di ponsel.
   Teks penuhnya tetap ada di atribut title. */
.klem2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.mut{color:var(--muted)}
.mut2{color:var(--muted-2)}
.mut-sm{color:var(--muted);font-size:12.5px}
.txt{color:var(--text)}
.scrollx{overflow-x:auto}
.nowrap{white-space:nowrap}
.inline{display:inline}
.hide{display:none}
.mb16{margin-bottom:16px}
.mt6{margin-top:6px}
.span-all{grid-column:1/-1}
.baris{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Label kecil huruf besar — dipakai di atas kelompok isian & ringkasan */
.label-mini{font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700}
/* Isian sempit di dalam sel tabel atau baris rapat */
.inp-mini{width:100%;padding:8px 10px;border:1px solid var(--border-kuat);border-radius:8px;
  background:var(--surface-3);color:var(--text);font-family:inherit;font-size:13px}
.inp-mini:focus{outline:none;border-color:var(--primary-2);box-shadow:0 0 0 3px var(--primary-lembut)}

/* =====================================================================
   22. RESPONSIF
   ===================================================================== */
@media(max-width:1200px){
  .content{padding:24px}
}
@media(max-width:900px){
  /* Di ponsel sidebar adalah panel geser, bukan panel melayang. Mode
     rapat juga dipaksa kembali lebar: tooltip tidak pernah muncul di
     layar sentuh, jadi rel ikon di sana hanya menyisakan lambang tanpa
     nama — dan pilihan itu tersimpan di cookie, bisa terbawa dari
     komputer ke ponsel oleh pengguna yang sama. */
  html,html[data-nav="rapat"]{--sidebar:264px;--nav-jarak:0px}
  .sidebar,html[data-nav="rapat"] .sidebar{width:264px;
    transform:translateX(-100%);box-shadow:var(--shadow-3);
    top:0;bottom:0;left:0;border-radius:0;border-width:0 1px 0 0}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  html[data-nav="rapat"] .brand{padding:0 18px;justify-content:flex-start}
  html[data-nav="rapat"] .brand>div{display:block}
  html[data-nav="rapat"] .nav{padding:10px}
  html[data-nav="rapat"] .nav a{justify-content:flex-start;padding:12px 11px;gap:11px}
  html[data-nav="rapat"] .nav a>span:not(.bdg){display:inline}
  html[data-nav="rapat"] .nav a::after{display:none}
  html[data-nav="rapat"] .nav .sec{height:auto;padding:14px 11px 5px;margin:0;
    background:none;color:var(--muted-2);font-size:10.5px}
  html[data-nav="rapat"] .nav a .bdg{position:static;width:auto;height:auto;
    min-width:19px;padding:1px 6.5px;font-size:10.5px;border:0;border-radius:20px}
  html[data-nav="rapat"] .sb-help{justify-content:flex-start;padding:13px}
  html[data-nav="rapat"] .sb-help div{display:block}
  .menu-btn{display:grid;place-items:center}
  .content{padding:18px 16px 32px}
  .topbar{padding:0 16px;gap:9px}
  .userchip b,.userchip small{display:none}
  .userchip{padding:4px;border-radius:50%}
  .search{max-width:none}
  .search kbd{display:none}
  /* .spacer juga flex:1, jadi di layar sempit ia berbagi rata dengan
     kotak pencarian — hasilnya kotak cari tinggal 67px dan tulisan
     petunjuknya tidak terbaca sama sekali. Di ponsel ruang sisa harus
     jatuh SELURUHNYA ke kotak cari. */
  .spacer{display:none}

  /* Kotak cari TURUN KE BARIS SENDIRI.
     Berbagi satu baris dengan tombol menu, dua tombol ikon, dan lencana
     pengguna hanya menyisakan ±140px untuknya — cukup untuk menampilkan
     "Cari produk, k…" dan tidak lebih. Petugas gudang mencari lewat kode
     dan nomor resi yang panjang; kolom sesempit itu tidak terpakai.
     Dengan turun satu baris ia mendapat lebar penuh, dan baris atas jadi
     bersih berisi navigasi saja. */
  .topbar{flex-wrap:wrap;padding:9px 16px;row-gap:9px}
  .search{order:9;flex:0 0 100%;max-width:none}
  .menu-btn{order:1}
  .usermenu{order:8;margin-left:auto}
  /* Pemilih toko ikut baris navigasi, bukan mengambil baris ketiga —
     tiga baris topbar memakan 150px dari layar 812px hanya untuk kerangka.
     Labelnya "Toko:" dihilangkan karena isi pilihannya sudah menyebut
     kata itu ("Semua Toko"). */
  .pilih-toko{order:2;flex:1 1 90px;min-width:0;display:flex;align-items:center;gap:7px}
  .pilih-toko>span{display:none}
  .pilih-toko select{width:100%;min-width:0}
  .page-head h2{font-size:19px}
  .form-grid{grid-template-columns:1fr}
  .tbl-wrap{margin:0 -16px;padding:0 16px}
  .tbl-wrap.tinggi{max-height:none;overflow-y:visible;border:0;border-radius:0}
  .kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
  /* Angka besar harus ikut mengecil di kartu sempit. Di layar 375px kartu
     KPI hanya selebar 161px — angka 33px cukup untuk "Rp1.250.000"
     meluber keluar kartunya. Tidak terlihat sekarang karena data uji
     masih kecil, tapi pasti muncul begitu nilainya nyata. */
  .kpi-v{font-size:24px;margin-top:8px;letter-spacing:-.03em}
  .kpi-v.kecil{font-size:17px}
  .kpi-card{padding:13px 14px 12px}
  .card{padding:var(--s4)}
  /* Judul halaman + tombolnya menumpuk, tombol utama melebar penuh —
     lebih mudah dijangkau ibu jari daripada tombol kecil di pojok kanan. */
  .page-head{align-items:stretch}
  .page-head .aksi{width:100%}
  .page-head .aksi>.btn{flex:1}
}

/* ---------------------------------------------------------------------
   LAYAR SENTUH — bukan berdasarkan lebar, tapi berdasarkan alat tunjuk.
   Tablet gudang berlayar lebar tetap disentuh jari, bukan diklik tetikus.

   44px adalah ukuran minimum yang bisa dikenai jari dengan andal. Petugas
   gudang sering memakai sarung tangan dan berdiri sambil memegang barang;
   tombol 28px di sana berarti salah tekan, dan salah tekan pada layar
   barang keluar berarti stok yang salah.
   --------------------------------------------------------------------- */
@media(pointer:coarse){
  .btn{min-height:44px;padding:11px 17px}
  .btn-sm{min-height:44px;padding:10px 14px;font-size:12.8px}
  .icon-btn{width:44px;height:44px}
  /* Tombol menu adalah tombol yang PALING sering ditekan di ponsel —
     satu-satunya jalan membuka navigasi. Ia justru yang tertinggal
     paling kecil (33px) karena tidak memakai kelas .btn mana pun. */
  .menu-btn{width:44px;height:44px;padding:0}
  .nav a{padding:12px 11px;font-size:13.6px}
  .grup-tab a{padding:13px 15px}
  .field input,.field select,.field textarea{padding:12px 13px;font-size:16px}
  .tools input,.tools select{padding:12px 13px;font-size:16px;min-height:44px}
  .inp-mini,.inp-tbl,.sel-tbl{padding:11px 12px;font-size:16px;min-height:44px}
  .search input{padding:13px 13px 13px 38px;font-size:16px}
  .saring a{padding:12px 15px}
  /* Tautan navigasi di beranda publik — sasaran tekan pertama yang
     disentuh orang, jadi tidak boleh tertinggal kecil. min-height dipakai
     daripada menghitung padding: tingginya dijamin, bukan diperkirakan
     dari ukuran huruf yang bisa berubah. */
  .br-nav .tautan a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
  /* .imp-ent adalah kembaran .grup-tab (aturan yang sama, ditulis dua
     kali) — ia ikut di sini supaya tab impor tidak tertinggal kecil. */
  .grup-tab a,.imp-ent a{padding:15px 15px}
  /* Jejak navigasi & isian jumlah di panel pemindai — dua sasaran tekan
     yang tertinggal karena tidak memakai kelas tombol mana pun. */
  .jejak{padding:12px 4px}
  .toast button{padding:0 0 0 14px;font-size:22px;min-height:44px}
  .pindai-panel .jml,input.jml{min-height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
    font-size:16px;padding:12px 13px;min-height:44px}
  select{padding-right:34px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  input[type=checkbox]:checked::before{width:12px;height:12px}
  label:has(>input[type=checkbox]),label:has(>input[type=radio]){padding:9px 0;min-height:44px}
  .usermenu .um-panel a{padding:12px 11px}
  .logout{padding:12px 15px;min-height:44px}
  /* Baris tabel-kartu jadi sasaran yang lega untuk ditekan */
  table.tbl-kartu td{padding:7px 0}
}
/* Isian 16px pada iOS/Android mencegah halaman melompat-zoom saat difokus —
   tapi hanya untuk sentuh, supaya desktop tetap rapat. */

/* Tabel jadi kartu di ponsel — satu markup, dua tampilan.
   Halaman cukup menambah data-label pada <td> dan kelas .tbl-kartu
   pada <table>. Tanpa itu, tabel tetap bisa digeser seperti biasa. */
@media(max-width:768px){
  /* ---------------------------------------------------------------
     Kartu DUA KOLOM.

     Sebelumnya tiap kolom tabel memakan satu baris penuh di dalam
     kartu. Untuk tabel Produk yang punya 10 kolom, satu baris data
     berubah menjadi kartu setinggi 360px — hampir satu layar ponsel
     untuk SATU barang, dan dasbor jadi sepanjang 12 layar.

     Sekarang isian disusun dua kolom: label di atas, nilainya di
     bawah. Tinggi kartu turun sekitar separuh, dan matanya justru
     lebih mudah memindai karena label dan nilai berdekatan.

     Sel pertama dan sel aksi tetap selebar kartu — yang satu adalah
     pengenal barisnya, yang satu tombolnya.
     --------------------------------------------------------------- */
  table.tbl-kartu{border-spacing:0}
  table.tbl-kartu thead{display:none}
  table.tbl-kartu tbody tr{display:grid;grid-template-columns:1fr 1fr;
    gap:7px 14px;background:var(--surface-3);
    border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:9px;
    box-shadow:var(--shadow-1)}
  table.tbl-kartu tbody tr:hover{background:var(--surface-3)}
  table.tbl-kartu tbody tr:last-child{margin-bottom:0}
  table.tbl-kartu td{display:block;min-width:0;padding:0;border:0;text-align:left;
    overflow-wrap:anywhere}
  /* Sel pertama = pengenal baris, diberi lebar penuh dan huruf lebih besar. */
  table.tbl-kartu tbody tr td:first-child{grid-column:1/-1;font-size:14.5px;
    padding-bottom:10px;border-bottom:1px solid var(--border)}
  table.tbl-kartu tbody tr td:last-child{border-bottom:0}
  table.tbl-kartu td::before{content:attr(data-label);display:block;
    font-size:10.5px;text-transform:uppercase;
    letter-spacing:.07em;font-weight:700;color:var(--muted-2);text-align:left;
    line-height:1.35;margin-bottom:0}
  /* Angka tidak perlu dirapatkan ke kanan lagi — di kartu ia sudah
     berdiri sendiri di bawah labelnya. */
  table.tbl-kartu td.num{text-align:left}
  /* Sel tanpa data-label tampil tanpa keterangan, bukan sebagai blok
     pincang berlabel kosong. */
  table.tbl-kartu td:not([data-label])::before,
  table.tbl-kartu td[data-label=""]::before{content:none}
  /* Sel kosong tidak perlu menyisakan lubang di dalam kisi. */
  table.tbl-kartu td:empty{display:none}
  /* Kolom yang sengaja disembunyikan HARUS tetap tersembunyi di kartu:
     `table.tbl-kartu td{display:block}` spesifisitasnya lebih tinggi
     daripada `.hide{display:none}`, jadi tanpa baris ini kolom batch &
     harga yang tidak relevan justru muncul kembali di ponsel. */
  table.tbl-kartu td.hide{display:none}
  /* Batang sorot baris tidak berlaku di mode kartu — tiap baris sudah
     jadi kotak tersendiri. */
  table.tbl-kartu tbody tr:hover td:first-child{box-shadow:none}
  /* Sel bertanda .judul juga selebar kartu, untuk tabel yang pengenal
     barisnya bukan kolom pertama. */
  table.tbl-kartu td.judul{grid-column:1/-1;font-size:14.5px;
    padding-bottom:10px;border-bottom:1px solid var(--border)}
  /* Tombol aksi selebar kartu, di dasarnya, dengan pemisah di atasnya. */
  table.tbl-kartu td.aksi{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;
    border-top:1px solid var(--border);padding-top:11px;margin-top:2px}
  table.tbl-kartu td.aksi::before{content:none}
  /* Sel dengan colspan (baris "belum ada data") mengambil lebar penuh. */
  table.tbl-kartu td[colspan]{grid-column:1/-1;text-align:center}
  table.tbl-kartu tfoot td{display:flex;justify-content:space-between;position:static}

  /* ---------------------------------------------------------------
     Kolom SEKUNDER disembunyikan di ponsel.

     Tata letak apa pun tidak bisa memadatkan delapan kolom data
     menjadi kartu yang enak dibaca di layar 375px — yang harus
     dikurangi adalah APA yang ditampilkan, bukan bagaimana ia
     disusun. Kode, alamat, penanggung jawab, dan cap waktu tetap
     ada di layar lebar; di ponsel yang tinggal hanyalah pengenal,
     angka yang dicari, statusnya, dan tombolnya.

     Datanya TIDAK hilang — hanya tidak ditampilkan di lebar ini.
     --------------------------------------------------------------- */
  table.tbl-kartu td.sekunder{display:none}

  /* Keterangan tambahan di dalam sel judul dibatasi dua baris. Kategori
     "PERLENGKAPAN BAYI" misalnya membawa keterangan panjang di <small>,
     dan karena sel judul memakai huruf lebih besar, keterangan itu
     sendirian membuat selnya setinggi 144px. Nama barisnya tetap utuh —
     yang dipangkas hanya penjelasnya. */
  table.tbl-kartu tbody tr td:first-child small,
  table.tbl-kartu td.judul small{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:11.8px}
}

/* =====================================================================
   23. GERAK & CETAK
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
@media print{
  .sidebar,.topbar,.overlay,#toast-wrap,.qa,.grup-tab,.no-print{display:none!important}
  .main{margin-left:0}
  .content{padding:0;max-width:none}
  .card{border:1px solid #ddd;box-shadow:none;break-inside:avoid}
  body{background:#fff;color:#000}
}

/* =====================================================================
   24. BERANDA PUBLIK
   ---------------------------------------------------------------------
   Halaman depan sebelum masuk. Tata letaknya tidak menyerupai halaman
   aplikasi mana pun — tanpa sidebar, tanpa topbar — jadi komponennya
   berdiri sendiri di sini, TAPI tetap memakai token yang sama supaya
   kesan pertamanya sudah sesuai dengan isi aplikasinya.

   Halaman ini terbuka untuk siapa saja, jadi isinya statis: tidak ada
   satu angka stok, nama mitra, atau nama penerima yang boleh bocor.
   ===================================================================== */
.br{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- bilah atas ---------- */
.br-nav{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--border)}
.br-nav .isi{display:flex;align-items:center;gap:14px;height:66px}
.br-nav .merek{display:flex;align-items:center;gap:11px;font-family:var(--f-display)}
.br-nav .merek .logo{width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:var(--primary);display:grid;place-items:center;
  box-shadow:0 3px 12px -3px rgba(124,58,237,.7)}
.br-nav .merek .logo svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.br-nav .merek b{font-size:16px;font-weight:700;letter-spacing:-.022em;display:block;line-height:1.2}
.br-nav .merek span{font-size:10.5px;color:var(--muted-2);display:block;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.br-nav .tautan{display:flex;gap:4px;margin-left:auto;align-items:center}
.br-nav .tautan a{padding:9px 13px;border-radius:var(--r-sm);font-size:13.2px;
  font-weight:550;color:var(--text-2);transition:var(--t-cepat)}
.br-nav .tautan a:hover{background:var(--surface-3);color:var(--text)}
.br-nav .tautan a.btn:hover{color:#fff}
@media(max-width:760px){ .br-nav .tautan a.sembunyi-hp{display:none} }

/* ---------- hero ---------- */
.br-hero{padding:76px 0 64px;text-align:center;position:relative}
.br-lencana{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:30px;
  background:var(--primary-lembut);border:1px solid rgba(139,92,246,.3);
  color:var(--primary-t);font-size:12.2px;font-weight:650;margin-bottom:22px}
.br-lencana svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.br-hero h1{font-family:var(--f-display);font-size:clamp(29px,5.2vw,50px);font-weight:730;
  letter-spacing:-.04em;line-height:1.08;margin-bottom:18px}
.br-hero h1 em{font-style:normal;color:var(--primary-t)}
.br-hero p.utama{color:var(--muted);font-size:clamp(14.5px,1.7vw,17.5px);line-height:1.62;
  max-width:62ch;margin:0 auto 30px}
.br-aksi{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.br-aksi .btn{min-height:46px;padding:12px 22px;font-size:14px}

/* ---------- rantai barang ---------- */
.br-rantai{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:52px}
.br-simpul{flex:1 1 150px;min-width:0;max-width:210px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:17px 15px;text-align:center;
  box-shadow:var(--shadow-1),var(--kilau)}
.br-simpul .ic{width:40px;height:40px;margin:0 auto 11px;border-radius:12px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--sc,var(--primary)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--sc,var(--primary)) 30%,transparent)}
.br-simpul .ic svg{width:19px;height:19px;stroke:var(--sc,var(--primary));fill:none;
  stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.br-simpul b{display:block;font-size:13.8px;font-weight:660;letter-spacing:-.01em}
.br-simpul small{display:block;color:var(--muted-2);font-size:11.8px;margin-top:4px;line-height:1.45}
.br-panah{display:grid;place-items:center;color:var(--muted-2);flex-shrink:0;padding:0 2px}
.br-panah svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.br-cabang{display:grid;gap:10px;flex:1 1 150px;max-width:210px}
.br-cabang .br-simpul{max-width:none}
@media(max-width:820px){
  .br-rantai{flex-direction:column;align-items:stretch}
  .br-simpul,.br-cabang{max-width:none}
  .br-panah{transform:rotate(90deg);padding:2px 0}
}

/* ---------- bagian ---------- */
.br-seksi{padding:64px 0;border-top:1px solid var(--border)}
.br-kepala{text-align:center;max-width:64ch;margin:0 auto 38px}
.br-kepala h2{font-family:var(--f-display);font-size:clamp(22px,3vw,32px);font-weight:710;
  letter-spacing:-.032em;line-height:1.18;margin-bottom:12px}
.br-kepala p{color:var(--muted);font-size:14.5px;line-height:1.62}

/* ---------- kartu fitur ---------- */
.br-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.br-kartu{background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:22px;box-shadow:var(--shadow-1),var(--kilau);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.br-kartu:hover{border-color:var(--border-kuat);box-shadow:var(--shadow-2),var(--kilau);
  transform:translateY(-2px)}
.br-kartu .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:14px;background:color-mix(in srgb,var(--kc,var(--primary)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--kc,var(--primary)) 30%,transparent)}
.br-kartu .ic svg{width:19px;height:19px;stroke:var(--kc,var(--primary));fill:none;
  stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.br-kartu h3{font-family:var(--f-display);font-size:15.5px;font-weight:665;
  letter-spacing:-.016em;margin-bottom:7px}
.br-kartu p{color:var(--muted);font-size:13.2px;line-height:1.6}
.br-kartu ul{list-style:none;margin-top:12px;display:grid;gap:6px}
.br-kartu li{display:flex;gap:8px;align-items:flex-start;font-size:12.8px;color:var(--text-2)}
.br-kartu li svg{width:14px;height:14px;stroke:var(--green-t);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-top:3px;flex-shrink:0}

/* ---------- peran ---------- */
.br-peran{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.br-peran .p{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);
  padding:17px}
.br-peran .p .atas{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.br-peran .p .av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  flex-shrink:0;background:color-mix(in srgb,var(--pc,var(--primary)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,var(--primary)) 30%,transparent)}
.br-peran .p .av svg{width:16px;height:16px;stroke:var(--pc,var(--primary));fill:none;
  stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.br-peran .p b{font-size:13.8px;font-weight:660}
.br-peran .p small{display:block;color:var(--muted);font-size:12.5px;line-height:1.55}

/* ---------- langkah bernomor ---------- */
.br-langkah{display:grid;gap:2px;counter-reset:lk;list-style:none}
.br-langkah li{list-style:none;display:flex;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--border);counter-increment:lk}
.br-langkah li:last-child{border-bottom:0}
.br-langkah li::before{content:counter(lk);flex-shrink:0;width:29px;height:29px;
  border-radius:50%;display:grid;place-items:center;background:var(--surface-3);
  border:1px solid var(--border-kuat);color:var(--primary-t);
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.br-langkah b{display:block;font-size:14px;font-weight:645;margin-bottom:3px}
.br-langkah small{display:block;color:var(--muted);font-size:12.8px;line-height:1.58}

/* ---------- penutup ---------- */
.br-tutup{text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:44px 26px;box-shadow:var(--shadow-2),var(--kilau)}
.br-tutup h2{font-family:var(--f-display);font-size:clamp(21px,2.7vw,28px);font-weight:710;
  letter-spacing:-.03em;margin-bottom:11px}
.br-tutup p{color:var(--muted);font-size:14.2px;max-width:52ch;margin:0 auto 24px;line-height:1.6}
.br-footer{border-top:1px solid var(--border);padding:26px 0 34px;text-align:center;
  color:var(--muted-2);font-size:12px;line-height:1.7}

@media(max-width:640px){
  .br{padding:0 16px}
  .br-hero{padding:52px 0 46px}
  .br-seksi{padding:48px 0}
  .br-aksi .btn{width:100%}
  .br-kartu{padding:18px}
}