/* =========================================================
   PELITA UI/UX 5A1.8 — ADAPTASI CARD LOGIN ABSEN GURU
   Sumber visual: sw-custom.css login guru
   Dipasang PALING TERAKHIR.
   HANYA MOBILE (<900px).
   Desktop tetap LOCK.
   ========================================================= */

@media (max-width: 899px) {

  /*
   * RESET override card mobile sebelumnya.
   * Form tetap menjadi positioning context.
   */
  body.pelita-login-page:not(.access-page) .login-form {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /*
   * CARD UTAMA
   * Mengadaptasi nilai CSS login guru:
   * width 86%, max-width 360px, radius 18px,
   * white translucent + blur + soft shadow.
   */
  body.pelita-login-page:not(.access-page) .login-form::before {
    content: "" !important;
    position: absolute !important;
    top: 126px !important;
    left: 50% !important;

    width: 86% !important;
    max-width: 360px !important;
    height: 142px !important;

    transform: translateX(-50%) !important;

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

    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;

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

    z-index: -1 !important;
  }

  /*
   * FIELD
   * Card guru memakai padding 12px 18px dan jarak field 6px.
   */
  body.pelita-login-page:not(.access-page) .login-field {
    position: absolute !important;
    left: 50% !important;

    width: calc(86% - 36px) !important;
    max-width: 324px !important;

    margin: 0 !important;
    padding: 0 !important;

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

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

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

  /*
   * LABEL
   * Sama dengan login guru: 12px, medium.
   */
  body.pelita-login-page:not(.access-page) .login-field > label {
    display: block !important;

    margin: 0 0 3px !important;

    color: #34483f !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  /*
   * INPUT
   * Login guru memakai height 36px dan font-size 14px.
   * Bentuk dibuat seperti referensi: tanpa individual rounded-card,
   * hanya garis tipis di bagian bawah.
   */
  body.pelita-login-page:not(.access-page) .login-input-wrap input {
    display: block !important;

    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;

    padding: 4px 34px 4px 0 !important;

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

    outline: 0 !important;

    background: transparent !important;

    color: #364840 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;

    box-shadow: none !important;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input::placeholder {
    color: #7c828a !important;
    font-size: 14px !important;
    opacity: 1 !important;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input:focus {
    border-bottom-color: #15966b !important;
    box-shadow: none !important;
  }

  /*
   * Icon kiri disembunyikan agar persis lebih dekat ke form login guru.
   * Tombol lihat password tetap dipertahankan.
   */
  body.pelita-login-page:not(.access-page) .login-input-wrap > i:not(.bi-eye):not(.bi-eye-slash) {
    display: none !important;
  }

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

    color: #748a80 !important;
  }

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

  /*
   * Posisi teks pembuka dipertahankan ringkas
   * agar card bisa naik tanpa bertabrakan.
   */
  body.pelita-login-page:not(.access-page) .login-copy {
    top: 73px !important;
    width: min(84vw, 340px) !important;
  }

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

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

  /* Logo tetap kecil seperti refinement sebelumnya. */
  body.pelita-login-page:not(.access-page) .login-brand {
    top: 13px !important;
    width: min(40vw, 168px) !important;
  }

  /*
   * ERROR
   * Mengikuti batas card baru.
   */
  body.pelita-login-page:not(.access-page) .login-alert {
    top: 278px !important;
    left: 50% !important;

    width: 86% !important;
    max-width: 360px !important;

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

  /*
   * TOMBOL MASUK DAN FOOTER VERSI
   * sengaja TIDAK diubah.
   */
}


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

  body.pelita-login-page:not(.access-page) .login-brand {
    top: 8px !important;
    width: min(36vw, 150px) !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy {
    top: 54px !important;
  }

  body.pelita-login-page:not(.access-page) .login-form::before {
    top: 92px !important;
    height: 136px !important;
  }

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

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

  body.pelita-login-page:not(.access-page) .login-alert {
    top: 236px !important;
  }
}