/* Nexora LMS — kimlik doğrulama sayfaları (giriş, kayıt, şifre işlemleri).
   Düzen: sol tarafta lacivert "defter ızgarası" tanıtım paneli, sağda sade form sütunu.
   Koyu tema bu dosyada elle tanımlanır (gen_dark.py ile üretilmez). */

.auth-shell {
  --auth-brand: #0d3893;
  --auth-brand-strong: #0a2c76;
  --auth-brand-rgb: 13, 56, 147;
  --auth-navy: #0a1a44;
  --auth-amber: #f2b33d;
  --auth-ink: #111a33;
  --auth-muted: #5d6680;
  --auth-line: #d7deeb;
  --auth-field: #f5f7fc;
  --auth-paper: #ffffff;
  --auth-canvas: #f2f5fb;
  --auth-link: #0d3893;
  --auth-soft: #edf2ff;
  --auth-note-ink: #23407f;
  --auth-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  background: var(--auth-paper);
  color: var(--auth-ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
html[data-bs-theme=dark] .auth-shell {
  --auth-brand: #3d66d6;
  --auth-brand-strong: #5079e6;
  --auth-brand-rgb: 61, 102, 214;
  --auth-navy: #071131;
  --auth-ink: #e8eaf6;
  --auth-muted: #a0a7c0;
  --auth-line: #363c57;
  --auth-field: #21263a;
  --auth-paper: #191d2e;
  --auth-canvas: #141826;
  --auth-link: #93abf3;
  --auth-soft: #232b48;
  --auth-note-ink: #b5c6f6;
}

.auth-page { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ------------------------------------------------------------------ tanıtım paneli */
.auth-aside { display: none; }

@media (min-width: 1100px) {
  .auth-page { grid-template-columns: minmax(440px, 46fr) minmax(0, 54fr); }
  .auth-aside {
    background: radial-gradient(120% 70% at 100% 0%, rgba(61, 102, 214, .38) 0, transparent 60%), var(--auth-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 3rem 3.5rem 2.5rem;
    position: sticky;
    top: 0;
  }
}

/* Defter ızgarası: eğitimin tanıdık zemini, köşelere doğru kaybolur. */
.auth-aside-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 34px 34px;
  inset: 0;
  -webkit-mask-image: radial-gradient(90% 75% at 60% 45%, #000 20%, transparent 80%);
  mask-image: radial-gradient(90% 75% at 60% 45%, #000 20%, transparent 80%);
  pointer-events: none;
  position: absolute;
}
.auth-aside > :not(.auth-aside-grid) { position: relative; }

.auth-aside-brand { align-items: center; display: inline-flex; font-size: .95rem; font-weight: 700; gap: .65rem; letter-spacing: -.01em; }
.auth-aside-brand img { background: #fff; border-radius: 11px; height: 38px; object-fit: contain; padding: 5px; width: 38px; }

.auth-aside-copy { margin-top: auto; }
.auth-aside-copy h2 {
  color: #fff;
  font-family: var(--auth-display);
  font-size: clamp(2.3rem, 3.3vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0 0 1.1rem;
  max-width: 13ch;
}
.auth-aside-copy p { color: rgba(255, 255, 255, .74); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 34ch; }

/* Ürün önizlemesi: öğrencinin gördüğü üç an (ders, sınav, sertifika). */
.auth-preview { height: 15.5rem; margin-bottom: auto; max-width: 30rem; }
.auth-pv {
  align-items: center;
  border-radius: 16px;
  display: flex;
  gap: .85rem;
  padding: .85rem 1rem;
  position: absolute;
}
.auth-pv strong { display: block; font-size: .9rem; font-weight: 700; line-height: 1.25; }
.auth-pv small { display: block; font-size: .76rem; line-height: 1.3; margin-top: .15rem; }
.auth-pv-text { min-width: 0; }

.auth-pv-course {
  background: #fff;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55);
  color: #111a33;
  left: 0;
  top: 0;
  width: min(23rem, 92%);
  z-index: 2;
}
.auth-pv-course small { color: #5d6680; }
.auth-pv-ring {
  --p: 0;
  align-items: center;
  background: conic-gradient(var(--auth-amber) calc(var(--p) * 1%), #e9edf6 0);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  height: 3.25rem;
  justify-content: center;
  position: relative;
  width: 3.25rem;
}
.auth-pv-ring::before { background: #fff; border-radius: 50%; content: ""; inset: 5px; position: absolute; }
.auth-pv-ring b { font-size: .78rem; font-weight: 800; position: relative; }
.auth-pv-play {
  align-items: center; background: #0d3893; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto;
  height: 2.2rem; justify-content: center; margin-left: auto; width: 2.2rem;
}
.auth-pv-exam, .auth-pv-cert {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.auth-pv-exam small, .auth-pv-cert small { color: rgba(255, 255, 255, .7); }
.auth-pv-exam { left: 38%; top: 6.3rem; width: 15rem; z-index: 3; }
.auth-pv-cert { left: 6%; top: 11.1rem; width: 16.5rem; z-index: 1; }
.auth-pv-icon {
  align-items: center; background: rgba(255, 255, 255, .12); border-radius: 11px; display: inline-flex; flex: 0 0 auto;
  font-size: 1.15rem; height: 2.4rem; justify-content: center; width: 2.4rem;
}
.auth-pv-cert .auth-pv-icon { color: var(--auth-amber); }
.auth-pv-check {
  align-items: center; background: var(--auth-amber); border-radius: 50%; color: #3b2600; display: inline-flex; flex: 0 0 auto;
  font-size: .85rem; height: 1.5rem; justify-content: center; margin-left: auto; width: 1.5rem;
}

/* Tek açılış anı: kartlar sırayla yerine oturur. */
@media (prefers-reduced-motion: no-preference) {
  .auth-pv { animation: auth-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .auth-pv-exam { animation-delay: .12s; }
  .auth-pv-cert { animation-delay: .24s; }
  .auth-pv-ring { animation: auth-fill 1.1s .35s ease-out both; }
}
@keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes auth-fill { from { --p: 0; } }

.auth-trust { color: rgba(255, 255, 255, .66); display: flex; flex-wrap: wrap; font-size: .8rem; gap: .5rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.auth-trust li { align-items: center; display: inline-flex; gap: .45rem; }
.auth-trust .ti { color: rgba(255, 255, 255, .85); font-size: 1rem; }

/* ------------------------------------------------------------------ form sütunu */
.auth-main { background: var(--auth-paper); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 2.5rem 1.25rem; }
.auth-top { align-items: center; display: flex; justify-content: space-between; }
.auth-logo { display: inline-flex; }
.auth-logo img { display: block; height: 40px; width: auto; }
html[data-bs-theme=dark] .auth-logo img { filter: brightness(0) invert(1); opacity: .92; }
.auth-top-brand { display: none; }
.auth-theme-toggle {
  align-items: center; position: static; background: transparent; border: 1px solid var(--auth-line); border-radius: 12px; color: var(--auth-muted);
  cursor: pointer; display: inline-flex; height: 40px; justify-content: center; width: 40px;
}
.auth-theme-toggle:hover { border-color: rgba(var(--auth-brand-rgb), .45); color: var(--auth-ink); }
.auth-theme-toggle .ti { font-size: 1.15rem; }

.auth-card { margin: auto; max-width: 400px; padding: 2.5rem 0; width: 100%; }
.auth-card.auth-card-wide { max-width: 540px; }

.auth-title {
  color: var(--auth-ink);
  font-family: var(--auth-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 .55rem;
}
.auth-subtitle { color: var(--auth-muted); font-size: .97rem; line-height: 1.55; margin: 0 0 2rem; max-width: 40ch; }

.auth-shell .form-label { color: var(--auth-ink); font-size: .84rem; font-weight: 650; margin-bottom: .45rem; }
.auth-label-row { align-items: baseline; display: flex; justify-content: space-between; gap: 1rem; }
.auth-label-row .form-label { margin-bottom: .45rem; }

.auth-shell .form-control,
.auth-shell .form-select {
  background-color: var(--auth-field);
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--auth-ink);
  font-size: .97rem;
  min-height: 52px;
  padding-left: 1rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.auth-shell .form-control::placeholder { color: var(--auth-muted); opacity: .75; }
.auth-shell .form-control:hover,
.auth-shell .form-select:hover { border-color: var(--auth-line); }
.auth-shell .form-control:focus,
.auth-shell .form-select:focus {
  background-color: var(--auth-paper);
  border-color: var(--auth-brand);
  box-shadow: 0 0 0 4px rgba(var(--auth-brand-rgb), .13);
  color: var(--auth-ink);
}
.auth-shell .form-control.is-invalid { border-color: #d92d20; }
html[data-bs-theme=dark] .auth-shell .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a7c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* Başında simge olan alanlar */
.auth-input { position: relative; }
.auth-input > .ti {
  color: var(--auth-muted); font-size: 1.15rem; left: 1rem; pointer-events: none; position: absolute; top: 50%;
  transform: translateY(-50%); transition: color .15s; z-index: 2;
}
.auth-input > .form-control, .auth-input > .form-select { padding-left: 2.85rem; }
.auth-input:focus-within > .ti { color: var(--auth-brand); }
html[data-bs-theme=dark] .auth-input:focus-within > .ti { color: var(--auth-link); }

.auth-field { margin-bottom: 1.15rem; }
.auth-grid { display: grid; gap: 0 .9rem; grid-template-columns: 1fr 1fr; }

.auth-password { position: relative; }
.auth-password .form-control { padding-right: 3.2rem; }
.auth-password-toggle {
  align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--auth-muted); display: inline-flex;
  height: 2.5rem; justify-content: center; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 2.5rem; z-index: 2;
}
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { background: var(--auth-soft); color: var(--auth-link); outline: none; }
.auth-password-toggle .ti { font-size: 1.15rem; }
.auth-caps { align-items: center; color: #b42318; display: none; font-size: .8rem; font-weight: 600; gap: .35rem; margin-top: .45rem; }
.auth-caps.is-visible { display: flex; }
html[data-bs-theme=dark] .auth-caps { color: #f19a91; }

.auth-row { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin: .1rem 0 1.6rem; min-height: .5rem; }
.auth-shell .form-check-input { border-color: var(--auth-line); height: 1.15rem; margin-top: .15rem; width: 1.15rem; }
.auth-shell .form-check-input:checked { background-color: var(--auth-brand); border-color: var(--auth-brand); }
.auth-shell .form-check-input:focus { box-shadow: 0 0 0 4px rgba(var(--auth-brand-rgb), .15); }
.auth-shell .form-check-label { color: var(--auth-ink); font-size: .88rem; }
.auth-hint { color: var(--auth-muted); font-size: .78rem; margin-left: .25rem; }

.auth-link { color: var(--auth-link); font-weight: 650; text-decoration: none; }
.auth-link:hover { color: var(--auth-link); text-decoration: underline; text-underline-offset: 3px; }
.auth-shell :focus-visible { outline: 2px solid var(--auth-brand); outline-offset: 2px; }
.auth-shell .form-control:focus-visible, .auth-shell .form-select:focus-visible { outline: none; }

.auth-submit {
  align-items: center;
  background: var(--auth-brand);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 28px -14px rgba(var(--auth-brand-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: #fff;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  gap: .55rem;
  justify-content: center;
  min-height: 54px;
  transition: background .15s, transform .08s, box-shadow .15s;
  width: 100%;
}
.auth-submit:hover, .auth-submit:focus-visible { background: var(--auth-brand-strong); color: #fff; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { color: #fff; opacity: .85; }
.auth-submit.is-busy::before {
  animation: auth-spin .7s linear infinite; border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; border-top-color: #fff;
  content: ""; height: 1rem; width: 1rem;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-secondary {
  align-items: center; background: transparent; border: 1px solid var(--auth-line); border-radius: 14px; color: var(--auth-ink); display: inline-flex;
  font-size: .95rem; font-weight: 650; gap: .5rem; justify-content: center; min-height: 50px; width: 100%;
}
.auth-secondary:hover, .auth-secondary:focus-visible { background: var(--auth-soft); border-color: rgba(var(--auth-brand-rgb), .4); color: var(--auth-ink); }
.auth-secondary .ti { color: var(--auth-link); font-size: 1.1rem; }

.auth-divider { align-items: center; color: var(--auth-muted); display: flex; font-size: .83rem; gap: .9rem; margin: 1.75rem 0 1rem; }
.auth-divider::before, .auth-divider::after { background: var(--auth-line); content: ""; flex: 1; height: 1px; }

.auth-switch { color: var(--auth-muted); font-size: .9rem; margin: 1.75rem 0 0; text-align: center; }
.auth-switch .ti { font-size: 1rem; vertical-align: -.15em; }

.auth-note {
  align-items: flex-start; background: var(--auth-soft); border-radius: 13px; color: var(--auth-note-ink); display: flex; font-size: .85rem;
  gap: .65rem; line-height: 1.5; margin: 0 0 1.35rem; padding: .85rem 1rem;
}
.auth-note .ti { flex: 0 0 auto; font-size: 1.15rem; margin-top: .05rem; }
.auth-note-warn { background: #fff4e0; color: #7a4300; }
.auth-note-warn .ti { color: #b25e00; }
html[data-bs-theme=dark] .auth-note-warn { background: #3d3122; color: #f2c58a; }
html[data-bs-theme=dark] .auth-note-warn .ti { color: #f2b25d; }

/* ------------------------------------------------------------------ hesap türü seçimi */
.auth-roles { border: 0; margin: 0 0 1.4rem; padding: 0; }
.auth-roles legend { color: var(--auth-ink); float: none; font-size: .84rem; font-weight: 650; margin-bottom: .5rem; padding: 0; }
.auth-role-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.auth-role { position: relative; }
.auth-role input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.auth-role label {
  background: var(--auth-paper); border: 1.5px solid var(--auth-line); border-radius: 15px; cursor: pointer; display: flex; flex-direction: column;
  gap: .55rem; height: 100%; padding: .9rem .95rem; position: relative; transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-role label:hover { border-color: rgba(var(--auth-brand-rgb), .45); }
.auth-role-icon {
  align-items: center; background: var(--auth-soft); border-radius: 11px; color: var(--auth-link); display: inline-flex; font-size: 1.2rem;
  height: 2.4rem; justify-content: center; width: 2.4rem;
}
.auth-role-text strong { color: var(--auth-ink); display: block; font-size: .92rem; font-weight: 700; }
.auth-role-text span { color: var(--auth-muted); display: block; font-size: .78rem; line-height: 1.4; margin-top: .1rem; }
.auth-role-check {
  align-items: center; border: 1.5px solid var(--auth-line); border-radius: 50%; color: transparent; display: inline-flex; font-size: .75rem;
  height: 1.3rem; justify-content: center; position: absolute; right: .75rem; top: .75rem; transition: all .15s; width: 1.3rem;
}
.auth-role input:checked + label { background: var(--auth-soft); border-color: var(--auth-brand); box-shadow: 0 10px 24px -16px rgba(var(--auth-brand-rgb), .7); }
.auth-role input:checked + label .auth-role-icon { background: var(--auth-brand); color: #fff; }
.auth-role input:checked + label .auth-role-check { background: var(--auth-brand); border-color: var(--auth-brand); color: #fff; }
.auth-role input:focus-visible + label { outline: 2px solid var(--auth-brand); outline-offset: 2px; }

.auth-consent { align-items: flex-start; display: flex; gap: .6rem; padding-left: 0; }
.auth-consent .form-check-input { flex: 0 0 auto; float: none; margin-left: 0; }
.auth-consent .form-check-label { color: var(--auth-muted); font-size: .82rem; line-height: 1.5; }

.auth-closed { text-align: center; }
.auth-closed > .ti {
  align-items: center; background: var(--auth-soft); border-radius: 18px; color: var(--auth-link); display: inline-flex; font-size: 1.9rem;
  height: 4rem; justify-content: center; width: 4rem;
}
.auth-closed .auth-subtitle { margin-left: auto; margin-right: auto; }

.auth-shell .form-text { font-size: .78rem; margin-top: .4rem; }

/* ------------------------------------------------------------------ kurum hesabıyla giriş (SSO) */
.auth-sso { display: grid; gap: .65rem; }
.auth-sso-btn {
  align-items: center; background: var(--auth-paper); border: 1.5px solid var(--auth-line); border-radius: 14px; color: var(--auth-ink);
  display: flex; font-size: .97rem; font-weight: 650; gap: .7rem; justify-content: center; min-height: 52px; padding: .6rem 1rem;
  text-decoration: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-sso-btn:hover, .auth-sso-btn:focus-visible { background: var(--auth-soft); border-color: rgba(var(--auth-brand-rgb), .45); color: var(--auth-ink); }
.auth-sso-btn .ti { font-size: 1.3rem; }
.auth-sso-btn.kind-microsoft .ti { color: #0078d4; }
.auth-sso-btn.kind-google .ti { color: #ea4335; }
.auth-sso-btn.kind-oidc .ti { color: var(--auth-link); }
html[data-bs-theme=dark] .auth-sso-btn.kind-microsoft .ti { color: #4aa3ef; }
html[data-bs-theme=dark] .auth-sso-btn.kind-google .ti { color: #f28b82; }
.auth-sso-btn.is-hint { border-color: var(--auth-brand); box-shadow: 0 0 0 4px rgba(var(--auth-brand-rgb), .13); }
.auth-sso-btn.is-busy { opacity: .7; pointer-events: none; }
.auth-sso-btn.is-busy::after {
  animation: auth-spin .7s linear infinite; border: 2px solid var(--auth-line); border-radius: 50%; border-top-color: var(--auth-brand);
  content: ""; height: 1rem; width: 1rem;
}
.auth-sso + .auth-divider { margin: 1.4rem 0 1.25rem; }

/* ------------------------------------------------------------------ iki adımlı doğrulama */
.auth-mfa-icon {
  align-items: center; background: var(--auth-soft); border-radius: 18px; color: var(--auth-link); display: inline-flex; font-size: 1.75rem;
  height: 3.6rem; justify-content: center; margin-bottom: 1.1rem; width: 3.6rem;
}
.auth-mfa-icon.is-success { background: #e6f6ee; color: #12805c; }
html[data-bs-theme=dark] .auth-mfa-icon.is-success { background: #17372b; color: #6fd3a8; }
.auth-subtitle b { color: var(--auth-ink); font-weight: 650; }

.auth-otp {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.65rem !important; font-variant-numeric: tabular-nums;
  font-weight: 700; letter-spacing: .45em; padding: .8rem 1rem !important; text-align: center; text-indent: .45em;
}
.auth-otp::placeholder { color: var(--auth-muted); letter-spacing: .45em; opacity: .35 !important; }
.auth-otp.is-recovery { font-size: 1.2rem !important; letter-spacing: .12em; text-indent: .12em; }
.auth-otp.is-recovery::placeholder { letter-spacing: .12em; }

.auth-inline-btn {
  align-items: center; background: none; border: 0; color: var(--auth-link); cursor: pointer; display: inline-flex; font: inherit; font-weight: 650;
  gap: .35rem; padding: 0; text-decoration: none;
}
.auth-inline-btn:hover { color: var(--auth-link); text-decoration: underline; text-underline-offset: 3px; }
.auth-inline-btn .ti { font-size: 1.05rem; }
.auth-alt { align-items: center; display: flex; flex-wrap: wrap; font-size: .9rem; gap: .6rem 1.4rem; justify-content: center; margin-top: 1.4rem; }
.auth-alt form { display: inline; margin: 0; }

.auth-note-error { background: #fdecea; color: #8a1c13; }
.auth-note-error .ti { color: #d92d20; }
html[data-bs-theme=dark] .auth-note-error { background: #3d2124; color: #f6b3ac; }
html[data-bs-theme=dark] .auth-note-error .ti { color: #f19a91; }

.auth-steps { counter-reset: auth-step; list-style: none; margin: 0 0 .5rem; padding: 0; }
.auth-steps > li { counter-increment: auth-step; padding: 0 0 1.4rem 2.75rem; position: relative; }
.auth-steps > li::before {
  align-items: center; background: var(--auth-brand); border-radius: 50%; color: #fff; content: counter(auth-step); display: inline-flex;
  font-size: .85rem; font-weight: 800; height: 1.9rem; justify-content: center; left: 0; position: absolute; top: -.1rem; width: 1.9rem;
}
.auth-steps > li:not(:last-child)::after { background: var(--auth-line); bottom: .25rem; content: ""; left: .92rem; position: absolute; top: 2.1rem; width: 2px; }
.auth-steps > li > b { color: var(--auth-ink); display: block; font-size: .97rem; font-weight: 700; margin-bottom: .3rem; }
.auth-steps > li > span { color: var(--auth-muted); display: block; font-size: .87rem; line-height: 1.5; }
.auth-steps .auth-field { margin: .75rem 0 .9rem; }

.auth-qr { align-items: center; display: flex; gap: 1.1rem; margin-top: .75rem; }
.auth-qr img { background: #fff; border: 1px solid var(--auth-line); border-radius: 16px; flex: 0 0 auto; height: 168px; image-rendering: pixelated; padding: 6px; width: 168px; }
.auth-qr > div { color: var(--auth-muted); font-size: .84rem; line-height: 1.5; min-width: 0; }
.auth-secret {
  align-items: center; background: var(--auth-field); border: 1px solid var(--auth-line); border-radius: 11px; display: flex; gap: .5rem;
  justify-content: space-between; margin-top: .5rem; padding: .45rem .5rem .45rem .75rem;
}
.auth-secret code { color: var(--auth-ink); font-size: .9rem; font-weight: 600; letter-spacing: .04em; word-break: break-all; }
.auth-copy {
  align-items: center; background: transparent; border: 0; border-radius: 9px; color: var(--auth-muted); display: inline-flex; flex: 0 0 auto;
  font-size: 1.1rem; height: 2.1rem; justify-content: center; width: 2.1rem;
}
.auth-copy:hover, .auth-copy.is-done { background: var(--auth-soft); color: var(--auth-link); }

.auth-codes {
  background: var(--auth-field); border: 1px dashed var(--auth-line); border-radius: 16px; display: grid; gap: .35rem .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0 0 .9rem; padding: 1rem 1.1rem;
}
.auth-codes li {
  color: var(--auth-ink); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1rem; font-weight: 650;
  letter-spacing: .05em; padding: .3rem 0; text-align: center;
}
.auth-code-actions { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.4rem; }
.auth-code-actions .auth-secondary { min-height: 44px; }

@media (max-width: 479.98px) {
  .auth-qr { align-items: flex-start; flex-direction: column; }
  .auth-steps > li { padding-left: 2.5rem; }
}

/* ------------------------------------------------------------------ alt bilgi */
.auth-legal { align-items: center; color: var(--auth-muted); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .4rem 1.25rem; justify-content: center; margin: 0; }
.auth-legal-link { color: var(--auth-muted); text-decoration: none; }
.auth-legal-link:hover { color: var(--auth-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ dar ekranlar */
/* Tablet ve telefon: tanıtım paneli yerine üstte lacivert ızgaralı bir şerit, form bunun üzerine oturur. */
@media (max-width: 1099.98px) {
  .auth-main { background: var(--auth-canvas); position: relative; }
  .auth-main::before {
    background:
      linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) -1px -1px / 30px 30px,
      linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) -1px -1px / 30px 30px,
      radial-gradient(120% 100% at 100% 0%, rgba(61, 102, 214, .45) 0, transparent 60%),
      var(--auth-navy);
    content: ""; height: 260px; left: 0; position: absolute; right: 0; top: 0; z-index: 0;
  }
  .auth-main > * { position: relative; z-index: 1; }
  .auth-logo { display: none; }
  .auth-top-brand { align-items: center; color: #fff; display: inline-flex; font-size: 1rem; font-weight: 700; gap: .6rem; text-decoration: none; }
  .auth-top-brand:hover { color: #fff; }
  .auth-top-brand img { background: #fff; border-radius: 10px; height: 34px; object-fit: contain; padding: 4px; width: 34px; }
  .auth-theme-toggle { border-color: rgba(255, 255, 255, .25); color: #fff; }
  .auth-theme-toggle:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .auth-main { padding-top: 2rem; }
  .auth-card { margin-top: 3.5rem; max-width: 480px; }
  .auth-card { background: var(--auth-paper); border: 1px solid var(--auth-line); border-radius: 24px; box-shadow: 0 30px 60px -36px rgba(16, 28, 64, .35); padding: 2.5rem 2.5rem 2.25rem; }
  .auth-card.auth-card-wide { max-width: 580px; }
}
@media (max-width: 767.98px) {
  .auth-main { background: var(--auth-paper); padding: 1rem 0 0; }
  .auth-main::before { height: 170px; }
  .auth-top { padding: 0 1.1rem; }
  .auth-card {
    background: var(--auth-paper); border-radius: 26px 26px 0 0; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .5);
    flex: 1 0 auto; margin: 3.25rem 0 0; max-width: none; padding: 2rem 1.25rem 1.5rem;
  }
  .auth-card.auth-card-wide { max-width: none; }
  .auth-legal { background: var(--auth-paper); padding: 0 1.25rem 1.25rem; }
  .auth-title { font-size: 1.85rem; }
  .auth-subtitle { margin-bottom: 1.6rem; }
  .auth-shell .form-control, .auth-shell .form-select { font-size: 16px; }
  .auth-legal { justify-content: flex-start; }
}
@media (max-width: 479.98px) {
  .auth-grid { grid-template-columns: 1fr; }
  .auth-role-grid { grid-template-columns: 1fr; }
  .auth-role label { align-items: center; flex-direction: row; gap: .8rem; padding: .8rem .9rem; }
  .auth-role-check { position: static; margin-left: auto; flex: 0 0 auto; }
}