/* ====================================================================
   TEMA 1 — KANOPI

   Arah: identitas program dijalankan dengan benar. Rel hijau daun tua
   sebagai kanopi di tepi kiri, isi halaman putih terang di bawahnya —
   seperti melihat ke atas dari bawah pohon. Tenang, resmi, tapi hangat.

   Huruf: Plus Jakarta Sans. Dipilih bukan karena tren, tetapi karena ia
   memang dirancang di Indonesia (Tokotype, untuk identitas kota Jakarta),
   dan bentuk hurufnya lega dibaca di layar ponsel murah di bawah matahari.

   Tanda khas: butir menu aktif memakai pil terisi dengan penanda daun
   kecil di tepi kiri, dan kartu menumbuhkan garis tipis berwarna aksen
   saat disentuh. Satu gerakan, tidak lebih.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --daun-900: #0f2419;
  --daun-800: #163122;
  --daun-700: #1d4732;
  --daun-500: #2f7a55;
  --daun-400: #4b9c74;
  --daun-100: #dcefe4;

  --jagung: #b8820f;
  --jagung-muda: #fdf4dc;
  --bata: #a3352a;
  --bata-muda: #fbe8e5;

  --tinta: #12211a;
  --abu-700: #4a5751;
  --abu-400: #8a9791;
  --abu-200: #dbe3de;
  --abu-50: #f2f6f3;
  --kertas: #ffffff;

  --sudut: 12px;
  --bayang:
    0 1px 2px rgba(15, 36, 25, .05),
    0 8px 24px -8px rgba(15, 36, 25, .12);

  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --huruf-angka: "Plus Jakarta Sans", ui-monospace, Menlo, monospace;
}

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

/* Angka memakai lebar tetap agar kolom nominal berbaris rapi. */
.angka, .kartu__angka, .ringkas__angka, .isian-angka, table.tabel td {
  font-variant-numeric: tabular-nums;
}

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

.atas {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--abu-200);
}
.atas__eyebrow { color: var(--daun-500); }
.atas h1 { color: var(--tinta); font-weight: 700; letter-spacing: -.015em; }

.atas__menu { color: var(--abu-700); }
.atas__menu:hover { background: var(--daun-100); color: var(--daun-700); }

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

.sisi {
  background:
    linear-gradient(180deg, var(--daun-800) 0%, var(--daun-900) 62%);
  color: #b9cec3;
  border-right: 1px solid rgba(255, 255, 255, .07);
}

.sisi__merek { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sisi__tanda {
  background: var(--daun-500);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sisi__nama strong { color: #fff; }
.sisi__nama small { color: #7f9c8c; }

.menu__kelompok h3 { color: #6f8c7d; }

.menu__butir { color: #b9cec3; }
.menu__butir:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* Butir aktif: pil terisi, ditambah penanda daun di tepi kiri. Penanda
   itu satu-satunya hiasan tema ini, dan sengaja hanya di sini. */
.menu__butir--aktif {
  background: var(--daun-700);
  color: #fff;
  font-weight: 600;
}
.menu__butir--aktif::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 18px;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: var(--daun-400);
}

.sisi__kaki { border-top: 1px solid rgba(255, 255, 255, .08); }
.pengguna__awal { background: rgba(255, 255, 255, .1); color: #d6e5dc; }
.pengguna__teks strong { color: #fff; }
.pengguna__teks small { color: #7f9c8c; }

.sisi__keluar { color: #a8c0b4; }
.sisi__keluar:hover {
  background: rgba(163, 53, 42, .18);
  border-color: rgba(163, 53, 42, .4);
  color: #f3cdc6;
}

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

.kartu {
  border-radius: var(--sudut);
  border: 1px solid var(--abu-200);
  box-shadow: var(--bayang);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.kartu:hover {
  border-color: #c6d6cc;
  box-shadow: 0 1px 2px rgba(15, 36, 25, .05), 0 14px 32px -12px rgba(15, 36, 25, .18);
}

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

.tombol { border-radius: 10px; font-weight: 600; }
.tombol--utama {
  background: var(--daun-700);
  border-color: var(--daun-700);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.tombol--utama:hover:not(:disabled) {
  background: var(--daun-500);
  border-color: var(--daun-500);
}

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

input, select, textarea, .kombo__isian {
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus, .kombo__isian:focus {
  border-color: var(--daun-500);
  box-shadow: 0 0 0 3px rgba(47, 122, 85, .15);
  outline: none;
}

/* ---- Tabel ---- */

table.tabel thead th {
  background: var(--abu-50);
  color: var(--abu-700);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
table.tabel tbody tr:hover { background: #f7fbf8; }

/* ---- Layar masuk ---- */

.masuk {
  background:
    radial-gradient(140% 100% at 50% -10%, var(--daun-700) 0%, var(--daun-900) 68%);
}
.masuk__kartu { border-radius: 18px; }
.masuk__tanda { letter-spacing: .12em; }