/* =========================================================
   PELITA UI/UX 5A1.9 — MOBILE LOGIN COMPACT CARD
   Tujuan:
   - Card lebih padat & lebih kecil
   - Lebar card sama dengan blok teks pembuka
   - Card lebih naik
   - Kepala siswa pada background tidak tertutup
   - Tombol Masuk + footer bawah TIDAK diubah
   - HANYA MOBILE (<900px)
   Muat PALING TERAKHIR.
   ========================================================= */

@media (max-width: 899px) {

  /* -------------------------------------------------------
     TEKS PEMBUKA
     Dijadikan master lebar untuk card login.
     ------------------------------------------------------- */
  body.pelita-login-page:not(.access-page) .login-copy {
    top: 70px !important;
    width: min(78vw, 320px) !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy h1 {
    font-size: .96rem !important;
    line-height: 1.12 !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy p:not(.login-kicker) {
    margin-top: 3px !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  /* Logo sedikit lebih compact agar komposisi atas tetap lega */
  body.pelita-login-page:not(.access-page) .login-brand {
    top: 12px !important;
    width: min(38vw, 158px) !important;
  }

  /* -------------------------------------------------------
     CARD UTAMA — sama lebarnya dengan teks pembuka
     ------------------------------------------------------- */
  body.pelita-login-page:not(.access-page) .login-form::before {
    top: 116px !important;
    left: 50% !important;

    width: min(78vw, 320px) !important;
    max-width: 320px !important;
    height: 116px !important;

    transform: translateX(-50%) !important;

    border-radius: 16px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.58) !important;

    box-shadow: 0 7px 24px rgba(0,0,0,.10) !important;

    -webkit-backdrop-filter: blur(9px) !important;
    backdrop-filter: blur(9px) !important;
  }

  /* Area isi card mengikuti padding compact gaya login guru */
  body.pelita-login-page:not(.access-page) .login-field {
    left: 50% !important;

    width: calc(min(78vw, 320px) - 32px) !important;
    max-width: 288px !important;

    transform: translateX(-50%) !important;
  }

  /* Username */
  body.pelita-login-page:not(.access-page) .login-field:nth-of-type(1) {
    top: 124px !important;
  }

  /* Password */
  body.pelita-login-page:not(.access-page) .login-field:nth-of-type(2) {
    top: 177px !important;
  }

  /* Label lebih ringkas */
  body.pelita-login-page:not(.access-page) .login-field > label {
    display: block !important;

    margin: 0 0 2px !important;

    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
  }

  /* Input lebih pendek dan font sedikit lebih kecil */
  body.pelita-login-page:not(.access-page) .login-input-wrap input {
    width: 100% !important;

    height: 31px !important;
    min-height: 31px !important;

    padding: 2px 31px 2px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #d9dfe8 !important;
    border-radius: 0 !important;

    background: transparent !important;

    font-size: 13px !important;
    line-height: 1.2 !important;

    box-shadow: none !important;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input::placeholder {
    font-size: 13px !important;
  }

  body.pelita-login-page:not(.access-page) .password-toggle {
    right: 0 !important;

    width: 28px !important;
    height: 28px !important;
  }

  body.pelita-login-page:not(.access-page) .password-toggle i {
    font-size: .82rem !important;
  }

  /* Error mengikuti ukuran/posisi card baru */
  body.pelita-login-page:not(.access-page) .login-alert {
    top: 240px !important;

    width: min(78vw, 320px) !important;
    max-width: 320px !important;
  }

  /*
   * Bagian bawah tidak disentuh:
   * - tombol Masuk
   * - Versi 4.00 • Pelita Elektronik Absensi
   */
}


/* Mobile sangat pendek */
@media (max-width: 899px) and (max-height: 700px) {

  body.pelita-login-page:not(.access-page) .login-brand {
    top: 7px !important;
    width: min(34vw, 142px) !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy {
    top: 51px !important;
    width: min(76vw, 304px) !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy h1 {
    font-size: .90rem !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy p:not(.login-kicker) {
    font-size: .54rem !important;
  }

  body.pelita-login-page:not(.access-page) .login-form::before {
    top: 88px !important;

    width: min(76vw, 304px) !important;
    height: 108px !important;
  }

  body.pelita-login-page:not(.access-page) .login-field {
    width: calc(min(76vw, 304px) - 30px) !important;
    max-width: 274px !important;
  }

  body.pelita-login-page:not(.access-page) .login-field:nth-of-type(1) {
    top: 95px !important;
  }

  body.pelita-login-page:not(.access-page) .login-field:nth-of-type(2) {
    top: 144px !important;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input {
    height: 29px !important;
    min-height: 29px !important;
    font-size: 12.5px !important;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input::placeholder {
    font-size: 12.5px !important;
  }

  body.pelita-login-page:not(.access-page) .login-alert {
    top: 205px !important;
    width: min(76vw, 304px) !important;
  }
}

@media (max-width: 899px) {
  body.pelita-login-page:not(.access-page) .login-brand img {
    filter: none !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}