/* ============================================================
   Login Page — Sistem Arsip Digital UTU
   Design system konsisten (brand #006DF0, Poppins)
   ============================================================ */
:root{
  --brand:#006DF0;--brand-dark:#0057c2;--brand-soft:#e8f1ff;
  --bg:#f4f6fb;--card:#fff;--text:#1f2733;--muted:#7b8494;--border:#e6eaf2;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.10);
  --shadow-lg:0 18px 40px -16px rgba(16,24,40,.22);
}
*{box-sizing:border-box}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);margin:0;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(0,109,240,.08), transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(0,109,240,.07), transparent 45%);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
a{text-decoration:none;color:inherit}
.lg-card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);
  border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.lg-top{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;padding:30px 28px;text-align:center;position:relative;overflow:hidden;
}
.lg-top::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;background:rgba(255,255,255,.09);border-radius:50%}
.lg-top::before{content:'';position:absolute;left:-30px;bottom:-50px;width:120px;height:120px;background:rgba(255,255,255,.07);border-radius:50%}
.lg-logo{
  width:64px;height:64px;border-radius:50%;background:#fff;padding:4px;
  display:grid;place-items:center;margin:0 auto 12px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35);
  position:relative;z-index:1;overflow:hidden;
}
.lg-logo img{width:100%;height:100%;object-fit:contain}
.lg-top h1{margin:0;font-size:19px;font-weight:600;position:relative;z-index:1}
.lg-top p{margin:4px 0 0;font-size:12.5px;opacity:.9;position:relative;z-index:1}
.lg-body{padding:26px 28px 30px}
.lg-field{margin-bottom:16px}
.lg-label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.lg-label .req{color:#dc3545}
.lg-input{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;
  font-size:13.5px;color:var(--text);background:#fff;transition:.25s;
}
.lg-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,109,240,.12)}
select.lg-input{cursor:pointer}
.lg-btn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  box-shadow:0 6px 14px -6px rgba(0,109,240,.6);transition:.25s;
}
.lg-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(0,109,240,.7)}
.lg-back{
  display:block;text-align:center;margin-top:16px;font-size:12.5px;color:var(--muted);
  transition:.25s;
}
.lg-back:hover{color:var(--brand)}
.lg-back i{vertical-align:-2px}
.lg-footer{text-align:center;padding:14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--border);background:#ffffff;font-weight:500}
.lg-alert{
  display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:10px;
  font-size:12.5px;margin-bottom:16px;border:1px solid transparent;
}
.lg-alert i{font-size:17px;flex-shrink:0;margin-top:1px}
.lg-alert-danger{background:#fdecec;color:#b91c1c;border-color:#f6c6c6}
.lg-alert-warning{background:#fff4e0;color:#b45309;border-color:#f6d9a8}
.lg-alert-success{background:#e6f7ef;color:#15803d;border-color:#b7e7cc}