/*
 * toko.yoseeacademy.com/assets/css/login.css
 * Halaman masuk (login.php) tema Stiker. HP: logo + judul di atas, kartu form di bawah.
 * PC (≥ 992px): dua kolom, sapaan kiri (logo besar, judul, chip isi sistem) dan kartu form kanan.
 * Dimuat lewat $css_tambahan (sebelum theme.css & app.css). Token saja, ikut terang/gelap.
 */

/* Logo kepala tidak perlu di halaman masuk (logo besar sudah ada di sapaan). Tombol tema tetap di kanan. */
.ya-auth--masuk .ya-auth-kepala .ya-brand { visibility: hidden; }

.ya-masuk {
    width: min(440px, 100%);
    display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem;
}

/* ---------- Sapaan ---------- */
.ya-masuk-sapa { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ya-masuk-logo {
    width: 112px; height: 112px; margin-bottom: .5rem;
    filter: drop-shadow(var(--ya-geser-keras) var(--ya-geser-keras) 0 var(--ya-bayangan));
}
.ya-masuk-judul {
    margin: 0; font-family: var(--ya-font-judul); font-size: 2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em;
}
.ya-masuk-judul span { color: var(--ya-primary); }
.ya-masuk-teks { margin: .375rem 0 0; font-size: .9375rem; font-weight: 700; color: var(--ya-teks-2); }

.ya-masuk-chip { display: none; margin: 0; padding: 0; list-style: none; }
.ya-masuk-chip li {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .875rem 0 .375rem;
    border: var(--ya-garis) solid var(--ya-tinta); border-radius: 999px; background: var(--ya-surface);
    box-shadow: var(--ya-geser-kecil) var(--ya-geser-kecil) 0 var(--ya-bayangan);
    font-size: .875rem; font-weight: 800;
}
.ya-masuk-chip li i {
    width: 28px; height: 28px; border-radius: 50%; border: var(--ya-garis) solid var(--ya-tinta);
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem;
    background: var(--ya-ikon-bg); color: var(--ya-ikon-fg);
}

/* ---------- Kartu form ---------- */
.ya-masuk-kartu .card-body { padding: 1.5rem 1.25rem 1.25rem; }
.ya-masuk-kartu-judul { margin: 0; font-family: var(--ya-font-judul); font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.ya-masuk-kartu-sub { margin: .25rem 0 1.25rem; font-size: .875rem; font-weight: 600; color: var(--ya-teks-2); }
.ya-masuk-kartu .btn-lg { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; }
.ya-masuk-bantuan { margin: 1rem 0 0; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--ya-teks-2); }

/* ---------- PC: dua kolom ---------- */
@media (min-width: 992px) {
    .ya-masuk {
        width: min(980px, 100%);
        display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 3rem;
    }
    .ya-masuk-sapa { align-items: flex-start; text-align: left; }
    .ya-masuk-logo { width: 160px; height: 160px; margin-bottom: 1rem; }
    .ya-masuk-judul { font-size: 3.25rem; }
    .ya-masuk-teks { font-size: 1.0625rem; }
    .ya-masuk-chip { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
    .ya-masuk-kartu .card-body { padding: 2rem 1.75rem 1.5rem; }
}

/* HP pendek (layar < 700px tinggi): logo lebih kecil supaya tombol Masuk tetap terlihat */
@media (max-width: 991.98px) and (max-height: 700px) {
    .ya-masuk { gap: .75rem; }
    .ya-masuk-logo { width: 80px; height: 80px; margin-bottom: .25rem; }
    .ya-masuk-judul { font-size: 1.625rem; }
    .ya-masuk-teks { display: none; }
}