/* ==========================================================================
   auth-pages.css — halaman berdiri sendiri di luar login:
   Lupa Password · Buat Password Baru · Kirim Pesan ke Administrator.
   Selaras dengan tema teal sistem, responsif & aman untuk layar HP.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Halaman dikunci ke ukuran layar: tak bisa di-scroll / digoyang.
   Pakai height (bukan min-height) + 100dvh = tinggi viewport yang TERLIHAT,
   sehingga kartu benar-benar center di layar HP (bilah alamat tak mengganggu). */
html,
body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    width: 100%;
    background: linear-gradient(160deg, #02918a 0%, #045854 55%, #023a37 100%);
    color: #0d211f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.auth-wrap {
    width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    /* Jaring pengaman: bila layar sangat pendek, hanya ISI KARTU yang bergulir —
       halaman tetap terkunci (tidak ikut bergoyang). */
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 20px;
    padding: 26px 22px;
    box-shadow: 0 26px 64px -18px rgba(0, 0, 0, 0.45);
}

.auth-card-lg { max-width: 560px; }

.auth-back {
    display: inline-block;
    margin-bottom: 14px;
    color: #02918a;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.auth-back:hover { text-decoration: underline; }

.auth-head { text-align: center; margin-bottom: 20px; }

.auth-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #12c9bd, #045854);
    color: #fff;
    box-shadow: 0 12px 26px -8px rgba(2, 145, 138, 0.7);
}

.auth-icon svg { width: 30px; height: 30px; }

.auth-head h1 { font-size: 21px; font-weight: 800; color: #045854; margin-bottom: 6px; }
.auth-head p  { font-size: 13.5px; color: #5c7572; line-height: 1.6; }

.auth-note {
    font-size: 13px;
    color: #5c7572;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ── Alert ────────────────────────────────────────────── */
.auth-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.auth-alert-ok  { background: #e6f7f5; border: 1px solid #9fded8; color: #04635e; }
.auth-alert-err { background: #fdecea; border: 1px solid #f5b7b1; color: #a93226; }

/* ── Form ─────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.auth-group { display: flex; flex-direction: column; min-width: 0; }

.auth-group label {
    font-size: 13px;
    font-weight: 600;
    color: #045854;
    margin-bottom: 6px;
}

.auth-group .req { color: #c0392b; }

.auth-group input,
.auth-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #dfe6e5;
    border-radius: 11px;
    font-size: 16px;          /* >=16px: cegah zoom otomatis di iOS */
    font-family: inherit;
    color: #0d211f;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-group textarea { resize: vertical; min-height: 110px; }

.auth-group input:focus,
.auth-group textarea:focus {
    outline: none;
    border-color: #02918a;
    box-shadow: 0 0 0 3px rgba(2, 145, 138, 0.13);
}

.auth-btn {
    margin-top: 4px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    background: linear-gradient(135deg, #02918a, #045854);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    font-family: inherit;
    transition: transform 0.18s, box-shadow 0.3s;
}

.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(2, 145, 138, 0.6); }
.auth-btn:active { transform: translateY(0); }

.auth-foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f0;
    text-align: center;
    font-size: 13.5px;
    color: #5c7572;
}

.auth-foot a { color: #02918a; font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ── HP: padatkan agar SELURUH isi muat di layar tanpa perlu scroll ────── */
@media (max-width: 768px) {
    .auth-card { padding: 20px 16px; border-radius: 18px; }

    /* Nama & No. Pegawai tetap berdampingan → hemat satu baris penuh. */
    .auth-row { gap: 10px; }

    .auth-back { margin-bottom: 10px; font-size: 13px; }

    .auth-head { margin-bottom: 14px; }
    .auth-icon { width: 48px; height: 48px; margin-bottom: 10px; }
    .auth-icon svg { width: 24px; height: 24px; }
    .auth-head h1 { font-size: 19px; margin-bottom: 4px; }
    .auth-head p  { font-size: 12.5px; line-height: 1.5; }

    .auth-note  { font-size: 12.5px; margin-bottom: 12px; }
    .auth-alert { padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; }

    .auth-form { gap: 10px; }
    .auth-group label { font-size: 12.5px; margin-bottom: 4px; }

    .auth-group input,
    .auth-group textarea {
        padding: 10px 12px;
        border-radius: 10px;
        /* tetap 16px: mencegah iOS auto-zoom saat field difokus */
    }

    .auth-group textarea { min-height: 76px; }

    .auth-btn { padding: 12px; font-size: 15px; border-radius: 12px; }

    .auth-foot { margin-top: 12px; padding-top: 12px; font-size: 12.5px; }
}

/* Layar HP yang sangat pendek (mis. mode landscape / HP kecil):
   rampingkan lagi supaya tetap muat utuh. */
@media (max-height: 660px) and (max-width: 768px) {
    .auth-icon { width: 40px; height: 40px; margin-bottom: 8px; }
    .auth-icon svg { width: 20px; height: 20px; }
    .auth-head h1 { font-size: 17.5px; }
    .auth-head p  { display: none; }   /* keterangan disembunyikan, judul sudah jelas */
    .auth-head { margin-bottom: 10px; }
    .auth-form { gap: 8px; }
    .auth-group textarea { min-height: 60px; }
}