/* assets/css/auth.css
   Dipakai oleh login.php dan register.php.
   Palet sama dengan panel guru (diambil dari logo madrasah), tapi disusun
   sebagai kartu tengah yang nyaman dibuka baik dari laptop guru maupun
   HP orang tua — ini pintu masuk bersama sebelum sistem tahu perannya.
*/
:root{
  --hijau:#106838; --hijau-tua:#0A4A27; --hijau-muda:#E2EFE7; --hijau-garis:#BEDCC9;
  --bata:#C05830; --bata-muda:#FAE9E1;
  --tinta:#12211A; --abu:#63736A; --abu-muda:#8D9A93;
  --kertas:#F3F5F1; --kapur:#FFFFFF; --garis:#DEE4DA; --garis-tua:#C6D0C2;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100vh;font-family:var(--sans);color:var(--tinta);
  background:
    radial-gradient(900px 480px at 50% -8%, #DCEBE1 0%, transparent 62%),
    var(--kertas);
  display:flex;align-items:center;justify-content:center;padding:28px 16px;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2.5px solid var(--hijau);outline-offset:2px;border-radius:4px}

.kartu{
  width:100%;max-width:440px;background:var(--kapur);
  border:1px solid var(--garis);border-radius:var(--r-l);
  padding:34px 32px 30px;box-shadow:0 24px 60px -24px rgba(15,31,25,.22);
}
.merek{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:22px}
.merek img{width:56px;height:auto;margin-bottom:12px}
.merek h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.merek span{display:block;margin-top:3px;font-size:12.5px;color:var(--abu)}

.tab-peran{display:flex;background:var(--kertas);border-radius:999px;padding:4px;margin-bottom:22px}
.tab-peran a{
  flex:1;text-align:center;padding:9px 0;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--abu);text-decoration:none;
}
.tab-peran a.aktif{background:var(--hijau);color:#fff}

.judul-form{margin:0 0 4px;font-size:21px;font-weight:800;letter-spacing:-.01em}
.sub-form{margin:0 0 22px;font-size:13.5px;color:var(--abu);line-height:1.5}

.galat{
  display:flex;gap:9px;align-items:flex-start;background:var(--bata-muda);
  border:1px solid #EDCFC1;color:#8A3A1C;border-radius:var(--r-m);
  padding:11px 14px;font-size:13px;margin-bottom:18px;line-height:1.5;
}
.sukses{
  background:var(--hijau-muda);border:1px solid var(--hijau-garis);color:var(--hijau-tua);
  border-radius:var(--r-m);padding:11px 14px;font-size:13px;margin-bottom:18px;line-height:1.5;
}

.bidang{margin-bottom:16px}
.bidang label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.bidang .bantu{font-weight:400;color:var(--abu-muda);font-size:11.5px}
.bidang input,.bidang select{
  width:100%;padding:10px 12px;border-radius:var(--r-s);
  border:1px solid var(--garis-tua);background:var(--kapur);font-size:14px;
}
.bidang input:focus,.bidang select:focus{
  outline:none;border-color:var(--hijau);box-shadow:0 0 0 3px var(--hijau-muda);
}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.tbl-utama{
  width:100%;padding:12px 0;border-radius:var(--r-s);
  background:var(--hijau);color:#fff;font-size:14.5px;font-weight:700;
  margin-top:6px;transition:background .15s;
}
.tbl-utama:hover{background:var(--hijau-tua)}

.tautan-bawah{margin-top:20px;text-align:center;font-size:13px;color:var(--abu)}
.tautan-bawah a{color:var(--hijau);font-weight:700;text-decoration:none}
.tautan-bawah a:hover{text-decoration:underline}

@media (max-width:480px){
  .kartu{padding:28px 22px 24px}
  .dua-kolom{grid-template-columns:1fr}
}