/* Ortak temel — yüz dosyaları, token'lar, reset, tipografi ölçeği.
 *
 *   fonts.css             @font-face — yerel yüzler, CDN yok (D-029)
 *   tokens.brand.css      kimlik  — lacivert, kâğıt, studio kabuğu, AI vurgusu
 *   tokens.semantic.css   işlev   — durum, uyarı, seçim, bbox
 *
 * Kural: bir marka rengi asla durum rengi değildir, bir durum rengi asla
 * markalama için kullanılmaz. Semantic dosyası brand dosyasına referans
 * vermez — bağlarsak markanın değişmesi editörün durum renklerini kaydırır,
 * ki öncekinde bu renkler JavaScript'in içine gömülü olduğu için yeniden
 * temalandırma backlog'un en ağır maddesi olmuştu.
 *
 * Üçüncü kural: kanvasın içinde marka rengi bulunmaz — ne lacivert, ne coral.
 * Lacivert resmî belgelerdeki mühür ve imza mavisiyle, coral ise kırmızı
 * damgayla aynı hue bölgesinde.
 *
 * Bu dosyada tek bir ham renk değeri yoktur. Renk gerektiren her şey token
 * okur; `frontend/tools/check_design.py` bunu doğruluyor.
 *
 * Tam spesifikasyon: docs/DESIGN.md · kararlar: D-028 (renk), D-029 (tipografi)
 */

/* Yüzler önce: bir aile tanımlanmadan ona atıfta bulunulamaz. */
@import url("./fonts.css");
@import url("./tokens.brand.css");
@import url("./tokens.semantic.css");
/* Roller — sayfa zemini, kart, üst çubuk, eylem, seçim — ve koyu modda
 * hangi rengin hangi işi yaptığı. Bileşenler markayı değil bunu okur. */
@import url("./tokens.mode.css");

/* Eleman varsayılanları bileşenlerden önce: eşit ağırlıkta bileşen
 * kazansın (#340, reset.css). */
@import url("./reset.css");

/* Bileşenler. Hepsi buradan geliyor, yüzey başına seçilerek değil: dördü
 * toplam 7 KB, ve dört index.html'in kendi listesini tutması, birinin
 * diğerlerinden sapması demektir. Yüzey büyüdüğünde bölünür. */
@import url("./components/lockup.css");
@import url("./components/site-header.css");
@import url("./components/footer.css");
@import url("./components/button.css");
@import url("./components/field.css");
@import url("./components/card.css");
@import url("./components/badge.css");
@import url("./components/alert.css");
@import url("./components/table.css");
@import url("./components/sheet.css");
@import url("./components/icon.css");
@import url("./components/verify.css");
@import url("./components/env.css");

/* ── Ölçek · DESIGN.md §7 ─────────────────────────────────────────────
 * Değerler burada token olarak duruyor ki bileşen CSS'i boyutu da renk
 * gibi okusun, kendi sayısını uydurmasın. Serif okunanı taşır, sans
 * kullanılanı — ölçeğin her satırı bu ayrımın bir tarafında.
 */
:root {
  --cw-text-display:    clamp(2.6rem, 1.6rem + 4vw, 4.5rem); /* 42 → 72 (D-060) */
  --cw-lh-display:      1.05;
  --cw-text-h1:         clamp(2rem, 1.5rem + 1.6vw, 2.75rem); /* 32 → 44 (D-060) */
  --cw-lh-h1:           1.12;  /* iki satırlık Türkçe başlıkta İ, Ğ üst satıra değmesin */
  --cw-text-h2:         clamp(1.5rem, 1.25rem + .8vw, 1.9rem); /* 24 → 30 (D-060) */
  --cw-lh-h2:           1.2;
  --cw-text-read:       1.0625rem;  /* 17 — serif gövde, okunan metin */
  --cw-lh-read:         1.65;
  --cw-text-ui-title:   1rem;       /* 16 */
  --cw-lh-ui-title:     1.40;
  --cw-text-ui:         0.9375rem;  /* 15 — sans gövde, arayüz (D-060: 14 küçük kalıyordu) */
  --cw-lh-ui:           1.50;
  --cw-text-data:       0.8125rem;  /* 13 */
  --cw-lh-data:         1.45;
  --cw-text-label:      0.6875rem;  /* 11 */
  --cw-lh-label:        1.00;
  --cw-tracking-label:  0.06em;
  --cw-text-tech:       0.78125rem; /* 12.5 */
  --cw-lh-tech:         1.45;

  /* Okuma genişliği. Serif gövde 17px'te bu genişlikte ~68 karakterde
   * satır başına döner; daha geniş bir sütunda göz satır sonundan satır
   * başına dönerken yerini kaybeder. */
  --cw-measure: 68ch;
}

/* ── Gizli olan gizli ───────────────────────────────────────────────────
 * Eleman varsayılanları reset.css'te, bileşenlerden önce (#340). Burada,
 * bileşenlerden sonra, yalnızca bir sözleşme kaldı. */

/* `hidden` niteliği gerçekten gizlesin.
 *
 * Tarayıcının kendi kuralı `[hidden] { display: none }` ve özgüllüğü (0,1,0);
 * ama `display` yazan HERHANGİ bir yazar kuralı onu yeniyor, çünkü yazar
 * katmanı kullanıcı-ajanı katmanının üstünde. `.cw-form { display: flex }`
 * tam olarak bunu yapıyordu: kayıt başarılı olduğunda `form.hidden = true`
 * çalışıyor, nitelik konuyor, ve form ekranda kalıyordu — müşteri doldurduğu
 * formun altında "hesap açıldı" yazısını görüp formu tekrar gönderiyordu.
 * Teklif panelinde de aynısı: teklif geliyor, form gitmiyor.
 *
 * `!important` burada doğru araç: bu bir varsayılan değil, bir sözleşme.
 * `hidden` yazan kod o elemanın gizlendiğini varsayıyor ve hiçbir düzen
 * kuralının o varsayımı sessizce bozmaması gerekiyor. */
[hidden] {
  display: none !important;
}


/* ── Tipografi sınıfları · DESIGN.md §7 ───────────────────────────────
 * Sınıf adları rolün kendisi: "büyük" ya da "kalın" değil — "okunan
 * gövde", "arayüz gövdesi". Bir bileşen hangi rolü taşıdığını söyler,
 * boyutunu değil.
 */

.cw-display {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-display);
  line-height: var(--cw-lh-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  /* Newsreader'ın opsz ekseni 6–72 ve tarayıcı onu punto boyuna göre
   * kendisi seçiyor: büyük başlıkta ince çizgi, küçükte dolgun (D-060).
   * Source Serif'teki elle "opsz" 60 ayarı artık gerekmiyor. */
  font-optical-sizing: auto;
  text-wrap: balance;
}

.cw-h1 {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-h1);
  line-height: var(--cw-lh-h1);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.cw-h2 {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-h2);
  line-height: var(--cw-lh-h2);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Okunan gövde: açıklama, e-posta, sertifika. Serif, çünkü bu üründe
 * serif belge ve otorite demek — rakiplerin tamamı SaaS grotesk'inde
 * (DESIGN.md §1). */
.cw-body-read {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-read);
  line-height: var(--cw-lh-read);
  font-weight: 400;
  max-width: var(--cw-measure);
}

.cw-ui-title {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui-title);
  line-height: var(--cw-lh-ui-title);
  font-weight: 600;
}

.cw-ui-body {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  line-height: var(--cw-lh-ui);
  font-weight: 400;
}

/* Veri: tablo, tutar, sayfa sayısı. tabular-nums burada da açık, çünkü
 * bir tutar tablonun dışında da (kartta, özet satırında) hizalı olmalı. */
.cw-data {
  font-family: var(--cw-font-figures);
  font-size: var(--cw-text-data);
  line-height: var(--cw-lh-data);
  font-weight: 500;
  font-variant-numeric: var(--cw-numeric-tabular);
}

.cw-label {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-label);
  line-height: var(--cw-lh-label);
  font-weight: 600;
  letter-spacing: var(--cw-tracking-label);
  text-transform: uppercase;
}

/* Teknik: hash, sipariş kimliği, MRZ, log. Para BURAYA GİRMEZ — bu yüzde
 * ₺ yok (assets/fonts/README.md), ve tutarlar zaten Inter + tabular-nums. */
.cw-tech {
  font-family: var(--cw-font-mono);
  font-size: var(--cw-text-tech);
  line-height: var(--cw-lh-tech);
  font-weight: 400;
}

/* ── Erişilebilirlik ──────────────────────────────────────────────────*/

/* Sayfanın ölçüsü. Dört yüzey de aynı kenardan başlıyor — bir kabuğun işi
 * sabit durmak, ve sayfa değişince kelime işaretinin yer değiştirmesi
 * ziyaretçiye başka bir siteye geçtiğini söyler.
 *
 * Yatay pay UZUN yazımla, `padding: 0 clamp(...)` diye DEĞİL. Bu sınıf hep
 * ikinci bir sınıfla aynı elemanda duruyor (`class="cw-wrap cw-footer__inner"`)
 * ve o sınıf dikey boşluğu veriyor. Kısaltma, yazmadığı yarıyı da yazar:
 * `public/css/public.css` içindeyken sırası önceydi ve zararsızdı, buraya
 * taşınınca bileşen importlarından SONRA geldi ve alt bilginin 3rem'lik üst
 * boşluğunu sıfırladı — alt bilgi bir anda yapışık duruyordu.
 *
 * Uzun yazımla böyle bir şey mümkün değil: bu kural dikey boşluk hakkında
 * hiçbir şey söylemiyor, o yüzden sırası da önemsiz.
 *
 * Aynı tuzağın diğer yönü: bunu kullananlar da dikey boşluğu kısaltmayla
 * yazmamalı — `padding: 3rem 0` buradaki yatay payı sıfırlar ve 1280
 * piksellik bir ekranda başlık sol kenara yapışır. */
.cw-wrap {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding-left: clamp(1rem, 3vw, 2.25rem);
  padding-right: clamp(1rem, 3vw, 2.25rem);
}

/* Bölüm etiketi. Serif bir başlığın yerine geçmiyor — bir bölümün ne
 * olduğunu söyleyen küçük bir üst satır.
 *
 * Ölçek sınıflarının yanında, `public/css/public.css` içinde değil: üçüncü
 * kez aynı şey oldu — `.cw-wordmark` ve `.cw-locale` da oradaydı ve müşteri
 * yüzeyi aynı işaretlemeyi kullanıp o dosyayı yüklemiyordu. Bir tipografik
 * rol bir sayfaya ait değil. */
.cw-eyebrow {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-ground-400);
}

/* Görsel olarak gizli, ekran okuyucuya açık. Hata mesajları rengi tek
 * başına kullanamaz (DESIGN.md §6.1); simge + metin kuralının metin
 * yarısı bazen yalnızca burada durur. */
.cw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Bileşenler `components/` altında ve yukarıdan import ediliyor. Orada
 * olanlar ilk yüzeyin gerçekten istedikleri: düğme, alan, kart, uyarı.
 * Rozet, tablo, modal henüz yok — kullanılmayan bir bileşen kitaplığı,
 * bakımı olan ölü koddur. */