*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --blue-dark:#1a3a8f;--blue-main:#1e4fc2;--blue-mid:#2563eb;
    --blue-light:#dbeafe;--blue-pale:#eff6ff;
    --text-dark:#0f172a;--text-mid:#334155;--text-muted:#64748b;
    --border:#d1d9e6;--white:#ffffff;
    --green:#16a34a;--red:#dc2626;
}

/* ── BASE ── */
html,body{height:100%;width:100%}
body{
    font-family:'Plus Jakarta Sans',sans-serif;
    min-height:100vh;
    background:linear-gradient(145deg,#cfe0fb 0%,#e8f0fe 45%,#d4e5f9 100%);
    position:relative;
    overflow-x:hidden;
}

/* ── DOT GRID ── */
body::before{
    content:'';
    position:fixed;inset:0;
    background-image:radial-gradient(circle,rgba(59,130,246,.35) 1px,transparent 1px);
    background-size:30px 30px;
    pointer-events:none;
    z-index:0;
}

/* ── CITY SVG BACKGROUND ── */
.bg-city{
    position:fixed;
    bottom:0;left:0;
    width:100%;
    pointer-events:none;
    z-index:1;
    opacity:.9;
}

/* ── CENTERED CONTAINER ── */
.center-wrap{
    position:relative;
    z-index:10;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px 180px; /* bottom padding bagi ruang utk city */
}

/* ── PAGE LAYOUT ── */
.page-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    width:100%;
    max-width:400px;
}

/* ── LOGO ── */
.logo-block{display:flex;flex-direction:column;align-items:center;gap:10px}
.logo-row{display:flex;align-items:center;gap:12px}
.logo-icon{
    width:52px;height:52px;
    background:var(--white);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(30,79,194,.2);
    flex-shrink:0;
}
.logo-icon svg{width:32px;height:32px}
.logo-name{font-size:26px;font-weight:800;color:var(--blue-dark);letter-spacing:-.5px}
.logo-sub{font-size:12.5px;color:var(--text-muted);text-align:center;line-height:1.55;max-width:300px}

/* ── CARD ── */
.card{
    background:var(--white);
    border-radius:20px;
    padding:32px 28px 24px;
    width:100%;
    box-shadow:0 12px 48px rgba(30,79,194,.13),0 2px 8px rgba(0,0,0,.05);
    animation:slideUp .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideUp{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}

/* ── AVATAR ── */
.card-avatar{
    width:64px;height:64px;
    background:var(--blue-pale);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;
    border:2.5px solid var(--blue-light);
    box-shadow:0 0 0 6px rgba(219,234,254,.4);
}
.card-avatar svg{width:32px;height:32px;color:var(--blue-main)}
.card-title{text-align:center;font-size:19px;font-weight:700;color:var(--text-dark);margin-bottom:4px}
.card-sub{text-align:center;font-size:12.5px;color:var(--text-muted);margin-bottom:22px}

/* ── FORM ── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--text-mid);margin-bottom:5px}
.input-wrap{position:relative}
.input-icon{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    color:var(--text-muted);width:16px;height:16px;flex-shrink:0;pointer-events:none;
}
.input-wrap input,
.date-wrap input[type="date"]{
    width:100%;
    padding:10px 14px 10px 38px;
    border:1.5px solid var(--border);
    border-radius:9px;
    font-family:inherit;font-size:13.5px;color:var(--text-dark);
    background:#f7f9fc;
    transition:border-color .2s,box-shadow .2s;
    outline:none;
}
.input-wrap input::placeholder{color:#b8c4d0}
.input-wrap input:focus,
.date-wrap input[type="date"]:focus{
    border-color:var(--blue-mid);
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
    background:var(--white);
}
.date-wrap{position:relative}
.date-wrap input[type="date"]{cursor:pointer}
.input-hint{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.4}

/* ── DIVIDER ── */
.divider{height:1px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent);margin:4px 0 14px}

/* ── CHECKBOX ── */
.check-wrap{
    display:flex;align-items:flex-start;gap:9px;
    margin-bottom:18px;cursor:pointer;
}
.check-wrap input[type="checkbox"]{
    width:15px;height:15px;min-width:15px;
    margin-top:2px;accent-color:var(--blue-main);cursor:pointer;
}
.check-wrap span{font-size:12px;color:var(--text-mid);line-height:1.5}

/* ── BUTTON ── */
.btn-login{
    width:100%;padding:12px;
    background:linear-gradient(135deg,var(--blue-main) 0%,var(--blue-mid) 100%);
    color:white;border:none;border-radius:10px;
    font-family:inherit;font-size:14.5px;font-weight:700;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:transform .15s,box-shadow .15s,opacity .15s;
    box-shadow:0 4px 16px rgba(30,79,194,.35);
}
.btn-login:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 22px rgba(30,79,194,.45)}
.btn-login:active:not(:disabled){transform:translateY(0)}
.btn-login:disabled{opacity:.5;cursor:not-allowed}
.btn-login svg{width:15px;height:15px}

/* ── ERROR ── */
.error-box{
    background:#fef2f2;border:1.5px solid #fca5a5;color:#b91c1c;
    border-radius:9px;padding:9px 13px;font-size:12.5px;
    margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;
}
.error-box svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}

/* ── SECURITY NOTE ── */
.security-note{
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:11.5px;color:var(--text-muted);
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #f1f5f9;
}
.security-note svg{width:13px;height:13px;color:var(--blue-mid);flex-shrink:0}

/* ── BOTTOM ── */
.bottom-note{font-size:11.5px;color:var(--text-muted);text-align:center;opacity:.8}

/* ── RESPONSIVE ── */
@media(max-width:440px){
    .card{padding:24px 20px 20px}
    .logo-name{font-size:22px}
    .center-wrap{padding-bottom:140px}
}