/* ==========================================================================
   ekid — paylasilan navigation YERLESIM duğmesi (tasarim-bagimsiz)
   --------------------------------------------------------------------------
   GORUNUM (renk / font / sekil / golge / KENAR BOSLUGU) tasarima ozgu kalir.
   Burada TEK sey merkezilesir: nav kabinin GENISLIK TAVANI.

   Sozlesme:
   - Bir tasarim, header icindeki nav container `<div>`'ine (kendi `.dN-wrap` /
     `.dN-container` sinifinin YANINA) `ekid-navbar` sinifini ekler.
   - Bu dosya `cssHrefs`'te tasarim CSS'inden SONRA yuklenir → esit-ozgullukte
     (`.ekid-navbar` vs `.dN-wrap`, ikisi de tek sinif) sonra yuklenen kazanir;
     compound selector / !important gerekmez.
   - Padding'e (gutter) DOKUNULMAZ → her tasarim kendi nefes payini korur.

   Varsayilan `none` = nav ekran genisligi kadar. Bir tasarim kendi tavanini
   isterse kendi kok scope'unda ezer:  .dN-header { --ekid-nav-maxw: 1180px; }
   TUMUNU birden degistirmek icin: asagidaki tek satiri degistir.
   ========================================================================== */
:root {
  --ekid-nav-maxw: none;   /* nav container genislik tavani; none = ekran kadar */
}

.ekid-navbar {
  width: 100%;
  max-width: var(--ekid-nav-maxw);
  margin-inline: auto;     /* bir tavana takilinca ortalar; none'da etkisiz */
}

/* Okul adi logonun YANINDA metin (schoolInfo.logoHasName == false; ad logoda
   degil, logo ikon/sembol). Brand kabinin flex kardesidir. :where() ile SIFIR
   ozgullak -> her tasarim kendi `.dN-brand__name` kuraliyla serbestce ezebilir. */
:where(.ekid-brand-name) {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  color: currentColor;
  white-space: nowrap;
  margin-inline-start: 0.5rem;
  align-self: center;
}

/* MOBIL telefon CTA'si (data-navcall):
   - Tasarimlar mobilde telefonu ORTAYA sabitliyordu (position:absolute; left:50%).
     Bu dosya tasarim CSS'inden SONRA yuklendigi icin esit-ozgullukte o kurali
     ezip telefonu akisa geri alir -> sag kumede, hamburgerin SOLUNDA durur. */
@media (max-width: 600px) {
  [data-navcall] {
    position: static;
    transform: none;
    left: auto;
    top: auto;
  }
}
/* Sigmazsa ikon: nav-phone.js `is-callicon` ekler -> numara metni (ilk-cocuk
   ikon HARIC her sey) gizlenir, CTA ikon-genisligine buzulur. */
[data-navcall].is-callicon {
  gap: 0;
  padding-inline: 0.55em;
}
[data-navcall].is-callicon > :not(:first-child) {
  display: none;
}

/* DRAWER (mobil cekmece) baslik: logo + okul adi yan yana (header ile ayni
   sozlesme). :where() ile SIFIR ozgullak -> tasarim serbestce ezer. Bosluk
   `.ekid-brand-name` margin'inden gelir (gap yok -> cift bosluk olmaz). */
:where(.mobile-nav__brand) {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* MERKEZI sosyal ikon boyutu — drawer VE footer (her yerde). Onceden footer'da
   emoji vardi (boyut gerektirmez); artik SVG -> font-size'a gore olcekle.
   :where() SIFIR ozgullak -> tasarim kendi boyutunu verirse ezer. */
:where(.ekid-social-ico) {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: middle;
}
/* MERKEZI iletisim ikonu boyutu — footer VE contact bolumu (SharedContact.icon:
   telefon/mail/adres/saat). Onceden her tasarim kendi emoji/SVG'sini kullanirdi;
   artik TEK merkezi SVG set. :where() SIFIR ozgullak -> tasarim kendi boyutunu
   (`.dN-...__ico svg { width: ... }`) verirse ezer. */
:where(.ekid-contact-ico) {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: middle;
}
/* Iletisim satirinda ikon (veya sarmalayicisi) METNIN USTUYLE hizali olmali —
   adres cok satira sarabilir, ikon ortada kalmamali. Merkezi cozum: ikonu
   DOGRUDAN veya iceren flex kabi (li / a / div) ust-hizala. `:has()` ile ikon
   nerede olursa olsun yakalanir; `:where` DEGIL (tasarimin
   `.dN-...__contact li { align-items:center }` kuralini esit-ozgullukte + sonra
   yuklenerek ezer). align-items yalniz flex/grid kaplarda etkilidir; blok
   `<li>`lerde zararsizdir. */
li:has(.ekid-contact-ico),
a:has(> .ekid-contact-ico) {
  align-items: flex-start;
}

/* ==========================================================================
   ILETISIM LISTESI LAYOUT'u (ORTAK — SharedContact.list):
   column icinde satirlar; her satir = ikon + expanded icerik (label+value).
   Renk/cizgi/kutu/bosluk tasarima ozgudur -> tum kurallar :where() (SIFIR
   ozgullak). Burada YALNIZ islevsel iskelet: dikey yigin + satir flex + body
   expand. (Referans: eski d20 section.)
   ========================================================================== */
:where(.ekid-contact) {
  display: flex;
  flex-direction: column;
}
:where(.ekid-contact__row) {
  display: flex;
  align-items: flex-start;   /* ikon metnin USTUYLE hizali (adres cok satir) */
  gap: 12px;
}
:where(.ekid-contact__ico) {
  flex: none;                /* ikon buzulmez */
  display: inline-flex;
  align-items: center;       /* ikon, TAM bir metin satiri boyu kutuda dikey ortalanir */
  height: 1lh;               /* = ilk metin satirinin yuksekligi -> ikon o satirla optik hizali
                                (align-items:flex-start satir TEPESINE koyup ikonu yukarida
                                birakiyordu; ozellikle ortalanmis-glif zarf/mail ikonunda belliydi) */
}
:where(.ekid-contact__body) {
  flex: 1 1 auto;            /* icerik kalan alani doldurur (expanded) */
  min-width: 0;              /* uzun mail/adres tasmasin */
}
:where(.ekid-contact__value) {
  overflow-wrap: anywhere;   /* uzun e-posta/adres sarar */
}

/* DRAWER 3-BOLGE duzeni (ORTAK, tum tasarimlar): UST sabit / ORTA kaydirilir /
   ALT sabit. Bu dosya tasarim CSS'inden SONRA yuklendigi icin esit-ozgullukte
   panelin `overflow:auto`'sunu (tum-panel scroll) ezip yalniz nav'i kaydirir.
   `:where` DEGIL — bilerek: bu duzenin kazanmasi gerekir (renk/padding tasarima
   ait kalir; burada YALNIZ flex/scroll ayarlanir). */
.mobile-nav__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* panel kaymaz; scroll nav'e devredilir */
}
.mobile-nav__head { flex: 0 0 auto; }        /* ust sabit */
.mobile-nav__nav {
  flex: 1 1 auto;                /* kalan alani doldurur */
  overflow-y: auto;             /* YALNIZ linkler kaydirilir */
  min-height: 0;                /* flex-child'in icerik altina kucululmesi icin SART */
}
.mobile-nav__foot { flex: 0 0 auto; }        /* alt sabit column */

/* ==========================================================================
   FOOTER MARKA KOLONU (ORTAK — SharedFooter.brandColumn):
   logo -> okul adi -> SEO aciklamasi -> sosyal linkler; her tasarimda AYNI
   markup ve sira. Tum kurallar :where() -> SIFIR ozgullak; tasarim kendi
   `.dN-footer__brand ...` kurallariyla renk/font/hizalamayi serbestce ezer.
   Burada YALNIZ islevsel dikey yigin + logo/sosyal boyut varsayilanlari.
   ========================================================================== */
:where(.ekid-foot-brand) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
/* Logo: sabit-ish yukseklik, en-boy korunur (nav logosu gibi). */
:where(.ekid-foot-logo) {
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Okul adi (logonun ALTINDA). ekid-brand-name'den gelen yatay-navbar
   varsayilanlarini (margin-inline-start + align-self:center) EZ: footer'da
   dikey yigin -> ad, logonun SOL kenariyla hizali baslamali (align-self:center
   olsaydi ad sutun icinde ortalanip logodan kayardi). */
:where(.ekid-foot-name) {
  align-self: flex-start;
  margin-inline-start: 0;
  white-space: normal;         /* footer'da 2 satira sarabilir (brandName <br>) */
  font-size: 1.15rem;
}
/* SEO/aciklama paragrafi. */
:where(.ekid-foot-desc) {
  margin: 0;
  max-width: 34ch;
  line-height: 1.55;
  opacity: 0.85;
  font-size: 0.92rem;
}

/* ==========================================================================
   FOOTER "HIZLI LINKLER / HABERLER" KOLONU (ORTAK — SharedFooter.linksColumn):
   Yayinlanmis haber VARSA haber basliklari (blog detayina link), YOKSA ilk 5
   menu linki. Her tasarimda AYNI karar + markup: `.ekid-fmenu` kabi ->
   `.ekid-fmenu__title` (h4) + `.ekid-fmenu__list` (ul) > `.ekid-fmenu__item`
   (li) > `.ekid-fmenu__link` (a). Tum gorunum (renk/font/madde-imi/bosluk)
   tasarima ozgudur -> :where() SIFIR ozgullak; burada YALNIZ liste sifirlamasi.
   ========================================================================== */
:where(.ekid-fmenu__list) {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Sosyal satiri. */
:where(.ekid-foot-social) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

/* ==========================================================================
   NAV KATEGORI GRUPLARI (ORTAK — SharedNavLinks): admin `navigasyonCategory`
   ile ayni kategori adli section'lar tek dropdown grupta toplanir. Eskiden
   yalniz d40 kullaniyordu; artik TUM tasarimlarda (d1-d39) merkezi.

   Grup = self-contained `<span data-navgrp>` (buton + `[data-navgrp-menu]`
   BIRLIKTE) → nav-overflow.js grubu BUTUN olarak sagdan "Daha fazla"ya tasir.
   Burada YALNIZ yapisal iskelet (konum / gizle-goster / DUZLESME); renk/kutu/
   golge tasarimin kendi `.dN-nav__link` derisinden. Skinlenebilir varsayilanlar
   `:where()` (SIFIR ozgullak) -> tasarim `.dN-nav__grpmenu` ile ezebilir; must-
   win layout kurallari plain selector (bu dosya tasarim CSS'inden SONRA yuklenir).
   ========================================================================== */
[data-navgrp] {
  position: relative;   /* alt panel buna gore konumlanir */
  flex: 0 0 auto;       /* grup buzulmez (olcume buton genisligi girer) */
}
[data-navgrp-btn] { cursor: pointer; }
/* Grup oldugunu belirten caret — MERKEZI SVG (SharedNavLinks.caretSvg),
   `.ekid-nav-caret` sinifiyla. Boyut/renk buradan; ikon Dart'ta degistirilebilir. */
.ekid-nav-caret {
  display: inline-block;
  margin-inline-start: 0.35em;
  width: 0.72em;
  height: 0.72em;
  flex: none;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
[data-navgrp][data-open] > [data-navgrp-btn] .ekid-nav-caret { transform: rotate(180deg); }

/* Skinlenebilir dropdown gorunumu (tasarim `.dN-nav__grpmenu` ile ezer). */
:where([data-navgrp-menu]) {
  min-width: 190px;
  max-width: 78vw;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
/* Alt panel POSITION:FIXED — [data-pnav] artik overflow'lu (yatay scroll) ve
   absolute panel o kaba KIRPILIYORDU. Fixed viewport'a gore konumlanir, hicbir
   overflow onu kirpmaz; top/left'i nav-overflow.js buton konumundan hesaplar. */
[data-navgrp-menu] {
  position: fixed;
  display: none;
  flex-direction: column;
  z-index: 200;
}
[data-navgrp][data-open] > [data-navgrp-menu] { display: flex; }
[data-navgrp-menu] > * { display: block; width: 100%; white-space: nowrap; }
/* NOT: "Daha fazla" (nav-overflow) TASMA MENUSU KALDIRILDI; sekme sigmazsa
   [data-pnav] yatay kayar (bkz. nav-overflow.js injectStyle). Eskiden burada
   grubu o menu icinde DUZLESTIREN [data-pnav-menu] kurallari vardi — artik
   menu olmadigi icin silindi. */

/* ==========================================================================
   UST DUYURU SERIDI — SharedNewsBar (core/news_bar.dart)
   --------------------------------------------------------------------------
   Sayfanin EN USTUNDE, sticky header'in (kit `.nav`) DE ustunde duran TIKLANABILIR
   duyuru bandi. Kit bar modunda serit AKISTA durur (position:static): sticky nav'i
   asagi iter, scroll'da serit dogal kayar, nav top:0'a NATIVE yapisir — offset
   olcen JS gerekmez. GORUNUM: `:where` (0-ozgullak) TABAN mekanik+gorunum kit
   token'lariyla boyar. ========================================================================== */
.ekid-topbar { position: static; }

/* TABAN marquee mekanigi + gorunum (`:where` = 0 ozgullak -> tema kuralini
   ezmez; yalniz `.dN .ekid-ticker` CSS'i olmayan tasarimlarda gorunur). Renk
   kit paletinden (--ink/--paper) turer, tanimsizsa notr fallback. */
.ekid-topbar :where(.ekid-ticker) {
  overflow: hidden;
  width: 100%;
  background: var(--ink, #1f2430);
  color: var(--paper, #fff);
  padding-block: 11px;
}
.ekid-topbar :where(.ekid-ticker__track) {
  display: inline-flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: ekid-topbar-marquee 30s linear infinite;
}
@keyframes ekid-topbar-marquee { to { transform: translateX(-33.333%); } }
.ekid-topbar :where(.ekid-ticker:hover) :where(.ekid-ticker__track) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ekid-topbar :where(.ekid-ticker__track) { animation: none; }
}
.ekid-topbar :where(.ekid-ticker__item) {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 20px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
}
/* Ogeler artik <a> (tiklanabilir). Link sifirlamasi 0-OZGULLUKTE (`:where`):
   UA link stilini (alti-cizgi + mavi renk) ezer AMA tema `.dN .ekid-ticker__item`
   RENGINI/stilini EZMEZ -> ust serit alttaki ms1_ticker ile BIREBIR ayni gorunur.
   (Onceki `.ekid-topbar a.ekid-ticker__item` (0,2,1) tema (0,2,0) rengini
   eziyordu; `:where(...)` (0,0,0) ile bu duzeldi. Tema-ticker'i olmayan d40 gibi
   tasarimlarda renk taban `--paper`'dan gelir.) */
:where(.ekid-topbar a.ekid-ticker__item) {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ekid-topbar a.ekid-ticker__item:hover { text-decoration: underline; }

/* KIT VARYANTI (d40): baslik kit `.tickerbar` span'i icinde link. `:where` 0-ozgullukte
   sifirlama -> UA link stilini (mavi+altcizgi) ezer. AMA d40'ta serit ogesinin TAMAMI
   `<a>` (tiklanabilir duyuru); bazi kit temalari `.tickerbar a`'yi vurgu rengine
   (orn. Kraft Atolye `--red`) boyar -> serit bastan basa kirmizilasir. Renk sifirlamasi
   bu yuzden tema `.tickerbar a` (0,1,1)'i ASAN ozgullukte (0,2,1): serit ogeleri
   "link" degil normal ticker metni (`.tickerbar-track` rengi = kit ink) gibi okunur. */
.tickerbar .tickerbar-track a { color: inherit; }
:where(.tickerbar a) {
  text-decoration: none;
  cursor: pointer;
}
.tickerbar a:hover { text-decoration: underline; }