/* Televizyon.app — giriş ekranı: arkada gündem kelimeleri süzülür (tıklanmaz), ortada giriş kartı */
body.gate { min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.gate .wordsky { opacity: 1; }
.gate .sky-word { pointer-events: none !important; cursor: default; }

/* arka plan: yavaş dolaşan üç renk bulutu (ana sayfadaki tuvalin hafif karşılığı) */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .2;
  animation: drift 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: var(--c1); left: -20vmax; top: -25vmax; }
.aurora i:nth-child(2) { background: var(--c2); right: -25vmax; top: 10vmax; animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { background: var(--c3); left: 10vmax; bottom: -35vmax; animation-duration: 38s; animation-delay: -15s; opacity: .14; }
@keyframes drift { to { transform: translate(12vmax, 8vmax) scale(1.15); } }

.gate-wrap { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.gate-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; animation: rise .9s var(--ease-out) both; }
.gate-logo { font-size: clamp(26px, 8vw, 40px); margin-bottom: 26px; justify-content: center; }

.gate-form { width: 100%; padding: 30px 28px 24px; border-radius: 24px; background: rgba(10, 12, 24, .62); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.gate-form[hidden] { display: none; }
.gate-form h1 { font: 800 22px Unbounded; letter-spacing: -.02em; }
.gate-sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 8px 0 22px; }

.fld { display: block; margin-bottom: 14px; }
.fld > span:first-child { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .01em; }
.fld small { font-weight: 500; color: var(--ink-3); }
.fld input { width: 100%; height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: var(--ink); font: 500 16px "Inter Tight", sans-serif; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.fld input:focus { border-color: rgba(60,240,255,.55); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(60,240,255,.12); }
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.pw-eye { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); }
.pw-eye:hover, .pw-eye.on { color: var(--ink); background: rgba(255,255,255,.06); }
.pw-eye svg { width: 18px; height: 18px; }

.gate-err { min-height: 20px; color: #ff6b88; font-size: 13.5px; font-weight: 500; margin: 2px 0 8px; }
.gate-btn { width: 100%; height: 50px; border-radius: 14px; background: var(--grad); color: #050510; font: 800 15.5px "Inter Tight";
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .25s var(--spring), filter .2s, opacity .2s;
  box-shadow: 0 12px 30px -10px rgba(139,92,255,.7); }
.gate-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gate-btn:active { transform: translateY(1px); }
.gate-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.gate-btn[disabled] { opacity: .6; pointer-events: none; }
.gate-btn.busy svg { animation: nudge .8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.gate-note { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 16px; }
.gate-form.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

.gate-foot { margin-top: 26px; display: flex; gap: 8px; color: var(--ink-3); font-size: 12.5px; }
.gate-foot a { color: var(--ink-2); text-decoration: none; }
.gate-foot a:hover { color: var(--ink); }

@media (max-width: 480px) {
  .gate-form { padding: 24px 18px 20px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }