/* =========================================================
   SIPAKAR — lembar gaya utama
   Palet diambil dari bahan subjeknya: daun jagung, kelobot,
   biji jagung, dan tanah kering Gorontalo.
   ========================================================= */

:root {
  --tinta:        #16241c;
  --tinta-lembut: #4b5b50;
  --tanah:        #5a4630;
  --daun:         #17694a;
  --daun-tua:     #0d3d2b;
  --daun-muda:    #3e9b6f;
  --jagung:       #e4a126;
  --jagung-muda:  #f8e2ac;
  --kelobot:      #eef2e6;
  --kertas:       #ffffff;
  --garis:        #dde4d3;
  --merah:        #a8402f;
  --biru:         #2f6d8c;

  --s1: #17694a;
  --s2: #6aa84f;
  --s3: #e4a126;
  --n:  #a8402f;

  --radius:   14px;
  --radius-s: 8px;
  --bayang:   0 1px 2px rgba(22,36,28,.06), 0 8px 24px -12px rgba(22,36,28,.18);
  --sidebar:  256px;

  --display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
  --badan:   'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --data:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--badan);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--kelobot);
}

a { color: var(--daun); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.015em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .8rem; }

:focus-visible { outline: 3px solid var(--jagung); outline-offset: 2px; border-radius: 4px; }

/* ---------------- kerangka ---------------- */
.kerangka { display: flex; min-height: 100vh; }

.sisi {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--daun-tua);
  background-image: radial-gradient(rgba(248,226,172,.10) 1px, transparent 1px);
  background-size: 14px 14px;
  color: #d9e7dd;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.sisi-merek { padding: 1.4rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.10); }
.sisi-merek .logo {
  font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  color: #fff; display: flex; align-items: center; gap: .5rem;
}
.sisi-merek .logo span { color: var(--jagung); }
.sisi-merek small { display: block; font-size: .72rem; line-height: 1.35; color: #9fbcab; margin-top: .35rem; }

.sisi-menu { padding: .9rem .7rem; overflow-y: auto; flex: 1; }
.sisi-menu .kelompok { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #7fa591; margin: 1rem .6rem .35rem; }
.sisi-menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .52rem .65rem; margin-bottom: 2px;
  border-radius: var(--radius-s);
  color: #cfe0d5; font-size: .9rem; text-decoration: none;
  transition: background .15s, color .15s;
}
.sisi-menu a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sisi-menu a.aktif { background: var(--daun); color: #fff; font-weight: 600; }
.sisi-menu a.aktif::before { content: ''; width: 3px; height: 18px; background: var(--jagung); border-radius: 2px; margin-left: -.4rem; }
.sisi-menu .ikon { width: 18px; text-align: center; opacity: .9; }

.sisi-kaki { padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.10); font-size: .72rem; color: #86a894; }

.utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bar-atas {
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
  padding: .85rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
}
.bar-atas .judul-halaman { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.bar-atas .remah { font-size: .76rem; color: var(--tinta-lembut); letter-spacing: .02em; }

.chip-pengguna { display: flex; align-items: center; gap: .6rem; }
.chip-pengguna .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--jagung-muda); color: var(--tanah);
  display: grid; place-items: center; font-weight: 700; font-family: var(--display);
}
.chip-pengguna .nama { font-size: .84rem; font-weight: 600; line-height: 1.1; }
.chip-pengguna .peran { font-size: .7rem; color: var(--tinta-lembut); text-transform: capitalize; }

.isi { padding: 1.5rem 1.6rem 3rem; max-width: 1220px; width: 100%; }

/* ---------------- kartu ---------------- */
.kartu {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  margin-bottom: 1.1rem;
}
.kartu-kepala {
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
}
.kartu-kepala h2, .kartu-kepala h3 { margin: 0; }
.kartu-kepala .sub { font-size: .78rem; color: var(--tinta-lembut); }
.kartu-badan { padding: 1.1rem; }
.kartu-badan.rapat { padding: 0; }

.kisi { display: grid; gap: 1.1rem; }
.kisi-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kisi-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kisi-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kisi-2-1 { grid-template-columns: 2fr 1fr; }
.kisi-1-2 { grid-template-columns: 1fr 2fr; }

/* ---------------- statistik ---------------- */
.statistik { padding: 1rem 1.1rem; }
.statistik .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-lembut); }
.statistik .nilai { font-family: var(--display); font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: .15rem; }
.statistik .kaki { font-size: .78rem; color: var(--tinta-lembut); }
.statistik .naik { color: var(--daun); font-weight: 600; }
.statistik .turun { color: var(--merah); font-weight: 600; }

/* ---------------- tabel ---------------- */
.tabel-bungkus { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabel th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-lembut); font-weight: 700;
  padding: .6rem .8rem; border-bottom: 1px solid var(--garis); background: #f7faf3; white-space: nowrap;
}
table.tabel td { padding: .62rem .8rem; border-bottom: 1px solid #edf1e7; vertical-align: middle; }
table.tabel tbody tr:hover { background: #f9fbf6; }
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel .angka { font-family: var(--data); font-size: .82rem; text-align: right; white-space: nowrap; }
table.tabel .tengah { text-align: center; }

/* ---------------- lencana ---------------- */
.badge {
  display: inline-block; padding: .14rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  background: var(--kelobot); color: var(--tinta);
}
.badge-lokal    { background: #e6f2ea; color: #14603f; }
.badge-komposit { background: #eaf1f6; color: #245a75; }
.badge-hibrida  { background: #fdf0d8; color: #8a5c10; }
.badge-abu      { background: #eceee9; color: #5b6660; }

.kelas { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--data); font-size: .76rem; font-weight: 600; padding: .12rem .45rem; border-radius: 5px; }
.kelas::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
.kelas-s1 { background: #e3f1e9; color: #0f5637; } .kelas-s1::before { background: var(--s1); }
.kelas-s2 { background: #eef5e4; color: #3f6a24; } .kelas-s2::before { background: var(--s2); }
.kelas-s3 { background: #fdf1da; color: #8a5c10; } .kelas-s3::before { background: var(--s3); }
.kelas-n  { background: #f8e6e2; color: #872f21; } .kelas-n::before  { background: var(--n); }

/* ---------------- tombol ---------------- */
.tombol {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: var(--radius-s);
  border: 1px solid transparent; background: var(--daun); color: #fff;
  font-family: var(--badan); font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: filter .15s, transform .05s; text-decoration: none;
}
.tombol:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.tombol:active { transform: translateY(1px); }
.tombol-garis { background: transparent; border-color: var(--garis); color: var(--tinta); }
.tombol-garis:hover { background: #f4f7ef; color: var(--tinta); }
.tombol-jagung { background: var(--jagung); color: #3a2a05; }
.tombol-jagung:hover { color: #3a2a05; }
.tombol-bahaya { background: var(--merah); }
.tombol-kecil { padding: .3rem .6rem; font-size: .78rem; }
.tombol[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------- formulir ---------------- */
.form-kisi { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem 1.1rem; }
.form-kisi.satu { grid-template-columns: 1fr; }
.bidang { display: flex; flex-direction: column; gap: .3rem; }
.bidang label { font-size: .8rem; font-weight: 600; color: var(--tinta); }
.bidang .petunjuk { font-size: .74rem; color: var(--tinta-lembut); }
.bidang input, .bidang select, .bidang textarea {
  font-family: var(--badan); font-size: .9rem; color: var(--tinta);
  padding: .5rem .65rem; border: 1px solid var(--garis); border-radius: var(--radius-s);
  background: #fdfefb; width: 100%;
}
.bidang input:focus, .bidang select:focus, .bidang textarea:focus {
  border-color: var(--daun-muda); outline: 2px solid rgba(62,155,111,.25); outline-offset: 0;
}
.bidang input[type=number] { font-family: var(--data); }
.wajib::after { content: ' *'; color: var(--merah); }

/* ---------------- pemberitahuan ---------------- */
.pesan {
  padding: .7rem .9rem; border-radius: var(--radius-s); margin-bottom: .9rem;
  font-size: .87rem; border-left: 4px solid;
}
.pesan-sukses { background: #e9f4ed; border-color: var(--daun); color: #10502f; }
.pesan-galat  { background: #fbeae6; border-color: var(--merah); color: #7c2a1d; }
.pesan-info   { background: #eaf2f7; border-color: var(--biru); color: #22536b; }
.pesan-ingat  { background: #fdf4e0; border-color: var(--jagung); color: #7a5410; }

/* =========================================================
   ELEMEN KHAS: matriks biji (kernel matrix)
   Setiap parameter lahan digambar sebagai deretan biji jagung
   pada tongkol; warna biji = kelas kesesuaian parameter.
   ========================================================= */
.matriks-biji { display: grid; gap: .35rem; }
.baris-biji { display: grid; grid-template-columns: 190px 1fr auto; gap: .7rem; align-items: center; }
.baris-biji .nama-param { font-size: .82rem; font-weight: 600; }
.baris-biji .nama-param small { display: block; font-weight: 400; font-size: .72rem; color: var(--tinta-lembut); font-family: var(--data); }
.tongkol { display: flex; gap: 3px; }
.biji {
  width: 100%; height: 20px; border-radius: 3px 3px 5px 5px;
  background: #e9ece5; flex: 1; position: relative;
}
.biji.isi-s1 { background: var(--s1); }
.biji.isi-s2 { background: var(--s2); }
.biji.isi-s3 { background: var(--s3); }
.biji.isi-n  { background: var(--n); }
.baris-biji .nilai-param { font-family: var(--data); font-size: .8rem; white-space: nowrap; }

.legenda-biji { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .76rem; color: var(--tinta-lembut); margin-top: .8rem; }
.legenda-biji span { display: inline-flex; align-items: center; gap: .35rem; }
.legenda-biji i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* meter skor berbentuk tongkol */
.meter-tongkol { display: flex; flex-direction: column-reverse; gap: 3px; width: 26px; }
.meter-tongkol .biji-meter { height: 9px; border-radius: 2px; background: #e9ece5; }
.meter-tongkol .biji-meter.nyala { background: var(--jagung); }

/* ---------------- kartu rekomendasi ---------------- */
.rekomendasi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.kartu-rekom {
  background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 1rem; position: relative; box-shadow: var(--bayang); display: flex; flex-direction: column; gap: .6rem;
}
.kartu-rekom.utama { border-color: var(--daun); border-width: 2px; }
.kartu-rekom .peringkat {
  position: absolute; top: -12px; left: 1rem;
  background: var(--daun); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: .74rem; padding: .14rem .6rem; border-radius: 999px; letter-spacing: .04em;
}
.kartu-rekom.utama .peringkat { background: var(--jagung); color: #3a2a05; }
.kartu-rekom .nama-varietas { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin-top: .3rem; }
.kartu-rekom .skor-besar { font-family: var(--display); font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.kartu-rekom .skor-besar small { font-size: .8rem; font-weight: 500; color: var(--tinta-lembut); letter-spacing: 0; }
.kartu-rekom ul { margin: 0; padding-left: 1.1rem; font-size: .82rem; color: var(--tinta-lembut); }
.kartu-rekom .baris-nilai { display: flex; justify-content: space-between; font-size: .82rem; padding: .18rem 0; border-bottom: 1px dashed #e8ece3; }
.kartu-rekom .baris-nilai span:last-child { font-family: var(--data); font-weight: 600; }

/* ---------------- lain-lain ---------------- */
.bar-nilai { height: 7px; background: #eaeee5; border-radius: 4px; overflow: hidden; }
.bar-nilai i { display: block; height: 100%; background: var(--daun-muda); border-radius: 4px; }
.bar-nilai i.jagung { background: var(--jagung); }

.pil-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.pil-filter a {
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--garis);
  font-size: .8rem; color: var(--tinta-lembut); background: #fff;
}
.pil-filter a.aktif { background: var(--daun); border-color: var(--daun); color: #fff; }

.kosong { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-lembut); }
.kosong .ikon-besar { font-size: 2.2rem; }

.tanda-data { font-size: .74rem; color: var(--tanah); background: #fdf7e8; border: 1px dashed var(--jagung); padding: .5rem .7rem; border-radius: var(--radius-s); }

.jejak-aturan { border-left: 3px solid var(--garis); padding-left: .9rem; margin-bottom: .8rem; }
.jejak-aturan .kode-aturan { font-family: var(--data); font-size: .76rem; background: var(--kelobot); padding: .1rem .4rem; border-radius: 4px; }
.jejak-aturan .kondisi { font-size: .8rem; color: var(--tinta-lembut); font-family: var(--data); }
.jejak-aturan .cf { font-family: var(--data); font-size: .8rem; color: var(--daun); font-weight: 600; }

.pagination { display: flex; gap: .3rem; padding: .8rem 1.1rem; }
.pagination a, .pagination span {
  padding: .25rem .6rem; border-radius: 6px; border: 1px solid var(--garis);
  font-size: .82rem; font-family: var(--data); color: var(--tinta-lembut); background: #fff;
}
.pagination .aktif { background: var(--daun); color: #fff; border-color: var(--daun); }

.grafik-bungkus { position: relative; height: 320px; }
.grafik-pendek { height: 220px; }

/* ---------------- halaman masuk ---------------- */
.laman-masuk {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr;
  background: var(--kelobot);
}
.masuk-kiri {
  background: var(--daun-tua);
  background-image: radial-gradient(rgba(248,226,172,.10) 1px, transparent 1px);
  background-size: 16px 16px;
  color: #e4efe7; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
}
.masuk-kiri .logo-besar { font-family: var(--display); font-size: 3.2rem; font-weight: 800; color: #fff; letter-spacing: -.04em; }
.masuk-kiri .logo-besar span { color: var(--jagung); }
.masuk-kiri h1 { font-size: 1.5rem; color: #fff; max-width: 26ch; }
.masuk-kiri p { color: #a9c6b6; max-width: 46ch; font-size: .92rem; }
.masuk-kiri .fitur { display: grid; gap: .5rem; margin-top: 1.4rem; }
.masuk-kiri .fitur div { font-size: .88rem; color: #cde0d4; display: flex; gap: .55rem; align-items: baseline; }
.masuk-kiri .fitur b { color: var(--jagung); font-family: var(--data); font-size: .8rem; }
.masuk-kanan { display: grid; place-items: center; padding: 2rem; }
.kotak-masuk { width: 100%; max-width: 380px; }
.kotak-masuk h2 { font-size: 1.5rem; }
.akun-contoh { margin-top: 1.2rem; font-size: .78rem; color: var(--tinta-lembut); border-top: 1px solid var(--garis); padding-top: .8rem; }
.akun-contoh code { font-family: var(--data); background: var(--kelobot); padding: .05rem .3rem; border-radius: 4px; }

/* ---------------- cetak ---------------- */
@media print {
  .sisi, .bar-atas, .tanpa-cetak, .tombol { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .isi { padding: 0; max-width: 100%; }
  .kartu { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .kop-cetak { display: block !important; }
  a { color: #000; }
  .rekomendasi { grid-template-columns: repeat(3, 1fr); }
}
.kop-cetak { display: none; text-align: center; border-bottom: 2px solid var(--tinta); padding-bottom: .6rem; margin-bottom: 1rem; }
.kop-cetak h1 { font-size: 1.2rem; margin-bottom: .2rem; }
.kop-cetak p { font-size: .8rem; margin: 0; }

/* ---------------- responsif ---------------- */
@media (max-width: 1080px) {
  .kisi-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kisi-3, .rekomendasi { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kisi-2-1, .kisi-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .kerangka { flex-direction: column; }
  .sisi { width: 100%; height: auto; position: static; flex: none; }
  .sisi-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 .4rem; }
  .sisi-menu .kelompok { grid-column: 1 / -1; }
  .isi { padding: 1rem; }
  .kisi-2, .kisi-3, .kisi-4, .rekomendasi, .form-kisi { grid-template-columns: 1fr; }
  .laman-masuk { grid-template-columns: 1fr; }
  .masuk-kiri { padding: 2rem; }
  .baris-biji { grid-template-columns: 120px 1fr; }
  .baris-biji .nilai-param { grid-column: 2; text-align: right; }
}

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