/* =========================================================
   PELITA UI/UX 5A1.5 — MOBILE LOGIN REFINE
   - Logo lebih kecil
   - Teks pembuka muncul kembali
   - Box Username/Password lebih kecil & sempit
   - Tombol Masuk + footer bawah tetap seperti 5A1.4
   - HANYA MOBILE (<900px)
   ========================================================= */

@media (max-width: 899px) {

  body.pelita-login-page:not(.access-page) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.pelita-login-page:not(.access-page) .login-stage {
    position: relative;
    display: block;
    min-height: 100dvh;
    padding: 0;
  }

  body.pelita-login-page:not(.access-page) .login-panel {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Logo lebih kecil dan tetap di tengah atas tanpa box */
  body.pelita-login-page:not(.access-page) .login-brand {
    position: absolute;
    top: clamp(22px, 3.5vh, 36px);
    left: 50%;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(52vw, 220px);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.pelita-login-page:not(.access-page) .login-brand img {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter:
      brightness(0)
      saturate(100%)
      invert(35%)
      sepia(72%)
      saturate(720%)
      hue-rotate(111deg)
      brightness(86%)
      contrast(94%)
      drop-shadow(0 2px 2px rgba(255,255,255,.45));
  }

  /* Teks pembuka dimunculkan kembali */
  body.pelita-login-page:not(.access-page) .login-copy {
    position: absolute;
    top: clamp(112px, 13.5vh, 138px);
    left: 50%;
    z-index: 7;
    display: block !important;
    width: min(88vw, 380px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
  }

  /* Kicker kecil tetap disembunyikan agar mobile tidak penuh */
  body.pelita-login-page:not(.access-page) .login-copy .login-kicker {
    display: none !important;
  }

  body.pelita-login-page:not(.access-page) .login-copy h1 {
    margin: 0;
    color: #28483b;
    font-size: clamp(1.22rem, 5.8vw, 1.55rem);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(255,255,255,.78);
  }

  body.pelita-login-page:not(.access-page) .login-copy p:not(.login-kicker) {
    margin: 5px 0 0;
    color: #61736a;
    font-size: .72rem;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(255,255,255,.88);
  }

  body.pelita-login-page:not(.access-page) .login-flow-note {
    display: none !important;
  }

  /* Form hanya menjadi positioning context */
  body.pelita-login-page:not(.access-page) .login-form {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /*
   * Box field dibuat lebih kecil:
   * - lebar maksimum 340px
   * - tinggi lebih pendek
   * - centered
   */
  body.pelita-login-page:not(.access-page) .login-form::before {
    content: "";
    position: absolute;
    top: clamp(190px, 23vh, 220px);
    left: 50%;
    width: min(82vw, 340px);
    height: 132px;
    z-index: -1;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 21px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(28,76,57,.12);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
  }

  body.pelita-login-page:not(.access-page) .login-field {
    position: absolute;
    left: 50%;
    width: min(74vw, 306px);
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
  }

  body.pelita-login-page:not(.access-page) .login-field:nth-of-type(1) {
    top: calc(clamp(190px, 23vh, 220px) + 13px);
  }

  body.pelita-login-page:not(.access-page) .login-field:nth-of-type(2) {
    top: calc(clamp(190px, 23vh, 220px) + 72px);
  }

  body.pelita-login-page:not(.access-page) .login-field > label {
    display: none;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input {
    width: 100%;
    min-height: 50px;
    padding: 10px 43px 10px 40px;
    border: 1px solid #d9e4df;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    color: #31453c;
    font-size: 16px;
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap input:focus {
    border-color: #61bd99;
    box-shadow: 0 0 0 3px rgba(15,142,102,.09);
  }

  body.pelita-login-page:not(.access-page) .login-input-wrap > i {
    left: 14px;
    color: #6d9384;
    font-size: 1rem;
  }

  body.pelita-login-page:not(.access-page) .password-toggle {
    right: 7px;
    width: 36px;
    height: 36px;
  }

  /* Bagian bawah dipertahankan */
  body.pelita-login-page:not(.access-page) .login-submit {
    position: absolute;
    right: 18px;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    left: 18px;
    min-height: 56px;
    margin: 0;
    border-radius: 17px;
    font-size: 0;
    box-shadow: 0 14px 28px rgba(15,142,102,.22);
  }

  body.pelita-login-page:not(.access-page) .login-submit span {
    display: none;
  }

  body.pelita-login-page:not(.access-page) .login-submit::before {
    content: "Masuk";
    font-size: .84rem;
    font-weight: 800;
  }

  body.pelita-login-page:not(.access-page) .login-submit > i {
    font-size: .84rem;
  }

  body.pelita-login-page:not(.access-page) .login-footer {
    position: absolute;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 18px;
    z-index: 8;
    display: block;
    margin: 0;
    color: #6d7e76;
    font-size: 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255,255,255,.92);
  }

  body.pelita-login-page:not(.access-page) .login-footer span {
    display: none !important;
  }

  body.pelita-login-page:not(.access-page) .login-footer::after {
    content: "Versi 4.00 • Pelita Elektronik Absensi";
    font-size: .58rem;
    font-weight: 600;
  }

  body.pelita-login-page:not(.access-page) .login-alert {
    position: absolute;
    top: calc(clamp(190px, 23vh, 220px) + 142px);
    left: 50%;
    width: min(82vw, 340px);
    z-index: 9;
    margin: 0;
    transform: translateX(-50%);
    border-radius: 14px;
    background: rgba(255,242,243,.96);
    box-shadow: 0 8px 22px rgba(80,45,49,.08);
  }
}

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

  body.pelita-login-page:not(.access-page) .login-brand {
    top: 12px;
    width: min(46vw, 190px);
  }

  body.pelita-login-page:not(.access-page) .login-copy {
    top: 92px;
    width: min(88vw, 340px);
  }

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

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

  body.pelita-login-page:not(.access-page) .login-form::before {
    top: 148px;
    width: min(82vw, 326px);
    height: 124px;
  }

  body.pelita-login-page:not(.access-page) .login-field {
    width: min(73vw, 292px);
  }

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

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

  body.pelita-login-page:not(.access-page) .login-input-wrap input {
    min-height: 46px;
  }

  body.pelita-login-page:not(.access-page) .login-submit {
    right: 12px;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    min-height: 50px;
  }

  body.pelita-login-page:not(.access-page) .login-footer {
    bottom: calc(13px + env(safe-area-inset-bottom, 0px));
  }

  body.pelita-login-page:not(.access-page) .login-alert {
    top: 280px;
    width: min(82vw, 326px);
  }
}

.login-form::before {
  top: clamp(150px, 20vh, 200px);
  left: 50%;
  width: min(74vw, 300px);
  height: 116px;
  transform: translateX(-50%);
}

.login-field {
  left: 50%;
  width: min(66vw, 270px);
  transform: translateX(-50%);
}

.login-field:nth-of-type(1) {
  top: calc(clamp(190px, 23vh, 220px) + 11px);
}

.login-field:nth-of-type(2) {
  top: calc(clamp(190px, 23vh, 220px) + 62px);
}

.login-input-wrap input {
  min-height: 44px;
}