/* Layout khusus halaman login. Komponen (field, input, button) dari components.css. */

body.login-page {
  /* Titik halus + gradasi tint biru sangat tipis di kiri atas (artboard 1). */
  background-image:
    radial-gradient(circle, var(--color-border-control) 1px, transparent 1.2px),
    linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-bg) 55%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed;
}

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-32) var(--space-16);
}

.login__card {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.login__logo {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-16);
  border-radius: var(--radius-card);
}
.login__logo svg { width: 24px; height: 24px; }

.login__title { margin-bottom: var(--space-32); text-align: center; }

.login__form { display: flex; flex-direction: column; gap: var(--space-20); }
.login__form .btn { margin-top: var(--space-4); }

.login__footer {
  margin-top: var(--space-24);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-tertiary);
}

@media (max-width: 440px) {
  .login__card { padding: var(--space-32) var(--space-24); }
}