/* =============================================================================
   I-ORBITX web sitesi — "DENETİM RAPORU ESTETİĞİ" (Faz C)
   -----------------------------------------------------------------------------
   YALNIZCA public web sitesi (base_public.html → <div class="wsite-surface">).
   Uygulama (/app/) ve admin bu dosyayı yüklemez VE bu dosyadaki chrome
   override'ları `.wsite-surface` ile kapsamlanır → app'in ortak chrome'u
   (chrome.css) DEĞİŞMEZ. Renk/tipografi/motion token'ları tokens.css'in
   website katmanından (--w-*) gelir.

   Bağlayıcı anayasa: .claude/skills/iorbitx-design/SKILL.md.
   Kimlik özü (§0): beyaz kağıt + disiplinli lacivert + tek kırmızı vurgu,
   ağır grotesk başlık / ince Inter lead kontrastı, gerçek veri, açık zemin
   hâkim + nadir koyu bant. İndigo/mavi/mor/gradient bu dosyada YASAK.
   ============================================================================= */

/* Website gövde fontu + zemin. `.wsite-surface` website kapsam işaretçisidir. */
.wsite-surface {
  background: var(--w-canvas);
  color: var(--w-ink);
  font-family: var(--w-font-sans);
  font-size: 17px;          /* skill §2: body 17px, okuma temposu */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   1) CHROME OVERRIDE — üst bar + header + footer (yalnız .wsite-surface altında)
   chrome.css'in indigo/gradient değerlerini website için denetim-raporu diline
   çevirir; app chrome'u (kapsam dışı) dokunulmadan kalır.
   ============================================================================= */

/* TEK RAY (skill §3 / §11, KARAR 2026-07-22) — sitedeki TÜM yatay hizanın tek
   kaynağı. Logo, nav, hero copy, bölüm içeriği ve footer kolonları bu raydan
   başlar; kabuk = ray + iki yan gutter. Full-bleed bantlar zemini kenardan
   kenara taşır ama içeriklerini yine bu raya oturtur (breakout formülü aşağıda,
   `calc(50vw - var(--w-rail)/2)`).
   HAM SABİT YASAK: 1120 / 560 değerleri başka hiçbir kurala yazılmaz — hepsi
   bu token'dan türer. (ESKİ: kabuk 1440 + içerik 1120 → 136px girinti.) */
:root { --w-rail: 1392px; }   /* 1120 → 1392 (KARAR 2026-07-22, Murat — estetik: geniş ray) */
.wsite-surface .wsite-container { max-width: calc(var(--w-rail) + 2 * var(--space-5)); }

/* --- Üst bar (utility): koyu lacivert şerit, ikincil linkler --- */
.wsite-surface .wsite-utilitybar {
  background: var(--w-navy);
  color: var(--w-on-dark-muted);
}
.wsite-surface .wsite-utilitybar a,
.wsite-surface .wsite-utilitybar .wsite-util-btn { color: var(--w-on-dark-muted); }
.wsite-surface .wsite-utilitybar a:hover,
.wsite-surface .wsite-utilitybar .wsite-util-btn:hover { color: var(--w-on-dark); }
.wsite-surface .wsite-lang-trigger { color: var(--w-on-dark-muted); }
.wsite-surface .wsite-lang-trigger:hover { color: var(--w-on-dark); }
/* Footer varyantı (.is-up) AÇIK paper zeminde durur — koyu zemin rengi orada
   1.87:1 veriyordu (WCAG AA ihlali, kapı 5 ölçümü 2026-08-01). Footer
   linkleriyle AYNI tokena çekildi: 5.73:1 (hover --w-ink, 13.08:1).
   Üst bardaki koyu zemin varyantı DEĞİŞMEDİ (7.01:1, geçiyor). */
.wsite-surface .wsite-langswitch.is-up .wsite-lang-trigger { color: var(--w-ink-muted); }
.wsite-surface .wsite-langswitch.is-up .wsite-lang-trigger:hover { color: var(--w-ink); }

/* --- Ana menü (header): açık kağıt zemin, hairline alt çizgi --- */
.wsite-surface .wsite-header {
  background: var(--w-canvas);
  border-bottom: 1px solid var(--w-hairline);
}
/* Logo — metin wordmark, canlı site logosunun birebir kopyası (Montserrat 600 subset). */
.wsite-surface .wsite-logo {
  display: inline-flex; align-items: center;
  text-decoration: none; line-height: 1;
}
/* Wordmark — CANLI SİTE LOGOSUNUN GÖRSEL 1-1 KOPYASI (replikasyon, tasarım işi değil):
   Montserrat variable 650 instance (prod logoya stroke-yoğunluğu eşitliğiyle seçildi —
   650 %3.7 fark, 600 %5.0'a göre daha yakın; ölçüm: wm_compare.py --prod). 28px/40px
   satır, letter-spacing 0, SÜSLEME YOK (sıkı tracking / kırmızı tire / 800 / optik ayar
   hepsi iptal). Tek renk: açık header'da navy, koyu bağlamda beyaz. Metin zaten
   "I-ORBITX" (uppercase glif), text-transform yok. */
.wsite-wordmark {
  font-family: "IORBITX Wordmark", var(--w-font-display), sans-serif;
  font-weight: 650; font-size: 28px; line-height: 40px;
  letter-spacing: 0;
  color: var(--w-ink); white-space: nowrap;
}

/* Ekran-okuyucu için görünmez tam ad. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Header standardı (KARAR 2026-07-20, HİZA MODELİ = BUTON-BAĞIMSIZ):
   1) LOGO beyaz bant içinde INK-BAZLI DİKEY ORTALI (cap-top→bant-üstü == taban→bant-altı,
      ±1px; ink'ten ölçülür, line-box'tan değil).
   2) NAV tabanı == LOGO tabanı (nav, logonun alt hizasından başlar).
   3) BUTON bağımsız — hiçbir hiza hedefi butona referans vermez; buton align-self:center,
      16/40/16 SABİT, dokunulmaz.
   Yalnız website header'ı (`.wsite-surface`); üst bar + app/admin dokunulmaz.
   Mekanizma: logo (28px) + nav (15px) `align-items:baseline` ile önce KENDİ aralarında tek
   yazı-tabanında (bu, nav↔logo taban eşitliğini bedavaya verir); sonra grup `translateY`
   ile bant içinde logo ink'i ortalanacak kadar indirilir (transform layout'u/butonu etkilemez;
   TR y/p descender'ları logo tabanının altına doğal sarkar). translateY = (taban-nefesi −
   cap-top-nefesi)/2, header_audit.py ile ölçülüp sabitlendi (16.25px; ölçülen ortalılık Δ0.5px
   = piksel-grid tabanı). Eski "buton-etiket tabanına hizala" modeli iptal.
   Logo-nav boşluğu 48px = nav öğe boşluğunun (--space-5=24px) 2 katı, token'dan. */
.wsite-surface .wsite-header .wsite-container {
  align-items: baseline;
  gap: calc(2 * var(--space-5));   /* 48px: logo <-> ilk nav öğesi (nav gap'in 2 katı) */
}
/* HEADER'A KAPSAMLI (2026-07-22): bu hiza kuralı yalnız header bandı içindir.
   Kapsamsız bırakılırsa footer'ın küçük logosuna da sızar (16.25px aşağı iter). */
.wsite-surface .wsite-header .wsite-logo,
.wsite-surface .wsite-header .wsite-nav {
  align-self: baseline; padding-bottom: 0;
  transform: translateY(16.25px);   /* logo ink-bazlı bant içinde dikey ortalı (ölçüldü; Δ0.5px = piksel tabanı) */
}
/* CTA butonu ÇAPA — dikey ortada, sabit (dokunulmaz). */
.wsite-surface .wsite-header-cta { align-self: center; }
/* Mobil (wrap): tek-taban-çizgisi kuralı ARANMAZ — dikey stack; transform sıfırlanır. */
@media (max-width: 820px) {
  .wsite-surface .wsite-header .wsite-logo,
  .wsite-surface .wsite-header .wsite-nav { transform: none; }
}

.wsite-surface .wsite-nav a {
  color: var(--w-ink-muted); font-weight: 400;
}
.wsite-surface .wsite-nav a:hover { color: var(--w-accent); }
/* Aktif sayfa vurgusu — lacivert + kırmızı alt işaret (kicker diliyle). */
.wsite-surface .wsite-nav a.is-active {
  color: var(--w-ink); font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--w-accent);
}
/* Header CTA (kontur) — header yüksekliğine (72px) oturacak kompakt ölçü. */
.wsite-surface .wsite-header-cta .btn {
  height: 40px; min-height: 40px; padding: 0 20px; font-size: 13px;
}

/* --- Footer: rapor alt-bandı — üstte 3px kırmızı şerit, açık kağıt zemin
   (skill §5). 3 kolon (Services/Company/Account); alt satır solda ©+konum,
   sağda Privacy·Terms + dil (madde 6). --- */
.wsite-surface .wsite-footer {
  background: var(--w-paper);
  border-top: 3px solid var(--w-accent);
  color: var(--w-ink-muted);
  line-height: 1.5;
}
/* RAY BİRLEŞTİRME (KARAR 2026-07-20, tek-ray kararıyla sadeleşti 2026-07-22):
   footer bandı (paper zemin + 3px kırmızı şerit) full-bleed KALIR; içerik
   blokları rayda durur. Rayı artık kabuk (.wsite-container) verdiği için
   burada AYRICA max-width/auto-margin yazılmaz — yazılırsa içerik kabuğun
   içinde ikinci kez ortalanır ve girinti geri gelir (ESKİ: max-width:1120 +
   auto margin → sol kenar 160px @1440). */
/* 4 kolon (K-D, KARAR 2026-07-22): K1 marka+slogan · K2 Explore · K3 Company
   · K4 Account & Legal. chrome.css'in repeat(4)'ü ile aynı — override yok. */
.wsite-surface .wsite-footer .wsite-footer-heading {
  font-family: var(--w-font-sans);
  color: var(--w-ink); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px;
}
.wsite-surface .wsite-footer a { color: var(--w-ink-muted); }
.wsite-surface .wsite-footer a:hover { color: var(--w-accent); }
/* Public footer 5 kolon (KARAR 2026-07-24): marka + 4 menü (Explore · Company ·
   Account · Legal). YALNIZ .wsite-surface — base_app footer'ı chrome.css'in
   repeat(4)'ünde kalır (4 kolonu var). Bu kural chrome.css'in mobil media
   kurallarından daha yüksek specificity'de olduğu için mobil kırılımlar da
   BURADA scope'lu tekrar edilir (≤820 → 2, ≤520 → 1; bkz. media blokları). */
.wsite-surface .wsite-footer-cols { grid-template-columns: repeat(5, 1fr); }
.wsite-surface .wsite-footer-bottom {
  border-top: 1px solid var(--w-hairline);
  color: var(--w-ink-muted);
}
.wsite-surface .wsite-footer-tagline { color: var(--w-ink); }
.wsite-surface .wsite-footer-tagline::before { color: var(--w-hairline); }
/* Alt satır sağ grubu: Privacy · Terms + dil seçici, sağa yanaşık. */
.wsite-surface .wsite-footer-legal {
  display: inline-flex; align-items: center; gap: 20px;
}
.wsite-surface .wsite-footer-legal a { color: var(--w-ink-muted); }
.wsite-surface .wsite-footer-legal a:hover { color: var(--w-accent); }
/* --- K1 marka kolonu (K-D): küçük wordmark + slogan satırı ---
   `align-items:flex-start` ZORUNLU: `.wsite-logo` inline-flex'tir ve kolon
   içinde germe (stretch) alırsa içeriği sağa kaçar (ölçüldü: logo.x=322 iken
   kolon/slogan x=160). Marka kolonu da tek raya oturmalı. */
.wsite-surface .wsite-footer-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
/* Küçük wordmark varyantı — header'daki 28px'in footer ölçüsü. Header logosunun
   dikey hiza transform'u (translateY) BURAYA SIZMAZ: o kural yalnız
   `.wsite-header .wsite-logo` kapsamındadır (bkz. header bloğu).
   `align-self` SIFIRLANIR: chrome.css `.wsite-logo`'ya `flex-end` veriyor (header
   taban hizası için); dikey kolonda bu logoyu SAĞA iter (ölçüldü: x=322 vs ray
   160). Footer logosu raya yaslanır. */
.wsite-surface .wsite-footer .wsite-logo { align-self: flex-start; padding-bottom: 0; }
.wsite-surface .wsite-logo--sm .wsite-wordmark { font-size: 20px; line-height: 1; }
.wsite-surface .wsite-footer-slogan {
  margin: 0; color: var(--w-ink-muted); font-size: 14px; line-height: 1.5;
  max-width: 30ch;
}
/* NOT (KARAR 2026-07-24): konum beyanı marka kolonundan © satırına taşındı
   (sloganı boğuyordu) — düz metin, footer-bottom muted tonunu miras alır.
   Eski `.wsite-footer-locality` (marka kolonu fine-print) kuralı ölü → silindi (§3.1/6). */
/* --- Dev şeridi (K-D): footer kolonlarından GÖRSEL OLARAK AYRIK ---
   chrome.css'in koyu-zemin renkleri açık kağıtta okunmaz; caption boyuna iner. */
.wsite-surface .wsite-footer-staff {
  border-top: 1px solid var(--w-hairline);
  font-size: 13px; color: var(--w-ink-muted);
}
.wsite-surface .wsite-footer-staff a { color: var(--w-ink-muted); }
.wsite-surface .wsite-footer-staff a:hover { color: var(--w-accent); }
.wsite-surface .wsite-footer-staff a + a::before { color: var(--w-hairline); }

/* Cookie şeridi — açık kağıt, hairline üst çizgi. */
.wsite-surface .wsite-cookie {
  background: var(--w-canvas);
  border-top: 1px solid var(--w-hairline);
  box-shadow: 0 -1px 0 var(--w-hairline);
}
.wsite-surface .wsite-cookie-text { color: var(--w-ink-muted); }

/* Dil menüsü paneli (açık kağıt) — website tonuna. */
.wsite-surface .wsite-lang-menu {
  background: var(--w-canvas); border-color: var(--w-hairline);
  box-shadow: var(--w-shadow-report);
}
.wsite-surface .wsite-lang-option { color: var(--w-ink); }
.wsite-surface .wsite-lang-option:hover { background: var(--w-paper); }
.wsite-surface .wsite-lang-option.is-active { color: var(--w-accent); font-weight: 700; }
.wsite-surface .wsite-lang-check { color: var(--w-accent); }

/* =============================================================================
   2) TİPOGRAFİ — 700/300 kontrastı (skill §2 ölçeği)
   ============================================================================= */
:root { --w-main-pad-y: 80px; }   /* main dikey nefes (skill §3) — CTA bandı bunu geri alır */
.wsite-main {
  padding-top: var(--w-main-pad-y); padding-bottom: var(--w-main-pad-y);
  text-align: left;
}

/* Başlıklar: Space Grotesk 700, cümle düzeni (UPPERCASE DEĞİL), saf lacivert mürekkep. */
.wsite-main h1, .wsite-main h2, .wsite-main h3, .wsite-main h4,
.wsite-hero h1, .wsite-page-title {
  font-family: var(--w-font-display);
  font-weight: 700; color: var(--w-ink);
  text-transform: none;
}
.wsite-main h1, .wsite-page-title {
  font-size: 40px; line-height: 1.10; letter-spacing: -0.01em; margin: 0 0 20px;
}
.wsite-main h2 {
  font-size: 40px; line-height: 1.10; letter-spacing: -0.01em; margin: 0 0 16px;
}
.wsite-main h3 {
  font-size: 24px; line-height: 1.25; letter-spacing: 0; margin: 0 0 8px;
}
.wsite-main h4 {
  font-size: 21px; line-height: 1.30; margin: 0 0 8px;
}
.wsite-page-title { margin-top: 0; margin-bottom: 32px; }

/* Gövde + lead. Lead = Inter 300, YALNIZ ≥19px (skill §2). */
.wsite-main p, .wsite-main li { font-size: 17px; line-height: 1.55; color: var(--w-ink); }
.wsite-main .lead {
  font-family: var(--w-font-sans); font-weight: 300;
  font-size: 21px; line-height: 1.45; color: var(--w-ink-muted); max-width: 60ch;
}
.wsite-main small { font-size: 14px; }

/* Gövde içi vurgu: kalın + koyu (kırmızı DEĞİL — kırmızı bütçesi §1). */
.wsite-main strong, .wsite-main b { font-weight: 700; color: var(--w-ink); }

/* Gövde içi normal link: lacivert + underline (skill §5). */
.wsite-main a {
  color: var(--w-ink); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.wsite-main a:hover { color: var(--w-accent); }

/* =============================================================================
   3) YÜZEY RİTMİ — bölüm sistemi (skill §3)
   Bölümler tam-genişlik zemin blokları; içerik TEK RAYDA. Ayraç = zemin değişimi
   (--canvas ↔ --paper), <hr>/border YOK.
   ============================================================================= */
/* Bölümün kendi ölçüsü YOK: rayı kabuk (.wsite-container) verir — tek kaynak.
   (ESKİ: .wsite-section max-width:1120 + margin:auto ile kabuğun içinde ayrıca
   ortalanıyordu; 136px girintinin kaynağı buydu. KARAR 2026-07-22.) */

/* Bölüm standart mesafesi: 80px (mobil 48px). Elle margin yazılmaz. */
:root { --w-section-gap: 80px; }
.wsite-main .wsite-container > * + * { margin-top: var(--w-section-gap); }
.wsite-section > :first-child,
.wsite-section > :first-child > :first-child,
.auth-wrap > :first-child,
.auth-wrap > :first-child > :first-child { margin-top: 0; }

/* --- Kicker imza deseni (skill §3) — 32×3px tek renk kırmızı çubuk + eyebrow. --- */
.wsite-kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 0;
}
.wsite-kicker::before {
  content: ""; flex: 0 0 auto;
  width: 32px; height: 3px; background: var(--w-accent);
}
.wsite-kicker-label,
.wsite-eyebrow {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-ink-muted);
  line-height: 1.2;
}

/* Bölüm başlık bloğu — sola dayalı, KONTEYNER genişliğinde (dar değil). Dar okuma
   ölçüsü (~65ch) yalnız paragraf/lead metnine uygulanır, bloğa değil (madde 1). */
.wsite-section-head { text-align: left; margin-bottom: 32px; }
.wsite-section-head p { color: var(--w-ink-muted); }
/* Dar okuma ölçüsü — yalnız akış paragrafları ve lead. Başlık, kart, band değil. */
.wsite-main p, .wsite-main .lead { max-width: 65ch; }
/* Kart/stat içi metin kendi kutu genişliğinde — dar ölçü uygulanmaz. */
.wsite-card p, .wsite-stat p { max-width: none; }

/* =============================================================================
   4) HERO BANDI — koyu lacivert kapak bandı (skill §5)
   TEK KOLON + TÜM SAYFALARDA TEK YÜKSEKLİK (KARAR 2026-07-22, K-C).
   Sağ görsel slotu beklemede (§6); hero yüksekliği sayfaya göre değişmez —
   sayfaya özel yükseklik yaması YASAK (§8/11). İçerik dikey ortalı.
   ============================================================================= */
/* TEK HERO YÜKSEKLİĞİ — Home altın sayfasında ÖLÇÜLEREK belirlenir: Home en uzun
   içerikli hero'dur, değer ona göre kilitlenir ki hiçbir sayfa taşmasın ve hepsi
   AYNI yüksekliğe otursun. Sayfaya özel yükseklik yaması YASAK (skill §8/11).
   2026-07-22: 560px (kopya 431 + 2×64 padding = 559).
   2026-08-02: 576px — hero overhaul'da uyumluluk şeridi eklendi (+46px: 18px
   satır + 28px alt margin), Home kopyası 446.59'a çıktı ve 560'ı 14.59px aştı.
   Tek global token büyütüldü; alternatif olan sayfaya özel yama yasaktır. */
:root { --w-hero-min: 576px; }
.wsite-hero {
  background: var(--w-navy);
  color: var(--w-on-dark);
  border-bottom: 0;
}
.wsite-hero .wsite-container {
  padding-top: 64px; padding-bottom: 64px;
  min-height: var(--w-hero-min);
  display: flex; flex-direction: column; justify-content: center;
}
.wsite-hero-copy { max-width: none; }
/* Hero metin RENKLERİ .wsite--dark scope'undan gelir (hero bu sınıfı taşır) — burada
   yalnız ölçü/tipografi. Renk tek kaynak scope'ta (koyu bağlam kuralı). */
.wsite-hero .wsite-eyebrow { margin-bottom: 16px; display: block; }
/* HERO H1 — 2 SATIR KURALI (KARAR 2026-08-01, Murat; design §9/11b-ek2).
   §5'in "H1 ≤ 2 satır" kuralı genişlikle sağlanır, metin kısaltarak değil.
   Ölçüyü belirleyen: TR/home başlığı ("Bulutunuzu kendi bulutumuz gibi
   işletiyoruz.", 44 karakter — 22 başlığın en uzunu) — @1440'ta 14ch'te
   3 satır, 19ch'te hâlâ 3, 20ch'te 2'ye düşüyor. Eşik tam 20ch olduğu için
   bir kademe pay bırakıldı: 22ch (=855px).
   TEK GLOBAL değer — sayfaya özel max-width YAZILMAZ (§8/11).
   Lead'in 94ch'ini (1219px) AŞMAZ: hero blok hizası korunur. */
.wsite-hero h1 {
  font-family: var(--w-font-display); font-weight: 700;
  font-size: 60px; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0 0 20px; max-width: 22ch;
}
/* HERO LEAD — 3 SATIR KURALI (KARAR 2026-08-01, Murat; design §9/11b-ek).
   Metin kısaltılmaz, genişlik artar. Ölçüyü belirleyen: EN/services lead'i
   (341 karakter, 18 lead'in en uzunu) — @1440'ta 46ch'te 7 satır, 92ch'te
   4 satır, 93ch'te 3'e düşüyor. Eşik tam 93ch olduğu için bir kademe pay
   bırakıldı: 94ch (=1219px, tek rayın 1392px'i içinde kalır).
   TEK GLOBAL değer — sayfaya özel max-width YAZILMAZ (§8/11).
   §2'nin ~65ch okuma ölçüsü hero lead'i bağlamaz (bilinçli taviz). */
.wsite-hero .lead {
  font-family: var(--w-font-sans); font-weight: 300;
  font-size: 21px; line-height: 1.45;
  max-width: 94ch; margin: 0 0 28px;
}
/* UYUMLULUK ŞERİDİ (KARAR 2026-08-02) — hero'da lead ile butonlar arasında.
   Eyebrow ailesinden (Inter 700, uppercase) ama ondan AYRIŞIR: 12px + daha
   geniş tracking (.12em) + on-dark-muted; ikisi aynı hero'da yan yana durduğu
   için ritim farkı bilinçli. Renk `--w-on-dark-muted`: navy üstünde ölçülen
   kontrast 7.01:1 (AA 4.5 eşiğinin üstünde). Kırmızı YOK — hero kırmızı
   bütçesi primary butondadır (design §8/8). */
.wsite-hero-compliance {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--w-on-dark-muted);
  line-height: 1.5; margin: 0 0 28px; max-width: 94ch;
}
.wsite-hero .wsite-note { font-size: 14px; margin-top: 20px; }
.wsite-hero .wsite-actions { margin-top: 0; }

/* Yasal hero (Privacy/Terms) — metin ölçüsü dar; yükseklik/kolon artık
   standarttan gelir (tek kolon zaten), yalnız okuma genişliği ayrışır. */
.wsite-hero--legal .wsite-hero-copy { max-width: 60ch; }

/* --- BEKLEMEDE (skill §6, KARAR 2026-07-22; teyit 2026-08-05) — hero sağ görsel slotu ---
   Hero'lardan `wsite-hero-figure` + `wsite-hero-placeholder` markup'ı KALDIRILDI
   (tek kolon kararı). ŞU AN CANLI KULLANIM YOK: ölçüldü (2026-08-05), hiçbir
   şablonda bu sınıflar geçmiyor — Case studies gövdesindeki Faz 4.4 slotu da
   henüz açılmadı (eski yorum "hâlâ kullanıyor" diyordu, bayattı).
   Kurallar yine de SİLİNMEDİ: slot Faz 4 asset'leri gelince (a) gövdede, (b)
   hero'da sayfa-bazlı Murat kararıyla açılacak — KARAR 2026-08-05 ile korundu.
   `tools/visual/kunye_audit.py` + `portrait_audit.py` slotun KAPALI olduğunu bu
   sınıflarla ispatlıyor; blok silinirse o iki kontrol sessizce anlamsızlaşır. */
.wsite-hero-figure { position: relative; }
.wsite-hero-figure img {
  display: block; width: 100%; height: auto;
  box-shadow: var(--w-shadow-report);   /* sistemdeki TEK gölge */
}
/* Yer tutucu ölçüsü: hero'nun sağ kolonu için 4/3'tü; tek-ray + tek-kolon
   düzeninde (D1) tam rayı kaplayınca 1392×1044'e şişiyordu. Gövde slotunda
   okuma ölçüsüne çekilir — asset gelince gerçek render kendi oranını getirir. */
:root { --w-figure-max: 720px; }   /* gövde görsel/yer tutucu okuma ölçüsü (D3/3) */
.wsite-hero-figure { max-width: var(--w-figure-max); }
.wsite-hero-placeholder {
  aspect-ratio: 4 / 3; width: 100%;
  background: var(--w-navy-deep);
  border: 1px solid var(--w-hairline-dark);
  box-shadow: var(--w-shadow-report);
  display: flex; align-items: center; justify-content: center;
}
.wsite-hero-placeholder span {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-on-dark-muted);
}

/* --- About KÜNYE bloğu (KARAR 2026-07-23, Murat) — hero'dan sonra iki kolon:
   solda portre (~1/3), sağda yapılandırılmış künye. ≤820px tek kolon (portre
   üstte). Görsel: radius 0 + 1px hairline = rapor kenarı disiplini (§4 düz
   varsayılan) · GÖLGE YOK (tek gölge yalnız rapor/ürün görseline, §4). <figure>
   margin RESET (§9-11d). Tüm değerler mevcut --w- ve --space- token'larından.
   (ESKİ: tek kolon figure + figcaption; E1 portre turunda. Künyede iki kolona
   evrildi, figcaption satırlara taşındı.) */
/* --- İNSAN KARTI STANDARDI (KARAR 2026-07-23 rev3, §11 EK) — sitede insan
   gösteren HER blok bu deseni kullanır (Murat künyesi + Anthony referansı).
   Foto solda SABİT 494px kare (tüm insanlarda AYNI gösterim boyutu), radius 0
   + hairline + GÖLGE YOK, sol ray hizası; sağda kimlik metni. Sağ kolon üç
   grup, gruplar arası --space-6 nefes (§3). ≤820px tek kolon, foto üstte. --- */
.wsite-person {
  display: grid;
  grid-template-columns: 494px minmax(0, 1fr);   /* foto sabit + kalan */
  gap: var(--space-6);
  align-items: start;
  margin: 0;
}
.wsite-person-figure { margin: 0; }   /* <figure> margin reset (§9-11d) */
.wsite-person-figure img {
  display: block; width: 494px; height: 494px; max-width: 100%;
  aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--w-hairline);   /* rapor kenarı; GÖLGE YOK */
}
/* Sağ kolon: üç grup, gruplar arası --space-6 nefes; grup içi --space-2. */
.wsite-person-meta { display: flex; flex-direction: column; gap: var(--space-6); }
.wsite-person-group > * { margin: 0; }
.wsite-person-group > * + * { margin-top: var(--space-2); }
/* Rol satırı — Anthony kartının rol satırıyla TİPOGRAFİK DENK (KARAR 2026-07-25):
   ölçü/ağırlık/renk `.wsite-note` ailesinden gelir (17px / 400 / --w-ink), burada
   ayrıca yazılmaz. Kalan tek iş: unvan zaten büyük yazılı (çevrilmez konvansiyon)
   olduğu için text-transform KAPALI — TR locale'de "Principal"→"PRİNCİPAL"
   (noktalı İ) olmasın.
   (ESKİ: `.wsite-eyebrow` + --w-ink-muted; eyebrow 700 ağırlık + 1.36px tracking
   getiriyordu, Anthony'nin düz rol satırıyla eşit değildi.) */
.wsite-person-title { text-transform: none; }
/* Künye içi dış linkler (kurum + eğitim programları) TEK gramer: gövde-içi link
   = lacivert + underline, hover accent (§5). Tek tanım, iki yer. */
.wsite-person-org,
.wsite-person-edu a { color: var(--w-ink); text-decoration: underline; }
.wsite-person-org:hover,
.wsite-person-edu a:hover { color: var(--w-accent); }
/* Künye eğitim satırları 13px — `li` de AÇIKÇA yazılır: `.wsite-main li` (0,1,1)
   gövde ölçüsünü (17px) buraya sızdırıyordu ve program satırı kurum başlığından
   büyük çıkıyordu (ölçüldü 2026-07-24, rev5). */
.wsite-person-edu .wsite-note,
.wsite-person-edu li { font-size: 13px; line-height: 1.45; }
/* Eğitim bloğu (rev5, KARAR 2026-07-24): iki kurum grubu — bold kurum satırı +
   altında girintili program linkleri. Nefes merdiveni grup içinde kademelenir:
   satır 4px (--space-1) < kurum→program 8px (grup içi --space-2) < kurum grupları
   arası 16px (--space-4) < künye grupları arası 32px (--space-6, §3 nefesi).
   text-transform KAPALI — TR locale'de "i"→"İ" (noktalı) riski sıfır. */
.wsite-person-edu { text-transform: none; }
/* Kredensiyal hiyerarşisi (KARAR 2026-07-24, Murat) — kurum adı flush-left (kalın),
   dereceler 12px GİRİNTİLİ (--space-3): kuruma "ait" okunur, standart CV deseni.
   Girinti bloktur — sarılan satırlar da 12px'te hizalanır. İki üniversite arası
   24px (--space-5) nefes (kurum→program 8px, program↔program 4px ile ladder:
   4<8<24). İki kart (reviews + About) tek include/CSS'ten → birebir aynı. */
.wsite-person-edu-list { list-style: none; padding: 0 0 0 var(--space-3); }
.wsite-person-edu-list li + li { margin-top: var(--space-1); }
.wsite-person-edu-list + .wsite-person-edu-school { margin-top: var(--space-5); }
.wsite-person-date {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: none; color: var(--w-ink-muted);
}
/* Tarih alıntı kutusu İÇİNDE (KARAR 2026-07-24) — kapanış paragrafının altında
   son satır; kapanıştan nefes. Stil .wsite-person-date'ten gelir (etiket ailesi,
   İ-temiz). Etiket olduğu için alıntı gövdesinin 65ch okuma-ölçüsü clamp'ından
   MUAF (max-width:none) — yoksa 12px fontta 65ch = 745px, prose ölçüsünden geniş. */
.wsite-testimonial-quotedate { margin: 24px 0 0; max-width: none; }
/* Künye metin-CTA'ları ALT ALTA (KARAR 2026-07-24, rev6): her eylem kendi
   satırında, sola dayalı. `align-items: flex-start` linkleri kolon genişliğine
   germez — tıklama alanı metin kadardır. Dikey nefes BURADA VERİLMEZ: bu <p>
   aynı zamanda `.wsite-person-group`tur ve grup kuralı (`> * + *`) 8px'i zaten
   koyar; ayrıca `gap` yazmak ikisini toplayıp 16px yapıyordu (ölçüldü).
   (ESKİ: yan yana tek satır + `align-items: baseline`; ok gliflerinin yarattığı
   4px taban kayması o düzenin sorunuydu, yığılı düzende konusuz kaldı.) */
.wsite-person-links { display: flex; flex-direction: column; align-items: flex-start; }

/* İnsan kartı DİKEY YIĞIN varyantı (KARAR 2026-07-24) — kart bloğunun sol kolon
   düzeni: foto üstte tam genişlik (kare), kimlik altta SOLA hizalı. .wsite-person
   sınıflarını aynen kullanır; yalnız ızgarayı tek kolona çevirir.
   (ESKİ .wsite-person--ref yatay foto-solda/meta-sağda düzeni EMEKLİ — kart+alıntı
   artık ortak .wsite-quote-feature kalıbında; --ref hiçbir yerde kullanılmıyor.) */
.wsite-person--stack { grid-template-columns: 1fr; gap: var(--space-4); }
.wsite-person--stack .wsite-person-figure img { width: 100%; height: auto; }

/* (KURUCU İMZA SATIRI `.wsite-person-sig*` + `--w-person-compact` token'ı
   SİLİNDİ — KARAR 2026-07-29, Murat. Home S4 bandı yerinde DURUYOR ama
   PORTRE ve "Founder & Principal" unvanı bandan kalktı; S6 üçlüsü de
   görsel-sıfır. İki tüketici de yok → bu aile geri getirilmez. Büyük insan
   KARTI (About + /reviews, 400/494px) bu token'dan zaten bağımsızdı —
   o sayfalar etkilenmez.) */

/* ORTAK YERLEŞİM (KARAR 2026-07-24) — insan kartı + alıntı: /reviews S2 ve About
   Blok 6 TEK standart. Sol kolon = kimlik kartı (--stack); sağ kolon
   minmax(0,1fr) = alıntı kutusu. ≤820px tek kolon, DOM sırası kartı önce koyar.
   Kolon genişliği TEK TOKEN'dan (`--w-person-col`): kart fotoğrafı kolonu tam
   doldurduğu için bu değer aynı zamanda FOTO KENARIDIR; kurucu plakasının
   min-height'ı da ondan türer (aşağı) — sabit iki yere yazılmaz. */
:root { --w-person-col: 400px; }
.wsite-quote-feature {
  display: grid; grid-template-columns: var(--w-person-col) minmax(0, 1fr);
  gap: var(--space-6); align-items: start; margin: 0;
}
/* ZEMİN (KARAR 2026-07-24): kart plakası --canvas (beyaz), alıntı plakası --paper
   (.wsite-testimonial'dan). Bölüm zemininden BAĞIMSIZ → /reviews S2 paper bantta
   bile kart BEYAZ kalır; iki sayfada AYNI. Gölge yok, radius 0, foto hairline'ı korunur. */
.wsite-quote-feature .wsite-person { background: var(--w-canvas); }
@media (max-width: 820px) {
  .wsite-quote-feature { grid-template-columns: 1fr; }
}

/* Kurucu metin plakası: son paragraftan sonra artık boşluk kalmasın —
   .wsite-testimonial-body p'nin 16px alt margin'i kutunun 32px padding'ine
   ekleniyordu. Alıntı kutusunda tarih satırı bu boşluğu doldurur, kurucu
   plakasında (tarih YOK) son paragraf kutunun dibinde durur. */
.wsite-founder-prose .wsite-testimonial-body p:last-child { margin-bottom: 0; }
/* PLAKA ALT KENARI ≥ FOTO ALT KENARI (KARAR 2026-07-25): iki kolonlu düzende
   plaka en az fotoğraf kadar yüksek durur — kısa metin plakayı fotonun yarısında
   bitirip düzeni asimetrik bırakmasın. Değer kolon token'ından türer
   (kare foto: yükseklik == kolon genişliği), sabit yazılmaz. İçerik ÜSTTEN akar
   (dikey ortalama YOK) — plaka uzarsa boşluk altta kalır.
   ≤820 tek kolonda uygulanmaz: orada foto ile plaka yan yana değil, alt alta. */
@media (min-width: 821px) {
  .wsite-testimonial--founder { min-height: var(--w-person-col); }
}

@media (max-width: 820px) {
  .wsite-person { grid-template-columns: 1fr; gap: var(--space-5); }
  /* Foto tek kolonda tam genişliğe ölçeklenir (kare korunur). */
  .wsite-person-figure img { width: 100%; height: auto; }
}

/* =============================================================================
   5) BİLEŞEN GRAMERİ (skill §5)
   ============================================================================= */

/* --- Butonlar (website kapsamlı override; app'in .btn'i kapsam dışı) --- */
.wsite-surface .btn, .wsite-surface .cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--w-font-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  height: 48px; padding: 0 32px; min-height: 48px;
  border-radius: 0;                       /* köşesiz endüstriyel silüet */
  border: 1px solid transparent; cursor: pointer; line-height: 1;
  text-decoration: none; transition: background-color 120ms var(--w-ease),
    color 120ms var(--w-ease), border-color 120ms var(--w-ease);
}
/* Primary CTA zemini --w-accent-down (KARAR 2026-07-22, D3/4): beyaz etiket
   kontrastı 4.42 → 5.73:1 (AA geçer). Hover/active bir ton daha koyu
   (--w-accent-pressed, 7.58:1). Etiket 14px Inter 700 UPPERCASE kalır (§5). */
.wsite-surface .btn-primary, .wsite-surface .cta {
  background: var(--w-accent-down); color: var(--w-on-dark); border-color: var(--w-accent-down);
}
.wsite-surface .btn-primary:hover, .wsite-surface .cta:hover,
.wsite-surface .btn-primary:active, .wsite-surface .cta:active {
  background: var(--w-accent-pressed); border-color: var(--w-accent-pressed); color: var(--w-on-dark);
}
/* Secondary/ghost — kontur buton (açık zemin: lacivert; koyu zemin: beyaz). */
.wsite-surface .btn-ghost, .wsite-surface .btn-secondary {
  background: transparent; color: var(--w-ink); border-color: var(--w-ink);
}
.wsite-surface .btn-ghost:hover, .wsite-surface .btn-secondary:hover {
  background: var(--w-ink); color: var(--w-on-dark); border-color: var(--w-ink);
}
.wsite-hero .btn-ghost, .wsite-hero .btn-secondary,
.wsite-cta-band .btn-ghost, .wsite-cta-band .btn-secondary {
  color: var(--w-on-dark); border-color: rgba(255,255,255,0.5);
}
.wsite-hero .btn-ghost:hover, .wsite-hero .btn-secondary:hover,
.wsite-cta-band .btn-ghost:hover, .wsite-cta-band .btn-secondary:hover {
  background: rgba(255,255,255,0.10); color: var(--w-on-dark); border-color: var(--w-on-dark);
}
.wsite-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }

/* Metin-CTA (kart/bölüm içi link) — UPPERCASE Inter 700 13px + → ok (skill §5). */
.wsite-textcta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-ink);
  text-decoration: none; transition: color 120ms var(--w-ease);
}
.wsite-textcta::after { content: "\2192"; }
.wsite-textcta:hover { color: var(--w-accent); }
/* --asis: etiket zaten büyük yazılı (LinkedIn vb.); text-transform KAPALI —
   TR locale'de uppercase transform "i"→"İ" (noktalı) yapmasın (unvan fix eşi).
   .wsite-textcta'dan SONRA gelir → eşit specificity'de kazanır. */
.wsite-textcta--asis { text-transform: none; }

/* --- Alan kolonu (About "What is on our desk") — ÇİZGİ DİLİ
   (REVİZYON 2026-08-03): kart PLAKA değil. Zemin ve 4-kenar çerçeve KALKTI;
   içerik bölüm zeminiyle bütünleşir (bölüm zeminine dokunulmadı). Kolonu
   ÜSTTEKİ 1px hairline tanımlar — "The model" anatomisi: çizgi + h3 + kısa
   metin + chip satırı. Çubuk kırmızı DEĞİL: bu kolonlar müşteri sesi değil
   (ses çizgisi sözlüğü §11 — kırmızı yalnız alıntıda).
   YÜKSEKLİK İÇERİKTEN: `align-items: start`, eşitleme zorlaması yok.
   Radius 0, gölge yok (§4).
   (ESKİ 2026-07-30 "PLAKA BEYAZ" kararı bu revizyonla öldü; yorumundaki
   /services/ + /case-studies/ "global etki" notu zaten bayattı — ölçüldü
   2026-08-03: `.wsite-card` fiilen YALNIZ About Blok 2'de kullanılıyor.) */
.wsite-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0;
  align-items: start;
}
/* 2×2 (4 alan): @1440'ta 4 kolon denendi ve ELENDİ — ~330px kolonda uzun
   chip'ler ("SITE-TO-SITE VPN", "COST & USAGE ANALYSIS") satır başına tek
   chip'e düşüp bloğu 4-5 satıra şişiriyor, metin 6-7 satıra çıkıyordu. */
.wsite-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wsite-card {
  border-top: 1px solid var(--w-hairline);
  border-radius: 0; padding: 20px 0 0;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--w-ease);
}
/* Hover: plaka kalkınca kaldıracak plaka da kalmadı — `translateY(-4px)` lift
   ÖLDÜ (§4 düz yüzey). Kalan tek işaret çizginin koyulaşmasıdır. */
.wsite-card:hover { border-color: var(--w-ink-muted); }
.wsite-card h3 { margin-top: 0; }
/* Kutu kalkınca kolon padding'i de kalktı → metin kolon kenarına dayanıyordu.
   Okuma nefesi artık SAĞDAN pay ile gelir (plaka padding'inin yerini alır):
   satır kolonu sonuna kadar doldurmaz, çizgi tam genişlikte kalır. */
.wsite-card p { color: var(--w-ink-muted); margin: 0 0 16px; max-width: 60ch; padding-right: 24px; }
.wsite-card .wsite-textcta { margin-top: auto; }
/* --- İstatistik bandı (Home): koyu lacivert blok, count-up sayılar (skill §5) --- */
.wsite-statband {
  background: var(--w-navy);
  color: var(--w-on-dark);
  padding: 64px 0;
  /* Tam-genişlik koyu bant: içerik ölçüsünü ez, kenardan kenara zemin;
     yatay padding içeriği tek raya oturtur (--w-rail, skill §3). */
  max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
  padding-right: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
}
/* Başlık bloğu SOL RAYA dayalı (madde 2) — ortalı DEĞİL. Paragraf dar ölçüsü
   (65ch) korunur ama sola yaslı. Ray zaten bandın padding'inden geldiği için
   burada ayrıca max-width verilmez (tek ray, tek kaynak).
   NOT (KARAR 2026-07-29): bu başlık bloğunda PORTRE/İMZA SATIRI YOKTUR —
   `.wsite-person-sig*` ailesi bilerek geri getirilmedi; kurucunun adı yalnız
   lead cümlesinin içinde geçer. */
.wsite-statband-head { margin: 0 0 40px; text-align: left; }
.wsite-statband-head .lead { max-width: 65ch; }
/* Statband metin/sayı renkleri .wsite--dark scope'undan gelir (statband bu sınıfı
   taşır) — burada renk override YOK (regresyon dersi: koyu renk tek scope'ta). */
/* Sayı satırı rayı doldurur, sol raydan başlar. */
.wsite-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.wsite-stat { text-align: left; }
/* İstatistik renkleri AÇIK ZEMİN varsayılanıdır (ör. About): sayı lacivert,
   açıklama muted, strong ink. Koyu bant (Home statband) rengini .wsite--dark
   scope'u tek yerden verir (aşağıda "Koyu bağlam scope'u") — statband'e özel
   yama YOK. */
.wsite-stat-num {
  font-family: var(--w-font-display); font-weight: 700; font-size: 56px;
  line-height: 1; letter-spacing: -0.02em; color: var(--w-navy);
  font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.wsite-stat p {
  color: var(--w-ink-muted); font-size: 15px; line-height: 1.45; margin: 0;
}
.wsite-stat p strong { color: var(--w-ink); }

/* =============================================================================
   KOYU BAĞLAM SCOPE'u (.wsite--dark) — TEK KAYNAK
   -----------------------------------------------------------------------------
   Koyu lacivert zeminli her bölüm (hero, istatistik bandı ve ileride eklenecek
   koyu bloklar) bu sınıfı taşır; içindeki metin/sayı/başlık/strong OTOMATİK
   on-dark rengini alır. Böylece açık-zemin varsayılanları (yukarıda) koyu
   bağlamı asla ezmez ve her koyu bölüme ayrı yama gerekmez. (Regresyon dersi:
   .wsite-section > .wsite-stats açık-zemin kuralı statband'i de yakalayıp
   lacivert-üstü-lacivert yapmıştı — scope tabanlı çözüm bunu kökten önler.)
   ============================================================================= */
.wsite--dark { color: var(--w-on-dark); }
.wsite--dark h1, .wsite--dark h2, .wsite--dark h3, .wsite--dark h4 { color: var(--w-on-dark); }
.wsite--dark .lead { color: var(--w-on-dark-muted); }
.wsite--dark p { color: var(--w-on-dark-muted); }
.wsite--dark p strong, .wsite--dark strong, .wsite--dark b { color: var(--w-on-dark); }
.wsite--dark .wsite-kicker-label,
.wsite--dark .wsite-eyebrow { color: var(--w-on-dark-muted); }
.wsite--dark .wsite-stat-num { color: var(--w-on-dark); }
.wsite--dark .wsite-stat p { color: var(--w-on-dark-muted); }
.wsite--dark .wsite-stat p strong { color: var(--w-on-dark); }
.wsite--dark .wsite-note { color: var(--w-on-dark-muted); }
.wsite--dark .wsite-wordmark { color: var(--w-on-dark); }   /* koyu bağlamda beyaz (tek scope) */
/* Gövde-içi link koyu bağlamda (KARAR 2026-07-28): açık zemin grameri
   "lacivert + underline"dır (§5); koyu bantta lacivert = zeminin KENDİSİ →
   link görünmez olur (ölçüldü: link rengi == bant zemini, kontrast 1:1).
   Koyu bağlamda link beyaza döner, underline korunur (link olduğu belli).
   Hover accent'te kalır — kırmızı METİN bütçeye dahildir ama hover geçici
   durumdur, dinlenme hâlinde kırmızı yok. */
.wsite--dark .lead a, .wsite--dark p a { color: var(--w-on-dark); text-decoration: underline; }
.wsite--dark .lead a:hover, .wsite--dark p a:hover { color: var(--w-accent); }

/* --- Çağrı bandı (sayfa sonu CTA) — FULL-BLEED --navy bant (NİHAİ KARAR
   2026-07-20, Murat): statband ile AYNI desen — kenardan kenara koyu zemin,
   .wsite--dark scope (renkler tek kaynaktan), içerik TEK RAYDA sola hizalı.
   İkisi de aynı breakout formülünü kullanır
   (calc(50% - 50vw) + max(--space-5, calc(50vw - var(--w-rail)/2)))
   → CTA içerik sol kenarı = statband içerik sol kenarı (±0px @1440).
   FOOTER'A BİTİŞİK: .wsite-main alt padding'ini negatif margin ile iptal eder
   (aynı --w-main-pad-y kaynağı) → CTA ile footer arası 0px; footer'ın 3px kırmızı
   şeridi ayraç olur. Kırmızı bütçe: kicker + tek dolu CTA (skill §5/#8). Navy bant
   ≤2/sayfa kotasına DAHİL DEĞİLDİR (sayfa-sonu imza bandı). --- */
.wsite-cta-band {
  background: var(--w-navy);
  color: var(--w-on-dark);
  border-radius: 0; text-align: left;
  padding-top: 64px; padding-bottom: 64px;
  /* Tam-genişlik koyu bant (statband ile aynı) — içerik ölçüsünü ez, kenardan
     kenara zemin; yatay padding içeriği tek raya (--w-rail) oturtur. */
  max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
  padding-right: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
  /* Footer'a bitişik: main alt padding'ini birebir geri al (aynı kaynak). */
  margin-bottom: calc(-1 * var(--w-main-pad-y));
}
/* Renkler .wsite--dark scope'undan (tek kaynak, koyu bağlam kuralı) — burada renk
   override YOK (regresyon dersi §9/#14). Yalnız ölçü/boşluk. */
.wsite-cta-band h2 { margin-top: 0; }
.wsite-cta-band p { max-width: 56ch; margin: 0 0 28px; }

/* ZEMİN ZEMİNE DEĞER (KARAR 2026-07-25) — CTA bandının ÖNCEKİ kardeşi de zeminliyse
   aradaki canvas şeridi kapanır: iki zemin 0px'te birleşir. Footer bitişikliğiyle
   AYNI AİLE, farklı mekanizma — orada `main`in alt padding'i DIŞARIDAN gelir ve
   negatif margin'le geri alınır; burada boşluğu bandın KENDİ `margin-top`u koyar
   (bölüm ritmi `> * + *`), o yüzden geri alma değil SIFIRLAMA doğru araçtır:
     footer  : margin-bottom: calc(-1 * var(--w-main-pad-y));   ← dış padding'i iptal
     öncül   : margin-top: 0;                                   ← kendi ritim margin'ini kapat
   (Ölçüldü 2026-07-25: `calc(-1 * var(--w-section-gap))` yazmak ritmi iptal ETMEZ,
   aynı specificity'de EZER → margin -80px olur ve iki bant 80px ÇAKIŞIR. Doğrusu 0.)
   Ham piksel YOK; ritim token'ı değişse de bu kural doğru kalır (sıfır, sıfırdır).
   KAPSAM: yalnız zeminli öncül (`.wsite-band-paper` — bugünkü tek zeminli bölüm
   tipi). Canvas öncülde kural ÇALIŞMAZ; oradaki 80px nefes §3 yüzey ritmidir ve
   korunur (ayraç = zemin değişimi; canvas→navy geçişinde nefes anlamlıdır).
   Blokların KENDİ padding'leri (80px/64px) dokunulmaz — kalkan yalnız ARADAKİ
   dış boşluktur. */
.wsite-band-paper + .wsite-cta-band { margin-top: 0; }

/* --- Paper bandı (skill §3 açık ritim: --canvas ↔ --paper zemin değişimi) ---
   Tam-genişlik açık bant; ölçü mekaniği .wsite-cta-band ile AYNI (tek formül),
   yalnız zemin --paper ve footer'a yapışma yok. Bölüm ayracı çizgi değil zemin
   değişimidir; <hr>/border kullanılmaz. Koyu bant kotasına dahil DEĞİLDİR. */
.wsite-band-paper {
  background: var(--w-paper);
  padding-top: 80px; padding-bottom: 80px;
  max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
  padding-right: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
}

/* HERO'DAN SONRAKİ İLK BANT (KARAR 2026-07-30): hero'nun ardından gelen ilk
   paper bandının üst nefesi daraltılır. Gerekçe: hero kendi iç padding'iyle
   bitiyor, ardına 80px bölüm padding'i eklenince başlık bloğu hero'dan kopuk
   duruyordu. Değer token'dan türer (`--space-8` = 3rem = 48px); ham px yok.
   SEÇİCİ NOTU (ölçüldü 2026-07-30): `.wsite-hero + .wsite-band-paper` ÇALIŞMAZ
   — hero `.wsite-surface`in, bölümler `.wsite-container`ın çocuğudur, kardeş
   değillerdir. Doğru hedef `.wsite-container`ın İLK çocuğu; sayfa içi diğer
   paper bantların 80px ritmi (§3 dikey nefes) DOKUNULMAZ. */
.wsite-main .wsite-container > .wsite-band-paper:first-child { padding-top: var(--space-8); }
/* …ve `main`in KENDİ üst padding'i geri alınır. Ölçüldü 2026-07-30: bandın
   padding'ini 48px'e indirmek görünen boşluğu DEĞİŞTİRMEDİ (80px kaldı),
   çünkü boşluğun kaynağı `.wsite-main`in `--w-main-pad-y` üst padding'iydi;
   bandın padding'i onun İÇİNDE duruyordu. Negatif margin aynı token'dan türer
   (CTA→footer bitişikliğiyle aynı mekanizma, §11 zincir kuralı ailesi). */
.wsite-main .wsite-container > .wsite-band-paper:first-child { margin-top: calc(-1 * var(--w-main-pad-y)); }

/* --- Koyu gövde bandı (KARAR 2026-07-30) — ölçü mekaniği `.wsite-band-paper`
   ile BİREBİR aynı formül (tek ray, full-bleed); tek farkı zemin `--w-navy`.
   Renkleri `.wsite--dark` scope'u verir (§9/14 tek kaynak) — burada renk
   tanımı YOK, yeni renk değişkeni YOK.
   KOTA: design §1 `--navy` bant ≤2/sayfa. Bu sınıf kotaya DAHİLDİR; sayfa-sonu
   `.wsite-cta-band` §11 gereği hariçtir. Kullanan sayfa hero + bu bant ile
   sınıra oturur, üçüncü koyu gövde bandı AÇILMAZ. --- */
.wsite-band-navy {
  background: var(--w-navy);
  padding-top: 80px; padding-bottom: 80px;
  max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
  padding-right: max(var(--space-5), calc(50vw - var(--w-rail) / 2));
}
/* Zemin zemine değer: paper→navy geçişinde aradaki canvas şeridi kapanır
   (§11 zincir kuralının aynı ailesi; ritim margin'i SIFIRLANIR, negatif
   calc ile geri alınmaz — o çakışma üretir). */
.wsite-band-paper + .wsite-band-navy,
.wsite-band-navy + .wsite-band-paper { margin-top: 0; }

/* --- Alıntı şeridi (skill §5) — gerçek AWS IQ yorumları. ÇİZGİ DİLİ
   (REVİZYON 2026-08-03): kart PLAKA değil; --paper zemin, çerçeve ve gölge
   KALKTI — kart bölümün kendi zeminiyle bütünleşir (bölüm zeminine
   dokunulmaz). Kartı iki çizgi tanımlar: ÜSTTE 1px hairline + SOLDA 3px
   kırmızı imza çubuğu (ses çizgisi sözlüğü §11 — müşteri sesi; ≤3px, kırmızı
   bütçe DIŞI). Radius 0, gölge yok (§4).
   YÜKSEKLİK İÇERİKTEN GELİR: `align-items: start` — eşit yükseklik zorlaması
   (stretch) iptal; künye alıntının HEMEN altına oturur, kart dibine asılmaz. */
.wsite-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; align-items: start; }
.wsite-quote {
  /* FIGURE MARGIN RESET (skill §5 / §9-11d, KARAR 2026-07-22) — <figure>'ın
     tarayıcı varsayılanı `margin: 1em 40px`'tir; resetlenmezse kart 360px
     kolonda 280px render edilir ve raydan 40px kayar. (Ders: 2026-07-22 D0.) */
  margin: 0;
  border-top: 1px solid var(--w-hairline);
  border-left: 3px solid var(--w-accent);
  padding: 20px 24px 0;
  display: flex; flex-direction: column;
}
.wsite-quote blockquote {
  margin: 0 0 16px; padding: 0;
  font-size: 17px; line-height: 1.5; color: var(--w-ink);
}
.wsite-quote cite {
  font-style: normal;
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-ink-muted);
}
/* Home "In their words" 6 kart (KARAR 2026-07-24) — 3×2 masaüstü. .wsite-quotes
   varsayılanı zaten repeat(3,1fr); --six yalnız niyeti işaretler (kart sayısı 6
   olunca doğal 2 satır). Kart deseni (paper + 3px kırmızı imza çubuğu §11) korunur. */
/* Home S6 (REVİZYON 2026-07-29, Murat): ÜÇ EŞİT KUTU tek ızgarada
   [Anthony | IQ | IQ]. `.wsite-quotes` varsayılanı zaten repeat(3,1fr) + 20px
   gap + align-items:stretch → eşit yükseklik oradan gelir; burada yalnız
   FERAHLIK (28px gap) ezilir. Kart görünümü `.wsite-quote` TEK KAYNAĞINDAN
   (paper · radius 0 · 3px kırmızı imza çubuğu · gölge yok).
   NOT: "3 eşit kart ızgarası site genelinde ≤1" (§8/3) — bu sayfadaki TEK
   örnektir (Home'un eski üç-kart bloğu P3'te ölmüştü). */
.wsite-quotes--trio { gap: 28px; }
/* NİZAM (REVİZYON 2026-08-03): künye artık kart TABANINA çakılmaz — alıntının
   HEMEN altına oturur (`margin-top:auto` KALKTI; §3 eşit-yükseklik zorlaması
   iptal). Üç kartın künye tabanı artık hizalı DEĞİLDİR; hizayı veren şey kart
   ÜSTÜNDEKİ hairline + üst kenar, alt kenar değil. (ESKİ 2026-07-29: stretch
   ızgarada foot tabana çakılıyordu.) */
.wsite-quote-foot { padding-top: 0; }
.wsite-quote-foot cite { display: block; }
/* Yorumcu adı etiketi (Kart 1): eyebrow ailesinden (UPPERCASE + tracking).
   AWS IQ kartlarında bu slot BOŞTUR (kayıt anonim) — künyeyi tek başına cite
   taşır. Kaynak için LOGO KULLANILMAZ (resmi varlık yok — marka riski,
   KARAR 2026-07-29).
   (2026-07-29 TAM SİMETRİ: `.wsite-quote-person*` foto künyesi ailesi SİLİNDİ
   — üçlüde görsel SIFIR, kartların hiçbirinde portre yok. Fotoğraflı büyük
   insan kartı About + /reviews'ta `.wsite-person` ailesinde yaşamaya devam
   eder; bu iki sayfa DEĞİŞMEDİ.) */
.wsite-quote-source { margin: 0 0 4px; }
/* TEK İSKELET (REVİZYON 2026-08-03): Home + About üçlüsünde sıra AYNI —
   alıntı → kaynak (isim VEYA "AWS IQ") → tarih → yıldız. Yıldız kartın
   ÜSTÜNDE değil, künyenin SON satırıdır. Muted glif — kırmızı DEĞİL (§11).
   (/reviews arşivi bu iskeletten AYRILDI: KARAR 2026-08-03 ile kayıt defteri
   oldu — `.wsite-ledger*`. Yıldız GLİFİ ortak kalır, aşağıdaki iki kural
   hem üçlüde hem defterde geçerlidir.) */
.wsite-quote-stars { display: flex; gap: 2px; margin: 8px 0 0; color: var(--w-ink-muted); }
.wsite-star { width: 14px; height: 14px; fill: currentColor; flex: none; }
/* Kart 1'in "notun tamamı" metin-CTA'sı İSKELETİN EN ALTI (yıldızdan sonra;
   yalnız uzun notlu Anthony kartında var). */
.wsite-quote-more { margin-top: 12px; }
@media (max-width: 820px) { .wsite-quotes { grid-template-columns: 1fr; } }

/* =============================================================================
   UYGULANMIŞ YETKİNLİKLER MATRİSİ (Home S5) — KARAR 2026-07-29, Murat
   -----------------------------------------------------------------------------
   8 satır × 4 sütun (Bulut · İş · Katman · Teknoloji), kaynağı
   `data/case_inventory.json`. Denetim-raporu estetiği: radius 0, hairline
   çerçeve, GÖLGE YOK (§4 — tek gölge rapor görseline ait, tabloya değil).
   Ayraç olarak satır arası 1px hairline kullanılır — bu `<hr>` bölüm ayracı
   DEĞİL (§8/5 yasağı bölümler arasıdır); tablo içi kural çizgisi rapor
   dilinin kendisidir.
   Kırmızı bütçe: bu bölümde kicker dışında kırmızı YOK (§1) — teknoloji
   rozetleri lacivert ailesindedir.
   ============================================================================= */
/* Ray taşması olmadan yatay kaydırma: dar viewport'ta tablo KENDİ kabında
   kayar, sayfa gövdesi kaymaz (§9/5 "yatay scroll yok" sayfa içindir).
   ≤820px'te tablo zaten kart yığınına döndüğü için kaydırma da gerekmez. */
.wsite-matrix-wrap { margin-top: 32px; }
/* Etiket satırı (kaynak/maskeleme beyanı) başlık bloğunun içinde, lead yerine:
   cümle değil KAYIT satırıdır (caption ölçüsü, muted). */
.wsite-matrix-note { margin: 16px 0 0; }
.wsite-matrix {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--w-hairline);
  font-variant-numeric: tabular-nums;
}
/* Sütun başlıkları = ETİKET katmanı (§2 UPPERCASE + tracking); başlık
   tipografisi (SG 700) DEĞİL — tablo başlığı cümle değil etikettir.
   BAŞLIK ŞERİDİ (KARAR 2026-07-31, Murat): şerit marka lacivertine alındı,
   yazı beyaz. Renkler TOKEN'dan gelir (`--w-navy` / `--w-on-dark`) — ham hex
   yazılmaz. Bu bir BANT değil, bileşen içi koyu yüzeydir (emsal: `.wsite-tech`
   rozetleri aynı iki token'ı açık bölüm içinde kullanır) → design §1'in
   full-bleed navy BANT kotasına girmez.
   DİKEY ORTALAMA: eskiden `vertical-align: bottom` + asimetrik padding
   (0 20px 12px 0) metni hücrenin altına yapıştırıyordu; şerit zeminlenince bu
   görünür kusur oldu. Şimdi simetrik dikey padding + `middle` → üst boşluk =
   alt boşluk (ölçüldü, ±1px).
   YATAY HİZA: sol padding 0 KALIR ve sağ padding gövde hücresiyle AYNI (20px)
   — başlık metni kolon içeriğiyle aynı x'te başlar (ölçüldü). Şeridin sol/sağ
   uçlarına nefes vermek için ilk/son hücreye simetrik iç padding EKLENMEZ:
   eklenirse başlık gövdeden kayar (tek ray hizası, §11). */
.wsite-matrix thead th {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--w-navy); color: var(--w-on-dark);
  text-align: left; padding: 12px 20px 12px 0; vertical-align: middle;
  border-bottom: 0;
}
/* Şerit kenarlarında zeminin metne yapışmaması için: ilk hücrenin SOLUNA ve
   son hücrenin SAĞINA yalnız ZEMİN uzatılır (box-shadow ile), padding DEĞİL —
   böylece metin hizası bozulmadan şerit rayın kenarına kadar dolu görünür. */
.wsite-matrix thead th:first-child {
  box-shadow: -12px 0 0 var(--w-navy);
}
.wsite-matrix thead th:last-child {
  padding-right: 12px;
  box-shadow: 12px 0 0 var(--w-navy);
}
.wsite-matrix tbody td {
  padding: 20px 20px 20px 0; vertical-align: top;
  border-bottom: 1px solid var(--w-hairline);
  font-size: 15px; line-height: 1.5; color: var(--w-ink-muted);
}
.wsite-matrix tbody td:last-child { padding-right: 0; }
/* Bulut sütunu: makine-adı (AWS · GCP · AWS + GCP) — marka adı, çevrilmez.
   Etiket registerinde, sarmalanmaz (satır başına tek kısa değer). */
.wsite-matrix .wsite-matrix-cloud {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; color: var(--w-ink);
  white-space: nowrap; width: 1%;
}
/* İş sütunu satırın taşıyıcısıdır: başlık KALIN (ink), teaser altında muted.
   Okuma ölçüsü korunur (§11 dar okuma) — ray genişledi diye satır uzamaz. */
.wsite-matrix-work { max-width: 46ch; }
.wsite-matrix-work strong {
  display: block; color: var(--w-ink); font-weight: 700; font-size: 17px;
  line-height: 1.35; margin-bottom: 6px;
}
/* ÇAPRAZ LİNK (2026-08-04) — Home/Services matris satırından Real work saha
   notuna. Gövde link dili: lacivert + underline (§5); KIRMIZI YASAK (bütçe).
   Hover 120ms renk, başka efekt yok (§7 motion sözlüğüne yeni fiil eklenmez).
   Başlığın kendi ölçüsü `.wsite-matrix-work strong`tan gelir — link yalnız
   renk/çizgi taşır, tipografiyi ezmez. Odak halkası site standardından
   (`.wsite-surface a:focus-visible`). */
.wsite-matrix-link {
  color: var(--w-navy); text-decoration: underline;
  transition: color 120ms var(--w-ease);
}
.wsite-matrix-link:hover { color: var(--w-accent-pressed); }
/* ÇAPA İNİŞİ (SPEC 4): sticky chrome (utility bar + header) satırı örtmesin —
   kayıt okunur konumda dursun. Emsal: `.wsite-shape` aynı token'ı kullanır. */
.wsite-matrix--list tbody tr[id] { scroll-margin-top: var(--w-chrome-h); }
.wsite-matrix-teaser { display: block; }
/* --list modifier (/real-work/, KARAR 2026-07-31): aynı tablo deseni, tek farkı
   Work sütununun tam `summary` taşımasıdır (Home `teaser` basar). Okuma ölçüsü
   46ch'ten 62ch'e açılır — §11 dar okuma sınırı içinde kalır, yeni bileşen
   açılmaz. Diğer üç sütun ve tüm responsive davranış Home ile ORTAKTIR. */
.wsite-matrix--list .wsite-matrix-work { max-width: 62ch; }
/* Katman sütunu: iki değerli kapalı sözlük (Bilimsel platform · Omurga).
   `layers[].short` JSON'dan gelir; burada yalnız ölçü/renk. */
.wsite-matrix .wsite-matrix-layer { white-space: nowrap; color: var(--w-ink); }
/* Teknoloji rozetleri: monospace + koyu zemin = makine hassasiyeti sesi.
   Liste semantiği korunur (ul/li), görünüm rozet. Kırmızı DEĞİL → bütçe dışı. */
.wsite-matrix-tech { max-width: 30ch; }
.wsite-techlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Seçici `.wsite-techlist .wsite-tech` (0,2,0) — tek sınıf (0,1,0) YETMEZ:
   `.wsite-main li` (0,1,1) gövde ölçüsünü (17px) ve rengini (--w-ink) rozete
   sızdırıyor; ölçüldü 2026-07-29: navy zemin üstünde navy metin = kontrast 1:1,
   rozet OKUNMAZ blok olarak render ediliyordu. Künye eğitim satırı emsali
   (yukarıda, rev5 2026-07-24) aynı tuzağın aynı çözümü — `!important` yerine
   seçici özgüllüğü. */
.wsite-techlist .wsite-tech {
  font-family: var(--w-font-mono); font-size: 12px; line-height: 1.4;
  padding: 3px 8px; border-radius: 0;
  background: var(--w-navy); color: var(--w-on-dark);
  white-space: nowrap;
}

/* --- /case-studies/ gerçek iş listesi (KARAR 2026-07-30) — Home matrisiyle
   AYNI kaynak, farklı düzen: tablo değil kart ızgarası. Kart görünümü
   `.wsite-card`, rozetler `.wsite-tech` TEK KAYNAĞINDAN gelir; burada yalnız
   KATMAN BLOĞU başlığının ritmi ve kart içi ölçü düzeltmeleri var. --- */
/* Katman bloğu başlığı (JSON'dan gelen tam ad): ızgaranın üstünde nefes
   bırakır; ilk blokta bölüm başlığına yapışmaz, sonraki bloklarda önceki
   ızgaradan ayrılır (§3 dikey nefes ailesi). */
/* Kart içi: bulut rozeti başlığın ÜSTÜNDE (kart-tag'in kart-içi konum kuralı
   `margin-top:auto`yu tetiklemesin diye akışta kalır), başlık altında özet,
   en altta teknoloji rozetleri. Özet uzun olduğu için alt boşluk kartın
   kendi padding'ine bırakılır. */
.wsite-card .wsite-techlist { margin-top: auto; padding-top: 4px; }
.wsite-card h4 { margin-top: 0; }

/* MOBİL (≤820px): aynı DOM kart yığınına döner — tablo başlığı gizlenir,
   her hücre `data-label`'ıyla kendi etiketini taşır. Yatay scroll ÜRETMEZ
   (§9/5). Kart deseni sayfanın geri kalanıyla tutarlı: paper plaka + hairline. */
@media (max-width: 820px) {
  .wsite-matrix, .wsite-matrix tbody, .wsite-matrix tr, .wsite-matrix td {
    display: block; width: auto;
  }
  .wsite-matrix { border-top: 0; }
  .wsite-matrix thead { display: none; }
  .wsite-matrix tbody tr {
    background: var(--w-paper); border: 1px solid var(--w-hairline);
    padding: 20px; margin-bottom: 16px;
  }
  .wsite-matrix tbody tr:last-child { margin-bottom: 0; }
  .wsite-matrix tbody td {
    padding: 0; border-bottom: 0; max-width: none; white-space: normal;
  }
  .wsite-matrix tbody td + td { margin-top: 14px; }
  /* Sütun adı hücrenin üstünde eyebrow olarak görünür (masaüstünde thead'in işi). */
  .wsite-matrix tbody td::before {
    content: attr(data-label);
    display: block; margin-bottom: 4px;
    font-family: var(--w-font-sans); font-weight: 700; font-size: 12px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-ink-muted);
  }
  /* Bulut ve İş hücrelerinde etiket gürültüdür: değer kendini anlatıyor
     (marka adı + kalın başlık). Katman/Teknoloji etiketini korur.
     Seçici `.wsite-matrix tbody td.…` (0,3,2) — yukarıdaki genel `td::before`
     (0,2,2) kuralını YENMESİ gerekir; tek sınıf (0,1,1) yetmez (ölçüldü
     2026-07-29: etiketler mobilde görünmeye devam ediyordu). */
  .wsite-matrix tbody td.wsite-matrix-cloud::before,
  .wsite-matrix tbody td.wsite-matrix-work::before { display: none; }
  .wsite-matrix .wsite-matrix-cloud { width: auto; }
}

/* --- Fiyat kartları (denetim-raporu dili: radius 0, hairline, featured=kırmızı
   ring). Featured'daki kırmızı = sayfanın imza vurgusu; viewport'ta tek dolu CTA
   (featured'ın primary'si) + featured ring = kırmızı bütçesi içinde. --- */
/* --- Notlar --- */
.wsite-note { font-size: 14px; color: var(--w-ink-muted); }
.wsite-container > .wsite-legal-note { margin-top: 32px; }
/* Yasal not CTA bandı içindeyken (Privacy/Terms) buton grubundan nefes alsın. */
.wsite-cta-band .wsite-legal-note { margin-top: 24px; }

/* =============================================================================
   FOKUS HALKASI (skill §9/#3) — her interaktif öğede görünür (2px).
   Açık zeminde --accent, koyu zeminde beyaz halka. Yalnız klavye (:focus-visible).
   ============================================================================= */
.wsite-surface a:focus-visible,
.wsite-surface button:focus-visible,
.wsite-surface .btn:focus-visible,
.wsite-surface input:focus-visible,
.wsite-surface select:focus-visible,
.wsite-surface textarea:focus-visible,
.wsite-surface [tabindex]:focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: 2px;
}
/* Koyu bant içinde (hero, statband, CTA bandı) beyaz halka — kırmızı koyu
   zeminde de okunur ama beyaz daha net kontrast verir. */
.wsite-hero a:focus-visible, .wsite-hero button:focus-visible, .wsite-hero .btn:focus-visible,
.wsite-statband a:focus-visible, .wsite-statband button:focus-visible,
.wsite-cta-band a:focus-visible, .wsite-cta-band button:focus-visible, .wsite-cta-band .btn:focus-visible,
.wsite-utilitybar a:focus-visible, .wsite-utilitybar button:focus-visible {
  outline-color: var(--w-on-dark);
}

/* =============================================================================
   6) MOTION (skill §7) — yalnız opacity/transform; kütüphanesiz.
   ============================================================================= */
/* Reveal başlangıç gizlemesi YALNIZ JS aktifse uygulanır (.wsite-js). JS yoksa
   veya IntersectionObserver desteklenmiyorsa içerik tam görünür kalır — no-JS
   güvencesi (içerik asla opacity:0'da kilitlenmez). */
.wsite-js .wsite-reveal { opacity: 0; transform: translateY(16px); }
.wsite-js .wsite-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--w-reveal-dur) var(--w-ease),
    transform var(--w-reveal-dur) var(--w-ease);
}
/* Hero koreografisi (yalnız Home) — stagger inline delay ile (aşağıda template). */

@media (prefers-reduced-motion: reduce) {
  .wsite-surface *, .wsite-surface *::before, .wsite-surface *::after {
    transition: none !important; animation: none !important;
  }
  .wsite-reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   6b) ABOUT BİLEŞENLERİ (Faz 3.2 — içerik paketi №1)
   Etiket şeridi · ilke listesi · yıl şeridi · uzun testimonial.
   Gölge yok, radius 0, ayraç = hairline (skill §4/§5).
   ============================================================================= */

/* --- Alan kolonu içi teknoloji etiketleri (Blok 2) — eyebrow dili, hairline
   çerçeve. ÇİZGİ DİLİ (REVİZYON 2026-08-03): chip satırının ÜSTÜNDEKİ ayrı
   iç-hairline KALKTI — kolonu tanımlayan çizgi artık üstte; ikinci yatay
   katman gürültüydü. Ayrımı boşluk yapar. `margin: auto 0 0` da öldü (chip'i
   kolon DİBİNE iten eşitleme kalıntısı): chip satırı metnin hemen altında. --- */
.wsite-tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wsite-tags li {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--w-ink-muted);
  border: 1px solid var(--w-hairline); padding: 4px 8px;
}

/* --- İlke listesi (Blok 3) — numaralı, kartsız; ayraç hairline. --- */
.wsite-principles { list-style: none; margin: 0; padding: 0; }
.wsite-principle {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid var(--w-hairline);
}
.wsite-principle:last-child { border-bottom: 1px solid var(--w-hairline); }
.wsite-principle-num {
  font-family: var(--w-font-display); font-weight: 700; font-size: 24px;
  /* Rakam LACİVERT (KARAR 2026-07-22, D3/2) — step-num ile aynı gerekçe. */
  font-variant-numeric: tabular-nums; color: var(--w-navy); line-height: 1.25;
}
.wsite-principle p { margin: 0; color: var(--w-ink-muted); }
.wsite-principle strong { color: var(--w-ink); }

/* --- Yıl şeridi (Blok 4) — sol rayda tabular yıl + açıklama.
   OMURGA HATTI (2026-08-04): 13 satır tek kronolojik dikey hatta bağlanır
   ("engineering timeline"). Hat MEVCUT yapının ÜZERİNE gelir — yıl kolonu,
   metin kolonu, yatay hairline ayraçlar ve metinler DEĞİŞMEDİ.
   KONUM: yıl kolonu ile metin kolonu ARASINDA (x=132 @1440 — 96px kolon +
   24px gap'in ortası). Yılların solu denendi ve elendi: orada yıllar hattan
   kopup asılı kalıyordu; arada durunca yıl solda / anlatı sağda okunur.
   RENK: `--w-hairline` (gri) — bu KURUCU anlatısıdır, müşteri sesi değil;
   kırmızı bütçesi zaten bölüm kicker'ında (ses çizgisi sözlüğü §11). --- */
.wsite-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* Hat satır bloğuyla SINIRLI: `ol` yalnız `li`'leri sarar, bölüm başlığına ve
   sonraki bloğa taşmaz (SPEC 4). İlk satırın üst ayracından son satırın alt
   ayracına kadar uzanır. */
.wsite-timeline::before {
  content: ""; position: absolute;
  left: 132px; top: 0; bottom: 0; width: 1px;
  background: var(--w-hairline);
}
.wsite-milestone {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px;
  padding: 16px 0; border-top: 1px solid var(--w-hairline);
  position: relative;
}
.wsite-milestone:last-child { border-bottom: 1px solid var(--w-hairline); }
/* Düğüm: her satırın hat üzerindeki işareti — 6px KARE (radius 0, köşesiz dil
   §5), tek renk `--w-navy`, gölge yok. Yatay ayraçla aynı hizada durur ki
   satır başlangıcını işaretlesin. Zemin rengi hattı düğümün arkasından keser. */
.wsite-milestone::before {
  content: ""; position: absolute;
  left: 129px; top: -3px; width: 6px; height: 6px;
  background: var(--w-navy);
}
.wsite-milestone-year {
  font-family: var(--w-font-display); font-weight: 700; font-size: 21px;
  font-variant-numeric: tabular-nums; color: var(--w-ink); line-height: 1.45;
}
.wsite-milestone p { margin: 0; color: var(--w-ink-muted); }
.wsite-certs { margin-top: 32px; }

/* --- KAYIT DEFTERİ (/reviews S3 arşivi) — KARAR 2026-08-03, Murat (A3=a).
   54 AWS IQ kaydı kronolojik TEK KOLON akıştır; 3'lü kart ızgarası öldü.
   Satır dili yukarıdaki `.wsite-milestone` yıl şeridinin AKRABASIDIR: sol
   tabular tarih kolonu + sağda içerik, ayraç 1px hairline, kutu/plaka yok,
   zemin bölümden gelir (radius 0, gölge yok — §4).
   Kart bileşeni `.wsite-quote` ailesinden ayrı tutulur: o aile Home/About
   üçlüsünde yaşıyor; ortak sınıf ezilirse oraya sızar. Ortak kalan tek şey
   yıldız glifi (`.wsite-quote-stars` / `.wsite-star`). --- */
/* --- YIL FİLTRE ÇUBUĞU (A4, KARAR 2026-08-03) — çipler buton bileşen
   gramerinden (§5): UPPERCASE Inter 700 13px +.08em, RADIUS 0 (pill YASAK
   §8/5), gölge yok. Çubuk yalnız JS varsa görünür (şablon `hidden` basar).
   AKTİF DURUM = LACİVERT dolgu, kırmızı DEĞİL: aktif çip büyük renkli YÜZEY
   olurdu ve kırmızı bütçesine (§1, viewport'ta ≤2) girerdi — sayfada kırmızı
   zaten kayıt işaretlerinde yaşıyor. Lacivert dolgu bütçeye dokunmadan
   "seçili" der (aynı mantık: metin-CTA kırmızısı dinlenmede sayılmaz). --- */
.wsite-ledger-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 32px;
}
/* `display:flex` tarayıcının `[hidden]` varsayılanını EZER — JS-siz sayfada
   çubuk GÖRÜNMEMELİ (§9/13), yoksa çalışmayan bir kontrol kalır. Ölçüldü
   2026-08-04: bu kural olmadan JS kapalıyken çubuk render ediliyordu. */
.wsite-ledger-filter[hidden] { display: none; }
.wsite-filter-chip {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--w-ink-muted);
  background: transparent;
  border: 1px solid var(--w-hairline); border-radius: 0;
  padding: 10px 16px; min-height: 44px;  /* dokunma hedefi §9/5 */
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: color 120ms var(--w-ease), border-color 120ms var(--w-ease),
    background-color 120ms var(--w-ease);
}
.wsite-filter-chip:hover { color: var(--w-ink); border-color: var(--w-ink-muted); }
.wsite-filter-chip.is-active {
  background: var(--w-navy); border-color: var(--w-navy); color: var(--w-on-dark);
}
/* Sayı: çipin ikincil katmanı — aktifken koyu zeminde muted tonuna geçer. */
.wsite-filter-count { font-variant-numeric: tabular-nums; opacity: 0.7; }
/* Klavye odak halkası: SİTE STANDARDINDAN gelir (`.wsite-surface
   button:focus-visible` — 2px `--w-accent`, offset 2px; §9/3). Burada kural
   YAZILMAZ — paralel bir halka tanımı standardı çatallar. Aktif çipin lacivert
   dolgusu üstünde kırmızı halka offset sayesinde açık zeminde durur, kontrast
   korunur (ölçüldü 2026-08-04). */

/* Listenin kapanış çizgisi LİSTEDE durur, son satırda değil: filtre satırları
   gizleyince `:last-child` görünmeyen bir satıra düşüp alt çizgi kaybolurdu
   (ölçüldü 2026-08-03). Böylece defter her filtrede kapalı bir blok kalır. */
.wsite-ledger {
  list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid var(--w-hairline);
}
/* Tarih kolonu 232px: 54 kaydın EN UZUN tarihi ("SEPTEMBER 28, 2020" — 18 kayıt
   September'la başlıyor) TEK SATIRA sığmalı, yoksa tabular hizanın anlamı kalmaz.
   Ölçülerek bulundu (2026-08-03): 160px'te 51 tarih, 200px'te 18 tarih ikiye
   kırılıyordu; 232px'te sıfır. Ölçüm `Range.getClientRects()` ile yapılır —
   `line-height:1.45` unitless olduğu için yükseklik eşiği yanıltıyor. */
.wsite-ledger-row {
  display: grid; grid-template-columns: 232px 1fr; gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--w-hairline);
}
/* `display:grid` tarayıcının `[hidden]` varsayılanını EZER — filtre gizlemesi
   çalışsın diye açıkça kapatılır (§7: animasyon yok, anında göster/gizle). */
.wsite-ledger-row[hidden] { display: none; }
/* Tarih: sol rayda tabular hizalı (Milestones yıl kolonu ailesi, caption boyu —
   54 satırda 21px yıl ölçüsü listeyi ağırlaştırıyordu). */
.wsite-ledger-date {
  margin: 0;
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--w-ink-muted);
  line-height: 1.45;
}
/* MÜŞTERİ SESİ İŞARETİ (ses çizgisi sözlüğü §11): kırmızı KORUNUR ama yoğunluk
   düşürüldü (SPEC mikro-kararı) — tam boy çubuk 54 satırda, uzun kayıtlarda
   300px'e uzayıp sayfayı kırmızıya boğuyordu (ölçüldü 2026-08-03). KISA
   VARYANT: çubuk yalnız künye satırı hizasında, 3px × 20px. ≤3px olduğu için
   kırmızı bütçesine SAYILMAZ (§11); kırmızı METİN yok. */
.wsite-ledger-body { padding-left: 16px; position: relative; }
.wsite-ledger-body::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 3px; height: 20px; background: var(--w-accent);
}
/* Künye satırı: kaynak + yıldız aynı satırda, alıntının ÜSTÜNDE — üç öğe
   (tarih · kaynak · yıldız) her kayıtta aynı yerde durur. */
.wsite-ledger-meta {
  margin: 0 0 8px; max-width: none;
  display: flex; align-items: center; gap: 12px;
}
.wsite-ledger-source {
  font-family: var(--w-font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-ink-muted);
}
/* Künye içinde yıldızın kendi üst margin'i (üçlü kart kuralı) etkisiz kalır. */
.wsite-ledger-meta .wsite-quote-stars { margin: 0; }
/* Alıntı: dar okuma ölçüsü — satır tam rayı doldurmaz (§3 / SPEC 3). */
.wsite-ledger-body blockquote {
  margin: 0; padding: 0;
  font-size: 17px; line-height: 1.55; color: var(--w-ink);
  max-width: 65ch;
}

/* --- Testimonial (Blok 6) — --paper plaka, ince kırmızı sol çubuk (skill §5). --- */
.wsite-testimonial {
  margin: 0; background: var(--w-paper);
  border: 1px solid var(--w-hairline); border-left: 3px solid var(--w-accent);
  padding: 32px;
}
/* SES SÖZLÜĞÜ (KARAR 2026-07-25, Murat) — sol dikine çubuğun rengi KİMİN
   KONUŞTUĞUNU söyler: **kırmızı = müşteri sesi** (alıntı, testimonial),
   **lacivert = kurucu sesi** (About kurucu plakası). Kutunun geri kalanı
   (paper zemin, hairline, 3px kalınlık, 32px padding, 65ch ölçü) TEK
   KAYNAKTAN — yukarıdaki kuraldan — gelir; modifier YALNIZ rengi ezer.
   Kurucu plakası kırmızı bütçesini 0'da tutar (§1 kırmızı disiplini). */
.wsite-testimonial--founder { border-left-color: var(--w-navy); }
.wsite-testimonial-body blockquote { margin: 0; padding: 0; border: 0; }
/* ALINTI OKUMA ÖLÇÜSÜ TUTARLI (KARAR 2026-07-23): paragraf ve liste AYNI ~65ch
   ölçüde; sağdan kesik paragraf + tam-satır liste tutarsızlığı öldü. Bullet'lar
   hizalı (padding tek yerde), satır ritmi §3. Alıntı metni birebir — CSS
   dokunmaz; yalnız ölçü ve hiza. */
.wsite-testimonial-body p,
.wsite-testimonial-body ul { max-width: 65ch; }
.wsite-testimonial-body p { margin: 0 0 16px; color: var(--w-ink); }
.wsite-testimonial-body ul { margin: 0 0 16px; padding-left: 1.25em; color: var(--w-ink-muted); }
.wsite-testimonial-body li { margin: 0 0 8px; padding-left: 0.25em; }
/* NOT (KARAR 2026-07-24): eski `.wsite-testimonial-source/-name/-role/-date`
   figcaption künyesi kaldırıldı — testimonial artık ORTAK INCLUDE (quote + tarih);
   About künyeyi .wsite-person kartında, /reviews künyesiz gösterir. İlgili ölü
   kurallar bütünsel silindi (§3.1/6). Kalan: .wsite-testimonial(-body/-quotedate). */

/* =============================================================================
   6c) SERVICES BİLEŞENLERİ (Faz 3.2 — içerik paketi №2)
   Adım şeridi (01–04) · kart meta satırı. Gölge yok, radius 0.
   ============================================================================= */

/* --- ÜÇ BİÇİM bloğu (S3, D2 / K-A) — kart DEĞİL: adım şeridinin YAPISI
   (üstte 3px çubuk + h3 + metin), üç geniş blok. Kapalı eksen olduğu için
   kutu/çerçeve yoktur; ağırlık metinde durur.
   Çubuk HAIRLINE'dır, kırmızı DEĞİL (KARAR 2026-07-22, Murat — denetim bulgusu):
   kırmızı yapılınca viewport'ta 3 ek kırmızı çubuk doğuyor ve §8/8 "≤2 kırmızı
   öğe" kuralı ihlal ediliyordu (ölçülen viewport toplamı 9). Kırmızı imza
   kicker'da kalır; adım şeridiyle de aynı dil (`.wsite-step`). --- */
.wsite-shapes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
/* Anchor inişi: üst bar (40px) + header (72px) sticky'dir — çapa hedefi bu kadar
   aşağıdan başlamazsa blok başlığı chrome'un ALTINDA kalır. Token'dan türer. */
:root { --w-chrome-h: 113px; }   /* 40 utility + 72 header + 1px hairline (chrome.css) */
.wsite-shape { border-top: 3px solid var(--w-hairline); padding-top: 16px; scroll-margin-top: var(--w-chrome-h); }
.wsite-shape h3 { margin: 0 0 8px; font-size: 21px; }
.wsite-shape p { margin: 0; color: var(--w-ink-muted); font-size: 16px; }
/* Koyu bağlam (KARAR 2026-07-30): `.wsite-shape` iki AÇIK-ZEMİN değeri taşır —
   3px hairline üst çubuğu ve gövdenin `--w-ink-muted` rengi. Koyu bantta ikisi
   de görünmez/kırık olur (hairline navy üstünde kaybolur, ink-muted kontrastı
   düşer). Scope tabanlı düzeltme (§9/14): renk yalnız `.wsite--dark` içinde
   ezilir, bölüme özel yama açılmaz. Ölçüldü: on-dark-muted navy üstünde AA. */
.wsite--dark .wsite-shape { border-top-color: var(--w-hairline-dark); }
.wsite--dark .wsite-shape p { color: var(--w-on-dark-muted); }

/* =============================================================================
   İKONOGRAFİ (design §13, KARAR 2026-08-04) — "işaretleme, dekor değil".
   Lucide subset sprite (`static/img/icons/iorbitx-icons.svg`), <use> ile
   çağrılır. Gösterim 20px (viewBox 24), stroke ailenin kendi değeri, dolgu yok.
   RENK: daima `currentColor` → başlığın rengini alır; açık zeminde
   `--w-ink`/`--w-navy`, koyu bantta `.wsite--dark` scope'undan `--w-on-dark`.
   Bölüme özel renk yaması YOK (§9/14) ve KIRMIZI YASAK (§13/2).
   ANİMASYON YOK (§13/6) — transition/transform tanımlanmaz.
   ============================================================================= */
/* BLOK BOYU 40px (§13/2 varsayılanı, KARAR 2026-08-04) — medya bloğu düzeni.
   `--w-icon-block` tek kaynaktır; ham 40 başka yere yazılmaz. */
:root { --w-icon-block: 40px; }
.wsite-icon {
  width: var(--w-icon-block); height: var(--w-icon-block);
  flex: none;                 /* metin uzayınca ikon ezilmesin */
  stroke: currentColor; fill: none;
}
/* MEDYA BLOĞU (§13/2): [ikon 40px] + [metin sütunu: başlık + açıklama (+chip)].
   İkon metin bloğuyla DİKEY ORTALI; ikon-metin arası 16px.
   Blok ritmi DEĞİŞMEZ: sarmalayıcı `display:flex` yalnız hizayı kurar, iç
   öğelerin kendi margin'leri (kolon üst hairline'ı, başlık alt boşluğu, chip
   satırı) olduğu gibi kalır — bu yüzden metin sütunu `min-width:0` ile taşmayı
   engeller ve `flex:1` ile kalan genişliği alır. */
.wsite-icon-block {
  display: flex; align-items: flex-start; gap: 16px;
}
/* OPTİK HİZA (SPEC 1 mikro-kararı, ölçüldü 2026-08-04): tam-blok dikey ortalama
   UZUN bloklarda (desk kolonları: 3-4 satır metin + chip şeridi) ikonu başlıktan
   koparıp paragrafın ortasında asılı bırakıyordu — ikon-başlık ilişkisi kopuyor.
   Bu yüzden hiza bloğun ORTASINA değil BAŞLIK SATIRINA yapılır: ikon üstten
   hizalanır ve başlığın optik merkezine indirilir.
   Değer: (başlık satır yüksekliği − ikon) / 2 ≈ (h3 line-box − 40px)/2.
   Kısa bloklarda (katman başlığı) da aynı kural geçerlidir — tek davranış. */
.wsite-icon-block > .wsite-icon { margin-top: calc((1lh - var(--w-icon-block)) / 2); }
/* KATMAN BAŞLIĞI RİTMİ (ölçüldü 2026-08-04): `.wsite-servicetable-head`ın üst
   nefesi (`padding-top`) medya bloğuna geçince YALNIZ metin sütununu itiyordu →
   ikon başlığın üstünde asılı kalıyordu. Ritim artık BLOĞUN kendisine taşınır;
   başlık kendi padding'ini bloğun içinde sıfırlar. Değerler ve seçici zinciri
   (kicker/section-head komşulukları) DEĞİŞMEDİ — yalnız taşıyıcı değişti. */
.wsite-icon-block:has(> .wsite-icon-body > .wsite-servicetable-head) {
  padding-top: calc(var(--w-section-gap) / 2);
}
.wsite-section-head + .wsite-icon-block { padding-top: 8px; }
.wsite-kicker + .wsite-icon-block,
.wsite-section-head + .wsite-kicker + .wsite-icon-block { padding-top: 0; }
.wsite-icon-block .wsite-servicetable-head { padding-top: 0; }
.wsite-icon-block > .wsite-icon-body { flex: 1; min-width: 0; }
/* Başlık, medya bloğu içinde kendi ritmini korur — ikon artık başlığın DEĞİL,
   bloğun kardeşidir (eski `.wsite-icon-head` satır-içi düzeni öldü). */
.wsite-icon-body > :first-child { margin-top: 0; }

/* --- Servis tablosu başlığı (/services/ "What we operate", KARAR 2026-07-31)
   İki tablo alt alta durur; her birinin üstünde katman adı (H3) + giriş
   cümlesi. Kural yalnız RİTİM taşır (tipografi h3'ün kendi ölçüsünden gelir):
   ilk tablo bölüm başlığına yakın, ikincisi öncekinden net ayrılır.
   (ESKİ — bu turda ÖLDÜ, zinciriyle silindi: `.wsite-caseproof` kanıt bloğu +
   `.wsite-chips`/`.wsite-chip` rozetleri + iki-kart üst hiza kuralı
   `.wsite-grid.cols-2 .wsite-card > h3 + p`. Üçü de yalnız kart düzeninde
   kullanılıyordu; kart kalkınca tüketicisi kalmadı — ölçüldü.) --- */
/* ÖLÇÜLEN KUSUR (2026-07-31): tipografi zaten doğruydu (SG 700 · 24px ·
   `--w-ink` — emsalle birebir); bozuk olan RİTİMDİ. İkinci bloğun üstünde
   ölçülen boşluk 0px'ti: `.wsite-matrix-wrap`ın 32px `margin-top`u ile
   başlığın 48px'i ÇAKIŞIYOR (margin collapse) ve blok bir önceki tabloya
   yapışık okunuyordu — başlık "kendi tablosuna ait" görünmüyordu.
   ÇÖZÜM: üst nefes bölüm ritmi token'ından türetilir (`--w-section-gap`ın
   yarısı = 40px @1440, mobilde 24px — ham px YAZILMAZ, token değişirse bu
   kural doğru kalır) ve `padding-top` ile verilir: padding COLLAPSE OLMAZ,
   komşunun margin'i onu yutamaz. Alt nefes 8px'te kalır (h3'ün kendi
   ölçüsü) → üst/alt oranı ~5:1, başlık aşağıdaki tabloya bağlanır.
   Başlık→açıklama ilişkisi `.wsite-section-head`in kendi oranıyla aynı
   ailededir (h3 mb 8px + lead mt 0). */
.wsite-servicetable-head {
  margin: 0 0 8px;
  padding-top: calc(var(--w-section-gap) / 2);
}
/* Bölüm girişinden sonraki İLK blok: section-head'in kendi 32px alt boşluğu
   zaten nefes veriyor, üstüne tam ritim binmez (aksi halde giriş cümlesiyle
   ilk başlık arası ikinci bloğunkinden geniş olurdu — ölçüldü). */
.wsite-section-head + .wsite-servicetable-head { padding-top: 8px; }
/* KICKER EKLENDİ (2026-07-31): imza artık bloğun İLK öğesi, dolayısıyla ÜST
   NEFES ONA taşınır — yoksa kicker↔başlık arasına ritim girer ve imza bloktan
   kopar. Aynı token, aynı değerler; başlık kicker'ın hemen altında kalır. */
.wsite-kicker + .wsite-servicetable-head,
.wsite-section-head + .wsite-kicker + .wsite-servicetable-head { padding-top: 0; }
/* ÜST NEFES = TAM BÖLÜM RİTMİ (KARAR 2026-07-31, ölçümle). Sayfadaki bölüm
   kicker'ları ("The model", "Visibility") kendi bölümlerinin ÜST padding'inden
   tam `--w-section-gap` alıyor (ölçüldü: metin üstüne 79px @1440 / 47px @390).
   Katman kicker'ları bölüm içi olduğu için o padding'i miras almaz; aynı ritim
   burada AÇIKÇA verilir. (ESKİ: `/2` yarım ritim — 39px/23px, standardın
   altındaydı.) `padding` kullanılır çünkü `.wsite-matrix-wrap`ın margin'i
   `margin-top`u yutuyordu (collapse dersi, 2026-07-31). */
.wsite-matrix-wrap + .wsite-kicker { padding-top: var(--w-section-gap); }
/* Bölüm girişinden sonraki İLK blok: `.wsite-section-head`in kendi 32px alt
   boşluğu ritmin bir parçasıdır — üstüne tam gap binerse ilk aralık ikinciden
   geniş olur. Fark kadar tamamlanır (80-32=48 / 48-32=16). */
.wsite-section-head + .wsite-kicker {
  padding-top: calc(var(--w-section-gap) - 32px);
}
.wsite-servicetable-head + .lead { margin-top: 0; }
/* Açıklama ile kendi tablosu arası SIKI kalır: `.wsite-matrix-wrap`ın genel
   32px'i burada 16px'e iner — blok (başlık + açıklama + tablo) tek nesne
   olarak okunur. */
.wsite-servicetable-head + .lead + .wsite-matrix-wrap { margin-top: 16px; }

/* --- Form mikro-dipnotu (Contact, KARAR 2026-07-31) — formun EN ALTINDAKİ
   gizlilik satırı. Buton altında metin kalmaz; bu satır formdan SONRA, en
   küçük ölçüde durur (11px — `fine-print`in altı, bilinçli mikro ölçü).
   Seçici `p.wsite-form-note` (0,1,1): tek sınıf `.wsite-main p` (0,1,1)
   ile eşit specificity'de KAYBEDERDİ (sonra gelen kazanır, ama sıra
   kırılganlığına güvenilmez) — element+sınıf ile kesin kazanır.
   (Aynı tuzağın 4. tekrarı: .wsite-tech · .wsite-chip · .wsite-byline.) --- */
p.wsite-form-note {
  margin: 20px 0 0; font-size: 11px; line-height: 1.45;
  color: var(--w-ink-muted); max-width: 640px;
}
p.wsite-form-note a { color: inherit; text-decoration: underline; }

/* --- Kurucu byline (About, KARAR 2026-07-30) — "ben" registerinde KALAN
   blokların başındaki atıf satırı ("From the founder / Kurucudan"). Eyebrow
   ailesinden gelir (tipografi tek yerde: UPPERCASE + tracking + muted);
   burada yalnız KONUM: h2'nin altında, gövdeden önce. --- */
/* Seçici `p.wsite-byline` (0,1,1) — tek sınıf (0,1,0) YETMEZ: `.wsite-main p`
   (0,1,1) gövde ölçüsünü (17px) byline'a sızdırıyor ve eyebrow 13px yerine
   17px render ediliyordu (ölçüldü 2026-07-31). Ölçü/ağırlık/renk yine
   `.wsite-eyebrow` ailesinden gelir; burada yalnız o ailenin kazanması
   sağlanır + konum. (Aynı tuzağın üçüncü tekrarı: `.wsite-tech`, `.wsite-chip`.) */
p.wsite-byline { margin: 12px 0 0; font-size: 13px; line-height: 1.2; }

/* --- Bölüm kapanış paragrafı (P2 Services, 2026-07-26) — ızgaradan SONRA
   gelen tek paragraf; bölümün hükmünü söyler.
   TİPOGRAFİ KALKTI (KARAR 2026-07-30): bu sınıf artık YALNIZ KONUM taşır.
   Boy/ağırlık/renk `.lead`ten gelir (şablonda iki sınıf birlikte verilir) →
   katman altmetni ile kapanış paragrafı TEK KAYNAKTAN beslenir, ölçü farkı
   yapısal olarak imkânsız. ESKİ: burada 17px/1.55/--w-ink tanımlıydı ve
   `.lead`in 21px/300/ink-muted değerlerinden ayrışıyordu.
   NOT: `.lead` Inter 300'dür ve 21px'te kullanılır — design §2'nin "ince
   kesim yalnız ≥19px" kuralı sağlanır (eski 17px'te sağlanamadığı için
   burada ayrı tanım vardı; sınıf birleşmesiyle sorun ortadan kalktı). --- */
.wsite-section-close { margin: 32px 0 0; }

/* =============================================================================
   6d) KAPI FORMU (Faz 3.2 — içerik paketi №4)
   Mevcut gramerden: hairline çerçeve, radius 0, gölge yok (skill §4/§5).
   ============================================================================= */
.wsite-form { max-width: 640px; }
.wsite-field { margin: 0 0 20px; }
.wsite-field label {
  display: block; margin: 0 0 8px;
  font-family: var(--w-font-sans); font-weight: 700; font-size: 14px;
  color: var(--w-ink);
}
/* Form alanları — hairline çerçeve, radius 0, GÖLGE YOK. app.css'in genel
   `input,select,textarea` kuralı website'a da uyguladığı için burada zemin/
   çerçeve/radius ezilir; `box-shadow: none` ZORUNLU (KARAR 2026-07-22, D3/7):
   app.css focus'ta `0 0 0 3px rgba(57,87,255,.15)` — İNDİGO — basıyordu, hem
   §9/1 palet hem §4 gölge kuralını deliyordu. */
.wsite-form input[type="text"],
.wsite-form input[type="email"],
.wsite-form select,
.wsite-form textarea,
.wsite-surface .auth-wrap input {
  width: 100%; box-sizing: border-box;
  font: inherit; color: var(--w-ink);
  background: var(--w-canvas);
  border: 1px solid var(--w-hairline); border-radius: 0;
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color 120ms var(--w-ease);
}
.wsite-form input:focus, .wsite-form select:focus, .wsite-form textarea:focus,
.wsite-surface .wsite-section input:focus,
.wsite-surface .wsite-section textarea:focus {
  border-color: var(--w-ink-muted);
  box-shadow: none;   /* indigo halka sıfırlandı; odak göstergesi outline'dan gelir */
}
.wsite-form textarea { resize: vertical; min-height: 132px; }
.wsite-field-help { margin: 8px 0 0; font-size: 14px; color: var(--w-ink-muted); }
.wsite-field-error { margin: 8px 0 0; font-size: 14px; color: var(--w-accent); }
/* Honeypot: ekran-dışı, erişilebilirlik ağacında görünmez, yer kaplamaz. */
.wsite-hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Gönderim sonrası başarı bloğu — paper plaka, kırmızı sol çubuk (testimonial dili). */
.wsite-form-success {
  max-width: 640px; background: var(--w-paper);
  border: 1px solid var(--w-hairline); border-left: 3px solid var(--w-accent);
  padding: 32px;
}
.wsite-form-success h3 { margin: 0 0 8px; }
.wsite-form-success p { margin: 0; color: var(--w-ink-muted); }

/* =============================================================================
   7) DUYARLI (responsive)
   ============================================================================= */
@media (max-width: 960px) {
  .wsite-hero-copy { max-width: none; }
  .wsite-stats { grid-template-columns: repeat(2, 1fr); }
  .wsite-shapes { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  :root { --w-main-pad-y: 48px; }   /* main + CTA negatif margin birlikte iner */
  :root { --w-section-gap: 48px; }
  /* DOKUNMA HEDEFLERİ ≥44px (skill §9/5, KARAR 2026-07-22 D3/6) — ölçülen 19-20px
     satır kutusuydu. YALNIZ dokunma alanı büyür: font-size, renk ve etiket metni
     DEĞİŞMEZ; kural mobil sorgunun içinde olduğu için 1440 görünümü etkilenmez.
     `inline-flex + min-height` metni dikey ortalar, satır yüksekliğini bozmaz. */
  .wsite-surface .wsite-nav a,
  .wsite-surface .wsite-utilitybar a,
  .wsite-surface .wsite-footer-cols a,
  .wsite-surface .wsite-footer-legal a,
  .wsite-surface .wsite-footer-staff a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  /* Footer liste öğeleri arasında ekstra boşluk oluşmasın (min-height zaten nefes verir). */
  .wsite-surface .wsite-footer-cols li { margin-bottom: 0; }
  /* Public footer mobilde 2 kolon (chrome.css deseniyle aynı; scope'lu çünkü
     .wsite-surface repeat(5) kuralı daha yüksek specificity'de). */
  .wsite-surface .wsite-footer-cols { grid-template-columns: repeat(2, 1fr); }
  /* Header ghost CTA masaüstünde 40px'e sabitlenmiş (header bandına otursun diye);
     mobilde o kısıt yok — dokunma hedefi 44px'e çıkar. */
  .wsite-surface .wsite-header-cta .btn { height: 44px; min-height: 44px; }
  .wsite-grid, .wsite-grid.cols-2 { grid-template-columns: 1fr; }
  /* Dar kolonda sağ pay gereksiz daraltma yapar — masaüstündeki okuma nefesi
     (60ch + 24px) mobilde aranmaz; kolonun kendisi zaten dar. */
  .wsite-card p { max-width: none; padding-right: 0; }
  .wsite-hero h1 { font-size: 38px; }
  /* Mobilde sabit hero yüksekliği aranmaz — içerik ne kadarsa o kadar (masaüstü
     eşitlik kuralı §8/11 dar ekranda uygulanmaz; boş navy alan üretmemek için). */
  .wsite-hero .wsite-container { min-height: 0; }
  .wsite-main h1, .wsite-main h2, .wsite-page-title { font-size: 30px; }
  /* Dikey nefes 48px; yatay padding breakout formülünden gelir (mobilde --space-5'e
     düşer), dokunulmaz — yoksa full-bleed rail bozulur. */
  .wsite-cta-band { padding-top: 48px; padding-bottom: 48px; }
  /* About bileşenleri: dar ekranda yıl/numara üste geçer, testimonial nefes alır. */
  .wsite-principle, .wsite-milestone { grid-template-columns: 1fr; gap: 8px; }
  /* OMURGA HATTI mobilde KAPANIR (SPEC 6): grid tek kolona düşünce 132px'lik
     hat metnin ortasından geçerdi. Dar ekranda kronolojiyi zaten tek kolon
     akış + yatay ayraçlar taşıyor; hat orada bilgi katmıyor. */
  .wsite-timeline::before, .wsite-milestone::before { content: none; }
  /* Kayıt defteri dar ekranda tek kolon: tarih üste geçer (Milestones deseni).
     Sol kırmızı işaret gövdede kalır — satır kimliği bozulmaz. */
  .wsite-ledger-row { grid-template-columns: 1fr; gap: 12px; }
  .wsite-testimonial { padding: 24px; }
  /* Services: paper bandı nefesi 48px'e iner. */
  .wsite-band-paper { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 480px) {
  .wsite-stats { grid-template-columns: 1fr; }
}
/* Public footer ≤520px tek kolon (chrome.css deseniyle aynı kırılım; scope'lu
   çünkü .wsite-surface repeat(5) kuralı daha yüksek specificity'dedir). */
@media (max-width: 520px) {
  .wsite-surface .wsite-footer-cols { grid-template-columns: 1fr; }
}