/* ═══════════════════════════════════════════════════════════════════
   OktaSoft IoT — Auth ekranları (login / register)
   Split-layout: solda animasyonlu çizgi sahnesi + alıntı, sağda form.
═══════════════════════════════════════════════════════════════════ */
:root {
  --bg:        #09090b;
  --bg-soft:   #101013;
  --panel:     #131316;
  --border:    #26262b;
  --text:      #fafafa;
  --muted:     #8b8b93;
  --muted-2:   #55555c;
  --accent:    #e4e4e7;   /* referanstaki açık buton */
  --accent-fg: #101013;
  --ring:      #3b82f6;
  --err:       #f87171;
  --ok:        #4ade80;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Fira Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.auth-grid { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 1024px) {
  .auth-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Sol sahne ─────────────────────────────────────────────────── */
.auth-scene {
  display: none;
  position: relative;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 2.5rem;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .auth-scene { display: flex; flex-direction: column; }
}
.auth-scene::after {           /* alttan üste kararan degrade */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 55%);
  z-index: 5;
}
.scene-brand {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; font-weight: 600; letter-spacing: .02em;
}
.scene-brand svg { width: 26px; height: 26px; }
.scene-brand .lite { color: var(--muted); font-weight: 400; }
.scene-quote {
  position: relative; z-index: 10;
  margin-top: auto;
}
.scene-quote p {
  font-size: 1.3rem; line-height: 1.55; font-weight: 300;
  max-width: 34rem;
}
.scene-quote footer {
  margin-top: .9rem;
  font-family: "Fira Code", monospace;
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.paths-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.paths-wrap path { stroke: #fff; fill: none; }

/* Çizgi katmanları — YUKARI kaydırıldı (sahnenin ortasından aksın) */
.pl { position: absolute; inset: 0; }
.pl1 { top: -34%; left: -4%;  }
.pl2 { top: -20%; left:  2%;  }
.pl svg { width: 100%; height: 120%; will-change: transform; }

/* TÜM hareket GPU'da (transform + opacity = composited, %100 akıcı).
   Dash/stroke animasyonu YOK — CPU boyaması sıfır. */
.pl1 svg { animation: drift1 18s ease-in-out infinite alternate; }
.pl2 svg { animation: drift2 24s ease-in-out infinite alternate,
                      breathe2 11s ease-in-out infinite alternate; }
@keyframes drift1 {
  from { transform: translate3d(0,0,0)          rotate(0deg)    scale(1); }
  to   { transform: translate3d(-5%, -6%, 0)    rotate(-2deg)   scale(1.05); }
}
@keyframes drift2 {
  from { transform: translate3d(0,0,0)          rotate(0deg)    scale(1.04); }
  to   { transform: translate3d(5%, 4%, 0)      rotate(1.6deg)  scale(1); }
}
@keyframes breathe2 {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* Işık huzmeleri — çizgi yönünde (çapraz) süpürür, "sinyal akışı" hissi.
   Sadece transform anime edilir; GPU'da kompozit, kasmaz. */
.beam {
  position: absolute; top: -40%; left: -60%;
  width: 42%; height: 190%;
  transform: rotate(34deg);
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.10) 45%,
    rgba(255,255,255,.16) 50%, rgba(255,255,255,.10) 55%, transparent 100%);
  animation: beamSweep linear infinite;
  will-change: transform;
}
.b1 { animation-duration: 9s; }
.b2 { animation-duration: 14s; animation-delay: -6s;  opacity: .7; width: 26%; }
.b3 { animation-duration: 21s; animation-delay: -12s; opacity: .5; width: 60%; }
@keyframes beamSweep {
  from { transform: translate3d(-70%, 0, 0) rotate(34deg); }
  to   { transform: translate3d(340%, 0, 0) rotate(34deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pl svg, .beam { animation: none; }
}

/* ── Sağ form kolonu ───────────────────────────────────────────── */
.auth-form-col {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem; min-height: 100vh;
}
.auth-glow {                    /* köşe radyal parıltıları */
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; opacity: .6; z-index: 0;
}
.auth-glow i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(250,250,250,.05) 0, rgba(250,250,250,.015) 60%, transparent 100%);
}
.auth-glow i:nth-child(1) { top: -22rem; right: -6rem; width: 34rem; height: 74rem; transform: rotate(12deg); }
.auth-glow i:nth-child(2) { top: -14rem; right: 4rem;  width: 16rem; height: 60rem; transform: rotate(18deg); }

.back-link {
  position: absolute; top: 1.6rem; left: 1.2rem; z-index: 10;
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--muted); text-decoration: none;
  font-size: .875rem; padding: .45rem .8rem; border-radius: 8px;
  transition: color .2s, background .2s;
}
.back-link:hover { color: var(--text); background: rgba(255,255,255,.05); }

.auth-box { position: relative; z-index: 5; width: 100%; max-width: 24rem; margin: 0 auto; }

.mobile-brand {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.1rem; font-weight: 600; margin-bottom: 1.4rem;
}
.mobile-brand svg { width: 24px; height: 24px; }
@media (min-width: 1024px) { .mobile-brand { display: none; } }

.auth-box h1 {
  font-size: 1.65rem; font-weight: 700; letter-spacing: .015em;
  margin-bottom: .3rem;
}
.auth-sub { color: var(--muted); font-size: .95rem; margin-bottom: 1.5rem; }

/* Alanlar */
.field { position: relative; margin-bottom: .65rem; }
.field svg {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted-2); pointer-events: none;
}
.field input {
  width: 100%; height: 2.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit; font-size: .92rem;
  padding: 0 .9rem 0 2.5rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--muted-2); }
.field input:focus {
  outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.field-hint {
  color: var(--muted); font-size: .74rem; margin: 0 0 .45rem;
}

/* Butonlar */
.btn-light {
  width: 100%; height: 2.75rem;
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 9px;
  font-family: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; margin-top: .35rem;
  transition: background .2s, transform .1s;
}
.btn-light:hover  { background: #fff; }
.btn-light:active { transform: translateY(1px); }
.btn-ghost {
  width: 100%; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font-size: .92rem; font-weight: 500; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.04); border-color: #3a3a41; }

.sep {
  display: flex; align-items: center; gap: .7rem;
  margin: 1.1rem 0; color: var(--muted-2); font-size: .72rem;
}
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Uyarılar */
.alert-error, .alert-success {
  border-radius: 9px; padding: .65rem .9rem;
  font-size: .85rem; margin-bottom: 1rem;
}
.alert-error   { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.35); color: var(--err); }
.alert-success { background: rgba(74,222,128,.08);  border: 1px solid rgba(74,222,128,.3);  color: var(--ok); }

.auth-foot {
  color: var(--muted-2); font-size: .8rem; margin-top: 1.8rem; line-height: 1.55;
}
.auth-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.auth-foot a:hover { color: var(--text); }