/* ==========================================================================
   DIGIBRANDTAL — layar autentikasi bersama (dashboard admin & area member)
   ==========================================================================*/
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--white)}
.auth-side{position:relative;margin:16px;border-radius:var(--radius-panel);background:linear-gradient(170deg,var(--sky-700) 0%,var(--sky-500) 55%,var(--sky-300) 100%);color:var(--white);overflow:hidden;padding:48px;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 32px);isolation:isolate}
.auth-side::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:220px;background:url("../assets/img/awan-depan.webp") repeat-x bottom/1200px auto;z-index:-1;opacity:.95}
.auth-side h2{font-size:clamp(34px,3.6vw,52px);line-height:1.04;letter-spacing:-.04em;font-weight:600;max-width:560px}
.auth-side p.lead{color:rgba(255,255,255,.85);font-size:17px;max-width:500px;margin-top:16px}
.auth-brand{display:flex;align-items:center;gap:12px;font:600 15px/1 var(--font-mono);letter-spacing:.06em}
.auth-brand .m{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);display:grid;place-items:center}
.auth-brand .m svg{width:14px;height:14px;fill:var(--white)}
.auth-brand small{display:block;font-size:10px;letter-spacing:.12em;opacity:.8;margin-top:4px}
.float-cards{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.fcard{background:var(--white);color:var(--ink-900);border-radius:22px;padding:18px 20px;width:250px;box-shadow:0 30px 60px -30px rgba(6,40,98,.55);display:grid;gap:10px}
.fcard:nth-child(1){transform:rotate(-3deg)}
.fcard:nth-child(2){transform:rotate(2.5deg) translateY(-14px)}
.fcard .t{font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600);display:flex;justify-content:space-between;gap:8px;align-items:center}
.fcard h4{font-size:19px;letter-spacing:-.02em;font-weight:600}
.fcard p{font-size:13px;color:var(--gray-600);line-height:1.45}
.fcard .ft{display:flex;justify-content:space-between;font:500 11px/1 var(--font-mono);color:var(--gray-600);border-top:1px solid var(--border);padding-top:10px}
.fcard .ft b{color:var(--sky-600)}
.auth-main{display:grid;place-items:center;padding:48px 24px}
.auth-form{width:100%;max-width:440px;display:grid;gap:18px}
.auth-form h1{font-size:34px;line-height:1.1;letter-spacing:-.035em;font-weight:600}
.auth-form .lead{color:var(--gray-600);margin-top:-8px}
.auth-logo{display:flex;align-items:center;gap:12px;font:600 14px/1 var(--font-mono);letter-spacing:.08em}
.auth-logo .m{width:40px;height:40px;border-radius:12px;background:var(--ink-900);display:grid;place-items:center}
.auth-logo .m svg{width:14px;height:14px;fill:var(--white)}
.or{display:flex;align-items:center;gap:14px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--gray-400)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.g-wrap{min-height:48px;display:grid}
.btn-google{background:var(--ink-900);color:var(--white);width:100%;gap:12px}
.btn-google .gi{width:26px;height:26px;border-radius:50%;background:var(--white);display:grid;place-items:center}
.auth-alt{text-align:center;font-size:14px;color:var(--gray-600)}
.auth-alt a,.auth-alt button{color:var(--sky-600);font-weight:600}
.alert{border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.alert b{display:block}
.alert.is-error{background:#FDECEC;color:#B32D33;box-shadow:inset 0 0 0 1px #F6C9CB}
.alert.is-info{background:var(--sky-soft);color:var(--sky-700)}
.alert.is-ok{background:var(--success-soft);color:#147a3f}
.alert.is-warn{background:var(--warning-soft);color:#8a5200}
.strength{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.strength i{height:6px;border-radius:999px;background:var(--gray-200);transition:background-color .25s}
.strength.s1 i:nth-child(-n+1){background:var(--red-500)}
.strength.s2 i:nth-child(-n+2){background:var(--amber-500)}
.strength.s3 i:nth-child(-n+3){background:var(--lime-500)}
.strength.s4 i{background:var(--lime-400);box-shadow:inset 0 0 0 1px rgba(14,14,16,.15)}
.str-l{font:500 11px/1 var(--font-mono);color:var(--gray-600)}
.str-l.ok{color:var(--green-500)}
.sent{display:grid;justify-items:center;text-align:center;gap:14px}
.sent .ok-ic{width:76px;height:76px;border-radius:50%;background:var(--success-soft);display:grid;place-items:center}
.sent .ok-ic span{width:52px;height:52px;border-radius:50%;background:var(--green-500);color:var(--white);display:grid;place-items:center}
.kv{width:100%;background:var(--gray-100);border:1px solid var(--border);border-radius:18px;padding:16px;display:grid;gap:10px;font:400 13px/1.4 var(--font-mono)}
.kv div{display:flex;justify-content:space-between;gap:12px}
.kv span{color:var(--gray-600)}
.demo-note{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--ink-900);color:var(--white);font-size:13px}
.demo-note b{color:var(--lime-400)}
@media (max-width:1100px){.auth{grid-template-columns:1fr}.auth-side{min-height:0;padding:32px;order:2}.float-cards{margin-top:28px}}
@media (max-width:767px){
  .auth-side{margin:8px;padding:24px;border-radius:24px}
  .fcard{width:100%}
  .fcard:nth-child(n){transform:none}
}
.prog{height:8px;border-radius:999px;background:var(--gray-100);overflow:hidden}
.prog i{display:block;height:100%;background:var(--sky-600);border-radius:inherit}