:root {
    --navy:      #0a2351;
    --blue:      #1040a0;
    --blue-mid:  #1a55c8;
    --blue-soft: #e8eef8;
    --gold:      #f5a623;
    --gold-soft: rgba(245,166,35,.12);
    --gold-border: rgba(245,166,35,.30);
    --bg:        #f0f3fa;
    --white:     #ffffff;
    --text:      #0d1a33;
    --text-mid:  #3d5080;
    --text-muted:#7a90b8;
    --border:    #d0d9ee;
    --green:     #1e7e44;
    --shadow:    rgba(10,35,81,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; }

body {
    background: var(--bg);
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===================== LAYOUT ===================== */
.layout { display: flex; width: 100%; min-height: 100vh; }

/* ===================== PANEL KIRI ===================== */
.panel-left {
    flex: 0 0 44%;
    background: var(--navy);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px 48px;
    animation: slideLeft .8s cubic-bezier(.22,1,.36,1) both;
}

@keyframes slideLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.panel-left::before {
    content: '';
    position: absolute;
    bottom: -80px; right: -80px;
    width: 420px; height: 420px;
    background: conic-gradient(from 200deg, rgba(26,85,200,.28) 0deg, rgba(26,85,200,.06) 90deg, transparent 180deg);
    border-radius: 50%;
    animation: rotate 18s linear infinite;
    pointer-events: none;
}
@keyframes rotate { to { transform: rotate(360deg); } }

.panel-left::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), #ffcc55, var(--gold));
}

.grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.logo-area {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 14px;
    animation: fadeUp .6s ease .2s both;
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
.logo-emblem {
    width: 56px; height: 56px;
    background: #ffffff; /* atau var(--navy-dark) kalau logo aslinya sudah gelap */
    border-radius: 50%;
    border: 2px solid #f5a623; /* gold tua, bukan kuning cerah */
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 5px;
}
.logo-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* karena bulat, contain lebih aman biar logo nggak kepotong di sudut */
    border-radius: 50%;
}
.logo-instansi { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
.logo-name { font-size:17px; font-weight:800; color:#fff; letter-spacing:-.2px; }

.panel-content { position: relative; z-index: 2; animation: fadeUp .7s ease .35s both; }

.panel-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.3);
    border-radius: 999px; padding: 5px 13px;
    font-size: 11.5px; font-weight: 600; color: var(--gold);
    margin-bottom: 20px;
}
.panel-badge .dot {
    width:6px; height:6px; border-radius:50%; background:var(--gold);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100%{ box-shadow:0 0 0 0 rgba(245,166,35,.5); }
    50%    { box-shadow:0 0 0 5px rgba(245,166,35,0); }
}

.panel-heading {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800; color: #fff;
    line-height: 1.18; letter-spacing: -.5px; margin-bottom: 16px;
}
.panel-heading .accent { color: var(--gold); }

.panel-desc {
    font-size: 13.5px; color: rgba(255,255,255,.55);
    line-height: 1.75; max-width: 300px;
}

.feature-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px; padding: 5px 12px;
    font-size: 11.5px; color: rgba(255,255,255,.65); font-weight: 500;
}

/* ===================== PANEL KANAN ===================== */
.panel-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: var(--bg);
    position: relative;
    overflow-y: auto;
    min-height: 100vh;
}
.panel-right::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
    background-size: 26px 26px; opacity: .5; pointer-events: none;
}

/* ===================== FORM BOX ===================== */
.form-box {
    position: relative; z-index: 2;
    width: 100%; max-width: 400px;
    animation: formIn .7s cubic-bezier(.34,1.56,.64,1) .25s both;
}
@keyframes formIn {
    from { opacity:0; transform:translateY(24px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ===================== FORM HEADER =====================
   Disamakan dengan target: jarak heading ke chip status
   harus rapat, tidak ada ruang kosong berlebih. */
.form-header { margin-bottom: 14px; }
.form-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--blue-soft); color: var(--blue);
    border-radius: 999px; padding: 4px 12px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .7px; text-transform: uppercase; margin-bottom: 10px;
    transition: all .3s ease;
}
.form-chip.chip-pegawai {
    background: rgba(245,166,35,.12);
    color: #c47d10;
}
.form-title {
    font-size: 28px; font-weight: 800;
    color: var(--text); letter-spacing: -.5px;
    line-height: 1.15; margin-bottom: 6px;
}
.form-sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ===================== ALERT ERROR ===================== */
.alert-error {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 15px;
    background: #fef2f2; border: 1.5px solid #fecaca;
    border-radius: 10px; margin-bottom: 20px;
    animation: shake .45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); }
    40%{ transform:translateX(6px); }
    60%{ transform:translateX(-3px); }
    80%{ transform:translateX(3px); }
}
.alert-error i { color:#dc2626; flex-shrink:0; margin-top:1px; }
.alert-error p  { font-size:13px; color:#991b1b; line-height:1.5; }

/* ===================== FIELDS =====================
   Jarak dirapatkan agar sesuai target screenshot —
   tidak ada lagi ruang kosong antar elemen. */
.field { margin-bottom: 12px; }
.field-label {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--text-mid); text-transform: uppercase;
    letter-spacing: .7px; margin-bottom: 7px;
}
.field-wrap { position: relative; }
.field-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted); width: 17px; height: 17px;
    pointer-events: none; transition: color .2s;
}
.field-input {
    width: 100%; padding: 13px 14px 13px 42px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 11px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px; font-weight: 500;
    color: var(--text); outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input::placeholder { color: var(--text-muted); font-weight: 400; }
.field-input:focus {
    border-color: var(--blue-mid);
    background: #fafcff;
    box-shadow: 0 0 0 4px rgba(26,85,200,.10);
}
.field-wrap:focus-within .field-icon { color: var(--blue-mid); }
.field-input.is-error { border-color: #dc2626; background: #fff9f9; }

.toggle-pw {
    position: absolute; right: 13px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center;
    padding: 4px; border-radius: 6px;
    transition: color .2s, background .2s;
}
.toggle-pw:hover { color: var(--blue); background: var(--blue-soft); }

/* ── Password wrap ──*/
.pw-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
}
.pw-wrap.show {
    grid-template-rows: 1fr;
    opacity: 1;
}
.pw-wrap > .field {
    overflow: hidden;
    min-height: 0;
    /* PENTING: margin-bottom dari .field TIDAK ikut collapse
       walau parent grid-template-rows:0fr — margin tetap dihitung
       sebagai bagian box meski height visual jadi 0.
       Ini sumber gap kosong yang terlihat di screenshot mobile.
       Override ke 0 di sini, lalu pindahkan jarak ke .btn-wrap saja. */
    margin-bottom: 0;
}

/* ── Detect status chip ──
   TEKNIK BARU sama dengan pw-wrap: grid-rows 0fr→1fr.
   margin dipindah ke dalam .detect-status-inner agar saat
   grid-row = 0fr, margin ikut hilang (tidak menyisakan jarak). */
.detect-status {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: 0;
    transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1),
                opacity .22s ease,
                margin-bottom .28s ease;
}
.detect-status.show {
    grid-template-rows: 1fr;
    opacity: 1;
}
.detect-status > * { overflow: hidden; }
.detect-status-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 9px;
    min-height: 0;
}
/* Margin dipisah ke wrapper luar, BUKAN ke -inner —
   supaya saat grid-template-rows:0fr, margin ikut hilang total.
   Margin pada child grid TIDAK collapse otomatis bersama height. */
.detect-status.show {
    margin-bottom: 10px;
}
.detect-status.pegawai .detect-status-inner {
    background: rgba(245,166,35,.10);
    border: 1px solid rgba(245,166,35,.28);
    color: #c47d10;
}
.detect-status.admin .detect-status-inner {
    background: var(--blue-soft);
    border: 1px solid var(--border);
    color: var(--blue);
}

/* ── NIP Progress bar ──
   TEKNIK BARU: grid-rows. Sebelumnya pakai min-height:32px
   yang TETAP mereservasi ruang kosong meski opacity:0 —
   itu salah satu sumber jarak aneh yang kamu lihat.
   Sekarang ruang benar-benar hilang saat tidak ditampilkan. */
.nip-progress {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .25s ease, opacity .2s ease;
}
.nip-progress.show {
    grid-template-rows: 1fr;
    opacity: 1;
}
.nip-progress > .nip-progress-inner {
    overflow: hidden;
    min-height: 0;
}
.nip-progress.show > .nip-progress-inner {
    margin-top: 7px;
}
.nip-bar-bg {
    height: 5px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 5px;
}
.nip-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .25s ease, background .4s ease;
}
.nip-counter {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    transition: color .3s;
}
.nip-counter.done { color: var(--green); font-weight: 700; }

.field-input.nip-style {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    padding-left: 14px;
}

/* ===================== SUBMIT =====================
   FIX (poin jarak): margin-top dikurangi dari 22px ke 18px —
   sebelumnya jarak ke tombol terasa berlebih karena menumpuk
   dengan margin-bottom pw-wrap/field di atasnya. */
.btn-wrap { margin-top: 14px; }
.btn-login {
    width: 100%; padding: 14px;
    background: var(--navy);
    color: #fff; border: none; border-radius: 11px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px; font-weight: 700;
    cursor: pointer; position: relative; overflow: hidden;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(10,35,81,.30);
}
.btn-login.btn-pegawai { background: var(--blue); box-shadow: 0 4px 18px rgba(16,64,160,.30); }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(10,35,81,.38); }
.btn-login.btn-pegawai:hover { background: var(--navy); }
.btn-login:active { transform: translateY(0); }

.btn-login::after {
    content: ''; position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
    animation: sweep 3.5s ease-in-out 2s infinite;
}
@keyframes sweep { 0%{left:-80%} 50%{left:130%} 100%{left:130%} }

.btn-login.loading { pointer-events: none; }
.btn-login.loading .btn-label { opacity: 0; }
.btn-login.loading .btn-loader { display: flex; }

.btn-loader {
    display: none; position: absolute; inset: 0;
    align-items: center; justify-content: center; gap: 5px;
}
.ldot {
    width: 7px; height: 7px; background: #fff; border-radius: 50%;
    animation: ldotBounce 1s ease-in-out infinite;
}
.ldot:nth-child(2){ animation-delay:.15s; }
.ldot:nth-child(3){ animation-delay:.30s; }
@keyframes ldotBounce {
    0%,100%{ transform:translateY(0) scale(.75); opacity:.5; }
    50%    { transform:translateY(-5px) scale(1); opacity:1; }
}

/* ===================== FOOTER ===================== */
.form-divider {
    display: flex; align-items: center; gap: 12px; margin-top: 22px;
}
.form-divider hr { flex:1; border:none; border-top:1px solid var(--border); }
.form-divider span {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
}
.form-footer { margin-top: 18px; text-align: center; }
.footer-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; background: var(--white);
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 12px; color: var(--text-mid); font-weight: 500;
}
.s-dot {
    width: 7px; height: 7px; background: var(--green); border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}
.copyright {
    margin-top: 20px; text-align: center;
    font-size: 11px; color: var(--text-muted); line-height: 1.6;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
    .panel-left { display: none; }
    .panel-right { padding: 32px 20px; }
    .form-title  { font-size: 24px; }
}
@media (max-width: 360px) {
    .panel-right { padding: 24px 14px; }
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}