/* Dantel Pro — giriş ve onay bekleme ekranları ("Gece Mavisi") */
html.booting body > :not(#authScreen) { visibility: hidden; }

#authScreen {
  --a-bg1: #1c2f57; --a-bg2: #0b1426; --a-bg3: #060b16;
  --a-card: rgba(19, 32, 58, .58); --a-card-line: rgba(106, 165, 255, .22);
  --a-ink: #e4eaf6; --a-muted: #8fa0c0; --a-fine: #6b7ea3; --a-accent: #6aa5ff;
  --a-motif1: #6aa5ff; --a-motif2: #f4ead6; --a-motif-op: .16;
  --a-chip: rgba(19, 32, 58, .55); --a-chip-line: rgba(106, 165, 255, .25);
  --a-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  position: fixed; inset: 0; z-index: 1000; overflow: hidden auto;
  display: grid; place-items: center; padding: 72px 16px 32px;
  background: radial-gradient(1200px 700px at 30% 20%, var(--a-bg1) 0%, var(--a-bg2) 55%, var(--a-bg3) 100%);
  color: var(--a-ink); font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}
#authScreen.light {
  --a-bg1: #ffffff; --a-bg2: #e9eff9; --a-bg3: #d6e1f2;
  --a-card: rgba(255, 255, 255, .72); --a-card-line: rgba(40, 81, 163, .16);
  --a-ink: #14213d; --a-muted: #5a6a8a; --a-fine: #74839f; --a-accent: #2851a3;
  --a-motif1: #2851a3; --a-motif2: #9b7a4c; --a-motif-op: .12;
  --a-chip: rgba(255, 255, 255, .7); --a-chip-line: rgba(40, 81, 163, .18);
  --a-shadow: 0 30px 70px rgba(30, 50, 90, .18);
}
#authScreen[hidden] { display: none; }

#authScreen .motif { position: fixed; pointer-events: none; opacity: var(--a-motif-op); }
#authScreen .motif.m1 { width: max(120vw, 900px); aspect-ratio: 1; left: -10vw; top: -35vw; animation: a-spin 240s linear infinite; }
#authScreen .motif.m2 { width: max(55vw, 420px); aspect-ratio: 1; right: -18vw; bottom: -28vw; animation: a-spin 180s linear infinite reverse; }
#authScreen .motif * { fill: none; stroke-linecap: round; }
#authScreen .motif.m1 * { stroke: var(--a-motif1); }
#authScreen .motif.m2 * { stroke: var(--a-motif2); }

#authScreen .a-bar { position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2;
  max-width: calc(100vw - 28px); flex-wrap: wrap; justify-content: flex-end; }
#authScreen .a-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px;
  background: var(--a-chip); border: 1px solid var(--a-chip-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#authScreen .a-chip button { border: 0; background: none; color: var(--a-muted); font: 600 .82rem system-ui, sans-serif;
  padding: 6px 11px; border-radius: 999px; cursor: pointer; min-width: 36px; }
#authScreen .a-chip button.on { background: var(--a-accent); color: #fff; }
#authScreen.light .a-chip button.on { color: #fff; }
#authScreen .a-chip button:focus-visible, #authScreen .g-btn:focus-visible, #authScreen .a-link:focus-visible {
  outline: 2px solid var(--a-accent); outline-offset: 2px; }

#authScreen .a-card { position: relative; width: min(390px, 100%); padding: 36px 30px 28px; border-radius: 24px; text-align: center;
  background: var(--a-card); border: 1px solid var(--a-card-line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--a-shadow), inset 0 1px 0 rgba(255, 255, 255, .06); animation: a-rise .6s ease both; }
#authScreen .a-logo { width: 84px; height: 84px; margin: 0 auto 14px; display: block; border-radius: 20px;
  filter: drop-shadow(0 8px 24px rgba(106, 165, 255, .35)); animation: a-float 5s ease-in-out infinite; }
#authScreen h1 { font: 700 2rem/1.15 Georgia, "Times New Roman", serif; margin: 0; letter-spacing: .3px; }
#authScreen h2 { font: 700 1.35rem/1.2 Georgia, "Times New Roman", serif; margin: 6px 0 8px; }
#authScreen .a-sub { color: var(--a-muted); margin: 6px 0 24px; }
#authScreen .a-text { color: var(--a-muted); margin: 0 0 6px; white-space: pre-line; font-size: .95rem; }
#authScreen .a-fine { color: var(--a-fine); font-size: .8rem; margin: 18px 0 0; white-space: pre-line; }
#authScreen .a-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
#authScreen .a-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--a-accent); opacity: .5; }
#authScreen .a-err { margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; font-size: .88rem;
  background: rgba(255, 123, 114, .12); border: 1px solid rgba(255, 123, 114, .35); color: #ffb4ad; }
#authScreen.light .a-err { color: #a3261b; background: #fdecea; border-color: #f5c2bd; }

#authScreen .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid #dadce0; background: #fff; color: #1f1f1f; text-decoration: none;
  font: 500 15px/1 system-ui, "Segoe UI", Roboto, sans-serif; padding: 13px 24px; border-radius: 999px;
  transition: transform .15s, box-shadow .15s; }
#authScreen .g-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
#authScreen .g-btn svg { width: 20px; height: 20px; flex: none; }

#authScreen .a-ring { width: 64px; height: 64px; margin: 0 auto 6px; display: block; }
#authScreen .a-ring .spin { transform-origin: 50% 50%; animation: a-spin 1.6s linear infinite; }
#authScreen .a-me { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 4px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: var(--a-chip); border: 1px solid var(--a-chip-line); max-width: 100%; text-align: left; }
#authScreen .a-me img, #authScreen .a-me .ph { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  background: linear-gradient(135deg, #f6b26b, #e06666); display: grid; place-items: center; color: #fff; font-weight: 700; }
#authScreen .a-me b { display: block; font-size: .9rem; }
#authScreen .a-me small { display: block; color: var(--a-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }
#authScreen .a-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
#authScreen .a-link { color: var(--a-accent); font-size: .88rem; text-decoration: none; background: none; border: 0;
  padding: 4px 6px; cursor: pointer; font-family: inherit; }
#authScreen .a-link:hover { text-decoration: underline; }

@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-float { 50% { transform: translateY(-6px); } }
@keyframes a-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  #authScreen .motif, #authScreen .a-logo, #authScreen .a-card, #authScreen .a-ring .spin { animation: none; }
}
@media (max-width: 420px) {
  #authScreen .a-bar { top: 10px; right: 10px; gap: 6px; }
  #authScreen .a-chip button { padding: 5px 8px; min-width: 30px; font-size: .78rem; }
  #authScreen .a-card { padding: 30px 20px 24px; }
  #authScreen h1 { font-size: 1.75rem; }
}