/* Tani — situs publik petani untuk petani (desapreneur.site).
   Berdiri sendiri: TIDAK memuat css/hub.css 321 KB milik aplikasi internal,
   karena halaman ini dibuka publik lewat ponsel dengan kuota terbatas.
   Palet mengikuti acuan (teal, hijau tua #0b3b24, amber #f7c948) tapi teal
   DIGELAPKAN ke #0a6b62: teal asli 4.17:1 di atas krem, di bawah WCAG AA 4.5:1.
   tipografi sistem — tanpa webfont, tanpa framework. */

:root {
  --hijau-900: #0f2820;
  --hijau-800: #0b3b24;
  --hijau-600: #0c6b63;
  --teal: #0a6b62;
  --teal-muda: #d0eae7;
  --teal-tint: #edf7f6;
  --amber: #f7c948;
  --amber-tua: #d9ab2b;
  --krem: #efe9db;
  --latar: #f7faf7;
  --kartu: #fff;
  --tinta: #14201a;
  --tinta-2: #4d5c54;
  --garis: #e1eae3;
  --r: 14px;
  --r-kecil: 10px;
  --bayang: 0 1px 2px rgba(16, 40, 32, .06), 0 4px 12px -6px rgba(16, 40, 32, .12);
  --sp: clamp(1rem, .7rem + 1.2vw, 1.6rem);
  --lebar: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--latar); color: var(--tinta);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hijau-600); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); font-weight: 750; }
h3 { font-size: 1.06rem; font-weight: 700; }
p { margin: 0; }
.lebar { max-width: var(--lebar); margin-inline: auto; padding-inline: var(--sp); }

/* ---------- bilah atas ---------- */
.bar {
  position: sticky; top: 0; z-index: 30; background: rgba(247, 250, 247, .92);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--garis);
}
.bar-isi { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.merek { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.06rem;
  color: var(--hijau-800); text-decoration: none; letter-spacing: -.02em; flex: none; }
.merek img.tanda { width: 32px; height: 32px; border-radius: 9px; display: block; flex: none; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.05; }
.merek-teks small { font-size: .6rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-2); margin-top: .18rem; }
@media (max-width: 420px) { .merek-teks small { display: none; } }
.bar-nav { display: flex; gap: .35rem; margin-left: auto; align-items: center; }
.bar-nav a { color: var(--tinta-2); text-decoration: none; font-size: .92rem; font-weight: 600;
  padding: .45rem .6rem; border-radius: 8px; white-space: nowrap; }
.bar-nav a:hover, .bar-nav a.aktif { color: var(--hijau-800); background: var(--teal-tint); }
.bar-masuk { background: var(--hijau-800); color: #fff !important; padding: .5rem .9rem !important;
  border-radius: 9px !important; font-weight: 700 !important; }
.bar-masuk:hover { background: var(--hijau-900) !important; }

/* Menu ponsel: <details> — tanpa JavaScript. */
.bar-menu { margin-left: auto; position: relative; }
.bar-menu summary { list-style: none; cursor: pointer; padding: .45rem .7rem; border-radius: 9px;
  border: 1px solid var(--garis); background: var(--kartu); font-size: .9rem; font-weight: 600; }
.bar-menu summary::-webkit-details-marker { display: none; }
.bar-menu nav { position: absolute; right: 0; top: calc(100% + .5rem); background: var(--kartu);
  border: 1px solid var(--garis); border-radius: var(--r-kecil); box-shadow: var(--bayang);
  padding: .4rem; display: grid; gap: .1rem; min-width: 214px; z-index: 40; }
.bar-menu nav a { padding: .55rem .7rem; border-radius: 8px; text-decoration: none;
  color: var(--tinta); font-size: .93rem; font-weight: 600; }
.bar-menu nav a:hover { background: var(--teal-tint); }
@media (min-width: 861px) { .bar-menu { display: none; } }
@media (max-width: 860px) { .bar-nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding: clamp(2.2rem, 1.2rem + 4vw, 4.2rem) 0 clamp(2rem, 1rem + 3vw, 3.4rem);
  background: radial-gradient(120% 100% at 82% 0%, var(--teal-muda) 0%, transparent 58%),
              linear-gradient(180deg, var(--teal-tint), var(--latar)); }
.hero-isi { display: grid; grid-template-columns: 1.35fr .95fr; gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: center; }
.hero-lencana { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hijau-600);
  background: #fff; border: 1px solid var(--teal-muda); padding: .38rem .7rem; border-radius: 999px; }
.hero h1 { margin: 1rem 0 .9rem; color: var(--hijau-900); max-width: 24ch;
  text-wrap: balance; line-height: 1.14; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero p.ringkas { font-size: clamp(1rem, .95rem + .3vw, 1.14rem); color: var(--tinta-2);
  max-width: 52ch; text-wrap: pretty; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.tombol { display: inline-flex; align-items: center; gap: .45rem; padding: .78rem 1.15rem;
  border-radius: 10px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; font-family: inherit; }
.tombol-utama { background: var(--hijau-800); color: #fff; }
.tombol-utama:hover { background: var(--hijau-900); }
.tombol-garis { background: #fff; color: var(--hijau-800); border-color: var(--garis); }
.tombol-garis:hover { border-color: var(--teal); color: var(--hijau-600); }
.hero-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
  grid-auto-rows: 1fr; }
.hero-stat div { background: #fff; border: 1px solid var(--garis); border-radius: var(--r);
  padding: .9rem 1rem; box-shadow: var(--bayang);
  display: flex; flex-direction: column; justify-content: center; gap: .15rem; }
.hero-stat b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--hijau-800);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-stat small { color: var(--tinta-2); font-size: .8rem; font-weight: 600; }
@media (max-width: 860px) {
  .hero-isi { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero h1 { max-width: none; }
  .hero-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- bagian umum ---------- */
.bagian { padding: clamp(2.2rem, 1.4rem + 3vw, 3.6rem) 0; }
.bagian-kepala { display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.3rem; }
.bagian-kepala p { color: var(--tinta-2); font-size: .95rem; max-width: 62ch; margin-top: .4rem; }
.kepala-lencana { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .5rem; }

/* ---------- kartu pilar ---------- */
.pilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .9rem; }
.pilar article { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  padding: 1.1rem 1.15rem; box-shadow: var(--bayang); display: grid; gap: .5rem; align-content: start; }
.pilar .huruf { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--teal-tint); color: var(--hijau-600); font-weight: 800; font-size: 1.05rem;
  border: 1px solid var(--teal-muda); }
.pilar h3 { margin-top: .2rem; }
.pilar p { color: var(--tinta-2); font-size: .9rem; }

/* ---------- tabel harga ---------- */
.tabel-bungkus { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--bayang); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .68rem .85rem; text-align: left; border-bottom: 1px solid var(--garis); }
th { background: var(--teal-tint); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--hijau-600); font-weight: 800; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfc; }
td.angka { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.satuan { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--tinta-2);
  background: var(--latar); border: 1px solid var(--garis); border-radius: 6px; padding: .05rem .4rem; }
/* Ponsel: tabel jadi daftar bertumpuk — TIDAK ada kolom yang disembunyikan. */
@media (max-width: 640px) {
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border-bottom: 1px solid var(--garis); padding: .35rem 0; }
  tbody tr:last-child { border-bottom: 0; }
  td { border: 0; padding: .28rem .85rem; display: flex; justify-content: space-between; gap: 1rem; }
  td::before { content: attr(data-label); font-size: .74rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tinta-2); font-weight: 700; }
  td.angka { text-align: right; }
  td:first-child { font-weight: 700; font-size: 1rem; }
  td:first-child::before { content: none; }
}

/* ---------- pencarian ---------- */
.cari { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cari input, .cari select { font: inherit; font-size: 1rem; padding: .62rem .8rem; border-radius: 10px;
  border: 1px solid var(--garis); background: #fff; min-width: 0; }
.cari input { flex: 1 1 240px; }
.cari input:focus-visible, .cari select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
/* Label visual-tersembunyi: pembaca layar tetap membacanya, mata tidak melihat. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kosong { padding: 2rem 1rem; text-align: center; color: var(--tinta-2); font-size: .95rem; }

/* ---------- HET (harga eceran tertinggi) ---------- */
.het-panel { background: var(--teal-tint); border: 1px solid var(--teal-muda); border-radius: var(--r);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.het-kepala h3 { font-size: 1rem; color: var(--hijau-800); margin-bottom: .15rem; }
.het-kepala .bantu { font-size: .84rem; color: var(--tinta-2); margin-bottom: .8rem; }
.het-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }
.het-kartu { background: #fff; border: 1px solid var(--teal-muda); border-radius: var(--r-kecil);
  padding: .7rem .85rem; display: grid; gap: .1rem; }
.het-kartu > span { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-2); }
.het-kartu > b { font-size: 1.22rem; font-weight: 800; color: var(--hijau-800);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.het-kartu > b small { font-size: .74rem; font-weight: 600; color: var(--tinta-2); margin-left: .1rem; }
.het-kartu > em { font-size: .72rem; font-style: normal; color: var(--teal); font-weight: 600; }
.het-catat { font-size: .8rem; color: var(--tinta-2); margin-top: .7rem; line-height: 1.5; }

/* Panel HAP: acuan seluruh kebutuhan pangan pokok. Latar putih, bukan hijau —
   ini tabel rujukan, bukan peringatan seperti panel HET. */
.acuan-panel { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  padding: 1rem 1.1rem 1.1rem; box-shadow: var(--bayang); margin-bottom: 1.2rem; }
/* Ringkasan <details>: judul + keterangan, dengan penanda buka-tutup di kanan. */
.acuan-panel > summary { cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.acuan-panel > summary::-webkit-details-marker { display: none; }
.acuan-panel > summary::after { content: '▾'; position: absolute; right: .2rem; top: .1rem;
  font-size: 1rem; color: var(--hijau-600); }
.acuan-panel[open] > summary::after { content: '▴'; }
.acuan-panel > summary h3 { font-size: 1.02rem; color: var(--hijau-800); }
.acuan-panel > summary p.bantu { font-size: .84rem; color: var(--tinta-2); margin: .15rem 0 .8rem; }
.acuan-panel > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.acuan-panel .tabel-bungkus { border: 0; box-shadow: none; }
.acuan-panel table { font-size: .88rem; }
.acuan-catat { display: block; font-size: .76rem; color: var(--tinta-2); margin-top: .2rem; line-height: 1.45; }
.acuan-khusus { display: block; color: var(--tinta-2); font-size: .72rem; line-height: 1.4; }
/* `td.angka` global memakai nowrap; di tabel acuan catatan wilayah harus bisa
   membungkus, kalau tidak sel meluber 85px di layar 390px. */
.acuan-panel td.angka { white-space: normal; }
.acuan-panel td.angka > small { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* Di ponsel rincian kelompok jadi baris label–nilai; catatan panjang turun
     ke bawah nama komoditas dan tidak dipotong. */
  .acuan-panel { padding: .85rem .8rem 1rem; }
  .acuan-panel td[data-label="Kelompok"] { font-size: .8rem; }
}

/* Lencana HET di tabel: warna = status harga terhadap batas, bukan hiasan. */
.het-lencana { display: inline-block; padding: .16rem .45rem; border-radius: 6px;
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.het-aman { background: #e7f6ec; color: #14663a; }
.het-waspada { background: #fdf3d8; color: #7a5a06; }
.het-intervensi { background: #fdecea; color: #a32218; }
.het-kosong { color: var(--tinta-2); }

/* Info HET di kalkulator: kuning, bukan merah — ini batas yang harus dilihat
   sebelum menetapkan harga jual, bukan galat. */
.het-info { background: #fdf3d8; border: 1px solid #f0dca4; border-radius: 9px;
  padding: .6rem .75rem; font-size: .84rem; color: #6b4e06; line-height: 1.5; }
.het-info b { font-variant-numeric: tabular-nums; }
.het-info span { color: #8a6a10; font-size: .78rem; }

/* ---------- Select2: disamakan dengan isian tani.css ----------
   Select2 membawa tampilannya sendiri (28px, sudut 4px). Tanpa penyesuaian ia
   tampak seperti kotak asing di antara kolom lain — dan di ponsel jadi terlalu
   kecil untuk disentuh. Semua ukuran di bawah dalam px, bukan rem: 16px wajib
   supaya Safari iOS tidak memperbesar halaman saat kotak cari difokuskan. */
/* `body` di depan: select2.min.css dimuat SESUDAH tani.css (lewat
   @stack('kepala')), jadi selektor setara akan kalah dan kotaknya kembali 28px. */
body .select2-container--default .select2-selection--single {
  height: auto; padding: .55rem .7rem; border: 1px solid var(--garis);
  border-radius: 9px; background: #fff; }
body .select2-container { min-width: 0; max-width: 100%; }
/* Placeholder panjang membuat lebar min-content melar: di layar 390px formulir
   kalkulator meluber 70px. Teks hasil dipotong elipsis, bukan melebarkan kolom. */
body .select2-selection__rendered,
body .select2-selection__placeholder { display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.isian label, .kalk > * { min-width: 0; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4; padding: 0; font-size: 1rem; color: var(--tinta); }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #8c9a93; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: .4rem; }
.select2-container--default .select2-selection--single .select2-selection__clear {
  font-size: 1.1rem; margin-right: .3rem; color: var(--tinta-2); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-muda); outline: 0; }
.select2-container--default .select2-dropdown { border: 1px solid var(--garis);
  border-radius: 10px; box-shadow: var(--bayang); overflow: hidden; }
.select2-container--default .select2-search--dropdown { padding: .45rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: 1rem; padding: .5rem .6rem; border: 1px solid var(--garis); border-radius: 8px; }
.select2-container--default .select2-results__option { font-size: .95rem; padding: .55rem .7rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--hijau-800); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--teal-tint); color: var(--hijau-800); font-weight: 700; }
.select2-results__message { font-size: .86rem; color: var(--tinta-2); }
/* Ponsel: satu baris hasil minimal 44px supaya jari tidak salah pilih. */
@media (max-width: 640px) {
  .select2-container--default .select2-results__option { padding: .7rem .75rem; }
}

/* ---------- kalkulator ---------- */
.kalk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .kalk { grid-template-columns: 1fr; } }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  padding: 1.15rem 1.2rem; box-shadow: var(--bayang); }
.kartu > h3 { margin-bottom: .2rem; }
.kartu > .bantu { color: var(--tinta-2); font-size: .86rem; margin-bottom: .9rem; }
.isian { display: grid; gap: .8rem; }
.isian label { display: grid; gap: .3rem; font-size: .84rem; font-weight: 700; color: var(--hijau-800); }
/* 16px, bukan .95rem: isian di bawah 16px membuat Safari iOS memperbesar
   halaman begitu kolom difokuskan, dan petani kehilangan konteks formulir. */
.isian input, .isian select { font: inherit; font-size: 1rem; padding: .6rem .7rem; border-radius: 9px;
  border: 1px solid var(--garis); background: #fff; width: 100%; font-variant-numeric: tabular-nums; }
.isian small { font-weight: 600; color: var(--tinta-2); }
.kalk-dua { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .kalk-dua { grid-template-columns: 1fr; } }
.hasil { position: sticky; top: 76px; }
.hasil-utama { font-size: 1.9rem; font-weight: 800; color: var(--hijau-600);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hasil-utama.minus { color: #a32218; }
.hasil-baris { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0;
  border-bottom: 1px dashed var(--garis); font-size: .89rem; }
.hasil-baris:last-child { border-bottom: 0; }
.hasil-baris b { font-variant-numeric: tabular-nums; }
.catatan { font-size: .8rem; color: var(--tinta-2); margin-top: .8rem; line-height: 1.5; }


/* ---------- papan komunitas ---------- */
.papan-aksi { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Tombol aksi NAMPAK SAMA di ponsel & desktop: tinggi seragam 44px (batas
   sentuh), teks tidak terpotong, dan di ponsel melebar PENUH satu per baris
   supaya tidak ada tombol separuh lebar yang tampak menggantung. */
.papan-aksi .tombol { min-height: 44px; padding: .6rem 1rem; font-size: .92rem;
  white-space: nowrap; justify-content: center; }

/* Bilah saring: maksud + jenis dalam satu panel berlabel. Dulu dua nav
   berdempet tanpa label sehingga tampak seperti dua baris chip acak. */
.papan-bilah { display: flex; flex-direction: column; gap: .55rem;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  padding: .8rem .85rem; margin-bottom: .9rem; }
.papan-bilah .papan-saring { margin-bottom: 0; }
.papan-bilah .papan-saring::before { content: attr(data-label); flex: 1 0 100%;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-2); margin-bottom: -.1rem; }
.papan-saring { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.papan-saring a { display: inline-flex; align-items: center; gap: .4rem;
  /* 44px = batas sentuh minimum; dulu 39px sehingga mudah salah tekan di ponsel. */
  min-height: 44px; padding: .5rem .85rem; line-height: 1.2;
  border-radius: 999px; border: 1px solid var(--garis); background: #fff; text-decoration: none;
  color: var(--tinta-2); font-size: .88rem; font-weight: 700; }
.papan-saring a:hover { border-color: var(--teal-muda); color: var(--hijau-800); }
.papan-saring a.aktif { background: var(--hijau-800); border-color: var(--hijau-800); color: #fff; }
.papan-saring a b { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .8rem;
  background: var(--teal-tint); color: var(--hijau-600); border-radius: 999px; padding: .05rem .4rem; }
.papan-saring a.aktif b { background: rgba(255, 255, 255, .2); color: #fff; }

/* Kartu papan: kisi 3 kolom di desktop, 2 di tablet, 1 di ponsel. Isi kartu
   disusun sebagai blok berurut (bukan baris flex) supaya tinggi kartu dalam
   satu baris kisi otomatis sama — keterangan panjang tidak menggeser tombol. */
.papan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: .9rem; }
.papan-kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  box-shadow: var(--bayang); padding: 1rem 1.05rem 1.05rem; display: flex; flex-direction: column;
  gap: .55rem; border-top: 3px solid var(--teal); }
.papan-kartu.alat { border-top-color: var(--amber-tua); }
/* Jasa diberi warna sendiri: di papan campur, "buruh panen" tak boleh terlihat
   seperti barang dagangan. */
.papan-kartu.jasa { border-top-color: #6b4fa8; }
.papan-atas { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.papan-lencana { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hijau-600); background: var(--teal-tint); border-radius: 6px; padding: .16rem .45rem; }
.papan-kartu.alat .papan-lencana { color: #7a5a06; background: #fdf3d8; }
.papan-kartu.jasa .papan-lencana { color: #4b2f80; background: #efe8fb; }
.papan-umur { font-size: .72rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.papan-nama { font-size: 1.08rem; line-height: 1.3; letter-spacing: -.01em; }
.papan-ukur { display: flex; align-items: baseline; gap: .35rem; }
.papan-ukur b { font-size: 1.5rem; font-weight: 800; color: var(--hijau-800); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1; }
.papan-ukur span { font-size: .82rem; color: var(--tinta-2); font-weight: 600; }
.papan-harga { font-size: .98rem; font-weight: 800; color: var(--hijau-800); font-variant-numeric: tabular-nums; }
.papan-harga small { font-weight: 600; font-size: .74rem; color: var(--tinta-2); }
.papan-harga em { font-style: normal; font-weight: 600; font-size: .84rem; color: var(--tinta-2); }
/* Rincian sebagai daftar label–nilai: nama panjang membungkus, tidak meluber. */
.papan-rinci { margin: 0; display: grid; gap: .22rem; font-size: .82rem; }
.papan-rinci > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .4rem; }
.papan-rinci dt { color: var(--tinta-2); font-weight: 600; }
.papan-rinci dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.papan-catat { font-size: .83rem; color: var(--tinta-2); border-left: 2px solid var(--garis);
  padding-left: .55rem; white-space: pre-line; }
.papan-hubungi { margin-top: auto; justify-content: center; width: 100%; }
@media (max-width: 420px) {
  .papan-grid { grid-template-columns: 1fr; }
  .papan-rinci > div { grid-template-columns: 1fr; gap: .05rem; }
  .papan-rinci dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
}

/* Kotak keadaan kosong: satu ajakan, bukan paragraf kosong di tengah layar. */
.kosong-kartu { background: var(--kartu); border: 1px dashed var(--teal-muda); border-radius: var(--r);
  padding: 2rem 1.4rem; text-align: center; display: grid; gap: .5rem; justify-items: center; }
.kosong-kartu b { font-size: 1.02rem; color: var(--hijau-800); }
.kosong-kartu p { font-size: .9rem; color: var(--tinta-2); max-width: 46ch; }
.kosong-aksi { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .3rem; }
.kosong-aksi .tombol { min-height: 44px; padding: .6rem 1rem; justify-content: center; }

/* ---------- papan: pencarian & saring (7 Nov 2026) ----------
   Keseragaman ukuran: seluruh kendali (chip, isian, tombol) minimal 44px tinggi
   supaya baris tidak "bergerigi" dan nyaman disentuh. */
.papan-cari { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: .5rem; align-items: center; margin-bottom: .9rem; }
.papan-cari input, .papan-cari select { height: 44px; min-width: 0; }
.papan-cari select { max-width: 15rem; }
.papan-cari .tombol { min-height: 44px; justify-content: center; white-space: nowrap; }
.papan-saring-aktif { font-size: .86rem; color: var(--tinta-2); margin: -.3rem 0 .9rem; }
.papan-saring-aktif b { color: var(--hijau-800); }

/* Ponsel: satu kolom penuh. Tombol/chip melebar 100% supaya tidak ada tombol
   separuh lebar yang tampak menggantung, dan isian tidak menyusut di bawah
   16px (iOS memperbesar halaman bila isian <16px). */
@media (max-width: 700px) {
  .papan-cari { grid-template-columns: 1fr; }
  .papan-cari select { max-width: none; width: 100%; }
  .papan-cari .tombol { width: 100%; }
  .papan-aksi { display: grid; grid-template-columns: 1fr; }
  .papan-aksi .tombol { width: 100%; white-space: normal; }
  .papan-bilah { padding: .7rem .7rem .8rem; }
  .papan-saring a { font-size: .84rem; padding: .45rem .7rem; }
  .kosong-aksi { display: grid; grid-template-columns: 1fr; width: 100%; }
  .kosong-aksi .tombol { width: 100%; }
}

/* Fakta ringkas (akun/biaya/tayang): empat nilai, bukan prosa. */
.fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .55rem;
  margin-bottom: 1.1rem; }
.fakta div { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-kecil);
  padding: .6rem .75rem; }
.fakta span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-2); }
.fakta b { font-size: .96rem; color: var(--hijau-800); }

/* ---------- tanya jawab ---------- */
.tanya-daftar { display: grid; gap: .8rem; }
.tanya-kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  padding: 1rem 1.1rem; box-shadow: var(--bayang); }
.tanya-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.tanya-meta { font-size: .76rem; color: var(--tinta-2); font-weight: 600; }
.tanya-jumlah { margin-left: auto; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #14663a; background: #e7f6ec; border-radius: 6px; padding: .14rem .45rem; }
.tanya-jumlah.belum { color: #7a5a06; background: #fdf3d8; }
.tanya-isi { font-size: .95rem; white-space: pre-line; }
.tanya-jawaban { margin: .8rem 0 0 .3rem; border-left: 3px solid var(--teal-muda); padding-left: .8rem;
  display: grid; gap: .6rem; }
.tanya-jawab-baris b { font-size: .86rem; color: var(--hijau-800); }
.tanya-jawab-baris small { font-size: .74rem; color: var(--tinta-2); margin-left: .35rem; }
.tanya-jawab-baris p { font-size: .89rem; color: var(--tinta); white-space: pre-line; }
.tanya-jawab-form { margin-top: .7rem; border-top: 1px solid var(--garis); padding-top: .5rem; }
.tanya-jawab-form summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--teal);
  list-style: none; min-height: 34px; display: flex; align-items: center; gap: .3rem; }
.tanya-jawab-form summary::-webkit-details-marker { display: none; }
.tanya-jawab-form summary::before { content: '＋'; font-weight: 800; }
.tanya-jawab-form[open] summary::before { content: '−'; }
.tanya-jawab-form form { margin-top: .5rem; }

/* ---------- modal (dialog bawaan peramban) ---------- */
/* `<dialog>` bawaannya sudah memusatkan, mengunci fokus, menutup dengan Esc,
   dan membuat latar inert. Yang ditambahkan hanya bentuknya — jangan menyentuh
   `margin`/`display`, itu yang membuat dialog menempel ke dasar layar. */
.modal-petani { border: 0; border-radius: var(--r); padding: 0; width: min(620px, 100vw - 1.6rem);
  max-height: min(88vh, 780px); box-shadow: 0 24px 60px -20px rgba(16, 40, 32, .45);
  background: var(--kartu); color: var(--tinta); overflow: hidden; }
.modal-petani::backdrop { background: rgba(15, 40, 32, .5); backdrop-filter: blur(2px); }
.modal-petani[open] { display: flex; flex-direction: column; }
.modal-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
  padding: 1rem 1.15rem .8rem; border-bottom: 1px solid var(--garis); background: var(--teal-tint); }
.modal-kepala h3 { font-size: 1.08rem; color: var(--hijau-800); }
.modal-kepala .bantu { font-size: .82rem; color: var(--tinta-2); margin-top: .2rem; }
.modal-tutup { border: 1px solid var(--garis); background: #fff; border-radius: 9px; width: 42px;
  height: 42px; flex: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--tinta-2); }
.modal-tutup:hover { border-color: var(--teal); color: var(--hijau-600); }
/* Isi modal DIGULIR sendiri: formulir panjang di ponsel tidak boleh membuat
   tombol kirim keluar layar tanpa jalan menggulir. */
.modal-isi { padding: 1rem 1.15rem 1.15rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-aksi { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .2rem; }
.modal-aksi .tombol { flex: 1 1 auto; justify-content: center; }
.galat-modal { border-left-color: #a32218; background: #fdecea; color: #7a1710; margin-bottom: .8rem; }
.galat-modal ul { margin: .4rem 0 0 1rem; }
@media (max-width: 560px) {
  /* Ponsel: dialog jadi lembar bawah — lebih mudah dijangkau ibu jari, dan
     tinggi badan formulir tidak memaksa menggulir dua kali. */
  .modal-petani { width: 100vw; max-width: 100vw; max-height: 92vh; margin-bottom: 0;
    border-radius: var(--r) var(--r) 0 0; position: fixed; inset: auto 0 0 0; }
  .modal-kepala { padding: .9rem 1rem .7rem; }
  .modal-isi { padding: .9rem 1rem 1.2rem; }
  .modal-aksi .tombol { flex: 1 1 100%; }
}

/* textarea mewarisi gaya isian; tanpa ini ia tampak seperti kotak asing. */
.isian textarea { font: inherit; font-size: 1rem; padding: .6rem .7rem; border-radius: 9px;
  border: 1px solid var(--garis); background: #fff; width: 100%; resize: vertical; }

/* ---------- sebaran wilayah ---------- */
.wilayah { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.wilayah div { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-kecil);
  padding: .7rem .85rem; display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.wilayah span { font-size: .87rem; color: var(--tinta-2); font-weight: 600; }
.wilayah b { font-variant-numeric: tabular-nums; color: var(--hijau-800); }

/* Sebaran kecamatan: yang belum punya koperasi tetap tampil, tapi diredupkan —
   menyembunyikannya membuat peta terlihat penuh padahal separuh masih kosong. */
.sebaran-catat { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  flex-wrap: wrap; margin: 0 0 .5rem; }
.sebaran-catat b { font-size: .95rem; color: var(--tinta); }
.sebaran-catat span { font-size: .82rem; color: var(--tinta-2); }
.sebaran-kecamatan b small { font-weight: 500; font-size: .72rem; color: var(--tinta-2); margin-left: .1rem; }
.sebaran-kecamatan div.kosong { background: transparent; border-style: dashed; }
.sebaran-kecamatan div.kosong b { color: var(--tinta-2); }

/* ---------- profil koperasi publik (/k/{kode}) ---------- */
.kode-koperasi { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--hijau-600); font-weight: 700; letter-spacing: .05em; }
/* Nilai keadaan bisa berupa TEKS ("Selesai", "Belum tercatat"), bukan angka —
   1.5rem milik .hero-stat membuatnya memakan dua baris di ponsel. */
.profil-stat b { font-size: 1.06rem; line-height: 1.3; color: var(--hijau-800); }
.profil-stat small { font-size: .78rem; font-weight: 600; }
/* Baris label–nilai: nilai panjang turun ke baris sendiri, labelnya tidak
   terpotong. `min-width:0` pada span WAJIB, kalau tidak flex membuat label
   selebar teksnya dan nilai hanya sisa beberapa karakter. */
/* Hanya halaman profil: `.hasil-baris` dipakai kalkulator & formulir papan,
   dan label–nilai di sana sudah pas. */
.profil-kop .hasil-baris { align-items: baseline; }
.profil-kop .hasil-baris span { color: var(--tinta-2); font-size: .84rem; flex: 0 0 auto; }
.profil-kop .hasil-baris b { text-align: right; font-size: .88rem; font-weight: 700;
  min-width: 0; overflow-wrap: anywhere; }
/* Ponsel: label di atas, nilai di bawahnya — bukan dua kolom sempit yang
   memaksa "Desa Muarabakti (Muara Bakti), Kec. Babelan" jadi 5 baris. */
@media (max-width: 520px) {
  .profil-kop .hasil-baris { display: grid; grid-template-columns: 1fr; gap: .1rem; }
  .profil-kop .hasil-baris b { text-align: left; }
}

/* ---------- direktori koperasi ---------- */
.direktori { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: .8rem; }
.direktori article { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r);
  padding: .95rem 1.05rem; box-shadow: var(--bayang); display: grid; gap: .3rem; }
.direktori .kode { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--teal);
  text-transform: uppercase; }
.direktori h3 { font-size: .98rem; line-height: 1.35; }
.direktori p { font-size: .84rem; color: var(--tinta-2); }
.paging { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem; margin-top: 1.3rem; }
.paging .tombol { padding: .5rem .8rem; font-size: .86rem; min-width: 2.6rem; justify-content: center; }
.paging .mati { color: var(--tinta-2); background: #fff; border-color: var(--garis); opacity: .55; cursor: default; }
.paging [aria-current="page"] { cursor: default; }
.paging-titik { color: var(--tinta-2); font-weight: 700; padding: 0 .15rem; }

/* ---------- catatan / kutipan ---------- */
.kutip { border-left: 4px solid var(--amber); background: #fffbeb; border-radius: 0 var(--r-kecil) var(--r-kecil) 0;
  padding: .9rem 1.1rem; font-size: .92rem; color: #4a3a13; }
.kutip b { color: #3a2d0c; }

/* ---------- kaki ---------- */
.kaki { background: var(--hijau-900); color: #cfe0d6; padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem) 0 1.4rem; }
.kaki-isi { display: grid; grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.kaki h4 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
  margin-bottom: .6rem; }
.kaki a { display: block; color: #cfe0d6; text-decoration: none; font-size: .89rem; padding: .18rem 0; }
.kaki a:hover { color: #fff; text-decoration: underline; }
.kaki p { font-size: .89rem; color: #a9c4b5; max-width: 34ch; }
.kaki-bawah { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.6rem; padding-top: 1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: #93ad9f; }
@media (max-width: 820px) { .kaki-isi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .kaki-isi { grid-template-columns: 1fr; } }

/* Hormati pembaca yang minta gerak dikurangi. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Formulir papan: LANGKAH & PILIHAN NIAT (5 Nov 2026) =====
   Pemakai papan adalah petani yang jarang mengisi formulir web. Tiga aturan:
   satu pertanyaan per blok, pilihan niat sebesar kartu (bukan <select> kecil),
   dan seluruh kartu bisa ditekan — bukan hanya lingkaran radio 16 px. */
.niat-tanya { margin: 1.15rem 0 .5rem; }
.niat-tanya b { display: block; font-size: 1.02rem; color: var(--hijau-900); letter-spacing: -.01em; }
.niat-tanya small { display: block; margin-top: .15rem; color: var(--tinta-2); font-size: .82rem; line-height: 1.45; }

.niat-pilih { display: grid; gap: .55rem; margin-bottom: .35rem; }
.niat-kartu { position: relative; display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1rem; min-height: 56px;                     /* target sentuh */
  border: 2px solid var(--garis); border-radius: var(--r); background: var(--kartu);
  cursor: pointer; transition: border-color .12s, background .12s; }
.niat-kartu:hover { border-color: var(--teal); }
.niat-kartu input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.niat-kartu .niat-teks { display: flex; flex-direction: column; gap: .18rem; }
/* Ukuran dinaikkan 5 Nov 2026: 14.9/12.8 px terbaca kecil bagi petani yang
   memakai HP di luar ruangan. 16.3/14.1 px = satu tingkat lebih besar tanpa
   membuat kartu melebihi satu layar. */
/* Akar font halaman ini 15.5 px, jadi 1.1rem ≈ 17 px dan .95rem ≈ 14.7 px —
   angka px sengaja disebut supaya tak ada yang mengira "rem" = 16 px di sini. */
.niat-kartu .niat-teks b { font-size: 1.1rem; line-height: 1.35; color: var(--hijau-900); }
.niat-kartu .niat-teks i { font-style: normal; font-size: .95rem; color: var(--tinta-2); line-height: 1.45; }

/* Ditandai lewat :has() — tanpa JS, dan tetap benar bila skrip gagal dimuat. */
.niat-kartu:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.niat-kartu:has(input:checked) .niat-teks b { color: var(--hijau-800); }
.niat-kartu:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Lencana niat di kartu papan: menjawab "ini penawaran atau permintaan?"
   sebelum orang membaca satu kata pun di judulnya. */
.papan-niat { display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; border-radius: 6px; padding: .16rem .45rem;
  background: var(--teal-tint); color: var(--hijau-700); }
.papan-niat.minta { background: #fdf3d8; color: #7a5a06; }

@media (max-width: 420px) {
  .niat-kartu { padding: .8rem .85rem; }
  .niat-kartu .niat-teks b { font-size: 1.06rem; }
  .niat-kartu .niat-teks i { font-size: .92rem; }
}

/* ---------- paging pro (5 Nov 2026) ----------
   Nomor halaman selebar 40 px di ponsel: 9 koperasi per halaman berarti
   pindah halaman jauh lebih sering daripada daftar 24, jadi tombolnya harus
   nyaman ditekan ibu jari, bukan tautan kecil di tengah layar. */
.paging { gap: .3rem; margin-top: 1.3rem; }
.paging .tombol { min-width: 2.75rem; min-height: 2.75rem; font-variant-numeric: tabular-nums; }
.paging .tombol[aria-current="page"] { font-weight: 800; box-shadow: 0 2px 8px rgba(10,107,98,.25); }

@media (max-width: 560px) {
  /* 「Sebelumnya / Berikutnya」 tetap ada tetapi ringkas, supaya nomor halaman
     tidak terdorong keluar layar. */
  .paging { row-gap: .4rem; }
  .paging a[rel="prev"], .paging a[rel="next"],
  .paging span.mati { padding: .5rem .55rem; font-size: .82rem; }
}

/* ---------- LACAK PENGAJUAN (5 Nov 2026) ----------
   Nomor lacak harus jadi hal paling menonjol setelah kirim: ia satu-satunya
   yang dibawa pengguna keluar dari halaman. Alur status menunjukkan pengajuan
   sudah sampai mana — bukan hanya status akhirnya. */
.lacak-kotak { margin-top: .8rem; padding: .8rem .9rem; background: #fff;
  border: 1px solid var(--garis); border-radius: 10px; }
.lacak-kotak small { display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.lacak-kode { display: block; font-size: 1.35rem; letter-spacing: .04em;
  color: var(--teal); margin: .15rem 0 .55rem; }
.lacak-kotak .tombol { display: inline-block; text-decoration: none; }

.lacak-alur { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.lacak-tahap { flex: 1 1 auto; text-align: center; font-size: .78rem; font-weight: 700;
  padding: .45rem .5rem; border-radius: 6px; background: #f1f5f3; color: var(--tinta-2);
  border: 1px solid var(--garis); min-width: 5.5rem; }
.lacak-tahap.ini { background: var(--teal); color: #fff; border-color: var(--teal); }
.lacak-tahap.ditolak { background: #fdecea; color: #a32218; border-color: #f3c0ba; }
@media (max-width: 560px) {
  .lacak-kode { font-size: 1.15rem; }
  .lacak-tahap { font-size: .72rem; padding: .38rem .3rem; min-width: 4.5rem; }
}