/* ==========================================================================
   Rota — Giriş, davet ve şifre ekranları
   ========================================================================== */

.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-2);
}
.auth-topbar img { height: 30px; width: auto; display: block; }
/* Logo aynı zamanda ana sayfa bağlantısı: 95×35 px'lik hedef parmakla
   ıskalanıyordu. Görsel büyümüyor, yalnız tıklanabilir alan. */
.auth-topbar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
}

.auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-9);
}

.auth-stack {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Tasarım sisteminde akışta duran kart gölge almaz. Giriş kartı bilinçli
   istisna ve tasarım sistemindeki **öne çıkan modül** tanımının birebir
   karşılığı: sayfada başka hiçbir şey yok, kartı zemine bağlayan bir komşu
   da yok. `--shadow-float` (tek yumuşak gölge değeri) tam buranın için —
   `--shadow-sm` bu ölçekte görünmüyor, kart zemine yapışık kalıyordu. */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: var(--sp-7) var(--sp-6);
}

.auth-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.auth-head h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-1);
}
.auth-head p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.auth-form .btn-primary { margin-top: var(--sp-1); }

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.auth-links a { font-weight: 600; font-size: var(--fs-base); }

.auth-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  width: 100%;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* --- Davet kartı --- */

.invite-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.invite-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
}
.invite-head h1 {
  font-size: var(--fs-lg);
  margin-bottom: 2px;
}
.invite-head p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: 0;
}

/* --- Bilgilendirme durumu --- */

.auth-status {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
/* Durum ekranlarının başlığı giriş başlığından bir ölçü küçük: bunlar bir
   eyleme davet değil, olup biteni anlatan sayfalar. Dört şablon bu ölçüyü
   satır içi `style` ile tekrar ediyordu; biri değişirse diğer üçü sessizce
   ayrışırdı. */
.auth-status h1 { font-size: var(--fs-xl); }
.auth-status .empty-icon { margin-bottom: var(--sp-1); }
.auth-status p { color: var(--text-secondary); max-width: 40ch; }

@media (min-width: 900px) {
  .auth-main { align-items: center; padding-top: 0; }
  .auth-stack { max-width: 420px; }
}



/* ==========================================================================
   1. KİMLİK EKRANLARI  →  auth.css
   ========================================================================== */

/* İkincil bağlantılar **sessizdir**. 600 ağırlık + gövde puntosuyla
   çizildiklerinde birincil düğmenin hemen altında ikinci bir çağrı gibi
   duruyorlardı: giriş ekranında göz önce "Şifremi unuttum"a gidiyordu.
   Sessizleşen tek şey ton; hedef büyüklüğü tersine **büyüdü** (§7): bu
   bağlantılar bir cümlenin içinde geçen bağlantı değil, o ekrandaki ikinci
   eylemin tamamı ve 23 px yüksekliğindeydiler. Kural artık `pointer:
   coarse`a bağlı değil — ölçüm turu 360 px'i dokunmatik olmayan bir
   tarayıcıda da koşuyor ve orada da parmak kadar yer gerekiyor. */
.auth-card .auth-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.auth-card .auth-links a:hover { color: var(--brand); }

/* Davet cümlesi bağlantı bloğunun dışına çıktı; üst boşluğu kendi taşır. */
.auth-card .auth-note {
  margin: var(--sp-5) 0 0;
  color: var(--text-muted);
}

/* Davet ekranındaki "hesap e-postan" kutusunun alt boşluğu. Tek seferlik
   `style="margin-bottom: var(--sp-5)"` idi: aynı ölçüyü iki yerde tutan
   hiçbir şey yoktu. */
.auth-notice { margin-bottom: var(--sp-5); }

/* Kartın dibindeki sessiz meta (erişilebilen alanların listesi). */
.auth-foot-note {
  margin: var(--sp-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Durum ekranlarının düğme satırı. `flex-basis` 180 px: 400 px'lik kartta
   iki düğme yan yana sığar, sığmadığı anda ikisi de tam genişliğe geçer.
   Eskiden satır içi `style="gap"` ile yazılmış bir `.row` idi ve dar
   ekranda ikinci düğme kırpılıyordu. */
.auth-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-2);
}
.auth-status-actions .btn { flex: 1 1 180px; }

/* Uyarı tonlu durum ikonu (geçersiz bağlantı). Şablondaki satır içi
   `style="background: var(--warn-bg); color: var(--warn)"` yerine. */
.empty-icon.is-warn {
  background: var(--warn-bg);
  color: var(--warn);
}