/* Beranda — permukaan masuk.
   Enam jalur sudah ada dan tidak berubah; halaman ini cuma pintu depannya.

   Aturan yang sama dengan gaya.css: HP entry-level, sinyal buruk. Tanpa font luar,
   tanpa gambar, tanpa kerangka kerja. Warna lewat token supaya terang, gelap, dan
   "ikut sistem" tergarap ketiganya — bukan dua dari tiga. */

:root {
  color-scheme: light;

  --tinta: #123126;
  --lemah: #5f6e66;
  --pudar: #87948d;

  --kertas: #fffef8;
  --kanvas: #f5f6ee;
  --permukaan: #e9eee5;
  --garis: #cfdbd2;

  --hijau: #00442f;
  --hijau-2: #00745d;
  --hijau-lembut: #e7f1e9;
  --hijau-sorot: #006149;
  --limau: #79d20a;
  --limau-lembut: #edf8d9;
  --tosca: #087a73;
  --jingga: #ec6a2c;
  --amber: #976000;
  --amber-lembut: #fff1d2;
  --merah: #993d36;
  --merah-lembut: #fae8e5;

  --di-aksen: #ffffff;
  --isian: #ffffff;
  --bayang: 0 18px 48px rgb(0 68 47 / 10%);
  --sudut: 16px;

  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
}

/* Gelap ditulis dua kali dengan sengaja: sekali untuk yang belum memilih apa pun
   (ikut sistem), sekali untuk yang memilih gelap secara eksplisit. Menaruhnya hanya
   di media query membuat tombol tema tidak bisa melawan sistem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) { color-scheme: dark; }
  :root:not([data-tema="terang"]) {
    --tinta: #edf5ef;
    --lemah: #b4c2b9;
    --pudar: #899a90;
    --kertas: #17261f;
    --kanvas: #0d1712;
    --permukaan: #203229;
    --garis: #385044;
    --hijau: #91e0c2;
    --hijau-2: #54c7a6;
    --hijau-lembut: #1d382c;
    --hijau-sorot: #b4f0d7;
    --limau: #8ddd24;
    --limau-lembut: #293b1b;
    --tosca: #67d0c8;
    --jingga: #ff9a64;
    --amber: #f4c45e;
    --amber-lembut: #3c3018;
    --merah: #ffaaa3;
    --merah-lembut: #452724;
    --di-aksen: #0d1712;
    --isian: #101e17;
    --bayang: 0 18px 48px rgb(0 0 0 / 30%);
  }
}
:root[data-tema="gelap"] { color-scheme: dark; }
:root[data-tema="gelap"] {
  --tinta: #edf5ef;
  --lemah: #b4c2b9;
  --pudar: #899a90;
  --kertas: #17261f;
  --kanvas: #0d1712;
  --permukaan: #203229;
  --garis: #385044;
  --hijau: #91e0c2;
  --hijau-2: #54c7a6;
  --hijau-lembut: #1d382c;
  --hijau-sorot: #b4f0d7;
  --limau: #8ddd24;
  --limau-lembut: #293b1b;
  --tosca: #67d0c8;
  --jingga: #ff9a64;
  --amber: #f4c45e;
  --amber-lembut: #3c3018;
  --merah: #ffaaa3;
  --merah-lembut: #452724;
  --di-aksen: #0d1712;
  --isian: #101e17;
  --bayang: 0 18px 48px rgb(0 0 0 / 30%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--kanvas);
  background-image:
    linear-gradient(rgb(0 68 47 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 68 47 / 4%) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
:root[data-tema="gelap"] body,
:root:not([data-tema="terang"]) body { }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) body {
    background-image:
      linear-gradient(rgb(145 224 194 / 4%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(145 224 194 / 4%) 1px, transparent 1px);
  }
}
:root[data-tema="gelap"] body {
  background-image:
    linear-gradient(rgb(145 224 194 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(145 224 194 / 4%) 1px, transparent 1px);
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--hijau-2); }
:focus-visible { outline: 3px solid var(--limau); outline-offset: 2px; }

.khusus-pembaca {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.lewati {
  position: absolute; left: -9999px; top: 8px; z-index: 20;
  padding: 10px 16px; border-radius: 10px;
  background: var(--hijau); color: var(--di-aksen); text-decoration: none;
}
.lewati:focus { left: 8px; }

/* --- kepala -------------------------------------------------------------- */

.kepala {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px clamp(14px, 5vw, 40px);
  border-bottom: 1px solid var(--garis);
  background: color-mix(in srgb, var(--kertas) 94%, transparent);
  backdrop-filter: blur(8px);
}
/* `align-items` beserta `min-height` membawa kotak sentuhnya ke 44 px tanpa menambah
   tinggi kepala: tombol tema di seberangnya sudah setinggi itu. */
.merek { display: flex; align-items: center; gap: 10px; min-height: 44px;
         text-decoration: none; color: inherit; line-height: 1.15; }
/* Simbolnya `flex: none` supaya ia tidak ikut menyusut saat kepala kehabisan tempat:
   yang boleh mengalah di baris ini subjudulnya, bukan tandanya. */
.tanda-merek { flex: none; display: block; width: 36px; height: 36px; }

/* Simbol versi gelap. Ditulis dua kali dengan alasan yang sama seperti blok token di
   atas: yang belum memilih apa pun (ikut sistem) dan yang memilih gelap eksplisit adalah
   dua keadaan berbeda, dan `prefers-color-scheme` saja hanya menjawab yang pertama —
   orang yang memilih gelap di layar terang akan tetap mendapat tanda tinta gelap di atas
   kepala gelap. Geometri kedua berkasnya sama persis, jadi tidak ada pergeseran tata
   letak saat berpindah; yang berubah cuma warnanya. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .tanda-merek { content: url("logo-pranatani-gelap.svg"); }
}
:root[data-tema="gelap"] .tanda-merek { content: url("logo-pranatani-gelap.svg"); }
.merek strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.merek small {
  display: block; color: var(--lemah);
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
}
.aksi-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Satu ikon, tiga keadaan — bukan dua.
   "Ikut sistem" adalah bawaan dan harus bisa dipilih kembali; tombol yang cuma
   berpindah terang/gelap tidak memberi jalan pulang. Jadi ketukannya berputar
   sistem → terang → gelap → sistem, dan ikonnya menyatakan yang sedang berlaku. */
.tombol-tema {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--permukaan);
  color: var(--hijau);
}
.tombol-tema:hover { border-color: var(--hijau-2); background: var(--hijau-lembut); }
.tombol-tema svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.cip-jaringan {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--lemah); font-size: 12px;
}
.cip-jaringan i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--limau); flex: none;
}
.cip-jaringan[data-luring="ya"] i { background: var(--amber); }

/* "Tentang data" satu-satunya pintu ke lembar batas jawaban di beranda, dan sasaran
   sentuhnya tadinya 17 px. Dinaikkan ke 44 px seperti tombol tema di sebelahnya. */
.tombol-teks {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 5px 2px; border: 0; background: transparent;
  color: var(--hijau-2); font-size: 12px; font-weight: 650;
  text-decoration: underline; text-underline-offset: 3px;
}

/* --- badan --------------------------------------------------------------- */

.beranda {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(34px, 6vw, 70px) clamp(16px, 5vw, 60px) 70px;
}
.hero { max-width: 780px; margin: 0 auto; }

.mata {
  margin: 0 0 10px; color: var(--hijau-2);
  font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
}

.panel-aksi {
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid var(--garis); border-top: 7px solid var(--limau);
  border-radius: 20px;
  background: color-mix(in srgb, var(--kertas) 94%, transparent);
  box-shadow: var(--bayang);
}
.panel-aksi h1 {
  margin: 0; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1; letter-spacing: -.04em;
}

.cangkang-cari {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px;
  min-height: 66px; margin-top: 18px;
  padding: 6px 6px 6px 15px;
  border: 2px solid var(--hijau); border-radius: 14px; background: var(--kertas);
}
.cangkang-cari:focus-within {
  border-color: var(--hijau-2);
  box-shadow: 0 0 0 4px rgb(121 210 10 / 24%);
}
.ikon-cari {
  color: var(--hijau); font-size: 26px; line-height: 1;
  transform: rotate(-18deg);
}
.cangkang-cari input {
  width: 100%; min-width: 0; padding: 16px 4px;
  border: 0; outline: 0; background: transparent; font-size: 17px;
}
.cangkang-cari input::placeholder { color: var(--pudar); }
/* Silang bawaan WebKit menumpuk dengan tombol hapus sendiri — dua silang bersebelahan
   di kotak yang sama membuat yang satu tampak rusak. */
.cangkang-cari input::-webkit-search-cancel-button,
.cangkang-cari input::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none;
}
.cangkang-cari input:disabled { cursor: progress; }
.tombol-hapus {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--lemah); font-size: 22px; line-height: 1;
}
.tombol-hapus:hover { background: var(--permukaan); }
.tombol-hapus[hidden] { display: none; }
.tombol-cari {
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--hijau); color: var(--di-aksen); font-weight: 720;
}
.tombol-cari:hover:not(:disabled) { background: var(--hijau-sorot); }
.tombol-cari:disabled { opacity: .5; cursor: not-allowed; }

/* Tiga baris berlabel menggantikan kisi sebelas keping. Yang dipangkas ongkos
   labelnya — dibayar tiga kali, bukan sebelas — dan itu yang memulangkan kartunya
   ke dalam satu layar HP.

   Pilnya sengaja TIDAK berkisi. Panjang namanya berbeda jauh ("Patek" lawan
   "Petrokimia Gresik"), dan kolom selebar sama memaksa keduanya ke lebar yang
   sama: yang pendek menyisakan lubang, yang panjang membungkus tiga baris. Persis
   itu yang membuat tinggi kepingnya dulu bergerigi 61–81 px di layar yang sama.
   Flex-wrap memberi tiap pil lebar namanya sendiri. */
.saran { margin: 0; }
.golongan-saran { margin-top: 8px; }
.judul-golongan { margin: 0; font-size: 12.5px; font-weight: 750; }
.judul-golongan small {
  display: block; margin-top: 1px;
  color: var(--lemah); font-size: 11px; font-weight: 400;
}
.pil-saran { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pil-saran > button {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; border: 1px solid var(--garis); border-radius: 999px;
  background: var(--kanvas); color: inherit;
  font: inherit; font-size: 13px; line-height: 1.2; text-align: left;
}
.pil-saran > button:hover, .pil-saran > button:focus-visible {
  border-color: var(--hijau-2); background: var(--hijau-lembut);
}

.bantuan-cari { margin: 10px 2px 0; color: var(--lemah); font-size: 12.5px; line-height: 1.5; }
.bantuan-cari code {
  padding: 1px 5px; border-radius: 5px;
  background: var(--permukaan); font-size: .92em;
}

/* --- hasil --------------------------------------------------------------- */

.hasil { max-width: 780px; margin: 22px auto 0; }
.hasil:empty { display: none; }
.ringkas-hasil { margin: 0 0 10px; color: var(--lemah); font-size: 12.5px; }
.daftar-hasil { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.daftar-hasil a {
  --tepi: var(--hijau);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--garis); border-left: 4px solid var(--tepi);
  border-radius: 12px; background: var(--kertas);
  color: inherit; text-decoration: none;
}
.daftar-hasil a:hover, .daftar-hasil a:focus-visible {
  border-color: var(--hijau-2); background: var(--hijau-lembut);
}
.daftar-hasil a[data-jenis="pupuk"] { --tepi: var(--tosca); }
.daftar-hasil a[data-jenis="varietas"] { --tepi: var(--jingga); }
.daftar-hasil a[data-jenis="nama-lokal"] { --tepi: var(--amber); }
/* Pintu bukan jawaban, dan warnanya menyatakan itu: tosca, bukan hijau seperti hasil
   yang memang menjawab. */
.daftar-hasil a[data-jenis="niat"] { --tepi: var(--tosca); }

/* Nama lokal yang belum terpetakan: sengaja BUKAN tautan, karena tidak ada layar yang
   bisa dibuka untuknya. Yang ditawarkan keterangannya, bukan harapan palsu bahwa ada
   sesuatu di baliknya — dan tetap ditampilkan, karena hasil nol terbaca sebagai
   "tidak ada penyakitnya". */
.daftar-hasil .hasil-belum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 13px 15px;
  border: 1px dashed var(--garis); border-left: 4px solid var(--amber);
  border-radius: 12px; background: transparent;
}
.nama-hasil { display: block; font-weight: 700; overflow-wrap: anywhere; }
.sub-hasil { display: block; color: var(--lemah); font-size: 12.5px; overflow-wrap: anywhere; }
.lencana {
  padding: 3px 9px; border-radius: 999px;
  background: var(--permukaan); color: var(--lemah);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

.pesan {
  padding: 15px 17px; border: 1px solid var(--garis);
  border-left: 4px solid var(--amber); border-radius: 12px;
  background: var(--amber-lembut);
}
.pesan.galat { border-left-color: var(--merah); background: var(--merah-lembut); }
.pesan h2 { margin: 0 0 6px; font-size: 15px; }
.pesan p { margin: 0 0 8px; font-size: 13.5px; }
.pesan p:last-child { margin-bottom: 0; }
.pesan .catatan { color: var(--lemah); font-size: 12px; }

/* --- jalur --------------------------------------------------------------- */

.bagian-jalur { margin-top: clamp(56px, 8vw, 90px); }
.kepala-bagian {
  display: flex; align-items: end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.kepala-bagian h2 {
  margin: 0; font-size: clamp(26px, 4vw, 40px);
  font-weight: 750; line-height: 1.08; letter-spacing: -.04em;
}
.kepala-bagian > p { max-width: 320px; margin: 0; color: var(--lemah); font-size: 13px; }

.kisi-jalur {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 26px;
}
.kisi-jalur a {
  --tepi: var(--hijau);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 150px; padding: 18px 20px 20px;
  border: 1px solid var(--garis); border-top: 5px solid var(--tepi);
  border-radius: 14px; background: var(--kertas);
  color: inherit; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.kisi-jalur a:nth-child(2), .kisi-jalur a:nth-child(5) { --tepi: var(--limau); }
.kisi-jalur a:nth-child(3) { --tepi: var(--tosca); }
.kisi-jalur a:nth-child(4) { --tepi: var(--jingga); }
.kisi-jalur a:nth-child(6) { --tepi: var(--merah); }
.kisi-jalur a:hover, .kisi-jalur a:focus-visible {
  border-color: var(--hijau-2); transform: translateY(-2px);
}
.kisi-jalur span {
  color: var(--hijau-2); font-size: 11px; font-weight: 750; letter-spacing: .1em;
}
.kisi-jalur strong { font-size: 16px; letter-spacing: -.02em; }
.kisi-jalur small { color: var(--lemah); font-size: 12.5px; line-height: 1.45; }

/* --- alat & direktori ----------------------------------------------------- */
/* Kartunya sengaja berbeda dari kartu jalur, dan bukan demi variasi: tepi atas tebal
   berwarna dan nomor dua digit adalah penanda "ini jalur". Ketujuh layar ini bukan
   jalur — tidak satu pun memanggil `catatBuka()` — jadi keduanya tidak dipakai, dan
   yang membedakannya tinggal tepi kiri tipis. */
.bagian-alat { margin-top: clamp(40px, 5vw, 60px); }
.kisi-alat {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px; margin-top: 26px;
}
.kisi-alat a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 17px 16px;
  border: 1px solid var(--garis); border-left: 3px solid var(--hijau-2);
  border-radius: 12px; background: var(--kertas);
  color: inherit; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.kisi-alat a:hover, .kisi-alat a:focus-visible {
  border-color: var(--hijau-2); transform: translateY(-2px);
}
.kisi-alat strong { font-size: 14.5px; letter-spacing: -.02em; }
.kisi-alat small { color: var(--lemah); font-size: 12px; line-height: 1.45; }

/* --- kaki ---------------------------------------------------------------- */

.kaki {
  padding: 26px clamp(16px, 5vw, 60px) 40px;
  border-top: 1px solid var(--garis);
  color: var(--lemah); font-size: 12.5px;
}
.kaki p { max-width: 1240px; margin: 0 auto 8px; }
.kaki strong { color: var(--tinta); }
/* Sasaran sentuh 44 px, sama seperti navigasi antarjalur di halaman lain. */
.kaki a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- lembar "tentang data" ----------------------------------------------- */

.lembar {
  width: min(560px, calc(100vw - 28px));
  padding: 0; border: 1px solid var(--garis); border-radius: 18px;
  background: var(--kertas); color: var(--tinta);
}
.lembar::backdrop { background: rgb(9 24 18 / 55%); }
/* Isinya lebih panjang dari layar HP; yang menggulir isinya, bukan halaman di
   belakangnya, supaya kepala lembar tetap kelihatan. `display` hanya saat terbuka —
   <dialog> memakai display:none untuk menyembunyikan dirinya. */
.lembar[open] { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.isi-lembar { overflow-y: auto; overscroll-behavior: contain; }
.kepala-lembar {
  display: flex; align-items: start; justify-content: space-between; gap: 14px;
  margin: 0; padding: 20px 22px 12px;
  border-bottom: 1px solid var(--garis);
}
.kepala-lembar h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.03em; }
.kepala-lembar button {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--garis); border-radius: 50%;
  background: var(--permukaan); font-size: 18px; line-height: 1;
}
.isi-lembar { padding: 16px 22px 22px; }
.isi-lembar h3 { margin: 16px 0 4px; font-size: 14px; }
.isi-lembar h3:first-child { margin-top: 0; }
.isi-lembar p { margin: 0 0 8px; font-size: 13.5px; }
/* Kisi label→angka ini milik daftar cacah, bukan tiap <dl> yang kebetulan ada di
   dalam lembar. Ditulis sebagai `.isi-lembar dl`, ia ikut menangkap daftar lubang
   yang disuntik batas.js ke lembar yang sama — judul lubangnya frasa, bukan label,
   jadi lajur pertama menyusut sampai 0 px dan judulnya melimpah menimpa keterangan
   di sebelahnya, yang ikut terbalik rata kanan. Lubang memakai aturan bloknya
   sendiri di batas.css; yang di sini cuma pasangan label dan angka. */
.cacah-lembar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px; margin: 0 0 4px; font-size: 13.5px;
}
.cacah-lembar dt { color: var(--lemah); }
.cacah-lembar dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* --- layar sempit --------------------------------------------------------- */

@media (max-width: 900px) {
  .kisi-jalur { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* Kepala harus muat satu baris di HP: yang di bawahnya adalah kotak pencarian, dan
     itu yang seharusnya kelihatan tanpa menggulir. Teks cip jaringan dilipat jadi
     titik saja — warnanya sudah membawa keterangannya, dan kalimat penuhnya tetap
     terbaca pembaca layar. */
  .kepala { gap: 8px; padding: 9px 14px; flex-wrap: nowrap; }
  .tanda-merek { width: 30px; height: 30px; }
  .merek { gap: 8px; }
  .merek strong { font-size: 16px; }
  .merek small { font-size: 9px; letter-spacing: .12em; }
  .aksi-kepala { gap: 8px; }
  /* Lebarnya boleh menyusut di layar sempit, tingginya tidak: justru di layar itu
     tangan yang mengetuk paling sering meleset. */
  .tombol-tema { width: 40px; height: 44px; border-radius: 999px; }
  .cip-jaringan span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tombol-teks { font-size: 11px; }

  .cangkang-cari {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 6px 6px 6px 12px;
  }
  .tombol-cari { grid-column: 1 / -1; width: 100%; }
  /* `.pil-saran` tidak perlu diturunkan: flex-wrap sudah mengurus layar sempit
     sendiri, dan itu setengah alasan ia menggantikan kisi. */
  .kisi-jalur { grid-template-columns: 1fr; }
  .kisi-jalur a { min-height: 0; }
  .kisi-alat { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .aksi-kepala .tombol-teks { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- kelompok hasil ------------------------------------------------------- */
/* Tiga kelompok, bukan satu daftar datar: gejala, bahan aktif, lalu nama terdaftar.
   Ketiganya menjawab pertanyaan yang berbeda, dan mencampurnya dalam satu urutan
   memaksa pembaca menebak kenapa sebuah baris ada di situ. */

.kelompok-hasil + .kelompok-hasil { margin-top: 26px; }
.ringkas-hasil strong { color: var(--tinta); }

.pembeda-hasil {
  display: block;
  margin-top: 3px;
  color: var(--hijau-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.nama-hasil em { color: var(--lemah); font-size: 13px; font-weight: 500; }

.daftar-hasil a[data-jenis="bahan"] { --tepi: var(--limau); }
.daftar-hasil a[data-jenis="gejala"] { --tepi: var(--amber); }
.daftar-hasil a[data-jenis="gejala"] .lencana { background: var(--amber-lembut); color: var(--amber); }
.daftar-hasil a[data-jenis="bahan"] .lencana { background: var(--limau-lembut); color: var(--hijau); }
/* Kosongnya dinyatakan, bukan dibiarkan jadi baris hilang. Sekitar 2.000 pupuk tidak
   punya komposisi di registri; kartu tanpa keterangan apa pun terbaca seperti cacat
   tampilan, padahal itu keadaan datanya. */
.kosong-pembeda { color: var(--pudar); font-style: italic; }
/* Tombol di tengah kalimat tidak boleh membawa bantalannya sendiri — titik di
   belakangnya jadi terlihat menggantung. */
.bantuan-cari .tombol-teks { padding: 0; }

/* ---------------------------------------------------------------------------
   Kepala jawaban — apa yang dibaca dari pertanyaan, dan apa yang ditolak dijawab
   ---------------------------------------------------------------------------
   Dua blok dengan berat yang sengaja berbeda. `.bacaan-tanya` keterangan: ia
   menerangkan penguraian, jadi ia tenang dan kecil. `.jawab-tanya` JAWABAN:
   satu kalimat yang berdiri sendiri, dan di bawahnya batasnya. Menyamakan
   keduanya akan membuat jawaban terbaca sebagai catatan kaki. */
.bacaan-tanya { margin: 0 0 18px; }
.bacaan { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bacaan li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--lemah);
}
.bacaan-label {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pudar);
}
.bacaan li > span:last-child { flex: 1 1 200px; }
.keping-kata {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--limau-lembut);
  color: var(--hijau);
  font-weight: 600;
  font-size: 12.5px;
}
/* Kata yang ditolak dijawab memakai warna peringatan, bukan warna kata yang dicari —
   perbedaan itu satu-satunya yang membedakan "dibuang karena tidak berguna" dari
   "dibuang karena tidak akan pernah dijawab". */
.bacaan-tolak .keping-kata { background: var(--amber-lembut); color: var(--amber); }
.bacaan-tolak > span:last-child { color: var(--lemah); }
.bacaan-tolak strong { color: var(--tinta); }

.jawab-tanya {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--hijau);
  border-radius: 0 8px 8px 0;
  background: var(--limau-lembut);
}
.jawab-utama { margin: 0; font-size: 15px; line-height: 1.45; color: var(--tinta); }
.jawab-utama strong { font-weight: 700; }
.jawab-utama a { color: var(--hijau-2); }
.jawab-batas { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lemah); }
/* Ambang kelas dicetak lebih kecil dan bertabular: ia angka yang dipakai membantah
   kelasnya, jadi ia harus terbaca sebagai angka, bukan sebagai bagian kalimat. */
.ambang { font-size: 12.5px; color: var(--lemah); font-variant-numeric: tabular-nums; }
.cacah-badan {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--kertas);
  color: var(--lemah);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.daftar-hasil a[data-jenis="komoditas"] { --tepi: var(--hijau-2); }

/* ------------------------------------------------------------ jelajah klaster
   Jalan masuk ke seluruh isi, dan satu-satunya blok di beranda yang ditulis untuk dua
   pembaca sekaligus: orang yang belum tahu apa yang dicarinya, dan perayap yang tidak
   bisa mengetik. Sengaja daftar tautan biasa — bukan kartu, bukan grid berhias — karena
   yang menentukan gunanya bukan tampilannya melainkan bahwa tautannya benar-benar ada
   di HTML sebelum satu baris skrip berjalan. */
.jelajah {
  max-width: var(--lebar, 44rem);
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}
.jelajah h2 {
  font-size: 1rem;
  margin: 0 0 .8rem;
  color: var(--teks, var(--tinta));
}
.jelajah ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .1rem 1.5rem;
}
.jelajah li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--garis);
  min-height: 44px;
  box-sizing: border-box;
}
.jelajah a { font-weight: 600; text-underline-offset: 2px; }
.jelajah li span {
  font-size: .82rem;
  color: var(--teks-lemah, var(--lemah));
}
.jelajah .catatan {
  margin: 1rem 0 0;
  font-size: .82rem;
  color: var(--teks-lemah, var(--lemah));
}