/* Halaman masuk SIMSIDANG Speech, bergaya jendela aplikasi Windows 11 (Fluent):
   kartu putih di atas latar Mica, medan masukan dengan garis aksen di bawah,
   tombol aksen biru, dan mode gelap mengikuti sistem. */

:root {
  color-scheme: light dark;
  --aksen: #0067c0;
  --aksen-hover: #1975c5;
  --aksen-tekan: #005a9e;
  --aksen-teks: #ffffff;
  --mica: #f3f3f3;
  --lapisan: #ffffff;
  --kontrol: #fbfbfb;
  --kontrol-hover: #f6f6f6;
  --garis: rgba(0, 0, 0, 0.0578);
  --garis-kuat: rgba(0, 0, 0, 0.1622);
  --garis-bawah: rgba(0, 0, 0, 0.4458);
  --tinta: rgba(0, 0, 0, 0.8956);
  --tinta-2: rgba(0, 0, 0, 0.6063);
  --tinta-3: rgba(0, 0, 0, 0.4458);
  --bahaya: #c42b1c;
  --bahaya-latar: #fde7e9;
  --bayang: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.06);
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-judul: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --aksen: #4cc2ff; --aksen-hover: #47b1e8; --aksen-tekan: #3a9ed0; --aksen-teks: #000000;
    --mica: #202020; --lapisan: #2b2b2b;
    --kontrol: rgba(255, 255, 255, 0.0605); --kontrol-hover: rgba(255, 255, 255, 0.0837);
    --garis: rgba(255, 255, 255, 0.0698); --garis-kuat: rgba(255, 255, 255, 0.0837); --garis-bawah: rgba(255, 255, 255, 0.5442);
    --tinta: #ffffff; --tinta-2: rgba(255, 255, 255, 0.786); --tinta-3: rgba(255, 255, 255, 0.5442);
    --bahaya: #ff99a4; --bahaya-latar: #442726;
    --bayang: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.halaman-masuk {
  margin: 0;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px;
  font: 14px/20px var(--font);
  color: var(--tinta);
  background: var(--mica);
  -webkit-font-smoothing: antialiased;
}

.gerbang {
  width: 100%;
  max-width: 400px;
  padding: 32px 32px 24px;
  background: var(--lapisan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: var(--bayang);
  animation: naik-masuk 0.35s ease both;
}
@keyframes naik-masuk { from { opacity: 0; transform: translateY(8px); } }

.lambang-masuk { display: block; width: 48px; height: 48px; margin: 0 0 16px; color: var(--aksen); }
.irah-masuk { margin: 0 0 4px; font-size: 12px; color: var(--tinta-3); }
.gerbang h1 { margin: 0; font: 600 24px/32px var(--font-judul); }
.sub { margin: 4px 0 24px; color: var(--tinta-2); }

.borang { display: block; }
.medan-masuk { display: block; margin-bottom: 16px; }
.nama-medan { display: block; margin-bottom: 6px; font-size: 14px; }
.medan-masuk input {
  display: block; width: 100%; min-height: 32px; padding: 5px 10px 6px;
  font: inherit; color: var(--tinta); background: var(--kontrol);
  border: 1px solid var(--garis); border-bottom: 1px solid var(--garis-bawah); border-radius: 4px;
}
.medan-masuk input:hover { background: var(--kontrol-hover); }
.medan-masuk input:focus { outline: none; background: var(--lapisan); border-bottom: 2px solid var(--aksen); padding-bottom: 5px; }
.sandi-baris { display: flex; gap: 6px; align-items: stretch; }
.sandi-baris input { flex: 1; }
.lihat {
  min-height: 32px; padding: 0 12px; font: inherit; color: var(--tinta);
  background: var(--kontrol); border: 1px solid var(--garis); border-bottom-color: var(--garis-kuat); border-radius: 4px;
}
.lihat:hover { background: var(--kontrol-hover); }

.galat-masuk { margin: 0 0 12px; padding: 10px 12px; font-size: 13px; color: var(--tinta); background: var(--bahaya-latar); border: 1px solid var(--garis); border-left: 3px solid var(--bahaya); border-radius: 4px; }

.utama.tombol-masuk {
  width: 100%; min-height: 32px; margin-top: 8px; padding: 5px 12px 6px;
  font: inherit; font-weight: 600; color: var(--aksen-teks); background: var(--aksen);
  border: 1px solid rgba(0, 0, 0, 0.08); border-bottom-color: rgba(0, 0, 0, 0.2); border-radius: 4px;
}
.utama.tombol-masuk:hover { background: var(--aksen-hover); }
.utama.tombol-masuk:active { background: var(--aksen-tekan); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; border-radius: 4px; }

.catatan-kaki { margin: 20px 0 0; font-size: 12px; color: var(--tinta-3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gerbang { animation: none; } }