.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.login__promosi {
  background: linear-gradient(135deg, #071227 0%, #0a1a33 45%, #10285c 100%);
  color: #fff; padding: 48px; display: flex; flex-direction: column; gap: 24px;
}
.login__merek { display: flex; align-items: center; gap: 12px; }
.login__merek-nama { font-size: calc(26px * var(--skala-font)); font-weight: 800; }
.login__merek-nama em { color: var(--accent); font-style: normal; }
.login__merek-sub { font-size: calc(12px * var(--skala-font)); color: var(--text-subtle); }

.login__pil {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22, 163, 74, .15); color: #4ade80;
  border-radius: 8px; padding: 8px 14px; font-size: calc(13px * var(--skala-font));
}
.login__judul { font-size: calc(44px * var(--skala-font)); line-height: 1.15; margin: 0; font-weight: 800; }
.login__judul em { color: var(--accent); font-style: normal; }
.login__paragraf { color: #cbd5e1; max-width: 460px; line-height: 1.7; margin: 0; }

.login__fitur { list-style: none; display: flex; gap: 32px; padding: 0; margin: 8px 0 0; }
.login__fitur li { display: flex; flex-direction: column; gap: 10px; font-size: calc(13px * var(--skala-font)); }
.login__fitur-ikon {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); display: grid; place-items: center;
}
.login__fitur-ikon--biru { color: #60a5fa; }
.login__fitur-ikon--hijau { color: #4ade80; }
.login__fitur-ikon--ungu { color: #c4b5fd; }
.login__fitur-ikon--jingga { color: #fdba74; }

.login__panel {
  display: grid; place-items: center; padding: 48px; background: var(--bg);
  align-content: center; gap: 20px;
}
.login__kartu {
  width: 100%; max-width: 440px; background: var(--surface);
  border-radius: 16px; box-shadow: 0 8px 30px rgba(16, 24, 40, .08); padding: 40px;
}
.login__kartu-logo { display: block; margin: 0 auto 20px; }
.login__sapaan { text-align: center; font-size: calc(24px * var(--skala-font)); margin: 0 0 6px; }
.login__subsapaan { text-align: center; color: var(--text-muted); margin: 0 0 28px; }

.login__label { display: block; font-size: calc(13px * var(--skala-font)); font-weight: 500; margin: 16px 0 6px; }
.login__isian-bungkus { position: relative; }
.login__isian {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-kontrol); font-size: calc(14px * var(--skala-font));
}
.login__isian--berikon { padding-left: 40px; }
.login__isian--bermata { padding-right: 40px; }
.login__isian-ikon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none;
}
.login__isian-mata {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--text-subtle); display: flex; align-items: center;
}
.login__isian-mata-ikon { width: 18px; height: 18px; }
.login__galat { color: var(--bahaya-fg); font-size: calc(12px * var(--skala-font)); margin: 6px 0 0; }
.login__baris {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 22px; font-size: calc(13px * var(--skala-font));
}
.login__tombol { width: 100%; justify-content: center; }
.login__pemisah {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: calc(13px * var(--skala-font)); margin: 22px 0;
}
.login__pemisah::before, .login__pemisah::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.login__kaki { text-align: center; color: var(--text-muted); font-size: calc(13px * var(--skala-font)); margin: 24px 0 0; }

.login__jaminan {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--sukses-fg); font-size: calc(13px * var(--skala-font)); margin: 0;
}
.login__hak-cipta { text-align: center; color: var(--text-subtle); font-size: calc(12px * var(--skala-font)); margin: 0; }

@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; }
  .login__promosi { display: none; }
}