/* =====================================================================
   Halaman Login — SATU-SATUNYA stylesheet yang dimuat halaman ini.

   Sengaja berdiri sendiri, tidak memakai style.bundle.css / plugins.bundle.css
   milik tema admin: halaman login cuma butuh satu kartu, dua input, dan satu
   tombol, sementara dua bundle itu ~2,9 MB. Kalau menambah komponen di sini,
   tulis stylenya di file ini juga — jangan menarik bundle tema kembali.

   Urutan isi: font, token warna, reset, layout, panel brand, form, responsif.
   ===================================================================== */

/* ---------- Font ---------- */
/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token ---------- */
:root {
    --lg-primary:        #3699ff;
    --lg-primary-dark:   #187de4;
    --lg-primary-soft:   #e1f0ff;
    --lg-danger:         #f64e60;
    --lg-danger-soft:    #ffe2e5;
    --lg-dark:           #181c32;
    --lg-text:           #3f4254;
    --lg-muted:          #7e8299;
    --lg-faint:          #b5b5c3;
    --lg-border:         #e4e6ef;
    --lg-surface:        #ffffff;
    --lg-surface-alt:    #f3f6f9;
    --lg-radius:         14px;
    --lg-radius-sm:      10px;
    --lg-shadow:         0 12px 40px rgba(24, 28, 50, .10);
    --lg-ring:           0 0 0 4px rgba(54, 153, 255, .18);
}

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

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lg-text);
    background: var(--lg-surface-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }

button { font-family: inherit; font-size: inherit; }

/* ---------- Kerangka dua kolom ---------- */
.lg-page {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;

    /* Di layar sempit panel brand disembunyikan, jadi fotonya dipakai sebagai
       latar seluruh halaman supaya tidak jadi putih polos. Gradient ditumpuk
       sebagai layer pertama agar kartu form tetap kontras.
       --lg-bg diisi dari markup. Di >=992px layer ini dimatikan lagi. */
    background-color: var(--lg-dark);
    background-image:
        linear-gradient(160deg, rgba(24, 28, 50, .92) 0%, rgba(24, 28, 50, .70) 55%, rgba(54, 153, 255, .62) 100%),
        var(--lg-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* ---------- Panel brand (kiri) ---------- */
.lg-brand {
    position: relative;
    display: none;                 /* baru muncul di layar lebar */
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 56px 48px;
    overflow: hidden;
    background-color: var(--lg-dark);
    background-image: var(--lg-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    isolation: isolate;
}

/* Gelapkan foto supaya teks tetap terbaca berapa pun terangnya gambar. */
.lg-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(24, 28, 50, .92) 0%, rgba(24, 28, 50, .72) 45%, rgba(54, 153, 255, .55) 100%);
}

.lg-brand-logo img { width: 148px; }

.lg-brand-body { max-width: 460px; }   /* px, bukan ch: ch di sini mengikuti
                                           font-size body (14px), bukan judul */

.lg-brand-title {
    margin: 0 0 14px;
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.lg-brand-text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

.lg-brand-foot {
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

/* ---------- Panel form (kanan) ---------- */
.lg-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 18px;
    background: transparent;   /* biar latar berfoto .lg-page tembus */
}

.lg-card {
    width: 100%;
    max-width: 400px;
    padding: 34px 26px 28px;
    border-radius: 20px;
    background: var(--lg-surface);
    box-shadow: var(--lg-shadow);
}

/* Logo hanya untuk layar sempit, saat panel brand disembunyikan. */
.lg-card-logo {
    margin-bottom: 28px;
    text-align: center;
}
.lg-card-logo img { width: 132px; }

.lg-head { margin-bottom: 26px; }

.lg-title {
    margin: 0 0 6px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--lg-dark);
}

.lg-subtitle {
    margin: 0;
    font-size: .9rem;
    color: var(--lg-muted);
}

/* ---------- Alert kesalahan login ---------- */
.lg-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border-radius: var(--lg-radius-sm);
    background: var(--lg-danger-soft);
    color: #c93444;
    font-size: .875rem;
    font-weight: 500;
}
.lg-alert.is-shown {
    display: flex;
    animation: lg-slide-in .22s ease-out;
}
.lg-alert svg { flex: 0 0 auto; margin-top: 1px; }

@keyframes lg-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Field ---------- */
.lg-field { margin-bottom: 18px; }

.lg-label {
    display: block;
    margin-bottom: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--lg-dark);
}

.lg-control { position: relative; }

/* Ikon di dalam input, dan tombol mata di sisi kanan. */
.lg-control-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--lg-faint);
    pointer-events: none;
    transition: color .15s ease;
}

.lg-input {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-sm);
    background: var(--lg-surface-alt);
    color: var(--lg-dark);
    font-size: .95rem;
    font-weight: 500;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lg-input::placeholder { color: var(--lg-faint); font-weight: 400; }

.lg-input:hover:not(:focus) { border-color: #d1d3e0; }

.lg-input:focus {
    outline: 0;
    background: var(--lg-surface);
    border-color: var(--lg-primary);
    box-shadow: var(--lg-ring);
}
.lg-input:focus ~ .lg-control-icon { color: var(--lg-primary); }

/* Input password menyisakan ruang untuk tombol mata. */
.lg-input-password { padding-right: 50px; }

.lg-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lg-faint);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.lg-toggle:hover { color: var(--lg-muted); background: var(--lg-border); }
.lg-toggle:focus-visible {
    outline: 0;
    color: var(--lg-primary);
    box-shadow: var(--lg-ring);
}
/* Hanya satu dari dua ikon yang tampak, ditentukan lewat data-visible. */
.lg-toggle .lg-icon-hide { display: none; }
.lg-toggle[data-visible="true"] .lg-icon-hide { display: block; }
.lg-toggle[data-visible="true"] .lg-icon-show { display: none; }

/* ---------- Status tidak valid ---------- */
.lg-input.is-invalid {
    border-color: var(--lg-danger);
    background: var(--lg-surface);
}
.lg-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(246, 78, 96, .16); }

.lg-error {
    display: none;
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--lg-danger);
}
.lg-error.is-shown { display: block; }

/* Peringatan Caps Lock di sebelah label password. */
.lg-caps {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 600;
    color: #b58100;
}
.lg-caps.is-shown { display: inline-flex; }

.lg-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.lg-label-row .lg-label { margin-bottom: 0; }

/* ---------- Tombol ---------- */
.lg-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 50px;
    margin-top: 26px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--lg-radius-sm);
    background: var(--lg-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.lg-submit:hover {
    background: var(--lg-primary-dark);
    box-shadow: 0 8px 20px rgba(54, 153, 255, .32);
}
.lg-submit:active { transform: translateY(1px); }
.lg-submit:focus-visible { outline: 0; box-shadow: var(--lg-ring); }

.lg-submit[disabled] {
    cursor: default;
    opacity: .72;
    box-shadow: none;
    transform: none;
}

/* Saat mengirim: teks diganti spinner. */
.lg-spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lg-spin .6s linear infinite;
}
.lg-submit.is-loading .lg-spinner { display: block; }
.lg-submit.is-loading .lg-submit-label { display: none; }

@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ---------- Kaki halaman ---------- */
.lg-foot {
    margin-top: 30px;
    text-align: center;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--lg-faint);
}
.lg-foot strong { display: block; color: var(--lg-muted); font-weight: 600; }

/* ---------- Responsif ---------- */
@media (min-width: 992px) {
    /* Layar lebar: foto pindah ke panel kiri, sisi kanan jadi bidang putih polos
       dan kartu form kembali rata tanpa bayangan. */
    .lg-page {
        grid-template-columns: 1.05fr 1fr;
        background-image: none;
        background-color: transparent;
    }
    .lg-brand { display: flex; }
    .lg-card-logo { display: none; }
    .lg-main {
        padding: 40px;
        background: var(--lg-surface);
    }
    .lg-card {
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 400px) {
    .lg-main { padding: 20px 14px; }
    .lg-card { padding: 28px 20px 24px; }
    .lg-title { font-size: 1.4rem; }
}

/* Hormati preferensi pengguna yang mematikan animasi. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}