/**
 * ORTAK FORM KARTI — işlemsel sayfaların (sipariş takibi ve misafir sipariş
 * detayı, şifremi unuttum, şifre sıfırlama) ortak görünümü. Giriş ve kayıt
 * 2026-10-07'den beri temanındır, burada değil.
 *
 * 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-form-kart-bg, var(--et-surface));
  border: 1px solid var(--et-border);
  /* Token bazı temalarda hap boyutunda (shiva), kartta 16px ile sınırlı. */
  border-radius: var(--et-form-kart-kose, min(var(--et-radius), 16px));
}

/* --et-form-* değişkenleri bölüm ayarından gelir (ortak_form_stili()),
   girilmemişse --et-* token'ı geçerli. */
:where(.et-form-kart__baslik) {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--et-form-baslik, var(--et-text));
}

:where(.et-form-kart__aciklama) {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--et-form-metin, 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-form-metin, 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-form-girdi-bg, var(--et-bg));
  border: 1px solid var(--et-form-girdi-cizgi, var(--et-border));
  border-radius: var(--et-form-girdi-kose, 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; }

/* :is(button, a) özgüllüğü (0,0,1) temanın genel `button { background: none }`
   sıfırlamasıyla eşitler, bu dosya theme.css'ten sonra yüklendiği için kazanır.
   Yalnız :where() iken (0,0,0) kosandra'da buton zeminsiz kalıyordu
   (aviora canlı, 2026-10-07). Temanın kendi sınıfı (0,1,0) yine üstün. */
:where(.et-form-buton):is(button, a) {
  width: 100%;
  padding: 12px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--et-form-buton-kose, var(--et-radius));
  background: var(--et-form-buton-bg, var(--et-primary));
  color: var(--et-form-buton-yazi, var(--et-primary-text));
}

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

/* :is(p) aynı gerekçe: temanın genel `p { margin: 0 }` sıfırlaması üst boşluğu ezmesin. */
:where(.et-form-alt):is(p) {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--et-form-metin, var(--et-text-muted));
}

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

/* ─────────────────────────────────────────────────────────────────────
 * MİSAFİR SİPARİŞ DETAYI (sections/guest_order_detail_main.php)
 * Takip formunun kartıyla aynı dil: --et-surface kutular, --et-border
 * çizgiler, --et-radius köşeler. Bölüm ayarı girilmişse --et-siparis-*
 * üzerinden gelir, girilmemişse token. Tema bir sınıfı kendi CSS'inde
 * ezmek isterse :where() sayesinde tek sınıf yeterli.
 * ───────────────────────────────────────────────────────────────────── */
:where(.et-siparis) { padding: 32px 16px 64px; color: var(--et-siparis-metin, var(--et-text)); font-family: var(--et-font-body); }
:where(.et-siparis__ic) { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
:where(.et-siparis__bos) { margin: 24px auto; }
:where(.et-siparis__buton) { display: block; text-align: center; text-decoration: none; }

:where(.et-siparis__bas) { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 8px; }
:where(.et-siparis__baslik) {
  margin: 0;
  font-family: var(--et-font-heading);
  font-weight: var(--et-font-weight-heading, 700);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  color: var(--et-siparis-baslik, var(--et-text));
}
:where(.et-siparis__tarih) { margin: 4px 0 0; font-size: 13px; color: var(--et-text-muted); }

/* Durum rozeti: anlam grubuna göre renk (bekliyor/isleniyor/yolda/tamam/iptal) */
:where(.et-siparis-durum) {
  --durum: var(--et-text-muted);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--et-text);
  background: color-mix(in srgb, var(--durum), transparent 80%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--durum), transparent 55%);
}
/* Yazı metin renginde kalır (koyu zeminli temalarda koyu birincil renk okunmuyordu), renk nokta ve zeminde. */
:where(.et-siparis-durum)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--durum); }
:where(.et-siparis-durum--isleniyor), :where(.et-siparis-durum--yolda) { --durum: var(--et-primary); }
:where(.et-siparis-durum--tamam) { --durum: #15803d; }
:where(.et-siparis-durum--iptal) { --durum: var(--et-danger); }

:where(.et-siparis__not) {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--et-primary);
  border-radius: min(var(--et-radius), 10px);
  background: color-mix(in srgb, var(--et-primary), transparent 93%);
  font-size: 14px;
}

/* İlerleme adımları */
:where(.et-siparis-adim) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: adim; }
:where(.et-siparis-adim__i) {
  counter-increment: adim;
  position: relative;
  padding-top: 14px;
  border-top: 4px solid var(--et-border);
  font-size: 12.5px;
  color: var(--et-text-muted);
}
:where(.et-siparis-adim__i.is-tamam) { border-top-color: var(--et-primary); color: var(--et-text); font-weight: 600; }

/* Kutular */
:where(.et-siparis__kutu) {
  padding: 20px 22px;
  background: var(--et-siparis-kart, var(--et-surface));
  border: 1px solid var(--et-border);
  /* Token bazı temalarda hap boyutunda (shiva), büyük kutuda 14px ile sınırlı. */
  border-radius: var(--et-siparis-kose, min(var(--et-radius), 14px));
}
:where(.et-siparis__kutubaslik) {
  margin: 0 0 12px;
  font-family: var(--et-font-heading);
  font-size: 15px; font-weight: 700;
  color: var(--et-siparis-baslik, var(--et-text));
}
:where(.et-siparis__ikili) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
:where(.et-siparis__kargo) { display: flex; align-items: center; gap: 14px; }
:where(.et-siparis__kargo svg) { width: 28px; height: 28px; flex: none; color: var(--et-primary); }
:where(.et-siparis__etiket) { font-size: 12px; color: var(--et-text-muted); margin-bottom: 2px; }
:where(.et-siparis__kargono) { font-size: 15px; }
:where(.et-siparis__adres) { margin: 0; font-size: 14px; line-height: 1.65; color: var(--et-text-muted); }
:where(.et-siparis__adres strong) { color: var(--et-text); }
:where(.et-siparis__adres--not) { white-space: pre-wrap; }
:where(.et-siparis__dipnot) { margin: 6px 0 0; font-size: 11.5px; color: var(--et-text-muted); text-align: right; }

/* Ürün satırları */
:where(.et-siparis-kalem) { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--et-border); }
:where(.et-siparis-kalem:first-of-type) { padding-top: 8px; }
:where(.et-siparis-kalem__bilgi) { min-width: 0; display: grid; gap: 4px; justify-items: start; }
:where(.et-siparis-kalem__ad) { font-weight: 600; font-size: 14.5px; color: var(--et-text); text-decoration: none; }
:where(a.et-siparis-kalem__ad:hover) { text-decoration: underline; }
:where(.et-siparis-kalem__meta) { font-size: 13px; color: var(--et-text-muted); }
:where(.et-siparis-kalem__tutar) { font-weight: 700; white-space: nowrap; }
:where(.et-siparis-kalem__secimler) { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.et-siparis-secim) {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--et-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--et-text-muted);
}
:where(.et-siparis-secim__renk) { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--et-border); }
:where(.et-siparis-kalem__indir) {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  padding: 7px 12px;
  border-radius: min(var(--et-radius), 10px);
  background: var(--et-primary);
  color: var(--et-primary-text);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
}
:where(.et-siparis-kalem__indir svg) { width: 15px; height: 15px; }

/* Tutar dökümü */
:where(.et-siparis-toplam) { margin: 14px 0 0; display: grid; gap: 8px; }
:where(.et-siparis-toplam > div) { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
:where(.et-siparis-toplam dt) { color: var(--et-text-muted); }
:where(.et-siparis-toplam dd) { margin: 0; }
:where(.et-siparis-toplam__indirim dd) { color: #15803d; }
:where(.et-siparis-toplam__genel) { padding-top: 10px; border-top: 1px solid var(--et-border); font-size: 16px; font-weight: 700; }
:where(.et-siparis-toplam__genel dt) { color: var(--et-text); }

/* Sipariş geçmişi */
:where(.et-siparis-gecmis) { margin: 0; padding: 0; list-style: none; }
:where(.et-siparis-gecmis__i) {
  --durum: var(--et-text-muted);
  position: relative;
  display: grid; gap: 2px;
  padding: 10px 0 10px 22px;
  border-bottom: 1px dashed var(--et-border);
  font-size: 13.5px;
}
:where(.et-siparis-gecmis__i)::before { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--durum); }
:where(.et-siparis-gecmis__i strong) { color: var(--et-text); }
:where(.et-siparis-gecmis__i--isleniyor), :where(.et-siparis-gecmis__i--yolda) { --durum: var(--et-primary); }
:where(.et-siparis-gecmis__i--tamam) { --durum: #15803d; }
:where(.et-siparis-gecmis__i--iptal) { --durum: var(--et-danger); }
:where(.et-siparis-gecmis__not) { color: var(--et-text); }
:where(.et-siparis-gecmis time) { font-size: 12px; color: var(--et-text-muted); }

:where(.et-siparis__alt) { margin: 8px 0 0; text-align: center; font-size: 14px; }
:where(.et-siparis__alt a) { color: var(--et-primary); font-weight: 600; }

@media (max-width: 560px) {
  :where(.et-siparis-adim__i) { font-size: 11px; }
  :where(.et-siparis__kutu) { padding: 16px; }
}