/* ITCheck - Login CSS (diekstrak dari Styles.txt) */
  :root {
    --ac-blue:   #2563eb;
    --ac-indigo: #4f46e5;
    --ac-radius: 14px;
    --font-base: 15px;
  }
  .login-screen {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: #04141f; /* fallback gelap -- tampil duluan sebelum foto selesai diunduh, hindari kedip putih */
    background-image:
      linear-gradient(rgba(6,15,25,.25), rgba(6,15,25,.35)),
      url('https://i.ibb.co.com/q3pT5v8C/ok1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    background: rgba(17, 24, 39, .65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 2.25rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    animation: loginCardIn .6s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes loginCardIn {
    0%   { opacity: 0; transform: translateY(28px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .login-logo {
    animation: loginLogoPop .6s cubic-bezier(.22,1,.36,1) .15s both;
    box-shadow: 0 8px 24px rgba(37,99,235,.45);
  }
  /* Base styling kotak logo "IT" -- disalin dari dashboard.css karena
     login.php TIDAK memuat dashboard.css (halaman terpisah). Tanpa ini,
     kotak logo tampil kosong/polos di halaman login. */
  .brand-logo-box {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--ac-blue), var(--ac-indigo));
    color: #fff; font-weight: 800; font-size: 1.15rem;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .login-logo { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 16px; }
  @keyframes loginLogoPop {
    0%   { opacity: 0; transform: scale(.4) rotate(-15deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }
  .login-subtitle { color: #94a3b8; font-size: .78rem; }
  .login-field {
    position: relative;
    animation: loginFieldIn .5s ease both;
  }
  .login-field:nth-of-type(1) { animation-delay: .22s; }
  .login-field:nth-of-type(2) { animation-delay: .3s; }
  @keyframes loginFieldIn {
    0%   { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .login-field-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #64748b; font-size: 1rem; transition: color .2s;
    pointer-events: none;
  }
  .login-field-toggle {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: #64748b; font-size: .95rem; cursor: pointer; transition: color .2s;
  }
  .login-field-toggle:hover { color: #cbd5e1; }
  .login-input {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    color: #f1f5f9;
    border-radius: 10px;
    padding: .7rem 2.6rem;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .login-input::placeholder { color: #64748b; }
  .login-input:focus {
    outline: none;
    background: rgba(255,255,255,.08);
    border-color: var(--ac-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
  }
  .login-field:focus-within .login-field-icon { color: var(--ac-blue); }
  .login-error {
    color: #fca5a5;
    font-size: .78rem;
    background: rgba(248,113,113,.12);
    border: 1px solid rgba(248,113,113,.3);
    border-radius: 8px;
    padding: .5rem .75rem;
    animation: loginShake .4s ease;
  }
  @keyframes loginShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
  }
  .login-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: .75rem;
    font-weight: 800;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-indigo));
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: background-position .35s ease, transform .15s ease, box-shadow .25s ease;
    box-shadow: 0 8px 20px rgba(37,99,235,.35);
    animation: loginFieldIn .5s ease .38s both;
  }
  .login-btn:hover:not(:disabled) {
    background-position: 100% 0%;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37,99,235,.5);
  }
  .login-btn:active:not(:disabled) { transform: translateY(0); }
  .login-btn:disabled { opacity: .75; cursor: default; }
  .login-btn-spinner .spinner-border { width: 1rem; height: 1rem; }
  .login-footer-text {
    text-align: center; color: #475569; font-size: .68rem;
    animation: loginFieldIn .5s ease .46s both;
  }