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

:root{
  --hijau-900:#0B4F2C;
  --hijau-800:#0E6B3D;
  --hijau-600:#1A8B52;
  --hijau-300:#8FD3AE;
  --hijau-50:#EAF5EE;

  --putih:#FFFFFF;
  --kertas:#F4F8F5;
  --tinta:#12211A;
  --tinta-lembut:#5B6F65;
  --garis:#DDE9E1;

  --merah:#C0392B;
  --merah-bg:#FDECEA;

  --radius:18px;
  --radius-kecil:12px;
  --bayang:0 2px 10px rgba(11,79,44,.06), 0 12px 28px rgba(11,79,44,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(900px 500px at 50% -10%, #E7F1EA 0%, transparent 70%),
    #E9EFEA;
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--hijau-600)}

.tombol-utama{
  border:0;cursor:pointer;background:var(--hijau-800);color:#fff;
  font-family:inherit;font-size:15.5px;font-weight:800;
  padding:14px 18px;border-radius:14px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 4px 0 rgba(11,79,44,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.tombol-utama:hover{background:var(--hijau-600)}
.tombol-utama:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(11,79,44,.35)}
.tombol-utama:disabled{opacity:.6;cursor:not-allowed;transform:none}

.kotak-input label{
  display:block;font-size:12.5px;font-weight:700;color:var(--tinta-lembut);
  margin-bottom:6px;letter-spacing:.02em;
}
.kotak-input input{
  width:100%;font-family:inherit;font-size:15px;color:var(--tinta);
  padding:12px 14px;border-radius:var(--radius-kecil);
  border:1.5px solid var(--garis);background:var(--putih);
  transition:border-color .12s ease;
}
.kotak-input input:focus{outline:none;border-color:var(--hijau-600)}
.kotak-input textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--tinta);
  padding:12px 14px;border-radius:var(--radius-kecil);
  border:1.5px solid var(--garis);background:var(--putih);resize:vertical;
}
.kotak-input textarea:focus{outline:none;border-color:var(--hijau-600)}
.kotak-input{margin-bottom:16px}

.pesan-galat{
  background:var(--merah-bg);color:var(--merah);font-size:13px;font-weight:600;
  padding:11px 14px;border-radius:var(--radius-kecil);margin-bottom:16px;
  border:1px solid rgba(192,57,43,.18);
}

/* ---------- mode gelap ---------- */
html.tema-gelap{
  --putih:#17231D;
  --kertas:#0D1511;
  --tinta:#EEF7F1;
  --tinta-lembut:#B5C8BC;
  --garis:#2B3C33;
  --hijau-50:#193326;
  --hijau-300:#5DAA7D;
  --hijau-600:#43A66F;
  --hijau-800:#238653;
  --hijau-900:#0A3B22;
  --merah:#F27C70;
  --merah-bg:#3A201D;
}
html.tema-gelap body{
  background:radial-gradient(900px 500px at 50% -10%,#183126 0%,transparent 70%),#0D1511;
}
html.tema-gelap .utama-kepala,
html.tema-gelap .utama-kaki,
html.tema-gelap .kartu,
html.tema-gelap .kotak-sandi,
html.tema-gelap .halaman-galat,
html.tema-gelap .kotak-masuk,
html.tema-gelap table.daftar{background:var(--putih);color:var(--tinta)}
html.tema-gelap .tombol-collapse,
html.tema-gelap .bilah-cari input[type=text],
html.tema-gelap .bilah-cari select,
html.tema-gelap .kotak-input input,
html.tema-gelap .kotak-input textarea,
html.tema-gelap .kotak-input select,
html.tema-gelap .kotak-input input[type=file],
html.tema-gelap .usul,
html.tema-gelap .tombol-kecil.garis{background:#17231D;color:var(--tinta);border-color:var(--garis)}
html.tema-gelap table.daftar tr:nth-child(even) td{background:#14271E}
html.tema-gelap .himbauan-item{background:#332A19;border-color:#5A4A2B}
html.tema-gelap .himbauan-item b{color:#F4F7F4}
html.tema-gelap .himbauan-item p{color:#D3DED7}
html.tema-gelap .peringatan-sandi{background:#332A19;color:#F2D39A!important}
html.tema-gelap .kotak-sandi .sandi{background:#14271E;color:#DDF4E6;border-color:#376A4D}
html.tema-gelap .pesan-sukses{background:#193326;border-color:#2F5C42;color:#8FD3AE}

.tombol-dark-mode{
  position:fixed;right:22px;bottom:20px;z-index:50;
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid var(--garis);border-radius:999px;background:var(--putih);
  color:var(--tinta);font:700 12px/1 'Inter',system-ui,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.16);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.tombol-dark-mode:hover{transform:translateY(-1px)}
.dark-ikon{font-size:16px;line-height:1}
@media (max-width:820px){
  .tombol-dark-mode{right:14px;bottom:78px;padding:10px 12px}
}