/* ================================
   LOGIN PAGE – Match mockup
   ================================ */

/* ---- Base page ---- */
.login-page{
  --navy:#0f1b2d;            /* background halaman */
  --card:#ffffff;            /* warna kartu */
  --ink:#0f172a;             /* teks utama */
  --muted:#6b7280;           /* teks sekunder */
  --blue:#3b82f6;            /* fokus biru */
  --blue-300:#93c5fd;        /* border biru lembut */
  --blue-600:#2563eb;
  --ring: 0 0 0 3px rgba(59,130,246,.15);
  --radius:18px;

  background: var(--navy);
  color:#fff;
  min-height:100vh;

  /* center wrapper */
  display:flex; align-items:center; justify-content:center;
  padding:64px 16px;
}

/* ---- Card ---- */
.login-page .auth-card{
  background: var(--card);
  border:0 !important;
  border-radius:24px !important;
  box-shadow: 0 20px 50px rgba(2,6,23,.35);

  /* FIX: batasi lebar kartu biar tidak super sempit/tinggi */
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.login-page .card-body{ padding:48px !important; }

/* ---- Heading ---- */
.login-page .auth-title{
  color:#2f6ebf;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  letter-spacing:.2px;
  margin:0;
  white-space: normal;     /* FIX: jangan pecah per huruf */
  word-break: normal;
}
.login-page .auth-subtitle{ color:#4b5563; margin:4px 0 0; }

/* ---- Label ---- */
.login-page .form-label{ color:#111827; font-weight:600; }

/* ---- Input Group with left icon ---- */
.login-page .input-group{ height:48px; }
.login-page .input-group-text{
  background:#f8fafc;
  border:1px solid var(--blue-300);
  border-right:0;
  color:#64748b;
  border-radius:12px 0 0 12px !important;
  display:flex; align-items:center; padding:0 14px;
}
.login-page .form-control{
  background:#ffffff;
  border:1px solid var(--blue-300);
  border-left:0;
  color:#0f172a;
  border-radius:0 12px 12px 0 !important;
  height:48px;
  padding-left:12px;
}
.login-page .form-control::placeholder{ color:#9ca3af; }
.login-page .form-control:focus{ border-color: var(--blue); box-shadow: var(--ring); }

/* ---- Eye / toggle button ---- */
#togglePassword{
  border:1px solid var(--blue-300);
  border-left:0;
  background:#e5e7eb;
  color:#0f172a;
  border-radius:0 12px 12px 0 !important;
  height:48px;
  padding:0 14px;
}
#togglePassword:hover{ background:#d1d5db; }

/* ---- Checkbox square ---- */
.login-page .form-check-input{
  width:20px; height:20px; margin-top:.15rem;
  border:2px solid var(--blue-300);
  border-radius:6px;
}
.login-page .form-check-input:checked{
  background-color:var(--blue);
  border-color:var(--blue);
  box-shadow: var(--ring);
}
.login-page .form-check-label{ color:#111827; }

/* ---- Gradient Login button ---- */
.login-page .btn-primary{
  border:0;
  height:52px;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:12px;
  color:#fff;
  background: linear-gradient(90deg, #67a0ff 0%, #2b62a6 100%);
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}
.login-page .btn-primary i{ font-size:1.2rem; }
.login-page .btn-primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(90deg, #5b97ff 0%, #254e84 100%);
}

/* ---- Outline button ---- */
.login-page .btn-outline-primary{
  height:44px; border-radius:10px;
  color:#2f6ebf; border:1px solid #bfd6ff; background:#fff;
}
.login-page .btn-outline-primary:hover{
  background:#eaf1ff; border-color:#9fc2ff; color:#235dac;
}

/* ---- Link Lupa Password ---- */
.login-page .btn-link{ color:#2f6ebf; text-decoration:none; }
.login-page .btn-link:hover{ color:#235dac; text-decoration:underline; }

/* ---- Alerts ---- */
.login-page .alert{ border-radius:10px; }

/* =======================================================
   FIX UTAMA: cegah wrapper Bootstrap menyusut (shrink)
   ======================================================= */
.login-page .main-content{ width:100%; }
.login-page .container{
  width:100%;
  max-width:1140px;      /* bisa dinaikkan ke 1320px jika mau */
  margin-left:auto; margin-right:auto;
}
.login-page .row{ width:100%; }
.login-page .row > [class^="col-"],
.login-page .row > [class*=" col-"]{
  flex: 0 0 auto;        /* jangan di-shrink oleh flexbox */
}

/* ---- Responsive ---- */
@media (max-width: 576px){
  .login-page{ padding:32px 12px; }
  .login-page .card-body{ padding:28px !important; }
}

@media (min-width: 768px){
  .login-page{ padding:72px 24px; }
  .login-page .card-body{ padding:56px !important; }
}

@media (min-width: 1200px){
  .login-page{ padding-top:100px; padding-bottom:100px; }
  .login-page .card-body{ padding:64px !important; }
}