/* ============================================================
   Ypup / giriş, kayıt ve durum analizi formları
   style.css'in ÜSTÜNE yüklenir (giris.html, kayit.html, analiz.html).
   - Tek yüzey: kart ince kenarlı, gölgesiz; içinde ikinci kutu yok
   - Maskot sadece başarı ekranında, küçük
   - Satır içi style="" yerine buradaki sınıflar
   - Hata: alanın altında metin + aria-invalid; ilk hatalı alana odak (JS)
   Renkler sadece token (koyu mod kendiliğinden).
   ============================================================ */

/* Üst çubuktaki kısa soru ("Yeni misin?") */
.nav-soru { font-size: var(--fs-15); color: var(--metin-2); }

/* Kart: tek yüzey */
.auth-card { box-shadow: none; }
.auth-head { margin-bottom: 20px; }

/* Ana eylem: tam genişlik, formun sonunda */
.form-gonder { margin-top: 8px; }

/* Alan grubu etiketi (<label> olmayan: çip grupları, ülke seçici) */
.alan-etiket { display: block; font-weight: 500; font-size: var(--fs-15); margin-bottom: 6px; color: var(--metin); }
.alan-etiket + .chips { margin-top: 0; }

/* Hata satırı: alanın hemen altında, simgesiz kısa metin */
.field.invalid > .chips .chip, .field.invalid [role="radiogroup"] .chip { border-color: var(--tehlike); }
.field.invalid .ulke-ac { border-color: var(--tehlike); }

/* Programla odaklanan başlıklar (adım başlığı, başarı başlığı): halka yok */
.step-title:focus, .success h2:focus { outline: none; }
.step-title:focus-visible, .success h2:focus-visible { outline: none; }
h1.step-title { font-size: var(--fs-24); letter-spacing: -0.02em; line-height: 1.2; }

/* Sihirbaz düğmeleri: simge + yazı */
.wizard-nav .btn .simge { width: 18px; height: 18px; }
.wizard-nav .ileri { margin-left: auto; }

/* Formun üstündeki bildirim (giriş, kayıt) */
.ust-bildirim { display: flex; gap: 10px; align-items: flex-start; }
.ust-bildirim-ic { flex: 1; min-width: 0; }
.tekrar-kutu { margin-top: 10px; }
.tekrar-kutu .btn { white-space: normal; }
.tekrar-durum { margin-top: 8px; font-size: var(--fs-15); }
.tekrar-durum:empty { display: none; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Başarı / doğrulama ekranı ---------- */
.success .mascot-mini { width: 88px; height: 88px; }
.success .basari-alt { margin-bottom: 14px; }
.success .basari-not { margin-bottom: 4px; }
.success .basari-eposta { margin-bottom: 14px; color: var(--metin); font-weight: 600; overflow-wrap: anywhere; }
.success .basari-kucuk { margin-bottom: 20px; font-size: var(--fs-15); }
.success .basari-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.success .basari-ek { margin: 16px 0 0; font-size: var(--fs-15); color: var(--metin-2); }
.success .basari-ek a { font-weight: 500; }

/* ---------- Durum analizi ---------- */
.analiz-belge-notu {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 18px; font-size: var(--fs-13); color: var(--metin-2);
}
.analiz-belge-notu .simge { margin-top: 1px; }
.alan-son { margin-bottom: 0; }
.textarea.kisa { min-height: 80px; }
.textarea.orta { min-height: 90px; }

/* Sınav puan satırları: etiketli alanlar, hata satırı en altta */
.sinav-satir .input[aria-invalid="true"] { border-color: var(--tehlike); }

/* Ülke seçici: simgeli düğmeler */
.ulke-ac .simge, .ulke-arti .simge { width: 18px; height: 18px; }
.ulke-etiket button .simge { width: 16px; height: 16px; }
.ulke-sat .tik .simge { width: 18px; height: 18px; }
.ulke-arti { min-width: 44px; padding: 0 12px; }
.ulke-etiket button { min-width: 36px; min-height: 36px; }

@media (max-width: 520px) {
  .wizard-nav .btn { flex: 1 1 auto; }
}

/* Okul ile hedef ülke çelişkisi: her uyarı ayrı satır, altında tek dokunuşla düzeltme */
.okul-hata-satir { display: block; }
.okul-hata-satir + .okul-hata-satir { margin-top: 4px; }
.okul-eylem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.okul-eylem:empty, .field:not(.invalid) .okul-eylem { display: none; }

/* Google ile devam et: Google'ın kendi düğmesi bir çerçeve içinde gelir
   (google-dugme.js); görünümünü Google belirler, biz sadece ortalarız.
   Yükseklik ayrılır ki düğme gelince form zıplamasın. */
.google-dugme { display: flex; justify-content: center; min-height: 44px; }
.ayrac-veya { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--metin-3); font-size: var(--fs-13); }
.ayrac-veya::before, .ayrac-veya::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
/* Kayıt: Google hesabıyla tamamlanan form (e-posta ve şifre alanları yok) */
.google-hesap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 18px; }
.google-hesap p { margin: 0; }

/* 404: Bu sayfa burada değil */
.bulunamadi .auth-head { text-align: center; }
.bulunamadi .auth-head .mascot-mini { display: block; margin: 0 auto 14px; }
.bulunamadi-eylem { display: flex; flex-direction: column; gap: 10px; }

/* Hata bildiriminin altındaki kod satırı: "Hata kodu: YP-201 · Ne yapmalıyım?" (hata-kodlari.js) */
.hata-kodu { margin: 6px 0 0; font-size: var(--fs-13); color: var(--metin-2); }
.hata-kodu strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.hata-kodu a { color: inherit; text-decoration: underline; }
.hata-kodu code { font-size: inherit; user-select: all; }

/* Demo (demo.ypup.io): kayıt formunun ilk adımındaki "hesap açmadan dene" notu */
.demo-not { flex-direction: column; gap: 6px; background: var(--su-zemin); border-color: transparent; }
.demo-not p { margin: 0; }