/* ============================================================
   ÇATI — Exactopia · kök (/) ve kök-altı akademi sayfaları
   ------------------------------------------------------------
   2026-09-07 · BEŞİNCİ TUR — «AKADEMİNİN LOBİSİ» (TASARIM-YONU-CATI.md v2,
   şablon sablon/cati.cjs). Dört tur boyunca kök «dil seçimi»ydi; operatör
   kesti: «giriş çok boş … burası akademi … Udemy/Superprof/Cambly …
   ana sayfa bu, bir sürü şey olacak.» Söküm PLATFORM-SOKUM.md.

   Bu dosya yalnız KÖKE ÖZEL YERLEŞİM taşır. Malzeme evin malzemesi:
   renk, boy, yarıçap, süre ve eğri `stil.css :root`tan; burada yeni
   token, yeni yarıçap, yeni easing, ham hex YOK (gölge rgba'ları hariç —
   DESIGN.md § 3.4 gölgeyi mürekkep tonundan türetir).

   v1'den KALAN: tabela (levha + ad maskesi), madalyon (konik ışık +
   maskot), ilk giriş animasyonu, imleç derinliği, 44px kuralları,
   `.ds` dil satırı. GİDEN: 112 konuluk dizin (`.ca-dizin`), dil-seçimi
   kalıntıları (`.md-liste/.md-soru/.md-kucuk/.md-hesap/.md-alt`) —
   şablonda artık yoklar.
   ============================================================ */

/* ---------- 0 · KÖK ŞERİDİ ----------
   Şerit evin şeridi (`.serit .gez .serit-sag .arama`); kökte iki fark:
   «Giriş» hapı şeritte 44px (evin hapı 52), ve marka adı dar ekranda
   GİZLENMEZ — kökte markanın kendisi sayfanın konusu. */
.md-giris { min-height: 44px; padding: 0 16px; }
/* DAR EKRAN (≤ 620) — ÖLÇÜLDÜ: marka (ad açık) 149 + «Giriş» 65 + CTA 154 +
   arama 44 + boşluklar = 428px, 390'da 354px yer var → şerit ÜÇ satıra
   (215px) kırılıyordu. Ligin mobili (Preply/Cambly) girişi menüye alır;
   bizde giriş hero'da («Hesabın var mı?») ve altlıkta duruyor — şeritteki
   hap dar ekranda düşer, CTA'nın ok çipi de: 149+118+44+16 = 327 ≤ 339 (375px). */
@media (max-width: 620px) {
  .ca-kok .marka-ad { display: inline; font-size: var(--yz-govde); }
  .ca-kok .serit .md-giris { display: none; }
  .ca-kok .serit-cta { padding-inline: 10px; }
  .ca-kok .serit-cta .hap-ok { display: none; }
}

/* ============================================================
   1 · HERO — LOBİ
   ------------------------------------------------------------
   Solda tabela (levha + ad) · vaat · DÖRT YÖN KARTI · giriş satırı;
   sağda MADALYON. `.g1 .kabuk` evde dikey-ortalı flex; lobi iki sütunlu
   ızgara. ≥ 900 iki sütun, altında yığın (madalyon başa geçer, küçülür).
   ============================================================ */
/* POSTER — dokuzuncu tur (2026-09-10). Operatör: «genaualmanca'daki gibi
   olmalı, BÜYÜK olacak logo, boşlukları da doldur.» Yedinci turun tek
   eksenli künyesi ölçüldü: 1440'ta ad 60px, madalyon 260px, iki yanı boş
   dar sütun. Sahne artık evin `.g1-cam` posteri (stil.css § 54.2):
   `.g1-sahne` üç sütun · `.sr` şeritler · `.g1-orta` daire · `.g1-balon`
   — hepsi evin kuralı, burada YALNIZ kökün farkı var: tabela ölçüsü, soru
   satırı, imza animasyonu (K.4), imleç derinliği, zemin ön ayarı.
   Madalyon (`.madalyon` · `.km-*`) ve dört yön kartı (`.yon` · `.yk`)
   silindi: dairenin ve şeritlerin işini ev bileşenleri yapıyor. */

/* TABELA — levha + ad tek satır. Levha şerit damgasının (.marka-levha)
   büyütülmüş hâli, aynı malzeme (§ 49: --levha-ust → --vurgu-koyu). */
.md-tabela { display: flex; align-items: center; gap: 14px; }
.ca-hero .md-tabela { justify-content: center; margin-top: 14px; gap: clamp(12px, 1.4vw, 20px); }
.tabela-levha {
  --lv: 64px;
  width: var(--lv); height: var(--lv); border-radius: calc(var(--lv) * 0.22); flex: none; position: relative;
  background: linear-gradient(160deg, var(--levha-ust), var(--vurgu-koyu) 70%);
  box-shadow: 0 6px 18px rgba(60, 26, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.tabela-levha::before, .tabela-levha::after {
  content: ''; position: absolute; left: 22%; right: 22%; height: 9.5%; border-radius: var(--r-tam);
}
.tabela-levha::before { top: 36%; background: var(--asit); }
.tabela-levha::after  { top: 55%; background: var(--isik); }
/* BÜYÜK LOGO — Genau manşetinin ölçüsü (`.g1 h1`: clamp 38/6.1vw/88).
   Levha adın x-yüksekliğine değil kap yüksekliğine oturuyor: 88px adın
   yanında 84px levha (ölçüldü, 64 küçük kalıyordu). */
.md-tabela-dev .tabela-levha { --lv: clamp(48px, 5.9vw, 84px); }

/* `.g1 h1` (88px, 15ch, auto kenar) manşet içindir — tabela kendi ölçüsünde. */
.ca-hero h1.tabela-ad {
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(38px, 6.1vw, 88px); line-height: 0.95; letter-spacing: var(--ls-dev);
  max-width: none; margin: 0; text-wrap: nowrap;
}
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask > span { display: block; }

/* MARKA SORUSU — K.2'nin vaadi, ders pazarına açıldı: «Bir dilin tam olarak
   neresindesin?» → «Tam olarak nerede kaldın?» (her ders için doğru; «nerede
   kaldın» panelin de sözü). Marka sözü asit kutuda — Genau'nun «sırayla»sı
   (`.g1 .kutu`, em tabanlı, ölçekle büyür). Basamak --yz-h1: adın üçte biri. */
.ca-soru {
  margin: 14px auto 0; max-width: 24ch;
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: var(--yz-h1); line-height: 1.2; letter-spacing: var(--ls-kart);
  color: var(--murekkep); text-wrap: balance;
}
/* CAM PANEL KÖKTE BİRAZ DAHA SAYDAM (dokuzuncu tur, LED): evin camı %46
   beyaz; imleci izleyen ışık onun altında sönüyordu. %36'da ışık geçiyor,
   yazı hâlâ kâğıt üstünde (ölçüldü: manşet 14,6:1). Genau'nun camı aynı. */
.ca-hero .g1-cam { background: rgba(255, 253, 249, 0.36); }
.ca-hero .g1-sahne { margin-top: clamp(18px, 2.2vw, 30px); }
/* Rozetler üç harf (DİL · OKL · SNV · BCR) — «DİL» 46px, diğerleri 51px
   çıkıyor (ölçüldü), adlar 5px kayıyordu. Sabit en, ortalı. */
.ca-hero .sr-sol .sr-sv { min-width: 52px; text-align: center; }

/* «Hesabın var mı?» — mono künye satırı; `.mono` büyük harfe çevirir, cümle kalır. */
.lobi-hesap { margin: 18px 0 0; font-size: var(--yz-mikro); letter-spacing: 0.06em; color: var(--murekkep-3); text-transform: none; }
.lobi-hesap a { color: var(--vurgu-koyu); }

/* ---- 1a · ZEMİN — «renkler hep birbirine yakın» şikâyetinin ölçümü (yedinci tur) ----
   Şikâyetin adresi metin değildi (kontrastlar 7,4–15,4:1). Evin akan zemini
   dört renk taşıyor ve 1440px'te solda pembe sağda yeşil çapraz yıkama
   çıkıyordu. Kökün girişinde yıkama TEK HALEYE indi: dairenin arkasında
   asit, altında sıcak kâğıt. WebGL katmanı `aurora.js` `data-akis="merkez"`
   ön ayarını kullanır; bu kural yalnız WebGL'siz yedek. */
.ca-hero .aurora {
  opacity: 0.32;
  background:
    radial-gradient(32% 30% at 50% 30%, var(--asit) 0%, transparent 68%),
    radial-gradient(54% 36% at 50% 96%, var(--kagit-2) 0%, transparent 74%),
    var(--kagit);
}

/* ---- 1b · İLK GİRİŞ ANİMASYONU — tek sahne, bir kez, ≤ 2,2 sn ----
   Yalnız `html.js`: JS kapalıyken ve reduced-motion'da SON KARE basılır.
   Evin `.g1` girişi (stil.css: gnu-yukari — mini · sahne · eylem · balon
   kademeli, maskot süzülür) OLDUĞU GİBİ çalışıyor; K.4 imzası onun
   üstüne biniyor: levha kilidi (0–0,6) → ad maskesi (0,3–1,0) → daire +
   maskot büyür (0,45–1,15) → soru (0,75). Evin `.g1 h1` girişi tabelada
   KAPALI — aynı öğe iki hareket taşımaz (DESIGN § 4.2). Son kare ≈ 1,2 sn. */
html.js .ca-hero h1.tabela-ad { animation: none; }
html.js .tabela-levha::before { animation: kilit-sol 0.62s var(--ev) both; }
html.js .tabela-levha::after  { animation: kilit-sag 0.62s var(--ev) 0.06s both; }
@keyframes kilit-sol { from { transform: translateX(-46%); } 60% { transform: translateX(6%); } to { transform: none; } }
@keyframes kilit-sag { from { transform: translateX(46%); } 60% { transform: translateX(-6%); } to { transform: none; } }
html.js .mask > span { animation: mask-yukari 0.7s var(--ev) 0.3s both; }
@keyframes mask-yukari { from { transform: translateY(110%); } to { transform: none; } }
html.js .ca-hero .gec {
  --staggered-translate-y: 16px;
  animation: bel-op var(--dur-yavas) var(--ev) backwards, bel-ty var(--dur-yavas) var(--ev) backwards;
}
html.js .ca-hero .g1-mini { animation-delay: 0.6s; }
html.js .ca-hero .ca-soru { animation-delay: 0.75s; }
/* LOBİ SATIRI 1,4s → 0,7s (2026-09-13). LCP ölçüldü: kök sayfada 1932 ms,
   reduced-motion açıkken 536 ms — aradaki 1,4 saniyenin tamamı bekleme.
   Sebep: LCP metni tutan kap `.g1-cam`; içindeki en son beliren çocuk
   boyanana kadar LCP güncellenmeye devam ediyor. `lobi-hesap` 1,4 + 0,55
   süre = 1,95 sn, ölçülen değerle birebir. İmza koreografisi (levha kilidi
   0–0,62 · ad maskesi 0,3–1,0 · daire 0,45–1,15) HİÇ DEĞİŞMEDİ; yalnız
   kahramanın en sondaki iki küçük öğesi öne alındı. Dosyanın kendi
   ilan ettiği «son kare ≈ 1,2 sn» sözü de ancak böyle tutuyor. */
html.js .ca-hero .lobi-hesap { animation-delay: 0.7s; }
html.js .ca-hero .g1-orta { animation: daire-bas 0.7s var(--ev) 0.45s both; }
@keyframes daire-bas {
  from { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.04); opacity: 1; }
  to   { transform: none; }
}

/* ---- 1b2 · ARAMA KUTUSU — pazarın ilk hamlesi (onuncu tur, 2026-09-12) ----
   YENİ BİLEŞEN; gerekçesi (K.0 «önce var olanı kullan»): evin araması
   (`.arama`) şeridin sağındaki 46px'lik DAİREdir — odakta 15rem'e açılan
   bir düğme, kapalıyken yazısı bile görünmez. Girişin kutusu onun tam
   tersi: hep açık, kenardan kenara, yanında asit düğme (Superprof/Wyzant
   ölçüsü). Aynı sınıfa iki zıt davranış yazmak yerine yeni KABUK; açılan
   liste evin listesi (`.ara-kutu` · `.ara-s` · `.ara-yok`), yani yeni
   yüzey yok. Yükseklik 52px = evin hapının boyu (`.hap-asit`). */
.ca-ara {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: min(100%, 46rem); margin: 20px auto 0;
}
.ca-ara-ik {
  position: absolute; left: 18px; top: 26px; translate: 0 -50%;
  width: 17px; height: 17px;
  color: var(--murekkep-3); pointer-events: none;
  transition: color var(--dur-kisa) var(--ev);
}
.ca-ara:focus-within .ca-ara-ik { color: var(--vurgu-koyu); }
.ca-ara-in {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 44px;
  font-family: var(--f-govde); font-size: var(--yz-govde); line-height: 1.2;
  color: var(--murekkep); background: var(--isik);
  border: 1px solid var(--hat); border-radius: var(--r-tam);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-kisa) var(--ev);
}
.ca-ara-in::placeholder { color: var(--murekkep-3); }
.ca-ara-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.ca-ara-in:focus { border-color: var(--murekkep); }
.ca-ara-dug { flex: none; }
/* Liste kutunun tam altında ve tam eninde (şeritteki sağa yaslı 27rem değil). */
.ca-ara .ara-kutu { top: calc(100% + 8px); left: 0; right: 0; width: auto; text-align: left; }
.ca-ara .ara-s { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; }
.ca-ara .ara-s .mono {
  flex: none; font-size: var(--yz-mikro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--murekkep-3);
}
.ca-ara-grup {
  margin: 0; padding: 10px 14px 6px; font-size: var(--yz-mikro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--murekkep-3);
  background: var(--kagit-2);
}
html.js .ca-hero .ca-ara { animation-delay: 0.6s; }   /* 0,9s → 0,6s: aynı LCP gerekçesi (bkz. § 1b) */
/* Dokunmatikte ev hapı 52→44px iniyor (stil.css § dokunma hedefleri);
   kutu da aynı boya iner, yoksa yan yana iki farklı yükseklik çıkıyor. */
@media (hover: none), (max-width: 760px) {
  .ca-ara-in { height: 44px; }
  /* Büyüteç kutunun İÇİNDE durur: satır sarınca (düğme alta inince) form
     iki satır oluyor ve ortalanmış ikon iki satırın arasında kalıyordu
     (ölçüldü, 390px). Çapa artık kutunun kendi yüksekliği. */
  .ca-ara-ik { top: 22px; }
}
@media (max-width: 560px) {
  .ca-ara { flex-wrap: wrap; gap: 10px; }
  .ca-ara-in { flex: 1 0 100%; }
  .ca-ara-dug { width: 100%; justify-content: center; }
}

/* ---- 1c · İMLEÇ DERİNLİĞİ — saha kuralı 10.3 ----
   Reçete `_yetenekler/web-design-kutuphane/add-mouse-driven-orbit`: tek
   normalize imleç hedefi (cati.js) → ZIT YÖNLÜ, EŞİT OLMAYAN katmanlar.
   `translate` ayrı özellik: dairenin keyframe `transform`u ve şeridin
   hover `transform`u ile çakışmaz. Yazı kıpırdamaz — kompozisyon kaymaz. */
.ca-hero { --px: 0; --py: 0; }
.ca-hero .aurora   { translate: calc(var(--px) * 20px) calc(var(--py) * 13px); }
.ca-hero .g1-orta  { translate: calc(var(--px) * -9px) calc(var(--py) * -6px); }
.ca-hero .sr-yigin { translate: calc(var(--px) * 4px) calc(var(--py) * 2px); }
.ca-hero .g1-balon { translate: calc(var(--px) * 6px) calc(var(--py) * 3px); }
@media (hover: none), (pointer: coarse) {
  .ca-hero .aurora, .ca-hero .g1-orta, .ca-hero .sr-yigin, .ca-hero .g1-balon { translate: none; }
}

/* ---- 1d · Dar ekran — sahne tek sütuna iner (ev kuralı), tabela küçülür ---- */
@media (max-width: 560px) {
  .md-tabela { flex-direction: column; gap: 10px; }
  .tabela-levha, .md-tabela-dev .tabela-levha { --lv: 56px; }
  .ca-hero .g1-mini { display: inline; }
  .ca-hero .g1-mini .ik-kiv { display: inline-block; vertical-align: -1px; margin-right: 6px; }
}

/* ============================================================
   2 · DERSLER — alan rafı (dokuzuncu tur, 2026-09-10)
   Superprof «En çok aranılan alanlar»: ikon ızgarası. İkon seti evde YOK
   (K.5 § 4) — aynı içerik evin geometrisiyle: dört alan kartı (`.kutu`
   yüzeyi: --isik + --ayrac + --r-md + --golge), başında şerit rozeti
   (`.sr-sv`, Genau'nun A1/A2'si), içinde ders ÇİPLERİ. Çip = kontrol =
   hap (K.0: kontroller hap, kart yumuşak köşe). Almanca çipi asit —
   kütüphanesi açık olan tek ders; diğerleri kâğıt, hepsi talep formuna.
   Güven şeridi (`.ca-guven` · `.ca-olcu`) bu turda düştü: ölçüler girişin
   sağ künyesinde (`.sr-olcu`), ikinci kez basılmıyor.
   ============================================================ */
.ca-alanlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: var(--bosluk-m); }
/* DİL RAFI aynı bölümde, kartın içinde (onuncu tur): ayrı DİLLER bölümü
   kalktı, beş dil bir kez basılıyor. Kart tam en; altındaki üç alan kartı
   aynı boşlukla devam ediyor. */
.alan-dil { margin-top: var(--bosluk-m); }
.alan-dil .ca-diller { margin-top: 14px; }
.alan-dil + .ca-alanlar { margin-top: 14px; }
.ca-alan-not { margin-top: 16px; }
.alan {
  padding: clamp(16px, 1.8vw, 24px); border-radius: var(--r-md);
  background: var(--isik); border: 1px solid var(--ayrac); box-shadow: var(--golge);
  scroll-margin-top: 90px;
}
.alan-bas { display: flex; align-items: center; gap: 12px; }
/* İKON — uygulamanın kil işareti (app/isaret-*.webp). Referans ligindeki
   alan ızgaraları ikonlu; set ÇİZİLMEDİ, evde olan kullanıldı (K.5 § 4). */
.alan-ik { flex: none; width: 48px; height: 48px; border-radius: var(--r-tam); }
.alan-bas h3 {
  margin: 0; flex: 1; font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: var(--yz-h3); letter-spacing: var(--ls-kart); line-height: 1.15;
}
.alan-say { font-size: var(--yz-mikro); letter-spacing: 0.1em; color: var(--murekkep-3); white-space: nowrap; }
.alan > p { margin: 8px 0 0; font-size: var(--yz-kucuk); line-height: 1.45; color: var(--murekkep-2); }
.alan-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.alan-cip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-tam); border: 1px solid var(--ayrac); background: var(--kagit);
  color: var(--murekkep); font-weight: 600; font-size: var(--yz-kucuk); line-height: 1.2; text-decoration: none;
  transition: transform var(--dur-kisa) var(--ev), border-color var(--dur-kisa) var(--ev), background var(--dur-kisa) var(--ev);
}
a.alan-cip:hover { transform: translateY(-2px); border-color: var(--murekkep); background: var(--isik); }
.alan-cip-canli { background: linear-gradient(color-mix(in srgb, var(--asit) 78%, var(--isik)), var(--asit) 62%); border-color: transparent; }
a.alan-cip-canli:hover { background: var(--asit); border-color: transparent; }
.alan-cip-canli .mono { font-size: var(--yz-mikro); letter-spacing: 0.08em; color: color-mix(in srgb, var(--murekkep) 82%, var(--asit)); }
.alan-cip-kilit { color: var(--murekkep-3); border-style: dashed; background: transparent; }
/* Dört kart (öğretmen sayfası) üç sütunda 3+1 kırılıyordu — ikişerli. */
@media (min-width: 900px) {
  .ca-alanlar-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .ca-alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ca-alanlar { grid-template-columns: minmax(0, 1fr); }
  .alan-ik { width: 42px; height: 42px; }
}

/* KAPI GİBİ GÖRÜNSÜN (onuncu tur, 2026-09-12) — hazırlanan dört dil
   «kapalı» okunuyordu: kesikli kenar + %82 saydamlık + doygunluğu 0,55'e
   düşmüş bayrak, yani arayüzün «bu tıklanmaz» dili. Oysa dördü de gerçek
   kapı (hoca istenebiliyor) ve tıklanma buradan geliyor. Kesikli hâl
   yalnız KAPISI OLMAYAN plakada (`div.ds-kilit`) kaldı — fark artık
   biçimin kendisinde. */
a.ds-kilit {
  opacity: 1; background: var(--isik); border: 1px solid var(--ayrac); box-shadow: var(--golge);
  transition: transform var(--dur-kisa) var(--ev), border-color var(--dur-kisa) var(--ev);
}
a.ds-kilit .ds-plaka { width: 64px; height: 64px; filter: none; }
a.ds-kilit:hover { transform: translateY(-3px); border-color: var(--murekkep); }
a.ds-kilit .ds-rozet { color: var(--vurgu-koyu); }

/* (§ 3 · dört sütunlu kapı/blog ızgarası on birinci turda kalktı — K.14.) */
/* ETİKET = DOLGU, YAPI = ÇİZGİ (operatör kararı 2026-08-28). Çip kartın
   başlık bandında (`.kutu-bas`, zemini --kagit-3) duruyor; aynı dolguyu
   basarsan çip kaybolur — dolgusu kart gövdesinin kâğıdı (--isik). */
.ca-etiket {
  display: inline-flex; align-items: center;
  padding: 4px 9px; border: 0; border-radius: var(--r-xs);
  background: var(--isik); color: var(--murekkep-2);
  font-family: var(--f-etiket); font-size: var(--yz-mikro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
.kutu:hover .ca-etiket { color: var(--vurgu-koyu); }

/* ============================================================
   4 · DİLLER — Preply/italki sayılı dil ızgarası, evin `.ds` satırıyla.
   Canlı dil yatay satır (plaka · ad + ölçü · halka), iki sütun tutar;
   hazırlananlar dikey plaka (plaka üstte), kesikli, BAĞSIZ.
   ============================================================ */
.ca-diller { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: var(--bosluk-m); }
.ds {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: var(--r-md); text-decoration: none; color: inherit;
  background: var(--isik); border: 1px solid var(--ayrac);
}
.ds-canli {
  grid-column: span 2;
  background: linear-gradient(color-mix(in srgb, var(--asit) 78%, var(--isik)), var(--asit) 62%);
  border-color: transparent;
  transition: transform var(--dur-kisa) var(--ev);
}
.ds-canli:hover { transform: translateY(-3px); }
.ds-plaka { display: block; width: 64px; height: 64px; border-radius: var(--r-plaka); }
.ds-govde { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-ad { font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700; font-size: var(--yz-h3); letter-spacing: var(--ls-kart); line-height: 1.15; }
.ds-alt { font-size: var(--yz-mikro); color: var(--murekkep-2); letter-spacing: 0.02em; text-transform: none; }
.ds-canli .ds-alt { color: color-mix(in srgb, var(--murekkep) 82%, var(--asit)); }
.ds-canli .halka { border-color: var(--murekkep); border-width: 2.4px; color: var(--murekkep); }
.ds-rozet { font-size: var(--yz-mikro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--murekkep-3); }
.ds-kilit {
  grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px;
  padding: 16px 10px; background: transparent; border: 1.5px dashed var(--ayrac); opacity: 0.82;
}
.ds-kilit .ds-plaka { width: 52px; height: 52px; filter: saturate(0.55); }
.ds-kilit .ds-ad { font-size: var(--yz-govde); }
@media (max-width: 900px) {
  .ca-diller { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ds-canli { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ca-diller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-canli { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .ds-canli .ds-plaka { width: 52px; height: 52px; }
}

/* ============================================================
   5 · DERS AL · 6 · ÜÇ ADIM · 11 · SSS · 12 · KAPANIŞ — omurga içinde.
   `.govde > .tk-paketler`, `.adim3`, `.tk-sss` evin kuralları; buradaki
   tek fark eylem satırı: omurgada `.g1-eylem` ortalıyor, lobi sola yaslar.
   ============================================================ */
.ca-eylem-sol { justify-content: flex-start; }

/* ============================================================
   8 · ÖĞRENCİ SÖZÜ — Cambly'nin tek sözü. Kum panel (--kum, şerit
   zemini rotasyonunun 4. tonu), büyük asit tırnak, display alıntı.
   Künye --murekkep-2: kum üstünde --murekkep-3 4,5:1'de kalıyordu
   (ölçüldü), --murekkep-2 6,4:1.
   ============================================================ */
.ca-soz-ic {
  position: relative; margin: 0 auto; max-width: 60rem;
  padding: clamp(30px, 4.2vw, 60px) clamp(22px, 4vw, 64px) clamp(24px, 3vw, 40px);
  background: var(--kum); border-radius: var(--r-md); overflow: hidden;
}
.ca-soz-ic::before {
  content: '\201C'; position: absolute; top: -0.08em; left: clamp(12px, 1.8vw, 26px);
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(96px, 12vw, 170px); line-height: 1;
  color: color-mix(in srgb, var(--asit) 72%, var(--kum)); pointer-events: none;
}
.ca-soz-ic blockquote { position: relative; margin: 0; }
.ca-soz-ic blockquote > p {
  margin: 0 0 16px; font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(22px, 2.4vw, 36px); line-height: 1.25; letter-spacing: var(--ls-bolum);
  color: var(--murekkep); text-wrap: pretty;
}
.ca-soz-ic figcaption { position: relative; color: var(--murekkep-2); letter-spacing: 0.1em; }

/* ============================================================
   10 · ÖĞRETMEN OL — Preply'nin yarım-yarım bölümü (agy/ogretmen şeridi
   geldiyse basılır). Sol yazı + üç asit noktalı madde + «Başvur»; sağda
   evin asit dairesi (.g1-daire) içinde selam veren maskot.
   ============================================================ */
.ca-ogret-ic {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--isik); border: 1px solid var(--ayrac); border-radius: var(--r-md);
}
.ca-ogret-yazi > p { max-width: 52ch; margin: 10px 0 0; color: var(--murekkep-2); }
.ca-madde { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-width: 52ch; }
.ca-madde > li { position: relative; padding-left: 22px; line-height: 1.5; color: var(--murekkep-2); }
.ca-madde > li::before {
  content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px;
  border-radius: 50%; background: var(--asit); box-shadow: var(--g1);
}
.ca-ogret-gorsel { position: relative; aspect-ratio: 1; display: grid; place-items: center; width: min(100%, 320px); margin-inline: auto; }
@media (max-width: 760px) {
  .ca-ogret-ic { grid-template-columns: minmax(0, 1fr); }
  .ca-ogret-gorsel { order: -1; width: min(220px, 60vw); }
}

/* ============================================================
   ALTLIK — ligin yoğun dizin altlığı (Udemy/Preply/italki): marka + söz
   satırı, dört sütun bağ, yasal satır. Evin `footer a` altçizgisi liste
   bağlarında KAPALI (dizin, düzyazı değil); hedef 44px dar ekranda.
   ============================================================ */
.ca-altlik .marka { border-bottom: 0; padding-bottom: 0; }
.ca-alt-ust {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 14px clamp(24px, 4vw, 56px);
  padding-bottom: var(--bosluk-m); border-bottom: 1px solid var(--cizgi);
}
.ca-alt-soz { margin: 0; max-width: 48ch; font-size: var(--yz-orta); line-height: 1.5; color: var(--murekkep-2); }
/* Beş sütun (onuncu tur): «Dersler» sütunu eklendi — ligin altlığı da
   popüler konuları oradan dağıtıyor. 1000px altında ikişerli akıyor. */
.ca-alt-sutunlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); padding-top: var(--bosluk-m); }
@media (max-width: 1100px) {
  .ca-alt-sutunlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ca-alt-s h2 { margin: 0 0 8px; font-weight: 600; }
.ca-alt-s ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ca-alt-s a, .ca-alt-yakinda {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  border-bottom: 0; padding-bottom: 0; font-size: var(--yz-govde); color: var(--murekkep-2);
}
.ca-alt-s a:hover { color: var(--vurgu-koyu); }
.ca-alt-s a.mono { font-size: var(--yz-kucuk); letter-spacing: 0.04em; text-transform: none; font-weight: 500; }
.ca-alt-yakinda i { font-style: normal; font-size: var(--yz-mikro); letter-spacing: 0.1em; color: var(--murekkep-3); }
.ca-altlik .alt-yasal { margin-top: var(--bosluk-m); padding-top: var(--bosluk-s); border-top: 1px solid var(--cizgi); }
.ca-altlik .alt-yasal a { display: inline-flex; align-items: center; min-height: 36px; border-bottom: 0; padding-bottom: 0; }
@media (max-width: 760px) {
  .ca-alt-ust { grid-template-columns: minmax(0, 1fr); }
  .ca-alt-sutunlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   DOKUNMA HEDEFİ 44px — saha kuralı 10.4 · iki koşul: kaba işaretçi
   VEYA dar ekran (yalnız `pointer: coarse` emülasyonda doğrulanamıyordu).
   Satır içi bağlar görsel konum kaymadan büyür (padding + negatif kenar).
   ============================================================ */
@media (pointer: coarse), (max-width: 620px) {
  .ca-alt-s a, .ca-alt-yakinda, .ca-altlik .alt-yasal a { min-height: 44px; }
  .ca-kok .lobi-hesap a,
  .ca-kok .not a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* ============================================================
   REDUCED MOTION — her animasyonun son karesi (DESIGN § 4.4). İmleç
   katmanları da sıfır.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js .tabela-levha::before, html.js .tabela-levha::after, html.js .mask > span,
  html.js .ca-hero .gec, html.js .ca-hero .g1-orta { animation: none; }
  .ds-canli, .alan-cip, a.ds-kilit, .ca-ara-in, .ca-ara-ik { transition: none; }
  .ds-canli:hover, a.alan-cip:hover, a.ds-kilit:hover { transform: none; }
  .ca-hero .aurora, .ca-hero .g1-orta, .ca-hero .sr-yigin, .ca-hero .g1-balon { translate: none; }
}

/* ============================================================
   9 · ÖĞRETMEN BAŞVURUSU (/ogretmen/) — agy/ogretmen şeridi YALNIZ bu
   bölgeye yazar (2026-09-07). Ev bileşenleri (.tk-form, .tk-alan, .tk-in,
   .adim3, .kutu, omurga) zaten stil.css'te; burada yalnız o sayfaya özel
   yerleşim, ≤ 60 satır. Yeni renk/yarıçap/font/easing YOK.
   ============================================================ */
/* § ÖĞRETMEN BAŞI */
/* Giriş: kökün tabelası burada bir CÜMLE («Exactopia’da ders ver») — sarar,
   ölçüsü 18ch (72px'te «Exactopia’da» tek satırda kalır, ölçüldü);
   maskot evin asit dairesinde (.g1-orta), lobinin madalyonu değil. */
/* DAİRE HER GENİŞLİKTE DAİRE (2026-09-12 · onuncu tur eki): burada yalnız
   `width` ezildiği için ≤900px'te oval çıkıyordu — ev kuralı o kırılımda
   `aspect-ratio`yu kapatıp `height: min(300px,70vw)` veriyor (stil.css
   § 8824), bu seçici (0,2,0) ise yalnız eni değiştiriyordu: 200×273
   (ölçüldü, 390px'te /ogretmen/ · /ders-iste/ · /ders/*). Boy da burada
   veriliyor; iki değer aynı, yani daire kırılımdan bağımsız yuvarlak. */
.ca-ogretmen .g1-orta {
  width: clamp(200px, 24vw, 300px); height: clamp(200px, 24vw, 300px);
  margin-bottom: 6px;
}
.ca-ogretmen h1.tabela-ad { max-width: 18ch; margin: 14px auto 0; text-align: center; text-wrap: balance; }
.ca-ogretmen .md-alt {
  margin: 12px auto 0; max-width: 46ch; text-align: center;
  font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.5; color: var(--murekkep-2);
}
.ca-ogretmen .ca-hero .g1-eylem { margin-top: 22px; }
/* «Neden burada» üç kart: evin auto-fill ızgarası 1312px'te dördüncü sütunu boş bırakıyordu. */
@media (min-width: 900px) {
  .ca-neden { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Diller listesi omurga gövdesinde — kök § 4 ile aynı ızgara, okuma ölçüsüne kilitlenmez. */
.ca-ogretmen .govde > .ca-diller { max-width: none; }
/* Başvuru formu — evin .tk-form ailesi KOYU levha için yazılmış: etiket rengi
   --alan-metin (kâğıt beyazı). Burada form açık zeminde duruyor ve etiketler
   1,0:1 kontrastla kayboluyordu (2026-09-08'de ölçüldü). Mürekkebe çeviriyoruz;
   odak halkası da kâğıt yerine mürekkep, yoksa görünmez kalıyor. */
.ca-ogretmen .tk-alan > span { color: var(--murekkep-2); }
.ca-ogretmen .tk-form-not { color: var(--murekkep-2); }
.ca-ogretmen .tk-form-not a { color: var(--vurgu-koyu); }
.ca-ogretmen .tk-in:focus-visible { box-shadow: 0 0 0 2px var(--murekkep); }

/* ---- DERS SAYFASI (/ders/<slug>/) — onuncu tur eki (2026-09-12) ----
   Sayfa ailesi `ca-ogretmen` yerleşimini ödünç alıyor (aynı giriş: daire +
   ortalı tabela + tek cümle + iki eylem). Buradaki üç kural o ailenin
   üstüne biniyor; yeni bileşen yok. */
/* Giriş künyesi: dairenin altında alanın adı — hangi raftayız, bir bakışta. */
.ca-ders-etiket {
  margin: 14px 0 0; text-align: center;
  font-size: var(--yz-mikro); letter-spacing: 0.14em; color: var(--murekkep-3);
}
/* Dairenin içindeki kil işareti maskottan küçük durur: ikon zaten dolu bir
   daire, %62'de iki daire iç içe geçip kalınlaşıyordu (ölçüldü). */
.ca-ders .g1-maskot { width: 54%; }
/* KAPSAM listesi: tek sütunda 52ch'ye kilitliyken 1440'ta sağ yarı boş
   kalıyordu. Geniş ekranda iki sütun — madde sayısı çift olmasa da
   `grid-auto-flow: column` değil, doğal akış (okuma sırası bozulmasın). */
@media (min-width: 900px) {
  .ca-madde-2 { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
/* § ÖĞRETMEN SONU */

/* ============================================================
   13 · «HEPSİNDEN KULLAN» — üç pinli referans, kök sayfaya (2026-09-14)
   ------------------------------------------------------------
   Operatör: «Geliştir, daha örneklere uygun yap» → «hepsinden kullan».
   Defterdeki ÖLÇÜLÜ reçeteler (TASARIM-REFERANSLARI.md), kökün şu anki
   hâliyle karşılaştırıldı; alınanlar:
     · Kids' Language School § 3 — bölüm başı: etiket · başlık SOL ·
       kontrol SAĞ  → `.bolum-sag` (DERSLER: talep bağı).
     · Kids' § 6 — dörtgen ızgara: İLK hücre METİN, SON hücre CTA
       → `.hucre-metin` / `.hucre-cta` (HAKKIMIZDA · YÖNTEM · BLOG).
     · Fluenta — «başlık ince/orta ağırlıkta ve çok iri — KALIN DEĞİL;
       ağırbaşlılık buradan». Operatörün 2026-08-28 kuralıyla birlikte
       okundu («aşırı büyük olmasın, HAFİF kalın olsun»): boy aynı kaldı
       (31px, altıncı basamak yok), ağırlık 700 → 600. Tabela 700 kalır —
       o marka işareti, başlık değil.
     · Talkie + 60fps.design — «arkada dev, kırpılmış, çok soluk (~%7)
       kelime-marka» → `.hayalet` (ÖĞRETMEN şeridinde, absolute; § 5.2'nin
       yasakladığı ekrana-sabit katman DEĞİL). «İnce siyah el çizimi
       karalamalar, serpiştirilmiş» → iki `.karalama` (ok · yıldız), 1,7px
       mürekkep çizgi; hero'ya girmez (sahne kilitli, 2026-08-24).
   Alınmayanlar: karusel (K.5 § 6 yasak), palet/font (marka sürekliliği),
   dev bölüm başlığı (operatör 2026-08-28), cam malzeme (DESIGN § 5.2).
   ============================================================ */

/* Fluenta ağırlığı — yalnız kökte (.ca-kok gövde sınıfı). */
.ca-kok .bolum h2,
.ca-kok .orta,
.ca-kok .ca-soru { font-weight: 600; }

/* (Dörtgen ızgara hücreleri `.hucre-metin` · `.hucre-cta` · `.ca-izgara-4`
   on birinci turda kalktı: HAKKIMIZDA · YÖNTEM · BLOG ızgaraları § 14'e indi.) */

/* HAYALET KELİME-MARKA — Talkie / 60fps.design. Kartın içinde, kırpılmış,
   %6 mürekkep. Yazı üstünde kontrast ölçüldü (bkz. DEVAM § 68). */
.ca-ogret-ic { position: relative; overflow: hidden; isolation: isolate; }
.ca-ogret-ic > * { position: relative; z-index: 1; }
.hayalet {
  position: absolute; z-index: 0; left: -1%; bottom: -0.3em;
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(120px, 17vw, 240px); line-height: 1; letter-spacing: var(--ls-dev);
  color: var(--murekkep); opacity: 0.06; white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* KARALAMA — ince mürekkep çizgi, «serpiştirilmiş». İki adet, ikisi de
   bir kabın köşesinde; hero'ya girmez. */
.karalama { position: absolute; color: var(--murekkep-2); pointer-events: none; }
.ca-ogret-gorsel .karalama-ok { width: 34%; left: -22%; top: 6%; transform: rotate(-8deg); }
.ca-soz-ic .karalama-yildiz { width: 28px; right: clamp(16px, 2.4vw, 34px); top: clamp(16px, 2.4vw, 30px); transform: rotate(12deg); }
@media (max-width: 760px) {
  .ca-ogret-gorsel .karalama-ok { display: none; }   /* daire başa geçiyor, ok boşa bakar */
}


/* ============================================================
   14 · FARK · ALMANCA BANDI · FİYAT SATIRI — on birinci tur (2026-09-21)
   ------------------------------------------------------------
   Ölçüldü (DEVAM § 70): girişin altında ~15 aynı `.kutu` kartı, sayfa
   7.298px. Operatöre iki maket götürüldü (`_tasarim/maket-11/`), A «RAY»
   seçildi. Dört bölüm (HAKKIMIZDA · DERS AL · YÖNTEM · BLOG) ikiye indi:
     · FARK — sol yarı söz + üç olgu satırı, sağ yarı müfredatın kendisi:
       ilk seviyenin ilk altı adımı bir RAY üstünde, «BURADASIN» işaretiyle.
     · ALMANCA BANDI — asit plaka · tek paragraf · üç satırlık blog listesi.
   Kapanışa akademinin taban ücreti eklendi (`.ca-fiyat`).
   Yeni renk / yarıçap / eğri / süre YOK — hepsi DESIGN.md token'ı. Ray bir
   İMZA AN DEĞİL (hareket etmiyor; kökün imza anı girişteki levha kilidi,
   K.4): durağan bir yüzey, `.bel` belirişiyle bölümle birlikte gelir.
   Ayrıntı ve gerekçe: DESIGN.md § ÇATI K.14.
   ============================================================ */

/* ---- FARK — iki yarı ---- */
.ca-fark-ic {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--bosluk-l); align-items: center;
}
.ca-fark-yazi h2 { max-width: 17ch; }
.ca-fark-yazi .g1-eylem { margin-top: var(--bosluk-m); }

/* Olgu satırları — YÖNTEM'in üç mekanizması, kart değil çizgili satır.
   Satırın tamamı bağ: her olgunun gerçek kapısı var (müfredat · panel · tekrar). */
.ca-olgu { list-style: none; margin: var(--bosluk-m) 0 0; padding: 0; border-top: 1px solid var(--ayrac); }
.ca-olgu a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bosluk-s);
  min-height: 44px; padding: 14px 0; border-bottom: 1px solid var(--ayrac);
  text-decoration: none; color: inherit;
}
.ca-olgu b {
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--yz-h4); color: var(--murekkep);
  transition: color var(--dur-anlik) var(--ev);
}
.ca-olgu .mono { letter-spacing: 0.06em; text-align: right; color: var(--murekkep-2); }
.ca-olgu a:hover b, .ca-olgu a:focus-visible b { color: var(--vurgu-koyu); }
/* DURURKEN DE BAĞ (denetim 2026-09-21): satırlar yalnız üstüne gelince renk
   değiştiriyordu — dokunmatikte hiçbir işaret yoktu. Evin satır oku
   (`a.kat-satir::after` deseni): ölçünün sağında küçük terrakota ok. */
.ca-olgu a::after, .ca-alm-blog li a::after, .ca-ray li > a::after {
  content: '→'; flex: none; font-family: var(--f-mono); font-size: var(--yz-mikro); color: var(--vurgu-koyu);
  transition: translate var(--dur-anlik) var(--ev);
}
.ca-olgu a:hover::after, .ca-alm-blog li a:hover::after, .ca-ray li > a:hover::after,
.ca-olgu a:focus-visible::after, .ca-alm-blog li a:focus-visible::after, .ca-ray li > a:focus-visible::after { translate: 3px 0; }
.ca-olgu a .mono { margin-left: auto; }

/* ---- RAY — evin kartı (`--isik` yüzey, saç çizgisi kenar, --g2) ---- */
.ca-ray {
  background: var(--isik); border: 1px solid var(--ayrac); border-radius: var(--r-md);
  box-shadow: var(--g2); padding: var(--bosluk-m);
}
/* Ortak baş satırı: ray ve blog listesi. */
.ca-ray-bas {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bosluk-s);
  padding-bottom: 14px; border-bottom: 1px solid var(--ayrac);
  letter-spacing: 0.08em; color: var(--murekkep-2);
}
.ca-ray-bas a, .ca-ray-etek a {
  text-decoration: underline; text-decoration-color: var(--ayrac); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.ca-ray-bas a { color: var(--vurgu-koyu); }
.ca-ray-bas a:hover, .ca-ray-bas a:focus-visible { color: var(--murekkep); text-decoration-color: currentColor; }
.ca-ray ol { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
/* Hat: numara dairelerinin ortasından geçen tek çizgi. Konum = satır iç
   boşluğu (12px) + dairenin yarısı (1.15rem) − çizginin yarısı (1px). */
.ca-ray ol::before {
  content: ''; position: absolute; left: calc(12px + 1.15rem - 1px); top: 30px; bottom: 30px;
  width: 2px; background: var(--ayrac);
}
.ca-ray li > a {
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; gap: 0 14px; align-items: center;
  min-height: 44px; padding: 12px; position: relative; border-radius: var(--r-plaka);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-anlik) var(--ev);
}
.ca-ray li > a:hover, .ca-ray li > a:focus-visible { background: var(--kagit-2); }
/* Ok yalnız İŞARETSİZ satırda: «tamam» / «buradasın» üçüncü sütunu zaten dolduruyor. */
.ca-ray li > a::after { justify-self: end; }
.ca-ray-gecti > a::after, .ca-ray-burada > a::after { content: none; }
/* `.mono` evin ETİKET ailesi (Schibsted), gerçek mono değil; rakamlar evde
   Martian Mono (`.sr-n`, `.adim3::before`) → aile burada açıkça veriliyor.
   Saç çizgisi kenar: bekleyen daire kart üstünde 1,18:1'di, satır üstüne
   gelince (aynı --kagit-2 zemin) 1,00:1'e düşüp kayboluyordu (ölçüldü). */
.ca-ray-no {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; background: var(--kagit-2); color: var(--vurgu-koyu);
  box-shadow: inset 0 0 0 1px var(--ayrac);
  position: relative; z-index: 1;
}
.ca-ray-ad { font-family: var(--f-govde); font-weight: 600; font-size: var(--yz-h4); line-height: 1.3; color: var(--murekkep); }
.ca-ray-ornek {
  font-style: normal; font-weight: 400; font-size: var(--yz-kucuk);
  color: var(--vurgu-koyu); margin-left: 10px;
}
.ca-ray-im { letter-spacing: 0.08em; color: var(--murekkep-2); }
.ca-ray-im:empty { display: none; }
/* Geçilen adım: daire evin dolu levha tonu (--alan), metin bir kademe geri. */
.ca-ray-gecti .ca-ray-no { background: var(--alan); color: var(--alan-metin); box-shadow: none; }
.ca-ray-gecti .ca-ray-ad,
.ca-ray-gecti .ca-ray-ornek { color: var(--murekkep-2); }
/* BURADASIN — sayfadaki tek asit satır. Yüzey `--asit-2` (asidin açık tonu,
   üstünde mürekkep); işaret evin koyu levhası üstünde asit yazı. */
.ca-ray li.ca-ray-burada > a,
.ca-ray li.ca-ray-burada > a:hover { background: var(--asit-2); box-shadow: var(--g2); }
.ca-ray-burada .ca-ray-no { background: var(--alan-2); color: var(--asit); box-shadow: none; }
.ca-ray-burada .ca-ray-ornek { color: var(--murekkep-2); }
.ca-ray-burada .ca-ray-im {
  padding: 8px 10px; border-radius: var(--r-xs);
  background: var(--alan-2); color: var(--asit);
}
.ca-ray-etek {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ayrac);
  letter-spacing: 0.06em; color: var(--murekkep-2);
}
.ca-ray-etek a { color: inherit; }
.ca-ray-etek a:hover, .ca-ray-etek a:focus-visible { color: var(--vurgu-koyu); text-decoration-color: currentColor; }
.ca-ray-etek i { font-style: normal; color: var(--murekkep-3); }
/* Seviyeyi bitiren ziyaretçide (cati.js) sıradaki seviye vurgulanıyor —
   ray o noktada «devam et» değil «sıradaki seviye şu» diyor. Renk + ağırlık,
   hareket yok: kökün imza anı girişte (K.4). */
.ca-ray-etek a.ca-ray-sonraki { color: var(--vurgu-koyu); font-weight: 600; }

/* ---- ALMANCA BANDI — plaka · söz · blog listesi ---- */
.ca-alm-ic {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr);
  gap: var(--bosluk-l); align-items: stretch;
}
.ca-alm-iki { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
/* Plaka — evin asit yüzeyi (`.ds-canli` reçetesi, aynı gradyan). */
.ca-alm-plaka {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 15rem; padding: var(--bosluk-m);
  border-radius: var(--r-md); text-decoration: none; color: var(--murekkep);
  background: linear-gradient(color-mix(in srgb, var(--asit) 78%, var(--isik)), var(--asit) 62%);
  transition: transform var(--dur-kisa) var(--ev);
}
.ca-alm-plaka:hover { transform: translateY(-3px); }
.ca-alm-plaka img { width: 64px; height: 64px; margin-bottom: auto; border-radius: var(--r-plaka); }
.ca-alm-ad {
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--yz-h2); line-height: 1.15; letter-spacing: var(--ls-kart);
}
.ca-alm-olcu { letter-spacing: 0.04em; text-transform: none; color: color-mix(in srgb, var(--murekkep) 82%, var(--asit)); }
/* Ok çipi `.hap-asit`in reçetesi (mürekkep zemin, asit ok): çip zeminini
   yalnız hap içinde alıyor, plakada çıplak kalıyordu (ölçüldü, 1440). */
.ca-alm-plaka .hap-ok { align-self: flex-start; margin: 6px 0 0; background: var(--murekkep); color: var(--asit); }
.ca-alm-yazi { align-self: center; }
.ca-alm-yazi .g1-eylem { margin-top: var(--bosluk-m); }
.ca-alm-blog { align-self: center; }
.ca-alm-blog ol { list-style: none; margin: 0; padding: 0; }
.ca-alm-blog li + li { border-top: 1px solid var(--ayrac); }
.ca-alm-blog li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bosluk-s);
  min-height: 44px; padding: 16px 0; color: var(--murekkep); text-decoration: none;
  transition: color var(--dur-anlik) var(--ev);
}
.ca-alm-blog li a:hover, .ca-alm-blog li a:focus-visible { color: var(--vurgu-koyu); }
.ca-alm-blog li a .ca-alm-dk { margin-left: auto; }
.ca-alm-blog-ad {
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--yz-h4); line-height: 1.3; text-wrap: pretty;
}
.ca-alm-dk { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.06em; color: var(--murekkep-2); }

/* ---- FİYAT SATIRI — kapanışta (kök) ve ders sayfalarında ---- */
/* ÖZGÜLLÜK TUZAĞI (K.9'daki ile aynı aile): satır `omurga()` gövdesinde
   duruyor ve `.govde > p` (0,1,1) düz sınıfı (0,1,0) eziyordu — dikey boşluk
   --bosluk-m yerine 0 / 1,15em çıkıyordu (ölçüldü). Seçici bu yüzden iki katlı. */
.ca-fiyat,
.govde > .ca-fiyat {
  display: flex; align-items: baseline; gap: 16px; max-width: var(--olcu);
  margin: var(--bosluk-m) 0; padding: 16px 0;
  border-top: 1px solid var(--ayrac); border-bottom: 1px solid var(--ayrac);
}
.ca-fiyat b {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--yz-h1); font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  color: var(--murekkep); white-space: nowrap;
}
.ca-fiyat span { font-size: var(--yz-govde); line-height: 1.55; color: var(--murekkep-2); }

@media (max-width: 899px) {
  .ca-fark-ic, .ca-alm-ic, .ca-alm-iki { grid-template-columns: minmax(0, 1fr); gap: var(--bosluk-m); }
  .ca-alm-plaka { min-height: 11rem; }
  .ca-ray { padding: var(--bosluk-s); }
  /* Üçüncü sütun dar ekranda da duruyor: işaretsiz satırın oku oraya oturur;
     «tamam» / «buradasın» adın ALTINA iner (o satırlarda ok basılmıyor). */
  .ca-ray li > a { grid-template-columns: 2.3rem minmax(0, 1fr) auto; }
  .ca-ray li > a > .ca-ray-im { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 6px; }
  .ca-ray-ornek { display: block; margin: 2px 0 0; }
  .ca-fiyat { flex-direction: column; gap: 6px; }
}
@media (pointer: coarse), (max-width: 620px) {
  .ca-ray-bas a, .ca-ray-etek a, .ca-giris .gs-not a {
    display: inline-block; padding-block: 13px; margin-block: -13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ca-olgu b, .ca-ray li > a, .ca-alm-plaka, .ca-alm-blog li a,
  .ca-olgu a::after, .ca-alm-blog li a::after, .ca-ray li > a::after { transition: none; }
  .ca-alm-plaka:hover { transform: none; }
  .ca-olgu a:hover::after, .ca-alm-blog li a:hover::after, .ca-ray li > a:hover::after { translate: none; }
}

/* ============================================================
   15 · PLATFORM BANDI + AKADEMİ GİRİŞİ (/giris/) — on birinci tur (2026-09-21)
   ------------------------------------------------------------
   Operatör: «login kısmı da olsun» · «platformumuz da olacak, loginli.»
   Hesap katmanı yazılıydı; kökte tek izi şeritteki küçük «Giriş»ti ve o
   da ≤620px'te gizli. İki parça:
     · PLATFORM bandı (kök) — B maketinin koyu levhası (`--alan-2`, evin
       «kalkış panosu»): hesabın bugün verdiği üç şey + giriş kapısı.
       FARK'ın aynası — levha solda, söz sağda; dar ekranda söz önce.
     · `/giris/` — Genau giriş sahnesi (`.gs`, stil.css § 66) akademi
       kabuğunda. Buradaki kurallar yalnız İKİ HÂLİN takası.
   Levha durağan; sayfanın imza anı değil. Yeni token YOK.
   ============================================================ */
.ca-platform-ic {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--bosluk-l); align-items: center;
}
.ca-platform-yazi { order: 2; }
.ca-platform-yazi h2 { max-width: 18ch; }
.ca-platform-yazi .g1-eylem { margin-top: var(--bosluk-m); }

.ca-pano {
  background: var(--alan-2); color: var(--alan-2-metin);
  border-radius: var(--r-md); box-shadow: var(--g3); padding: var(--bosluk-m);
}
/* Koyu zeminde evin odak halkası (--vurgu-koyu) 2,7:1'de kalıyor; asit 12:1. */
.ca-pano :focus-visible { outline-color: var(--asit); }
.ca-pano-bas {
  display: flex; justify-content: space-between; gap: var(--bosluk-s);
  padding-bottom: 14px; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--alan-2-metin) 78%, var(--alan-2));
  border-bottom: 1px solid color-mix(in srgb, var(--alan-2-metin) 24%, var(--alan-2));
}
.ca-pano-bas span:last-child { color: var(--asit); }
.ca-pano ol { list-style: none; margin: 0; padding: 0; }
.ca-pano li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 0 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--alan-2-metin) 16%, var(--alan-2));
}
.ca-pano-no { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--asit); }
.ca-pano-ad {
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--yz-h3); line-height: 1.2; color: var(--alan-2-metin);
}
.ca-pano-ne {
  display: block; margin-top: 6px; font-style: normal;
  font-family: var(--f-govde); font-weight: 400; font-size: var(--yz-govde); line-height: 1.5;
  color: color-mix(in srgb, var(--alan-2-metin) 80%, var(--alan-2));
}
.ca-pano-olcu { letter-spacing: 0.06em; color: var(--asit); white-space: nowrap; }
.ca-pano-kapi { margin-top: var(--bosluk-m); }

/* ---- İKİ HÂL — `hesap.js` / kabuk betiği `<html data-hesap>` yazar ---- */
.ca-kok [data-girisli] { display: none; }
html[data-hesap='girisli'] .ca-kok [data-girisli] { display: revert; }
html[data-hesap='girisli'] .ca-kok [data-misafir] { display: none; }

/* /giris/ — girişlinin kapı satırları sahne kartının içinde (`.ca-olgu`). */
.ca-giris .ca-giris-kapi { margin-top: var(--bosluk-m); }
.ca-giris .gs-not a { color: var(--vurgu-koyu); }

@media (max-width: 899px) {
  .ca-platform-ic { grid-template-columns: minmax(0, 1fr); gap: var(--bosluk-m); }
  .ca-platform-yazi { order: 0; }
  .ca-pano { padding: var(--bosluk-s); }
  .ca-pano li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ca-pano-olcu { grid-column: 2; margin-top: 6px; white-space: normal; }
}

/* ============================================================
   16 · DERS SAYFALARI — alan tonu + derse özel işaret (2026-09-21)
   ------------------------------------------------------------
   Ölçüldü: 24 ders sayfasının girişi aynı asit daire + dört kil işaretinden
   biriydi (8/6/6/4 sayfa). Yeni varlık üretilmedi:
     · dairenin TONU alana göre — evin dört rotasyon tonu (DESIGN § 1.2):
       dil asit (evin dairesi, dokunulmadı) · okul cam · sınav kum · beceri gece
     · işaret derse özelse (dil bayrak plakası · ödev · koçluk) şablon verir
   Evin dairesi (`stil.css .g1-daire`) ham asit duraklarıyla boyalı; burada
   aynı iki katman `--daire` token'ından `color-mix` ile kuruluyor — ham
   renk yok. Hale (`::after`) de aynı tondan; yoksa cam dairenin çevresi
   yeşil ışırdı.
   ============================================================ */
.ca-ders.alan-okul   { --daire: var(--cam-2); }
.ca-ders.alan-sinav  { --daire: var(--kum); }
.ca-ders.alan-beceri { --daire: var(--gece); }
.ca-ders:is(.alan-okul, .alan-sinav, .alan-beceri) .g1-daire {
  background:
    radial-gradient(54% 48% at 32% 24%, color-mix(in srgb, var(--isik) 50%, transparent) 0%, transparent 62%),
    radial-gradient(92% 88% at 36% 26%,
      color-mix(in srgb, var(--daire) 72%, var(--isik)) 0%,
      var(--daire) 56%,
      color-mix(in srgb, var(--daire) 86%, var(--murekkep)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--murekkep) 14%, transparent),
    0 30px 68px color-mix(in srgb, var(--murekkep) 16%, transparent),
    inset 0 2px 0 color-mix(in srgb, var(--isik) 60%, transparent),
    inset -20px -28px 54px color-mix(in srgb, var(--murekkep) 12%, transparent);
}
.ca-ders:is(.alan-okul, .alan-sinav, .alan-beceri) .g1-daire::after {
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--daire) 30%, transparent) 56%, transparent 100%);
}
/* Bayrak plakası kare (kil işaretleri daire): dairenin içinde bir kademe
   küçük, köşesi evin plaka yarıçapı. */
.ca-ders .g1-maskot.ca-ders-plaka { width: 42%; border-radius: var(--r-md); }

/* ---- /hakkimizda/ — başlık bir CÜMLE (2026-09-21) ----
   `/ogretmen/` ailesinin 18ch ölçüsünde 1440'ta üç satıra kırılıyordu (ölçüldü);
   22ch'de iki satır. Olgu satırları `omurga()` gövdesinde: `.govde > ul` (0,1,1)
   evin madde girintisini veriyor — satır listesi girintisiz ve okuma ölçüsünde. */
.ca-hakkimizda h1.tabela-ad { max-width: 22ch; }
.govde > .ca-olgu { padding-left: 0; max-width: var(--olcu); margin-block: var(--bosluk-m) 0; }
.govde > .ca-olgu li { margin-bottom: 0; }   /* evin `.govde > ul li` 0,5em madde aralığı satır çizgilerini açıyordu */