/* ============================================================================
   Categories.css — YALNIZ /kategoriler
   Şablon: Pages/Site/Categories.html · Sayfanın JS'i YOK (2026-09-01)

   `Js/Site/Categories.js` yalnız dünya kartlarının "Örnekleri gör"
   akordeonunu taşıyordu; akordeon scroll istifiyle birlikte kalkınca dosya da
   silindi. Sayfada geriye kalan TEK hareket istif ve o da CSS
   (`position: sticky`) — hareketli etkinlik şeridi 2026-09-01 akşamı
   kaldırıldı (§3). Buraya bir JS dosyası geri gelecekse önce "bu gerçekten
   CSS'te olamaz mı?" sorusu cevaplanmalı — bu sayfada iki kez olamadığı
   sanıldı, ikisinde de olabildi.

   Özellikler sayfasının (`Features.css`) kurduğu desen: sayfaya özel kurallar
   sayfaya özel dosyada yaşar, Site.css'e bir satır bile eklenmez. Buradaki
   hiçbir sınıf başka bir sayfada geçmez — yani bu dosya başka bir sayfada
   görsel gerileme yaratamaz. Ön ek `cw-` ("category worlds"), bu sayfanın ad
   alanı.

   TASARIM SİSTEMİNDEN NE ÖDÜNÇ ALINDI: token'ların tamamı (renk, punto, ölçü,
   gölge, geçiş), `.eyebrow`, `.container`,
   `.phone-wrap--lg` + `PhoneCategories`, `activityCard` (`.cat-act*`) ve
   `devAreaIcon` (`.devarea-ico`). Yeni font yok, yeni kütüphane yok, yeni
   görsel varlık yok.
   `.reveal` ARTIK ÖDÜNÇ ALINMIYOR: dünya kartları istife dönünce menteşe
   animasyonunun bitiş karesi (`transform: none`) kartın kendi eğimini
   siliyordu — girişi bugün istifin kendisi taşıyor (§4).

   İÇİNDEKİLER
     1) Kabuk + yardımcılar
     2) Hero
     3) Hareketli etkinlik şeridi (silindi)
     4) Dört büyük dünya kartı — scroll istifi
     5) Sekiz gelişim alanı (silindi)
     6) Responsive
     7) prefers-reduced-motion
============================================================================ */

/* ----------------------------------------------------------------------------
   1) Kabuk + yardımcılar
---------------------------------------------------------------------------- */
/* LEVHA = TELEFONDAKİ BALONUN KENDİSİ (2026-09-01 akşamı, kullanıcı: "light
   modda da dark modda da renkler telefonun içindeki balonların renginde olsun
   dört dünya kartlarının").

   KAYNAK UYDURULMADI: hero'daki telefonun dört kategori balonu `.cps-b1..b4`
   ve zemini `radial-gradient(120% 120% at 32% 18%, <açık>, <orta> 62%, <koyu>)`
   — duraklar uygulamanın kendi `categoryColors.ts` gradyanları,
   `Site.css`te `--cat-play1/2/3` · `--cat-think*` · `--cat-expl*` ·
   `--cat-conv*` olarak duruyor. Levha AYNI geometriyi ve AYNI üç durağı
   kullanır; yalnız temaya göre bir nötr renge doğru karıştırılır.

   ÜÇ DURAĞIN İKİSİ ZATEN VARDI: sitenin `--cat`i balonun ORTA durağı
   (`#FF2DBE` = `--cat-play2`), `--cat-deep`i KOYU durağı (`#D71E9B` =
   `--cat-play3`). Eksik olan yalnız AÇIK duraktı; `SiteContent.CATEGORIES`e
   `colorLite` olarak eklendi ve şablon `--cat-lite` diye geçiriyor. Türetilmedi
   — `#FFA5E1`i `#FF2DBE`den bir formülle üretmek yaklaşık bir renk verir ve
   uygulamanın paletinden sessizce ayrışır. `test_category_colors_match_the_app_palette`
   üçünü birden Site.css'teki token'lara bağlar.

   TAM DOYGUNLUK DENENMEDİ, ÖLÇÜLDÜ VE ELENDİ: balonun kendi hex'leriyle
   (`#FF2DBE`, `#F5A51E`) 448px'lik metin taşıyan bir levhada Düşün kartında
   beyaz metin **2.90**, lacivert metin **3.46** veriyor — AA tabanı 4.5, yani
   dört karttan ikisinde gövde metni okunmaz oluyor. Balon 96px ve üstünde tek
   satır beyaz ad var; levhada paragraf, etiketler ve bir bağlantı var. O yüzden
   duraklar karıştırılır ve karışım oranı ÖLÇÜMLE seçilir (aşağıda).

   MÜREKKEP İKİYE AYRILDI ve ayrım WCAG'in kendi eşiğidir:
     `.cw-name` BÜYÜK METİN (clamp 1.55-2.15rem, 800) -> AA tabanı **3.0**,
        o yüzden kategori rengini taşımaya devam eder (`--cw-slab-ink`;
        ölçüm zaten 4.07-5.18, yani küçük metin tabanını da geçiyor).
     `.cw-benefit` · `.cw-ex-h` küçük metin -> AA tabanı **4.5**,
        renkli mürekkep doygun levhada oraya çıkamıyor (açık temada en iyi
        ihtimalle 4.27), o yüzden hepsi `--cw-body` okur.
   Bir dönem üçü de `--cw-slab-ink` okuyordu; levha %18 tint iken doğruydu
   (4.98-6.56), balon gücünde değil. */
.cw-card {
  /* AÇIK TEMA — duraklar beyaza doğru %46. Ölçüldü: gövde `--tx1` ile
     5.46-7.19, başlık 4.07-5.18, beyaz etiket pill'i levhadan 1.60-2.11
     ayrışıyor.
     %46 TAVAN: %60'ta gövde 4.31'e (Oyna) iner, yani AA'nın altına. */
  --cw-s1: color-mix(in srgb, var(--cat-lite, var(--cat)) 46%, #FFF);
  --cw-s2: color-mix(in srgb, var(--cat) 46%, #FFF);
  --cw-s3: color-mix(in srgb, var(--cat-deep, var(--cat)) 46%, #FFF);
  /* MÜREKKEP DE `#000`A DOĞRU KARIŞIR, `--tx1`e DEĞİL — ve sebep levhanınkiyle
     aynı: laciverte doğru karıştırılan renk hue'sunu kaybediyor. Bir kez öyle
     yazıldı (`color-mix(in oklch, --cat-deep 52%, --tx1)`) ve %18 tint
     üstünde fark edilmedi; balon gücündeki levhada gözle görülür oldu —
     Düşün'ün turuncusu 63° AMBER levhanın üstünde 293°'lik ERİK MORU bir
     başlığa dönüyordu (oklch, turuncu→lacivert arasını kısa yoldan geçiyor).
     `srgb` + siyah hue'yu birebir koruyor (346/63/162/278 → 346/63/162/278)
     ve ölçüm de daha iyi: levhada 4.07-5.18. */
  --cw-slab-ink: color-mix(in srgb, var(--cat-deep, var(--cat)) 62%, #000);
  --cw-body: var(--tx1);
  /* Etiket zemini BEYAZ kalır: doygun levhanın üstünde beyaz pill ayrışıyor
     (1.60-2.11). Mürekkebi bugün başlığınkiyle AYNI DEĞER, ama ayrı token
     olarak duruyor çünkü ayrı bir zeminde ölçülüyor: beyaz pill üstünde
     6.51-10.63, levha üstünde 4.07-5.18. Biri değişirse öteki kendi zemininde
     yeniden ölçülmeli. */
  --cw-tag-bg: var(--card-solid);
  --cw-tag-ink: var(--cw-slab-ink);
  --cw-edge: color-mix(in oklch, var(--cat) 38%, var(--border-strong));
  /* Kılcal ayraç ARTIK KATEGORİ RENGİ DEĞİL: levha zaten kategori rengi, aynı
     renkten bir çizgi onun üstünde kayboluyordu (%26'da 1.22-1.40). Zeminin
     mürekkebinden %30 açık temada 1.57-1.66 veriyor. */
  --cw-hair: color-mix(in srgb, var(--tx1) 30%, transparent);
}

/* KOYU TEMA — AYNI ÜÇ DURAK, AYNI GEOMETRİ, siyaha doğru %40.
   İkinci bileşen SİYAH olmak zorunda ve bu ölçümle bulunmuş bir kısıt:
   `--card-solid` (#151B3D) karanlık ama NÖTR DEĞİL, belirgin bir lacivert
   kroması var (hue 273°). Ona doğru karıştırılan kategori rengi hue'sunu
   kaybediyor — %13'te Düşün turuncusu 73° -> 293/305° (mor), Keşfet yeşili
   163° -> 259/247° (mavi), üstelik `oklch` ve `srgb`de birden, yani karışım
   uzayını değiştirmek çözüm değil. Siyahın kroması sıfır, hue'su YOK: karışım
   rengi yalnız koyulaştırır. Sapma <=3°.

   %40 TAVAN: gövde `--tx1` ile 5.90-7.45 veriyor; %46'da Düşün 4.78'e iner ve
   `--tx2` zaten %40'ta 4.40 ile AA'nın altında — o yüzden koyu temada gövde
   `--tx2` DEĞİL `--tx1` okur (açık temadaki kararla aynı sebep). */
[data-theme="dark"] .cw-card {
  --cw-s1: color-mix(in srgb, var(--cat-lite, var(--cat)) 40%, #000);
  --cw-s2: color-mix(in srgb, var(--cat) 40%, #000);
  --cw-s3: color-mix(in srgb, var(--cat-deep, var(--cat)) 40%, #000);
  --cw-slab-ink: color-mix(in srgb, var(--cat) 55%, #FFF);
  --cw-body: var(--tx1);
  /* YÜKSELTİLMİŞ YÜZEY — levhanın üstünde duran her şey (üç etkinlik kartı,
     onların balonu, etiket pill'leri). Temanın `--card-active`i BURADA
     KULLANILAMAZ: o sabit bir lacivert (#1D2552) ve turuncu bir levhanın
     üstünde kartın rengiyle kavga eder. Beyazla %9 açmak levhanın hue'sunu
     koruyup bir kademe yükseltir (1.25-1.31). */
  --cw-lift: color-mix(in srgb, #FFF 9%, var(--cw-s2));
  --cw-tag-bg: var(--cw-lift);
  /* %62 DEĞİL %55: yükseltilmiş yüzeyin üstünde %62 dört kategorinin ikisinde
     AA'nın altına iniyor (Oyna 4.18 · Muhabbet 4.36). %55'te 4.57-4.81. */
  --cw-tag-ink: color-mix(in srgb, var(--cat) 55%, #FFF);
  --cw-edge: color-mix(in oklch, var(--cat) 46%, var(--border-strong));
  --cw-hair: color-mix(in srgb, #FFF 22%, transparent);
}

/* Görsel olarak gizli ama ekran okuyucuda duran başlık. `display: none`
   OLAMAZ — o, öğeyi erişilebilirlik ağacından da siler ve `aria-labelledby`
   ile ona bağlanan bölüm adsız kalır. */
.cw-vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   2) Hero — kopya solda, gerçek uygulama ekranı sağda
   `pageHero` makrosu ORTALANMIŞ tek kolondur; bu hero iki kolon, o yüzden
   sayfanın kendisi yazıyor. Alınan miras: `.eyebrow`.
---------------------------------------------------------------------------- */
.cw-hero {
  position: relative;
  /* overflow-x DEĞİL `clip`: dekoratif lekeler kabın dışına taşıyor ve
     kırpılmaları gerekiyor, ama `overflow: hidden` bir kaydırma bağlamı
     açar — sayfa içi `#cw-oyna` çapaları o bağlamın içinde tuhaf zıplar. */
  overflow: clip;
  /* ÜST DOLGUYA `--nav-h` DAHİL — navbar `position: fixed`, yani sayfa
     akışında hiç yer kaplamıyor ve hero `top: 0`dan başlıyor. Düz bir dolguyla
     telefonun tepesi navbar'ın altında kalıyordu (1280x900'de ölçüldü: navbar
     0-71px, telefon 27px'ten başlıyor → 45px çakışma; "Listeye katıl" butonu
     mockup'ın ekranının üstünde duruyordu). Site.css'teki `.page-hero` da
     tam olarak bu calc'ı kullanıyor — burada tek fark alt dolgunun küçük
     kalması, çünkü hemen altında şerit var. */
  /* İlk-ekran denetimi (2026-08-30): 16/2.6vh/34 → 12/2vh/24, alt
     22/3.6vh/44 → 16/2.6vh/30 — o gün altta duran etkinlik şeridi fold'a
     yaklaştı. Şerit 2026-09-01'de kalktı (§3) ve alt dolgu BÜYÜTÜLMEDİ:
     hero'nun altındaki boşluk artık doğrudan ilk levhanın önündeki boşluk,
     ve istenen (kullanıcı) onun bir tık DARALMASIYDI. */
  padding: calc(var(--nav-h) + clamp(12px, 2vh, 24px)) 0 clamp(12px, 2vh, 22px);
}
.cw-hero-bg { position: absolute; inset: 0; pointer-events: none; }

/* Dört kategori renginden yumuşak lekeler. DEKORATİF: alfa bilerek çok düşük,
   ikisi de metnin altına girmiyor (biri sol üstte başlığın DIŞINDA, üçü sağ
   yarıda telefonun arkasında). Blur yerine radial-gradient — `filter: blur`
   bu boyutta öğeyi kendi katmanına taşıyıp üstündeki metni kalıcı olarak
   yumuşatıyor (hero parallax'taki rasterleşme tuzağının aynısı). */
.cw-blob {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--cat) 55%, transparent), transparent 68%);
  opacity: .16;
}
[data-theme="dark"] .cw-blob { opacity: .22; }
.cw-blob--1 { width: 340px; height: 340px; left: -120px;  top: -90px; }
.cw-blob--2 { width: 260px; height: 260px; right: 18%;    top: -70px; }
.cw-blob--3 { width: 420px; height: 420px; right: -140px; top: 12%; }
.cw-blob--4 { width: 300px; height: 300px; right: 26%;    bottom: -150px; }

.cw-hero-in {
  position: relative; z-index: 1;
  display: grid; gap: clamp(20px, 3.4vw, 44px);
  align-items: center;
}
/* TABANDA ORTALI, 961px'TE SOLA DONER (2026-09-10) — bu dosya mobile-first
   yazilmis (iki kolon yalniz `min-width` bloklarinda), o yuzden ortalama
   `max-width` blogu ACARAK degil tabana yazilip masaustunde geri alinir
   (`Site.css` §`.cta-copy`nin deseni). Gerekce: tek kolonda hero'nun yatay
   komsusu yok — olculdu, 960px'te tek / 1024'te yan yana. Ayni cokuste
   `/uyku` ve `/gelisim` hero kopyasini ortaliyordu, bu sayfa `/iletisim` ile
   birlikte istisnaydi. */
.cw-hero-copy { min-width: 0; text-align: center; }
/* PUNTO ELLE YAZILIR — taban `h1` kuralı (Site.css) yalnız aile/ağırlık/satır
   verir, ÖLÇÜ vermez: yazılmadığında tarayıcının 2em varsayılanı geçerli olur
   ve başlık masaüstünde 34px'te kalıyordu, yani sayfanın en büyük yazısı
   `.page-hero h1`in (~51px) üçte iki boyunda. İki kolonlu bir hero'da kopya
   baş roldür; küçük başlık sağdaki telefonu yalnız bırakıp ortada boşluk
   açıyordu. Tavan `.page-hero`nun ALTINDA (2.95rem ≈ 47px) çünkü bu hero'nun
   kopyası tek kolona değil kolonun yarısına sığmak zorunda. */
.cw-hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.2vw, 2.95rem);
  letter-spacing: -.02em;
}
.cw-hero-copy p {
  margin: 0; max-width: 54ch;
  color: var(--tx2); font-size: var(--fs-xl); line-height: 1.65;
}

/* ---- Üç ölçü + tek eylem --------------------------------------------------
   2026-08-31, kullanıcı kararı. ÖLÇÜLDÜ (1440x900, Chromium): sol kolon 892px
   genişken içindeki en geniş metin 408px'ti — başlığın sağında 484px, metnin
   sağ ucu ile telefon arasında 528px ölü alan; dikeyde kopya 154px, telefon
   511px (fark 356px) ve `align-items: center` başlığı navbar dibinden 200px
   aşağıda başlatıyordu. Yani hero'nun sol üst çeyreği tamamen boştu.

   EKSİK OLAN ÖLÇÜ DEĞİL İÇERİKTİ. Kayıtta bu bir kez `h1` puntosu büyütülerek
   (2.95rem tavanı) kapatılmaya çalışılmış ve yetmemişti — çünkü sitedeki öteki
   iki kolonlu hero'ların hepsinin sol kolonunda çip/sayı/eylem var (`/uyku` üç
   sayı, `/fiyatlandirma` iki buton + dört çip), bu hero'da hiçbiri yoktu.
   Telefonu büyütmek (306px) elendi: yatay boşluğu 62px kapatırken dikey farkı
   436px'e çıkarıyor, yani şikâyetin daha büyük yarısını büyütüyor.

   ÖBEKLERİ AYIRAN ŞEY BOŞLUK, ÇİZGİ DEĞİL — ana sayfanın karşılığı olan
   `.hero-trust` satırı da ayraçsız. Bir dönem `li + li` kılcal `--border`
   çizgisi taşıdı (`/uyku`nun `sx-facts`inden alınmıştı, orada öbekler sola
   toplanır ve çizgi iş görür) ve ÖLÇÜLDÜĞÜNDE İKİ YERDE BİRDEN kırıldı:
   350px'lik mobil kapta ve EN'de 961-1100 arası masaüstünde satır SARIYOR
   ("1,000+ screen-free activities" TR karşılığından uzun), `li + li` ise
   sarma sonrası satırın BAŞINA da bir çizgi koyuyor — hiçbir şeyi ayırmayan,
   satırın önünde asılı duran bir kılcal çizgi. CSS'te "sarmış öğe" seçicisi
   yok; eşikle kapatmak da iki dilde iki ayrı sayı ister. Boşluk her genişlikte
   ve her dilde doğru çalışıyor, üstelik sayı (1.7rem, 800) ile etiket
   (`--fs-sm`) arasındaki ölçü farkı öbeği zaten kendi başına gruplandırıyor.

   Sayı `--tx1` OKUR, yani temayla çevrilir (hero sticker'ının aynı kararı):
   sabit bir lacivert koyu temada kendi zeminine gömülürdü. `tabular-nums`
   şart — rakam genişliği sabit kalmazsa hiza dilden dile kayar. */
.cw-facts {
  list-style: none; padding: 0;
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 36px);
}
/* Uc olcu tabanda ORTALANIR: `text-align` bir flex kabinin ogelerini
   tasimaz, `justify-content` sart (961px'te `space-between` ezer). */
.cw-facts { justify-content: center; }
/* MOBILDE UC OLCU ALT ALTA (2026-09-10, kullanici: "ortada cok sikismis").
   390px'te uc ogenin toplam genisligi 364px, kap 350px — yani satir HER
   ZAMAN sariyordu ve "4 kategori"/"8 gelisim alani" 18px'lik bir bosluga
   sikisip ucuncu olcu tek basina alta dusuyordu (yatay `gap` orada
   `clamp(18px, 3vw, 36px)`in tabani). Kolon yonu sarmayi ortadan kaldirir:
   uc olcu de kendi satirinda, ortali ve esit araliklarla durur. */
@media (max-width: 620px) {
  .cw-facts { flex-direction: column; align-items: center; gap: 11px; }
}
.cw-facts li { display: flex; align-items: baseline; gap: 8px; }
.cw-facts b {
  font-family: var(--font-head); font-size: 1.7rem; font-weight: 800;
  color: var(--tx1); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cw-facts span { font-size: var(--fs-sm); font-weight: 700; color: var(--tx2); }

/* `.cw-hero-btn` ("Dört dünyayı gör" ghost düğmesi) 2026-09-01'de ŞABLONLA
   BİRLİKTE SİLİNDİ — gerekçe Categories.html'de. Yerine ana sayfanın pedagog
   rozeti (`.hero-trust`, Site.css) geldi ve buradaki tek yerel kural ÜST BOŞLUK.

   SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA. Rozet bir `<p>` ve bu kolonun 210. satırda
   yazılmış `.cw-hero-copy p` kuralı (0,1,1) tek sınıflı bir `.cw-hero-trust`i
   (0,1,0) EZER: ilk yazılışı öyleydi ve `margin: 0`da kaldı — hiçbir şey hata
   vermedi, rozet yalnız üstteki bloğa yapışık durdu. Buraya yeni bir kural
   eklenirken aynı tuzak geçerli.

   ÜST BOŞLUK `.cw-facts`INKİNDEN BÜYÜK (2026-09-01, kullanıcı: *"pedagog yazısı
   üstteki yazı ile çok bitişik"*). Eşit aralık burada yetmez: üstteki blok
   1.7rem'lik rakamlar taşıyor, yani optik ağırlığı puntosunun iki katı — aynı
   aralıkta rozet onun DÖRDÜNCÜ ÖLÇÜSÜ gibi okunuyordu. Bu aralık iki blok
   arasında bir grup sınırıdır (ölçüler ≠ iddia), satır arası değil.

   PUNTOYA DOKUNULMAZ: rozet `.cw-hero-copy p`den `--fs-xl` alıyor, yani
   hero'nun alt metniyle aynı boyda — ana sayfadaki `.hero-trust` de öyle.
   Küçültmek onu iddia olmaktan çıkarıp dipnota indirir. */
.cw-hero-copy .cw-hero-trust { margin: clamp(26px, 4.2vh, 42px) 0 0; }

.cw-hero-phone { display: flex; justify-content: center; min-width: 0; }

/* ----------------------------------------------------------------------------
   3) HAREKETLİ ETKİNLİK ŞERİDİ — TAMAMEN SİLİNDİ (2026-09-01 akşamı,
   kullanıcı kararı: "kategoriler sayfasındaki akan şeridi kaldır")

   Hero ile dört dünya kartının arasında 12 etkinlik çipi yavaşça akıyordu
   (iki özdeş grup + `translateX(-50%)`, ana sayfadaki `.marquee` tekniği).
   Kalkmasının bedeli SIFIR bilgi: şeritteki 12 adın 12'si de hemen aşağıdaki
   dört kartın örnek kartlarında (`<b class="cat-act-name">`) düz metin olarak
   duruyor — şerit zaten `aria-hidden` ve linksizdi, yani ekran okuyucu ve
   klavye için hiç var olmamıştı. Kazancı ise dikey: hero ile ilk levha
   arasından ~100px kalktı ve istif ekrana bir tık yukarıdan giriyor.

   SİLİNEN KURALLAR — geri istenirse şablondaki `ns.strip` döngüsüyle birlikte
   geri gelirler: `.cw-strip` (bölüm dolgusu), `.cw-strip-vp` (uçları maskeli
   görüş alanı + dokunmatikte gerçek scroll konteyneri), `.cw-strip-track`
   (`@keyframes cwSlide`, 78s linear infinite, hover'da duraklar),
   `.cw-strip-group`, `.cw-chip*` (çipin kendisi: maskot + kategori adı +
   etkinlik adı + süre).
   Onlarla birlikte iki `@media` dalı da gitti: dokunmatik/dar ekranda
   animasyonu kapatıp `overflow-x: auto` + `touch-action: pan-x` veren blok
   (§6'nın sonu) ve `prefers-reduced-motion`daki üç satır (§7) — süresi
   sıfırlanan bir `infinite` marquee son karesine yapışır, o yüzden orada
   animasyonun KENDİSİ kalkıyordu.

   ÇİPİN TOKEN'LARI DA GİTTİ: §1'in seçicisi bir dönem `.cw-card, .cw-chip`
   idi ve `--cw-chip-bg`/`--cw-chip-ink` adları oradan geliyordu. Bugün o iki
   token'ın tek tüketicisi kartın içindeki `.cw-tag` pill'leri, o yüzden
   adları `--cw-tag-*` oldu — "chip" adını taşıyan bir token, var olmayan bir
   bileşeni tarif ederdi.
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   4) Dört büyük dünya kartı — SCROLL İSTİFİ
   Kartlar 2x2 ızgara DEĞİL (2026-09-01, kullanıcı isteği: loftylab.framer
   .website'in kart istifi). Dördü de tam genişlikte birer levha ve
   `position: sticky` ile üst üste biniyor; `top` her kartta bir kademe
   artıyor, o yüzden altta kalanın ince bir dilimi görünür kalıyor.

   İSTİFİN TAMAMI CSS. Sayfanın JS'i yok: `position: sticky` scroll dinleyicisi
   istemez, yani kaydırma ana iş parçacığında hiçbir şey çalıştırmıyor ve
   efekt JS kapalıyken de aynen çalışıyor.

   ÜÇ ÖLÇÜ BİRBİRİNE BAĞLI, biri değişirse öteki ikisi ölçülmeden değişmesin:
   - `top` kademesi (15px) = alttaki karttan görünen dilim.
   - `--cw-rot` (<=1.1deg) = o dilimin eğimi. 1180px'lik levhada köşe ~11px
     kalkıyor: dilimde açıkça okunuyor, metinde okunmuyor. Referansın ~4deg'si
     bu sitede denenmedi bile — orada kart tek satır başlık taşıyor, burada
     iki kolon metin var.
   - `min-height` (min(56vh, 448px)) = dört kartın EŞİT boyu. Eşitlik şart:
     üstteki kart alttakinden kısa olursa alttakinin ALTI da görünür ve istif
     "kayık" okunur. İçerik doğal boyu ~310px olduğu için taban her kartta
     bağlayıcı, yani dördü birebir aynı boyda.

   RENK ARTIK ZEMİN — AÇIK TEMADA. Sayfanın 2026-08-25'ten beri taşıdığı
   "renk mürekkeptir, zemin değil" kuralının bilinçli istisnası: üst üste
   binen dört kart aynı beyaz yüzeyse istif hiç okunmaz, görünen dilim boş bir
   çizgiye döner. Ölçüldü (18% tint, #FFF üstünde): gövde metni `--tx1` ile
   9.35-10.24, başlık `--cw-slab-ink` ile 4.98-6.56.
   `--tx2` BİLEREK KULLANILMIYOR: aynı zeminde 4.31-4.72 çıkıyor ve
   `--fs-lg` (16px) büyük metin sayılmadığı için AA tabanı 4.5 — Oyna ve
   Muhabbet kartlarında altına iniyor.

   KOYU TEMADA DA RENK ZEMİNDİR (2026-09-01 akşamı, kullanıcı: "dark modda
   renkler belli olmuyor"). Levha bir dönem orada nötr bırakılmıştı ve
   gerekçesi ölçülmüştü — ama ölçülen şey "gece temasında renk olmaz" değil,
   "gece temasının LACİVERTİYLE karıştırılan renk hue'sunu kaybeder"di. Zemin
   nötrlenince (kategori rengi + siyah) hue sapması <=3° kalıyor; formülün
   tamamı ve ölçüm tablosu §1'in koyu tema bloğunda. İstifi burada da zemin
   farkı ayırır, kenar (`--cw-edge`) + gölge onun üstüne biner.

   ÜST AKSAN ŞERİDİ YOK — ve gelmeyecek (kullanıcı kararı, 2026-08-25:
   "ai slop kullanma"). Genel kural: `.claude/rules/UI-Templates.md` →
   "Dekoratif renkli şerit yok".
---------------------------------------------------------------------------- */
/* ÜST DOLGU HERO'NUN ALT DOLGUSUYLA TOPLANIR — ikisi ayrı ayrı küçük görünür,
   ekranda tek bir boşluk olarak okunur. Şerit aradan kalkınca (§3) toplam
   ~34px'e indi (öncesi: 30 + şeridin 24-50'si + çip satırı ~56 + 22).
   Alt dolgu KALIR: kapanış kutusunun (`ctaBand`) kendi bölüm dolgusu geliyor
   ama son levha `sticky`, yani ekranın tepesine yapışıkken altındaki boşluk
   onun tek "bitti" işareti. */
.cw-worlds { padding: clamp(4px, 1vh, 12px) 0 clamp(34px, 5vh, 62px); }

.cw-stack {
  --cw-gap: clamp(16px, 2.4vw, 26px);
  display: flex; flex-direction: column;
  gap: var(--cw-gap);
}

.cw-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 24px;
  /* Balonun kendi gradyanı — geometri `.cps-b1..b4` ile BİREBİR aynı
     (`120% 120% at 32% 18%`, orta durak %62'de). Düz `background` ilk satırda
     yedek olarak durur: `color-mix` desteklenmeyen bir tarayıcıda gradyan
     düşerse kart renksiz kalmaz.
     ODAK NOKTASI (%32/%18) BİLEREK SOL ÜST: levhanın en açık ucu maskotun ve
     kategori adının olduğu köşe — açık temada oradaki koyu mürekkep en yüksek
     kontrastı, koyu temada da en açık zemini görür. Sağ alttaki en koyu uçta
     ise metin değil üç beyaz etkinlik kartı duruyor. */
  background: var(--cw-s2);
  background-image: radial-gradient(120% 120% at 32% 18%,
                    var(--cw-s1), var(--cw-s2) 62%, var(--cw-s3));
  border: 1px solid var(--cw-edge);
  --glow-c: var(--cat);
  /* Gölge HAFİF ve RENKLİ: nötr gölge yüzeyi zeminden ayırır, renkli olan
     kartın kendi aksanını altına sızdırır — istifte bu, iki kat arasındaki
     ayrımı da taşıyor. */
  box-shadow: var(--shadow-sm), var(--glow-sm);
}
/* KOYU TEMADA HALE YOK (kullanıcı kararı, 2026-08-26): renkli parıltı gece
   zemininde kartın çevresine yayılan bir leke olarak okunuyor. Gölge bir
   kademe GÜÇLENİR (`--shadow`): üst levhanın alttakine düşen gölgesi, iki
   KOMŞU kategori rengi birbirine yakın düştüğünde (Oyna ile Muhabbet) katları
   ayıran şey. Zemin farkı 2026-09-01'den beri işin çoğunu yapıyor ama tek
   başına değil — gölge kalır.
   Kenar %28 opaklıkta (kullanıcı kararı, 2026-08-26) ve kural `--cw-edge`
   token'ını EZER, onu düşürmez: aynı token kartın içindeki `.cw-tag`
   pill'lerinin de kenarı, düşürmek etiketleri de soluklaştırırdı. */
[data-theme="dark"] .cw-card {
  border-color: color-mix(in srgb, var(--cat) 28%, transparent);
  box-shadow: var(--shadow);
}
/* HOVER KALKIŞI YOK (2026-09-01, istifle birlikte). Kart artık bir karo değil
   sayfanın bir bölümü; kalkan bir bölüm tıklanabilirlik vaat eder ve kartın
   tek gerçek eylemi başlığındaki (`.cw-name a`) bağlantı. Üstelik kalkışın
   `translateY`i kartın kendi `rotate(var(--cw-rot))`unu ezerdi — ikisi tek
   bildirimde birleşmek zorunda kalırdı ve eğim bir gün sessizce düzleşirdi. */

.cw-card-copy { display: flex; flex-direction: column; min-width: 0; }

/* Maskot + ad ikilisi TABANDA ORTALI, 900px'te sola doner (2026-09-10):
   `/ozellikler` sahnesinin `.f2-ico` + `.f2-name` ikilisiyle birebir ayni
   sekil ve ayni kusurdu. Kapsam yalniz BASLIK istifi — kartin govdesi
   (`.cw-card-lead`, uc ornek) sola yasli kalir. */
.cw-card-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
/* Maskot SERBEST durur — kutusu/kenarlığı yok, derinliği yalnız drop-shadow
   verir (sitenin her yerindeki maskot kuralı). */
.cw-mark { flex: 0 0 clamp(60px, 7vw, 84px); height: clamp(60px, 7vw, 84px); }
.cw-mark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18));
}
/* `min-width: 0` flex çocuğunun taşma kuralı — uzun bir kategori adı kartı
   genişletmesin diye kalır. (Buradaki `.cw-num` 01-04 numaraları 2026-08-25'te
   kaldırıldı; istifte kural daha da yüklü, gerekçe şablondaki notta.) */
.cw-card-id { min-width: 0; }
.cw-name {
  margin: 0; line-height: 1.1;
  /* Levha büyüdü, ad da büyüdü — ama sayfanın h1'ini (2.95rem tavanı) hâlâ
     geçmiyor. Referansın devasa büyük harf tipografisi DEĞİL. */
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  /* SAYFADA KATEGORİ MÜREKKEBİNİ TAŞIYAN TEK YER — ve taşıyabilmesinin sebebi
     ölçü: 25-34px/800 WCAG'in "büyük metin"i, yani tabanı 4.5 değil 3.0
     (ölçüm açık 4.07-5.18, koyu 4.01-4.67). Punto küçültülürse mürekkep de
     `--cw-body`ye inmek zorunda. */
  color: var(--cw-slab-ink);
}
.cw-benefit {
  margin: 0 0 18px;
  /* `--tx2` DEĞİL: tintli levhada 4.31-4.72 çıkıyor ve 16px'lik metin büyük
     metin sayılmadığı için AA tabanı 4.5 (ölçüm bölüm başında). */
  color: var(--cw-body); font-size: var(--fs-lg); line-height: 1.6;
}

/* Etiketler faydadan KILCAL ÇİZGİYLE ayrılır — kart içinde ikinci bir KUTU
   açmak yerine çizgi; iç içe kart bu sitede her yerde reddediliyor.
   1px: tek yüze konan KALIN renkli bant yasağı (>=2px) bunu kapsamıyor,
   çizgi burada bir ayraç, bir aksan değil. */
/* Cipler de tabanda ortali (`.f2-badge`in karsiligi) — sarmali bir cip
   satirinda `margin-inline: auto` yetmez, kabin `justify-content`i gerekir. */
.cw-tags {
  list-style: none; margin: 0; padding: 16px 0 0;
  border-top: 1px solid var(--cw-hair);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
.cw-tag {
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--cw-tag-bg);
  border: 1px solid var(--cw-edge);
  color: var(--cw-tag-ink);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
}

/* ---- Üç örnek etkinlik — HER ZAMAN AÇIK -----------------------------------
   2026-09-01'e kadar burada bir akordeon vardı ("Örnekleri gör" düğmesi +
   kartın KARDEŞİ olan tam genişlikte çekmece). Varlık sebebi 2x2 ızgaranın
   darlığıydı: üç resimli kart kartın içine sığmıyor, panel içeride açılınca
   da komşu kartın altında bir ekran boyu ölü alan bırakıyordu. İstifte o
   kısıt yok — levhanın sağ kolonu üç kartı doğal boyunda taşıyor, yani bilgi
   artık bir tıklamanın arkasında bile değil.
   İSTİF AYRICA AÇILIR PANELİ İMKÂNSIZ KILIYOR: yüksekliği kaydırma sırasında
   değişen bir `sticky` kart, üstüne binecek kartların yapışma noktalarını da
   kaydırır — kart ekranın altından taşar ve istif zıplar. */
.cw-ex { display: flex; flex-direction: column; min-width: 0; }
.cw-ex-h {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: .04em; text-transform: uppercase;
  /* `--cw-slab-ink` DEĞİL: bu 14px, yani büyük metin değil ve AA tabanı 4.5 —
     renkli mürekkep balon gücündeki levhada oraya çıkamıyor (gerekçe §1). */
  color: var(--cw-body);
}
.cw-ex-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}
/* Etkinlik kartı KOYU TEMADA bir kademe açılır. Açık temada `.cat-act`ın
   beyaz zemini tintli levhanın üstünde zaten ayrışıyor; gece temasında ikisi
   de `--card-solid` (#151B3D) olduğu için üç kart 1px kenardan başka hiçbir
   şeyle ayrılmıyordu.
   YÜKSELTME ARTIK `--card-active` DEĞİL `--cw-lift` (2026-09-01): levha
   renklenince (§1) sabit lacivert bir kart, turuncu ya da yeşil bir levhanın
   üstünde kendi başına bir renk lekesi oluyordu. `--cw-lift` levhanın ORTA
   durağından (`--cw-s2`) türer, yani hue'yu koruyup bir kademe açar.
   BALON DA DAHİL: `.cat-act-bubble` zemini `--card-solid` yazıyor ve kartın
   dışına, doğrudan levhanın üstüne taşıyor — atlandığında levhanın ortasında
   asılı duran lacivert bir disk kalıyordu. */
[data-theme="dark"] .cw-card .cat-act,
[data-theme="dark"] .cw-card .cat-act-bubble { background: var(--cw-lift); }

/* `.cw-more` ("Oyna etkinliklerini gör →") 2026-09-05'te SİLİNDİ (kullanıcı
   kararı): kartın sağ kolonu zaten ÜÇ gerçek etkinlik gösteriyor, satır aynı
   vaadi ikinci kez yazıyordu. Kategori sayfasına giden yol kaybolmasın diye
   link kartın kendi adına taşındı (aşağıdaki `.cw-name a`) — yeni bir satır
   açmadan. Geri isteyen önce şablondaki <a>yı geri koyar; ölçüm notu §1'de
   duruyor (16px/800 büyük metin DEĞİL, tabanı 4.5 → `--cw-body`). */
.cw-name a {
  /* Ad ZATEN kategori mürekkebini taşıyor (yukarısı): link olduğu için ikinci
     bir renk almaz, yoksa levhada iki mürekkep yan yana düşer. Altı çizgi
     yalnız hover/odakta — durağan hâlde başlık başlık gibi durur. */
  color: inherit; text-decoration: none;
}
.cw-name a:hover, .cw-name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ----------------------------------------------------------------------------
   5) SEKİZ ALAN BÖLÜMÜ — TAMAMEN SİLİNDİ (2026-08-31)
   Önce liste gitti (konsey kararı 4: alanlar YUKARIDAKİ dört dünya kartının
   `cw-tags` çiplerinde zaten sayılıyordu, yani aynı sayfada ikinci liste),
   aynı gün akşam geriye kalan tek bağlantı satırı da gitti (kullanıcı kararı).
   Gerekçenin tamamı `Pages/Site/Categories.html`deki nottadır; kısası:
   `/gelisim`e navbar her sayfadan götürüyor, o yüzden kapanan bir yol değil
   bir kısa yol vardı, ve içeriği kalmamış bölümün kabuğu (kılcal üst çizgi +
   tek link) kartlarla kapanış kutusunun arasında yalnız yer tutuyordu.

   SİLİNEN KURALLAR — geri istenirse şablon + kopya (`cw_areas_more`) ile
   birlikte geri gelirler:
     .cw-areas-sec  { padding: clamp(30px, 4.6vh, 56px) 0 0;
                      border-top: 1px solid var(--border); }
     .cw-areas-more { inline-flex, gap 9px, --font-head 800 --fs-lg,
                      color: var(--btn-tx); okun `i`si hover'da +4px kayar }
   Alt dolgunun sıfır olması bilerekti: kapanış kutusunun kendi bölüm dolgusu
   (72px) zaten geliyor, ikisi toplandığında CTA sayfadan kopmuş gibi ~200px
   aşağıda duruyordu — ve `Site.css`in `.section:has(+ .cta-sec)` kuralı bu
   bölümü KAPSAMIYORDU, çünkü `.cw-areas-sec` bir `.section` değildi. Bugün
   kapanışın komşusu `.cw-worlds` bölümü; oranın kendi alt dolgusu ölçüldü.
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   6) Responsive
---------------------------------------------------------------------------- */
/* İSTİF YALNIZ MASAÜSTÜNDE (>=900px). Mobilde kart doğal boyunda ~760px
   oluyor, yani tipik bir telefon ekranından uzun: kendinden uzun bir `sticky`
   öğe ancak ALT kenarı görünürken yapışır, o yüzden efekt orada "kartlar üst
   üste biniyor" diye değil "kart bir an takılıyor" diye okunur. Telefonda
   dört kart normal akışta, aralarında `--cw-gap` ile durur.

   `top` KADEMESİ (15px) alttaki karttan görünen dilimdir; `--cw-i` şablondan
   gelir (bkz. Categories.html). Değişken hiç gelmezse `var(--cw-i, 0)` dördünü
   de aynı yere yapıştırır — istif kaybolur ama içerik durur; `calc` geçersiz
   olsaydı `top: auto`ya düşer ve kartlar sıradan bir listeye dönerdi. İkisi de
   sessiz, o yüzden yedek değer YAZILI.

   `z-index` de indeksten türer: sonraki kart öncekinin ÜSTÜNE binmek zorunda.
   Doğal boyama sırası bunu zaten verir, ama `transform` her kartı kendi
   katmanına terfi ettirdiği için sıralama artık yığın bağlamına bakıyor —
   yazılmazsa tarayıcı sürümüne göre değişir. */
@media (min-width: 900px) {
  .cw-stack { gap: clamp(22px, 3.2vh, 44px); }
  /* Levha iki kolona ayrilinca baslik istifi sol kolonun devami olur —
     ortalama tabandan geldigi icin BURADA geri alinir (bkz. tabandaki not). */
  .cw-card-head, .cw-tags { justify-content: flex-start; }

  .cw-card {
    position: sticky;
    top: calc(var(--nav-h) + 14px + var(--cw-i, 0) * 15px);
    z-index: calc(var(--cw-i, 0) + 1);
    transform: rotate(var(--cw-rot, 0deg));
    /* Sol kolon KOPYA, sağ kolon üç örnek. Sağ biraz geniş: üç `.cat-act`
       kartının altına düşmeden yan yana durması gereken en dar ölçü ~600px. */
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    column-gap: clamp(24px, 3vw, 46px);
    align-items: center;
    /* Dört kartın EŞİT boyu — istifin okunması buna bağlı (gerekçe §4). */
    min-height: min(56vh, 448px);
    padding: clamp(24px, 2.6vw, 36px);
    border-radius: 28px;
  }
}

@media (min-width: 961px) {
  /* KOLONLAR ANA SAYFA HERO'SUNUN FORMÜLÜNÜ KULLANIR (2026-08-31, kullanıcı
     kararı: *"ana sayfadaki gibi olsun uzaklığı"*) — `Site.css` §5'teki
     `.hero-grid` ile AYNI iki değer, ikinci kez ayarlanmaz.

     ÖNCESİ `minmax(0, 1fr) auto` idi ve gerekçesi şuydu: "telefon sabit
     genişlikte, kalan her şey kopyaya gitsin; `1fr 1fr` telefonun etrafında
     150px'e varan ölü alan bırakıyor". Ölçüldüğünde bedeli görünüyor
     (1440x900): kopya kolonu 892px oluyor ama içindeki en geniş öğe 486px —
     yani ölü alan kolonun İÇİNE düşüyordu ve `auto` telefonu kabın en sağ
     ucuna itiyordu. Metnin sağ ucu ile telefon arası **450px**; ana sayfada
     aynı ölçü 184.5px. Ölü alanı telefonun etrafında bırakmak (ana sayfanın
     yaptığı) iki bloğu birbirine YAKLAŞTIRIYOR, kolonun içinde bırakmak
     UZAKLAŞTIRIYOR — eski notun tam tersi.

     Telefonu büyütmek (306px) bu boşluğu da kapatırdı ama dikey farkı
     220 → 350px'e çıkarır; `.phone--mini` tabanı bu yüzden korundu. */
  .cw-hero-in {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(44px, 6vw, 92px);
  }
  /* Iki kolonda kopya sol kolonun tamami olur: tabandaki ortalama geri alinir
     (`p`nin `max-width: 54ch`i ortali dururken auto marjla ortada asili
     kaliyordu). */
  .cw-hero-copy { text-align: left; }
  /* Üç ölçü kolonun TAMAMINA yayılır. Sola toplandığında kolonun sağında
     104px'lik bir ölü şerit kalıyor ve boşluğun dörtte biri oradan geliyordu;
     ana sayfada aynı satırın karşılığı (`.hero-trust` + form) kolonu birebir
     dolduruyor. Sarma ihtimali olan dar ekranda geçmez — orada öbekler zaten
     alt alta ve `space-between` son satırı tek başına gerdirirdi. */
  .cw-facts { justify-content: space-between; }
}

@media (max-width: 620px) {
  /* Kart dolgusu ve maskot ölçüsü mobilde kısılır — hedef, dört kartın
     toplam boyunun tek kolonda sayfayı bir duvara çevirmemesi. */
  .cw-card { border-radius: 20px; }
  .cw-name { font-size: 1.5rem; }
  /* Üç örnek yan yana 390px'de 110px'lik kartlara düşüyor ve `.cat-act`ın
     kendi meta pill'leri (süre + yaş) alt alta sarıyor. İki kolon + son
     kartın tam genişliği: kart oranı korunur, satır sayısı artmaz. */
  .cw-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cw-ex-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------------------
   7) prefers-reduced-motion
   Bloğun eskiden iki işi vardı; şerit kalkınca (§3) biri düştü. Kalan iş
   istifin kapatılması — gerekçe aşağıda. (Düşen iş: sonsuz bir marquee'de
   Site.css'in global "süreyi sıfırla" kuralı yetmiyordu, süresi sıfırlanan
   `infinite` animasyon son karesine yapışıp şeridi yarısından kesiyordu.)
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* İSTİF KAPANIR. `position: sticky` teknik olarak bir animasyon değil, ama
     dört levhanın kaydırırken birbirinin üstüne binmesi ekranda tam olarak
     parallax gibi okunur — hareketi kısıtlayan ziyaretçinin gördüğü şey
     "sayfa kendi kendine katmanlanıyor" olurdu. Kapatınca geriye dört normal
     kart kalıyor: hiçbir içerik kaybolmuyor, yalnız üst üste binme gidiyor.
     Eğim de düzleşir — istif yokken eğik duran bir kart yalnız "yamuk". */
  .cw-card { position: static; transform: none; }
}