/* Halaman login - tata letak terbelah: form di kiri, foto di kanan.
   Dipakai HANYA oleh application/views/login.php.

   Menggantikan login.css lama, yang menggambar formulirnya dari sprite PNG dan
   sudah dibuang bersama login.php.bak - satu-satunya berkas yang masih
   menunjuknya, dan itu pun tidak pernah dirutekan. */

:root{
    --ink:#0f1c2b;
    --ink-soft:#33465c;
    --muted:#6b7a8c;
    --line:#dde4ec;
    --panel:#ffffff;
    --ground:#f4f7fa;
    --accent:#1f6fb8;
    --accent-strong:#17568f;
    --danger:#c2483d;
    --danger-bg:#fdf2f1;
    --radius:10px;
}

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

html,body{height:100%;}
body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

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

.lg-shell{
    display:flex;
    min-height:100vh;
}

.lg-panel{
    flex:0 0 480px;
    background:var(--panel);
    display:flex;
    flex-direction:column;
    padding:44px 56px;
    position:relative;
    z-index:2;
}

.lg-stage{
    flex:1 1 auto;
    position:relative;
    overflow:hidden;
    background:var(--ink);
}

/* Foto dipasang sebagai elemen tersendiri dan bukan background-image supaya
   bisa diberi transisi masuk tanpa mengedipkan seluruh panel. */
.lg-stage-photo{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0;
    transform:scale(1.04);
    transition:opacity .9s ease, transform 1.6s ease;
}
.lg-stage-photo.is-ready{opacity:1;transform:scale(1);}

/* Sisi kiri foto diredupkan supaya pertemuan dua panel terbaca sebagai satu
   bidang, bukan dua persegi yang ditempel. */
.lg-stage::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(15,28,43,.34) 0%,rgba(15,28,43,0) 26%,rgba(15,28,43,0) 62%,rgba(15,28,43,.42) 100%);
    pointer-events:none;
}

/* ---------- isi panel ---------- */

.lg-brand{display:flex;align-items:center;gap:12px;margin-bottom:auto;}
.lg-brand img{height:34px;width:auto;display:block;}
.lg-brand-fallback{
    font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}

.lg-main{margin:36px 0;}

.lg-eyebrow{
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 10px;
}
.lg-title{
    font-size:27px;
    font-weight:700;
    letter-spacing:-.02em;
    margin:0 0 6px;
    color:var(--ink);
    text-wrap:balance;
}
.lg-sub{margin:0 0 28px;color:var(--muted);font-size:13.5px;}

.lg-field{margin-bottom:16px;}
.lg-label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:6px;
}

.lg-input-wrap{position:relative;display:block;}

/* ANAK LANGSUNG, bukan keturunan. Sebagai selektor keturunan, aturan ini ikut
   kena <i class="fa"> di dalam tombol lihat-sandi: ikonnya jadi absolut terhadap
   tombolnya sendiri, isi tombol jadi kosong sehingga lebarnya menyusut tinggal
   padding, dan left:14px melempar glyph-nya keluar tepi kotak isian. */
.lg-input-wrap > .fa{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#9aa7b5;
    font-size:14px;
    pointer-events:none;
    transition:color .15s ease;
}
.lg-input{
    width:100%;
    padding:12px 14px 12px 40px;
    font:inherit;
    font-size:14px;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.lg-input::placeholder{color:#a8b3c0;}
.lg-input:hover{border-color:#c4cfdb;}
.lg-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(31,111,184,.15);
}
.lg-input-wrap:focus-within > .fa{color:var(--accent);}

/* Ruang untuk tombol mata, supaya sandi panjang tidak lewat di bawahnya. */
.lg-input.has-reveal{padding-right:46px;}

/* Tombol lihat/sembunyikan sandi. Tanpa ini, salah ketik sandi di layar sentuh
   tidak pernah ketahuan sampai tertolak. */
.lg-reveal{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    color:#9aa7b5;
    cursor:pointer;
    padding:8px 10px;
    border-radius:8px;
    font-size:14px;
    line-height:1;
}
.lg-reveal .fa{
    /* Ditegakkan kembali kalau-kalau ada aturan lain yang mengabsolutkannya:
       ikon ini bagian dari isi tombol, bukan hiasan yang ditempel. */
    position:static;
    transform:none;
    left:auto;
    display:block;
}
.lg-reveal:hover{color:var(--ink-soft);background:#f1f5f9;}
.lg-reveal:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

.lg-submit{
    width:100%;
    margin-top:8px;
    padding:12px 18px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    color:#fff;
    background:var(--accent);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.lg-submit:hover:not(:disabled){background:var(--accent-strong);border-color:var(--accent-strong);}
.lg-submit:active:not(:disabled){transform:translateY(1px);}
.lg-submit:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;}
.lg-submit:disabled{opacity:.62;cursor:default;}

.lg-error{
    display:none;
    margin-bottom:18px;
    padding:11px 14px;
    border:1px solid #f0cfcb;
    border-left:3px solid var(--danger);
    border-radius:8px;
    background:var(--danger-bg);
    color:#8e3229;
    font-size:13px;
}

.lg-notice{
    margin-bottom:18px;
    padding:10px 14px;
    border:1px solid #f4c9a8;
    border-left:3px solid #e07b39;
    border-radius:8px;
    background:#fdf4ec;
    color:#8a4a17;
    font-size:12.5px;
}

.lg-foot{
    margin-top:auto;
    color:#93a1b0;
    font-size:11.5px;
    display:flex;
    justify-content:space-between;
    gap:12px;
}

/* Gerbang browser - jarang tampil, jadi tidak perlu tampilan tersendiri. */
.lg-gate{
    margin:36px 0;
    padding:22px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--ground);
}
.lg-gate h2{margin:0 0 8px;font-size:16px;}
.lg-gate p{margin:0 0 14px;color:var(--muted);font-size:13px;}
.lg-gate a{color:var(--accent);font-weight:600;text-decoration:none;}
.lg-gate a:hover{text-decoration:underline;}

/* ---------- layar sempit ----------
   Foto dipindah ke pita atas, bukan dibuang: ia satu-satunya bagian yang
   dipersonalisasi user, jadi menghilangkannya sama dengan menghilangkan
   fiturnya di ponsel. */
@media (max-width:900px){
    .lg-shell{flex-direction:column;min-height:100vh;}
    .lg-stage{flex:0 0 172px;order:-1;}
    .lg-stage::after{
        background:linear-gradient(180deg,rgba(15,28,43,.12) 0%,rgba(15,28,43,.42) 100%);
    }
    .lg-panel{flex:1 1 auto;padding:28px 22px 24px;}
    .lg-main{margin:22px 0;}
    .lg-title{font-size:23px;}
}

@media (max-width:420px){
    .lg-panel{padding:22px 16px 20px;}
    .lg-foot{flex-direction:column;gap:4px;}
}

@media (prefers-reduced-motion:reduce){
    .lg-stage-photo{transition:none;transform:none;}
    .lg-stage-photo.is-ready{transform:none;}
    .lg-submit{transition:none;}
}