/* Halaman login e-Kerje KKR (resources/views/v2/manajemen/auth/login.blade.php).
   Palet mengikuti panduan logo 2026: navy = warna utama, biru hanya ujung gradien panel,
   hijau hanya titik logo di latar terang. Font: Plus Jakarta Sans (OFL), subset latin. */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-latin.woff2") format("woff2-variations"),
         url("../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #0B5394;
    --navy-gelap: #084173;
    --biru: #3D90C7;
    --hijau: #1D7A5F;
    --hitam: #1A1A1A;
    --putih: #FFFFFF;
    --latar: #F3F6FA;
    --garis: #C9D5E3;
    --redam: #52657C;
    --merah: #A32626;
    --merah-latar: #FCEBEB;
    --cincin: rgba(11, 83, 148, 0.22);
    --radius-isian: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--latar);
    color: var(--hitam);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---------- kerangka ---------- */

.halaman {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
}

.halaman-isi {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.kolom-kiri { display: contents; }

.masuk { order: 1; }
.panel { order: 2; }
.kaki  { order: 3; }

@media (min-width: 960px) {
    .halaman { padding: 32px; }

    .halaman-isi {
        grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
        gap: clamp(40px, 6vw, 88px);
        align-items: stretch;
    }

    .kolom-kiri {
        display: flex;
        flex-direction: column;
    }

    .masuk {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px 0 24px 8px;
    }

    .kaki { padding-left: 8px; }
}

/* ---------- kolom masuk ---------- */

.logo-lockup {
    display: block;
    align-self: flex-start;
    width: 189px;   /* viewBox 292.13 x 68 pada tinggi 44 */
    height: 44px;
    margin: 0 0 36px;
}

.masuk h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.masuk-pengantar {
    margin: 0 0 28px;
    max-width: 38ch;
    color: var(--redam);
}

.peringatan {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--merah-latar);
    color: var(--merah);
    font-size: 14px;
    line-height: 1.45;
}

.peringatan p { margin: 0; }
.peringatan p + p { margin-top: 4px; }

.bidang { margin: 0 0 18px; }

.bidang label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.isian {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1.5px solid var(--garis);
    border-radius: var(--radius-isian);
    background: var(--putih);
    color: var(--hitam);
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.isian:focus {
    outline: 2px solid transparent;
    border-color: var(--navy);
    box-shadow: 0 0 0 4px var(--cincin);
}

.isian-sandi { position: relative; }
.isian-sandi .isian { padding-right: 52px; }

.tombol-lihat {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--redam);
    cursor: pointer;
}

.js .tombol-lihat { display: inline-flex; }
.tombol-lihat:hover { background: #EEF3F8; color: var(--navy); }
.tombol-lihat:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.tombol-lihat svg { width: 20px; height: 20px; }
.tombol-lihat .ikon-tutup { display: none; }
.tombol-lihat[aria-pressed="true"] .ikon-tutup { display: block; }
.tombol-lihat[aria-pressed="true"] .ikon-buka { display: none; }

.ingat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 24px;
    font-size: 15px;
    cursor: pointer;
}

.ingat input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--navy);
}

.ingat input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.tombol-masuk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: var(--navy);
    color: var(--putih);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tombol-masuk:hover { background: var(--navy-gelap); }
.tombol-masuk:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.kaki {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    font-size: 13px;
    color: var(--redam);
}

.kaki a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kaki a:hover { color: var(--navy); }
.kaki a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }

/* ---------- panel aplikasi ---------- */

.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 0;
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--navy);
    background-image: radial-gradient(90% 70% at 100% 100%, var(--biru) 0%, rgba(61, 144, 199, 0) 65%);
    color: var(--putih);
}

.panel-teks {
    position: relative;
    z-index: 2;
    max-width: 36ch;
}

.panel h2 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.panel p {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.86);
}

.tombol-unduh {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px 0 20px;
    border-radius: 999px;
    background: var(--putih);
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.tombol-unduh:hover { background: #E6EFF7; }
.tombol-unduh:focus-visible { outline: 3px solid var(--putih); outline-offset: 3px; }
.tombol-unduh svg { width: 20px; height: 20px; flex: none; }

.unduh-catatan {
    margin: 14px 0 0;
    max-width: 40ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.panel p.unduh-catatan { margin-bottom: 0; }
.unduh-catatan a { color: var(--putih); text-underline-offset: 2px; }
.unduh-catatan a:focus-visible { outline: 2px solid var(--putih); outline-offset: 2px; border-radius: 2px; }

/* Dua ponsel "naik" dari tepi bawah panel: depan = beranda (lebih besar, lebih rendah),
   belakang = absen di lokasi. Keduanya diikat ke kanan agar duduk di atas sorot biru. */
.ponsel-area {
    --lebar-depan: min(276px, 56%);
    --lebar-belakang: min(232px, 48%);
    --tumpang: 24px;
    position: relative;
    flex: 1;
    min-height: 300px;
    margin-top: 24px;
}

.ponsel {
    position: absolute;
    padding: 10px;
    border-radius: 40px;
    background: var(--hitam);
    box-shadow: 0 32px 64px -24px rgba(3, 24, 48, 0.7);
}

.ponsel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px;
}

.ponsel-depan {
    right: calc(4% + var(--lebar-belakang) - var(--tumpang));
    bottom: -56px;
    z-index: 2;
    width: var(--lebar-depan);
}

.ponsel-belakang {
    right: 4%;
    bottom: -16px;
    z-index: 1;
    width: var(--lebar-belakang);
}

@media (min-width: 960px) {
    .panel {
        min-height: 640px;
        padding: 56px 56px 0;
        border-radius: 28px;
    }

    .panel h2 { font-size: 28px; }

    .ponsel-area {
        --tumpang: 36px;
        min-height: 420px;
    }

    .ponsel-depan { right: calc(6% + var(--lebar-belakang) - var(--tumpang)); bottom: -96px; }
    .ponsel-belakang { right: 6%; bottom: -40px; }
}

/* ---------- animasi ----------
   Kelas `anim` di <html> dipasang skrip inline di <head> dan dilepas saat GSAP gagal dimuat,
   saat animasi selesai, atau paling lama 3 detik; tanpa JS tidak ada yang disembunyikan. */

.anim .logo-lockup,
.anim .panel-teks > *,
.anim .ponsel { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .anim .logo-lockup,
    .anim .panel-teks > *,
    .anim .ponsel { opacity: 1; }

    .isian, .tombol-masuk, .tombol-unduh { transition: none; }
}