/* ==========================================================================
   Bölüm sayfalarının ortak bileşen seti (Ana sayfa + Schools + For Families + Contact).
   Token'lar .schools-page, .families-page, .contact-page ve .home-page gövde sınıfları altında;
   about kendi sistemini (about.css) kullanmaya devam ediyor.
   Referans ölçüm viewport'u: 1920px · kırılımlar 1040 / 900 / 560
   ========================================================================== */

.schools-page, .families-page, .contact-page, .home-page, .legal-page{
  --sc-red:#DF3131;
  --sc-red-deep:#D31816;
  --sc-ink:#05244F;
  --sc-muted:#405A7B;
  --sc-dark:#0E1A2B;
  --sc-light:#F8F9FA;
  --sc-grey:#E6E9ED;
  --sc-rule:rgba(223,49,49,.55);
  /* --sc-red küçük metinde AA'yı geçmiyor (açık bantta 4.31, gri bantta 3.73).
     Küçük kırmızı metin için bant tipine göre bu iki ton kullanılır. */
  --sc-red-text:#C41414;      /* beyaz/açık/gri bantta 4.99–6.07 */
  --sc-red-text-dk:#E85B5B;   /* koyu bantta 5.06 */
  --sc-hair:rgba(5,36,79,.16);

  --caslon:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --cormorant:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --isans:"Instrument Sans","Manrope","Helvetica Neue",Arial,sans-serif;

  --sc-gut:var(--gut);
}

.schools-page .sc-wrap, .families-page .sc-wrap, .contact-page .sc-wrap, .home-page .sc-wrap, .legal-page .sc-wrap{width:100%;padding-inline:var(--sc-gut)}
.schools-page .sc-dot, .families-page .sc-dot, .contact-page .sc-dot, .home-page .sc-dot, .legal-page .sc-dot{color:var(--sc-red)}
/* Koyu zeminde aynı kırmızı AA'yı geçmiyor (#DF3131 / #0E1A2B = 3.85). Noktalar
   CTA bandında 22px'te kalıyor, yani "büyük metin" muafiyetine de girmiyorlar.
   Açık bantlarda başlık 28px+ olduğu için orada --sc-red olduğu gibi kalıyor. */
.sc-band--dark .sc-dot, .cta .sc-dot{color:var(--sc-red-text-dk,#E85B5B)}

/* Bant zeminleri ---------------------------------------------------------- */
.sc-band{padding-block:clamp(40px,3.4vw,66px)}
.sc-band--white{background:#fff}
.sc-band--light{background:var(--sc-light)}
.sc-band--grey{background:var(--sc-grey)}
.sc-band--dark{background:var(--sc-dark);color:#fff}

/* Ortalanmış bant. Bandın TÜM içeriğini ortalar: eyebrow, başlık, düz metin,
   buton, kart ızgarası ve numaralı adımlar. Ana sayfa bunu kullanıyor; diğer
   21 sayfa sola hizalı varsayılanda kalıyor.
   Kart/adım içi de ortalanır — ortadaki bir simgenin ya da numaranın altında
   sola yaslı başlık tutarsız durur, ikisi birlikte değişmeli. */
.sc-band--center .sc-wrap{text-align:center}
.sc-band--center .sc-card{align-items:center}
/* .num display:flex olduğu için text-align onu taşımaz; blok olarak ortalanır. */
.sc-band--center .sc-step .num{margin-inline:auto}
/* Ortalanmış düz metnin satır uzunluğu sınırlanmalı: 1920px'te bant 1680px
   geniş, ortalanmış 150 karakterlik satır okunmaz (denetim C3).
   DİKKAT — .sc-wrap fazladan yazıldı: aşağıdaki ".home-page .sc-p" kuralı
   margin:0 veriyor ve aynı özgüllükte (0,2,0) ama DAHA SONRA geldiği için
   kazanıyordu; kutu ortalanmıyordu. Bu seçici (0,3,0) olduğu için sıradan
   bağımsız kazanır. */
.sc-band--center .sc-wrap .sc-p{max-width:72ch;margin-inline:auto}
/* Başlıkla içerik arasına fazladan hava. Sola hizalı düzende göz ortak sol
   kenarı takip ettiği için dar boşluk yetiyor; ortalanmışta o dayanak yok ve
   başlık ızgaraya yapışık okunuyor. Değer başlık puntosuyla orantılı tutuldu
   (~1.1x): 1440px'te başlık 39px / boşluk 43px, 1920px'te 52px / 58px.
   .sc-wrap fazladan yazıldı: ".home-page .sc-h2" kuralı margin veriyor, aynı
   özgüllükte ve daha sonra geliyor — bu seçici (0,3,0) olduğu için kazanır. */
.sc-band--center .sc-wrap .sc-h2{margin-bottom:clamp(28px,3vw,58px)}

/* Ortak tipografi --------------------------------------------------------- */
.schools-page .sc-eyebrow, .families-page .sc-eyebrow, .contact-page .sc-eyebrow, .home-page .sc-eyebrow, .legal-page .sc-eyebrow{font-family:var(--cormorant);font-weight:700;
  font-size:clamp(15px,1.15vw,22px);letter-spacing:.06em;line-height:1;
  color:var(--sc-red-text);margin:0 0 15px;text-transform:uppercase}
.sc-band--dark .sc-eyebrow{color:var(--sc-red-text-dk)}
.schools-page .sc-h2, .families-page .sc-h2, .contact-page .sc-h2, .home-page .sc-h2, .legal-page .sc-h2{font-family:var(--cormorant);font-weight:700;color:var(--sc-ink);
  font-size:clamp(28px,2.7vw,52px);line-height:.98;margin:0 0 clamp(16px,1.4vw,27px)}
.sc-band--dark .sc-h2{color:#fff}
/* tr: iki satırlı başlıklarda Türkçe aksanlı harfler (ç, ğ, ı, ö, ş, ü) üst/alt
   çıkıntısı daha büyük olduğu için .98 satır aralığında satırlar birbirine
   yapışıyordu. html[lang] seçicisi diğer dillere dokunmadan yalnızca tr'yi
   hedefliyor. */
html[lang="tr"] .schools-page .sc-h2, html[lang="tr"] .families-page .sc-h2, html[lang="tr"] .contact-page .sc-h2, html[lang="tr"] .home-page .sc-h2, html[lang="tr"] .legal-page .sc-h2{line-height:1.15}
.schools-page .sc-h2--sans, .families-page .sc-h2--sans, .contact-page .sc-h2--sans, .home-page .sc-h2--sans, .legal-page .sc-h2--sans{font-family:var(--isans);letter-spacing:.04em;line-height:1.02;
  font-size:clamp(26px,2.5vw,48px)}
/* İki cümlelik bir .sc-h2'yi alt alta yerine yan yana iki eşit sütuna
   ayıran opt-in bir sarmalayıcı (bkz. for-schools/index.php "The Challenge").
   Yalnızca bu sınıf eklenen örnekleri etkiler, .sc-h2'nin varsayılan
   davranışına dokunmuyor. */
.sc-h2-split{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,34px)}
.schools-page .sc-p, .families-page .sc-p, .contact-page .sc-p, .home-page .sc-p, .legal-page .sc-p{font-family:var(--caslon);font-weight:400;color:var(--sc-ink);
  font-size:clamp(15px,1.15vw,22px);line-height:1.35;margin:0}
.sc-band--dark .sc-p{color:#fff}
.schools-page .sc-p + .sc-p, .families-page .sc-p + .sc-p, .contact-page .sc-p + .sc-p, .home-page .sc-p + .sc-p, .legal-page .sc-p + .sc-p{margin-top:1.1em}

/* ---------- 1. hero ------------------------------------------------------ */
.sc-hero{position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--sc-dark);min-height:clamp(300px,23vw,440px)}
.sc-hero__art{position:absolute;inset:0;z-index:0;
  background:url("../img/about-hero.webp") center center/cover no-repeat}
.sc-hero__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,26,43,.86) 0%,rgba(14,26,43,.62) 42%,rgba(14,26,43,.18) 74%,rgba(14,26,43,.05) 100%)}
.sc-hero__inner{position:relative;z-index:1;width:100%;
  padding-block:clamp(44px,3.6vw,70px);padding-inline:var(--sc-gut)}
.schools-page .sc-hero .sc-eyebrow, .families-page .sc-hero .sc-eyebrow, .contact-page .sc-hero .sc-eyebrow, .home-page .sc-hero .sc-eyebrow, .legal-page .sc-hero .sc-eyebrow{color:var(--sc-red-text-dk)}
.sc-hero h1{font-family:var(--cormorant);font-weight:600;color:#fff;
  font-size:clamp(30px,3.1vw,60px);line-height:1.02;margin:0 0 16px;max-width:32ch;text-wrap:balance}
.sc-hero__lede{font-family:var(--caslon);color:#E4EAF3;
  font-size:clamp(15px,1.2vw,23px);line-height:1.32;margin:0;max-width:62ch}

/* ---------- 2. lead / giriş ---------------------------------------------- */
.sc-lead__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);
  gap:clamp(24px,3vw,58px);align-items:start}
.sc-lead__grid--single{grid-template-columns:1fr;max-width:78ch}
/* Varsayılan align-items:start, sağ sütundaki paragraf soldaki iki satırlı
   başlıktan kısa kaldığında üstte havada asılı kalmış gibi duruyordu
   (for-families/index.php, "Panache ile Tanışın"). Opt-in bir değiştirici:
   yalnızca bu sınıf eklenen örneklerde ortalıyor, diğer sc-lead__grid
   kullanan sayfalara dokunmuyor. */
.sc-lead__grid--center{align-items:center}

/* ---------- 3. (boş) -----------------------------------------------------
   Burada `.sc-pillars` vardı: numaralı listeyi üçüncü bir görünümle çizen,
   yalnızca schools/index.php'de kullanılan tek seferlik bir bileşen. Denetim
   D5 için kaldırıldı — sitede artık iki numaralı bileşen var ve ikisinin
   anlamı ayrı:
     .sc-steps  -> SIRALI süreç (kırmızı daire + noktalı bağlantı çizgisi)
     .sc-cards  -> numaralı LİSTE (numara + kısa kırmızı çizgi)
   Yeni bir numaralı bölüm eklerken bu ikisinden birini seçin, üçüncüsünü
   yazmayın.                                                                */

/* ---------- 4. vurgu cümlesi --------------------------------------------- */
.sc-quote{padding-block:clamp(30px,2.6vw,50px);text-align:center}
.sc-quote p{font-family:var(--cormorant);font-weight:700;color:var(--sc-red);
  font-size:clamp(20px,2.05vw,40px);line-height:1.14;margin:0 auto;max-width:42ch;
  text-wrap:balance}
.sc-quote--ink p{color:var(--sc-ink)}
.sc-band--dark .sc-quote p{color:#fff}
.sc-band--dark .sc-quote--accent p{color:var(--sc-red)}

/* Tek başına duran koyu alıntı bantları (bkz. for-schools/ai-strategy.php)
   düz renk üstünde biraz boş kalıyordu. Ana sayfanın CTA bandındaki skyline
   motifini alta yaslı, maskeyle soluklaştırılmış biçimde buraya da taşıyan
   opt-in bir sınıf — yalnızca eklendiği bantları etkiler, .sc-band--dark'ın
   varsayılanına dokunmuyor. */
.sc-quote-band--skyline{position:relative;overflow:hidden}
.sc-quote-band--skyline::before{content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(100vw / 4.327);max-height:260px;
  background-image:url("../img/skyline.webp");
  background-size:100% 100%;background-position:center bottom;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 60%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 60%);
  opacity:.45}
.sc-quote-band--skyline .sc-wrap{position:relative;z-index:1}

/* Açık (grey/light) bantlarda skyline görseli işe yaramıyor — kendi koyu lacivert
   zemini var, açık bant üstünde sert bir dikdörtgen gibi duruyordu. Bunun yerine
   about.php'nin "audiences" bandında zaten kullanılan açık tonlu dünya haritası
   aynı %22 opaklık tekniğiyle buraya taşındı (bkz. for-schools/edtech-integration.php). */
.sc-quote-band--worldmap{position:relative;overflow:hidden}
.sc-quote-band--worldmap::before{content:"";position:absolute;inset:0;z-index:0;opacity:.28;
  background:url("../img/about-audience-bg.webp") center center/cover no-repeat}
.sc-quote-band--worldmap .sc-wrap{position:relative;z-index:1}

/* Tek başına duran koyu alıntı bandı için ikinci bir seçenek (bkz.
   for-families/boarding-placement.php). Skyline burada bilerek kullanılmadı:
   o motif kurumsal mimari gösteriyor, bandın cümlesi ise tam tersini söylüyor
   ("Bir okulla başlamıyoruz. Çocuğunuzla başlıyoruz.").
   Onun yerine bandın kendi biçimini anlatan bir filigran: markanın serif
   yazıtipinde iri tırnak işaretleri, alıntıyı iki yandan çerçeveliyor; arkada
   yumuşak bir kırmızı hâle. Ek görsel indirilmiyor.
   Yazıtipi var(--cormorant) ile DEĞİL, açıkça yazıldı: rtl.css o değişkeni
   Noto Naskh Arabic'e çeviriyor ve bu işaretler metin değil, süs — altı dilde
   de aynı Cormorant tırnağı görünmeli. */
.sc-quote-band--mark{position:relative;overflow:hidden;
  background-image:radial-gradient(52% 150% at 50% 50%,
    rgba(223,49,49,.15) 0%, rgba(223,49,49,0) 72%)}
.sc-quote-band--mark .sc-wrap{position:relative;z-index:1}
.sc-quote-band--mark::before,.sc-quote-band--mark::after{position:absolute;z-index:0;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:700;line-height:1;font-size:clamp(150px,17vw,300px);
  color:rgba(255,255,255,.075);top:50%;transform:translateY(-32%)}
.sc-quote-band--mark::before{content:"\201C";inset-inline-start:clamp(20px,7vw,120px)}
.sc-quote-band--mark::after{content:"\201D";inset-inline-end:clamp(20px,7vw,120px)}

/* Koyu alıntı bandı için üçüncü seçenek (bkz. for-families/university-applications.php).
   Bandın cümlesi bir yöntem beyanı: "Okulların sıralaması değil. Gerekçesi olan
   bir öneri." Arka plan da bunu anlatıyor — soluk aday satırlarından oluşan bir
   liste ve altta işaretlenmiş tek bir kırmızı satır.
   İki katman da AYNI iki maskeyi paylaşıyor: --sl-edges kenarlarda söndürüyor,
   --sl-hole ortada eliptik bir boşluk açıyor. Boşluk bandın ölçüsüne göre
   hesaplandığı için metin hangi dilde kaç satır olursa olsun çizgiler ona
   değmiyor; kırmızı satırın dikey konumu da bu yüzden serbestçe ayarlanabiliyor.
   Kompozisyon tamamen simetrik — RTL'de ek kural gerekmiyor. */
.sc-quote-band--shortlist{position:relative;overflow:hidden;
  --sl-hole:radial-gradient(34% 86% at 50% 50%, rgba(0,0,0,0) 62%, #000 100%);
  --sl-edges:linear-gradient(90deg,rgba(0,0,0,0) 4%,#000 24%,#000 76%,rgba(0,0,0,0) 96%);
  background-image:radial-gradient(44% 140% at 50% 50%,
    rgba(223,49,49,.12) 0%, rgba(223,49,49,0) 72%)}
.sc-quote-band--shortlist .sc-wrap{position:relative;z-index:1}
.sc-quote-band--shortlist::before,.sc-quote-band--shortlist::after{content:"";
  position:absolute;inset:0;z-index:0;
  -webkit-mask-image:var(--sl-edges),var(--sl-hole);mask-image:var(--sl-edges),var(--sl-hole);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sc-quote-band--shortlist::before{background-position:center center;
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.2) 0 1px, rgba(255,255,255,0) 1px 26px)}
.sc-quote-band--shortlist::after{background-repeat:no-repeat;background-size:100% 2px;
  background-image:linear-gradient(180deg, rgba(232,91,91,.8) 0 2px, rgba(0,0,0,0) 2px);
  background-position:center calc(50% + clamp(44px,3.8vw,64px))}

/* Koyu alıntı bandı için dördüncü seçenek (bkz. for-families/academic-pathway.php).
   Sayfanın konusu akademik yol planlaması, cümlesi de zamanla ilgili: "Bir yaz,
   bir sonraki eğitim konuşmasına yön verebilir." Arka plan bu yüzden ölçekli bir
   zaman çizgisi — kısa çentikler, her beşincide uzun çentik, altında taban çizgisi.
   DİKKAT: bu sayfada zaten bir .sc-steps var (kesikli çizgi + kırmızı numaralı
   daireler). Arka plana kesikli çizgi + düğüm koymak o bileşeni tekrarlardı;
   dikey çentikli ölçek bilerek farklı bir geometri.
   Maskeler --shortlist ile aynı mantıkta: kenarlarda sönüm, ortada bandın
   ölçüsünden türeyen eliptik boşluk — metin kaç satır olursa olsun çentikler ona
   değmiyor. Kompozisyon simetrik, RTL'de ek kural gerekmiyor. */
.sc-quote-band--scale{position:relative;overflow:hidden;
  --sq-hole:radial-gradient(44% 92% at 50% 50%, rgba(0,0,0,0) 58%, #000 100%);
  --sq-edges:linear-gradient(90deg,rgba(0,0,0,0) 3%,#000 20%,#000 80%,rgba(0,0,0,0) 97%);
  background-image:radial-gradient(46% 140% at 50% 46%,
    rgba(223,49,49,.12) 0%, rgba(223,49,49,0) 72%)}
.sc-quote-band--scale .sc-wrap{position:relative;z-index:1}
.sc-quote-band--scale::before,.sc-quote-band--scale::after{content:"";
  position:absolute;inset:0;z-index:0;background-repeat:repeat-x;
  -webkit-mask-image:var(--sq-edges),var(--sq-hole);mask-image:var(--sq-edges),var(--sq-hole);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sc-quote-band--scale::before{background-size:100% 13px;
  background-position:center calc(50% + 46px);
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.18) 0 1px, rgba(255,255,255,0) 1px 19px)}
.sc-quote-band--scale::after{background-size:100% 29px, 100% 1px;
  background-position:center calc(50% + 46px), center calc(50% + 58px);
  background-image:repeating-linear-gradient(90deg,
      rgba(255,255,255,.34) 0 1px, rgba(255,255,255,0) 1px 95px),
    linear-gradient(180deg, rgba(255,255,255,.3) 0 1px, rgba(0,0,0,0) 1px)}

/* Koyu alıntı bandı için beşinci seçenek (bkz. for-families/how-we-work.php).
   Cümle üç kısa yargıdan oluşuyor: "Personal guidance. Clear choices.
   Thoughtful preparation." Üç nitelik, üç nokta.

   MOTİF: üç sakin nokta. Sitenin kendi imzası zaten kırmızı nokta (.sc-dot —
   her başlığın sonunda), burada arka plana taşınıyor: iki soluk beyaz, sonuncu
   kırmızı — cümlenin son noktası gibi. Her noktanın arkasında yumuşak bir hâle,
   bandın geniş boşluğunda üçlü bir ritim kuruyor.

   NEDEN NOKTA: eğrisel motif denendi ve terk edildi — bant 6:1 oranında ve
   radial-gradient'te çizgi kalınlığı ışın boyuyla ölçeklendiği için yaylar ya
   kesiliyor ya da devasa yumuşak kamalara dönüşüyor. Nokta hem oranla kavga
   etmiyor hem de diğer dört varyanttan (silüet, harita, tırnak, çizgi/çentik)
   ayrışıyor.

   YÖN: kırmızı nokta cümleyi KAPATAN nokta olduğu için sonda duruyor; LTR'de
   sağda, RTL'de solda olmalı. Kompozisyon bu yüzden simetrik DEĞİL ve rtl.css'te
   küçük bir eşlik kuralı var (noktaların sırası ters çevriliyor).
   Ek görsel indirilmiyor. */
.sc-quote-band--focus{position:relative;overflow:hidden;
  /* Noktalar metnin ALTINDA, bandın alt kenarına değmeden. Ölçüldü: bant
     masaüstünde 240px, mobilde 186px; metin iki satırda 154 / 116px'te bitiyor.
     Offset clamp'li: mobilde 151px, 1440'ta 193px, 1920'de 256px. */
  --fc-y:calc(50% + clamp(58px,5.1vw,96px));
  --fc-d:clamp(112px,9.4vw,158px);            /* noktalar arası açıklık */
  background-image:radial-gradient(46% 140% at 50% 50%,
    rgba(223,49,49,.13) 0%, rgba(223,49,49,0) 72%)}
.sc-quote-band--focus .sc-wrap{position:relative;z-index:1}
/* Üç nokta. Sonuncusu kırmızı: cümleyi kapatan nokta.
   Nokta başına hâle DENENDİ ve kaldırıldı — yarıçapı bandın alt kenarını aşıyor,
   yumuşak ışık sert bir çizgiyle kesiliyordu. Zemindeki kırmızı hâle zaten
   ortam ışığını veriyor; üç net nokta daha disiplinli duruyor. */
.sc-quote-band--focus::before{content:"";position:absolute;inset:0;z-index:0;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle 5px at calc(50% - var(--fc-d)) var(--fc-y),
      rgba(255,255,255,.34) 0 3.5px, rgba(255,255,255,0) 4px),
    radial-gradient(circle 5px at 50% var(--fc-y),
      rgba(255,255,255,.34) 0 3.5px, rgba(255,255,255,0) 4px),
    radial-gradient(circle 7px at calc(50% + var(--fc-d)) var(--fc-y),
      rgba(232,91,91,.88) 0 5px, rgba(232,91,91,0) 5.5px)}

/* Koyu alıntı bandı için dördüncü seçenek (bkz. for-families/language-cultural.php).
   Bandın cümlesi bir zaman beyanı: "Hazırlık, bavul toplamadan çok önce başlar."
   Arka plan da bunu anlatıyor — alt kenarın ortasından dışa doğru açılan halkalar:
   etki, görünür olaydan önce yayılmaya başlar. Sayfa zaten dil ve kültürel
   hazırlığı anlatıyor, halka motifi ikinci bir okumayla sesin yayılmasına da
   bağlanıyor.
   Diğer üç motiften bilerek ayrı: skyline silüet, --mark tipografik, --shortlist
   düz çizgi listesi. Bu eğrisel, dolayısıyla aile sayfalarında ikiz görünmüyor.
   Halkalar alt kenardan doğuyor ve maskeyle metin yüksekliğine varmadan
   sönüyor — cümle hangi dilde kaç satır olursa olsun üstüne binmiyorlar.
   Kompozisyon tamamen simetrik; RTL'de ek kural gerekmiyor. Ek görsel indirilmiyor. */
.sc-quote-band--ripple{position:relative;overflow:hidden;
  /* TEK maske, bilerek: elips zaten her yöne söndürüyor, ikinci bir kenar
     maskesine gerek yok. Yatay yarıçap px ile sınırlı (min(58%,470px)) çünkü
     bant yüksekliği sabit kalırken genişlik büyüyor — yüzde verilince 1920px'te
     yaylar yayvanlaşıp düz dikey çizgilere dönüşüyordu. Dikey yarıçap %58:
     cümlenin altındaki boşluk her genişlikte bandın %42'si (390/1440/1920'de
     ölçüldü), dolayısıyla %58 yarıçap + %92'de tam şeffaflık halkaları
     metne ~%8 kala bitiriyor.
     DİKKAT: yarıçapta min() KULLANMAYIN — tarayıcı onu geçersiz sayıp TÜM
     mask-image'ı düşürüyor (maske hiç uygulanmıyor, halkalar bandı kaplıyor).
     clamp() aynı yerde geçerli; ölçüldü. */
  --rp-fade:radial-gradient(clamp(240px,40vw,470px) 58% at 50% 100%,
    #000 0%, rgba(0,0,0,.88) 52%, rgba(0,0,0,0) 92%);
  /* Hâlenin dikey yarıçapı halkalarla aynı bölgede tutuluyor (%55). Daha
     geniş verildiğinde (%130 denendi) kırmızı hâle cümlenin ARKASINA giriyor
     ve kırmızı metnin kontrastını düşürüyordu: 390px'te 3.85 -> 3.60.
     Bu genişlikte alıntı 20px, yani "büyük metin" muafiyetine girmiyor;
     tasarım mevcut oranı daha da bozmamalı. */
  background-image:radial-gradient(56% 55% at 50% 100%,
    rgba(223,49,49,.30) 0%, rgba(223,49,49,0) 70%)}
.sc-quote-band--ripple .sc-wrap{position:relative;z-index:1}
.sc-quote-band--ripple::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:repeating-radial-gradient(circle at 50% 100%,
    rgba(255,255,255,.32) 0 1px, rgba(255,255,255,0) 1px clamp(22px,2vw,30px));
  -webkit-mask-image:var(--rp-fade);mask-image:var(--rp-fade)}

/* "Çıktı" bandı (bkz. for-schools/readiness-assessment.php) düz koyu zeminde
   duruyordu: başlık solda iki satır, altında tam genişlikte .sc-report kutusu,
   sağ yarı tamamen boş. Skyline buraya uymuyor — o motif alıntı bantlarının
   imzası (6 sayfada kullanılıyor) ve alta yaslı olduğu için kutunun arkasından
   geçiyor. Bunun yerine bandın kendi konusunu anlatan, tümüyle CSS ile çizilmiş
   bir "olgunluk kadranı": eşmerkezli ince halkalar ve tek bir kırmızı yay.
   Sanat katmanı maskeyle kutuya varmadan sönüyor, metnin arkasına hiç girmiyor;
   ek görsel indirilmiyor. Opt-in: yalnızca sınıfın eklendiği bandı etkiler. */
.sc-report-band{position:relative;overflow:hidden;--sc-ring:clamp(38px,3.7vw,64px);
  background-image:radial-gradient(46% 120% at 84% 30%,
    rgba(223,49,49,.13) 0%, rgba(223,49,49,0) 70%)}
.sc-report-band > .sc-wrap{position:relative;z-index:1}
/* halkalar: iki maske birlikte — radial olan kadranı kenarlarda söndürüyor,
   linear olan .sc-report kutusuna inmeden önce tamamen kesiyor. */
.sc-report-band::before{content:"";position:absolute;z-index:0;
  width:clamp(360px,37vw,640px);aspect-ratio:1;border-radius:50%;
  top:calc(-1 * clamp(96px,9.9vw,172px));inset-inline-end:clamp(0px,4.2vw,72px);
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0) 0 calc(var(--sc-ring) - 1px),
    rgba(255,255,255,.14) calc(var(--sc-ring) - 1px) var(--sc-ring));
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,rgba(0,0,0,0) 76%),
                     linear-gradient(180deg,#000 0 40%,rgba(0,0,0,0) 62%);
  mask-image:radial-gradient(circle at 50% 50%,#000 40%,rgba(0,0,0,0) 76%),
             linear-gradient(180deg,#000 0 40%,rgba(0,0,0,0) 62%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* kırmızı yay: 2px'lik tam çember, konik maskeyle bir dilime indiriliyor.
   Yayı doğrudan conic-gradient ile boyamak yerine maskelemek, çizgi kalınlığının
   her ölçekte 2px kalmasını ve iki ucun da yumuşak bitmesini sağlıyor. */
.sc-report-band::after{content:"";position:absolute;z-index:0;
  width:clamp(250px,25.9vw,448px);aspect-ratio:1;border-radius:50%;
  top:calc(-1 * clamp(42px,4.4vw,76px));inset-inline-end:clamp(60px,9.8vw,168px);
  border:2px solid rgba(232,91,91,.72);
  -webkit-mask-image:conic-gradient(from 0deg,
    rgba(0,0,0,0) 0 254deg,#000 300deg,rgba(0,0,0,0) 346deg);
  mask-image:conic-gradient(from 0deg,
    rgba(0,0,0,0) 0 254deg,#000 300deg,rgba(0,0,0,0) 346deg)}

/* ---------- 5. iki sütunlu madde karşılaştırması ------------------------- */
.sc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.1vw,60px);
  margin-top:clamp(22px,2vw,38px)}
.sc-split > div + div{position:relative}
.sc-split > div + div::before{content:"";position:absolute;
  left:calc(-1 * clamp(12px,1.55vw,30px));top:2px;bottom:2px;width:1px;background:var(--sc-hair)}
.sc-band--dark .sc-split > div + div::before{background:rgba(255,255,255,.28)}
.sc-split h3{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(14px,1.04vw,20px);letter-spacing:.09em;text-transform:uppercase;
  line-height:1.2;margin:0 0 clamp(12px,1.05vw,20px)}
.sc-band--dark .sc-split h3{color:#fff}
.sc-list{list-style:none;margin:0;padding:0}
.sc-list li{position:relative;font-family:var(--caslon);color:var(--sc-ink);
  font-size:clamp(15px,1.09vw,21px);line-height:1.35;padding-inline-start:1.1em}
.sc-band--dark .sc-list li{color:#E4EAF3}
.sc-list li + li{margin-top:.34em}
.sc-list li::before{content:"";position:absolute;left:0;top:.56em;
  width:5px;height:5px;border-radius:50%;background:var(--sc-red)}

/* ---------- 6. kart ızgarası --------------------------------------------- */
.sc-cards{display:grid;grid-template-columns:repeat(var(--sc-cols,3),1fr);
  gap:clamp(24px,2.5vw,48px);margin-top:clamp(22px,2vw,38px)}
.sc-card{display:flex;flex-direction:column;align-items:flex-start}
.sc-card .rule{display:block;width:clamp(34px,2.8vw,54px);height:3px;background:var(--sc-red);
  margin:0 0 clamp(11px,.95vw,18px)}
.sc-card .ico{margin:0 0 clamp(10px,.85vw,16px)}
.sc-card .ico svg{width:clamp(34px,2.6vw,50px);height:auto;stroke:var(--sc-red);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sc-card h3{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(15px,1.15vw,22px);letter-spacing:.02em;line-height:1.22;margin:0 0 9px}
.sc-band--dark .sc-card h3{color:#fff}
.sc-card p{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(15px,1.04vw,20px);line-height:1.35;margin:0}
.sc-band--dark .sc-card p{color:#C6D2E2}
.sc-card .num{font-family:var(--isans);font-weight:700;color:var(--sc-red-text);
  font-size:clamp(15px,1.15vw,22px);line-height:1;margin:0 0 9px;display:block}
.sc-band--dark .sc-card .num{color:var(--sc-red-text-dk)}
/* tıklanabilir kart */
a.sc-card{transition:transform .18s ease}
a.sc-card:hover{transform:translateY(-3px)}
a.sc-card:hover h3{color:var(--sc-red-text)}
a.sc-card .go{font-family:var(--isans);font-weight:700;font-size:clamp(13px,.78vw,14px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--sc-red-text);margin-top:auto;padding-top:14px}

/* ---------- 7. süreç adımları (01–06) ------------------------------------ */
/* Sütun sayısı sayfadan --sc-steps-cols ile verilir (bkz. .sc-cards/--sc-cols).
   SATIR İÇİ grid-template-columns YAZMAYIN: satır içi stil, aşağıdaki medya
   sorgularını ezer ve adımlar dar ekranda tek satırda kalıp taşar. Özel
   değişken ise sorgularla ezilebiliyor, çünkü sorgular özelliği doğrudan yazar. */
.sc-steps{position:relative;display:grid;
  grid-template-columns:repeat(var(--sc-steps-cols,6),1fr);
  gap:clamp(16px,1.6vw,30px);margin-top:clamp(26px,2.4vw,46px)}
.sc-steps::before{content:"";position:absolute;left:4%;right:4%;top:23px;
  border-top:1px dashed var(--sc-rule);z-index:0}
.sc-step{position:relative;z-index:1}
.sc-step .num{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--sc-red);color:#fff;
  font-family:var(--isans);font-weight:700;font-size:16px;line-height:1;margin:0 0 14px}
.sc-band--dark .sc-step .num{box-shadow:0 0 0 6px var(--sc-dark)}
.sc-band--light .sc-step .num{box-shadow:0 0 0 6px var(--sc-light)}
.sc-band--white .sc-step .num{box-shadow:0 0 0 6px #fff}
.sc-step h3{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(14px,1.04vw,20px);letter-spacing:.09em;text-transform:uppercase;
  line-height:1.2;margin:0 0 8px}
.sc-band--dark .sc-step h3{color:#fff}
.sc-step p{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(15px,.99vw,19px);line-height:1.35;margin:0}
.sc-band--dark .sc-step p{color:#C6D2E2}

/* ---------- 8. yatay ilerleyiş (chevron) --------------------------------- */
.sc-flow{display:flex;align-items:stretch;flex-wrap:wrap;gap:clamp(6px,.7vw,13px);
  margin-top:clamp(22px,2vw,38px)}
.sc-flow__item{flex:1 1 0;min-width:120px;display:flex;align-items:center;gap:clamp(6px,.7vw,13px)}
.sc-flow__box{flex:1 1 auto;text-align:center;padding:clamp(14px,1.25vw,24px) clamp(8px,.8vw,15px);
  border:1px solid var(--sc-hair);background:#fff;
  font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(14px,.94vw,18px);letter-spacing:.02em;line-height:1.25}
.sc-band--dark .sc-flow__box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:#fff}
.sc-flow__item:last-child .sc-flow__sep{display:none}
/* Ayraç küçük puntoda kalıyor; --sc-red açık bantta 4.31, koyu bantta 3.85
   veriyor. Bant tipine göre okunur tonlar kullanılıyor. */
.sc-flow__sep{flex:0 0 auto;color:var(--sc-red-text);font-family:var(--isans);font-weight:700;
  font-size:clamp(15px,1.25vw,24px);line-height:1}
.sc-band--dark .sc-flow__sep{color:var(--sc-red-text-dk)}

/* ---------- 9. üç izlek + seviye rozeti ---------------------------------- */
.sc-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.5vw,48px);
  margin-top:clamp(24px,2.2vw,42px)}
.sc-track{display:flex;flex-direction:column;border:1px solid var(--sc-hair);
  background:#fff;padding:clamp(20px,1.7vw,32px)}
.sc-band--dark .sc-track{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.sc-track h3{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(14px,1.09vw,21px);letter-spacing:.09em;text-transform:uppercase;
  line-height:1.2;margin:0 0 clamp(12px,1.05vw,20px)}
.sc-band--dark .sc-track h3{color:#fff}
.sc-track .sc-list{flex:1 1 auto}
.sc-track .badge{display:inline-block;align-self:flex-start;margin-top:clamp(16px,1.4vw,26px);
  padding:.46em 1.15em;background:var(--sc-red);color:#fff;
  font-family:var(--isans);font-weight:700;font-size:clamp(13px,.78vw,14px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1}

/* ---------- 10. kontrol listesi ------------------------------------------ */
.sc-checklist{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,.9vw,17px) clamp(24px,3vw,58px);margin:clamp(22px,2vw,38px) 0 0;
  padding:0;list-style:none}
.sc-checklist li{position:relative;font-family:var(--caslon);color:var(--sc-ink);
  font-size:clamp(15px,1.09vw,21px);line-height:1.3;padding:0 0 clamp(10px,.9vw,17px) 1.6em;
  border-bottom:1px solid var(--sc-hair)}
.sc-band--dark .sc-checklist li{color:#E4EAF3;border-bottom-color:rgba(255,255,255,.14)}
.sc-checklist li::before{content:"";position:absolute;left:0;top:.36em;width:9px;height:9px;
  border:2px solid var(--sc-red);border-radius:50%}

/* ---------- 11. akış diyagramı ------------------------------------------- */
.sc-diagram{display:flex;align-items:stretch;flex-wrap:wrap;gap:clamp(8px,.9vw,17px);
  margin-top:clamp(24px,2.2vw,42px)}
.sc-diagram__node{flex:1 1 200px;text-align:center;padding:clamp(18px,1.5vw,28px);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.sc-diagram__node h3{font-family:var(--isans);font-weight:700;color:#fff;
  font-size:clamp(14px,.94vw,18px);letter-spacing:.1em;text-transform:uppercase;
  line-height:1.25;margin:0 0 10px}
.sc-diagram__node p{font-family:var(--caslon);color:#C6D2E2;
  font-size:clamp(14px,.94vw,18px);line-height:1.4;margin:0}
.sc-diagram__node--hero{background:var(--sc-red);border-color:var(--sc-red)}
/* #FFE2E2 kırmızı zeminde 3.73 veriyordu; üstündeki h3 zaten beyaz, ikisi
   artık aynı tonda (beyaz / #DF3131 = 4.54). */
.sc-diagram__node--hero p{color:#fff}
.sc-diagram__arrow{flex:0 0 auto;display:flex;align-items:center;color:var(--sc-red-text);
  font-family:var(--isans);font-weight:700;font-size:clamp(16px,1.35vw,26px)}
.sc-band--dark .sc-diagram__arrow{color:var(--sc-red-text-dk)}

/* ---------- 12. rapor şeridi --------------------------------------------- */
.sc-report{margin-top:clamp(24px,2.2vw,42px);border:1px solid rgba(255,255,255,.22);
  padding:clamp(18px,1.5vw,30px)}
.sc-band--light .sc-report,.sc-band--white .sc-report{border-color:var(--sc-hair)}
.sc-report h3{font-family:var(--isans);font-weight:700;color:var(--sc-red-text);
  font-size:clamp(13px,.94vw,18px);letter-spacing:.12em;text-transform:uppercase;
  text-align:center;line-height:1.25;margin:0 0 clamp(12px,1.05vw,20px)}
.sc-report__steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(8px,.9vw,17px);font-family:var(--isans);font-weight:700;
  font-size:clamp(14px,1.04vw,20px);color:var(--sc-ink);line-height:1.3}
.sc-band--dark .sc-report__steps{color:#fff}
.sc-band--dark .sc-report h3{color:var(--sc-red-text-dk)}
.sc-report__steps i{font-style:normal;color:var(--sc-red-text)}
.sc-band--dark .sc-report__steps i{color:var(--sc-red-text-dk)}

/* ---------- 13. çapraz bağlantılar --------------------------------------- */
.sc-crosslinks h2{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(17px,1.35vw,26px);letter-spacing:.06em;text-transform:uppercase;
  line-height:1.2;margin:0 0 clamp(18px,1.6vw,30px)}
.sc-crosslinks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.15vw,22px)}
.sc-crosslinks__grid a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(13px,1.15vw,22px) clamp(15px,1.25vw,24px);
  border:1px solid var(--sc-hair);background:#fff;
  font-family:var(--caslon);color:var(--sc-ink);
  font-size:clamp(15px,1.04vw,20px);line-height:1.3;
  transition:border-color .18s ease,color .18s ease}
.sc-crosslinks__grid a:hover{border-color:var(--sc-red);color:var(--sc-red-text)}
.sc-crosslinks__grid a span{color:var(--sc-red);flex:0 0 auto}

/* ---------- 14. broşür ---------------------------------------------------- */
/* Dokunma hedefi (denetim B4): kutu 390px'te 21px yüksekliğindeydi; WCAG 2.5.8
   tabanı 24px, pratik öneri 44px. Dikey padding ile 44px'e çıkarıldı.
   Alt çizgi artık border-bottom DEĞİL ::after — border olsaydı padding onu
   metinden 14px aşağı iterdi. ::after, padding-bottom'un 5px üstünde durur,
   yani çizginin metne uzaklığı eskisiyle birebir aynı (9px = 14px - 5px).
   margin-top eklenen üst padding kadar azaltıldı: üstteki metinle arasındaki
   boşluk da değişmiyor. Görünüm aynı, hedef iki katından büyük. */
.sc-brochure{position:relative;display:inline-flex;align-items:center;gap:10px;
  margin-top:calc(clamp(18px,1.5vw,28px) - 14px);
  font-family:var(--isans);font-weight:700;font-size:clamp(13px,.83vw,15px);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  --sc-broch-line:rgba(255,255,255,.45);
  padding-block:14px;min-height:44px;
  transition:color .18s ease}
.sc-brochure::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;
  background:var(--sc-broch-line);transition:background .18s ease}
.sc-brochure:hover{color:var(--sc-red-text-dk);--sc-broch-line:var(--sc-red-text-dk)}
.sc-brochure svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sc-brochure--ink{color:var(--sc-red-text);--sc-broch-line:var(--sc-hair)}

/* ---------- 15. CTA uyarlaması ------------------------------------------- */
.schools-page .cta, .families-page .cta, .contact-page .cta, .home-page .cta, .legal-page .cta{padding:clamp(44px,3.9vw,75px) 0 clamp(36px,3.2vw,62px)}
.schools-page .cta h2, .families-page .cta h2, .contact-page .cta h2, .home-page .cta h2, .legal-page .cta h2{font-family:var(--caslon);font-weight:400;
  font-size:clamp(22px,2.05vw,40px);line-height:1.28;margin:0 0 clamp(13px,1.1vw,21px)}
.schools-page .cta p, .families-page .cta p, .contact-page .cta p, .home-page .cta p, .legal-page .cta p{font-family:var(--caslon);font-weight:400;color:#fff;
  font-size:clamp(15px,1.15vw,22px);line-height:1.35;max-width:74ch;
  margin:0 auto clamp(22px,1.9vw,36px)}
.schools-page .cta .btn-red, .families-page .cta .btn-red, .contact-page .cta .btn-red, .home-page .cta .btn-red, .legal-page .cta .btn-red{font-family:var(--isans);font-weight:700;
  font-size:clamp(14px,.94vw,17px);letter-spacing:.14em;padding:.95em 2.4em}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1040px){
  .sc-cards{grid-template-columns:repeat(2,1fr);gap:34px 28px}
  .sc-steps{grid-template-columns:repeat(3,1fr);gap:34px 22px}
  .sc-steps::before{display:none}
  .sc-tracks{grid-template-columns:1fr;gap:24px}
  .sc-crosslinks__grid{grid-template-columns:repeat(2,1fr)}
  .sc-lead__grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:900px){
  /* ≤900: bant kısalıyor (186px) ve eliptik boşluğun dikey yarıçapı da küçülüyor;
     ölçek merkezden +46px'te metne değiyordu (560px'te ±104 boşluğa karşı ±120
     metin, ölçüldü). Burada ölçek merkeze değil bandın ALT kenarına bağlanıyor,
     böylece ayrım dikey mesafeyle sağlanıyor ve boşluk maskesine ihtiyaç kalmıyor. */
  .sc-quote-band--scale{--sq-hole:linear-gradient(#000,#000)}
  .sc-quote-band--scale::before{background-position:center calc(100% - 30px)}
  .sc-quote-band--scale::after{background-position:center calc(100% - 30px), center calc(100% - 18px)}
  /* ≤900: bant dikine uzuyor (.sc-report__steps tek sütuna iniyor), kadran da
     küçülüp köşeye çekiliyor; halkalar başlığın altına inmesin diye maske
     eşiği yukarı alındı. */
  .sc-report-band::before{width:clamp(260px,62vw,420px);
    top:calc(-1 * clamp(70px,16vw,120px));inset-inline-end:calc(-1 * clamp(40px,10vw,80px));
    -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,rgba(0,0,0,0) 76%),
                       linear-gradient(180deg,#000 0 30%,rgba(0,0,0,0) 54%);
    mask-image:radial-gradient(circle at 50% 50%,#000 40%,rgba(0,0,0,0) 76%),
               linear-gradient(180deg,#000 0 30%,rgba(0,0,0,0) 54%)}
  .sc-report-band::after{width:clamp(180px,43vw,290px);
    top:calc(-1 * clamp(30px,7vw,54px));inset-inline-end:calc(-1 * clamp(4px,2vw,16px))}
  .sc-hero{min-height:0}
  .sc-hero__art::after{background:linear-gradient(180deg,rgba(14,26,43,.82) 0%,rgba(14,26,43,.66) 55%,rgba(14,26,43,.82) 100%)}
  .sc-split{grid-template-columns:1fr;gap:26px}
  .sc-split > div + div{padding-top:26px}
  .sc-split > div + div::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .sc-h2-split{grid-template-columns:1fr;gap:0}
  .sc-checklist{grid-template-columns:1fr}
  .sc-flow__item{flex:1 1 100%}
  .sc-flow__sep{transform:rotate(90deg)}
  .sc-diagram__arrow{flex:1 1 100%;justify-content:center;transform:rotate(90deg)}
  .sc-report__steps{flex-direction:column;gap:8px}
  .sc-report__steps i{transform:rotate(90deg)}
}
@media (max-width:560px){
  /* ≤560: 150px'lik taban ölçü telefonda alıntının üstüne biniyordu (390px'te
     34px çakışma, ölçüldü). İşaretler küçültülüp yanlardan köşelere alınıyor —
     böylece metni iki yandan sıkıştırmıyorlar. */
  .sc-quote-band--mark::before,.sc-quote-band--mark::after{font-size:clamp(88px,26vw,130px)}
  .sc-quote-band--mark::before{top:0;transform:translateY(-4%);inset-inline-start:6px}
  .sc-quote-band--mark::after{top:auto;bottom:0;transform:translateY(30%);inset-inline-end:6px}
  .sc-cards{grid-template-columns:1fr;gap:30px}
  .sc-steps{grid-template-columns:1fr;gap:28px}
  .sc-crosslinks__grid{grid-template-columns:1fr}
}

/* ---------- yasal metin sayfaları (gizlilik) ------------------------------
   Okuma için dar ölçü: uzun satır gözü yoruyor. 68ch, sürekli düzyazı için
   yaygın kabul gören üst sınır. */
/* Ölçü SARMALAYICIYA değil İÇERİĞE veriliyor: .sc-wrap'ın
   padding-inline'ı var ve box-sizing:border-box olduğu için max-width
   boşluğu da kapsıyordu — 68ch'lik kutunun içinde yalnızca 330px metin
   kalıyordu (ölçüldü). Çocuklara verilince boşluk korunuyor, ölçü
   gerçekten 68ch oluyor. */
.lg-wrap > * { max-width: 68ch; }
.lg-lede { font-size: 1.06rem; }
.lg-meta {
  margin: 4px 0 0; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sc-ink-3, #77706a);
}
.lg-taslak {
  margin: 22px 0 0; padding: 14px 16px; border-radius: 6px;
  background: #fff8e8; border: 1px solid #e8d9b0; color: #6b5720;
  font-size: .94rem; line-height: 1.6;
}
.lg-bolum { margin-top: 42px; }
.lg-h2 {
  font-size: 1.24rem; line-height: 1.35; margin: 0 0 12px;
  letter-spacing: -.01em;
}
.lg-list { margin-top: 14px; }
.lg-list li { margin-bottom: 8px; }

/* RTL: ölçü ve hizalama mantıksal özelliklerle zaten aynalanıyor. */