/* ====================================================================
   TEMA 2 — TERANG

   Arah: tidak ada bagian gelap sama sekali. Bilah sisi seputih halaman,
   dipisahkan hanya oleh satu garis setipis rambut. Kesannya lembar kerja
   yang rapi, bukan aplikasi berpanel — cocok untuk pekerjaan kantor yang
   berjam-jam, karena tidak ada blok gelap yang menarik mata terus-menerus.

   Warna: satu aksen saja, kunyit. Diambil dari dapurnya sendiri, bukan
   dari palet umum aplikasi. Hijau tetap ada tetapi turun pangkat menjadi
   penanda keberhasilan, bukan warna kerangka.

   Huruf: Instrument Sans. Lebar hurufnya sempit sehingga label panjang
   seperti "Kelompok Penerima Manfaat" tetap muat dalam satu baris.

   Tanda khas: butir menu aktif TIDAK diberi latar berwarna. Ia menjadi
   tebal dan mendapat satu kotak kecil terisi di depannya, seperti tanda
   di daftar periksa cetak. Kelompok menu diberi garis tegak tipis di
   tepi kiri, yang menyatakan kepemilikan modul tanpa satu kata pun.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --daun-900: #163024;
  --daun-700: #205138;
  --daun-500: #2c7a54;
  --daun-100: #e2f0e8;

  --jagung: #b07406;
  --jagung-kuat: #8a5b04;
  --jagung-muda: #fdf3d9;
  --bata: #a5342b;
  --bata-muda: #fbe8e6;

  --tinta: #16201c;
  --abu-700: #545f5a;
  --abu-400: #8e9994;
  --abu-200: #e2e7e4;
  --abu-50: #f7f9f8;
  --kertas: #ffffff;

  --sudut: 14px;
  /* Tanpa bayangan. Kedalaman dinyatakan oleh garis tipis dan ruang
     kosong, bukan oleh lapisan mengambang. */
  --bayang: none;

  --huruf: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --huruf-angka: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

body { background: var(--kertas); }
.halaman { background: var(--abu-50); }

.angka, .kartu__angka, .ringkas__angka, table.tabel td {
  font-variant-numeric: tabular-nums;
}

/* ---- Bilah atas ---- */

.atas {
  background: var(--kertas);
  border-bottom: 1px solid var(--abu-200);
}
.atas__eyebrow { color: var(--jagung-kuat); }
.atas h1 { color: var(--tinta); font-weight: 600; letter-spacing: -.02em; }
.atas__menu { color: var(--abu-700); }
.atas__menu:hover { background: var(--abu-50); border-color: var(--abu-200); }

/* ---- Bilah sisi ---- */

.sisi {
  background: var(--kertas);
  color: var(--abu-700);
  border-right: 1px solid var(--abu-200);
}

.sisi__merek { border-bottom: 1px solid var(--abu-200); }
.sisi__tanda {
  background: var(--tinta);
  color: var(--kertas);
  border-radius: 10px;
}
.sisi__nama strong { color: var(--tinta); }
.sisi__nama small { color: var(--abu-400); }

/* Garis tegak tipis di tepi kiri setiap kelompok. Inilah yang membuat
   modul terbaca sebagai satu kesatuan tanpa kotak atau warna. */
.menu__kelompok { position: relative; padding-left: 11px; }
.menu__kelompok::before {
  content: "";
  position: absolute;
  left: 0; top: 30px; bottom: 4px;
  width: 1px;
  background: var(--abu-200);
}
.menu__kelompok--tunggal { padding-left: 11px; }
.menu__kelompok--tunggal::before { display: none; }

.menu__kelompok h3 { color: var(--abu-400); padding-left: 8px; }

.menu__butir { color: var(--abu-700); padding-left: 8px; }
.menu__butir:hover { background: var(--abu-50); color: var(--tinta); }
.menu__ikon { color: var(--abu-400); }

/* Aktif tanpa latar berwarna: hanya tebal, tinta penuh, dan satu kotak
   kecil terisi di tepi kiri. */
.menu__butir--aktif {
  background: transparent;
  color: var(--tinta);
  font-weight: 600;
}
.menu__butir--aktif .menu__ikon { color: var(--jagung-kuat); }
.menu__butir--aktif::before {
  content: "";
  position: absolute;
  left: -11px; top: 50%;
  width: 3px; height: 20px;
  transform: translateY(-50%);
  background: var(--jagung);
}

.sisi__kaki { border-top: 1px solid var(--abu-200); }
.pengguna__awal { background: var(--daun-100); color: var(--daun-700); }
.pengguna__teks strong { color: var(--tinta); }
.pengguna__teks small { color: var(--abu-400); }

.sisi__keluar { color: var(--abu-700); }
.sisi__keluar:hover { background: var(--bata-muda); color: var(--bata); }

/* ---- Kartu: garis, bukan bayangan ---- */

.kartu {
  border-radius: var(--sudut);
  border: 1px solid var(--abu-200);
  box-shadow: none;
}
.kartu__kepala { border-bottom: 1px solid var(--abu-200); padding-bottom: 14px; }

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

.tombol { border-radius: 10px; font-weight: 600; }
.tombol--utama {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--kertas);
}
.tombol--utama:hover:not(:disabled) { background: #26332d; border-color: #26332d; }

/* ---- Isian ---- */

input, select, textarea, .kombo__isian { border-radius: 10px; }
input:focus, select:focus, textarea:focus, .kombo__isian:focus {
  border-color: var(--jagung);
  box-shadow: 0 0 0 3px rgba(176, 116, 6, .16);
  outline: none;
}

/* ---- Tabel: gaya cetak, garis mendatar saja ---- */

table.tabel thead th {
  background: transparent;
  color: var(--abu-400);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--tinta);
}
table.tabel tbody td { border-bottom: 1px solid var(--abu-200); }
table.tabel tbody tr:hover { background: var(--jagung-muda); }

/* ---- Layar masuk: terang, bukan gelap ---- */

.masuk {
  background:
    linear-gradient(180deg, var(--kertas) 0%, var(--abu-50) 100%);
}
.masuk__kartu {
  border-radius: 18px;
  border: 1px solid var(--abu-200);
  box-shadow: none;
}
.masuk__merek { color: var(--tinta); }
.masuk__tanda { color: var(--tinta); letter-spacing: .1em; }
.masuk__merek p { color: var(--abu-700); }

/* ---- Navigasi Bawah & Android Polish ---- */

.nav-bawah {
  background: var(--kertas);
  border-top: 1px solid var(--abu-200);
}
.nav-bawah__butir--aktif { color: var(--tinta); }
.nav-bawah__butir--aktif .nav-bawah__pil {
  background: var(--jagung-muda);
  color: var(--jagung-kuat);
}
.pemuat-tarik { background: var(--kertas); border-color: var(--abu-200); }
.pemuat-tarik__spinner { border-top-color: var(--jagung); }