/* ====== Halaman Login Admin (revisi mirip Figma) ====== */
:root{
  --navy-900:#0E2A63;
  --navy-800:#123374;
  --navy-700:#16407F;
  --navy-500:#2A5FC8;
  --line:#E4E8F0;
  --ink:#1C2333;
  --muted:#6B7385;
  --canvas:#F5F5F5;
  --ease:cubic-bezier(.34,.9,.3,1);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:var(--canvas);
}

/* halaman: full viewport, card langsung memenuhi layar */
.login-page{
  min-height:100vh;
  display:flex;
}

/* KARTU utama -- full width & height, tanpa jarak */
.login-card{
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  background:#fff;
}

/* ---------- SISI KIRI: BRANDING ---------- */
.login-brand{
  position:relative;
  overflow:hidden;
  background:linear-gradient(165deg, var(--navy-800), var(--navy-900) 70%);
  color:#fff;
  padding:40px 44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.login-brand__top{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:2;
}
.login-brand__logo img{
  width:36px; height:36px;
  border-radius:9px;
  background:#fff;
  padding:4px;
  object-fit:contain;
}
.login-brand__name{ font-weight:700; font-size:15px; }
.login-brand__tag{ font-size:10.5px; letter-spacing:.6px; color:#9FB3E0; margin-top:2px; }

.login-brand__mid{
  position:relative;
  z-index:2;
  max-width:380px;
}
.login-brand__mid h1{
  font-size:32px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 16px;
  letter-spacing:-.4px;
}
.login-brand__mid p{
  font-size:14px;
  line-height:1.7;
  color:#C4D0EC;
  margin:0;
}

.login-brand__bottom{ position:relative; z-index:2; }
.login-brand__secure{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:13px 15px;
  backdrop-filter:blur(6px);
}
.login-brand__secure i{ font-size:15px; color:#8FB0FF; }
.login-brand__secure strong{ display:block; font-size:13px; font-weight:600; }
.login-brand__secure span{ font-size:12px; color:#A9B8DC; }

.login-brand__watermark{
  position:absolute;
  left:-50px;
  bottom:-50px;
  width:230px;
  opacity:.12;
  z-index:1;
  pointer-events:none;
}
.login-brand__watermark svg{
  width:100%;
  height:auto;
  display:block;
}

/* ---------- SISI KANAN: FORM ---------- */
.login-form-side{
  background:#fff;
  display:flex;
  flex-direction:column;
}

/* badge admin sekarang di DALAM kartu, pojok kanan atas sisi form */
.login-form-side__top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:22px 36px 0;
}
.login-form-side__admin{
  display:flex;
  align-items:center;
  gap:9px;
}
.login-form-side__admin strong{ display:block; font-size:13px; }
.login-form-side__admin small{ font-size:11px; color:var(--muted); }
.login-form-side__avatar{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--navy-700);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
}

.login-form-wrap{
  flex:1;
  max-width:360px;
  margin:0 auto;
  width:100%;
  padding:24px 24px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-form-wrap h2{
  font-size:20px;
  margin:0 0 6px;
  letter-spacing:-.2px;
}
.login-form-wrap > p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 24px;
}

.login-alert{
  background:#FDECEC;
  border:1px solid #F3B9B9;
  color:#B42318;
  font-size:13px;
  padding:9px 13px;
  border-radius:9px;
  margin-bottom:16px;
}

.login-form-wrap label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.login-form-wrap label i{
  font-size:11px;
  color:var(--muted);
}

.login-input-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
}
.login-input-row label{ margin-bottom:6px; }
.login-input-row a{
  font-size:12px;
  color:var(--navy-700);
  text-decoration:none;
  font-weight:600;
}
.login-input-row a:hover{ text-decoration:underline; }

.login-input{
  position:relative;
  display:flex;
  align-items:center;
  background:#EEF2FB;
  border:1px solid transparent;
  border-radius:10px;
  padding:0 13px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.login-input:focus-within{
  background:#fff;
  border-color:var(--navy-500);
  box-shadow:0 0 0 3px rgba(42,95,200,.12);
}
.login-input i{ color:var(--muted); font-size:13px; }
.login-input input{
  flex:1;
  border:0;
  outline:0;
  padding:11px 9px;
  font-size:13.5px;
  font-family:inherit;
  background:transparent;
}
.login-toggle-pass{
  border:0;
  background:none;
  color:var(--muted);
  cursor:pointer;
  padding:6px;
  display:grid;
  place-items:center;
}
.login-toggle-pass:hover{ color:var(--navy-700); }

.login-remember{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:500;
  color:var(--ink);
  margin:16px 0 20px;
  cursor:pointer;
}
.login-remember input{ accent-color:var(--navy-700); width:14px; height:14px; }

.login-submit{
  --shift:0px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px;
  border:0;
  border-radius:10px;
  background:var(--navy-700);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 0 0 var(--navy-900);
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.login-submit:hover{
  --shift:3px;
  background:var(--navy-500);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(42,95,200,.32);
}
.login-submit:active{ transform:translateY(0); box-shadow:0 1px 0 0 var(--navy-900); }
.login-submit i{ transition:transform .25s var(--ease); transform:translateX(var(--shift)); }

.login-footer{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  color:var(--muted);
  text-align:center;
}
.login-footer div{ margin-top:4px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .login-card{ grid-template-columns:1fr; min-height:100vh; }
  .login-brand{ padding:28px 24px; min-height:220px; }
  .login-brand__mid h1{ font-size:26px; }
  .login-brand__bottom{ display:none; }
  .login-form-side__top{ padding:18px 24px 0; }
  .login-form-wrap{ padding:24px 8px 28px; }
}

@media (prefers-reduced-motion:reduce){
  * { transition-duration:.01ms !important; }
}