/* =====================================================================
   Halaman login S9-PAY
   ---------------------------------------------------------------------
   Palet diambil langsung dari logo img/logo-login.png :
     navy   #102B56
     biru   #045F9B
     oranye #FD9F2F
   Semua kelas diberi awalan s9- supaya tidak bentrok dengan Metronic
   (style.bundle.css) yang ikut dimuat di template_login.php.
   Dipakai hanya oleh application/views/login_v.php.
   ===================================================================== */

:root {
    --s9-navy: #102B56;
    --s9-biru: #045F9B;
    --s9-oranye: #FD9F2F;
    --s9-teks: #1B283F;
    --s9-redup: #7A8699;
    --s9-garis: #E3E8F0;
}

.s9-login {
    display: flex;
    min-height: 100vh;
    font-family: Poppins, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Panel kiri : identitas produk ---------- */
.s9-brand {
    flex: 1 1 46%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3.5rem;
    color: #fff;
    background: linear-gradient(150deg, var(--s9-navy) 0%, #0C315E 45%, var(--s9-biru) 100%);
    overflow: hidden;
}

/* Dua lingkaran samar, mengambil bentuk badge pada logo */
.s9-brand::before,
.s9-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
}
.s9-brand::before { width: 460px; height: 460px; right: -170px; top: -130px; }
.s9-brand::after  { width: 300px; height: 300px; left: -110px; bottom: -90px; background: rgba(253, 159, 47, .06); border-color: transparent; }

.s9-brand-isi { position: relative; z-index: 1; max-width: 460px; }

.s9-logo {
    width: 132px;
    height: 132px;
    margin-bottom: 2rem;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35));
}

.s9-judul {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 .85rem;
    letter-spacing: -.01em;
}
.s9-judul span { color: var(--s9-oranye); }

.s9-sub {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 2.5rem;
}

.s9-poin { list-style: none; margin: 0; padding: 0; }
.s9-poin li {
    display: flex;
    align-items: flex-start;
    gap: .95rem;
    margin-bottom: 1.35rem;
}
.s9-poin li:last-child { margin-bottom: 0; }

.s9-ikon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
}
.s9-ikon svg { width: 20px; height: 20px; stroke: var(--s9-oranye); }

.s9-poin b { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .15rem; }
.s9-poin small { font-size: .82rem; color: rgba(255, 255, 255, .60); line-height: 1.5; }

/* ---------- Panel kanan : form ---------- */
.s9-panel {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: #fff;
}

.s9-form-bungkus { width: 100%; max-width: 400px; }

.s9-logo-mobile { display: none; }

.s9-form-judul {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--s9-teks);
    margin: 0 0 .4rem;
}
.s9-form-sub {
    font-size: .93rem;
    color: var(--s9-redup);
    margin: 0 0 2.25rem;
}

.s9-field { margin-bottom: 1.15rem; }
.s9-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--s9-teks);
    margin-bottom: .5rem;
    letter-spacing: .01em;
}

.s9-input-bungkus { position: relative; }

.s9-login .s9-input {
    width: 100%;
    height: 52px;
    padding: 0 1rem 0 2.9rem;
    font-size: .95rem;
    color: var(--s9-teks);
    background: #F7F9FC;
    border: 1px solid var(--s9-garis);
    border-radius: 10px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.s9-login .s9-input.has-akhiran,
.s9-login .s9-input-bungkus:has(.s9-akhiran) .s9-input {
    padding-right: 2.9rem;
}
.s9-login .s9-input::placeholder { color: #A9B3C2; }
.s9-login .s9-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--s9-biru);
    box-shadow: 0 0 0 3px rgba(4, 95, 155, .12);
}

/* Ikon awalan (kiri) di dalam field */
.s9-awalan {
    position: absolute;
    top: 26px;
    left: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #A9B3C2;
    pointer-events: none;
    transition: color .15s;
}
.s9-awalan svg { width: 19px; height: 19px; stroke: currentColor; }
.s9-input-bungkus:focus-within .s9-awalan { color: var(--s9-biru); }

/* Ikon / tombol akhiran (kanan) di dalam field */
.s9-akhiran {
    position: absolute;
    top: 26px;
    right: .9rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #A9B3C2;
}
.s9-akhiran svg { width: 19px; height: 19px; stroke: currentColor; }

button.s9-mata {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #A9B3C2;
    display: flex;
}
button.s9-mata:hover { color: var(--s9-biru); }

.s9-login .s9-tombol {
    width: 100%;
    height: 52px;
    margin-top: .35rem;
    font-size: .97rem;
    font-weight: 600;
    color: #fff;
    background: var(--s9-biru);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .05s;
    box-shadow: 0 8px 20px rgba(4, 95, 155, .22);
}
.s9-login .s9-tombol:hover { background: #05548A; }
.s9-login .s9-tombol:active { transform: translateY(1px); }
.s9-login .s9-tombol:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }

/* Pesan gagal login */
.s9-login #msgHide {
    padding: .85rem 1rem;
    margin-bottom: 1.15rem;
    font-size: .88rem;
    color: #9B2C2C;
    background: #FDECEC;
    border: 1px solid #F7C9C9;
    border-radius: 10px;
}

/* Pesan validasi jquery-validation */
.s9-login label.error {
    display: block;
    margin: .45rem 0 0;
    font-size: .8rem;
    font-weight: 500;
    color: #D64550;
}
.s9-login .s9-input.error { border-color: #E8A0A6; background: #FFF8F8; }

.s9-kaki {
    margin-top: 2.5rem;
    font-size: .8rem;
    color: #A2ACBB;
    text-align: center;
    line-height: 1.6;
}
.s9-kaki b { color: var(--s9-redup); font-weight: 600; }

/* ---------- Layar kecil : panel brand jadi pita ringkas ---------- */
@media (max-width: 991.98px) {
    .s9-login { flex-direction: column; min-height: 100vh; }
    .s9-brand { display: none; }
    .s9-panel { flex: 1; padding: 2.5rem 1.5rem; }
    .s9-logo-mobile {
        display: block;
        width: 92px;
        height: 92px;
        margin: 0 auto 1.5rem;
    }
    .s9-form-judul, .s9-form-sub { text-align: center; }
    .s9-form-sub { margin-bottom: 2rem; }
}

@media (max-width: 380px) {
    .s9-panel { padding: 2rem 1.15rem; }
}