/**
 * ORTAK FORM KARTI — işlemsel sayfaların (sipariş takibi, şifre sıfırlama,
 * giriş, kayıt) ortak görünümü.
 *
 * NEDEN AYRI DOSYA: ilk taşınan bölümde stiller satır içine yazılmıştı ve bu,
 * novera/poseidon/monochrome'da eleştirilen desenin ta kendisiydi (görünümü
 * markup'a gömmek). Üç sayfa aynı kartı kullanıyor; stil tek yerde durur.
 *
 * RENKLER YALNIZCA TOKEN SÖZLEŞMESİNDEN okunur (--et-*), tema-özel değişken
 * kullanılmaz. Bkz. tests/Kurallar/TokenSozlesmesiTest.php.
 *
 * Tema bu görünümü beğenmezse kendi CSS'inde .et-form-* sınıflarını
 * geçersiz kılabilir — docblock BUNU söylüyordu ama gerçekte İŞLEMİYORDU:
 * bu dosya her temanın kendi theme.css'İNDEN SONRA (footer'daki
 * liveSearchInject() ile) yüklendiği için, eşit özgüllükte (0,1,0) iki
 * kural yarıştığında kaynak sırası kazanıyordu — yani tema kendi .ks-input
 * gibi bir sınıfı `auth-register-alanlar.php`'ye AÇIKÇA geçirse bile (bkz.
 * $sinif parametresi) bu dosyanın ARKA PLAN/KENARLIK/RENK kuralları
 * SESSİZCE üstüne biniyordu. Somut örnek: kosandra'nın kayıt formunda "Ad/
 * Soyad/E-posta/Telefon" alanları .ks-input'un beyaz background'ı yerine
 * --et-bg (temanın SAYFA arka planına eşlenir, bkz. RenderTrait.php'deki
 * --et-* eşleme bloğu) ile şeffaf/sayfa-rengi görünüyordu (2026-08-28
 * canlı denetiminde bulundu). :where() ile bu dosyanın özgüllüğü SIFIRA
 * çekildi — artık HERHANGİ bir tema sınıfı (tek sınıf bile olsa) otomatik
 * kazanır, dosya yükleme sırasından bağımsız. Hiçbir tema sınıfı yoksa
 * (ör. bu kartı çıplak kullanan sipariş takibi/şifre sıfırlama sayfaları)
 * aşağıdaki kurallar değişmeden uygulanmaya devam eder.
 */

:where(.et-form-kart) {
  max-width: 460px;
  margin: 48px auto;
  padding: 28px;
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
}

:where(.et-form-kart__baslik) {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--et-text);
}

:where(.et-form-kart__aciklama) {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--et-text-muted);
}

:where(.et-form-uyari) {
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: var(--et-radius);
  font-size: 13.5px;
}

:where(.et-form-uyari--hata) {
  color: var(--et-danger);
  border: 1px solid var(--et-danger);
  background: color-mix(in srgb, var(--et-danger), transparent 92%);
}

:where(.et-form-uyari--basari) {
  color: var(--et-primary);
  border: 1px solid var(--et-primary);
  background: color-mix(in srgb, var(--et-primary), transparent 92%);
}

:where(.et-form-etiket) {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--et-text);
}

:where(.et-form-girdi) {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--et-text);
  background: var(--et-bg);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
}

:where(.et-form-girdi:focus) {
  outline: 2px solid var(--et-primary);
  outline-offset: 1px;
}

:where(.et-form-girdi--son) { margin-bottom: 22px; }

:where(.et-form-buton) {
  width: 100%;
  padding: 12px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--et-radius);
  background: var(--et-primary);
  color: var(--et-primary-text);
}

:where(.et-form-buton:hover) { background: color-mix(in srgb, var(--et-primary), black 10%); }

:where(.et-form-alt) {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--et-text-muted);
}

:where(.et-form-alt a) {
  color: var(--et-primary);
  font-weight: 600;
}