/* Titip Jual di Feremart — halaman publik.
 *
 * CSS kustom bertoken, TANPA framework dan TANPA font unduhan. Alasannya sama
 * dengan yang sudah ditulis di storefront `store.css`: sasaran halaman ini
 * adalah UMKM di Makassar dan Gowa yang membukanya dari HP dengan kuota
 * terbatas. Memuat runtime CSS dari CDN untuk satu halaman statis menambah
 * berat sekaligus dua titik gagal pihak ketiga, tanpa memberi apa pun yang
 * tidak bisa ditulis di sini.
 *
 * Palet mengikuti token storefront supaya halaman ini tidak terasa asing dari
 * etalase: --brand biru navy, --accent oranye.
 */

:root {
  --brand: #0f4c81;
  --brand-2: #1565a8;
  --accent: #f59e0b;
  --accent-ink: #7a4a02;

  --ink: #12181f;
  --ink-2: #5a6672;
  --ink-3: #8b97a2;

  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --ground: #eef3f8;
  --hairline: #dde6ee;

  --ok: #0e7a55;
  --ok-bg: #e6f5ef;
  --warn: #96590a;
  --warn-bg: #fdf4e3;
  /* Merah galat sudah dipakai di `.alert.err` dan `.btn-danger` sejak lama, tapi
     sebagai angka yang disalin. Dijadikan token supaya pemakaian berikutnya tak
     menyalin angka lain yang "kira-kira merah". */
  --err: #c02a22;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;

  --sh-1: 0 1px 2px rgba(15, 76, 129, .06), 0 2px 8px rgba(15, 76, 129, .05);
  --sh-2: 0 4px 12px rgba(15, 76, 129, .08), 0 12px 32px rgba(15, 76, 129, .07);

  --maxw: 1080px;

  /* DIPAKAI 4 kali sejak lama (garis pemisah `.item`, bingkai poster &
     panduan) tapi tak pernah didefinisikan — jadi border-color jatuh ke
     `currentColor` dan garis tipis itu tergambar sehitam teks. Dialiaskan,
     bukan diberi nilai sendiri, supaya mode gelap ikut lewat --hairline. */
  --line: var(--hairline);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #4d9fdc;
    --brand-2: #6fb4e6;
    --accent: #fbbf24;
    --accent-ink: #fde3a7;

    --ink: #e8eef4;
    --ink-2: #a5b3c0;
    --ink-3: #7a8896;

    --surface: #161c23;
    --surface-2: #1d252e;
    --ground: #0f141a;
    --hairline: #2b3641;

    --err: #ff8a80;
    --ok: #4ade80;
    --ok-bg: #14301f;
    --warn: #fbbf24;
    --warn-bg: #33260c;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --sh-2: 0 4px 12px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.top-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 800; }

.top nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 14.5px;
}
.top nav a {
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.top nav a:hover { color: var(--brand); }

@media (max-width: 860px) {
  .top nav { display: none; }
  .top-in .btn { margin-left: auto; }
}

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--brand-2); box-shadow: var(--sh-2); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* 44px: batas bawah sasaran ketuk yang bisa dikenai jempol tanpa membidik.
   `.btn-sm` adalah tombol yang PALING SERING ditekan di panel (setiap aksi di
   dalam kartu), dan sebelum ini tingginya ~41px. */
.btn-sm { padding: 9px 16px; font-size: 14px; min-height: 44px; }

/* ---------- Bagian umum ---------- */

section { padding: 68px 0; }
section.tight { padding: 48px 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
}

h1 {
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  font-weight: 800;
}

h2 {
  font-size: clamp(23px, 3.4vw, 31px);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  font-weight: 750;
}

h3 { font-size: 17.5px; margin: 0 0 6px; font-weight: 700; }

.lede { font-size: 17.5px; color: var(--ink-2); margin: 0 0 26px; max-width: 62ch; }
.sub { color: var(--ink-2); max-width: 66ch; margin: 0 0 30px; }

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(1100px 420px at 82% -8%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 60px 0 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 52px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 13.5px;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-note {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

/* Kartu contoh — memperlihatkan produknya, bukan menjanjikannya. */

.mock {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 22px;
  border: 1px solid var(--hairline);
}
.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.mock-title { font-weight: 750; font-size: 15.5px; }
.mock-live {
  font-size: 12px;
  color: var(--ok);
  background: var(--ok-bg);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 650;
}
.mock-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
}
.mock-row span { color: var(--ink-2); }
.mock-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.mock-total {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mock-total span { color: var(--ink-2); font-size: 14.5px; }
.mock-total b {
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.mock-foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ---------- Kartu ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--sh-1);
}

.card .ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  color: var(--brand);
  margin-bottom: 14px;
}
.card p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- Langkah ---------- */

.steps { display: grid; gap: 16px; counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--surface);
  border-radius: var(--r);
  padding: 22px 24px;
  box-shadow: var(--sh-1);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 750;
  font-size: 17px;
}
.step p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- Transparansi (bagian terpenting) ---------- */

.trust {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.trust-q {
  font-size: clamp(21px, 3.2vw, 28px);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.trust-a { color: var(--ink-2); margin: 0 0 32px; max-width: 66ch; }

.checks { display: grid; gap: 14px; }
.check {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
}
.check .tick {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.check b { font-weight: 700; display: block; }
.check span { color: var(--ink-2); font-size: 15px; }

/* ---------- Kotak jujur ---------- */

.honest {
  background: var(--warn-bg);
  border-radius: var(--r);
  padding: 26px 28px;
  border-left: 4px solid var(--warn);
}
.honest h3 { color: var(--warn); }
.honest p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; }
.honest p:last-child { margin-bottom: 0; }

/* ---------- Dua jalur pembaca ---------- */

.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px) { .lanes { grid-template-columns: 1fr; } }

.lane {
  background: var(--surface);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh-1);
}
.lane h3 { color: var(--brand); }
.lane ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; }
.lane li { margin-bottom: 7px; }

/* ---------- Biaya ---------- */

.fee {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--sh-1);
  text-align: center;
}
.fee-big {
  font-size: clamp(34px, 6vw, 50px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
  line-height: 1.1;
  margin: 6px 0 10px;
}
.fee p { color: var(--ink-2); margin: 0 auto; max-width: 52ch; }

.example {
  margin-top: 26px;
  display: inline-grid;
  gap: 8px;
  text-align: left;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  font-size: 14.5px;
}
.example div { display: flex; justify-content: space-between; gap: 28px; }
.example b { font-variant-numeric: tabular-nums; }
.example .sep { border-top: 1px solid var(--hairline); padding-top: 8px; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.faq summary {
  padding: 17px 22px;
  cursor: pointer;
  font-weight: 650;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 21px;
  color: var(--ink-3);
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .body {
  padding: 0 22px 19px;
  color: var(--ink-2);
  font-size: 15px;
}
.faq .body p { margin: 0 0 10px; }
.faq .body p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */

.band {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-radius: var(--r-lg);
  padding: 46px 40px;
  text-align: center;
  box-shadow: var(--sh-2);
}
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, .9); max-width: 54ch; margin: 0 auto 26px; }
.band .btn-primary {
  background: #fff;
  color: var(--brand);
}
.band .btn-primary:hover { background: #f1f6fb; }
.band small { display: block; margin-top: 16px; color: rgba(255, 255, 255, .78); font-size: 13.5px; }

/* ---------- Footer ---------- */

footer {
  padding: 40px 0 56px;
  color: var(--ink-3);
  font-size: 14px;
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
}
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--brand); }

/* ---------- Contoh angka (di bawah bagian transparansi) ----------
 * Angka konkret meyakinkan lebih baik daripada kata sifat. Blok ini sengaja
 * dibuat menyerupai nota, bukan tabel laporan — yang dibacanya pemilik warung,
 * bukan akuntan.
 */

.ledger {
  margin-top: 34px;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 24px 26px;
  max-width: 560px;
}

.ledger-cap {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-2);
}

.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}
.ledger-row span { color: var(--ink-2); }
.ledger-row b { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

.ledger-row.is-total {
  border-top: 2px solid var(--hairline);
  margin-top: 6px;
  padding-top: 14px;
}
.ledger-row.is-total span { color: var(--ink); font-weight: 650; }
.ledger-row.is-total b {
  font-size: 21px;
  color: var(--brand);
  letter-spacing: -.02em;
}

.ledger-foot {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ---------- Formulir pendaftaran ---------- */

.form-wrap { max-width: 620px; margin: 0 auto; padding: 34px 20px 72px; }

.progress { display: flex; gap: 8px; margin-bottom: 28px; }
.progress i {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--hairline);
  transition: background .2s ease;
}
.progress i.on { background: var(--brand); }

.panel {
  background: var(--surface);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh-1);
}
.panel[hidden] { display: none; }

.field { margin-bottom: 18px; }
.field > label {
  display: block;
  font-weight: 650;
  font-size: 14.5px;
  margin-bottom: 6px;
}
/* `.hint` dipakai DI LUAR `.field` di hampir semua layar panel (keterangan di
   bawah judul, catatan di kartu). Selama ini cuma aturan turunan di bawah ini
   yang ada, jadi pemakaian yang berdiri sendiri tampil sebesar dan sepekat teks
   biasa — keterangan yang berteriak sekeras isinya. */
.hint { color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.field .hint { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; margin-top: 2px; }

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=date],
input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  /* 16px BUKAN selera: di bawah 16px, Safari iOS memperbesar seluruh halaman
     tiap kali isian difokus, lalu meninggalkannya dalam keadaan ter-zoom —
     staf harus mencubit keluar setelah mengetik satu angka. */
  font-size: 16px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
textarea { resize: vertical; min-height: 84px; }

input[type=file] {
  width: 100%;
  padding: 11px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 14px;
  color: var(--ink-2);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nav-row { display: flex; gap: 10px; justify-content: space-between; margin-top: 24px; }

.terms-box {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  background: var(--surface-2);
  font-size: 14px;
  margin-bottom: 16px;
}
.terms-box h2 { font-size: 17px; margin: 0 0 4px; }
.terms-box h3 { font-size: 14.5px; margin: 16px 0 4px; color: var(--brand); }
.terms-box p { margin: 0 0 8px; color: var(--ink-2); }
.terms-box .v { color: var(--ink-3); font-size: 12.5px; }

.agree {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.55;
}
.agree input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }

.alert {
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-size: 14.5px;
  margin-bottom: 16px;
}
.alert.err { background: color-mix(in srgb, #c02a22 12%, transparent); color: #c02a22; }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
@media (prefers-color-scheme: dark) {
  .alert.err { background: #3a1512; color: #ff8a80; }
}

.done { text-align: center; padding: 20px 0; }
.done .big {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  display: grid; place-items: center;
  margin: 0 auto 18px;
}

/* ---------- Panel peninjauan ---------- */

.panel-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 70px; }

.split { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.queue { display: grid; gap: 9px; max-height: 74vh; overflow-y: auto; }

.qitem {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  box-shadow: var(--sh-1);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.qitem:hover { box-shadow: var(--sh-2); }
.qitem.on { border-left-color: var(--brand); }
.qitem b { display: block; font-size: 15px; }
.qitem span { color: var(--ink-2); font-size: 13.5px; }
.qitem .meta { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.pill.pending { background: var(--warn-bg); color: var(--warn); }
.pill.active { background: var(--ok-bg); color: var(--ok); }
.pill.rejected { background: color-mix(in srgb, #c02a22 14%, transparent); color: #c02a22; }
.pill.suspended { background: var(--ground); color: var(--ink-2); }

.detail { background: var(--surface); border-radius: var(--r); padding: 26px; box-shadow: var(--sh-1); }
.detail h2 { font-size: 21px; margin: 0 0 2px; }

.dl { display: grid; grid-template-columns: 168px 1fr; gap: 6px 16px; font-size: 14.5px; margin: 18px 0; }
.dl dt { color: var(--ink-2); }
.dl dd { margin: 0; font-weight: 600; }

.docs { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 22px; }
.doc {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  min-width: 150px;
}
.doc img { border-radius: 8px; max-height: 190px; margin: 0 auto 8px; }
.doc .warn { color: var(--warn); font-size: 12px; margin-top: 6px; display: block; }

.outlet-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px;
  background: var(--surface-2);
}
.otenant { font-size: 12px; font-weight: 750; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 10px 8px 4px; }
.orow { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; font-size: 14.5px; }
.orow:hover { background: var(--ground); }
.orow input { width: 17px; height: 17px; accent-color: var(--brand); }
.orow .lim { width: 88px; padding: 5px 8px; font-size: 13px; }

.act-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.btn-danger { background: #c02a22; color: #fff; }
.btn-danger:hover { background: #a8241d; }

.hist { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 16px; font-size: 13.5px; }
.hist div { color: var(--ink-2); padding: 4px 0; }

.empty { text-align: center; color: var(--ink-3); padding: 50px 20px; }

/* ---------- Dokumen legal (ketentuan, privasi) ---------- */

.doc-legal { font-size: 15px; }
.doc-legal h2 {
  font-size: 18px;
  margin: 30px 0 8px;
  color: var(--brand);
  letter-spacing: -.01em;
}
.doc-legal h3 {
  font-size: 15px;
  margin: 20px 0 6px;
  color: var(--ink);
}
.doc-legal p { color: var(--ink-2); margin: 0 0 12px; }
.doc-legal ul { padding-left: 22px; margin: 0 0 14px; color: var(--ink-2); }
.doc-legal li { margin-bottom: 8px; }
.doc-legal strong { color: var(--ink); }
.doc-legal code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 13.5px;
}
.doc-legal .v { color: var(--ink-3); font-size: 13px; }
.doc-legal a { color: var(--brand); }

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 14.5px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.tbl th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  font-weight: 700;
}
.tbl td:first-child { color: var(--ink); font-weight: 600; width: 42%; }
.tbl td:last-child { color: var(--ink-2); }


/* ---------- "Siapkan dulu" di hero ----------
 * Ditaruh di hero, bukan di tengah halaman. Sebelum ini, syarat KTP baru
 * terbaca setelah menggulir 6,4 layar — sehingga orang yang menekan tombol
 * daftar dari hero baru mengetahuinya di langkah ketiga formulir, setelah
 * mengisi dua langkah. Memberi tahu di depan menurunkan jumlah pendaftar yang
 * memulai, tapi menaikkan jumlah yang menyelesaikan — dan yang kedua itu yang
 * berguna.
 */

.siapkan {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
}
.siapkan b { display: block; margin-bottom: 8px; font-size: 14.5px; }
.siapkan ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.siapkan li { margin-bottom: 4px; }
.siapkan span {
  display: block;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 13px;
}


/* ---------- Penanda kemajuan berlabel ---------- */

.langkah {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.langkah li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-3);
  border-top: 3px solid var(--hairline);
  padding-top: 10px;
}
.langkah li i {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hairline);
  color: var(--ink-2);
}
.langkah li em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-3);
  opacity: .85;
}
.langkah li.on { border-top-color: var(--brand); color: var(--ink); font-weight: 650; }
.langkah li.on i { background: var(--brand); color: #fff; }
.langkah li.selesai { border-top-color: var(--ok); }
.langkah li.selesai i { background: var(--ok-bg); color: var(--ok); }

/* ── Layar produk & nota titipan (13 Sep 2026) ─────────────────────────────
   Ditambahkan seperlunya. Lencana status TIDAK punya kelas baru: ia memakai
   ulang .pill.pending/.active/.rejected/.suspended yang sudah ada, karena
   artinya memang sama — yang berbeda cuma katanya. */

.subnav { display: flex; gap: 4px; margin: 0 0 18px; flex-wrap: wrap; }
.subnav a {
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.subnav a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

.item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-head b { font-size: 15.5px; }
.item-sub { color: var(--ink-2); font-size: 14px; margin-top: 3px; }

/* Peringatan: bukan galat (merah = "ada yang rusak") dan bukan sukses.
   Dipakai untuk keadaan yang BENAR tapi perlu diperhatikan, mis. "perubahan
   Anda masih ditinjau". */
.alert.warn { background: var(--warn-bg); color: var(--warn); }

.opt { color: var(--ink-2); font-weight: 400; font-size: 13px; }

/* SATU definisi tab. Sampai 18 Sep ada DUA blok `.tabs`/`.tab` di berkas ini
   (baris ~699 dan di sini) dengan dasar yang saling menimpa, dan dua halaman
   yang memakainya menandai butir aktif dengan cara berbeda: `pendaftaran.html`
   menambah kelas `.on`, `produk.html` menyetel `aria-current`. Keduanya
   didukung di sini supaya tak ada JS yang perlu diubah demi kerapian CSS.

   Menggeser, bukan melipat: strip status yang melipat jadi dua baris memakan
   tinggi layar yang justru dibutuhkan daftarnya. */
.tabs {
  display: flex; gap: 6px; margin: 0 0 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; cursor: pointer; padding: 10px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-2); background: transparent;
  font-family: inherit; white-space: nowrap; flex: 0 0 auto;
  min-height: 44px; scroll-snap-align: start;
}
.tab.on, .tab[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.tab .n, .tab span { opacity: .65; margin-left: 5px; font-variant-numeric: tabular-nums; }

.row-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-act input { max-width: 150px; }

.stat-row { display: flex; gap: 18px; flex-wrap: wrap; }
.stat { flex: 1 1 150px; }
.stat b { display: block; font-size: 21px; margin-top: 2px; }
.stat-lbl { color: var(--ink-2); font-size: 13px; }

/* Ceklis: satu-satunya jenis input yang belum pernah bergaya di berkas ini.
   `.orow input` hanya mengatur ukurannya di dalam pemilih outlet. */
input[type=checkbox], input[type=radio] {
  width: 22px; height: 22px; accent-color: var(--brand);
}
.consent-row { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  margin: 12px 0; font-size: 14px; line-height: 1.5; }

/* <details> di dalam panel. Sampai sekarang <details> hanya bergaya di .faq. */
.panel > details > summary,
details.panel > summary { cursor: pointer; font-size: 15.5px; padding: 2px 0; }
/* DUA penanda segitiga muncul sekaligus di Chromium: `::-webkit-details-marker`
   hanya mematikan penanda WebKit lama, sedangkan Blink modern menggambarnya
   lewat `::marker`. Keduanya dimatikan, lalu `::before` di bawah yang menjadi
   satu-satunya penanda — dan ia yang berubah bentuk saat dibuka. */
details.panel > summary::-webkit-details-marker { display: none; }
.panel > details > summary,
details.panel > summary { list-style: none; }
.panel > details > summary::marker,
details.panel > summary::marker { content: ""; }
details.panel > summary::before { content: "▸ "; color: var(--ink-2); }
details.panel[open] > summary::before { content: "▾ "; }

/* ── Poster QR "Setor barang" (halaman /panel/qr) ───────────────────────────
   Blok cetak PERTAMA di berkas ini. Kertas yang ditempel di konter punya
   syarat yang tak dipunyai layar: QR-nya harus berukuran FISIK (mm), bukan
   piksel, supaya tercetak sama besar berapa pun zoom layar orang yang
   mencetaknya. */
.poster {
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 28px 24px;
  text-align: center;
  background: #fff;
  color: #10243a;
}
.poster-judul { font-size: 20px; margin: 0 0 4px; font-weight: 500; }
.poster-outlet { font-size: 26px; font-weight: 700; margin-bottom: 14px; }
.poster-qr { width: 62mm; height: 62mm; margin: 0 auto 10px; }
.poster-qr svg { width: 100%; height: 100%; display: block; }
.poster-url { font-size: 13px; word-break: break-all; color: #45607a; margin-bottom: 14px; }
.poster-langkah { text-align: left; max-width: 420px; margin: 0 auto; font-size: 15px; line-height: 1.7; }
.poster-catatan { font-size: 13.5px; color: #45607a; margin: 14px auto 0; max-width: 460px; }

/* Panduan kasir — kertas KEDUA di halaman yang sama, menghadap ke dalam
   konter. Rata kiri (ia dibaca sebagai urutan tindakan, bukan dipandang dari
   jauh seperti poster), dan hurufnya tetap besar: yang membacanya sedang
   berdiri dengan antrean di belakangnya. */
.panduan {
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
  background: #fff;
  color: #10243a;
  margin-top: 18px;
}
.panduan-judul { font-size: 20px; margin: 0 0 2px; }
.panduan-outlet { font-size: 15px; color: #45607a; margin-bottom: 14px; }
.panduan h3 { font-size: 16px; margin: 18px 0 6px; }
.panduan ol, .panduan ul { margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 1.65; }
.panduan li { margin-bottom: 5px; }
.panduan-tag { font-size: 12px; font-weight: 500; color: #45607a; }
.panduan-catatan { font-size: 13.5px; color: #45607a; margin: 16px 0 0;
  border-top: 1px solid var(--line); padding-top: 12px; }

@media print {
  .no-print, .top, .subnav, .btn { display: none !important; }
  body { background: #fff; }
  .form-wrap { max-width: none; padding: 0; margin: 0; }
  .poster { border: none; padding: 0; page-break-inside: avoid; }
  .poster-qr { width: 78mm; height: 78mm; }
  .panduan { border: none; padding: 0; margin: 0; page-break-inside: avoid; }
  /* Satu tombol = satu kertas. Tanpa dua aturan ini, poster dan panduan keluar
     bersamaan dan satu lembar selalu terbuang. */
  body.cetak-qr .panduan { display: none !important; }
  body.cetak-panduan .poster { display: none !important; }
}

/* ── Popup (dialog) ─────────────────────────────────────────────────────────
   Komponen dialog PERTAMA di berkas ini; bertoken, jadi mode gelap ikut
   sendiri. `[hidden]` WAJIB ditulis ulang: `display:flex` mengalahkan atribut
   `hidden`, dan tanpa aturan itu popupnya menutupi layar sejak halaman dibuka. */
.modal { position: fixed; inset: 0; z-index: 50; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 20, 32, .55); }
.modal[hidden] { display: none; }

/* Aturan umum, dan ia menutup satu kelas jebakan: elemen yang punya `display`
   sendiri (flex/grid/inline-flex) MENGALAHKAN atribut `hidden`, karena `hidden`
   hanya membawa `display: none` dari gaya bawaan peramban. Gejalanya selalu
   sama dan selalu membingungkan — JS menyetel `el.hidden = true`, elemennya
   tetap terlihat, dan tak ada satu pun galat. `.modal[hidden]` di atas lahir
   dari kejadian itu; ini mencegahnya berulang di komponen berikutnya. */
[hidden] { display: none !important; }
.modal-kartu { width: 100%; max-width: 420px; padding: 24px 22px; text-align: center;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r); box-shadow: var(--sh-2); }
/* Kartu berisi FORMULIR: rata kiri, lebih lebar, dan bisa digulir sendiri —
   formulir ajukan produk lebih tinggi daripada layar HP. */
.modal-kartu.modal-form { max-width: 560px; text-align: left; max-height: 88vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.modal-head h2 { font-size: 19px; margin: 0; }
.modal-tutup-x { margin-left: auto; }
.modal-lencana { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--ok-bg); color: var(--ok); }
.modal-judul { font-size: 19px; margin: 0 0 6px; }
.modal-teks { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; }
/* Tombol ditumpuk, bukan berdampingan: di 390px dua tombol sebaris memaksa
   labelnya dipendekkan sampai kehilangan arti. */
.modal-aksi { display: grid; gap: 8px; }
body.modal-terbuka { overflow: hidden; }

/* ── Chrome panel di HP (18 Sep 2026) ───────────────────────────────────────
   Menu lama enam butir melipat jadi TIGA baris (119px); bersama bilah atas,
   konten baru mulai di y=234 pada layar 390px — 28% layar habis sebelum ada
   isi. Panel ini dipakai sambil berdiri di konter, satu tangan, dengan vendor
   menunggu di depan; maka menunya turun ke bawah, tempat jempol sampai.

   Markupnya disuntik server (`app/services/panel_chrome.py`), bukan disalin ke
   enam berkas. */

.bilah-atas {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; min-height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.bilah-judul { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
/* Pemilih tempat, bukan tombol: ia mengubah SELURUH isi layar, jadi ia berdiri
   sendiri di kanan dan tetap terbaca penuh. */
.bilah-tenant {
  width: auto; max-width: 52vw; margin-left: auto;
  /* 44px & 16px karena ia SELECT: di bawah 16px, Safari iOS memperbesar layar
     saat ia difokus — dan ini kontrol yang paling sering ditekan di bilah. */
  min-height: 44px; padding: 8px 12px; font-size: 16px; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--ink);
}
.bilah-tenant[hidden] { display: none; }
/* Satu tenant = tak ada yang perlu dipilih. Kontrol yang hanya punya satu
   jawaban adalah kontrol yang membohongi orang; ia tetap ditampilkan sebagai
   KETERANGAN (staf perlu tahu ia sedang melihat tempat mana), tapi tak lagi
   berbentuk tombol. */
.bilah-tenant.satu {
  appearance: none; -webkit-appearance: none; pointer-events: none;
  border-color: transparent; background: none; color: var(--ink-2);
  font-weight: 600; padding-right: 0;
}
/* Nama tempat yang panjang dipotong dengan elipsis, bukan memaksa judul
   halaman menyempit. */
.bilah-tenant { text-overflow: ellipsis; }

.bilah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.bilah-butir {
  flex: 1 1 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 6px 2px 8px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-3); text-decoration: none;
}
.bilah-butir[aria-current] { color: var(--brand); }
/* Butir aktif juga ditandai garis di ATAS ikonnya: warna saja tidak cukup bagi
   mata yang sulit membedakan biru dari abu. */
.bilah-butir[aria-current]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand);
}
.bilah-lencana, .bilah-titik {
  position: absolute; top: 5px; left: 50%; margin-left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #3d2600;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.bilah-titik { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 9px; }
.bilah-lencana[hidden], .bilah-titik[hidden] { display: none; }

/* Lembar "Lainnya": naik dari bawah, dekat jempol yang baru menekannya. */
.lembar-kartu { margin-top: auto; margin-bottom: 0; max-width: 520px; text-align: left;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
.lembar-butir {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 8px 6px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  text-align: left; text-decoration: none;
}
.lembar-butir + .lembar-butir { border-top: 1px solid var(--hairline); }
.lembar-keluar { color: var(--err); }
.lembar-kartu .btn { width: 100%; margin-top: 10px; }

/* Ruang untuk bilah bawah. Ditempel pada BADAN halaman panel saja
   (`body.panel-hp`), bukan pada `.form-wrap` yang juga dipakai halaman publik
   tanpa bilah — kalau tidak, halaman publik mendapat ruang kosong tanpa sebab. */
body.panel-hp .form-wrap,
body.panel-hp .panel-wrap {
  padding-top: 18px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
/* Antrean kiri tak lagi boleh setinggi 74vh: bilah atas + bilah bawah memakan
   ~110px, dan sisanya membuat baris terakhir tersembunyi di balik menu. */
body.panel-hp .queue { max-height: none; }
@media (min-width: 941px) { body.panel-hp .queue { max-height: 68vh; } }

/* Isian sempit di pemilih outlet ikut aturan 16px — ia juga bisa difokus, jadi
   ia juga memicu zoom paksa iOS. */
.orow .lim { font-size: 16px; }
.orow { min-height: 44px; }

/* Baris aksi di kartu saldo: tiga isian sempit berdampingan melipat jadi dua
   baris di 390px. Di layar sesempit itu, satu kolom lebih cepat diisi. */
@media (max-width: 480px) {
  .row-act { flex-direction: column; align-items: stretch; }
  .row-act input { max-width: none; }
  .row-act .btn { width: 100%; }
}

/* Pratinjau kertas di layar: poster & panduan dibuat untuk KERTAS (QR 62mm,
   judul 26px) dan tak muat di 390px. Digulir sendiri di layar; cetakannya
   tidak disentuh sama sekali. */
@media screen and (max-width: 640px) {
  .poster, .panduan { overflow-x: auto; }
}

@media print {
  .bilah, .bilah-atas, .lembar-kartu, #lembar-lainnya { display: none !important; }
}

/* Baris dengan aksi di kanan: isi tumbuh, tombolnya tetap di ujung dan tak
   pernah ikut melipat ke baris sendiri (tombol yang melipat membuat tiap kartu
   bertambah tinggi tanpa menambah keterangan apa pun). */
.baris-aksi { display: flex; align-items: center; gap: 10px; }
.baris-isi { flex: 1 1 auto; min-width: 0; }
.tombol-wa { flex: 0 0 auto; gap: 5px; padding-left: 12px; padding-right: 14px; }

/* ── Daftar vendor saat vendornya sudah ratusan ─────────────────────────────
   Tiga hal berubah sifat begitu daftar tumbuh dari belasan jadi ratusan:

   1. Alat mencari harus tetap terjangkau. Kotak cari yang ikut tergulir ke
      luar layar memaksa orang menggulir balik ke atas untuk mengubah satu
      huruf — jadi ia DITEMPEL tepat di bawah bilah atas (52px).
   2. Daftar tak lagi dimuat seluruhnya; sisanya diminta lewat tombol.
   3. Di HP, membuka satu vendor tak boleh berarti menggulir melewati ratusan
      kartu untuk sampai ke detailnya: detail MENGGANTIKAN daftar, dengan
      tombol kembali yang memulihkan posisi guliran. Di layar lebar keduanya
      tetap berdampingan — di sana kolom kanan memang sudah dipesan. */
.cari-tempel {
  position: sticky; top: 52px; z-index: 20;
  background: var(--ground); margin: 0 -4px; padding: 10px 4px 8px;
}
.cari-tempel input[type="search"] { margin: 0; }
.saring-vendor { margin: 8px 0 0; }
.hasil-vendor { margin: 8px 0 10px; }
.muat-lagi { width: 100%; margin-top: 10px; }
.balik-daftar { margin: 0 0 12px; }

@media (min-width: 941px) { .balik-daftar { display: none; } }
@media (max-width: 940px) {
  .split.lihat-detail .kolom-daftar { display: none; }
  .split:not(.lihat-detail) .kolom-detail { display: none; }
}

/* ── Kartu tempat di layar "Titipan Saya" ───────────────────────────────────
   Tempat menitipkan adalah tempat BEKERJA, jadi kartunya bukan sekadar papan
   nama: ia membawa ke formulir setor untuk outlet itu. Dibuat sebagai <a>
   supaya seluruh kartu jadi sasaran ketuk (bukan tautan kecil di dalam kartu
   yang harus dibidik), dan supaya tekan-lama menawarkan "buka di tab baru"
   seperti tautan lain. */
.kartu-tempat {
  display: block; margin-bottom: 10px; text-decoration: none; color: inherit;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.kartu-tempat:hover { box-shadow: var(--sh-2); }
.kartu-tempat:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.kartu-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.kartu-kepala b { font-size: 16.5px; }
.kartu-aksi {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--brand); font-weight: 650; font-size: 15px;
}
.kartu-aksi span { font-size: 20px; line-height: 1; }

/* Menu vendor: satu baris yang digeser, bukan dua baris yang melipat. Lima
   butir di layar 390px memakan ~80px kalau melipat — tinggi yang sama dengan
   satu kartu tempat, di setiap halaman vendor. */
.subnav {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center; scroll-snap-align: start; }

/* ── Kartu terima setoran (layar Nota titip) ────────────────────────────────
   Kontrol yang paling sering disentuh di seluruh panel: kasir menghitung barang
   sambil vendor menunggu. Angkanya besar, tombolnya sebesar jempol, dan papan
   ketik tidak muncul kecuali memang mau mengetik. */
.baris-setor { padding: 10px 0; border-top: 1px solid var(--line); }
.baris-setor:first-of-type { border-top: 0; padding-top: 4px; }
.stepper { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.stepper-tombol {
  flex: 0 0 auto; width: 56px; min-height: 48px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer;
}
.stepper-tombol:active { background: var(--ground); }
.stepper input {
  flex: 0 1 110px; text-align: center;
  font-size: 20px; font-weight: 700; min-height: 48px;
  font-variant-numeric: tabular-nums;
}
/* Aksi utama selebar kartu: di layar 390px, dua tombol sebaris memaksa
   labelnya dipendekkan sampai "Terima & catat nota" kehilangan artinya. */
.aksi-tumpuk { display: grid; gap: 8px; margin-top: 12px; }
.aksi-tumpuk .btn { width: 100%; }

/* ── Pemilih bercari untuk <select> panjang (web/assets/js/pilih.js) ────────
   Dipakai di formulir yang memilih VENDOR. Selama vendornya belasan, <select>
   bawaan adalah pilihan yang benar; begitu ratusan, ia jadi roda putar tanpa
   kotak cari yang harus diputar sambil berdiri di konter. */
.pilih { position: relative; }
/* Select aslinya tetap DIRENDER — 1px dan tembus pandang, bukan `display:none`.
   Kontrol yang tak dirender tak bisa difokus, dan `required` yang tak bisa
   difokus membuat peramban menolak mengirim formulir TANPA pesan apa pun. */
.pilih-asli {
  position: absolute; left: 14px; bottom: 2px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; min-height: 0;
}
.pilih-tombol {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 11px 14px;
  font: inherit; font-size: 16px; text-align: left; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.pilih-tombol::after { content: "\25be"; color: var(--ink-3); font-size: 13px; }
.pilih-tombol.pilih-kosong { color: var(--ink-3); }
.pilih-tombol:disabled { opacity: .6; cursor: default; }
.pilih-kartu {
  max-width: 520px; text-align: left; max-height: 84vh;
  display: flex; flex-direction: column;
}
.pilih-cari { margin: 8px 0 10px; }
.pilih-hasil { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.pilih-baris {
  display: block; width: 100%; min-height: 46px; padding: 12px 14px;
  font: inherit; font-size: 15.5px; text-align: left; color: var(--ink);
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.pilih-baris + .pilih-baris { border-top: 1px solid var(--hairline); }
/* Hover hanya untuk tetikus sungguhan: di layar sentuh, baris yang terakhir
   disentuh akan tetap tersorot dan terbaca seperti "yang terpilih". */
@media (hover: hover) { .pilih-baris:hover { background: var(--ground); } }
.pilih-baris.on {
  background: color-mix(in srgb, var(--brand) 10%, transparent); font-weight: 650;
}
.pilih-sisa { margin: 10px 0 0; }

/* ── Tabel data: layar kelola produk ───────────────────────────────────────
   Dibuat menyerupai /products SCM, atas permintaan owner, tapi tanpa Tailwind
   — hanya token berkas ini. Yang membuatnya bisa hidup di layar 390px bukan
   `<table>`-nya, melainkan tiga hal di bawah: kolom pertama yang LENGKET,
   angka yang rata kanan dengan lebar digit tetap, dan garis perhatian yang
   tetap terlihat sejauh apa pun tabel digeser ke kanan. */
.tabel-gulir {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm); background: var(--surface);
}
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
/* `top: 0`, BUKAN 52px. Kotak `.tabel-gulir` punya `overflow-x: auto`, jadi
   ia sendiri yang jadi acuan `sticky` — offset 52px membuat kepala tabel
   mengambang 52px ke bawah DAN menutupi baris pertamanya. Kepala tabel di sini
   menempel pada tabelnya, bukan pada bilah atas layar. */
.tabel th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); text-align: left; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .02em; padding: 0; border-bottom: 1px solid var(--line);
}
.tabel td {
  padding: 11px 12px; border-bottom: 1px solid var(--hairline);
  vertical-align: top; white-space: nowrap;
}
/* Angka dibaca dengan cara membandingkan, jadi ia rata kanan dan tiap digit
   selebar digit lain — kalau tidak, "9.000" dan "11.000" tak sejajar dan mata
   harus membaca ulang tiap baris. Ditulis untuk `th` JUGA: aturan dasar
   `th { text-align: left }` menang atas `.kanan` yang berdiri sendiri. */
.tabel th.kanan, .tabel td.kanan { text-align: right; font-variant-numeric: tabular-nums; }
.tabel th.kanan .tabel-urut { justify-content: flex-end; width: 100%; }
/* Sel lengket WAJIB punya latar sendiri: tanpa itu ia tembus pandang dan
   kolom lain lewat DI BAWAH nama produk saat tabel digeser. */
.tabel .lekat {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); border-right: 1px solid var(--hairline);
  /* Lebar minimum: tanpa ini, sembilan kolom berebut ruang dan kolom nama
     tersisa ~130px — tiap nama melipat tiga baris dan tiap baris jadi 144px. */
  min-width: 180px; max-width: 54vw; white-space: normal;
}
.tabel th.lekat { z-index: 3; }
.tabel tbody tr:hover td { background: var(--ground); }
.tabel tbody tr:hover .lekat { background: var(--ground); }
/* Garis perhatian di kolom BEKU — satu-satunya tempat yang pasti terlihat
   berapa pun jauhnya tabel digulir ke samping. */
.tabel tr.perhatian .lekat { box-shadow: inset 3px 0 0 var(--warn); }
.tabel-urut {
  display: flex; align-items: center; gap: 4px;
  width: 100%; min-height: 44px; padding: 0 12px;
  background: none; border: 0; font: inherit; color: inherit;
  letter-spacing: inherit; text-align: left; cursor: pointer;
}
.tabel-urut[aria-sort="ascending"]::after { content: "\2191"; }
.tabel-urut[aria-sort="descending"]::after { content: "\2193"; }
.tabel-urut[aria-sort] { color: var(--brand); }
.tabel-nama {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px;
}
.tabel-nama b { display: block; font-size: 14.5px; line-height: 1.35; }
.tabel-sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.tabel-foto {
  width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
  float: left; margin: 2px 9px 0 0; background: var(--ground);
}
.tabel-kaki {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px 0; color: var(--ink-2); font-size: 13.5px;
}
.tabel-kosong { padding: 40px 16px; text-align: center; color: var(--ink-3); }

/* Kartu ringkasan yang bisa diketuk untuk menyaring — pola yang sama dengan
   kartu statistik /products SCM, tapi SATU BARIS: di 390px, tiga kartu bertumpuk
   memakan 210px sebelum ada satu pun produk terlihat. */
.stat.bisa-klik {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto;
  min-height: 44px; padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; color: inherit;
}
.stat.bisa-klik .stat-lbl { font-size: 13px; }
.stat.bisa-klik b { margin-top: 0; }
#kartu-ringkas { gap: 8px; }
.stat.bisa-klik[aria-pressed="true"] {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.stat.bisa-klik b { font-size: 17px; }

/* Toolbar layar kelola: tombol + pemilih berdampingan. SENGAJA bukan `.row-act`
   — aturan 480px di sana menumpuk isinya jadi satu kolom, yang benar untuk
   formulir tapi memakan 120px di toolbar yang isinya cuma dua kontrol. */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 0; }
.toolbar select { flex: 1 1 160px; max-width: 260px; margin: 0; }
.toolbar .btn { flex: 0 0 auto; }

/* Baris chip saringan aktif. Memakai ulang `.pill`; yang baru hanya silangnya. */
.chip-baris { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip-x {
  background: none; border: 0; padding: 0 2px; font: inherit; line-height: 1;
  color: inherit; cursor: pointer; opacity: .7;
}

/* ── Pencarian & saringan /panel/produk (7 Okt 2026) ─────────────────────── */
.cari-baris { position: relative; }
.cari-baris input[type="search"] { padding-right: 40px; }
/* Petunjuk pintasan "/" — hanya di layar yang punya papan ketik fisik. */
.cari-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; pointer-events: none;
}
.cari-baris input:focus + .cari-kbd, .cari-baris input:not(:placeholder-shown) + .cari-kbd { display: none; }
@media (hover: none) { .cari-kbd { display: none; } }
#cari-bantu { color: var(--ink-3); font-size: 12.5px; }

/* "N cocok" di tab: jawaban untuk "yang saya cari ada di tab mana?". Warnanya
   brand supaya terbaca beda dari angka tab (yang menghitung SEMUANYA). */
.tab .tab-cocok {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; opacity: 1;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.tab .tab-cocok.nol { color: var(--ink-3); background: transparent; font-weight: 500; }
.tab .tab-cocok[hidden] { display: none; }

.saringan {
  display: grid; gap: 8px 10px; margin: 10px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.saringan[hidden] { display: none; }
.saring-isian { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.saring-isian[hidden] { display: none; }
.saring-isian > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.saring-isian select { margin: 0; width: 100%; min-width: 0; }
#n-saring { margin-left: 4px; padding: 1px 7px; font-size: 11.5px; }

.saran-cari { margin: 8px 0 0; color: var(--ink-2); font-size: 13.5px; }
.saran-cari[hidden] { display: none; }
.kosong-aksi {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  margin-top: 10px; color: var(--ink-2); font-size: 13.5px;
}
.saran-cari .kosong-aksi { justify-content: flex-start; margin-top: 0; }

/* Sorotan kata yang cocok. Latar aksen tipis, bukan kuning bawaan peramban
   yang tak terbaca di mode gelap. */
.tabel mark {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: inherit; border-radius: 3px; padding: 0 1px;
}

/* ──────────────────────────────────────────────────────────────────────────
   PANDUAN VENDOR (owner 28 Sep 2026)

   Lahir dari angka, bukan dugaan: 13 dari 20 vendor macet di suatu langkah
   tanpa satu pun galat muncul — 9 belum pernah mengajukan produk, 3 punya
   produk tayang yang belum pernah masuk nota (jadi berlabel HABIS selamanya),
   1 belum ditempatkan di outlet.

   `.langkah` di atas (baris ~875) sudah ada sejak formulir 4-langkah lama dan
   tak pernah dipakai satu pun halaman vendor. Dipakai lagi di sini; yang
   diubah hanya jumlah kolomnya — tujuh kolom di layar 390px = 55px per kolom,
   tak terbaca. `.langkah-panduan` membiarkannya mengalir dan melipat.
   ────────────────────────────────────────────────────────────────────────── */

.langkah-panduan {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 18px;
}
@media (min-width: 560px) { .langkah-panduan { grid-template-columns: repeat(7, 1fr); } }

/* Bilah langkah — satu langkah aktif, di tiap halaman vendor.
   SATU langkah saja, bukan stepper: bilah yang memajang tujuh langkah di atas
   setiap halaman akan dibaca sekali lalu diabaikan selamanya. Yang dibaca
   orang adalah kalimat yang menyebut apa yang harus ia kerjakan SEKARANG. */
.bilah-panduan {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 11px 13px;
  margin: 0 0 16px;
}
/* Menunggu outlet berwarna lain DENGAN SENGAJA: vendor harus bisa membedakan
   "giliran saya" dari "saya sedang menunggu" tanpa membaca satu kata pun. */
.bilah-panduan.bp-menunggu { border-left-color: var(--accent); background: var(--warn-bg); }
.bp-kepala { margin: 0 0 3px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.bp-hitung {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.bp-judul { font-size: 15px; color: var(--ink); }
.bp-isi { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.bp-aksi { margin: 9px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-semua { font-size: 12.5px; color: var(--brand); text-decoration: none; }
.bp-semua:hover { text-decoration: underline; }

/* Halaman /panduan — tujuh blok penjelasan. */
.pd-blok {
  border-top: 1px solid var(--hairline);
  padding: 14px 0 2px;
}
/* Nomor sebagai flex-item + judul sebagai simpul teks membuat judul panjang
   ("Outlet menerima & menempatkan Anda") melompat ke baris SENDIRI, meninggalkan
   nomornya sendirian di atas dan lencananya sendirian di bawah. Judul+lencana
   dibungkus satu span yang boleh menyusut, jadi keduanya mengalir bersama. */
.pd-blok h3 {
  margin: 0 0 4px; font-size: 15.5px; color: var(--ink);
  display: flex; align-items: flex-start; gap: 8px;
}
.pd-h { min-width: 0; }
.pd-h .pill { margin-left: 4px; vertical-align: 1px; }
.pd-no {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ground); color: var(--ink-2);
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.pd-blok p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* Langkah aktif menonjol; sisanya sengaja tenang. Tujuh blok yang sama
   tebalnya adalah tujuh blok yang tak menunjuk apa pun. */
.pd-aktif { background: var(--surface-2); border-radius: 10px; padding: 14px 13px 4px; }
.pd-aktif .pd-no { background: var(--brand); color: #fff; }
.pd-pesan { color: var(--ink) !important; font-weight: 600; }

.pd-macet { margin: 0; padding-left: 20px; }
.pd-macet li { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-bottom: 5px; }

.pd-tanya {
  border-top: 1px solid var(--hairline);
  padding: 11px 0;
}
.pd-tanya summary {
  cursor: pointer; font-size: 14.5px; font-weight: 650; color: var(--ink);
  list-style: none;
}
.pd-tanya summary::-webkit-details-marker { display: none; }
.pd-tanya summary::before { content: "+ "; color: var(--brand); font-weight: 700; }
.pd-tanya[open] summary::before { content: "\2212 "; }
.pd-tanya p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ──────────────────────────────────────────────────────────────────────────
   STOK TITIPAN: RETUR & SUSUT (owner 28 Sep 2026)

   Backend-nya sudah ada sejak modul titip lahir tapi tak pernah punya layar —
   terukur nol gerakan `retur`/`susut` di seluruh riwayat, sementara 8 batch
   berisi 20 pcs sudah lewat tanggal dan masih ditawarkan ke pembeli.

   Satuan kerjanya BATCH, bukan produk: tanggal kedaluwarsa dan harga tebus
   melekat pada batch, dan ganti rugi susut dihitung dari harga tebus batch itu.
   ────────────────────────────────────────────────────────────────────────── */

/* Nama produk di kartu batch. Hanya dipasang pada daftar LINTAS produk
   (/panel/nota); di modal produk namanya sudah ada di judul modal, dan
   mengulanginya cuma kebisingan.

   `.sb-sisa` dulu ada di sini — angka sisa yang dijadikan tombol. Dicabut
   29 Sep 2026: owner membuka /panel/produk dan tak menemukan jalan ke retur
   sama sekali. Afordansi yang cuma dipahami penulisnya bukan afordansi. */
.sb-produk { font-size: 14px; color: var(--ink); margin-bottom: 2px; }

.sb-batch {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--surface);
}
.sb-kepala { font-size: 14px; color: var(--ink); }
.sb-exp { margin-top: 3px; font-size: 12px; }
.sb-aksi { margin-top: 8px; }
.sb-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.sb-judul { margin: 0 0 4px; font-size: 14.5px; color: var(--ink); }
.sb-chip { display: flex; flex-wrap: wrap; gap: 4px; }

/* Nilai ganti rugi. Tenang saat vendor yang menanggung, MENONJOL saat outlet
   yang membayar — angka yang langsung jadi hak vendor tak boleh ditemukan
   besok di halaman Saldo. */
.sb-rugi { margin: 2px 0 10px; font-size: 13px; color: var(--ink-2); }
.sb-rugi-ada {
  background: var(--warn-bg);
  border: 1px solid #f3dcae;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--warn);
}

/* Penanda medan WAJIB (foto bukti barang datang & retur, 7 Okt 2026). Kata,
   bukan bintang: "*" tak terbaca sebagai kewajiban oleh staf konter. */
.wajib { color: var(--err); font-weight: 600; font-size: 12.5px; }
.foto-bukti-tautan { font-size: 13px; }