/* Portal Alumni — auth (login / register) — dari other/reff-*-alumni.html */
:root{
  --brand-950:#0E1C3F; --brand-900:#152B5C; --brand-800:#1E3E82; --brand-700:#2A54AC;
  --brand-600:#356DDE; --brand-500:#5586E6; --brand-400:#7FA1EC; --brand-300:#AEC3F3;
  --brand-100:#E9EFFD; --brand-50:#F5F8FF;
  --accent:#F2B705; --success:#1FAE72; --danger:#E6564C;
  --ink:#101935; --ink-soft:#68729A; --ink-faint:#9AA3C2; --line:#E7ECF9; --white:#FFFFFF;
  --radius-lg:20px; --radius-md:14px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body.al-auth-body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  display:flex;
  min-height:100vh;
  margin:0;
}
a{ text-decoration:none; }

.auth-brand{
  flex:0 0 44%;
  max-width:560px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(85,134,230,.5), transparent 60%),
    radial-gradient(800px 700px at 110% 20%, rgba(50,90,180,.5), transparent 55%),
    linear-gradient(165deg, var(--brand-950) 0%, var(--brand-900) 45%, var(--brand-800) 70%, var(--brand-700) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px 46px;
}
.auth-brand .bg-grid{
  position:absolute; inset:0; opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 30% 30%, black 0%, transparent 75%);
}
.auth-brand .blob{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.auth-brand .blob-1{ width:280px; height:280px; background:rgba(242,183,5,.16); top:-60px; left:-80px; }
.auth-brand .blob-2{ width:340px; height:340px; background:rgba(127,161,236,.3); bottom:-120px; right:-100px; }

.auth-brand-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.auth-brand-top .logo-badge{
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  overflow:hidden;
}
.auth-brand-top .logo-badge img{ width:100%; height:100%; object-fit:cover; }
.auth-brand-top strong{ display:block; font-size:1rem; font-weight:800; }
.auth-brand-top span{ font-size:.75rem; color:var(--brand-300); }

.auth-brand-mid{ position:relative; z-index:1; max-width:400px; }
.auth-brand-mid h1{ font-size:1.9rem; font-weight:800; line-height:1.25; margin-bottom:14px; }
.auth-brand-mid p{ font-size:.92rem; color:rgba(255,255,255,.8); line-height:1.6; }

.auth-brand-stats{ position:relative; z-index:1; display:flex; gap:28px; }
.auth-brand-stats div strong{ display:block; font-size:1.35rem; font-weight:800; }
.auth-brand-stats div span{ font-size:.72rem; color:rgba(255,255,255,.65); }

.brand-checklist{ position:relative; z-index:1; list-style:none; padding:0; margin:0; }
.brand-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:rgba(255,255,255,.85); margin-bottom:12px; }
.brand-checklist li i{ color:var(--accent); margin-top:2px; }

.auth-form-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:var(--white);
  overflow-y:auto;
}
.auth-form{ width:100%; max-width:400px; }
.auth-form.auth-form-wide{ max-width:460px; }
.auth-form .af-head{ margin-bottom:28px; }
.auth-form .af-head h3{ font-weight:800; font-size:1.5rem; margin-bottom:6px; }
.auth-form .af-head p{ font-size:.87rem; color:var(--ink-soft); margin:0; }
.auth-form .af-head p a{ color:var(--brand-600); font-weight:700; }

.form-label-sm{ font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:6px; display:block; }
.input-icon{ position:relative; }
.input-icon i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:.95rem; }
.input-icon input, .input-icon select{
  width:100%; border:1px solid var(--line); border-radius:11px;
  padding:11px 14px 11px 40px; font-size:.88rem; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
  background:#fff;
}
.input-icon input:focus, .input-icon select:focus{ border-color:var(--brand-400); box-shadow:0 0 0 4px var(--brand-100); }
.input-icon .toggle-eye{ left:auto; right:14px; cursor:pointer; }

.form-row-between{ display:flex; align-items:center; justify-content:space-between; margin:14px 0 20px; }
.form-check-label{ font-size:.82rem; color:var(--ink-soft); }
.link-forgot{ font-size:.82rem; font-weight:700; color:var(--brand-600); }
.link-forgot:hover{ color:var(--brand-800); }

.btn-submit, .btn-al-primary{
  width:100%; background:var(--brand-600); border:none; color:#fff;
  font-weight:700; font-size:.92rem; padding:12px 0; border-radius:11px;
  transition:background .18s ease;
  display:inline-block; text-align:center;
}
.btn-submit:hover, .btn-al-primary:hover{ background:var(--brand-700); color:#fff; }

.pw-strength{ display:flex; gap:5px; margin-top:8px; }
.pw-strength span{ flex:1; height:4px; border-radius:999px; background:var(--line); transition:background .2s ease; }
.pw-strength-label{ font-size:.72rem; color:var(--ink-faint); margin-top:5px; }
.form-check-terms{ font-size:.8rem; color:var(--ink-soft); }
.form-check-terms a{ color:var(--brand-600); font-weight:700; }
.auth-footnote{ text-align:center; margin-top:24px; font-size:.83rem; color:var(--ink-soft); }
.auth-footnote a{ color:var(--brand-600); font-weight:700; }

.al-alert{
  border-radius:11px; padding:12px 14px; font-size:.85rem; margin-bottom:18px;
}
.al-alert-err{ background:#FDEBEA; color:var(--danger); }
.al-alert-ok{ background:#E7F8F1; color:var(--success); }

@media (max-width:991.98px){
  .auth-brand{ display:none; }
  .auth-form-wrap{ flex:1; max-width:100%; }
}