/* ================== SIAKMA — Login (compact) ================== */
:root{
  --maroon-1:#7a0c18;
  --maroon-2:#9d1c2a;
  --text:#0f172a;
  --muted:#e9eef5;
  --line:rgba(255,255,255,.32);
  --primary:#2563eb;
  --primary-fg:#ffffff;
  --radius:20px;
  --shadow:0 14px 34px rgba(2,6,23,.16);
  --focus:0 0 0 3px rgba(37,99,235,.25);
}

*{box-sizing:border-box}
html,body{height:100%}

/* ===== BODY pakai background JPG ===== */
.login-body{
  margin:0; min-height:100vh; color:var(--text);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background:#ffffff url("/assets/img/bg_login.jpg") center/cover fixed no-repeat;
}

/* ===== WRAP & CARD (lebih kecil) ===== */
.auth-shell{
  min-height:100vh; display:grid; place-items:center; padding:28px 16px;
}

/* Lebar/tinggi card DIKECILKAN */
.auth-card{
  width:min(920px, 92vw);
  min-height:440px;
  display:grid;
  grid-template-columns: 0.95fr 1fr;     /* kiri sedikit lebih ramping */
  border-radius: var(--radius);
  /* Overlay marun LEBIH TRANSPARAN */
  background: linear-gradient(135deg, rgba(122,12,24,.58), rgba(157,28,42,.56));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* ================= PANEL KIRI ================= */
.panel-left{ position:relative; }
.brand{
  height:100%; width:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap:12px; color:#fff; padding:20px;
}
.brand-logo{
  width:100px; height:100px; object-fit:contain;
}
.brand-title{
  margin:4px 0 2px; font-size:28px; font-weight:800; letter-spacing:.3px; color:#fff;
}
.brand-sub{ margin:0; color:#f8fafc; opacity:.95; font-size:13.5px }

/* ================= PANEL KANAN ================= */
.panel-right{
  padding:22px 24px 22px;
  display:flex; flex-direction:column; justify-content:center;
  color:#fff;
  background: transparent;   /* biar menyatu dengan overlay marun */
}

/* judul kecil */
.panel-right h3.sub{
  margin:0 0 10px; font-size:15px; font-weight:800; color:#ffe3e6;
}

/* alert */
.alert{
  padding:10px 12px; border-radius:10px;
  background:rgba(255,247,247,.85);
  border:1px solid rgba(254,202,202,.9);
  color:#7f1d1d; margin:0 0 10px;
}

/* form (compact) */
.login-form{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font-size:12.5px; color:var(--muted); font-weight:700; }

/* input putih agar jelas di atas marun */
.field input{
  height:42px; border:1px solid rgba(255,255,255,.6);
  background:#ffffff; border-radius:10px;
  padding:0 12px; font:inherit; outline:none;
}
.field input:focus{ border-color:#bed0ff; box-shadow: var(--focus); }

/* Password + mata di dalam kolom */
.field.pw{ position:relative; }
.field.pw input{ padding-right:42px; }
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; background:transparent;
  color:#4b5563; cursor:pointer; border-radius:8px;
}
.pw-toggle:hover{ background:rgba(255,255,255,.6); }

/* tombol */
.btn{ height:42px; border-radius:10px; border:0; cursor:pointer; font-weight:800; }
.btn.primary{ background:var(--primary); color:var(--primary-fg); }
.btn.primary:hover{ filter:brightness(.98) }
.btn:focus-visible{ outline:none; box-shadow: var(--focus); }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .auth-card{ grid-template-columns: 1fr; width:min(760px, 94vw); }
  .panel-left{ min-height:200px; }
  .brand-logo{ width:90px; height:90px }
  .brand-title{ font-size:26px }
}
@media (prefers-reduced-motion:no-preference){
  .auth-card{ transition: transform .2s ease }
  .auth-card:hover{ transform: translateY(-1px) }
}
/* === Login page tweaks (dipindah dari inline) === */
body.login-body{
  background:#ffffff url("/assets/img/bg_login.jpg") center/cover fixed no-repeat;
}

/* Posisi ikon mata di tengah input password */
.field.pw{position:relative;}
.field.pw input#pw{padding-right:44px;}
.pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; padding:6px; cursor:pointer; color:#555;
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
}
.pw-toggle:focus{outline:2px solid #cdd; border-radius:6px}

/* Captcha */
.captcha-wrap{display:flex; align-items:center; gap:10px; margin:10px 0 4px}
.captcha-badge{
  background:#111; color:#fff; padding:6px 10px; border-radius:8px; font-weight:800; letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.25)
}
.captcha-inp{flex:1}