/*
 * VİTRİN — yerleşim (plans/WEB_SITESI_PROGRAMI.md §4).
 *
 * Jetonlar ve taban stiller (body, h1, düğme, .kart, a.baglanti) /stil.css'ten gelir — o dosya
 * panelin `panel/src/stil.css` dosyasının deploy kopyasıdır. BURADA HAM RENK YOK: her renk
 * `var(--…)`. Boşluk 4 px ölçeği (4 8 12 16 24 32 48 64), yazı ölçeği (13 14 16 20 24 32),
 * yarıçap (6 10 16 999) — TASARIM_SISTEMI.md §4–§5; `scripts/kalite/tasarim.py` bu dosyayı da tarar.
 *
 * Süs yok: gradyan, gölge, animasyon (§8). Sayfa JS'siz okunur.
 */

/* Atlama bağlantısı: yalnız klavye odağında görünür (ekran okuyucu ve klavye kullanıcısı). */
.atla {
  position: absolute;
  left: -999px;
  top: 16px;
  z-index: 20;
}

.atla:focus {
  left: 16px;
}

.ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;
}

.ust nav {
  display: flex;
  gap: 8px;
}

/* Düğme metni kırılmaz: 390 px'te "Giriş yap" iki satıra bölünüyordu (yerel önizleme, 21.09). */
.ust nav .baglanti,
.eylemler .baglanti {
  white-space: nowrap;
}

.marka {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.marka img {
  display: block;
  height: 40px;
  width: auto;
}

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

main > section {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

main > .kahraman {
  padding: 32px 0 48px;
  border-top: 0;
}

.ustbaslik {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kahraman h1 {
  max-width: 720px;
}

.giris {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 20px;
}

.eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}

/* Sektör satırı: kimin için olduğunu sayar (Sabri 21.09 — yakın sektörler). */
.sektorler {
  max-width: 640px;
  margin: 0;
  color: var(--text-secondary);
}

/* Bölüm başlığı: §4 title 24/600, ana metin rengi (stil.css'teki h2 kart başlığı içindir). */
main h2 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 600;
}

.aciklama {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--text-secondary);
}

/* ⛔ KUTU BİR ANLAM TAŞIMIYORSA KALKAR (Sabri 22.09).
   Sayfa baştan sona çerçeveydi: altı yetenek, üç adım, dört "yakında" maddesi — hepsi kutu.
   Kutu bir SINIR çizer; sınır ancak karşılaştırılan ya da seçilen şeyler için anlamlıdır.
   Bir yetenek listesinde karşılaştırma yoktur, o yüzden çerçeve bilgi taşımaz: yalnız
   "burası bir kart" der ve her SaaS şablonunda aynı göründüğü için sayfayı kimliksizleştirir.
   Ayrımı artık BOŞLUK yapıyor — daha sessiz ve daha okunur.
   ⛔ İSTİSNA: fiyat paketleri (.paket) kutulu KALIR — orada iki seçenek yan yana
   karşılaştırılıyor ve sınır gerçekten bilgi taşıyor. */
.kartlar,
.farklar,
.adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Çerçeve kalkınca ayrımı boşluk taşır: 16 → 32 (boşluk ölçeği §4). */
  gap: 32px;
  margin: 0;
  padding: 0;
}

/* ⛔ `.kart` panelin stil.css'inden geliyor (tek kaynak) ve orada kutu OLMALI: panelde kart,
   birbirinden bağımsız veri bloklarını ayırır. Vitrinde ise yalnız bir yetenek listesi —
   sınır yok, o yüzden çerçeve de yok. Ezme `.kartlar` altında kalıyor; `.paket` (fiyat)
   `.paketler` içinde olduğu için bundan ETKİLENMEZ ve kutulu kalır. */
.kartlar .kart {
  background: none;
  border: 0;
  padding: 0;
}

.kart h3,
.farklar dt,
.adimlar h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.kart p,
.farklar dd,
.adimlar p {
  margin: 0;
  color: var(--text-secondary);
}

.adimlar {
  counter-reset: adim;
  list-style: none;
}

.adimlar li {
  position: relative;
  /* Sol dolgu numara diski için; kutu yok — diskin kendisi zaten ayırıyor. */
  padding: 0 0 0 48px;
}

/* Adım numarası: altın disk, siyah rakam — renk + rakam birlikte (§2.1). */
.adimlar li::before {
  counter-increment: adim;
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Fiyat — iki paket, tek fark personel sayısı (Sabri kararı 21.09). Rakam tabular. */
.paketler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 640px;
}

.paket-kapsam {
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.paket-fiyat {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* K3 E-11: 32/700 yalnız h1'in; vurgulu rakam title boyunda (24/700). */
.paket-fiyat .tutar {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.paket-fiyat .donem {
  color: var(--text-secondary);
}

/* Fiyat altı not: ikincil metin, gövde boyu (§4 body). */
.not {
  max-width: 640px;
  margin: 16px 0 0;
  color: var(--text-secondary);
}

.yol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "Yakında" etiketi: her satır kendi başına okunur (K4 A-12). Rozet: radius/sm, label 14/500. */
.yol .etiket {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

/* Sol çizgi KALIR: o bir süs değil, "bu bir madde" diyen ayraç. Çerçeve ve arka plan
   gider — madde zaten "Yakında" rozetiyle işaretli, üçüncü bir işarete gerek yok. */
.yol li {
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--accent);
}

.alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

.alt p {
  margin: 0;
}

/* Künye — 6563 sayılı Kanun m.3: hizmet sağlayıcı kimlik bilgileri elektronik ortamda sunulur.
   Alt bilgide, ikincil metin boyunda; caption (13) değil body (16) çünkü yasal bilgi okunmalı. */
.kunye {
  display: inline-block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ⛔ KÜNYEDEKİ E-POSTA BAĞLANTI DEĞİL, DÜZ METİN (21.09).
   Önce `a.duz-baglanti` yazmıştım ve gerekçem "künye bilgidir, eylem değil" idi. K2 canlıda
   ölçtü: 160×19 px tıklanabilir öğe, 44 px kuralının ihlali. Gerekçe kuralı esnetmez —
   tıklanabilir olan her şey parmakla vurulabilmeli. Adres yazı olarak duruyor; ONA YAZMAK
   isteyen için alt bilgide 44 px'lik düğme zaten var. */

/* Alt bilgi düğmeleri: 8 px'te yan yana iki hedef parmakla karışıyordu (K4 tur 7 A-11). */
.alt nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}