/* ============================================================================
   kit — "Tema Kiti" KÖPRÜ CSS'i.
   GÖRSEL DİL BURADA YAZILMAZ: boyama aktif kit temasının theme.css'inden gelir.
   Bu dosya yalnız (1) projeye özgü kabuk parçalarını (paylaşılan çekmece,
   topbar, footer grid, portal butonu) kit'in GARANTİ değişkenleriyle
   (--paper/--paper-2/--card/--ink/--ink-soft/--line/--hard/--radius/--radius-sm/
   --splash/--splash-ink/--font-head/--font-body) köprüler ve (2) SurfacePlanner
   yüzeyleri + section boşluğu gibi proje sözleşmelerini bağlar.
   ========================================================================== */

/* ---- Yüzeyler + section boşluğu (proje sözleşmesi) ---- */
#page-wrapper .section { padding-block: var(--ekid-sp, 64px); }
/* Hero dikey boşluğu = SÖZLEŞME değişkeni --ekid-hero-sp (= --ekid-sp ×
   heroFactor, constant.dart). Tek yerden ayarlanır ve breakpoint'leri --ekid-sp
   üzerinden bedavaya izler (masaüstü ~158 / tablet ~106 / mobil ~62).
   ÇİFT SAYIM YOK: kit header (`.nav`) `position:sticky` + AKISTA'dır (yüzen/fixed
   DEĞİL) → hero'nun üstünde akışta durur, üzerine binmez; bu yüzden formül
   fixed-header hali (`headerh + hero-sp`) DEĞİL, sade `hero-sp`'dir (header
   yüksekliği payı gerekmez). Böylece görünür üst boşluk = alt boşluk (simetrik). Tema
   `.hero` padding'ini (+responsive üst-pay override'larını) #page-wrapper
   özgüllüğüyle ezer. */
#page-wrapper .hero { padding-block: var(--ekid-hero-sp, 96px); }
/* Alt sayfada page-head'i izleyen İLK section: tam section ritmi (--ekid-sp)
   başlık bandıyla içerik arasında boş bir bant gibi okunuyordu — üst payı
   yarıya indir (masaüstü 72 / tablet 48 / mobil 28; calc breakpoint'leri
   bedavaya izler). Bölümler ARASI ritim ve zebra yüzeyleri etkilenmez. */
#page-wrapper .page-head + .section { padding-top: calc(var(--ekid-sp, 64px) * .5); }
.kit-tint2 { background: color-mix(in srgb, var(--splash) 9%, var(--paper)); }

/* Alt sayfa başlık bandı (.page-head) dikey boşluğu — TEK ANAHTARLA kapatılabilir.
   Section boşluğu (--ekid-sp) ile aynı mantık: kit köprüsü, temaların kendi
   .page-head padding'ini (#page-wrapper özgüllüğüyle) birleştirip tek değişkene
   bağlar. --ekid-ph-sp: 1 = açık (varsayılan), 0 = kapalı → boşluk 0px.
   Kapatmak için page-head'e is-flush ekle (KitBuild.pageHeader(flush:true)) ya
   da bir kapsayıcıya --ekid-ph-sp:0 ver. */
#page-wrapper .page-head {
  padding-block: calc(64px * var(--ekid-ph-sp, 1)) calc(40px * var(--ekid-ph-sp, 1));
}
#page-wrapper .page-head.is-flush { --ekid-ph-sp: 0; }
/* Flush bandda üst padding 0 olduğundan kırıntı yolu navbar'a yapışıyordu;
   bandı geri açmadan yalnız breadcrumb'a küçük bir nefes payı ver. */
#page-wrapper .page-head.is-flush .kit-crumbs { padding-top: 24px; }
/* Kırıntı yolu: "← Anasayfa / <kategori>" tek satır. Link (.crumb) temadan
   boyanır; ayraç ve geçerli adım burada garanti token'larla — kategori adı
   linkle aynı ölçüde ama daha soluk (tıklanmaz olduğu belli olsun). */
.kit-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kit-crumb-sep { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.kit-crumb-cur { font-weight: 800; font-size: .9rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }
@media (max-width: 1024px) {
  #page-wrapper .page-head { padding-block: calc(56px * var(--ekid-ph-sp, 1)) calc(40px * var(--ekid-ph-sp, 1)); }
}
/* NOT: kit bar nav modunda (html[data-nav="bar"], bkz. shell.dart) sekmeler
   barın İÇİNDEDİR; eski asılı-raf ek payı (.kit-first +56px) kaldırıldı — ilk
   section standart boşluğu alır. `.kit-first` sınıfı da artık üretilmiyor
   (layout.dart'tan çıkarıldı). */

.kit-center { text-align: center; margin-top: 26px; }

/* Ana sayfa liste bölümlerinin dikey ritmi — TUTARLI: başlık→kartlar 34px.
   Haber + Etkinlik (.post-list) ve Program (.wcard-grid) aynı üst boşluğu
   paylaşır (tema varsayılanları farklıydı: post-list 0, wcard-grid 18px →
   kartlar başlığa yapışıyordu). Kart→buton boşluğu hepsinde .kit-center'dan
   gelir (26px). Ek olarak tema .post-list'i liste sayfası için 90px alt pay
   taşıyor (footer öncesi nefes); ana sayfada butonu aşırı aşağı ittiği için
   .kit-news ve .kit-events'te sıfırlanır. Grid+detay listeleri bu wrapper'ların
   (.kit-news/.kit-events/.kit-programs) DIŞINDA olduğu için etkilenmez. */
.kit-news .post-list,
.kit-events .post-list,
.kit-programs .wcard-grid { margin-top: 34px; }
.kit-news .post-list,
.kit-events .post-list { padding-bottom: 0; }

/* ---- Nav köprüsü (bar modu) ---- */
/* Yerleşim kit'ten: html[data-nav="bar"] .nav-links barın içinde sağa yaslı
   (position:static; margin-left:auto). min-width:0 şart (flex item'ın içeriğe
   kilitlenen min-width:auto'sunu açar) ki sekmeler logo/CTA/burger'ı itmesin.

   OVERFLOW YOK (bilerek): kit kit nav'ı iki nedenle overflow'la uyumsuz —
   (1) tema sekmeleri kutu DIŞINA taşan süsler çizer (şeker uçları / hover
   kalkması) ve overflow onları kırpar; (2) kit'in kategori DROPDOWN panelini
   (`.nav-menu`) konumlandiran ExtrasController, `.nav-links` bir scroll kabi
   olunca yanlış (0,0) konumlar. Bu yüzden overflow YOK. ≤5 kategori kuralıyla
   sekmeler zaten sığar; taşarsa görünür taşar (nadir). */
.nav-links { flex-wrap: nowrap; min-width: 0; }
.nav-links > a { flex: 0 0 auto; }
.kit-logo-img { height: 44px; width: auto; display: block; }
.logo.ekid-brand-name { display: inline-flex; align-items: center; gap: 10px; }
/* Telefon CTA: yapı ≤700px'te .nav-cta'yı gizler; mobilde burger yanında
   ikon-hap olarak geri açılır (navbar sözleşmesi: mobilde telefon görünür). */
@media (max-width: 700px) {
  .nav .nav-cta[data-navcall] { display: inline-flex; align-items: center; }
  .nav .nav-cta[data-navcall] .kit-call-num { display: none; }
  /* Portal mobilde ÇEKMECE içindedir (navbar sözleşmesi) — header ikonu gizle. */
  .nav .kit-portal { display: none; }
}
/* Portal ikon-butonu (masaüstü header) — kit .btn/.btn-ghost görünümünü kullanır;
   burada yalnız ikon-only kare ölçüsünü ayarlarız (nav-cta metin padding'ini ezer). */
.kit-portal {
  width: 42px; height: 42px; padding: 0;
}
.kit-portal svg { width: 20px; height: 20px; }

/* ---- Fotoğraf çerçevesi (tema token'larıyla) ---- */
.kit-photo {
  display: block; overflow: hidden; position: relative;
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--hard); background: var(--paper-2);
}
.kit-photo .kit-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kit-ph { display: flex; align-items: center; justify-content: center; min-height: 220px; font-size: 42px; }
/* Hakkımızda fotoğrafı = kit .wphoto (çerçevesiz dünya fotoğrafı; kesim/süs
   temadan). Split kolonunda kendi dış boşluğu gereksiz; oran sabitlenir. Geniş
   ekranda kolon çok büyüyünce foto abartılı büyümesin: üst sınır + kolonda
   ortalanır (ters düzende de sağ kolona yaslanmaz). */
.kit-about .split-art { display: flex; justify-content: center; }
.kit-about .split-art .wphoto { margin: 0; width: 100%; max-width: 440px; }
.kit-about .split-art .wphoto img { aspect-ratio: 4 / 3; }
/* Hakkımızda DETAY sayfasında uzun tanıtım (ab2_c) split ile aynı section'ın
   içinde akar; split'ten makul (ayrı-section padding'i değil) bir boşlukla ayrılır. */
.kit-about .about-detail { margin-top: 56px; }

/* ---- Hero köprüsü: kit .hero zemin/dekoru + kit fade slider ---- */
.kit-hs { position: relative; }
.kit-hs-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .6s ease; z-index: 0;
}
.kit-hs-slide.is-on { position: relative; opacity: 1; pointer-events: auto; z-index: 1; }
.kit-hero .hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 38px; align-items: center; }
/* Zebra: tek indeksli slaytlar ters (foto sol / metin sağ). */
.kit-hero .hero-in.kit-hs-rev { grid-template-columns: 1fr 1.1fr; }
.kit-hero .hero-in.kit-hs-rev .hero-copy { order: 2; }
.kit-hero .hero-in.kit-hs-rev .kit-hero-media { order: 1; }
/* Hero 3'lu foto kolaji = kit `.gallery` (tema `.gallery a`'yi kendi dunyasinin
   foto kartina boyar). Gallery izgarasini kolaj duzenine ez: buyuk ana foto +
   altinda iki kucuk. Tema rotasyon/kose/leke suslerine dokunma. */
.kit-hero-gallery {
  display: grid; margin: 0; gap: 14px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "main main" "sm1 sm2";
  /* Tema .gallery MOZAİĞİ satırları sabitler (grid-auto-rows: clamp(...)) ve
     `height:100%`'lü fotolar o yüksekliğe KİLİTLENİR — img aspect-ratio'su
     hiç işlemez. Hero galerisinde satırlar İÇERİKTEN boyutlanır: yükseklik
     kontrolü aşağıdaki düzen-bazlı ÖĞE aspect-ratio kurallarındadır. */
  grid-template-rows: auto auto;
  grid-auto-rows: auto;
}
/* Çerçevesiz ilk foto (kit .wphoto) grid hücresine tam otursun: token'ın
   varsayılan 18px dikey boşluğunu kaldır, kolaj hizası bozulmasın. Ayrıca
   `.gallery img` çerçevesi wphoto'ya sızmasın (frameless = çerçevesiz). */
.kit-hero-gallery .wphoto { margin: 0; }
.kit-hero-gallery .wphoto img { border: 0; }
.kit-hero-gallery > :nth-child(1) { grid-area: main; }
.kit-hero-gallery > :nth-child(2) { grid-area: sm1; }
.kit-hero-gallery > :nth-child(3) { grid-area: sm2; }
.kit-hero-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tema `.gallery a:hover { animation: ... }` süsleri (b-box-hop / c1-float /
   d1-swing) hero galerisinde KAPALI: animasyon, transform'u ÖZGÜLLÜKTEN
   BAĞIMSIZ ezdiğinden --fan-t/--cas-t/--pos-t kaydırması düşer, kenar kart
   imlecin altından merkeze sıçrar → :hover kopar → kart geri gelir → titreme
   döngüsü. Hero'da yerleşim transform'da yaşar; hover koreografisi yalnız
   aşağıdaki düzen-bazlı kit kurallarından gelir. */
.gallery.kit-hero-gallery > a:hover { animation: none; }
/* KOLAJ foto oranları — ÖĞEDE (figure/a), img'de değil: öğe yüksekliği orandan
   gelir, img `height:100%` ile doldurur (tema kart çerçevesi dahil). Değerler
   temanın eski sabit-satır görünümünü referans alır: küçükler 9/5 ≈ eski satır
   yüksekliği; ana foto 20/7 ≈ eskisinin %30 yükseltilmişi. */
.kit-hero-gallery.is-collage > :nth-child(1) { aspect-ratio: 11 / 5; } /* 20/7'nin %30 yükseltilmişi */
.kit-hero-gallery.is-collage > :nth-child(2),
.kit-hero-gallery.is-collage > :nth-child(3) { aspect-ratio: 9 / 5; }
/* Bos slot yer tutucu galeri icinde de kart gibi dursun (kolajda ozgullugu
   dusuk fallback: is-collage OGE oran kurallari onu ezer). */
.kit-hero-gallery .kit-hero-ph { aspect-ratio: 5 / 4; }

/* ---- Hero YIĞIN düzeni (ms1_kolaj=false): kolaj gridi yerine üst üste eğik
   3 foto kartı ("polaroid yığını"). Üç kart da aynı hücrede yığılır, farklı
   döndürme + kaydırma ile fanlanır; boyama yine temanın `.gallery a` kartından
   gelir. Debug panelindeki "Slider foto düzeni: Yığın" ile açılır. ---- */
.kit-hero-gallery.is-stack {
  display: grid;
  /* Temanın .gallery kolonlarını (auto-fill minmax) EZ: tek hücre — yoksa
     kartlar ilk kolon hücresine sıkışıp minicik + sola yapışık kalır. */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "stack";
  place-items: center;
  gap: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  margin-top: 0;
  /* Yelpaze taşmaları (döndürme + kaydırma) için dikey alanı baştan ayır */
  aspect-ratio: 10 / 9;
}
.kit-hero-gallery.is-stack > * {
  grid-area: stack;
  width: 50%; /* eski 56'nın ~%10 küçüğü */
  transition: transform .35s ease;
}
/* Yelpaze: iki destek kartı arkada sol/sağ omuzdan bakar, ÖNDEKİ kart daha
   büyük + hafif eğik (hiyerarşi). Kaydırma kart-başına `--fan-t` değişkeninde:
   hover da AYNI kaydırmayı korur (kart imlecin altından kaçmaz — kaçarsa
   :hover düşer, kart geri gelir ve titreme döngüsü oluşur). */
.kit-hero-gallery.is-stack > :nth-child(1) { --fan-t: translate(-46%, -10%); transform: var(--fan-t) rotate(-12deg); z-index: 1; }
.kit-hero-gallery.is-stack > :nth-child(2) { --fan-t: translate(46%, -6%); transform: var(--fan-t) rotate(10deg); z-index: 2; }
.kit-hero-gallery.is-stack > :nth-child(3) { --fan-t: translate(0, 12%); width: 59%; /* eski 66'nın ~%10 küçüğü */ transform: var(--fan-t) rotate(-2.5deg); z-index: 3; }
/* Yığında tüm kartlar tekdüze oran (kolaj 16/10 + 5/4 oranlarını ezer) */
.kit-hero-gallery.is-stack > * img { aspect-ratio: 4 / 5; height: auto; }
/* Öne getir: üstüne gelinen kart YERİNDE düzelir + büyür + öne çıkar */
.kit-hero-gallery.is-stack > *:hover { transform: var(--fan-t) rotate(0deg) scale(1.06); z-index: 4; }

/* ---- Hero VİTRİN düzeni (ms1_duzen=vitrin): üç dikey pano yan yana, ORTADAKİ
   YÜKSEK (vitrin/podyum ritmi — kenarlar margin-top ile iner). Ofset transform
   değil MARGIN'dir ki kap yüksekliği hesaba katsın (translate akışı büyütmez).
   Boyama yine temanın `.gallery a` kartından; hover kartı raftan kaldırır. ---- */
.kit-hero-gallery.is-showcase {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "v1 v2 v3";
  gap: 16px;
  align-items: start;
  /* Panolar %5 büyük: kap kolondan simetrik taşar (küçük, güvenli taşma) */
  width: 105%;
  margin-inline: -2.5%;
}
.kit-hero-gallery.is-showcase > :nth-child(1) { grid-area: v1; margin-top: 38px; }
.kit-hero-gallery.is-showcase > :nth-child(2) { grid-area: v2; }
.kit-hero-gallery.is-showcase > :nth-child(3) { grid-area: v3; margin-top: 38px; }
.kit-hero-gallery.is-showcase > * { transition: transform .35s ease; }
.kit-hero-gallery.is-showcase > *:hover { transform: translateY(-10px); }
/* Üç pano da tekdüze dikey oran (kolajın 16/10 + 5/4 oranlarını ezer) */
.kit-hero-gallery.is-showcase > * img { aspect-ratio: 3 / 4; height: auto; }

/* ---- Hero SAHNE düzeni (ms1_duzen=sahne): dergi/editoryal asimetri — solda
   İKİ SATIRI KAPLAYAN büyük dikey foto (sahnedeki başrol), sağda iki yatay
   destek karesi. Kolajın tersine baskınlık yatay değil DİKEYDİR. Satır
   yükseklikleri sağ kartlardan gelir; ana foto oran yerine %100 boyla iki
   satırı doldurur (grid stretch → a yüksekliği belirli, img içini kaplar). ---- */
.kit-hero-gallery.is-spot {
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas: "main sm1" "main sm2";
}
.kit-hero-gallery.is-spot > :nth-child(1) img { aspect-ratio: auto; height: 100%; }
.kit-hero-gallery.is-spot > :nth-child(2) img,
.kit-hero-gallery.is-spot > :nth-child(3) img { aspect-ratio: 16 / 11; }

/* ---- Hero MERDİVEN düzeni (ms1_duzen=merdiven): masaya dizilmiş fotoğraflar
   gibi sol-üstten sağ-alta ÇAPRAZ BASAMAK bindirmesi; öndeki kart en altta
   (okuma yönü: arkadan öne). Yığının (is-stack) merkezî yelpazesinden farkı:
   dönüş belli belirsizdir, derinlik köşegen boyunca kurulur. Kaydırma yığındaki
   gibi kart-başına `--cas-t`'de tutulur (hover aynı kaydırmayı korur ki kart
   imlecin altından kaçıp titreme döngüsü oluşturmasın). ---- */
.kit-hero-gallery.is-cascade {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "cas";
  place-items: center;
  gap: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  /* Köşegen taşmalar (±%40 / ±%36 kaydırma) için dikey alanı baştan ayır */
  aspect-ratio: 10 / 7;
}
.kit-hero-gallery.is-cascade > * {
  grid-area: cas;
  width: 54%;
  transition: transform .35s ease;
}
.kit-hero-gallery.is-cascade > :nth-child(1) { --cas-t: translate(-40%, -36%); transform: var(--cas-t) rotate(-2deg); z-index: 1; }
.kit-hero-gallery.is-cascade > :nth-child(2) { --cas-t: translate(0, 0); transform: var(--cas-t) rotate(1.5deg); z-index: 2; }
.kit-hero-gallery.is-cascade > :nth-child(3) { --cas-t: translate(40%, 36%); transform: var(--cas-t) rotate(-1deg); z-index: 3; }
/* Basamaklarda tekdüze yatay oran (kolaj oranlarını ezer) */
.kit-hero-gallery.is-cascade > * img { aspect-ratio: 4 / 3; height: auto; }
/* Öne getir: üstüne gelinen basamak YERİNDE düzelir + büyür + öne çıkar */
.kit-hero-gallery.is-cascade > *:hover { transform: var(--cas-t) rotate(0deg) scale(1.06); z-index: 4; }

/* ---- Hero İP düzeni (ms1_duzen=ip): çamaşır ipine asılı fotoğraflar — kap
   ::before'u sarkan ipi çizer (ortada en alçak; alt kenarlıklı kutu + alt
   köşe radius'u kavisi verir; temalar .gallery kabına pseudo çizmediğinden
   çakışmaz). Fotolar ipin kavisini izleyen yüksekliklerde (kenarlar yüksek,
   orta alçak) asılı; asılma noktasından (üst-orta) hafif salınım eğimleri. ---- */
.kit-hero-gallery.is-line {
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "i1 i2 i3";
  gap: 14px;
  align-items: start;
}
.kit-hero-gallery.is-line::before {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 0;
  height: 40px;
  border-bottom: 3px solid color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 0 0 50% 50% / 0 0 40px 40px;
  pointer-events: none;
}
.kit-hero-gallery.is-line > * { transform-origin: 50% 0; transition: transform .35s ease; }
.kit-hero-gallery.is-line > :nth-child(1) { grid-area: i1; margin-top: 10px; transform: rotate(-2.5deg); }
.kit-hero-gallery.is-line > :nth-child(2) { grid-area: i2; margin-top: 38px; transform: rotate(1.5deg); }
.kit-hero-gallery.is-line > :nth-child(3) { grid-area: i3; margin-top: 14px; transform: rotate(-1.5deg); }
/* Rüzgâr durur: üstüne gelinen foto asılı durduğu yerde düzelir */
.kit-hero-gallery.is-line > *:hover { transform: rotate(0deg); }
/* İpte tekdüze dikey oran (kolaj oranlarını ezer) */
.kit-hero-gallery.is-line > * img { aspect-ratio: 3 / 4; height: auto; }

/* ---- Hero AFİŞ düzeni (ms1_duzen=afis): tam genişlik BÜYÜK ana foto + alt
   köşelerine iliştirilmiş iki eğik mini kart (afişe raptiyelenmiş kartpostal).
   Mini kartların alt taşması translate ile (akışı büyütmez) → kaba
   padding-bottom ile yer ayrılır. Kaydırma kart-başına `--pos-t`'de tutulur
   (hover aynı kaydırmayı korur). ---- */
.kit-hero-gallery.is-poster {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "post";
  gap: 0;
  padding-bottom: 12%;
}
.kit-hero-gallery.is-poster > * { grid-area: post; transition: transform .35s ease; }
.kit-hero-gallery.is-poster > :nth-child(1) { width: 100%; z-index: 1; }
.kit-hero-gallery.is-poster > :nth-child(1) img { aspect-ratio: 16 / 10; }
.kit-hero-gallery.is-poster > :nth-child(2),
.kit-hero-gallery.is-poster > :nth-child(3) { width: 34%; align-self: end; }
.kit-hero-gallery.is-poster > :nth-child(2) img,
.kit-hero-gallery.is-poster > :nth-child(3) img { aspect-ratio: 4 / 3; }
.kit-hero-gallery.is-poster > :nth-child(2) { justify-self: start; --pos-t: translate(-6%, 42%); transform: var(--pos-t) rotate(-4deg); z-index: 2; }
.kit-hero-gallery.is-poster > :nth-child(3) { justify-self: end; --pos-t: translate(6%, 34%); transform: var(--pos-t) rotate(3deg); z-index: 3; }
/* Üstüne gelinen mini kart YERİNDE düzelir + büyür */
.kit-hero-gallery.is-poster > :nth-child(2):hover,
.kit-hero-gallery.is-poster > :nth-child(3):hover { transform: var(--pos-t) rotate(0deg) scale(1.06); z-index: 4; }
/* Başlığın son satırındaki vurgulu kelime (em.squiggle) altına kendi dalgasını
   çizer; bu dalga başlığın kutusundan ~0.4em taşar. Başlık alt boşluğu 0
   olduğundan dalga doğrudan açıklamanın ilk satırının üzerine biniyordu.
   Lead'e üst boşluk vererek dalgaya yer açılır (tasarım-bağımsız düzeltme). */
/* Renk currentColor'dan turetilir (sabit --ink DEGIL): normal hero'da hero-copy
   --ink'i miras alir, .hero.is-bold'da tema sozlesmesi geregi --splash-ink'i
   (bkz. theme.css `.hero.is-bold { color: var(--splash-ink) }`). Sabit --ink
   koyu bold zeminde lead'i okunmaz yapiyordu — tasarim-bagimsiz duzeltme. */
.kit-hero__lead { margin: 1.6rem 0 22px; font-size: 1.05rem; line-height: 1.6; color: color-mix(in srgb, currentColor 70%, transparent); max-width: 46ch; }
.kit-hs-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; position: relative; z-index: 2; }
@media (max-width: 900px) {
  .kit-hero .hero-in { grid-template-columns: 1fr; gap: 22px; }
  .kit-hero .hero-in.kit-hs-rev { grid-template-columns: 1fr; }
  /* Ters slayt mobilde: yazı üstte, foto altta (doğal DOM sırasına dön). */
  .kit-hero .hero-in.kit-hs-rev .hero-copy { order: 0; }
  .kit-hero .hero-in.kit-hs-rev .kit-hero-media { order: 0; }
  .kit-hero-media { max-width: 520px; margin-inline: auto; width: 100%; }
  .kit-hero__lead { margin-inline: auto; }
  /* Yığın mobilde: yelpazeyi daralt, kartlar viewport'tan taşmasın.
     Yalnız --fan-t ezilir; transform (ve hover'ı) temel kuraldan gelir. */
  .kit-hero-gallery.is-stack > :nth-child(1) { --fan-t: translate(-32%, -8%); transform: var(--fan-t) rotate(-10deg); }
  .kit-hero-gallery.is-stack > :nth-child(2) { --fan-t: translate(32%, -5%); transform: var(--fan-t) rotate(8deg); }
  /* Vitrin mobilde: dar kolonlarda podyum ofsetini ve nefesi küçült */
  .kit-hero-gallery.is-showcase { gap: 10px; }
  .kit-hero-gallery.is-showcase > :nth-child(1),
  .kit-hero-gallery.is-showcase > :nth-child(3) { margin-top: 22px; }
  /* Merdiven mobilde: köşegeni daralt, basamaklar viewport'tan taşmasın */
  .kit-hero-gallery.is-cascade > :nth-child(1) { --cas-t: translate(-34%, -32%); transform: var(--cas-t) rotate(-2deg); }
  .kit-hero-gallery.is-cascade > :nth-child(3) { --cas-t: translate(34%, 32%); transform: var(--cas-t) rotate(-1deg); }
  /* İp mobilde: dar kolonlarda nefes ve sarkma küçülür */
  .kit-hero-gallery.is-line { gap: 10px; }
  .kit-hero-gallery.is-line > :nth-child(2) { margin-top: 30px; }
}

/* ---- Deste: fotoğraflı kart sahnesi ---- */
.fcard .kit-scene-photo { padding: 0; }
.fcard .kit-scene-photo .kit-photo { width: 100%; height: 100%; box-shadow: none; border-radius: calc(var(--radius-sm, 10px)); }

/* Hizmetler destesi (.kit-services) masaüstü sütun sayısı. Tema .deck-stack'i
   sabit 3 sütun kullanıyor; 4 kartlı bölümde 4. kart alt satıra kayıyordu.
   4 kart VARSA (:has 4. .fcard) masaüstünde 4 sütuna geç. min-width:981 şart:
   ≤980px mobil kaydırmalı deste kırılımının içine girme (o kırılım tek sütun/
   yığın kullanır). 1-3 kartlı bölümler tema varsayılanını (3 sütun) korur. */
@media (min-width: 981px) {
  .kit-services .deck-stack:has(.fcard:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

/* Ana sayfa kadro bölümü (.kit-teachers) masaüstünde 4 öğretmeni TEK SATIRDA,
   eşit sütunlarla göster. Tema .members auto-fill kullanıyor → 4 kart tek satıra
   sığsa da sağda boş track bırakıp sola yaslıyordu. 4 kart VARSA (:has 4. .member)
   4 eşit sütuna geç. min-width:981 → mobil auto-fill akışına dokunma. Tüm kadro
   (grid) sayfası .kit-teachers DIŞINDA olduğu için etkilenmez (tüm kadro auto-fill
   akışıyla görünür). Ana sayfada zaten .take(4) ile en fazla 4 kart var. */
@media (min-width: 981px) {
  .kit-teachers .members:has(.member:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Avatar içinde gerçek fotoğraf ---- */
.avatar.kit-avatar-img { overflow: hidden; padding: 0; }
.avatar.kit-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---- Kadromuz = kit .members / .member.has-photo (polaroid) ----
   Foto oranı + çerçeve dili kit temasından gelir (.member-photo); burada yalnız
   az kişide ızgara ortalanır (sağa kaymasın). */
.kit-teacher-grid { justify-content: center; }

/* ---- İletişim bilgi listesi ---- */
.kit-contact-info { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.kit-contact-info li { display: flex; align-items: flex-start; gap: 10px; }
.kit-contact-info a { color: inherit; }

/* Kart bağlantıları <a> olduğu için tarayıcı varsayılanı alt çizgi getiriyor;
   kart içi metinler (tarih/etiket, "Devamını oku") altı çizili görünmesin. */
.wcard { text-decoration: none; }
.kit-ci-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm, 10px);
  border: 2px solid var(--ink); background: var(--card); color: var(--splash);
  box-shadow: var(--hard-sm);
}
.kit-ci-ico .ekid-contact-ico { width: 16px; height: 16px; }

/* ---- CTA bandı medya düzeni ---- */
.kit-cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; text-align: left; }
.kit-cta-media .kit-photo { aspect-ratio: 4 / 3; }
/* CTA bandı görsel+metin (grid) düzeninde metin SOLA yaslı; buton da metnin sol
   kenarıyla hizalansın. Tema `.cta-actions`'ı `justify-content:center` yapar —
   bu yalnız görselsiz/merkezli düzende doğru; grid'de butonu metinden ayırıyor.
   Ayrıca başlıktan makul boşluk (üstle mesafe tema kuralına bırakılmamış). */
.kit-cta-grid .cta-actions { justify-content: flex-start; margin-top: 24px; }
@media (max-width: 900px) { .kit-cta-grid { grid-template-columns: 1fr; text-align: center; } .kit-cta-grid .cta-actions { justify-content: center; } }

/* ---- Harita ---- */
.kit-map iframe { border: 0; }

/* ---- Galeri sayfası blokları ---- */
.kit-gal-block + .kit-gal-block { margin-top: 40px; }

/* ---- Alt sayfa detay makalesi (.post) ---- */
/* .post'u TÜM detay sayfaları aynı bağlamda kullanır: page-head'li alt sayfada
   section'ın ilk bloğu (Duyuru/Etkinlik/Program detayı + Genel sayfa). Temanın
   .post üst payı (56-84px) section ritmiyle (144px) üst üste binip page-head ile
   içerik arasında dev boşluk bırakıyordu — üst payı kaldır, section ritmi tek
   başına yeter. Alt pay (50px) kalır: ilgili-içerik bloğu öncesi nefes. */
#page-wrapper .section .post { padding-top: 0; }

/* ---- Genel sayfa (Common1, /sayfa/<slug>) ---- */
/* Alt pay da gereksiz: makaleyi ilgili blok değil galeri izler, boşluğu
   aşağıdaki .gallery margin'i verir. */
.kit-common .post { padding-bottom: 0; }
/* Kapakta KIRPMA YOK (duyuru detayının cover'ından farklı — genel sayfaya afiş/
   belge gibi tamamı görünmesi gereken görseller yüklenebilir): genişlik dayatması
   kaldırılır, yükseklik tema değerinde sabit kalır (340px / ≤700px'te 210px),
   contain oranı korur. Çerçeve (fit-content) fotoğrafa sarılır, metinle SOLDAN
   hizalıdır; kolonu aşan yatay fotoğrafta max-width kırpmadan küçültür. */
.kit-common .post-cover-lg { width: fit-content; max-width: 100%; }
.kit-common .post-cover-lg img { width: auto; max-width: 100%; height: 340px; object-fit: contain; }
@media (max-width: 700px) {
  .kit-common .post-cover-lg img { height: 210px; }
}
/* Makale sonrası foto galerisi metne yapışmasın (ayrı bir blok gibi nefes alsın). */
.kit-common .post + .gallery { margin-top: 44px; }

/* ---- Footer: kit .footer zemini + okul kolonları (d9 yerleşimi) ----
   Fotoğraflar üstte ortalanmış yatay şerit; altta 3 kolon marka+linkler+iletişim. */
.footer .kit-footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; align-items: start; text-align: left;
}
.kit-fcol h4 { margin: 0 0 12px; font-family: var(--font-head); }
.kit-fcol a { color: inherit; }
/* Galeri fotoğrafları = üst yatay şerit (kolon değil): ortalanmış, kit
   token'larıyla çerçeveli minik kareler. */
.kit-foot-photos {
  display: flex !important; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin: 0 0 40px;
}
.kit-foot-photos a {
  display: block; width: 96px; border-radius: var(--radius-sm, 10px);
  overflow: hidden; border: 2px solid var(--line);
}
.kit-foot-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 900px) { .footer .kit-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 620px) { .footer .kit-footer-grid { grid-template-columns: 1fr; } }
.kit-foot-contact .ekid-contact__row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.kit-foot-contact .ekid-contact-ico { width: 15px; height: 15px; margin-top: 3px; }
.footer .footer-copy { margin-top: 26px; }

/* ============================================================================
   PAYLAŞILAN MOBİL ÇEKMECE (.mobile-nav__*) — davranış web/shared/drawer.js;
   görünüm tamamen kit garanti değişkenlerinden.
   ========================================================================== */
/* drawer.js açılışta <body>'ye `.locked` ekler (scroll kilidi). AMA kit teması
   `.locked`'i BAŞKA amaçla tanımlar: form-alanı "kilitli" göstergesi
   (`opacity:.6` + gri + 🔒 `::after`). Yalnız kit kit temasını yüklediği için
   drawer açılınca body — ve içindeki drawer — soluklaşıp köşeye 🔒 çıkıyordu.
   `body.locked`'ı (özgüllük `.locked`'ten yüksek + sonra yüklenir) nötrle:
   yalnız scroll kilidi kalsın, kit'in görsel "kilitli" efektleri gitsin. */
body.locked {
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
body.locked::after { content: none; }

.mobile-nav__wrapper { position: fixed; inset: 0; z-index: 1000; pointer-events: none; visibility: hidden; }
.mobile-nav__wrapper.expanded { pointer-events: auto; visibility: visible; }

.mobile-nav__overlay {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0; transition: opacity .28s ease;
  z-index: 1;   /* AÇIK: barrier ARKADA — panelin altında (sirayla degil kesin) */
}
.mobile-nav__wrapper.expanded .mobile-nav__overlay { opacity: 1; }

.mobile-nav__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(84vw, 340px);
  z-index: 2;   /* AÇIK: panel ONDE — overlay onu soluklastirmasin */
  display: flex; flex-direction: column; gap: 18px;
  background: var(--paper); color: var(--ink);
  border-left: 2px solid var(--ink); padding: 20px 22px;
  transform: translateX(102%); transition: transform .3s cubic-bezier(.25, .8, .3, 1);
  overflow-y: auto;
}
.mobile-nav__wrapper.expanded .mobile-nav__panel { transform: none; }

.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-nav__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobile-nav__logo img { height: 42px; width: auto; display: block; }
.mobile-nav__name { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }
.mobile-nav__close {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-sm, 10px);
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 17px; cursor: pointer;
}

.mobile-nav__nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__link {
  display: block; padding: 11px 12px; border-radius: var(--radius-sm, 10px);
  color: var(--ink); text-decoration: none; font-family: var(--font-head);
  font-weight: 600; cursor: pointer; border: 2px solid transparent;
}
.mobile-nav__link:hover { background: var(--paper-2); border-color: var(--line); }

.mobile-nav__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.mobile-nav__actions { display: flex; flex-direction: column; gap: 10px; }
.mobile-nav__portal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: var(--radius-sm, 10px); cursor: pointer;
  border: 2px solid var(--ink); background: var(--splash); color: var(--splash-ink);
  font-family: var(--font-head); font-weight: 700; box-shadow: var(--hard-sm);
}
.mobile-nav__portal-ico { display: inline-flex; }
.mobile-nav__phone {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: var(--radius-sm, 10px);
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  text-decoration: none; font-weight: 700;
}
.mobile-nav__social { display: flex; gap: 12px; }
.mobile-nav__social-link { color: var(--ink); display: inline-flex; }
.mobile-nav__social-link .ekid-social-ico { width: 20px; height: 20px; }