/* Antalya Toplum Koleji — sayfa ICERIGI icin paylasilan native CSS (26 Agu 2026,
   "kod hafiflet" projesi, Oguz'un onayiyla).

   NEDEN VAR: sayfa govdesi (WordPress/Elementor'dan birebir alinmis metin/gorsel)
   Elementor'un SABIT (rastgele degil, her sayfada AYNI) widget sinif adlarini
   tasiyor - .atk-ikon-liste-oge, .atk-gorselkutu-baslik, .atk-sekmeler
   gibi. Eski tema/eklenti CSS dosyalari BILEREK
   kullanilmiyor - onun yerine bu sinif adlarina burada NATIVE, elden yazilmis
   kurallar taniyoruz. Boylece markup'a DOKUNMADAN (metin/gorsel/link birebir
   kaliyor - Oguz'un "yazılar ve resimler kesinlikle aynı kalmalı" talimati)
   gorsel butunluk saglaniyor, tek bir dosyadan TUM sayfalarda paylasiliyor.

   Elementor'un kendi per-element (data-id'ye ozel) CSS'i (post-XXXX.css) DAHIL
   EDILMIYOR - onun yerine burada mantikli, sayfa-bagimsiz VARSAYILAN degerler var.
   Bir sayfada gercekten essiz bir duzen gerekiyorsa (orn. ana sayfa hero'su),
   o sayfaya OZEL sinif (.atk-...) ile, bu dosyaya EKLENEREK cozulur - Elementor
   dosyasi geri getirilmez. */

:root {
  --atk-lacivert: #0F3154;
  --atk-altin: #AA9B6C;
  /* 26 Agu 2026, Oguz'un /goal talebi: site govdesi orijinal WordPress/
     Elementor kitinin SABIT 1260px "boxed" konteynerini birebir kopyalamisti
     (mirror kurallarina uygundu) - ama Oguz genis ekranlarda (2600px'e kadar)
     bunun COK SIKISIK durdugunu, era okullarinin sitesi gibi genislikten
     istifade etmesi gerektigini soyledi. clamp() ile: ~1370px genislige
     kadar ESKI 1260px aynen korunuyor (kucuk/orta ekranda SIFIR regresyon),
     ondan sonra kademeli buyuyup 1720px'te tavanlaniyor (~1870px+ ekranda).
     1720 secildi cunku govde metni (p) bu konteynerin icinde SINIRSIZ
     genislikte akiyor - cok daha genis bir tavan satir uzunlugunu okunmaz
     hale getirirdi. */
  /* 27 Agu 2026, Oguz: "gorseller daha da buyumeli buyuk sayfalarda".
     Olculdu: gorseller 1920px'de 840px'e ulasip 2560px'de AYNI kaliyordu -
     cunku konteyner 1720'de tavanlaniyordu. Tavan 1900'e cikarildi.
     Metin bundan ETKILENMIYOR (kendi 900px tavani var), yani buyuyen sey
     yalnizca gorseller ve yapi - okunabilirlik korunuyor. */
  --atk-icerik-max: clamp(1260px, 92vw, 1900px);

  /* =====================================================================
     AKIŞKAN TASARIM BELİRTEÇLERİ — 28 Ağustos 2026
     ---------------------------------------------------------------------
     Gerekçe: 26-28 Ağustos boyunca her sayfada ayrı sihirli sayı denendi
     (1.25fr, 40px, %6, 900px...). Biri düzelirken öbürü bozuldu, çünkü
     ORTAK bir ölçek yoktu. Artık sayfa-özel piksel yazılmaz; aşağıdaki
     belirteçler kullanılır. Denetim: claude/genislik-denetimi.mjs
     ---------------------------------------------------------------------
     BOŞLUK ÖLÇEĞİ — genişlikle orantılı büyür, dar ekranda küçülür.
     Sabit px yerine bunlar kullanılır ki 2600px'te de 390px'te de
     nefes payı doğru olsun. */
  --bosluk-xs: clamp(6px,  0.5vw, 12px);
  --bosluk-s:  clamp(12px, 1vw,   22px);
  --bosluk-m:  clamp(20px, 2vw,   44px);
  --bosluk-l:  clamp(32px, 3.4vw, 78px);
  --bosluk-xl: clamp(48px, 5vw,  120px);

  /* OKUNUR METİN GENİŞLİĞİ — piksel DEĞİL karakter cinsinden.
     Eski `max-width: 900px` 18px yazıda ~91 karaktere denk geliyordu; ölçüldü
     ve okunur bandın (45-85) ÜSTÜNDE çıktı. `ch` birimi yazı boyutu
     değişse de oranı korur. */
  /* ⚠️ KALİBRASYON (28 Ağu 2026, ölçülerek bulundu): `1ch` = "0" rakamının
     genişliğidir, ORTALAMA harf genişliği DEĞİL. Montserrat'ta 18px yazıda
     1ch = 11.9px iken Türkçe metnin ortalama harfi ~9.0px — yani `ch` gerçek
     karakterden ~1.32 kat geniş. İlk denemede 68ch yazıldı, ölçünce satır
     başına 90 GERÇEK karakter çıktı (üst sınır 85). Hedef ~70 gerçek
     karakter → 70/1.32 ≈ 54ch. Başka bir fonta geçilirse bu çarpan
     YENİDEN ÖLÇÜLMELİ (genislik-denetimi.mjs zaten yakalar). */
  --atk-metin-max: 54ch;

  /* "GENİŞ AMA TAM DEĞİL" ölçüsü — 28 Ağu 2026, Oğuz'un veli-beklentileri
     bulgusu: 54ch bazı bölümlerde ("gereksiz dar bir genişliğe hapsolmuş")
     çok sıkı kalıyor; tam kapsayıcı genişliği (`--atk-icerik-max`) ise okuma
     için fazla geniş.
     ⚠️ İlk denemede 78ch yazıldı (~103 karakter hedefiyle) ama denetim aracının
     ölçümü DÜZELTİLDİKTEN sonra gerçek değerin 109 karakter olduğu görüldü -
     okunur bandın (45-85) belirgin ÜSTÜNDE. Üst sınıra yaklaşacak şekilde
     ~82 gerçek karaktere çekildi: 82/1.32 ≈ 62ch.
     30 Ağu 2026: 62ch'nin gerçek ölçümü lise sayfasında 86 karakter çıktı —
     üst sınırın (85) 1 karakter üstünde. Sayfa-özel yama yerine ORTAK ölçek
     bir tık daha kısaltıldı (K1: sihirli sayı sayfaya değil token'a yazılır). */
  --atk-metin-genis: 60ch;

  /* "SÜTUNU DOLDURAN" ölçü — 30 Ağu 2026, Oğuz'un lise giriş bölümü bulgusu:
     rail'li düzende (metin sütunu + dar bağlantı rail'i) 54ch tavan sütunun
     yarısını boş bırakıyordu. Bu, üçüncü ve en geniş basamak: okunabilirlik
     tavanının üstünde ama sınırsız değil (~103 gerçek karakter). Yalnızca
     sütunun kendisi zaten daraltılmış yerlerde kullanılır. */
  --atk-metin-cok-genis: 78ch;

  /* KART IZGARASI ASGARİ SÜTUNU — grid'ler sabit sütun sayısıyla değil
     `repeat(auto-fit, minmax(var(--kart-min), 1fr))` ile kurulur; böylece
     ekran genişledikçe sütun SAYISI kendiliğinden artar (Oğuz'un talebi:
     "2600'de 2 değil 3 sütuna bile bölünebilsin"). */
  /* 170px seçildi: 1280px ekranda 6 kartlık ızgaranın TEK satıra sığması
     için gereken üst sınır (200px'te 5+1 bölünüp son kart yetim kalıyordu -
     denetim aracı yakaladı). */
  --kart-min: 170px;
}

/* ---- Elementor'un gizle/goster yardimci siniflari (aynen korunuyor - genel
   amacli, cok yerde kullanilan sabit isimler) ---- */
/* ⚠️ 27 Agu 2026: esikler 1024/1025 idi ama sitenin masaustu esigi 1000px'e
   cekilmisti (Header.astro + MobileMenu.astro). Bu 1000-1024px araliginda
   TUTARSIZ bir pencere birakiyordu: masaustu YERLESIMI aciliyor ama icerik
   hala "tablet" kabul edilip hero paragrafi gizleniyor, kademe linkleri
   gosteriliyordu (1000px ekran goruntusuyle yakalandi). Esikler sitenin
   kendi 999/1000 sinirina hizalandi. */
@media (max-width: 999px)  { .atk-gizli-tablet { display: none !important; } }
@media (max-width: 767px)  { .atk-gizli-mobil { display: none !important; } }
@media (min-width: 1000px) { .atk-gizli-masaustu { display: none !important; } }

/* ═══ BAŞLIK ÖLÇEĞİ — SİTENİN TEK KAYNAĞI ═══════════════════════════════
   30 Ağu 2026, Oğuz: "yazı alt başlıkları başlıklar gibi konularda sitenin
   tamamında standartlarımız olsun."
   12 sayfa 1600px'te tarandı ve başlıkların **10 farklı** boyut/ağırlık
   kombinasyonuyla çıktığı ölçüldü — aynı seviyedeki başlıklar sayfadan
   sayfaya değişiyordu (H2: 34/500 · 26/600 · 26/500 · 55/600 · 55/500;
   H3: 24/500 · 15/600; H4: 18/700). Bunlar Elementor'un per-widget
   ayarlarından miras kalmıştı, kasıtlı bir hiyerarşi değildi.
   Artık altı basamaklı tek bir ölçek var; her başlık kuralı buradan
   besleniyor, sayfa-özel sapma yalnızca gerekçesi yazılarak yapılır. */
:root {
  --baslik-1: 55px;        --baslik-1-ag: 500;   /* sayfa başlığı (banner)  */
  --baslik-vurgu: 55px;    --baslik-vurgu-ag: 600; /* bölüm açılışı (IGCSE/IBDP) */
  --baslik-2: 34px;        --baslik-2-ag: 500;   /* bölüm başlığı           */
  --baslik-3: 24px;        --baslik-3-ag: 500;   /* alt başlık              */
  --baslik-4: 18px;        --baslik-4-ag: 600;   /* küçük başlık / sekme    */
  --baslik-kart: 16px;     --baslik-kart-ag: 600; /* kart etiketi           */
}

/* ---- Baslik boyutlari (Elementor "heading" widget'inin size varyantlari) ---- */
.atk-baslik { margin: 0; font-family: Montserrat, sans-serif; color: var(--atk-lacivert); }
h1.atk-baslik, .atk-baslik.atk-boyut-varsayilan:is(h1) { font-size: var(--baslik-vurgu); font-weight: var(--baslik-vurgu-ag); line-height: 1.2; }
/* ⚠️ 26 Agu 2026, Oguz'un "hepsi garip, tasarım eski siteyle alakası yok"
   uyarısı üzerine DÜZELTİLDİ: bu kural TÜM h2 başlıklara 32px/600
   veriyordu ("mantıklı, sayfa-bağımsız varsayılan" olarak seçilmişti) ama
   production'da 5 FARKLI sayfada (hakkımızda, insan-kaynakları, beslenme-
   hizmetleri, bize-ulasin, anadolu-lisesi) canlı ölçülen h2'lerin HİÇBİRİ
   32px/600 çıkmadı - hepsi 500 ağırlıkta, boyut 25-34px arası (Elementor'un
   per-widget özel boyut ayarları). 600 ağırlık HİÇBİR örnekte görülmedi -
   bu yüzden en azından font-weight kesin olarak 500'e düzeltildi (tüm
   sayfalardaki h2'leri gereğinden KALIN/AĞIR gösteriyordu). Boyut için tek
   bir "doğru" değer yok (25-34px arası değişiyor) ama örneklerin çoğunda
   34px'e daha yakındı - 32'den 34'e çekildi, sayfaya özel daha büyük fark
   varsa (ör. 25px) o sayfanın kendi <style>'ında ayrıca override edilir. */
h2.atk-baslik { font-size: var(--baslik-2); font-weight: var(--baslik-2-ag); line-height: 1.3; }
h3.atk-baslik { font-size: var(--baslik-3); font-weight: var(--baslik-3-ag); line-height: 1.3; }

/* metin govdesi (Elementor "text-editor" widget'i - duz <p>)
   ⚠️ 26 Agu 2026'da duzeltildi: gercek deger 17px/#444 degil 18px/lacivert idi -
   production'da olculdu (--e-global-typography-primary: 18px, --e-global-color-
   primary: #0F3154). Bu SAYFANIN GENELINDEKI govde metnini etkiliyordu, TUM
   onceki sayfalarda (paylasimli sinif oldugu icin duzeltme geriye donuk yansidi).
   Listeler (ul/li) de production'da bullet'siz/girintisiz/bosluksuz -
   list-style:none, browser'in varsayilan 1em ul margin'i (18px font'ta = 18px,
   production'la ayni) KORUNUYOR, elle margin verilmedi. */
/* 26 Agu 2026, /goal: konteyner (--atk-icerik-max) genis ekranlarda 1720px'e
   kadar buyuyor ama DUZ METIN (govde paragraflari) o genislikte OKUNMAZ hale
   gelirdi (satir basina 150+ karakter) - bu yuzden paragraflara tavan kondu.
   ⚠️ 28 Agu 2026: o tavan 900px idi ve denetim aracıyla ölçülünce 18px yazıda
   ~91 karakter/satır verdiği görüldü - okunur bandın (45-85) ÜSTÜNDE. Piksel
   yerine karakter cinsinden `--atk-metin-max: 68ch` belirtecine geçildi.
   Grid/kart icindeki paragraflar zaten kendi dar kolonlarinda oldugu icin
   bu kuraldan etkilenmiyor. */
.atk-icerik p { font-size: 18px; line-height: 1.5; color: var(--atk-lacivert); max-width: var(--atk-metin-max); }
/* ⚠️ 27 Agu 2026 — DENENDI VE GERI ALINDI: metin sutununu ortalamak.
   Amac, 1760px konteynerde sola yasli 900px metnin sagindaki ~860px olu
   boslugu simetrik hale getirmekti. Ekran goruntusuyle IKI REGRESYON
   yakalandi ve karar geri alindi:
   (1) Ortalanan sey yalnizca `.atk-icerik`'in DOGRUDAN cocuklari oluyordu;
       "Bağlantılar" basligi ortalanirken altindaki icon-list (bir widget
       sarmalayicisinin icinde, yani dogrudan cocuk DEGIL) solda kaliyor,
       baslik ile listesi birbirinden KOPUYORDU.
   (2) Basliga verilen `max-width`, iletisim bolumundeki `flex-basis:100%`'u
       eziyor ve "ANAOKULU İLETİŞİM" basligi butonlarla ayni satira dusuyordu
       - yani az once duzeltilen buton hizasi bozuluyordu.
   SONUC: metnin sola yasli olmasi bir HATA degil, bir uslup tercihi; ortalama
   ise gercek hatalar uretiyor. Genisligi kullanan sey metin degil GORSELLER
   ve YAPI olmali - img-metin bloklari zaten 1720px'i dolduruyor (gorsel 840px).
   Bu konu ortalama ile degil, bos alana YAPI koyarak cozulur (sayfa bazli
   kurgu gerektirir, ayri bir is). */
.atk-icerik p strong { color: var(--atk-lacivert); }
.atk-icerik ul { list-style: none; padding: 0; }
/* ⚠️ 28 Ağu 2026: `<p>` okunur genişlik tavanı alıyordu ama `<li>` ALMIYORDU -
   madde metinleri geniş ekranda sınırsız akıp 88 karaktere çıkıyordu (üst
   sınır 85, hakkımızda sayfasında ölçüldü). Aynı belirteç listelere de
   verildi; ızgara/kart içindeki dar listeler zaten bu tavanın altında
   olduğu için etkilenmiyor. */
.atk-icerik ul li { margin: 0; padding: 0; max-width: var(--atk-metin-max); }

/* ---- Ortalanmis metin bloğu - sayfalar arasi paylasilan yardimci class
   (26 Agu 2026'da anadolu-lisesi'nde her sayfaya ozel tanimlaniyordu, artik
   burada TEK yerden geliyor). ---- */
.atk-ortali h2, .atk-ortali h4 { text-align: center; }
/* ⚠️ 27 Agu 2026, impeccable critique bulgusu: `.atk-ortali` yalnizca h2/h4/p
   ortaliyordu; buton satiri (`.atk-buton-sarici`, inline-block) ise
   ebeveyninde `text-align` olmadigi icin SOLA yasli kaliyordu. Olculdu
   (2560px, anaokulu iletisim bolumu): baslik merkezi x=1272 (dogru sayfa
   merkezi), buton satiri merkezi x=792 — **480px kayik**. Sayfanin en kritik
   yerinde (ebeveynin arama karari verdigi an) gorunur bir hiza bozuklugu.
   Butonlar artik flex ile ortalaniyor; dar ekranda sariyor. */
.atk-ortali:has(> .atk-buton-sarici) {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
}
.atk-ortali:has(> .atk-buton-sarici) > h2,
.atk-ortali:has(> .atk-buton-sarici) > h4 { flex-basis: 100%; }
.atk-ortali > .atk-buton-sarici { margin: 0; }
.atk-ortali p { max-width: var(--atk-metin-max); margin-left: auto; margin-right: auto; }
.atk-icerik a:not(.atk-buton) { color: var(--atk-lacivert); text-decoration: underline; }

/* ---- Icon list (check/ok isaretli veya ok isaretli linkli listeler) ----
   Varsayilan: tesis kartlarindaki koyu-zemin/altin-ikon/beyaz-metin gorunumu -
   bu, sitede en cok tekrar eden kullanim bicimi. Acik zeminde kullanilacaksa
   sarmalayicisina .atk-icon-liste--koyu-degil eklenip alttaki blok gecerli olur. */
.atk-ikon-liste { list-style: none; margin: 0; padding: 0; }
.atk-ikon-liste-oge { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.atk-ikon-liste-oge:last-child { margin-bottom: 0; }
.atk-ikon-liste-ikon svg { width: 14px; height: 14px; fill: var(--atk-altin); flex-shrink: 0; }
.atk-ikon-liste-metin { font-size: 17px; color: #fff; }
.atk-ikon-liste-oge a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
/* ⚠️ 28 Ağu 2026: mobilde bu bağlantılar 22px yükseklikteydi - parmakla
   isabet ettirmek zor (WCAG 2.5.8 asgari 24px, pratik hedef 40px+).
   Metin/görsel DEĞİŞMİYOR, yalnızca tıklama alanı büyütülüyor. */
@media (max-width: 600px) {
  .atk-ikon-liste-oge a,
  .atk-ikon-liste-oge > .atk-ikon-liste-metin { min-height: 40px; }
  .atk-ikon-liste-oge { margin-bottom: 4px; }
}
.atk-ikon-liste-oge a:hover .atk-ikon-liste-metin { color: var(--atk-altin); }

/* acik zeminde (beyaz sayfa govdesinde) kullanilan icon-list icin */
.atk-icon-liste--koyu-degil .atk-ikon-liste-metin { color: var(--atk-lacivert); }
.atk-icon-liste--koyu-degil .atk-ikon-liste-ikon svg { fill: var(--atk-lacivert); }

/* ---- Image box (ikon + baslik + [aciklama]) — tesis kartlari ---- */
.atk-gorselkutu { text-align: center; }
.atk-gorselkutu-img { margin: 0 auto 24px; }
/* 27 Agu 2026: sabit 112px idi - Oguz'un "ekran buyudukce gorseller buyumuyor"
   sikayetinin ikinci somut ornegi (ana sayfadaki 4'lu tesis ikonlari). Artik
   ekranla birlikte 96 -> 150px araliginda buyuyor. */
.atk-gorselkutu-img img { width: clamp(96px, 7vw, 150px); height: auto; margin: 0 auto; display: block; }
.atk-gorselkutu-baslik { font-family: Montserrat, sans-serif; font-size: var(--baslik-3); font-weight: var(--baslik-3-ag); color: var(--atk-altin); margin: 0 0 20px; }
.atk-gorselkutu-icerik p { font-size: 16px; color: #fff; margin: 0; }

/* ---- Tabs (masaustu: yatay sekme · dar ekran: akordeon, AYNI DOM+JS) ----
   JS: /assets/sekmeler.js - baslik<->panel eslesmesi aria-controls/aria-labelledby
   icindeki numaraya gore, DOM sirasindan bagimsiz.
   1 Eylul 2026, Oguz: "tıklanıyor ama hiç güzel görünmüyor" - eski hali duz
   beyaz sekme cubugu + yari saydam altin dikdortgen + kirli krem panel,
   jenerik eklenti gorunumundeydi. Yeniden tasarlandi: tek kart (ince
   cerceve + sitenin buton radius'uyla ayni 10px), aktif sekmede altin
   ALT-CIZGI gostergesi (kaydırarak degil, aria-selected'a gore anlik -
   4 uzun basligin genisligi degistigi icin kayan cizgi yerine sabit
   pozisyonlu tercih edildi), panel icerigi SOLA hizali (miras alinan
   .atk-icerik--ortali'nin merkezleme kurali burada BILEREK ezildi - uzun
   paragraf ortali okunmaz). */
.atk-sekmeler { border: 1px solid rgba(15,49,84,.14); border-radius: 10px; overflow: hidden; background: #fff; }
.atk-sekmeler-sarici { display: flex; background: #fff; border-bottom: 1px solid rgba(15,49,84,.14); }
.atk-sekme-baslik {
  flex: 1 1 0; padding: 22px 20px 19px;
  font-size: 16px; font-weight: 600; letter-spacing: .01em;
  color: rgba(15,49,84,.5);
  cursor: pointer; user-select: none; text-align: center;
  position: relative;
  transition: color .2s ease, background .2s ease;
}
.atk-sekme-baslik + .atk-sekme-baslik { border-left: 1px solid rgba(15,49,84,.1); }
.atk-sekme-baslik::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px;
  background: var(--atk-altin); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transition: transform .25s ease;
}
.atk-sekme-baslik:hover { color: var(--atk-lacivert); background: rgba(170,155,108,.06); }
.atk-sekme-baslik[aria-selected="true"] { color: var(--atk-lacivert); }
.atk-sekme-baslik[aria-selected="true"]::after { transform: scaleX(1); }
.atk-sekme-mobil-baslik { display: none; }
.atk-sekmeler-icerik-sarici { background: #fff; }
.atk-sekme-icerik { display: none; padding: 40px 44px; font-size: 17px; line-height: 1.75; color: var(--atk-lacivert); text-align: left; }
/* .atk-icerik--ortali'nin (index.astro, scoped style) merkezleme kuralı bu
   paragrafı da kapsıyor ve ondan daha özgül - kasıtlı ezme: uzun paragraf
   ortalı okunmaz. */
.atk-sekme-icerik p { text-align: left !important; max-width: none !important; margin: 0 0 1em !important; }
.atk-sekme-icerik p:last-child { margin-bottom: 0 !important; }
.atk-sekme-icerik.is-acik { display: block; }

@media (max-width: 900px) {
  .atk-sekmeler { border-radius: 8px; }
  .atk-sekmeler-sarici { display: none; }
  .atk-sekmeler-icerik-sarici { background: #fff; }
  .atk-sekme-mobil-baslik {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 17px 18px; font-size: 15px; font-weight: 600;
    color: var(--atk-lacivert); cursor: pointer; user-select: none;
    border-bottom: 1px solid rgba(15,49,84,.12);
    background: transparent;
  }
  /* ⚠️ .atk-sekme-mobil-baslik her zaman .atk-sekme-baslik ile BİRLİKTE geliyor
     (bkz. markup) - o sınıfın ::after'ı (altın alt-çizgi göstergesi, masaüstü
     sekmeleri için) burada da eşleşip özellik-bazında BİRLEŞİYORDU (position/
     background/border-radius miras kalıp elmas gibi görünen bir leke
     oluşturmuştu). Çakışan her özellik açıkça sıfırlanıyor. */
  .atk-sekme-mobil-baslik::after {
    content: ""; position: static; background: none; border-radius: 0;
    flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--atk-altin); border-bottom: 2px solid var(--atk-altin);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .atk-sekme-mobil-baslik[aria-selected="true"] { background: rgba(170,155,108,.08); }
  .atk-sekme-mobil-baslik[aria-selected="true"]::after { transform: rotate(-135deg); }
  .atk-sekme-icerik { padding: 18px 18px 24px; }
}

/* ---- Video sarici (16:9 responsive) ---- */
.atk-video-sarici { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; }
.atk-video-sarici iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Buton (Elementor "button" widget'i) ---- */
.atk-buton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; background: var(--atk-lacivert); color: #fff;
  font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: .03em; text-decoration: none;
  border-radius: 4px; transition: background .2s;
}
.atk-buton:hover { background: #14406e; }
/* buton icinde ikon+metin (Elementor "button" widget'inin ikonlu varyanti) */
.atk-buton-icerik { display: inline-flex; align-items: center; gap: 10px; }
.atk-buton-ikon svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- Sayfa basligi banner'i (ic sayfalarin ustundeki, bg-resimli, h1'li serit) ----
   26 Agu 2026'da anadolu-lisesi'nde kuruldu; TUM ic sayfalarda ayni kalip kullanilacak. */
.atk-sayfa-basligi {
  position: relative; display: flex; align-items: center;
  min-height: 550px; background-size: cover; background-position: center;
  color: #fff;
}
/* ⚠️ 27 Agu 2026 — GERCEK erisilebilirlik hatasi (impeccable critique,
   Assessment B olcumu): banner basligi beyaz 55px, ama arkasindaki perde
   yalnizca opacity .31 idi. Yazinin BULUNDUGU piksellerde olculdu:
   medyan kontrast 2.13:1, glif alaninin %73.6'si buyuk-metin esigi olan
   3:1'in ALTINDA. Yani baslik fotografin acik bolgelerinde fiilen
   okunamiyordu. Perde .55'e cikarildi + alttan yukari koyulasan ikinci bir
   katman eklendi (fotografin ust kismi acik kaliyor, yazi alt-orta bolgede).
   Marka rengi degismedi, yalnizca opaklik. */
/* ⚠️ 30 Ağu 2026, Oğuz: "giriş görsellerinin üstündeki transparanlık çok az,
   seviyesi artmalı %10 falan olmalı layer" — yani perde ÇOK KOYUYDU, fotoğraf
   lacivert filtre altında kayboluyordu (ekran görüntüsüyle doğrulandı).
   Perde .82'den .10'a indirildi.
   ⚠️ AMA 27 Ağu'daki erişilebilirlik hatası geri gelmemeli: perde .31 iken
   başlık kontrastı 2.13:1 ölçülmüş, glif alanının %73.6'sı büyük-metin eşiği
   3:1'in ALTINDA kalmıştı (fotoğrafın açık bölgelerinde yazı okunmuyordu).
   Bu yüzden okunabilirlik artık PERDEYLE değil, metnin KENDİ gölgesiyle
   sağlanıyor: fotoğraf net kalıyor, kontrast yalnızca harflerin çevresinde
   yerel olarak yükseliyor (aşağıda .atk-sayfa-basligi h1 kuralı). */
.atk-sayfa-basligi::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(15,49,84,.72) 0%, rgba(15,49,84,.38) 60%, rgba(15,49,84,.30) 100%),
    var(--atk-lacivert);
  /* 30 Ağu 2026: Oğuz önce .82 → %10 istedi (fotoğraf canlansın), sonra
     "hero görsel üzerindeki lacivert layer opacity %25 olsun" dedi.
     %25 daha KOYU olduğu için başlık kontrastı düşmez, artar — %10'da
     eklenen katmanlı metin gölgesi yerinde bırakıldı. */
  opacity: .25;
}
.atk-sayfa-basligi-ic { position: relative; z-index: 1; max-width: var(--atk-icerik-max); margin: 0 auto; width: 100%; padding: 20px; }
/* ⚠️ 26 Agu 2026'da IKI gercek hata duzeltildi (ikisi de sekiz onceki banner
   sayfasini geriye donuk etkiliyordu):
   (1) Ozgullük hatasi — `.atk-sayfa-basligi h1{font-size:55px}` (1 sinif+1 tip =
   (0,1,1)) yukaridaki genel `.atk-baslik.atk-boyut-varsayilan:is(h1)`
   kuralina (2 sinif = (0,2,1), daha ozgul) HER ZAMAN yeniliyordu — banner basligi
   masaustunde bile production'in 55px'i degil genel 44px'i gosteriyordu, canli
   olculup yakalandi. Secici `.atk-baslik` sinifi eklenerek ozgullugu
   esitlendi (bu dosyada SONRA geldigi icin artik kazaniyor).
   (2) Kesim noktasi hatasi — mobil deger (30px/220px) 767px'te degil, production'in
   kit CSS'indeki cakisan iki @media kuralinin (1260/1259, ayni degiskeni tekrar
   tanimliyor, sonraki kazaniyor) sonucunda GERCEKTE 1259px'te devreye giriyor;
   900px genislikte canli dogrulandi (55px degil 30px). */
.atk-sayfa-basligi h1.atk-baslik {
  font-size: 55px; font-weight: 500; color: #fff; text-align: center;
  /* Perde %10'a indiği için okunabilirlik buradan geliyor: harflerin hemen
     çevresinde yerel koyuluk. İki katman - dar/koyu (kenar tanımı) + geniş/
     yumuşak (açık zeminlerde ayrışma). Fotoğrafın geneli etkilenmiyor. */
  text-shadow:
    0 0 10px rgba(8,20,38,.95),
    0 0 24px rgba(8,20,38,.85),
    0 0 48px rgba(8,20,38,.70),
    0 2px 4px rgba(8,20,38,.95);
}
@media (max-width: 1259px) { .atk-sayfa-basligi { min-height: 220px; } .atk-sayfa-basligi h1.atk-baslik { font-size: 30px; } }

/* ---- Duz sayfa basligi (bg-resimsiz, kisisel-verileri-koruma/kullanim-kosullari
   gibi sayfalarda kullanilan kucuk h2 - AYNI 959e167 tipografi tokenini
   kullaniyor ama banner olmadan, 26 Agu 2026'da kvkk'da tek-sayfalik ozel kural
   olarak kurulmustu, 2. kullanimda (kullanim-kosullari) buraya tasindi). */
/* 30 Ağu 2026: SEO denetiminde bulundu — kaynak HTML başlığı <h2> olarak
   geliyordu (production'ın kendi hatası da olabilir), sayfada hiç <h1>
   kalmıyordu. Kaynak dosyada h1'e çevrildi, seçici burada eşlendi. */
.atk-duz-baslik h1.atk-baslik { font-size: var(--baslik-1); font-weight: var(--baslik-1-ag); margin-bottom: 30px; }
@media (max-width: 1259px) { .atk-duz-baslik h1.atk-baslik { font-size: 30px; } }

/* ---- Dekoratif foto seridi (metin icermeyen, bolumler arasi gorsel ayrac) ---- */
/* 30 Ağu 2026, Oğuz: "lise sayfasında cambridge igcse başlığının üstünde
   paralax efekt var normalde, o yok seninkinde, olsun."
   Canlı sitede ölçüldü: bu şerit (`data-id fc6a408`, high_school_1) gerçekten
   `background-attachment: fixed` ile geliyor — mirror'a alınırken bu tek
   özellik düşmüş. Eklendi. Mobil tarayıcılar `fixed`'i yok saydığı için
   dar ekranda `scroll`a düşüyor (bize-ulasin paralaksıyla aynı davranış). */
.atk-foto-serit {
  min-height: 400px; background-size: cover; background-position: center;
  background-attachment: fixed;
}
@media (max-width: 1000px) { .atk-foto-serit { background-attachment: scroll; } }
@media (max-width: 767px) { .atk-foto-serit { min-height: 200px; } }

/* ---- Icon box (PDF/kaynak kartlari, IB ders gruplari vb.) ----
   Elementor'un "Icon Box" widget'i: ikon + baslik + [aciklama]. Grid duzeni
   sayfaya ozel .atk-*-grid class'i ile veriliyor (kart sayisi degisken). */
.atk-ikonkutu { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.atk-ikonkutu-ikon .atk-ikon, .atk-ikonkutu-ikon a.atk-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--atk-altin); color: var(--atk-lacivert); margin: 0 auto;
}
.atk-ikonkutu-ikon svg { width: 22px; height: 22px; fill: currentColor; }
.atk-ikonkutu-baslik { margin: 0; font-size: var(--baslik-kart); font-weight: var(--baslik-kart-ag); color: var(--atk-lacivert); }
/* Kart başlığı bir BAĞLANTI (PDF/alt sayfa) — parmakla isabet edecek kadar
   yüksek olmalı. 30 Ağu 2026: mobilde 38px ölçüldü, alt sınır 40px. */
.atk-ikonkutu-baslik a {
  color: inherit; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px;
}
.atk-ikonkutu-baslik a:hover { color: var(--atk-altin); }
.atk-ikonkutu-aciklama { margin: 0; font-size: 13px; color: #666; }

/* ---- Tekil ikon widget'i (bir baslikin hemen ustunde kucuk rozet-ikon) ---- */
.atk-ikon-sarici { margin-bottom: 10px; }
.atk-ikon-sarici .atk-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--atk-altin); color: var(--atk-lacivert);
}
.atk-ikon-sarici svg { width: 18px; height: 18px; fill: currentColor; }

/* ---- Toggle / akordeon (Elementor "Toggle" widget'i - Tabs'tan FARKLI: her
   ogesi BAGIMSIZ acilir/kapanir, digerini etkilemez). JS: sekmeler.js. ---- */
.atk-akordeon-oge { border-bottom: 1px solid rgba(15,49,84,.12); }
.atk-sekme-baslik[role="button"] {
  display: flex; align-items: center; gap: 10px; padding: 15px;
  font-size: 18px; font-weight: 700; color: var(--atk-lacivert); cursor: pointer; user-select: none;
}
.atk-akordeon-ikon svg { width: 12px; height: 12px; fill: var(--atk-lacivert); }
.atk-akordeon-ikon-acik { display: none; }
.atk-sekme-baslik[aria-expanded="true"] .atk-akordeon-ikon-kapali { display: none; }
.atk-sekme-baslik[aria-expanded="true"] .atk-akordeon-ikon-acik { display: inline; }
.atk-akordeon-oge > .atk-sekme-icerik { display: none; padding: 0 4px 18px; font-size: 15px; line-height: 1.7; color: #444; }
.atk-akordeon-oge > .atk-sekme-icerik.is-acik { display: block; }

/* ---- Sosyal ikon (tekil ya da birkac ikonlu - staff kartlarindaki mail ikonu vb.) ---- */
.atk-sosyal-ikonlar { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.atk-sosyal-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--atk-lacivert); color: #fff;
}
.atk-sosyal-ikon svg { width: 14px; height: 14px; fill: currentColor; }
.atk-sosyal-ikon:hover { background: var(--atk-altin); color: var(--atk-lacivert); }
/* 28 Ağu 2026: mobilde 32x32px - parmak hedefi için küçük. Masaüstünde
   32px görsel olarak doğru duruyor (kadro kartlarında ölçülü bir aksan),
   bu yüzden yalnızca dokunmatik genişlikte 44px'e çıkarılıyor. */
@media (max-width: 600px) {
  .atk-sosyal-ikon { width: 44px; height: 44px; }
  .atk-sosyal-ikon svg { width: 18px; height: 18px; }
}
.atk-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Görsel + metin ikili blok (kademe sayfalarinin (anaokulu/ilkokul/ortaokul
   vb.) standart deseni - fragman DUZ olarak [img][p][p][p]... ya da
   [p][p]...[img] sirasiyla geliyor (birden fazla <p> olabilir). Grid ile img
   SUTUN 1'e (tum satirlari kaplayarak), TUM p'ler SUTUN 2'ye yerlesir - boylece
   coklu paragraf gorseli BOLMEDEN tek metin kolonunda toplanir. Kaynaktaki
   [img,p,p,p] / [p,p,img] sirasi zaten hangi tarafta oldugunu belirliyor -
   img icin grid-column DOM sirasindaki KONUMUNA gore degil, ilk mi son mu
   oldugu HTML'de belli oldugundan otomatik doguyor. */
/* ⚠️ 27 Agu 2026 — GERCEK bir yerlesim hatasi duzeltildi (Oguz: "yazilarin ve
   gorsellerin yerleri guzel degil"). Ekran goruntusuyle yakalandi: gorsel/metin
   bloklarinda paragraflar birbirinden KOPUYOR, aralarinda devasa olu bosluk
   kaliyordu.
   Kok neden: gorsel `grid-row: 1/-1` ile tum satirlari kapliyor ve `height:auto`
   ile DOGAL yuksekligini dayatiyordu; paragraflarin her biri ayri bir otomatik
   satir olup `align-items:center` ile o yukseklige YAYILIYORDU. Yani gorsel
   metnin ritmini belirliyordu - tersi olmali.
   Cozum: satirlar `min-content` ile icerige gore sikisir, `align-content:start`
   ile metin ustten baslar; gorsel `align-self:stretch` + `height:100%` +
   `object-fit:cover` ile METNIN belirledigi yuksekligi doldurur. `min-height`
   metin cok kisayken gorselin ezilmesini onler. */
/* ⚠️ UCUNCU ve DOGRU duzeltme (27 Agu 2026). Onceki iki denemem yanlis
   teshise dayaniyordu; olcumle yakalandi (paragraf araligi 520px'te kaldi).
   GERCEK kok neden: `grid-row: 1 / -1` ACIK satir tanimi YOKKEN tum satirlari
   KAPLAMIYOR. `-1` = acik grid'in SON cizgisi; acik satir tanimlanmadigi icin
   son cizgi = 1, yani kural `1/1`'e cokup gorseli SADECE 1. satira koyuyordu.
   Sonuc: 1. satirin yuksekligi gorselin 560px'i oluyor, ilk paragraf o satirin
   tepesinde kaliyor, ARDINDAN 520px bosluk (= 560 - paragraf yuksekligi).
   Aritmetik birebir tutuyordu: 751 blok = 189 metin + 520 + 3x14.
   Cozum: acik satir tanimi verilir (`repeat(20, min-content)`) - boylece `-1`
   gercekten son satira isaret eder ve gorsel TUM satirlari kaplar. Bos satirlar
   min-content = 0, yani yer kaplamaz. Gorsel de min-height:0 + stretch ile
   METNIN belirledigi yuksekligi doldurur. 20 = makul ust sinir; en uzun
   img-metin blogunda 4 paragraf var. */
/* 27 Agu 2026: sutunlar 1fr/1fr idi - gorsel ile metin esit genislikteydi.
   Gorsele agirlik verildi (1.25/0.75). Bu UC seyi birden duzeltiyor:
   (a) gorsel belirgin buyuyor (Oguz'un istegi),
   (b) metin sutunu daralinca satir uzunlugu ~93 karakterden ~82'ye iniyor
       (okunabilir banda yaklasiyor),
   (c) metin daraldigi icin dikeyde uzuyor, gorselle yukseklik farki azaliyor. */
/* ---- Giriş + "Bağlantılar" rail: metin sol, dikey çizgiyle ayrılmış dar
   sağ sütunda alt alta linkler ---- 28 Ağustos 2026, Oğuz'un production
   (mevcut WordPress) kıyaslama talebiyle: anaokulu/ilkokul/ortaokul/
   anadolu-lisesi'nin dördünde de aynı kalıp var (canlıda ölçüldü, x≈1305,
   dikey 1px çizgi ile ayrılmış). Astro tarafında sayfa frontmatter'ı ham
   giriş HTML'ini "Bağlantılar"/"Links" başlığından İKİYE BÖLÜP iki gerçek
   wrapper div'e (.atk-giris-rail-metin / .atk-giris-rail-baglantilar)
   sarıyor - metin degismiyor, yalnizca hangi div'e dustugu degisiyor. */
.atk-giris-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  column-gap: 48px;
  align-items: start;
}
/* ⚠️ 30 Ağu 2026, Oğuz (lise sayfası ekran görüntüsüyle): "şu yazı neden böyle
   daracık yerde yazıyor, geniş geniş kullansa o sütunu."
   Ölçüldü ve haklı çıktı: 1920px'te metin SÜTUNU 1418px iken paragraf
   `--atk-metin-max` (54ch ≈ 643px) yüzünden sütunun yarısından azını
   kullanıyordu — altındaki logolar tam sütuna yayıldığı için fark göze
   batıyordu. Bu desende rail (300px) zaten sütunu daraltıyor, ek olarak
   54ch tavan gereksiz sıkıyor. `--atk-metin-cok-genis` (78ch) kullanılıyor:
   1600px'te ~928px = sütunun %83'ü.
   🟡 Bilinçli kabul: ~103 karakter, denetim aracının 85 üst sınırının
   üstünde — Oğuz'un açık tercihi. Sınırsız da bırakılmadı (1418px = ~187
   karakter olurdu). Dördü de aynı desendeki anaokulu/ilkokul/ortaokul/lise
   sayfalarında birden geçerli. */
.atk-giris-rail-metin > p { max-width: var(--atk-metin-cok-genis); margin: 0 0 16px; }
.atk-giris-rail-metin > p:last-child { margin-bottom: 0; }
.atk-giris-rail-baglantilar {
  border-left: 1px solid rgba(15, 49, 84, .22);
  padding-left: 48px;
  align-self: stretch;
}
/* 🐛 30 Ağu 2026, Oğuz: "lise ve ortaokul sayfalarında linkler nasıl
   veriliyorsa ilkokulda da öyle olsun."
   Ölçüldü: ortaokulda rail TEK liste widget'ı (öğe aralıkları 18/18/18/18),
   ilkokulda ise kaynak HTML **4 AYRI widget** veriyor (her biri tek link) —
   widget'lar arasında hiç boşluk olmadığı için ilk dört link birbirine
   YAPIŞIK, son ikisi ayrık duruyordu: [0,0,0,18,18]. Liste içi `gap`
   ikisinde de 18px'ti, yani fark listelerin İÇİNDE değil ARASINDAYDI.
   Widget'lar arasına aynı ritim veriliyor; tek widget'lı sayfalar
   (ortaokul, lise, anaokulu) bu kuraldan etkilenmiyor. */
.atk-giris-rail-baglantilar .atk-ikon-liste-widget + .atk-ikon-liste-widget {
  margin-top: 18px;
}
.atk-giris-rail-baglantilar h2 { margin: 0 0 22px; font-size: var(--baslik-3); font-weight: var(--baslik-3-ag); }
/* 30 Ağu 2026, Oğuz: "alt alta olan link kutuları aynı genişlikte olsun,
   radius daha fazla olsun." `align-items:stretch` eklendi — önceden her
   buton kendi metni kadar dardı (ör. "Kıyafet Uygulaması" tek başına dar
   kalıyordu), şimdi hepsi en geniş öğeyle aynı genişlikte. */
.atk-giris-rail-baglantilar .atk-ikon-liste {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.atk-giris-rail-baglantilar .atk-ikon-liste-oge { display: block; }
/* ═══ 30 Ağustos 2026, Oğuz: "iconların arka planı olmasın, icon ve yazı
   beraber bir buton olarak arka planı olsun... lacivert arka plan, üstüne
   gelince sadece metin toplum koleji sarısı olsun, buton kenarları
   radiuslu olsun" — ve "4 okul sayfasında sağdaki linkler bölümündeki
   linkler de öyle olsun."
   Önceki hâl: alt çizgili düz metin linkler, ikon ayrı renkte. Şimdi:
   icon+metin TEK bir dolgu buton (aynı `.atk-buton`'ın radius'u — 4px —
   kullanılıyor ki site genelinde tek bir buton dili olsun). Hover'da
   YALNIZCA metin span'i renk değiştiriyor, ikon ve zemin sabit kalıyor —
   bu yüzden ikonun rengi `currentColor` DEĞİL, `a`nın rengi de hover'da
   DEĞİŞMİYOR; yalnızca `.atk-ikon-liste-metin`e ayrı hover kuralı var. */
.atk-giris-rail-baglantilar .atk-ikon-liste-oge a {
  display: flex; align-items: center; gap: 12px;
  background: var(--atk-lacivert); color: #fff;
  padding: 12px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 400; font-size: 16px; line-height: 1.3;
  transition: background .18s ease;
}
.atk-giris-rail-baglantilar .atk-ikon-liste-ikon { flex: 0 0 auto; display: flex; }
.atk-giris-rail-baglantilar .atk-ikon-liste-ikon svg { width: 17px; height: 17px; fill: #fff; display: block; }
.atk-giris-rail-baglantilar .atk-ikon-liste-metin { transition: color .18s ease; }
.atk-giris-rail-baglantilar .atk-ikon-liste-oge a:hover .atk-ikon-liste-metin {
  color: var(--atk-altin);
}
@media (max-width: 900px) {
  .atk-giris-rail { grid-template-columns: 1fr; }
  /* 28 Ağu 2026: mobilde 28px margin + 28px padding = 56px ayrım vardı;
     tek/az sayıda link için fazla. Çizgi ayrımı korunuyor, boşluk yarıya. */
  .atk-giris-rail-baglantilar {
    border-left: none; border-top: 1px solid rgba(15, 49, 84, .22);
    padding-left: 0; padding-top: 20px; margin-top: 20px;
  }
  .atk-giris-rail-baglantilar h2 { margin-bottom: 14px; }
}

/* ⚠️ 28 Ağustos 2026, Oğuz: "görsel daha küçük olsa ama yazı ve görsel
   arasındaki boşluk daha fazla olsa, çünkü görsel büyüyünce yüksekliği de
   artıyo sayfanın... mesafe % olarak genişliğe oranla olsun."
   Kök neden: görsel `grid-row:1/-1; align-self:stretch` ile METNİN
   YÜKSEKLİĞİNE göre uzuyor (kendi doğal boyu değil) - görsel sütunu
   genişleyip metin sütunu daralınca metin daha çok satıra bölünüyor,
   blok boyu artıyor, görsel de o artan boyu doldurmak için UZUYOR. Yani
   "görsel büyüyünce sayfa uzuyor" şikayetinin gerçek nedeni görsele değil,
   METNE ayrılan dar sütuna dayanıyordu. Çözüm: ORAN TERS ÇEVRİLDİ (görsel
   artık dar sütunda, 1.25fr→0.85fr; metin geniş sütunda, 0.75fr→1.15fr) -
   metin daha az satıra bölünüyor, blok kısalıyor, görsel de daha az
   uzamak zorunda kalıyor. Ayrıca sütunlar arası boşluk sabit 40px yerine
   `%` (konteyner genişliğine oranlı) yapıldı - geniş ekranda orantılı
   büyüyor. */
/* ---- .atk-yazi-ortala — DÜZ YAZI ağırlıklı bölümler için ----------------
   28 Ağustos 2026. Sorun: konteyner 2600px ekranda 1900px'e kadar açılıyor
   ama okunur metin ~650px; geri kalan ~1250px sağda boş kalıyor, blok sola
   yapışık duruyor (denetim aracı "yetim-oge" olarak yakalar).

   ⚠️ ÖNCE YANLIŞ ÇÖZÜM DENENDİ (27 Ağu, geri alındı): paragrafın KENDİSİNİ
   ortalamak. İki regresyon üretti — (a) ortalanan yalnızca doğrudan çocuklar
   olduğu için başlık ortalanıp altındaki liste solda kalıyor, başlık ile
   listesi birbirinden KOPUYORDU; (b) başlığa verilen max-width, iletişim
   bölümündeki flex-basis:100%'u bozuyordu.

   DOĞRUSU: metin genişliği tek tek ögelere değil, KAPSAYICIYA verilir.
   Böylece başlık/paragraf/liste/buton hepsi AYNI sütunun içinde kalır,
   aralarındaki hizalama bozulmaz, blok bütün olarak ortalanır.
   Kullanım: içinde görsel/ızgara/rail OLMAYAN bölümlerin .atk-bolum-ic'ine
   `atk-yazi-ortala` sınıfı eklenir. */
/* ⚠️ Özgüllük: `.atk-bolum-ic` bu dosyada DAHA SONRA geliyor ve aynı
   özgüllükte (0,1,0) `max-width` veriyordu - ilk denemede bu kural sessizce
   eziliyordu (kendi tuzak listemizin "özgüllük yarışı" maddesi). İki sınıf
   birleştirilerek (0,2,0) yapıldı. */
.atk-yazi-ortala,
.atk-bolum-ic.atk-yazi-ortala { max-width: min(var(--atk-icerik-max), 62ch); margin-inline: auto; }

.atk-img-metin {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-rows: repeat(20, min-content);
  column-gap: 6%; row-gap: 14px;
  align-items: start; align-content: start;
}
/* ⚠️ 27 Agu 2026, IKINCI duzeltme — ilk denemem TAM TUTMADI, olcumle
   yakalandi: paragraf 1 ile 2 arasinda 1920px'te hala 466-520px olu bosluk
   vardi (2..n arasi 14px'e inmisti).
   Gercek kok neden: `height: 100%` bir grid ogesinde, konteyner yuksekligi
   BELIRSIZ (auto) oldugu icin COZULMUYOR - `auto`ya dusuyor, gorsel dogal
   560px yuksekligini aliyor ve satirlari yine o sisiriyordu. Ustelik
   `align-self: stretch`, height ayarliyken yok sayiliyor.
   Dogrusu: height ayarlanmaz (stretch isini yapsin) + `min-height: 0` ile
   gorselin ICSEL minimum yuksekligi satir olcusune KATILMAZ. Boylece
   satirlar yalnizca metne gore olculur, gorsel de o yuksekligi doldurur. */
.atk-img-metin > img {
  grid-row: 1 / -1; align-self: stretch;
  width: 100%; height: auto; min-height: 0;
  object-fit: cover; border-radius: 8px; display: block;
}
.atk-img-metin > img:first-child { grid-column: 1; }
.atk-img-metin > img:last-child { grid-column: 2; }
.atk-img-metin > p, .atk-img-metin > h2, .atk-img-metin > h3, .atk-img-metin > ul, .atk-img-metin > .atk-buton-sarici { grid-column: 2; margin: 0; }
.atk-img-metin:has(> img:last-child) > p,
.atk-img-metin:has(> img:last-child) > h2,
.atk-img-metin:has(> img:last-child) > h3,
.atk-img-metin:has(> img:last-child) > ul,
.atk-img-metin:has(> img:last-child) > .atk-buton-sarici { grid-column: 1; }
/* ⚠️ Gorsel-SAGDA olan bloklarda oran TERS cevrilmeli: yukaridaki
   0.85fr/1.15fr sabit birakilirsa o bloklarda dar sutuna METIN, genis
   sutuna GORSEL duserdi - yani istenenin tam tersi. */
.atk-img-metin:has(> img:last-child) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
/* 1199px altinda hala 1fr/1fr'e dusuluyor (metin zaten 28 Agu 2026'da
   agirlikli hale geldi ama bu kural buyuk/orta ekran arasindaki 45-75
   karakter okunurluk analizini bozmamak icin korundu). % gap bu aralikta
   da gecerli (900px'te ~54px, asiri buyumuyor). */
@media (max-width: 1199px) {
  .atk-img-metin,
  .atk-img-metin:has(> img:last-child) { grid-template-columns: 1fr 1fr; }
}
.atk-img-metin > .atk-buton-sarici { margin-top: 8px; }
/* ⚠️ 28 Ağu 2026: yığılma eşiği 700px idi; denetim aracı 768 ve 1000px'te
   metin sütununun ~33-38 karaktere düştüğünü ölçtü (okunur alt sınır 45).
   İki sütun, konteyner ~900px'in altına inince metni boğuyor - eşik 900'e
   çekildi. Kural: sütun sayısını ekran değil, SÜTUNA DÜŞEN GENİŞLİK belirler. */
/* ⚠️ İKİNCİ hata (28 Ağu 2026, ilkokul denetiminde yakalandı): görsel SONDA
   olan blokların `:has(> img:last-child)` varyantı özgüllükçe (0,2,0) düz
   `.atk-img-metin`'den (0,1,0) daha güçlü - bu media query yalnızca düz
   seçiciyi eziyordu, `:has()` varyantı hâlâ 2 sütunlu kalıp görsel sütunu
   BOŞ duruyordu (metin yarım genişliğe sıkışıyordu, 390px'te ~15 karakter).
   Kendi "özgüllük yarışı" tuzağımıza kendimiz düştük - :has() varyantı da
   ayrıca eziliyor. */
@media (max-width: 900px) {
  .atk-img-metin,
  .atk-img-metin:has(> img:last-child) { grid-template-columns: 1fr; gap: 20px; }
  .atk-img-metin > img:first-child, .atk-img-metin > img:last-child { grid-column: 1; grid-row: auto; }
  .atk-img-metin > p, .atk-img-metin > h2, .atk-img-metin > h3, .atk-img-metin > ul { grid-column: 1; }
}

/* ---- Zaman Çizelgesi (anadolu-lisesi + ortaokul'da aynen tekrarlanan kalıp:
   ikon+baslik ustte tam genislik, altinda gorsel + ders listesi yan yana). ----
   Fragman [ikon][h2][.atk-al-zaman-gorsel][.atk-al-zaman-liste] siralı geliyor -
   icerik-html olusturma script'i bu iki sarmalayiciyi BS4 ile ekliyor. */
.atk-al-zaman { display: flex; flex-wrap: wrap; }
.atk-al-zaman > .atk-ikon-sarici, .atk-al-zaman > h2 { flex-basis: 100%; text-align: center; }
.atk-al-zaman-gorsel { flex: 1 1 380px; margin-top: 32px; }
.atk-al-zaman-liste { flex: 1 1 320px; margin-top: 32px; padding-left: 20px; align-self: center; }
/* Gorsel PORTRE (721x1080) - dogal en/boy ile skalarsa 380px genislikte 570px
   yuksekligi asip liste kolonunu cok gerideki bosluga itiyordu (26 Agu 2026'da
   ortaokul'da yakalandi). Production'in kendisi de sabit yukseklik + object-fit:
   cover kullaniyor (olcum: 597x550px) - ayni yontem uygulandi. */
.atk-al-zaman-gorsel img { width: 100%; height: 460px; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 700px) { .atk-al-zaman-gorsel img { height: 320px; } }
.atk-al-zaman-liste p { margin: 0 0 10px; font-size: 17px; }
.atk-al-zaman-liste p em { color: var(--atk-altin); font-style: normal; }
@media (max-width: 700px) { .atk-al-zaman-liste { padding-left: 0; } }

/* ---- Elementor Pro "Form" widget'i (kayit-bilgi-talebi, insan-kaynaklari,
   bize-ulasin, kisisel-verileri-koruma vb.) - HTML (input adlari, form_id
   gizli input'u) HIC DEGISTIRILMEDI, Worker (src/worker/forms.js) ayni
   `form_fields[...]` alanlarini okumaya devam ediyor. Gonderim JS'i:
   /assets/formlar.js (native fetch, Elementor'un jQuery runtime'ina gerek
   yok). ---- */
.atk-form-form-fields-wrapper { display: flex; flex-wrap: wrap; margin: 0 -9px; }
.atk-form-field-group { box-sizing: border-box; padding: 0 9px 20px; flex: 0 0 50%; max-width: 50%; }
.atk-form-field-group.atk-sutun-100 { flex: 0 0 100%; max-width: 100%; }
.atk-form-field-group.atk-sutun-33 { flex: 0 0 33.333%; max-width: 33.333%; }
@media (max-width: 640px) { .atk-form-field-group { flex: 0 0 100%; max-width: 100%; } }

/* kisisel-verileri-koruma'daki aciklama metni (form_id f0999c1, "field-type-html") */
.atk-form-field-type-html { font-size: 14px; line-height: 1.6; color: var(--atk-lacivert); }

.atk-form-field-label { display: block; margin-bottom: 8px; font-size: 15px; color: var(--atk-lacivert); }
.atk-form-field-group.atk-form-field-required .atk-form-field-label::after { content: " *"; color: #c0392b; }

.atk-form-field-textual, .atk-yukleme-alani, textarea.atk-form-field,
select.atk-form-field-textual {
  width: 100%; box-sizing: border-box; padding: 12px 16px; font-size: 15px;
  font-family: Montserrat, sans-serif; color: var(--atk-lacivert);
  background: #fff; border: 1.6px solid #b7b7b7; border-radius: 4px;
}
.atk-form-field-textual:focus, textarea.atk-form-field:focus, select.atk-form-field-textual:focus {
  outline: 2px solid var(--atk-altin); outline-offset: 1px; border-color: var(--atk-altin);
}
textarea.atk-form-field { resize: vertical; }
.atk-secim-sarici { position: relative; }
select.atk-form-field-textual[multiple] { height: auto; }
/* ⚠️ 26 Agu 2026, Oğuz'un "bize ulaşın formu göze hoş gelmiyor" turu
   sırasında bulunan GERÇEK, önceki turlarda hiç yakalanmamış bir hata:
   Elementor'un dekoratif "aşağı ok" SVG'si (`.select-caret-down-wrapper`)
   için HİÇ boyut/konum kuralı yoktu - ham SVG'nin kendi viewBox'ı
   (571.4×571.4) tarayıcının intrinsik boyut olarak kullanmasına yol açıp
   dev, siyah bir üçgen/şekil olarak select kutusunun ALTINDA ayrı bir
   blok halinde render oluyordu (ekran görüntüsüyle yakalandı, 358×358px
   ölçüldü). Doğru "select ok'u" deseni: küçük, mutlak konumlu, tıklamayı
   engellemeyen bir ikon + tarayıcının kendi native ok'unu gizleyen
   appearance:none (aksi halde iki ok üst üste binerdi). */
select.atk-form-field-textual {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
}
.select-caret-down-wrapper {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  width: 12px; height: 12px; pointer-events: none;
}
.select-caret-down-wrapper svg { width: 100%; height: 100%; fill: var(--atk-lacivert); }

.atk-form-field-subgroup { display: block; }
.atk-form-field-option { display: flex; align-items: flex-start; gap: 8px; }
.atk-form-field-option input[type="checkbox"], .atk-form-field-option input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.atk-form-field-option label { font-size: 14px; color: var(--atk-lacivert); line-height: 1.5; }
.atk-form-field-option a { color: var(--atk-lacivert); text-decoration: underline; }
/* 28 Ağu 2026, denetim aracının bulgusu: onay kutusu 13x13px - mobilde
   parmakla isabet ettirmek zor (WCAG 2.5.8 asgari 24px). Form alanına
   (name/id/fonksiyonel yapı) dokunulmuyor, yalnızca boyut büyütülüyor. */
@media (max-width: 600px) {
  .atk-form-field-option { min-height: 44px; align-items: center; }
  .atk-form-field-option input[type="checkbox"], .atk-form-field-option input[type="radio"] {
    width: 24px; height: 24px; margin-top: 0;
  }
}

.e-form__buttons { margin-top: 6px; }

.atk-form-form button[type="submit"]:disabled { opacity: .6; cursor: default; }

/* formlar.js'in ekledigi basari/hata mesaji */
.atk-form-mesaj { margin-top: 16px; padding: 14px 18px; border-radius: 4px; font-size: 15px; }
.atk-form-mesaj--basari { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc0; }
.atk-form-mesaj--hata { background: #fdecea; color: #b3261e; border: 1px solid #f3c2bd; }

/* ---- Fotoğraf galerisi (Elementor "Gallery" widget'inin yerine) ----
   26 Agu 2026: bu widget'in gorselleri Elementor'un KENDI JS'i tarafindan
   `data-thumbnail` niteliginden calisma aninda yukleniyordu (statik HTML'de
   sadece bos <div> vardi) - biz build-time'da gercek <img>'e cevirdik
   (bkz. astro_uret script'lerindeki galeri_donustur()), o yuzden burada JS'e
   HIC bagimli olmadan native CSS grid + kucuk bir lightbox (galeri.js) yeterli. */
/* 🐛 30 Ağu 2026, Oğuz: "fotoğraf galerisinde fotoğraflar desktop görüntüde
   bile tek sıra alt alta, öyle olur mu hiç." Ölçüldü: 47 öğenin hepsi aynı
   x'te, kapsayıcı `display: block`.
   KÖK NEDEN: galeri öğeleri kaynak HTML'de SINIFSIZ bir `<div>` içine sarılı
   (28 Ağu'daki ölü-Elementor-sınıfı temizliğinde o sarmalayıcının sınıfı
   silinmiş). Grid `.atk-galeri-grid`'e uygulanıyordu ama onun TEK çocuğu o
   sarmalayıcı — grid bir sütunluk tek hücre yapıyor, 47 `<a>` içeride normal
   blok akışında alt alta diziliyordu. Denetim aracı bunu yakalayamaz: taşma
   ve satır uzunluğu ölçer, ızgara yerleşimini değil.
   Çözüm: hem kapsayıcı hem (varsa) sınıfsız sarmalayıcı hedefleniyor. */
/* 30 Ağu 2026, Oğuz: "ekran çok genişse görseller 4 değil 5 tane olabilir
   yan yana, biraz daha büyük olabilirler böylece 5 tane ekranı doldurur."
   Sabit `repeat(4, 1fr)` yerine `auto-fit`: sütun SAYISI artık genişliğin
   sonucu (K2). 330px asgari sütunla ölçülen sonuç: ~1470px kapsayıcıda 4,
   ~1840px ve üstünde 5 sütun; tavan 1900px olduğu için 6'ya çıkmıyor —
   yani çok geniş ekranda kareler küçülmek yerine BÜYÜYOR. */
.atk-galeri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* ⚠️ Önce `auto-fit, minmax(330px)` denendi ama TEK bir asgari değerle hem
   1280px'te 4 hem 1900px'te 5 sütun elde edilemiyor (genişlik oranı 1.53,
   istenen sütun oranı 1.25) — 330px'te 1280 ekran 3 sütuna düşüyordu.
   Bu yüzden basamaklar açıkça yazıldı. */
@media (min-width: 1800px) { .atk-galeri-grid { grid-template-columns: repeat(5, 1fr); } }
.atk-galeri-oge { display: block; aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.atk-galeri-oge img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.atk-galeri-oge:hover img, .atk-galeri-oge:focus-visible img { transform: scale(1.06); }
@media (max-width: 900px) { .atk-galeri-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .atk-galeri-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; } }

/* lightbox — galeri.js tarafindan acilip kapatiliyor */
.atk-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(10,23,41,.92); align-items: center; justify-content: center; padding: 40px 20px;
}
.atk-lightbox.is-acik { display: flex; }
.atk-lightbox img { max-width: 100%; max-height: 85vh; border-radius: 4px; display: block; }
.atk-lightbox figcaption { color: #fff; text-align: center; margin-top: 12px; font-size: 15px; }
.atk-lightbox-kapat, .atk-lightbox-onceki, .atk-lightbox-sonraki {
  position: fixed; background: rgba(255,255,255,.12); color: #fff; border: none;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.atk-lightbox-kapat:hover, .atk-lightbox-onceki:hover, .atk-lightbox-sonraki:hover { background: rgba(255,255,255,.24); }
.atk-lightbox-kapat { top: 20px; right: 20px; }
.atk-lightbox-onceki { top: 50%; left: 20px; transform: translateY(-50%); }
.atk-lightbox-sonraki { top: 50%; right: 20px; transform: translateY(-50%); }

/* ---- Genel bolum/kutu araclari - sayfa icerikleri bunlari kullanir ---- */
.atk-bolum { padding: 64px 20px; }
.atk-bolum-ic { max-width: var(--atk-icerik-max); margin: 0 auto; }
.atk-bolum--koyu { background: var(--atk-lacivert); color: #fff; }
.atk-bolum--altin-cizgi { border-top: 4px solid var(--atk-altin); }
/* ⚠️ 28 Ağu 2026, Oğuz: "mobilde bazı gereksiz boşluklar gördüm".
   Ölçüldü: her bölüm 40px üst + 40px alt padding alıyordu, yani bölümler
   arası 80px. Küçük ekranda bu, içeriği gereksizce aşağı itiyor. 32px'e
   çekildi (arası 64px) - hâlâ net bir bölüm ayrımı var ama kaydırma
   mesafesi kısalıyor. */
@media (max-width: 640px) { .atk-bolum { padding: 32px 16px; } }

/* ═══ KADEME SAYFALARININ İLETİŞİM BUTONLARI — TEK KAYNAK ═══════════════
   30 Ağu 2026, Oğuz: "4 okul sayfasında da butonlar aynı buton
   animasyonunda aynı tarz olsun, genişlikleri aynı olsun, desktopda yan
   yana mobilde alt alta olsunlar."
   Ölçüm: masaüstü/mobil düzeni zaten doğruydu, ama (a) genişlikler METNE
   göre değişiyordu (176-288px arası, sayfadan sayfaya farklı) ve (b) lise
   sayfasının butonları TERS renkteydi (beyaz zemin/lacivert yazı; diğer üçü
   lacivert zemin/beyaz yazı) — 28 Ağu'da gradyan zemin için verilmiş bir
   sayfa-özel istisnaydı, artık standarda alındı.
   Dört sayfa da buradan besleniyor; sayfa-özel buton kuralı yazılmaz. */
.atk-ao-iletisim .atk-bolum-ic,
.atk-ik-iletisim .atk-bolum-ic,
.atk-or-iletisim .atk-bolum-ic,
.atk-al-iletisim .atk-bolum-ic {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 16px;
}
/* Başlık kendi satırını kaplar, butonlar altında tek sırada dizilir. */
.atk-ao-iletisim .atk-bolum-ic > h2,
.atk-ik-iletisim .atk-bolum-ic > h2,
.atk-or-iletisim .atk-bolum-ic > h2,
.atk-al-iletisim .atk-bolum-ic > h2 { flex: 0 0 100%; margin-bottom: 8px; }

/* Eşit genişlik: `flex-basis` sabit, `flex-grow` kapalı → metin uzunluğu
   artık genişliği belirlemiyor. */
.atk-ao-iletisim .atk-buton-sarici,
.atk-ik-iletisim .atk-buton-sarici,
.atk-or-iletisim .atk-buton-sarici,
.atk-al-iletisim .atk-buton-sarici { flex: 0 0 260px; margin: 0; min-width: 0; }
/* ⚠️ `min-width: 0` şart: varsayılan `auto` ile uzun metinli bir buton
   flex-basis'i aşıp satırdaki diğerlerinden geniş kalıyordu (anaokulu'nda
   260 yerine 264px ölçüldü). */

.atk-ao-iletisim .atk-buton,
.atk-ik-iletisim .atk-buton,
.atk-or-iletisim .atk-buton,
.atk-al-iletisim .atk-buton {
  display: flex; width: 100%; box-sizing: border-box;
  align-items: center; justify-content: center; gap: 10px;
  background: var(--atk-lacivert); color: #fff;
  padding: 14px 20px; border-radius: 4px;
  transition: background .2s ease, transform .2s ease;
}
.atk-ao-iletisim .atk-buton:hover,
.atk-ik-iletisim .atk-buton:hover,
.atk-or-iletisim .atk-buton:hover,
.atk-al-iletisim .atk-buton:hover {
  background: var(--atk-altin); color: var(--atk-lacivert); transform: translateY(-2px);
}

/* Mobil: alt alta, tam genişlik. */
@media (max-width: 600px) {
  .atk-ao-iletisim .atk-bolum-ic,
  .atk-ik-iletisim .atk-bolum-ic,
  .atk-or-iletisim .atk-bolum-ic,
  .atk-al-iletisim .atk-bolum-ic { flex-direction: column; align-items: stretch; gap: 12px; }
  .atk-ao-iletisim .atk-buton-sarici,
  .atk-ik-iletisim .atk-buton-sarici,
  .atk-or-iletisim .atk-buton-sarici,
  .atk-al-iletisim .atk-buton-sarici { flex: 0 0 auto; width: 100%; }
}

/* ═══ SABİT INSTAGRAM GALERİSİ (.atk-ig-sabit) ══════════════════════════
   🐛 30 Ağu 2026, Oğuz: "ana sayfadaki o 8 görsel alt alta değil geniş
   ekranda 4 tane bile yan yana gelebilmeli."
   KÖK NEDEN: bu grid kuralları 25 Ağustos'ta AYRI bir dosyada
   (`public/assets/ig-sabit.css`) yazılmıştı ama o dosya HİÇBİR YERDE
   `<link>`lenmemiş — Layout.astro'ya hiç eklenmemiş. Yani kural hep
   vardı ama tarayıcıya hiç gönderilmiyordu; `.atk-ig-sabit` normal blok
   akışında kalıp her `<a>` kendi satırına düşüyordu (ana sayfa VE
   fotoğraf galerisi sayfası ikisi de etkileniyordu). Kurallar buraya
   (her sayfada zaten yüklü olan icerik.css) taşındı, orijinal dosya
   silindi — artık ayrı bir `<link>` eklemeye gerek yok. */
.atk-ig-sabit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
/* 30 Ağu 2026, Oğuz: "sayfa daralınca 2,2,2,2" — ara 3-sütun basamağı
   kaldırıldı, doğrudan 4'ten 2'ye geçiyor (4 üstte + 4 altta → daralınca
   4 satır × 2 sütun). */
@media (max-width: 760px) {
  .atk-ig-sabit { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.atk-ig-sabit a {
  position: relative;
  display: block;
  aspect-ratio: 700 / 875;
  border-radius: 6px;
  overflow: hidden;
  background: #14294a;
}
.atk-ig-sabit img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.atk-ig-sabit a:hover img,
.atk-ig-sabit a:focus-visible img { transform: scale(1.05); }
.atk-ig-sabit a:focus-visible { outline: 2px solid #ad9c6e; outline-offset: 3px; }
.atk-ig-sabit a::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10,23,41,.32)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23fff' stroke='none'/%3E%3C/svg%3E")
    center/34px no-repeat;
  opacity: 0;
  transition: opacity .25s;
}
.atk-ig-sabit a:hover::after,
.atk-ig-sabit a:focus-visible::after { opacity: 1; }