/* Komponen: Halaman login — gaya referensi #1 (login.png):
   panel brand biru royal + kartu putih mengambang menimpa batas panel. */
.login-wrap { display: flex; min-height: 100vh; }

/* ---------- Panel brand (kiri) ---------- */
.login-brand {
    flex: 1 1 44%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
  background: var(--sidebar-bg-solid); /* fallback */
  background: var(--sidebar-bg);       /* senada sidebar app */
}
.login-brand .brand-logo { background: #fff; }
.login-brand .brand-name, .login-brand .brand-sub { color: #fff; }
.login-brand .brand-sub { opacity: .8; }
.login-brand h2 {
  margin: 0 0 26px; font-size: 30px; font-weight: 800; line-height: 1.3;
  letter-spacing: -.02em; max-width: 16ch; text-wrap: balance;
}
.login-brand .foot { font-size: 12px; opacity: .7; }

/* Daftar fitur (jualan produk) */
.login-feats { display: flex; flex-direction: column; gap: 14px; }
.login-feats .feat { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; }
.login-feats .feat .fico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
}
.login-feats .feat .fico svg { width: 16px; height: 16px; }

/* ---------- Panel form (kanan) + kartu mengambang ---------- */
.login-panel {
  flex: 1 1 56%;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 28px;
  background: var(--page-bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 34px 32px;
  position: relative; z-index: 1;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.login-card .sub { margin: 0 0 22px; font-size: 13px; color: var(--muted); }
.login-card .foot { margin-top: 22px; font-size: 12px; color: var(--muted); text-align: center; }

@media (min-width: 992px) {
  /* Kartu menimpa batas panel biru (ciri khas referensi #1) */
  .login-card { margin-left: -130px; }
}
@media (max-width: 860px) {
  .login-brand { display: none; }
  .login-panel { width: 100%; }
  .login-card { box-shadow: var(--shadow-card); }
}