/* ============================================================
   GİRİŞ SAHNESİ — çalışan ve firma girişi için ortak
   ============================================================
   Ana sayfanın hero'sunun aynısı: derin zümrüt zemin, akan tül
   video, altın vurgu. Ziyaretçi ana sayfadan buraya geldiğinde
   başka bir ürüne geçmiş hissetmemeli.

   NEDEN AYRI DOSYA
   sohbet.html ve panel.html'in kendi tasarım sistemleri var
   (--caw-*, --p-*) ve gövde stilleri farklı. Bu dosya YALNIZCA
   giriş ekranını sarar; sohbetin ve panelin kendi ekranlarına
   hiç dokunmaz. Kapsam `.auth` altındadır.

   TEMA
   Sahne her zaman koyudur (.dark-zone) — ana sayfanın hero'su
   gibi. Kartın kendisi sayfa temasını izler: açık temada beyaz,
   koyu temada koyu. Bu da ana sayfadaki OwO kartıyla aynı davranış.
   ============================================================ */

.auth {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* --- Akan tül zemin (ana sayfayla aynı video) --- */
.auth-silk {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.auth-silk video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .13;
  /* Video GRİ TONLU; yeşil buradan veriliyor — ana sayfadaki .silk-v
     ile aynı dönüşüm, tek kaynaktan iki sayfaya hizmet ediyor. */
  filter: grayscale(1) sepia(.6) hue-rotate(108deg) saturate(1.5) brightness(.92);
}
.auth-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(20,81,60,.55) 0%, transparent 62%),
    linear-gradient(168deg, #0B3325 0%, #082A20 58%, #061F17 100%);
  z-index: -1;
}

/* --- Gövde --- */
.auth-body {
  flex: 1; display: grid; place-items: center;
  padding: clamp(28px, 5vw, 56px) var(--gutter, clamp(20px, 5vw, 48px))
           clamp(40px, 6vw, 72px);
  position: relative; z-index: 1;
}
.auth-in {
  width: 100%; max-width: 1060px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .auth-in { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 30px; }
  /* Dar ekranda anlatı kartın ALTINA iner: önce iş yapılır,
     sonra okunur. */
  .auth-tell { order: 2; }
  .auth-card { order: 1; }
}

/* ============================================================
   Sol sütun — anlatı
   ============================================================ */
.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 620; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.auth-eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--gold); opacity: .7;
}
.auth-tell h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 3.6vw, 3.05rem);
  line-height: 1.02; font-weight: 700; letter-spacing: -.02em;
  color: #F2F7F4;
}
/* Altın metnin iniş kuyruğu (y, ğ, ş) boyama kutusunun dışında
   kalmasın — ana sayfadaki h1 ile aynı düzeltme. */
.auth-tell h1 .metal-gold { padding-bottom: .18em; margin-bottom: -.18em; }
.auth-tell p {
  margin: 0; max-width: 40ch;
  font-size: clamp(.98rem, 1.05vw, 1.1rem); line-height: 1.6;
  color: #A9C2B6;
}

/* Güvence listesi: söz değil, kısıt. Ana sayfadaki dilin aynısı. */
.auth-facts {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 11px;
}
.auth-facts li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .9rem; line-height: 1.5; color: #C3D7CC;
}
.auth-facts svg { flex: none; margin-top: 2px; color: var(--gold); }

/* ============================================================
   Sağ sütun — giriş kartı
   ============================================================
   Kart SAYFA temasını izler; sahne her zaman koyu. Ana sayfadaki
   OwO kartıyla birebir aynı davranış ve aynı kabuk.
   ============================================================ */
.auth-card {
  --surface:     #FFFFFF;
  --surface-2:   #F2EFE6;
  --ink:         #08271D;
  --ink-2:       #46615A;
  --ink-3:       #5C716A;
  --line:        #E3DED4;
  --line-strong: #7E8D86;
  --accent:      #0D3F2F;
  --accent-ink:  #FFFFFF;
  --gold:        #D4A82C;

  position: relative;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 20px);
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  box-shadow: 0 2px 4px rgba(0,0,0,.28), 0 34px 80px rgba(0,0,0,.44);
  overflow: hidden;
}
:root[data-theme="dark"] .auth-card {
  --surface:     #0C221B;
  --surface-2:   #132E25;
  --ink:         #E8EFEA;
  --ink-2:       #A3B5AC;
  --ink-3:       #7A8F86;
  --line:        #1E362C;
  --line-strong: #557166;
  --accent:      #6FC9A2;
  --accent-ink:  #06231A;
  --gold:        #E6C45C;
  box-shadow: 0 2px 4px rgba(0,0,0,.34), 0 34px 80px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.05);
}
/* Üst kenarda ince altın hat — kartın imzası. Ayrı katman:
   saydam kenarlık numarası yuvarlak köşede taşıyordu. */
.auth-card::before {
  content: '';
  position: absolute; left: 12%; right: 12%; top: -1px; height: 2px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.auth-card h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.42rem; line-height: 1.2; font-weight: 700;
  color: var(--ink);
}
.auth-card .auth-sub {
  margin: 0 0 22px;
  font-size: .92rem; line-height: 1.55; color: var(--ink-2);
}

/* --- Alanlar --- */
.auth-field { display: grid; gap: 7px; margin-bottom: 14px; }
.auth-label {
  font-size: .78rem; font-weight: 620; letter-spacing: .03em;
  color: var(--ink-2);
}
.auth-input {
  width: 100%; font: inherit; font-size: .96rem;
  padding: 13px 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
.auth-input::placeholder { color: var(--ink-3); opacity: .8; }
.auth-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Erişim kodu alanı: harfler ayrık ve büyük — kod okunarak
   giriliyor, tek tek kontrol edilebilmeli. */
.auth-input--code {
  text-align: center;
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
}

/* --- Düğmeler --- */
.auth-btn {
  width: 100%; font: inherit; font-size: .96rem; font-weight: 620;
  padding: 14px 18px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease-soft, ease), box-shadow 240ms,
              background 240ms, border-color 240ms, color 240ms;
}
.auth-btn:active { transform: translateY(1px); }
.auth-btn--primary {
  background: linear-gradient(180deg, #17553F 0%, #0E3A2C 100%);
  color: #EAF7F0;
  border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.22);
}
.auth-btn--primary:hover {
  background: linear-gradient(180deg, #1C6349 0%, #114634 100%);
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
}
.auth-btn--primary .arrow { color: var(--gold); }
.auth-btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
}
.auth-btn--ghost:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.auth-btn[disabled] { opacity: .5; cursor: default; transform: none; }

.auth-link {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--ink-3);
  text-align: center; padding: 6px;
  border-radius: 8px; transition: color 200ms;
}
.auth-link:hover { color: var(--accent); }

/* --- Ayırıcı --- */
.auth-or {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0; color: var(--ink-3);
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* --- Yardım / hata --- */
.auth-hint {
  margin: 9px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3);
}
.auth-err {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  font-size: .85rem; line-height: 1.45;
  color: var(--danger); background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.auth-err:empty { display: none; }

/* Kartın altındaki küçük güvence notu. */
.auth-note {
  margin: 18px 0 0; padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: .76rem; line-height: 1.55; color: var(--ink-3);
}

/* ============================================================
   Giriş animasyonu
   ============================================================
   Ana sayfadaki `focus-in` ile aynı dil: bulanıktan nete,
   aşağıdan yukarı. Öğeler SIRAYLA gelir — sayfa bir anda
   patlamaz, kurulur.

   Hepsi `prefers-reduced-motion` ile kapanır ve o durumda
   içerik doğrudan görünür kalır (opacity: 1).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .auth-anim > * {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(14px);
    animation: auth-in 820ms var(--ease, cubic-bezier(.16,1,.3,1)) forwards;
  }
  .auth-anim > *:nth-child(1) { animation-delay:  60ms; }
  .auth-anim > *:nth-child(2) { animation-delay: 130ms; }
  .auth-anim > *:nth-child(3) { animation-delay: 200ms; }
  .auth-anim > *:nth-child(4) { animation-delay: 270ms; }
  .auth-anim > *:nth-child(5) { animation-delay: 340ms; }
  .auth-anim > *:nth-child(6) { animation-delay: 410ms; }
  .auth-anim > *:nth-child(7) { animation-delay: 480ms; }
  .auth-anim > *:nth-child(8) { animation-delay: 550ms; }
  @keyframes auth-in {
    to { opacity: 1; filter: blur(0); transform: none; }
  }

  /* Kartın kendisi biraz daha geç ve biraz daha uzaktan gelir:
     sahne önce kurulur, kart sonra oturur. */
  .auth-card {
    opacity: 0; transform: translateY(26px) scale(.985);
    animation: auth-card-in 900ms var(--ease, cubic-bezier(.16,1,.3,1)) 180ms forwards;
  }
  @keyframes auth-card-in {
    to { opacity: 1; transform: none; }
  }

  /* Altın hat kart oturduktan sonra soldan sağa çizilir. */
  .auth-card::before {
    transform: scaleX(0); transform-origin: 50% 50%;
    animation: auth-line 900ms var(--ease, cubic-bezier(.16,1,.3,1)) 780ms forwards;
  }
  @keyframes auth-line { to { transform: scaleX(1); } }
}

/* ============================================================
   Alt bilgi
   ============================================================ */
.auth-foot {
  position: relative; z-index: 1;
  padding: 0 var(--gutter, clamp(20px, 5vw, 48px)) clamp(22px, 3vw, 34px);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center;
  font-size: .78rem; color: #7D9A8E;
}
.auth-foot a { color: #9FB8AD; transition: color 200ms; }
.auth-foot a:hover { color: var(--gold); }
.auth-foot .sep { opacity: .4; }

/* Başlık sahnenin üstünde; sahne koyu olduğu için başlık da koyu
   bölge kurallarını kullanır. */
.auth .ch {
  position: relative; z-index: 2;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: rgba(255,255,255,.09);
}

/* ============================================================
   HANE HANE KOD GİRİŞİ
   ============================================================
   oculawork/owo.html'deki giriş ekranından uyarlandı; orada mavi
   olan her şey burada zümrüt–altın. Fikir aynı, palet bizim.

   Neden tek bir metin kutusu değil:
   Kod telefonda okunarak giriliyor. Sekiz hane ayrı kutularda
   olunca kişi nerede kaldığını görüyor, yanlış haneyi tek başına
   düzeltebiliyor ve kodun kaç hane olduğunu saymak zorunda
   kalmıyor. Hata payı belirgin biçimde düşüyor.

   ERİŞİLEBİLİRLİK
   Görünen kutular yalnızca GÖRÜNTÜ. Altta gerçek bir <input>
   var: klavye, yapıştırma, otomatik doldurma, SMS kodu önerisi
   ve ekran okuyucu hep onun üzerinden çalışıyor. Kutuların
   kendisi aria-hidden.
   ============================================================ */
.code-wrap { position: relative; }

.code-digits {
  display: flex; gap: 8px; justify-content: center;
  margin: 4px 0 6px;
}
.code-digit {
  width: 44px; height: 56px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color 160ms, box-shadow 160ms, transform 160ms, background 160ms;
}
/* Dolu hane: zümrüt kenar + hafif iç ışık, kısa bir "otur" hareketi. */
.code-digit.is-filled {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
              0 4px 14px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Sıradaki hane: altın kenar + yanıp sönen imleç. */
.code-digit.is-cur {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}
.code-digit.is-err {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
@media (prefers-reduced-motion: no-preference) {
  .code-digit.is-filled { animation: code-pop 220ms cubic-bezier(.34,1.56,.64,1); }
  @keyframes code-pop { 0% { transform: scale(.78) } 60% { transform: scale(1.09) } 100% { transform: scale(1) } }
  .code-digit.is-cur::after {
    content: ''; width: 2px; height: 26px; border-radius: 2px;
    background: var(--gold);
    animation: code-caret 1.05s step-end infinite;
  }
  @keyframes code-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
}

/* Gerçek alan görünmez ama kutuların TAM üstünde: dokunulunca
   klavye açılıyor, yapıştırma çalışıyor. */
.code-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0;
  /* 16px: iOS daha küçük yazı tipinde alanı otomatik yakınlaştırıyor. */
  font-size: 16px;
  caret-color: transparent;
  cursor: pointer;
}
.code-input:focus { outline: none; }
/* Odak halkası görünmeyen alanda değil, kutularda gösterilir. */
.code-input:focus-visible + .code-digits .code-digit.is-cur {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}

/* Yanlış kod: kart kısaca titrer. Kırmızı bir uyarı kutusundan
   daha hızlı anlaşılıyor ve okumayı gerektirmiyor. */
.auth-card.is-shake { animation: code-shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes code-shake {
  10%, 90% { transform: translateX(-1px) }
  20%, 80% { transform: translateX(2px) }
  30%, 50%, 70% { transform: translateX(-5px) }
  40%, 60% { transform: translateX(5px) }
}
@media (prefers-reduced-motion: reduce) { .auth-card.is-shake { animation: none } }

/* --- Doğrulanıyor / doğrulandı --- */
.code-state {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 18px; margin: 10px 0 4px;
  font-size: .76rem; letter-spacing: .06em; color: var(--ink-3);
}
.code-track {
  width: 74px; height: 2px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.code-bar {
  display: block; width: 0; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transition: width 520ms var(--ease-soft, ease);
}

/* Başarı: karttan dışa açılan tek bir halka. Onay işareti
   kullanılmıyor — kod doğru diye "tebrikler" demek, birazdan zor
   bir konuşma yapacak kişiye yanlış bir ton olurdu. */
.code-ring {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .code-ring.go { animation: code-ring 1s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes code-ring {
    0%   { width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: .85 }
    100% { width: 1200px; height: 1200px; margin: -600px 0 0 -600px; opacity: 0 }
  }
}

/* Giriş sahnesi tam genişlik. Sayfanın kendi kabuğu (sohbet 760px,
   panel merkezli) giriş ekranını sınırlamamalı; bu ekran ana
   sayfanın hero düzenini kullanıyor ve o düzen iki sütun. */
.auth { width: 100%; }
body:has(.auth) { margin: 0; }
/* overflow-x yalnizca giris ekrani ACIKKEN. Her zaman uygulandiginda
   yeni bir kaydirma baglami yaratip sohbetin yapiskan yazma alanini
   bozuyordu. */
body:has(#gate.is-on), body:has(#login) { overflow-x: clip; }

/* --- Sifre alani + goster dugmesi --- */
.auth-pass { position: relative; display: block; }
.auth-pass .auth-input { padding-right: 46px; }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
  transition: color 180ms, background 180ms;
}
.auth-eye:hover { color: var(--ink-2); background: var(--surface-2); }
.auth-eye:active { color: var(--accent); }