/* Giriş ekranı (auth.js): stil kolajı + metin grubu + form; kod adımında 6 hücre. */
.login { min-height: 100dvh; display: flex; flex-direction: column; }
.login-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1-5); height: 34dvh; min-height: 180px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.login-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.login-collage img:nth-child(n+4) { display: none; }
.login-body { width: 100%; max-width: 460px; margin: 0 auto; padding: var(--sp-4) var(--gutter-r) var(--sp-10) var(--gutter-l); display: flex; flex-direction: column; gap: var(--sp-4); }
.login-body.is-code { padding-top: max(var(--sp-2), env(safe-area-inset-top)); }
.login-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.login-legal { font-size: var(--fs-sm); color: var(--c-text-3); }
.login-legal a, .login-app a { color: var(--c-text-2); text-underline-offset: var(--underline-offset); display: inline-block; padding: var(--sp-2) 0; }
.login-app { font-size: var(--fs-sm); }
.login-env { margin-top: var(--sp-4); }
.code-field { position: relative; display: block; }
.code-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; }
.code-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); pointer-events: none; }
.code-cells span { display: grid; place-items: center; height: 58px; border-radius: var(--r-md); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); font-size: 1.625rem; font-weight: var(--fw-semibold); }
.code-cells span.is-active { border: var(--bw-2) solid var(--c-light); }
.code-status { color: var(--c-text-3); font-size: var(--fs-sm); min-height: var(--tap); display: flex; align-items: center; }
.link-btn { color: var(--c-text); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: var(--underline-offset); min-height: var(--tap); }
@media (min-width: 900px) {
  .login { flex-direction: row; }
  .login-collage { order: 2; flex: 1; height: 100dvh; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); padding: var(--sp-4); -webkit-mask-image: none; mask-image: none; }
  .login-collage img:nth-child(n+4) { display: block; }
  .login-body { justify-content: center; min-height: 100dvh; flex: 0 0 520px; padding: var(--sp-10) var(--sp-12); }
}