:root {
  --hijau: #0c4f3b;
  --hijau-2: #14684f;
  --kertas: #f3efe6;
  --kartu: #fffdf8;
  --garis: #e3dccb;
  --tinta: #1c2823;
  --redup: #5d6b64;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Calibri, sans-serif;
  color: var(--tinta);
  background:
    radial-gradient(900px 320px at 10% -10%, rgba(12, 79, 59, 0.16), transparent 60%),
    var(--kertas);
  min-height: 100vh;
}
a { color: inherit; }

.bungkus { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
.puncak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 8px;
}
.identitas { display: flex; align-items: center; gap: 14px; }
.identitas img { width: 58px; height: 58px; object-fit: contain; }
.identitas h1 { margin: 0; font-size: 1.45rem; letter-spacing: -0.03em; }
.identitas p { margin: 2px 0 0; color: var(--redup); }
.keluar, .masuk-tautan {
  text-decoration: none;
  border: 1px solid var(--hijau);
  color: var(--hijau);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
}
.sapa { margin: 12px 0 0; font-size: 1.05rem; }
.sapa strong { color: var(--hijau); }

.kisi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 18px 0 40px;
}
.kartu {
  display: block;
  text-decoration: none;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 0 12px 32px rgba(28, 48, 36, 0.06);
  min-height: 150px;
}
.kartu:hover { border-color: var(--hijau-2); }
.kartu span {
  display: inline-block;
  width: 42px;
  height: 6px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.kartu h2 { margin: 0 0 8px; font-size: 1.35rem; }
.kartu p { margin: 0; color: var(--redup); line-height: 1.45; }

.login-halaman {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px 48px;
}
.login-kartu {
  width: min(440px, 100%);
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 28px 26px 24px;
  box-shadow: 0 16px 40px rgba(28, 48, 36, 0.08);
}
.login-kartu img { width: 64px; height: 64px; object-fit: contain; }
.login-kartu h1 { margin: 10px 0 4px; font-size: 1.6rem; }
.login-kartu .sekolah { margin: 0 0 18px; color: var(--redup); }
label { display: block; font-weight: 700; margin: 12px 0 6px; }
input {
  width: 100%;
  border: 1px solid var(--garis);
  background: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  font: inherit;
}
button {
  width: 100%;
  margin-top: 18px;
  border: 0;
  border-radius: 12px;
  background: var(--hijau);
  color: white;
  font: inherit;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
}
.flash { border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.flash.error { background: #fde8e8; color: #8d2f2f; }
.flash.info { background: #e7f3ec; color: #0c4f3b; }
.catatan { margin: 16px 0 0; color: var(--redup); font-size: 0.92rem; line-height: 1.45; }

@media (max-width: 760px) {
  .kisi { grid-template-columns: 1fr; }
  .puncak { align-items: flex-start; }
}