/* =========================
   AUTH LOGIN (Split Layout)
   NADIA-like (Clean)
   ========================= */

   :root{
    --teal1:#0ea5e9;
    --teal2:#0d9488;
    --ring:rgba(14,165,233,.18);
  
    --panel-w: min(560px, 92vw);
    --panel-top: clamp(8px, 2.2vh, 18px);
  
    --gap: clamp(10px, 2vh, 16px);
    --title: clamp(18px, 2.2vw, 22px);
    --sub: clamp(12px, 1.3vw, 14px);
  
    /* logo fallback (dioverride dari login.php) */
    --logo-simap-h: 88px;
    --logo-ij-h: 74px;
    --logo-gap: 12px;
  }
  
  body.authentication-bg{
    background:#fff;
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
  }
  
  /* Split layout */
  .auth-split{
    min-height:100vh;
    width:100%;
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    background:#fff;
  }
  
  /* LEFT HERO */
  .auth-split__hero{
    position:relative;
    overflow:hidden;
    background: var(--hero-img) center/cover no-repeat;
  }
  
  /* Fade putih ke kanan (halus) — hanya di HERO, jadi tidak ganggu form */
  .auth-split__hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.18) 64%,
      rgba(255,255,255,.55) 78%,
      rgba(255,255,255,.85) 90%,
      rgba(255,255,255,1) 100%
    );
  }
  
  /* overlay radial */
  .auth-split__hero-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:
      radial-gradient(240px 240px at 20% 20%, rgba(14,165,233,.14), transparent 60%),
      radial-gradient(320px 320px at 70% 10%, rgba(13,148,136,.12), transparent 60%);
  }
  
  /* RIGHT PANEL */
  .auth-split__panel{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  
    padding: clamp(18px, 3vw, 42px);
    padding-top: var(--panel-top);
  
    background: url("https://nadia.injourneyairports.id/assets/components/kit/core/img/bg-general.jpg")
                center/cover no-repeat;
  }
  
  /* overlay putih untuk readability */
  .auth-split__panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(900px 900px at 60% 14%,
        rgba(255,255,255,.92),
        rgba(255,255,255,.72) 55%,
        rgba(255,255,255,.55) 100%
      ),
      linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.42));
  }
  
  /* fade kiri panel kanan biar sambungan makin halus (di belakang konten) */
  .auth-split__panel::after{
    content:"";
    position:absolute;
    top:0;
    left:-1px;
    width: clamp(140px, 12vw, 240px);
    height:100%;
    pointer-events:none;
    z-index:1;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.35) 55%,
      rgba(255,255,255,0) 100%
    );
  }
  
  /* isi panel di atas overlay */
  .auth-panel-inner{
    position:relative;
    z-index:2;
    width: var(--panel-w);
    max-height: calc(100vh - 24px);
    overflow:auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    scrollbar-width: thin;
  }
  
  /* Logos */
  .sl-logos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: var(--logo-gap);
    margin: 0 0 8px; /* rapatkan */
  }
  .sl-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    object-fit:contain;
  }
  .sl-logo--simap{ max-height: var(--logo-simap-h); }
  .sl-logo--ij{ max-height: var(--logo-ij-h); opacity:.95; }
  
  /* Title */
  .sl-title{
    font-size: var(--title);
    font-weight: 800;
    color:#111827;
    text-align:center;
    margin: 0 0 12px;
  }
  
  /* Form */
  .auth-form{ margin:0; }
  .form-group{ margin-bottom: 14px; }
  .sl-label{
    font-weight:600;
    color:#374151;
    margin-bottom: 6px;
  }
  
  /* Input */
  .sl-field{ position:relative; }
  
  .sl-icon{
    position:absolute;
    left:.8rem;
    top:50%;
    transform:translateY(-50%);
    width:1.6rem;
    height:1.6rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6b7280;
    pointer-events:none;
  }
  
  .sl-field .form-control{
    border-radius:12px;
    background: rgba(255,255,255,.95);
    border:1px solid rgba(148,163,184,.45) !important;
    padding-left:2.6rem;
    padding-right:3rem;
    height:48px;
    box-shadow:none !important;
  }
  
  .sl-field .form-control:focus{
    border-color:var(--teal1) !important;
    box-shadow:0 0 0 6px var(--ring) !important;
  }
  
  .sl-toggle{
    position:absolute;
    right:.6rem;
    top:50%;
    transform:translateY(-50%);
    border-radius:10px;
    padding:.25rem .45rem;
  }
  .sl-toggle [data-feather]{ width:16px; height:16px; }
  
  /* Button */
  .sl-btn-primary{
    background:linear-gradient(135deg,var(--teal1),var(--teal2));
    border:0;
    border-radius:12px;
    color:#fff;
    box-shadow:0 10px 20px rgba(13,148,136,.22);
  }
  .sl-btn-primary:hover{ filter:brightness(1.02); }
  
  /* Mini footer */
  .auth-mini-footer{
    text-align:center;
    margin-top: 12px;
    color:#64748b;
    font-size: 12.5px;
    line-height: 1.5;
  }
  
  /* Responsive */
  @media (max-width: 991.98px){
    .auth-split{ grid-template-columns: 1fr; }
    .auth-split__hero{ display:none; }
    .auth-split__panel{
      align-items:center;
      padding: 18px 14px;
      padding-top: 18px;
      background:#fff;
    }
    .auth-split__panel::before,
    .auth-split__panel::after{
      display:none;
    }
    .auth-panel-inner{
      max-height:none;
      overflow:visible;
    }
  }
  
  @media (max-width: 575.98px){
    :root{
      --logo-simap-h: 72px;
      --logo-ij-h: 64px;
      --logo-gap: 10px;
    }
  }