/* ==========================================================================
   İLKCAN — ÖZELLEŞTİRME KATMANI
   ==========================================================================

   BU DOSYA İNCE. Görünümü satın alınan Kidschool şablonunun `main.css`'i
   veriyor; burada YENİ BİR PALET, YENİ BİR TİPOGRAFİ ÖLÇEĞİ ya da yeni bir
   bölüm tasarımı YOK. Kurum şablonu seçip satın aldı, görsel yön onun kararı.

   Bu katmanın işi tam olarak beş şey ve fazlası değil:

     1. Şablonun kendi fontlarını kendi sunucumuzdan tanımlamak (`@font-face`).
     2. Şablonun vurgu renk DEĞİŞKENLERİNİ kurumun logosuna yaklaştırmak.
     3. Logonun yerleşimi ve ölçüsü.
     4. CSP'nin engellediği iki satır içi `style` özniteliğinin yerine geçen
        sınıflar.
     5. Türkçe metnin ve erişilebilirliğin gerektirdiği düzeltmeler
        (azaltılmış hareket, odak halkası, içeriğe atla, slider duraklatma).

   ŞABLONUN `main.css`'İNE DOKUNULMUYOR. Oraya yazılan her satır bir sonraki
   tema güncellemesinde kaybolur. Sıra `temel.html.twig`'te sabitli:
   bootstrap → swiper/aos/magnipic/phosphor → main → custom.
   ========================================================================== */

/* ==========================================================================
   1. ŞABLONUN FONTLARI — KENDİ SUNUCUMUZDAN
   ==========================================================================
   AİLELER ŞABLONUN. `main.css` şunları istiyor:

       --heading-font: "Nunito", "Love Ya Like A Sister";
       --body-font: "Source Sans Pro", "Pangolin";

   ve dördünü `@import url("https://fonts.googleapis.com/…")` ile çekiyordu.
   O `@import` taşıma betiğinde siliniyor: Faz 1'in CSP'si `style-src` için dış
   origin tanımıyor, yani istek tarayıcıda zaten engellenirdi — ve her
   ziyaretçiyi üçüncü tarafa tanıtırdı. AYNI AİLELER burada tanımlı, yani
   görünüm birebir korunuyor.

   `Source Sans Pro` ŞABLONUN KENDİ `@import`'UNDA DA YOKTU: demo sitede gövde
   metni ikinci sıradaki Pangolin ile çiziliyor. Bu davranış şablonun
   görünümünün parçası ve korunuyor; eksik aile EKLENMİYOR, çünkü eklemek
   şablonun görünümünü değiştirirdi.

   TÜRKÇE DOĞRULANDI. Dört ailenin dördünde de `ı`/`i` ve `İ`/`I` ayrı
   gliflere bağlı VE ayrı konturlar taşıyor; denetim
   `scripts/fontlari-hazirla.py::dogrula` içinde ve font üretilirken çalışıyor.
   Kurumun adı ("Özel İlkcan Özel Eğitim ve Rehabilitasyon Merkezi") ikisini de
   içeriyor.

   `font-display: swap` ZORUNLU: aksi hâlde tarayıcı font inene kadar metni
   gizler ve yavaş bir mobil bağlantıdaki veli boş bir sayfa görür. */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-tr.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pangolin";
  src: url("../fonts/pangolin-latin-tr.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Love Ya Like A Sister";
  src: url("../fonts/love-ya-like-a-sister-latin-tr.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("../fonts/source-code-pro-latin-tr.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. ŞABLONUN VURGU RENKLERİ LOGOYA YAKLAŞTIRILIYOR
   ==========================================================================
   KURAL: şablonun vurgu renkleriyle kurumun logosu çakışırsa LOGO KAZANIR.
   Logo yeniden çizilmiyor, rengi değiştirilmiyor, üzerine filtre
   uygulanmıyor — şablonun DEĞİŞKENLERİ logoya yaklaştırılıyor.

   ÖLÇÜLEN DEĞERLER. Logonun baskın renkleri dosyadan sayılarak alındı
   (alfa > 200 olan pikseller, 12'lik kovalarda):

       macenta  hsl(328, 89%, 45%)   — el yazısı "İlk Can"
       turkuaz  hsl(187, 50%, 44%)   — "ÖZEL" ve alt satır
       sarı     hsl( 41, 87%, 54%)   — güneş motifi

   Şablonun kendi değerleri:

       --main      hsl(  9, 97%, 57%)   kırmızı-turuncu
       --main-two  hsl( 42, 99%, 49%)   kehribar

   `--main-two` zaten logonun sarısı; ölçülen değere bir tık yaklaştırıldı.
   `--main` ise kırmızı-turuncu ve logonun macentasıyla yan yana durduğunda
   iki ayrı kimlik gibi okunuyordu; logonun macentasına taşındı.

   ÜÇ DEĞİŞKEN YETİYOR, ÇÜNKÜ ŞABLON GERİSİNİ ONLARDAN TÜRETİYOR. `main.css`
   `--main-50 … --main-900` tonlarının hepsini `hsl(var(--main-h), …)` ile
   hesaplıyor ve CSS özel özellikleri KULLANIM ANINDA çözülüyor: burada
   H/S/L'yi değiştirmek on bir tonu birden taşıyor. Ton listesi kopyalansaydı,
   biri güncellenirken diğeri unutulurdu.

   YAN FAYDA, ÖLÇÜLDÜ: şablonun `hsl(9, 97%, 57%)` değeri üzerine beyaz metin
   ~3,2:1 kontrast veriyor ve WCAG AA'nın 4,5:1 eşiğini KARŞILAMIYOR.
   Logonun macentası aynı kullanımda ~5,8:1 veriyor. Yani bu düzeltme kimlik
   kararı olduğu kadar erişilebilirlik düzeltmesi. */
:root {
  --main-h: 328;
  --main-s: 89%;
  --main-l: 45%;

  --main-two-h: 41;
  --main-two-s: 90%;
  --main-two-l: 52%;
}

/* ==========================================================================
   3. LOGO
   ==========================================================================
   Ölçü sınıfı (`max-w-200-px`) şablonun kendi sınıfı; burada yalnızca
   ORANIN KORUNMASI garanti ediliyor. `<img>` üzerinde `width`/`height`
   öznitelikleri var (CLS için zorunlu) ve `max-width` ile daraltılan bir
   görselde `height: auto` yazılmazsa tarayıcı öznitelikteki yüksekliği
   uygular — logo yatay olarak ezilirdi. */
.logo img,
.mobile-menu__logo img,
.footer .ilkcan-alt-logo {
  height: auto;
}

.mobile-menu__logo img {
  max-width: 180px;
}

/* ALTBİLGİ LOGOSU KENDİ ALANINDA.
   ÖLÇÜLDÜ (1440 px): şablonun altbilgi sütunu logo ile paragrafı üst üste
   bindiriyordu. İki nedeni vardı:

   1. Bağlantı `d-inline-block` ile satır kutusu kadar yer kaplıyordu; logonun
      gerçek yüksekliği (480×182) akışa girmiyordu.
   2. Başlık logosu 200 px'e sığdırılmış; altbilgide aynı ölçü sütunun yarısını
      kaplayıp paragrafı sıkıştırıyordu.

   Sütuna ayrıca bir yığın bağlamı veriliyor: şablonun süsleri
   `position-absolute` ve `z-n1` taşıyor, sütunun `z-index` alması onları
   metnin ARDINDA tutuyor.

   ÜÇÜNCÜ BİR NEDEN VARDI VE ARTIK YOK: zürafa süsü (`footer-shape1.png`)
   sütunun soluna düşüyor ve logonun şeffaf zemininden görünüyordu. Kurum
   zürafanın kaldırılmasını istedi; süs gitti, onu telafi eden dolgu da. */
.footer .ilkcan-alt-kunye {
  position: relative;
  z-index: 2;
}

.footer .ilkcan-alt-logo {
  height: auto;
}

.mobile-menu__logo img {
  max-width: 180px;
}

/* ALTBİLGİ LOGOSU KENDİ ALANINDA.
   ÖLÇÜLDÜ (1440 px): şablonun altbilgi sütunu logo, paragraf ve zürafa süsünü
   üst üste bindiriyordu — logo metnin üstünde, zürafa logonun üstünde. Üç
   nedeni vardı ve üçü de burada kapanıyor:

   1. Bağlantı `d-inline-block` ile satır kutusu kadar yer kaplıyordu; logonun
      gerçek yüksekliği (480×182) akışa girmiyordu.
   2. Süs görselleri `position-absolute` ve altbilgi sütununun üstüne düşüyor;
      sütuna bir yığın bağlamı gerekiyor.
   3. Başlık logosu 200 px'e sığdırılmış; altbilgide aynı ölçü sütunun yarısını
      kaplayıp paragrafı sıkıştırıyordu.

   Süsler `z-n1` ile zaten arkaya gönderilmiş; sütunun `position: relative` +
   `z-index` alması onları metnin ARDINDA tutuyor. */
.footer .ilkcan-alt-kunye {
  position: relative;
  z-index: 2;
}

/* KÜNYE SÜTUNU ZÜRAFANIN YANINDAN BAŞLIYOR.
   ÖLÇÜLDÜ (1440 px): `footer-shape1.png` zürafası viewport'un 0–248 px
   aralığını kaplıyor, künye sütunu ise 209 px'te başlıyordu — logo ile zürafa
   aynı 40 pikselde üst üste biniyordu. Yığın sırası doğru (zürafa `z-n1`), ama
   logonun şeffaf zemininden zürafanın kafası GÖRÜNÜYOR ve göz bunu çakışma
   olarak okuyor.

   NEDEN SÜS TAŞINMIYOR. Zürafanın yeri şablonun kararı; şablonun DÖRT sütunlu
   altbilgisinde sütun içeriği daha aşağıdan başlıyor ve çakışma oluşmuyor.
   Bizim altbilgimiz İKİ sütunlu ve daha kısa — yani boşluk, kaldırdığımız iki
   sütunun bıraktığı boşluk. Onu toparlamak tam olarak bu katmanın işi.

   Yalnızca süsün çizildiği kırılımda (`d-xl-block`) uygulanıyor; altında süs
   zaten gizli ve dolgu bedava boşluk olurdu. */
@media (min-width: 1200px) {
  .footer .ilkcan-alt-kunye {
    padding-left: 4.5rem;
  }
}

.footer .ilkcan-alt-logo {
  display: block;
  max-width: 170px;
}

/* LOGO KENDİ BLOĞUNU KAPLIYOR — ve sorun burada, `<a>` tarafındaydı.
   ÖLÇÜLDÜ: logoyu saran bağlantı satır içi bir öğe; içindeki `display: block`
   görsel akışa girse de bağlantının kendi kutusu SATIR YÜKSEKLİĞİ kadar
   kalıyor ve altındaki paragraf logonun üstüne biniyordu. Görsele `display:
   block` vermek yetmiyor, bağlantının da blok olması gerekiyor.

   Alt boşluk da burada, görselde değil: aksi hâlde boşluk bağlantının satır
   kutusunun içinde kalırdı. */
.footer .ilkcan-alt-kunye > div > a:first-child {
  display: block;
  width: fit-content;
  margin-bottom: 1.5rem;
}

/* PROGRAM BÖLÜMÜNÜN BAŞLIĞI SÜSÜN ÖNÜNDE.
   ÖLÇÜLDÜ (1440 px): `our-program-shaep1.png` gökkuşağı süsü magenta bölümün
   sol üstünde duruyor ve "Ruhsatımızda yazılı destek eğitim programları"
   başlığının İÇİNDEN geçiyordu. Süs `position-absolute` ama yığın sırası
   verilmemiş, yani kaynak sırasına göre başlığın üstüne biniyor.

   Süs KALDIRILMIYOR — tasarımın parçası. Yalnızca arkaya gönderiliyor ve
   başlık bloğu öne alınıyor. */
.ilkcan-bolum-basligi {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   4. ŞABLONUN İKİ SATIR İÇİ `style` ÖZNİTELİĞİNİN YERİNE GEÇEN SINIFLAR
   ==========================================================================
   Şablonun `index.html`'i iki yerde `style="background-image: url(…)"`
   kullanıyor. CSP `style-src 'self'` diyor ve bu yönerge satır içi stil
   ÖZNİTELİĞİNİ de kapsıyor: öznitelik olduğu gibi taşınsaydı tarayıcı onu
   yok sayar ve iki bölüm zeminsiz kalırdı. Politikayı gevşetmek yerine
   (nonce tavizi kaldırılmıyor) aynı görsel buraya birer sınıf olarak taşındı.

   GÖRSEL ŞABLONUN KENDİ DOSYASI, yol da şablonunki. Yeni bir zemin
   tasarlanmıyor. */
.ilkcan-alt-serit-zemini {
  background-image: url("../images/bg/footer-bottom-bg-img1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* HERO FOTOĞRAFININ MASKESİ TÜM KUTUYA YAYILIYOR.
   Şablonun `choose-us-musk-bg-img1` sınıfı `mask-size: cover` diyor ve maske
   dosyası (`choose-us-bg-img1.png`) NEREDEYSE KARE (274×292). Kurumun hero
   fotoğrafı ise GENİŞ bir mimari kare (1280×1052).

   ÖLÇÜLDÜ: `cover` ile maske kutuyu kaplarken sağa taşıyor; sol ve üst kenar
   organik biçimde yuvarlanırken sağ kenar fotoğrafın kendi düz kenarı olarak
   kalıyor. Sonuç dengesiz — şablonun simetrik blob'u değil, yamuk bir kırpma
   gibi okunuyor.

   `100% 100%` maskeyi kutuya YAYIYOR: dört köşe de organik, fotoğraftan
   yalnızca köşeler gidiyor. Blob'un oranı bir miktar geriliyor ama şekil
   şablonun kendi şekli ve fotoğrafın bilgi taşıyan orta bandı — bina
   cephesindeki program tabelaları — tam olarak korunuyor.

   MASKE 1200 px ALTINDA ZATEN KAPALI (şablonun kendi kuralı): dar ekranda
   fotoğraf düz dikdörtgen olarak çiziliyor. */
.ilkcan-hero-gorsel {
  mask-size: 100% 100%;
}

/* GALERİ IZGARASI DÜZENLİ: HER KARE AYNI ORANDA.
   ÖLÇÜLDÜ (1440 px): kareler 306×470 ve 306×408 olarak iki farklı yükseklikte
   çiziliyordu, satırlar hizalanmıyor ve aralarında boşluk kalıyordu. Sebep,
   `<img>` öznitelik oranının `aspect-ratio: auto 400/614` biçiminde
   yorumlanması: `auto` anahtarı, dosya indiği anda DOSYANIN kendi oranını
   üstün kılıyor. Kurumun fotoğrafları dikey ve yatay karışık olduğu için her
   kare kendi oranına gidiyordu.

   Oran burada `auto`suz sabitleniyor, yani indikten sonra da geçerli.
   4:3 seçildi: bina cepheleri, grup fotoğrafları ve iç mekân kareleri
   karışımında en az kırpan oran.

   `object-fit: cover` yine de duruyor — önizleme dosyaları zaten 4:3
   üretiliyor, ama panelden yüklenen ve önizlemesi olmayan bir görsel bu
   kutuya düştüğünde EZİLMEK yerine kırpılsın. */
.gallery-thumb img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ALT KENAR DÜZ OLDUĞU İÇİN EK DOLGUYA GEREK KALMADI.
   Tırtıklı alt kenar varken 240 px dolgu vardı, çünkü ~170 px'lik dalga
   kartların alt yarısını kesiyordu. Alt kenar düze döndü (şablonun tırtık
   varlıkları BEYAZ, altımızdaki bölüm KREM — birleşim tutmuyordu), dolayısıyla
   şablonun kendi `py-110` değeri yeterli.

   Sınıf duruyor: ÜST kenardaki `our-program-shape1` hâlâ var ve bölümün üst
   dolgusunu etkiliyor. */
.ilkcan-tirtikli-alt {
  padding-top: 150px;
}

/* SAYAÇ ŞERİDİNİN ÜSTÜNDE NEFES PAYI.
   Şerit hero'nun tırtıklı alt kenarının hemen altına düşüyor ve etiketler
   dalgaya değiyordu. Şablonun `pt-110` değeri, üstünde tırtık OLMAYAN bir
   bölüm için ölçülmüş. */
.ilkcan-sayac-serit {
  padding-top: 180px;
}

/* GALERİ ÜZERİNE GELME RENGİ LOGOYA UYUYOR.
   Şablonun `main.css`'i bu örtüye `#FC4525` yazıyor — TÜRETİLMİŞ değil, SABİT
   bir değer, yani `--main` logoya taşındığında geride kalan tek nokta.
   Sonuç: sayfanın tamamı macenta iken galeri karesine gelindiğinde eski
   kırmızı-turuncu beliriyordu. Saydamlık şablonun kendi oranı (%67). */
.gallery-thumb__link-two {
  background-color: hsl(var(--main) / 67%);
}

/* ==========================================================================
   5a. İÇERİĞE ATLA
   ==========================================================================
   Klavye ve ekran okuyucu kullanıcısı, her sayfada menüyü baştan geçmesin.
   Odaklanana kadar görünmez. Şablonda karşılığı yok. */
.icerige-atla {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background-color: hsl(var(--main));
  color: hsl(var(--white));
  text-decoration: none;
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform 140ms ease-out;
}

.icerige-atla:focus {
  transform: translateY(0);
  color: hsl(var(--white));
}

/* ==========================================================================
   5b. KLAVYE ODAĞI GÖRÜNÜR VE HER YERDE AYNI
   ==========================================================================
   Şablon odak halkasını birçok öğede bastırıyor (`focus-visible-border-none`
   gibi sınıflar) ve yerine bir şey koymuyor. Tarayıcı varsayılanını bastırıp
   yerine bir şey koymamak, klavyeyle gezen birini sayfada kaybeder.
   `:focus-visible` fareyle tıklayanı rahatsız etmiyor.

   ⭐ 17.08.2026 — TARAYICIDA ÖLÇÜLDÜ VE KURAL İKİ YERDEN KAYBEDİYORDU.
   Faz 5 "odak görünür" derken CSS'te bu kuralın VAR OLDUĞUNA bakmıştı;
   gerçek sayfada iki öğe hiçbir işaret taşımadan odak alıyordu:

     1. ÖZGÜLLÜK YARIŞI. Şablonun `.focus-outline-0:focus-visible { outline: 0
        !important }` kuralı buradaki halkayı eziyordu — `tw-mb-0`'ın 8 px'lik
        kaymayı kaybettiği yarışın aynısı. `!important` bu yüzden ZORUNLU:
        `!important` ile beyan edilmiş bir bastırmayı yalnızca `!important`
        geri alabilir.
     2. SEÇİCİ EKSİKLİĞİ. `<summary>` odak alabilen bir öğe ama listede
        yoktu.

   Ölçüm `tests/e2e/erisilebilirlik/05-klavye-ve-modal.spec.ts` içinde ve
   hesaplanmış stile bakıyor: bir kuralın yazılmış olması, kazandığı anlamına
   gelmiyor. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid hsl(var(--main)) !important;
  outline-offset: 2px;
}

/* ⭐ HARİTA ÇERÇEVESİ — CSS İLE ÇÖZÜLEMEYEN, ÖLÇÜLMÜŞ BİR BOŞLUK.
   Sekmeyle `<iframe>`'e gelindiğinde `document.activeElement` çerçeve öğesi
   OLUYOR ama Chromium ne `:focus` ne `:focus-visible` ile onu eşleştiriyor
   (`f.matches(':focus') === false` ölçüldü); odak çerçevenin İÇİNDEKİ belgeye
   geçtiği için stil ana belgeden uygulanamıyor. Sarmalayıcıya `:focus-within`
   yazmak da aynı sebeple çalışmıyor.
   Bu yüzden BURAYA ÇALIŞMAYAN BİR KURAL YAZILMIYOR: hiçbir şey yapmayan bir
   kural, sonraki okuyucuya sorunun çözülmüş olduğunu söyler. Boşluk
   `tests/e2e/erisilebilirlik/05-klavye-ve-modal.spec.ts` içinde gerekçesiyle
   kayıtlı ve ölçüm raporunda açık madde olarak duruyor. */

/* ==========================================================================
   5c. AZALTILMIŞ HAREKET — BURADA BİR ONAY KUTUSU DEĞİL
   ==========================================================================
   Kurumun hizmet verdiği nüfusun bir kısmı duyusal işlemleme farklılıkları
   taşıyor ve veliler de aynı evden geliyor. Tercih açıkken HİÇBİR geçiş,
   HİÇBİR kaydırma açılışı, HİÇBİR otomatik dönen liste ve HİÇBİR sayaç
   animasyonu çalışmaz; içerik doğrudan son hâlinde görünür.

   İKİ KATMAN BİRLİKTE ÇALIŞIYOR ve ikisi de gerekli:
   - `ilkcan-hareket.js` hareketi BAŞLATAN kapıları kapatıyor (AOS, Swiper
     `autoplay`, `counterUp`, GSAP süreleri).
   - Bu blok, betik hiç yüklenmese bile CSS'ten gelen hareketi kapatıyor:
     şablonun `animation-upDown`, `animation-scalation`, `animate__wobble__two`
     gibi ONLARCA süs animasyonu saf CSS ve JS'ten bağımsız çalışır.

   Kural GENEL olarak uygulanıyor — öğe öğe değil. Öğe öğe yazılsaydı Faz
   5b'de eklenen ilk yeni animasyon onu atlardı.

   `!important` bilinçli: şablonun `main.css`'i ve AOS kendi geçişlerini daha
   yüksek özgüllükle tanımlıyor; onları bastırmanın başka yolu yok. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* AOS öğelerini gizli bırakmadan son hâline sabitler. Yalnızca geçişi
     kapatmak YETMEZDİ: AOS başlangıç durumunu `opacity: 0` ile kuruyor ve
     geçiş çalışmazsa öğe SONSUZA KADAR görünmez kalırdı. */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Şablonun özel imleci fareyi izleyen sürekli bir hareket; tercih açıkken
     hiç çizilmiyor. */
  .cursor,
  .dot {
    display: none !important;
  }
}

/* ==========================================================================
   5d. OTOMATİK DÖNEN LİSTENİN DURAKLATMA DENETİMİ
   ==========================================================================
   Düğmeyi `ilkcan-hareket.js` ekliyor; WCAG 2.2 §2.2.2 beş saniyeden uzun
   süren otomatik hareket için duraklatılabilirliği ZORUNLU tutuyor ve şablon
   yalnızca FARE ile üzerine gelmeyi destekliyordu — dokunmatik ekranda ve
   klavyede karşılığı yok.

   Düğme GÖRÜNÜR: yalnızca ekran okuyucuya sunulan bir denetim, fareyi
   kullanamayan ama gören birine hiçbir şey vermezdi.

   ⭐ GÖRÜNÜMÜ 17.08.2026'DA ŞABLONUN KENDİ DÜĞMESİNE DEVREDİLDİ. Bu blok
   önceden düğmenin TAMAMINI kuruyordu: beyaz hap, kendi gölgesi, kendi
   yarıçapı. Sonuç, kartların altında duran küçük ve sahipsiz bir yazıydı ve
   kurum onu kaldırmak istedi. Kalıp artık `btn btn-main-two` (gerekçesi
   `ilkcan-hareket.js` içinde, sınıfları oradan ekleniyor); burada YALNIZCA
   şablonun düğmesinde karşılığı olmayan üç şey kalıyor — konum, yığın
   sırası ve ikincil bir denetime yakışan punto.

   `background-color` BİLEREK BURADA KALDI ve `!important` DEĞİL: şablonun
   `.btn-main-two` beyanı `!important` taşıdığı için görünür renk ondan
   geliyor. Buradaki değer, sınıf bir gün düşerse düğmenin ARKA PLANSIZ,
   yani zeminin üstünde okunamaz kalmamasını sağlayan yedek. */
.ilkcan-duraklat {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 20;
  background-color: hsl(var(--main));
  font-size: 0.8125rem;
  cursor: pointer;
}

/* ==========================================================================
   5e. BETİK YÜKLENMEZSE AÇILIŞ PERDESİ SAYFAYI KAPATMASIN
   ==========================================================================
   Şablonun `loader-mask`'ini `main.js` kaldırıyor. Betik engellenirse ya da
   inemezse perde ekranda kalır ve ziyaretçi BOŞ BİR SAYFA görür. `main.js`
   kendini `js-hazir` sınıfıyla bildirmiyor; bu yüzden koşul tersinden
   kuruluyor: perde varsayılan olarak KAPALI, `main.js` yüklendiğinde
   şablonun kendi kuralları devralıyor.

   ÖLÇÜLDÜ: `main.js` perdeyi `fadeOut` ile kaldırıyor, yani jQuery öğeye
   `display: none` yazıyor — aşağıdaki kural onunla çakışmıyor, yalnızca
   BAŞLANGIÇ durumunu değiştiriyor. */
.loader-mask {
  display: none;
}

/* ==========================================================================
   5f. TÜRKÇE METİN DÜZELTMELERİ
   ==========================================================================
   Şablon İngilizce metinle ölçülendi; Türkçe sözcükler belirgin biçimde uzun
   ("Rehabilitasyon", "Programlarımız", "Destekleyici Hizmetler"). İki yerde
   taşma ölçüldü ve ikisi de burada kapanıyor. */

/* Gezinti öğeleri şablonda `white-space` kısıtı taşımıyor; uzun Türkçe
   başlıklar 1024 px'te menüyü iki satıra kırıyordu. */
.nav-menu__link {
  white-space: nowrap;
}

/* Uzun e-posta adresi ve adres satırı 320 px'te sayfayı yana kaydırmasın.
   Şablonun kendi taşma kapısı yok. */
address,
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Şablonun `<address>` öğesi yok; Bootstrap'in eğik yazısı kurum adresini
   gövde metninden ayrı bir dile sokuyordu. */
address {
  font-style: normal;
}

/* ==========================================================================
   5g. KALDIRILAN SEPET/ARAMA ÖĞELERİNİN BIRAKTIĞI BOŞLUK
   ==========================================================================
   Şablonun başlığında arama düğmesi, sepet ikonu ve "Enrool Now" düğmesi yan
   yanaydı; ilk ikisi kaldırıldı (kurumun sattığı bir şey ve araması yok).
   Kalan tek öğe `tw-gap-4` ile hâlâ iki komşusu varmış gibi duruyordu.
   Boşluk dar ekranda kapanıyor, geniş ekranda şablonun ölçüsünde kalıyor. */
@media (max-width: 575px) {
  .header .container .d-flex.align-items-center.tw-gap-4 {
    gap: 0.5rem;
  }
}

/* ==========================================================================
   5h. YATAY TAŞMA KAPISI
   ==========================================================================
   Şablonun süs görselleri `position-absolute` ve bir kısmı bölüm kutusunun
   dışına taşıyor. Bölümlerin çoğunda `overflow-hidden` var ama hepsinde yok;
   320 px'te altbilgi ve iletişim bölümü sayfayı yana kaydırıyordu. */
body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* ==========================================================================
   ALTBİLGİ İLETİŞİM ŞERİDİ
   ==========================================================================
   Şablonun altbilgisinde sütunların altında üç iletişim kartı var ve aralarında
   noktalı bir ayırıcı çizgi. `main.css`'e dokunmadan burada.

   UZUN BİÇİM, KISAYOL DEĞİL. Önce `border-top: 1px dashed hsl(var(--main) /
   30%)` yazılmıştı ve çizgi HİÇ çıkmadı: CSS'te kısayolun bir parçası
   çözülemezse tarayıcı BÜTÜN tanımı atar, yani renk düşünce kalınlık ve
   biçim de düştü. Uzun biçimde renk çözülemezse yalnızca renk düşer; çizgi
   yine çizilir.

   Renk logonun macentasından türüyor (`--main`), sabit yazılmıyor: palet
   değişirse çizgi de takip etsin. */
.ilkcan-alt-iletisim {
  border-top-width: 2px;
  border-top-style: dashed;
  border-top-color: hsl(var(--main-h) var(--main-s) var(--main-l) / 35%);
}

.ilkcan-alt-ikon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;

  /* Şablonun `--white` değişkeni H/S/L üçlüsü olarak saklanıyor
     (`0 0% 100%`) ve kullanım yerinde `hsl()` ile sarmalanmasını bekliyor.
     Ham `#fff` yazmak, şablonun paletinden KOPUK bir nokta bırakırdı. */
  color: hsl(var(--white));
}

/* ÜÇ KARTIN RENGİ ŞABLONUN KENDİ TONLARINDAN.
   Şablonun altbilgi kartları kırmızı/sarı/pembe bir üçlü ritim kuruyor; aynı
   ritim korunuyor ama değerler şablonun `--main-*` / `--main-two-*` ton
   merdiveninden geliyor, çünkü o merdiven zaten logoya taşınmış `--main-h/s/l`
   üzerinden hesaplanıyor.

   İKİ YOL DENENDİ VE İKİSİ DE TESTLERE TAKILDI, ikisi de haklı olarak:

   1. `bg-warning-600` — şablonda KARŞILIĞI OLMAYAN bir sınıf. Sessizce hiçbir
      şey yapmadı ve e-posta ikonu zeminsiz kaldı.
   2. `--logo-turkuaz` diye YENİ bir değişken — `testKendiPaletimizTanimlanmiyor`
      yakaladı. Kural doğru: bu katmanın işi şablonun paletini kullanmak, yeni
      bir palet kurmak değil. Logonun turkuazı şablonda yok; onu eklemek
      "şablonun tasarımını kullan" kararından sapmanın ilk adımı olurdu.

   Üçüncü kart bu yüzden `--main-200`: aynı macentanın açık tonu. Şablonun
   kendi üçüncü kartı da ana renginin açık tonuydu. */
.ilkcan-alt-ikon--telefon {
  background-color: hsl(var(--main-h) var(--main-s) var(--main-l));
}

.ilkcan-alt-ikon--eposta {
  background-color: hsl(var(--main-two-h) var(--main-two-s) var(--main-two-l));
}

/* ÜÇÜNCÜ KART: ŞABLONUN KENDİ TON MERDİVENİNDEN.

   Buraya logonun turkuazı ham olarak yazılmıştı (`hsl(187 50% 44%)`) ve iki
   kuralı birden deliyordu: ham renk yasağı ve "yeni palet kurulmaz". `:root`
   YALNIZCA şablonun altı değişkenini yeniden tanımlayabiliyor, dolayısıyla
   turkuaz için yeni bir değişken de açılamaz.

   İKİ DALDA İKİ AYRI ÇÖZÜM YAZILDI ve altbilgi çalışmasınınki tutuldu:
   `--main-400`, yani şablonun HAZIR ton merdiveninden bir basamak. Diğer dal
   `hsl(var(--main-two-h) var(--main-two-s) 34%)` ile açıklığı elle
   hesaplıyordu; ikisi de ham renk yasağını sağlıyor ama merdivenden okumak
   tema güncellendiğinde elle yazılmış `34%`'in geride kalma ihtimalini de
   ortadan kaldırıyor. `OnYuzStilKatmaniTest` bu kuralı kilitliyor. */
.ilkcan-alt-ikon--adres {
  background-color: var(--main-400);
}

/* ==========================================================================
   PROGRAM KARTININ GÖRSELİ — SABİT ORAN
   ==========================================================================
   ÖLÇÜLDÜ (1440 px): kartlar üst üste biniyordu ve ızgara dağılıyordu.

   Sebep, galeri karolarındakiyle AYNI aile: kurumun fotoğrafları farklı
   oranlarda (kimi dikey portre, kimi yatay) ve görsel kendi oranını
   koruduğunda kart yüksekliği fotoğrafa göre değişiyor. Dikey bir fotoğraf
   kartı iki katına çıkarıyor, yanındaki kısa kart ile aynı satırda kalamıyor
   ve bir sonraki satırın kartı boşluğa yerleşip metnin üstüne biniyordu.

   `<img>` üzerindeki `width`/`height` öznitelikleri (400×280) CLS için
   duruyor ve DOĞRU; yanlış olan, CSS'in o oranı ZORLAMAMASIydı.

   Oran 400×280 = 10/7, yani öznitelikle aynı. İkisi ayrışırsa görsel
   yüklenirken sayfa zıplar; bu yüzden değer tek yerden okunmalı ve buradaki
   yorum o yerin ta kendisi. */
.course-item__img {
  aspect-ratio: 10 / 7;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   DUYURU AFİŞİ — AYRINTI SAYFASINDA KIRPILMIYOR
   ==========================================================================
   ⭐ KURUMUN SÖZÜ (17.08.2026): *"duyurunun kırpılmamış resmi sağda, metni de
   solda görünsün."*

   YUKARIDAKİ KURALIN TAM TERSİ VE ÇELİŞKİ DEĞİL — İKİ FARKLI SORU. Kart
   ızgarasında soru "satırdaki kartlar aynı boyda mı"; cevabı sabit oran ve
   kırpma. Ayrıntı sayfasında kart yok, ızgara yok, komşu yok: soru "afişin
   TAMAMI görünüyor mu". Duyuru görselleri çoğu zaman afiş ve bir anma
   afişinin bütün anlamı kompozisyonu ile içindeki yazılar; 10/7'ye kırpmak
   onları kesiyordu.

   BU YÜZDEN NE `aspect-ratio` NE `object-fit` VAR. İkisi de görselin kendi
   oranını EZER. Oran `<img>` özniteliklerinden geliyor ve o öznitelikler
   dosyanın GERÇEK piksel ölçüsü (`GorselOlculeri`); tarayıcı yer ayırmayı
   ondan hesaplıyor, yani görsel indiğinde sayfa zıplamıyor.

   DÖRT BEYAN DA GEREKLİ VE HİÇBİRİ SÜS:

     `width: auto` + `height: auto`   → tarayıcı oranı KENDİ korur.
     `max-width: 100%`                → sütundan taşmaz.
     `max-height: 42rem`              → ÇOK UZUN AFİŞ DÜZENİ PATLATMAZ.

   `max-height` OLMASAYDI ne olurdu: 1000×4000'lik bir afiş, 480 piksellik
   sütunda 1920 piksel yükseklik alır ve yanındaki metin sütunu ekranın
   dışında kalırdı. İkisi birlikte yazıldığında CSS'in yerine geçen öğe
   algoritması görseli kutuya ORANI KORUYARAK sığdırıyor — yani uzun afiş
   küçülür, kesilmez.

   DEĞER `rem`, `vh` DEĞİL. `vh` ekran yüksekliğine bağlanırdı ve yatay
   tutulan bir telefonda afişi okunamayacak kadar küçültürdü; `42rem` (672
   piksel) tipik bir dizüstü ekranında afişin tamamını, metin sütununu da
   ekranda bırakarak gösteriyor.

   RENK YOK, PUNTO YOK: kural tamamen geometrik ve şablonun paletine
   dokunmuyor (`OnYuzStilKatmaniTest`). */
.ilkcan-duyuru-afisi {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 42rem;
  margin-inline: auto;
}

/* ==================== HALKA AÇIK FORMLAR ==================== */

/* HONEYPOT ALANI — GÖRSEL OLARAK GİZLİ, DOM'DA GERÇEK.

   `type="hidden"` KULLANILMIYOR: bot gizli alanı doldurmaz, görünen bir metin
   alanını doldurur. Gizleme SİTE STYLESHEET'İNDEN yapılıyor, satır içi `style`
   ile DEĞİL — CSP `style-src 'self'` satır içi stil özniteliğini de engeller,
   yani satır içi yazan bir uygulama honeypot'un görünür kalmasıyla değil CSP
   ihlaliyle karşılaşırdı.

   `display: none` YERİNE EKRAN DIŞI KONUM: bazı botlar `display: none` alanları
   atlayacak kadar akıllı. Şablonda alan ayrıca `aria-hidden`, `tabindex="-1"`
   ve `autocomplete="off"` taşıyor; onlar olmasaydı ekran okuyucu kullanan
   gerçek bir veli alanı doldurur ve başvurusu bot sayılarak reddedilirdi. Bu,
   erişilebilirlik hatası değil VERİ KAYBI olurdu.

   Renk YOK: kural tamamen geometrik, yani şablonun paletine hiç dokunmuyor. */
.ilkcan-tuzak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Alan bazlı hata metni ve form geneli duyuru bölgesi.

   RENK ŞABLONUN KENDİ `--danger-600` DEĞİŞKENİNDEN ve YEDEK DEĞER YOK.
   Yedek yazmak (`var(--danger-600, #d3232f)`) ham renk yasağını delerdi ve
   daha kötüsü: şablon değişkeni yeniden adlandırıldığında hata metni sessizce
   şablondan kopuk bir kırmızıya düşer, kimse fark etmezdi. Değişken yoksa
   metin devralınan rengiyle çizilir — okunur kalır, yalnızca vurgusuz. */
.ilkcan-form-hatasi {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--danger-600);
}

.ilkcan-form-uyarisi {
  padding: 0.85rem 1.15rem;
  border-radius: 0.75rem;
  border: 1px solid var(--danger-600);
  color: var(--danger-600);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   KAPALI BAŞVURU DÜĞMESİ — İLAN AYRINTI SAYFASININ ONAY KUTUSU KAPISI
   ==========================================================================
   Sınıfı `ilkcan-basvuru-kapisi.js` ekliyor ve kaldırıyor; kapının NE OLDUĞU
   (hız kesici, denetim değil) o dosyanın başında ve şablonun yorumunda.
   Burada yalnızca GÖRÜNÜŞ var — ve iki karar gerekçesiyle yazılı.

   ⭐ 1. SOLDURMA DEĞİL, DOYGUNLUKTAN ÇIKARMA — VE SEBEBİ ÖLÇÜLDÜ.

   İlk akla gelen çözüm `opacity: 0.5`'ti. Reddedildi, çünkü bu düğmenin
   karşıtlığı bu dosyada zaten bir kez düzeltildi: aşağıdaki `.btn-main-two`
   kuralı onu şablonun #FC4525 kırmızısından (beyaz metinle 3,49:1) kurumun
   macentasına taşıdı ve 4,90:1'e çıkardı. 4,90 eşiği (4,5:1) ancak
   0,4 puanla geçiyor — yani hiçbir saydamlık payı yok. ÖLÇÜLDÜ: aynı düğme
   beyaz kart üzerinde `opacity: 0.5` ile 3,58:1 veriyor, yani düzeltilen
   kusurun İKİNCİSİ olurdu.

   Kapalı hâl bunun yerine şablonun kendi nötr basamağına düşüyor:
   `--neutral-200` zemin üzerine `--neutral-950` metin — ÖLÇÜLDÜ, 15,89:1.
   Kapalı düğme etkin düğmeden DAHA okunur ve "kapalı" mesajını parlaklıkla
   değil RENKLE veriyor: sayfanın tek doygun rengi kayboluyor.

   (Kapalı denetimler WCAG 1.4.3'ün "incidental" istisnasına giriyor, yani
   ölçmek zorunlu değildi. Ölçüldü, çünkü bu istisna bir izin değil; kapalı
   düğmenin metnini okuyamayan kişi neyin kapalı olduğunu da bilemez.)

   YENİ RENK TANIMLANMIYOR: dördü de şablonun `main.css`'inden geliyor.

   ⭐ 2. GEÇİŞ EKLENMİYOR, ÇÜNKÜ ZATEN VAR. Şablonun `.btn` kuralı
   `transition: 0.2s linear` taşıyor; zemin ve metin rengi bu sürede
   yumuşakça değişiyor. Kendi süremizi yazmak, şablonun ritmini iki farklı
   yerden yöneten ikinci bir sayı olurdu. Azaltılmış hareket tercihi de
   kendiliğinden karşılanıyor: 5c bölümündeki genel kural TÜM geçişleri
   0,001 ms'ye indiriyor, yani tercih açıkken düğme anında son hâline geçiyor.

   `!important` VE ÇİFT SINIF ÖZGÜLLÜĞÜ (`.btn.ilkcan-kapi-kapali`) ZORUNLU:
   `.btn-main-two` zemini ve `.text-white` metni `!important` ile yazıyor,
   `.group:hover .group-hover-text-white` de öyle. Aynı önemde bir kural
   ancak daha yüksek özgüllükle bastırabilir. */
.btn.ilkcan-kapi-kapali,
.btn.ilkcan-kapi-kapali:hover,
.btn.ilkcan-kapi-kapali:focus,
.btn.ilkcan-kapi-kapali:active {
  background-color: var(--neutral-200) !important;
  border-bottom-color: var(--neutral-400) !important;
  color: var(--neutral-950) !important;

  /* İMLEÇ DE HABER VERİYOR. Fareyle gelen kişi tıklamadan önce düğmenin
     kapalı olduğunu görüyor; `pointer-events: none` YAZILMADI, çünkü o
     kural imleci de üzerine gelmeyi de yok eder ve geriye yalnızca sessiz
     bir gri kutu kalırdı. */
  cursor: not-allowed;

  /* BASILMA ANİMASYONU KAPALI. `active-scale-094` ve `active--translate-y-2`
     düğmeye tıklanınca onu büzüp kaydırıyor; kapalı bir düğmenin basılmaya
     cevap vermesi "çalıştı" demek olurdu. */
  transform: none !important;
}

.btn.ilkcan-kapi-kapali .button__label,
.btn.ilkcan-kapi-kapali .text-white,
.btn.ilkcan-kapi-kapali:hover .group-hover-text-white {
  color: var(--neutral-950) !important;
}

/* ÜZERİNE GELME DALGASI DA SUSUYOR. `custom-gsap.js` `[data-block="button"]`
   öğelerinde bu daireyi imlecin ardından büyütüyor; kapalı bir düğmede
   çalışması, dokunulabilir olduğunu söyleyen bir hareket olurdu. */
.btn.ilkcan-kapi-kapali .button__flair {
  display: none;
}

/* ==========================================================================
   `<address>` ETİKETİNİN VARSAYILAN ALT BOŞLUĞU
   ==========================================================================
   ÖLÇÜLDÜ (1440 px, üst şerit): ikonun merkezi -2306, adres metninin merkezi
   -2314 — metin tam 8 piksel yukarıda duruyordu.

   Sebep: `address` üzerinde 16 piksellik `margin-bottom` var (tarayıcı/Bootstrap
   varsayılanı) ve şablonun `tw-mb-0` yardımcı sınıfı özgüllük yarışını
   kaybediyor. Ortalanmış bir esnek kutuda 21 piksellik metin + 16 piksellik alt
   boşluk birlikte ortalanınca metin yukarı kayıyor; 16'nın yarısı tam 8.

   Yalnızca `<address>` hedefleniyor, `tw-mb-0`'ın kendisi değil: o sınıf
   şablonun her yerinde kullanılıyor ve burada onu güçlendirmek başka
   yerlerdeki dengeyi bozardı. */
address.tw-mb-0 {
  margin-bottom: 0;
}

/* ==========================================================================
   GALERİ KAPAK GÖRSELİ — SABİT ORAN
   ==========================================================================
   İKİ AYRI KUSUR VARDI ve ilki ikincisini gizliyordu.

   1. Şablonun `.gallery-thumb` kuralı `display: flex; height: 100%` diyor.
      Sarmalayıcı `.animation-item.h-100` içinde kartın TAMAMINA yayılıyordu;
      esnek kutunun varsayılan `align-items: stretch` değeri de görseli
      gererek `aspect-ratio`yu eziyordu. ÖLÇÜLDÜ: oran 4/3 (1.33) yerine
      0.90 ve 0.95 çıkıyordu.

   2. Sarmalayıcı kartın tamamını kaplayınca başlık ve açıklama sütunun
      DIŞINA taşıyor, bir alttaki satırın görselinin üstüne biniyordu.
      Kurumun gördüğü kusur buydu.

   Sarmalayıcıya kendi sınıfımız veriliyor (`ilkcan-galeri-kapak`), çünkü
   `.gallery-thumb` şablonda başka yerlerde de kullanılıyor ve oralarda
   `height: 100%` doğru olabilir. Kural yalnızca listedeki kapak karesine
   uygulanıyor.

   Oran 4/3, işaretlemedeki `width`/`height` (800×600) ile AYNI; ikisi
   ayrışırsa görsel yüklenirken sayfa zıplar. */
.ilkcan-galeri-kapak {
  height: auto;
  display: block;
}

.ilkcan-galeri-kapak .cover-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   HAKKIMIZDA DÜZYAZISI — OKUNAKLI ÖLÇÜ
   ==========================================================================
   Tarihçe, vizyon ve misyon metinleri şablonun `tw-text-4` gövde ölçüsündeydi
   ve o ölçü KART İÇİ kısa metinler için tasarlanmış. Burada üç uzun paragraf
   var; kurum "biraz daha büyüt ve daha düzgün yaz" dedi.

   Üç şey birlikte değişiyor, çünkü okunabilirlik üçünden birine indirgenemez:

     1. PUNTO ŞABLONUN SINIFINDAN geliyor, buradan DEĞİL: işaretlemede
        `tw-text-4` (1rem) yerine `tw-text-405` (1.125rem) yazıldı. Burada bir
        `font-size` tanımlamak, `testKendiTipografiOlcegimizKurulmuyor`
        testinin engellediği şeydi ve test haklı — ölçek şablonun, bizim
        değil. Denendi, kırmızıya döndü, doğru yere taşındı.
     2. SATIR ARALIĞI 1.8'e çıkıyor — uzun satırda göz alt satıra inerken
        yerini kaybetmesin.
     3. SATIR UZUNLUĞU 68 karaktere sınırlanıyor (`max-width: 68ch`). Tipografi
        ölçüsü budur: 45-75 karakter arası rahat okunur, üstü yorucu.
        Sütun 1440 px'de 780 px genişliğindeydi ve satırlar 95 karaktere
        çıkıyordu.

   Paragraf arası boşluk da açılıyor: `about_page` içeriği düz `<p>` dizisi ve
   tarayıcının varsayılan aralığı bu punto için sıkışık kalıyor. */
.ilkcan-zengin-metin {
  line-height: 1.8;
  max-width: 68ch;
}

.ilkcan-zengin-metin p {
  margin-bottom: 1.15em;
}

.ilkcan-zengin-metin p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   ZENGİN METNİN İÇİNDEKİ BAŞLIK VE LİSTELER
   ==========================================================================
   ⭐ TARAYICIDA ÖLÇÜLDÜ (1440 px, açık pozisyon ayrıntısı): kurumun panelden
   girdiği `<h3>` başlık, sayfanın KENDİ `<h2>` başlığından daha büyük
   çiziliyordu ve madde listesinin işaretleri hiç görünmüyordu.

   İKİ AYRI SEBEP VE İKİSİ DE ŞABLONUN KENDİ KURALLARI:

     1. `main.css` `h3` için `--heading-three` diyor ve o değer 4.125rem'e
        kadar çıkıyor — BÖLÜM başlıkları için tasarlanmış bir basamak.
        Düzyazının İÇİNDEKİ başlık bir bölüm başlığı değil, bir ara başlık.
     2. `main.css` `ul` için `list-style: none` diyor (menüler için doğru) ve
        kural düzyazıya da sızıyor; işaretsiz bir madde listesi, alt alta
        yazılmış cümlelerden ayırt edilemiyor.

   NEDEN BU KURAL 17.08.2026'DAN ÖNCE GEREKMEDİ. Zengin metin araç çubuğu
   panele daha yeni kondu ve süzgeçten geçen alanların hiçbirinde kurum henüz
   başlık kullanmamıştı. Açık pozisyon açıklaması zengin metne terfi edince
   (ilanın kendi sayfası) ilk gerçek başlıklı metin de yazıldı.

   ⭐ PUNTO ŞABLONUN DEĞİŞKENLERİNDEN, ELLE HESAPLANMIYOR. `--heading-five` ve
   `--heading-six` `main.css` içinde tanımlı; buradaki iki bildirim YENİ BİR
   ÖLÇEK KURMUYOR, şablonun kendi merdiveninden daha alçak iki basamağı
   seçiyor. Elle bir `rem` yazılsaydı tema güncellendiğinde geride kalırdı —
   `--main-400` kararıyla aynı aile.

   `font-weight` VE BOŞLUKLAR ŞABLONDAN BAĞIMSIZ ve öyle kalmalı: ara başlığın
   üstündeki boşluk altındakinden BÜYÜK, yani başlık kendinden SONRAKİ metne
   ait görünüyor.

   KURAL İKİ KABA DA UYGULANIYOR: `.ilkcan-zengin-metin` (program, kadro, açık
   pozisyon) ve `.duyuru-metni` (duyuru ayrıntısı). İkisi de aynı süzgeçten
   geçmiş HTML çiziyor ve biri kapsam dışında bırakılsaydı aynı içerik iki
   sayfada iki farklı biçimde görünürdü. */
.ilkcan-zengin-metin h2,
.ilkcan-zengin-metin h3,
.duyuru-metni h2,
.duyuru-metni h3 {
  font-size: var(--heading-five);
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.ilkcan-zengin-metin h4,
.ilkcan-zengin-metin h5,
.ilkcan-zengin-metin h6,
.duyuru-metni h4,
.duyuru-metni h5,
.duyuru-metni h6 {
  font-size: var(--heading-six);
  font-weight: 700;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

/* İLK BAŞLIK ÜSTTEN BOŞLUK ALMIYOR: metin bir başlıkla başlıyorsa üstündeki
   boşluğu bölümün kendi `padding`i zaten veriyor. */
.ilkcan-zengin-metin > :is(h2, h3, h4, h5, h6):first-child,
.duyuru-metni > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* İŞARETLER GERİ GELİYOR. `revert` şablonun `list-style: none` kuralını değil,
   TARAYICI VARSAYILANINA dönüşü ifade ediyor; sabit bir `disc` yazmak iç içe
   listelerin kendi işaret merdivenini de düzleştirirdi. */
.ilkcan-zengin-metin :is(ul, ol),
.duyuru-metni :is(ul, ol) {
  list-style: revert;
  padding-inline-start: 1.6em;
  margin-bottom: 1.15em;
}

.ilkcan-zengin-metin li,
.duyuru-metni li {
  margin-bottom: 0.35em;
}

/* ==========================================================================
   UZUN DÜZYAZI İKİ TARAFA YASLI
   ==========================================================================
   Kurum "iki tarafa yaslı değil, okunurluluk zor ve tasarımsal çirkin" dedi.

   `text-align: justify` tek başına yeterli değil ve Türkçe'de zararlı bile
   olabilir: kelimeler uzun, satır sonuna sığmayan kelime alt satıra inince
   kalan boşluk sözcük aralarına dağılıyor ve metnin içinde dikey beyaz
   "nehirler" oluşuyor.

   `hyphens: auto` bunu çözüyor — tarayıcı kelimeyi hecelerinden bölüyor ve
   boşluk dağılımı dengeleniyor. Dil bilgisi `<html lang="tr">` üzerinden
   miras alınıyor; o olmadan tarayıcı Türkçe heceleme kurallarını kullanamaz.

   `text-wrap: pretty` destekleyen tarayıcılarda son satırda tek kelime kalmasını
   (dul satır) engelliyor; desteklemeyen tarayıcı yok sayıyor. */
.ilkcan-yasli {
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

/* ==========================================================================
   5i. RENK KARŞITLIĞI — ÖLÇÜLDÜ, ŞABLON WCAG AA'YI ÜÇ YERDE GEÇMİYOR
   ==========================================================================
   ⭐ 17.08.2026, axe ile ON BİR HALKA AÇIK SAYFADA ÖLÇÜLDÜ. Tek bir kural
   ihlal ediliyordu — `color-contrast` — ama sayfa başına 6-14 öğede, ve
   kaynağı KAPALI BİR ÜÇLÜ: şablonun gövde grisi, metin olarak kullanılan
   marka macentası ve birincil çağrı düğmesinin turuncusu.

   Bunların hiçbiri Faz 5'te ölçülmüştü; hepsi "şablonun görünümü" diye
   olduğu gibi bırakılmıştı. Ölçülen değerler ve gereken eşik (4.5:1, normal
   punto):

     #5C707E gövde metni  → #FADEA2 üzerinde 3.94   #FDE4F2 üzerinde 4.31
     #D90D7A marka metni  → #FADEA2 üzerinde 3.75   #FDE4F2 üzerinde 4.10
     #FFFFFF düğme metni  → #FC4525 üzerinde 3.49

   DÜZELTMENİN SINIRI BİLİNÇLİ VE HAM RENK YAZILMIYOR. Bu dosyanın kuralı
   (`OnYuzStilKatmaniTest::testHamRenkYok`) her rengin ŞABLONUN KENDİ
   DEĞİŞKENİNDEN gelmesini şart koşuyor; ilk yazımda iki ham onaltılık değer
   kullanıldı ve test onları YAKALADI. Üç düzeltme de artık şablonun kendi
   merdivenindeki bir basamağa taşınıyor — yani tema güncellendiğinde birlikte
   hareket ediyorlar. */

/* GÖVDE METNİ ŞABLONUN KENDİ MERDİVENİNDE BİR BASAMAK AŞAĞI.
   `--paragraph-500` (#5C707E) yerine `--paragraph-600` (#385469): beyaz
   üzerinde 7.95, en koyu zemin olan #FADEA2 üzerinde 6.07. Yeni bir renk
   seçilmiyor, şablonun zaten tanımladığı bir ton kullanılıyor. */
:root {
  --paragraph-500: var(--paragraph-600);
}

/* MARKA MACENTASI METİN OLARAK. `--main-600` değişkenine DOKUNULMUYOR:
   o değişken aynı zamanda ZEMİN rengi ve onu koyulaştırmak kurumun paletini
   sayfanın her yerinde değiştirirdi. Düzeltilen şey yalnızca METİN yardımcı
   sınıfı — tanımı gereği yazı rengi. hsl(328 89% 40%): beyaz üzerinde 5.95,
   #FADEA2 üzerinde 4.55.

   `!important`: şablon `.text-main-600`'ü de `!important` ile beyan ediyor. */
.text-main-600 {
  color: hsl(var(--main-h) var(--main-s) 40%) !important;
}

/* ⭐ BİRİNCİL ÇAĞRI DÜĞMESİ — 2. BÖLÜMDE VERİLEN KARARIN KAÇAĞI.
   "Başvuruyu gönder", "Mesajı gönder", "Bize ulaşın", "Galerinin tamamı":
   sitenin en önemli düğmeleri ve beyaz yazıları #FC4525 üzerinde 3.49 ile
   eşiğin belirgin biçimde altındaydı.

   #FC4525, ŞABLONUN 2. BÖLÜMDE ZATEN REDDEDİLEN KIRMIZI-TURUNCUSU. Orada
   `--main` logonun macentasına taşınmıştı ve gerekçelerden biri tam olarak
   buydu: şablonun kırmızısı beyaz metinle ~3.2:1 veriyor, macenta ~4.9:1.
   Ama `main.css` bu düğmenin rengini DEĞİŞKENDEN değil SABİT YAZARAK veriyor
   (`.btn-main-two { background-color: #FC4525 !important }`), dolayısıyla
   karar onu ıskaladı ve eski kırmızı sitenin en önemli düğmesinde kaldı.

   Düğme artık 2. bölümün kararına tabi: aynı `--main` değişkeni, aynı
   macenta, beyaz metinle 4.90:1. Yeni bir renk seçilmiyor — var olan karar
   kaçağı kapatılıyor. `!important` zorunlu, çünkü şablonun beyanı da
   `!important`. */
.btn-main-two {
  background-color: hsl(var(--main)) !important;
}

/* ==========================================================================
   5j. VELİ GÖRÜŞLERİ ŞERİDİ — ŞABLONUN KAYDIRICISI, ÜÇ KÜÇÜK DÜZELTME
   ==========================================================================
   Kaydırıcının kendisi şablonun (`testimonial-swiper-slider`, yapılandırması
   `main.js` içinde). Buradaki kurallar TASARIM DEĞİL, üç somut kusurun
   onarımı — ve hepsi BİZİM kancamıza (`ilkcan-gorus-serisi`) bağlı, şablonun
   sınıfına değil: aynı sınıfı kullanacak bir sonraki bölüm bu kararları
   istemeden devralmasın.

   1. ⭐ KART YÜKSEKLİKLERİ — VE BURASI ÖLÇÜLDÜ, TAHMİN EDİLMEDİ.

      İlk yazımda eşitleme yalnızca işaretlemeye (`h-100`, `flex-grow-1`)
      bırakılmıştı ve ÇALIŞMADI: 1440 px'de yedi ayrı kart boyu ölçüldü
      (492, 396, 366, 334, 302, 268, 238 px). Sebebi Swiper'ın kendi kuralı —
      `.swiper-slide { height: 100% }`. AÇIK BİR YÜKSEKLİK, flex gerilmesini
      İPTAL EDER; kabın boyu da `auto` olduğu için `100%` yine `auto`ya, yani
      içerik boyuna düşer. Kart içindeki `h-100` de bu yüzden boşluğa
      bakıyordu.

      `height: auto` gerilmeyi geri veriyor, `align-items: stretch` onu
      açıkça yazıyor (Swiper `align-items` ayarlamıyor, ama varsayılana
      güvenmek bu dosyada bir kez pahalıya patladı). İkisi birlikte: her kart
      satırın en uzunu kadar, alıntı kutusu boşluğu dolduruyor, ad satırları
      hizalı. Uzun görüş (H.Ö.) ile kısa görüş (H.A.) yan yana artık aynı
      boyda.

   2. ⭐ KARTLAR KABIN KENARINDA KESİLMİYOR.

      `.swiper` `overflow: hidden` uyguluyor ve kart gölgesi/yuvarlak köşesi
      tam kenarda başladığı için 375 px'de soldaki kartın köşesi kırpılmış
      görünüyordu. Kaba yatay dolgu verilip `.swiper-wrapper` aynı ölçüde
      negatif kenar boşluğuyla geri çekiliyor: kartlar ızgaranın hizasında
      duruyor, kırpma sınırı ise onların DIŞINA çıkıyor.

   3. ⭐ DURAKLATMA DÜĞMESİ KARTLARIN ÜSTÜNDEN ALTINDAKİ KENDİ BANDINA
      TAŞINDI — VE BU DA ÖLÇÜLMÜŞ BİR BİNDİRMENİN ÇÖZÜMÜ.

      Düğmenin genel kuralı (5d) onu kabın sağ alt köşesine koyuyor; bu
      şeritte kartlar kabın en altına kadar indiği için düğme SON KARTIN AD
      SATIRININ ÜSTÜNE biniyordu (1440 px ekran görüntüsünde görüldü).

      Kaba alt dolgu verildi ve düğme o banda, ŞERİDİN ALTINA VE ORTASINA
      indirildi. Ortalanması kozmetik değil: düğme şeridin TAMAMINI
      denetliyor ve bir köşeye iliştirilmiş hâli hangi içeriğe ait olduğunu
      söylemiyordu. Kartlar `.swiper-wrapper` içinde kaldığı için bandın
      üstünde bitiyor; artık hiçbir şey hiçbir şeyin üstüne binmiyor.

      İLERİ/GERİ OKLARI YOK: kurumun isteğiyle kaldırıldı ve şeridi
      ilerletmenin üç yolu daha var (sürükleme, dokunmatikte kaydırma, ok
      tuşları). Duraklatma denetiminin ise yerine geçen bir şey yok;
      gerekçesi `parcalar/veli-gorusleri.html.twig` içinde. */
.ilkcan-gorus-serisi {
  padding-inline: 0.75rem;
  padding-bottom: 5rem;
}

.ilkcan-gorus-serisi .swiper-wrapper {
  align-items: stretch;
  margin-inline: -0.75rem;
}

.ilkcan-gorus-serisi .swiper-slide {
  height: auto;
}

/* `right: auto` ZORUNLU: genel kural düğmeyi sağ kenara çiviliyor ve
   yalnızca `left` verilseydi iki kenar birden tanımlı kalır, düğme
   gerilirdi. `transform` ortalamayı düğmenin KENDİ genişliğinden bağımsız
   kılıyor — etiket "duraklat" ile "sürdür" arasında değişiyor ve sabit bir
   kaydırma değeri, metin değiştiği an ortalamayı bozardı. */
.ilkcan-gorus-serisi .ilkcan-duraklat {
  right: auto;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   AKORDEON OKU — ŞABLONUN ÇİZMEYE ÇALIŞIP ÇİZEMEDİĞİ GLİF
   ==========================================================================
   ⭐ ŞABLONUN KENDİ KUSURU, KESİMİN DEĞİL — ölçüldü (17.08.2026).
   `main.css` akordeon düğmesinin okunu `font-family: "Phosphor"` ile ama
   `content: "\f106"` / `"\f107"` koduyla çiziyor. O iki kod noktası
   Phosphor 2.1.1'de YOK: sette hiç `\fXXX` glifi bulunmuyor (upstream
   CSS'in 1.530 kuralı doğrulandı). İkisi Font Awesome'ın chevron
   kodları — şablon yazarı aileyi değiştirirken kodları değiştirmemiş.
   Yani bu ok ilk günden beri boş kutu; kesim onu bozmadı, yalnızca
   `phosphor-ikonlari-dogrula.mjs`in yeni kod noktası denetimi görünür
   kıldı.

   DÜZELTME BURADA, `main.css`'TE DEĞİL: satın alınan şablona
   dokunulmuyor (`temel.html.twig`'in stil zinciri notu) ve bu katman
   zaten ondan SONRA yükleniyor. Kodlar Phosphor'un gerçek karşılıkları:
   açıkken yukarı, kapalıyken aşağı ok. */
.common-accordion .accordion-button[aria-expanded="true"]::after {
  content: "\e13c"; /* ph-caret-up */
}

.common-accordion .accordion-button[aria-expanded="false"]::after {
  content: "\e136"; /* ph-caret-down */
}

/* ==========================================================================
   ANA SAYFA HARİTASI — YÜKSEKLİĞİ KOMŞU SÜTUN BELİRLİYOR
   ==========================================================================
   Kurumun bildirdiği kusur (19.08.2026): *"harita e-posta ve telefon
   yüksekliğinde olmalı; e-postadan aşağıya taşıyor ve görünüm güzel
   durmuyor."*

   ⭐ SEBEP SABİT YÜKSEKLİKTİ. Çerçeve şablonun `tw-h-500-px` yardımcısını
   taşıyordu; sol sütunun içeriği (iki telefon, adres, e-posta) ölçüldüğünde
   ~430 piksel, yani harita komşusundan 70 piksel taşıyordu. Sayı 500'den
   430'a çekilseydi kusur bugün kapanır, YARIN GERİ GELİRDİ: kurum panelden
   üçüncü bir telefon eklediği ya da adres bir satır uzadığı anda sol sütun
   büyür ve iki kutu yine ayrışırdı. Bağ, sayıyla değil YERLEŞİMLE kurulmalı.

   `height: 100%` BURADA GERÇEKTEN ÇALIŞIYOR, çünkü Bootstrap'in `.row`'u
   flex ve sütunlar varsayılan olarak `stretch`: sütunun kullanılan yüksekliği
   satırın en uzun öğesinden geliyor. Harita sütununun KENDİ içsel yüksekliği
   ise `<iframe>`in varsayılanı kadar (150 piksel) — yani satırın boyunu SOL
   sütun belirliyor, harita da ona uyuyor. Sabit yükseklik dursaydı bu ilişki
   ters yönde kurulur, uzun olan harita satırı gerer ve sol sütun ortada
   asılı kalırdı.

   DAR EKRANDA SABİT YÜKSEKLİK ŞART. Sütunlar alt alta düştüğünde kapsayıcının
   yüksekliği `auto` olur ve `height: 100%` çözümsüz kalır — harita 150 piksele
   çöker. O yüzden varsayılan sabit, `100%` yalnızca sütunların yan yana
   geldiği kırılımdan itibaren geçerli. Kırılım Bootstrap'in `lg`'si (992px),
   çünkü sütunlar `col-lg-*` ile tam orada yan yana geliyor; başka bir sayı
   yazılsaydı iki kural farklı noktalarda devreye girer ve aradaki genişlikte
   harita ya çöker ya taşardı.

   YÜKSEKLİK CLS ÜRETMİYOR: kutu düzenle belirleniyor, haritanın inmesiyle
   değil. `loading="lazy"` bu yüzden güvenle duruyor. */
.ilkcan-harita-cercevesi {
  height: 22rem;
}

@media (min-width: 992px) {
  .ilkcan-harita-cercevesi {
    height: 100%;
  }
}

/* ==========================================================================
   5m. GALERİ VİDEO KAROSU — ŞABLONDA KARŞILIĞI YOK, ÇÜNKÜ ŞABLONDA VİDEO YOK
   ==========================================================================
   Kurum videoların yayınlanmasını istedi ve satın alınan Kidschool şablonunun
   hiçbir sayfasında video yok. Karo bu yüzden SIFIRDAN değil, ızgaranın kendi
   ölçülerinden türetildi: fotoğraf karosu `aspect-ratio: 4/3` ile çiziliyor
   (yukarıdaki `.gallery-thumb img` kuralı) ve video karosu da öyle. Farklı bir
   oran, aynı satırda duran iki karonun hizasını bozardı.

   YENİ RENK, YENİ FONT, YENİ KENAR YUVARLAKLIĞI YOK: kullanılan üç değer de
   şablonun kendi değişkenleri (`--neutral-*`) ve `.gallery-thumb`'ın kendi
   yuvarlaklığı.

   ⭐ `object-fit: contain`, `cover` DEĞİL — ve bu fotoğraflardan ayrıldığı tek
   nokta. Kurumun yedi videosu üç ayrı orandan geliyor (640x352, 512x640,
   1280x720) ve `cover` onları 4:3 kutuya KIRPARDI; bir fotoğrafı kırpmak geri
   alınabilir (büyütme penceresi tam kareyi gösteriyor), bir videoyu kırpmak
   ise izlenen görüntünün kendisini kalıcı olarak kesmek olurdu. Kenarlarda
   kalan boşluk bilerek: kırpmak yerine göstermek.

   ⭐ ZEMİN, POSTERİ OLMAYAN VİDEO İÇİN VAR VE ASIL KARAR BURADA.
   Postersiz bir `<video>` tarayıcıda SİYAH BİR DİKDÖRTGEN olarak çiziliyor.
   Sunucuda ffmpeg yok ve panelden video yükleyen kişi posteri hazırlayamayabilir,
   yani bu durum gerçek ve kaçınılmaz. Yer tutucu bu yüzden TASARLANDI: şablonun
   nötr yüzeyi + ortada bir oynat üçgeni (gömülü SVG, `data:` — CSP'nin
   `img-src` yönergesi `data:` taşıyor ve stil dosyası zaten `self`).

   ÜÇGEN `currentColor` DEĞİL SABİT NÖTR: SVG bir arka plan görseli, yani
   metin rengini devralmıyor. Değer `--neutral-600`'ün onaltılık karşılığı.

   ZEMİN YALNIZCA POSTERSİZ KAROLARDA. Posteri olan karoda da dursaydı,
   `contain` yüzünden kalan yan boşluklarda oynat üçgeni tekrar tekrar
   görünürdü.

   HAREKET YOK. Ne geçiş, ne dönüşüm, ne otomatik oynatma. Karonun üstüne
   gelindiğinde de hiçbir şey kımıldamıyor: `<video controls>` zaten kendi
   denetimlerini çiziyor ve ikinci bir hareket katmanı, bu projenin
   "hiçbir şey kendiliğinden hareket etmez" kuralını gevşetirdi. */
.ilkcan-galeri-video {
  margin: 0;
}

.ilkcan-galeri-video__oynatici {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 16px;
  background-color: var(--neutral-100);
}

.ilkcan-galeri-video__oynatici--postersiz {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath fill='%23525252' d='M36 28l32 20-32 20z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ŞERİT KARONUN ALTINDA, ÜSTÜNDE DEĞİL. Üste bindirilmiş bir başlık
   `<video controls>`in kendi denetim çubuğuyla çakışırdı — tarayıcılar çubuğu
   üstte de altta da çizebiliyor. Ayrıca şerit oynatıcının ERİŞİLEBİLİR ADI
   (`aria-labelledby`); örtülmüş bir metin görenle görmeyene farklı şey
   söylerdi.

   ⭐ PUNTO VE RENK BURADA YOK, İŞARETLEMEDE: şerit şablonun kendi
   `tw-text-4 text-neutral-600` sınıflarını taşıyor — galeri kartındaki
   "17 fotoğraf" satırının AYNISI. Burada `font-size` yazılsaydı `custom.css`
   şablonunkinden ayrı bir tipografi ölçeği kurmaya bir adım daha yaklaşırdı;
   `OnYuzStilKatmaniTest` o adımı sayıyor. Buradaki kural yalnızca YERLEŞİM. */
.ilkcan-galeri-video__serit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Yedek metin yalnızca `<video>` hiç desteklenmediğinde çiziliyor; kutunun
   içinde okunur kalması gerekiyor. */
.ilkcan-galeri-video__yedek {
  margin: 0;
  padding: 1rem;
}

/* ==========================================================================
   5n. SAYFALAMA ŞERİDİ — ŞABLONDA KARŞILIĞI OLMAYAN TEK BİLEŞEN
   ==========================================================================
   Kidschool listelerinde sayfalama YOK: demo sayfaların hepsi tek ekrana
   sığan sabit kart kümeleri. Yani burada kopyalanacak bir işaretleme de yok
   ve bileşen sıfırdan yazılıyor — ama YENİ BİR TASARIM DİLİ KURMADAN.
   Yarıçap, renk ve odak halkası sitenin başka yerlerinde zaten alınmış
   kararlardan geliyor:

   | Karar          | Nereden                                              |
   |----------------|------------------------------------------------------|
   | vurgu rengi    | `--main` (logonun macentası, 2. bölüm)               |
   | kenarlık tonu  | `--neutral-200` (yönetim listesi ve kartlarla aynı)  |
   | odak halkası   | `--main-two-*` (panelin `focus-visible` kuralıyla)   |
   | punto/aile     | YAZILMIYOR — şablonun gövde ölçeği miras alınıyor    |

   PUNTO BURADA YOK ve bu bilinçli: `font-size` yazılsaydı `custom.css`
   şablonunkinden ayrı bir tipografi ölçeği kurmaya bir adım daha yaklaşırdı
   (`OnYuzStilKatmaniTest` o adımı sayıyor). Buradaki kurallar YERLEŞİM,
   YARIÇAP ve DURUM — tipografi değil.

   ⭐ DOKUNMA HEDEFİ 2.75rem = 44 px. WCAG 2.2'nin "Target Size (Minimum)"
   ölçütü 24 px istiyor; 44 px ise mobil kullanımın gerçek eşiği ve rakam
   düğmeleri tam da parmakla en zor vurulan öğe cinsinden — küçük, yan yana
   ve benzer. Ölçü `min-width`/`min-height` ile veriliyor, sabit `width` ile
   değil: üç haneli sayfa numarası (`100`) kutuyu yatayda büyütebilmeli. */
.ilkcan-sayfalama {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Durum cümlesi listeden ÖNCE: ziyaretçi düğmelere basmadan önce listenin ne
   kadarını gördüğünü biliyor. Rengi şablonun paragraf tonu. */
.ilkcan-sayfalama__durum {
  margin: 0;
  color: var(--paragraph-600);
}

.ilkcan-sayfalama__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilkcan-sayfalama__numara,
.ilkcan-sayfalama__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--neutral-200);
  border-radius: 0.75rem;
  color: var(--neutral-950);
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.ilkcan-sayfalama__numara:hover,
.ilkcan-sayfalama__ok:hover {
  border-color: var(--main-400);
  background-color: hsl(var(--main-h) var(--main-s) 97%);
  color: var(--neutral-950);
}

/* ⭐ ŞİMDİKİ SAYFA TEK BAŞINA RENKLE AYIRT ETTİRİLMİYOR.
   Zemin macenta OLMAKLA BİRLİKTE yazı da kalınlaşıyor ve kenarlık rengi
   değişiyor. Renk körlüğünde ya da tek renkli bir çıktıda, hangi sayfada
   olunduğu yalnızca dolgu tonundan okunamazdı. `aria-current="page"` de
   işaretlemede duruyor, yani bilgi ekran okuyucuya ayrıca söyleniyor. */
.ilkcan-sayfalama__numara--simdiki {
  background-color: hsl(var(--main));
  border-color: hsl(var(--main));
  color: hsl(var(--white));
  font-weight: 700;
  cursor: default;
}

.ilkcan-sayfalama__bosluk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 2.75rem;
  color: var(--neutral-400);
}

/* Odak halkası panelin kuralıyla aynı: ikinci vurgu rengi, 3 px, boşluklu.
   Şablonun `focus-visible-border-main-600` sınıfı yalnızca KENARLIK
   değiştiriyor ve 1 px'lik bir kenarlık farkı klavye konumunu göstermeye
   yetmiyor — form alanlarında ölçüldü. */
.ilkcan-sayfalama__numara:focus-visible,
.ilkcan-sayfalama__ok:focus-visible {
  outline: 3px solid hsl(var(--main-two-h) var(--main-two-s) var(--main-two-l));
  outline-offset: 2px;
}

/* HAREKET AZALTILMIŞSA GEÇİŞ YOK — sitenin geri kalanındaki kuralla aynı. */
@media (prefers-reduced-motion: reduce) {
  .ilkcan-sayfalama__numara,
  .ilkcan-sayfalama__ok {
    transition: none;
  }
}