/* ===========================================================================
 * NYLA — Eğitim ağacı (/egitimlerimiz/*) — 43 sayfanın ortak stili
 *
 * AD ALANI: `.ea-`. Tek ad alanı, tek dosya; `egitim-page.css` ile birlikte
 * yükleniyor çünkü afiş (`headerBanner`) varyantları orada tanımlı ve eski
 * sayfaların bölüm tasarımı oradan devralınıyor.
 *
 * ŞABLON FARKI CSS'TE: bileşen tek (`egitim-sayfa.tsx`); beş şablon arasındaki
 * fark kök öğedeki `data-sablon` özniteliğiyle burada kuruluyor. Böylece
 * "sınav sayfalarındaki kart ızgarasını iki sütuna indir" gibi bir istek tek
 * satırlık bir kural oluyor, beş bileşen düzenlemek gerekmiyor.
 *
 * RENKLER: tamamı style.css'teki token'lardan. Bu dosyada tek bir ham hex yok.
 * ========================================================================= */

/* style.css'te `section { display: flex }` diye GENEL bir kural var; bu
 * sayfadaki her blok da <section> olduğu için paragraflar yan yana sütunlara
 * diziliyordu. Ağacın bütün section'ları burada blok akışına geri çekiliyor —
 * tek tek her kuralda uğraşmamak için toplu. */
.ea-sayfa section {
    display: block;
}

.ea-sayfa {
    --ea-olcu: 1180px;      /* bölüm genişliği */
    --ea-okuma: 74ch;       /* düz metin satır uzunluğu — okunabilirlik sınırı */
    display: block;
    background: var(--bg-color);
}

/* ŞABLONA GÖRE VURGU RENGİ YOK.
 *
 * Denenmişti: sınav/meslek bordo, diller `--secondary-color-dark` (#a8790a).
 * İkisi de marka paletinin dışına çıkıyordu — özellikle o sarı tonu tek
 * başına kahve/hardal okunuyor ve sitede YALNIZCA sarı zemin üzerindeki
 * metin için ayrılmış. `kvkk-page.css` içinde aynı hatanın notu duruyor.
 *
 * Palet üçe kapalı: lacivert (yapı), sarı (vurgu), bordo (yalnızca birincil
 * CTA). Ağacın her sayfası aynı laciverdi kullanıyor. */

/* ── Kırıntı yolu ───────────────────────────────────────────────────────
 * Afişin içindeyken lacivert zeminde beyaz, sade hero'da koyu zeminde yine
 * beyaz duruyor; iki hero da koyu olduğu için tek renk yeterli. */

/* KIRINTI YOLUNUN KENDİ BİÇİMİ YOK. Eskiden `.ea-kirinti` diye ayrı bir
 * tanım vardı; artık afiş sitenin `.headerBanner-breadcrumb` yapısını
 * kullanıyor (bkz. egitim-sayfa.tsx) ve biçim `components.css`ten geliyor. */

/* Afişli hero'da da aynı tagline kuralı geçerli. */
.ea-hero-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 58ch;
    margin: 14px 0 0;
}

/* ── Afiş kabuğu: ağaca özel ayarlar ────────────────────────────────────
 *
 * Temel afişin alt dolgusu 120px — orijinal sayfalarda üstüne binen "social
 * proof" kutusu içindi. Bu ağaçta o kutu yok; olduğu gibi bırakılırsa afişin
 * altında 150 piksellik ölü boşluk kalıyor. */

.ea-sayfa .headerBanner {
    min-height: 0;
}

.ea-sayfa .headerBanner .headerBanner-inner {
    /* Yasal/kurumsal sayfalardaki afişle aynı boy. Alt dolgu 120px değil:
     * o pay, afişin üstüne binen kutu içindi ve bu ağaçta o kutu yok. */
    min-height: 420px;
    padding: 52px clamp(26px, 4vw, 64px) clamp(40px, 3.6vw, 56px);
    justify-content: flex-end;
}

.ea-sayfa .headerBanner-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.84);
    max-width: 56ch;
    margin: 16px 0 0;
}

.ea-sayfa .headerBanner-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 26px;
    /* RENK VE BİÇİM BURADA TANIMLANMIYOR. `components.css` içindeki
     * `.headerBanner .headerBanner-cta` zaten sitenin afiş düğmesi: beyaz
     * zemin, koyu metin, 12px yarıçap, altında yumuşak gölge. Burada sarıya
     * çevrilmişti ve yurt dışı danışmanlık afişindeki düğmeyle uyuşmuyordu.
     * Yalnızca hizalama kalıyor; geri kalan her şey tek kaynaktan. */
}

.ea-sayfa .headerBanner-cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Fotoğraflı varyantlarda metnin okunması için ek perde. */
.ea-sayfa .headerBanner .headerBanner-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(3, 20, 45, 0.28) 0%,
        rgba(3, 20, 45, 0.72) 100%
    );
    pointer-events: none;
}

/* Afiş içeriği perdenin ÜSTÜNE çıkıyor. `[data-corner]` DIŞARIDA bırakılıyor:
 * o öğe `components.css`te `position: absolute` ile sağ alt köşeye önceden
 * yerleştiriliyor; buradaki `position: relative` onu eziyordu (aynı özgüllük,
 * bu dosya sonra yükleniyor) ve yüzen kart önce akışta sol üstte doğup sonra
 * motor çalışınca köşeye SIÇRIYORDU. */
.ea-sayfa .headerBanner .headerBanner-inner > *:not([data-corner]) {
    position: relative;
    z-index: 1;
}

/* Kırpma noktası: afiş burada orijinalinden alçak olduğu için mevcut
 * `background-position` değerleri portreyi çenesinden kesiyordu. */
.ea-sayfa .headerBanner.headerBanner--sinav .headerBanner-inner,
.ea-sayfa .headerBanner.headerBanner--ingilizce .headerBanner-inner {
    background-position: center 18%;
}

/* Kadraj fotoğrafa ait: geniş afişte baş kesilmez, dar ekranda kişi odakta kalır. */
.ea-sayfa .headerBanner[data-gorsel-odak] .headerBanner-inner {
    background-color: var(--primary-color);
    background-image: none;
}

/* Net karenin ölçeği/konumu sabit; taşmayan kenarları bulanık fotoğraf doldurur. */
.ea-sayfa .headerBanner[data-gorsel-odak] .headerBanner-inner > .ea-afis-fotograf {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.ea-afis-fotograf::before {
    content: '';
    position: absolute;
    inset: -24px;
    background-image: var(--ea-afis-gorsel);
    background-size: cover;
    background-position: var(--ea-afis-konum);
    filter: blur(18px);
}

.ea-afis-fotograf img {
    position: absolute;
    left: var(--ea-afis-x);
    top: var(--ea-afis-y);
    width: auto;
    max-width: none;
    height: var(--ea-afis-olcek, 140%);
    display: block;
    transform: translate(calc(-1 * var(--ea-afis-x)), calc(-1 * var(--ea-afis-y)));
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.ea-afis-fotograf::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 20, 45, 0.62) 0%, rgba(3, 20, 45, 0.5) 40%, rgba(3, 20, 45, 0.82) 100%);
}

/* Metnin arkasındaki perde korunur; fotoğrafın sağındaki yüzü ikinci kez karartmaz. */
.ea-sayfa .headerBanner[data-gorsel-odak] .headerBanner-inner::before {
    z-index: 1;
    background: linear-gradient(90deg, var(--primary-color) 32%, transparent 76%);
}

@media (max-width: 900px) {
    .ea-afis-fotograf::before {
        inset: 0;
        background-position: var(--ea-afis-konum-mobil);
        filter: none;
    }

    .ea-afis-fotograf img {
        display: none;
    }

    .ea-sayfa .headerBanner[data-gorsel-odak] .headerBanner-inner::before {
        background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary-color) 65%, transparent));
    }
}

.ea-sayfa .headerBanner-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.06;
    margin: 0;
}

/* AFİŞ BAŞLIĞINDA ÇİZGİ YOK. Buraya sarı bir imza çizgisi eklenmişti ama
 * sitenin hiçbir afişinde (yurt dışı, KVKK, hakkımızda) böyle bir çizgi yok —
 * eğitim afişlerini ötekilerden ayırıyordu. Çizgi yalnızca gövdedeki bölüm
 * başlıklarında kalıyor (`.ea-kart-baslik`, `.ea-h2`). */

/* ══════════════════════════════════════════════════════════════════════
 * GÖVDE — SİTENİN BÖLÜM DİLBİLGİSİ
 *
 * Bu bölüm sıfırdan yazıldı. Öncesinde gövde, üst üste dizilmiş beyaz
 * KARTLARDAN oluşuyordu; sitenin hiçbir bölümü öyle kurulmuyor. Ana
 * sayfadaki `plan-sec`, `roadmap-sec`, `services-sec` ve `visa-sec`
 * incelendiğinde tek bir gramer çıkıyor ve buradaki her ölçü oradan alındı:
 *
 *   ZEMİN açık, renk içteki PANODA. BAŞLIK panonun dışında, açık zeminde,
 *   son parçası sarı marker'lı. PANO beyaz/lacivert, 22px, saç teli çizgi.
 *   PANO İÇİ hücrelere bölünür; ayrım kenarlık değil 2px `--bg-color` KANAL.
 *   Hücrelerden biri lacivert ve panonun kenarına kadar taşar.
 * ════════════════════════════════════════════════════════════════════ */

.ea-govde {
    padding: clamp(38px, 5vw, 76px) 0 clamp(48px, 6vw, 96px);
}

.ea-govde-ic {
    /* Afişle AYNI genişlik — `headerBanner-inner` ile birebir. */
    width: calc(100% - 40px);
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(46px, 5vw, 84px);
}

/* ── Bölüm şapkası ──────────────────────────────────────────────────────
 * `plan-sec` / `visa-sec` / `roadmap-sec` şapkalarının aynısı: solda başlık,
 * sağda giriş metni. Başlık HİÇBİR ZAMAN koyu zemine binmiyor — koyu zeminde
 * beyaz başlık sorunu bu yüzden hiç doğmuyor. */
/* ORTALI ŞAPKA. Önce iki sütunluydu (başlık solda, giriş sağda) ve her
 * bölümde farklı uzunlukta bir başlık sol yarıyı düzensiz dolduruyordu.
 * Sitenin kendi ortalı şapkası var ve ölçüsü şu: `roadmap-header`
 * (`text-align: center; max-width: 720px; margin: 0 auto 48px`), aynısı
 * `services-header`ta da. Bütün bölümler artık bu tek yapıyı kullanıyor. */
.ea-bolum-bas {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(26px, 2.8vw, 44px);
}

/* YAN SAPKA: baslik solda, metin saginda. Hucreli bloklarda kullaniliyor.
 * Kap genisligi ortali sapkanin 760px siniriyla degil, bolumun tamamiyla
 * hizali -- iki sutun ancak o zaman dolu duruyor. */
.ea-bolum-bas[data-yan] {
    text-align: left;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    /* Başlık yanındaki metne göre DİKEY ORTALI. `end` iken iki sütun alt
     * kenardan hizalanıyordu; metin iki satırsa başlık aşağı kayıp
     * paragrafın son satırına yapışıyordu. */
    align-items: center;
    gap: clamp(20px, 3vw, 56px);
}

.ea-bolum-bas[data-yan] .ea-bolum-giris {
    margin-top: 0;
}

@media (max-width: 900px) {
    .ea-bolum-bas[data-yan] {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }
}

.ea-bolum-baslik {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.6rem, 2.9vw, 2.4rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.7px;
    color: var(--text-dark-dark);
    margin: 0;
    text-wrap: balance;
}

/* SARI MARKER — sitenin başlık imzası. `style.css` içinde ALTI bölüm
 * başlığında aynı kural var (plan-headline, roadmap-headline, partners-title,
 * visa-headline, testimonial-title, services-headline). Değerler birebir. */
.ea-bolum-baslik .title-highlight {
    color: var(--primary-color);
    font-weight: 700;
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-size: 100% 0.26em;
    background-position: 0 92%;
    padding-bottom: 0.04em;
}

.ea-bolum-giris {
    margin-top: 16px;
}

.ea-bolum-giris .ea-p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-dark-low);
    margin: 0 0 12px;
}

.ea-bolum-giris .ea-p:last-child {
    margin-bottom: 0;
}

/* ── Pano ───────────────────────────────────────────────────────────────
 * `services-panel` (beyaz, r=22, 1px rgba(0,0,0,.06)) + `roadmap-board`
 * gölgesi. Taşan kırpılıyor ki lacivert hücre panonun kenarına dayansın. */
.ea-pano {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.ea-bolum[data-ton='lacivert'] .ea-pano {
    background: var(--primary-color);
    /* KENARLIK TAMAMEN KALKIYOR, yalnızca rengi saydamlaşmıyor.
     *
     * `border-color: transparent` ile 1 piksellik kenarlık YER KAPLAMAYA
     * devam ediyordu. Pano `overflow: hidden` olduğu için içerideki fotoğraf
     * DOLGU kutusunda kesiliyor ve fotoğrafın çevresinde 1 piksellik lacivert
     * bir şerit kalıyordu — kartın kenarında ince bir çerçeve gibi
     * görünüyordu (mobilde kapanış kartında fark edildi). */
    border: 0;
}

/* ── Pano içi düz metin ─────────────────────────────────────────────── */
.ea-pano-metin {
    padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.6vw, 40px);
}

.ea-p {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.85;
    color: var(--text-dark-low);
    margin: 0 0 14px;
}

.ea-p:last-child {
    margin-bottom: 0;
}

.ea-bolum[data-ton='lacivert'] .ea-pano .ea-p {
    color: rgba(255, 255, 255, 0.84);
}

/* Kapanış paragrafları listeden saç teli bir çizgiyle ayrılıyor —
 * `plan-card-list` ve `lt-card-foot` aynı çizgiyi kullanıyor. */
.ea-pano-son {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.ea-bolum[data-ton='lacivert'] .ea-pano-son {
    border-top-color: rgba(255, 255, 255, 0.16);
}

.ea-pano-metin.ea-pano-son {
    margin-top: 0;
    padding-top: clamp(22px, 2vw, 30px);
}

/* ── Onay listesi ───────────────────────────────────────────────────────
 * `visa-step-features` / `plan-card-list`: 16x16 kutuda `fa-check`. Madde
 * kutucuğu YOK — sitede bu listeler zeminsiz, işaret tek başına yeterli.
 * (Bir ara maddeler kutucuğa alınmıştı; sitede o dil yok.) */
/* ── AÇIK ONAY LİSTESİ: FOTOĞRAFLI PANO ─────────────────────────────────
 *
 * ÜÇ DENEME:
 *   1) düz beyaz pano — yedi kısa satır kocaman boş bir kutunun ortasında
 *      kalıyordu;
 *   2) panoyu tamamen kaldırmak — bu sefer bölüm sayfada tutunamadı, satırlar
 *      havada duruyordu;
 *   3) şimdiki: pano geri geldi ama arkasında DOKU var (fotoğraf + %92 beyaz
 *      perde, merdiven panosuyla aynı teknik) ve işaret/metin belirgin.
 *
 * Fotoğraf CEFR panosundakinden farklı bir kare — aynı sayfada iki bölüm
 * arka arkaya gelebiliyor. */
/* ── Onay listesi panosu: FOTOĞRAF + LACİVERT PERDE ──────────────────────
 *
 * Bulanık fotoğraf tek başına denendi; kare açık renkli olduğu için pano
 * soluk ve kirli duruyordu. Şimdi sitenin kendi kalıbı kullanılıyor:
 * ana sayfadaki seviye tespit sahnesi (`lt-stage`) fotoğrafın üstüne
 * LACİVERT bir gradyan seriyor ve metni beyaz yazıyor. Perde değerleri
 * `lt-overlay`dan birebir.
 *
 * Fotoğraf hafifçe bulanık kalıyor: perdenin altında bile nesne detayı
 * metnin arkasında hareket yaratıyordu. */
.ea-bolum--liste[data-ton='acik']:has(.ea-liste) .ea-pano {
    position: relative;
    overflow: hidden;
    border-color: transparent;
}

.ea-bolum--liste[data-ton='acik']:has(.ea-liste) .ea-pano::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: 0;
    background: var(--ea-pano-gorsel, url('/uploads/photos/ogrenci-yazi.webp')) var(--ea-pano-konum, center) / cover no-repeat;
    filter: blur(6px);
    pointer-events: none;
}

/* Perde — `lt-overlay` ile aynı gradyan. */
.ea-bolum--liste[data-ton='acik']:has(.ea-liste) .ea-pano::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(3, 20, 45, 0.93) 0%,
        rgba(5, 42, 97, 0.8) 48%,
        rgba(3, 20, 45, 0.55) 100%
    );
}

.ea-bolum--liste[data-ton='acik']:has(.ea-liste) .ea-pano > * {
    position: relative;
    z-index: 1;
}

/* Koyu perdenin üstünde metin ve işaret açık renge dönüyor. */
.ea-bolum--liste[data-ton='acik']:has(.ea-liste) .ea-liste-oge {
    color: #ffffff;
}

.ea-bolum--liste[data-ton='acik']:has(.ea-liste) .ea-liste-oge i {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* PUNTO VE İŞARET BÜYÜTÜLDÜ. Geniş bir panonun içinde 13px metin ve 16px
 * işaret kutusu kayboluyordu — kocaman kutunun içinde küçük bir yapı gibi
 * duruyordu. Satır aralığı da açıldı; liste panoyu artık dolduruyor. */
.ea-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    /* Sütun boşluğu TEK YERDE tanımlı: `flex-basis` hesabı da bunu kullanıyor.
     * Değer 36'ya çıkarılmış ama hesap 30'da kalmıştı; dört sütunluk genişlik
     * 100%'ü 18 piksel aşıyor ve dördüncü sütun alt satıra düşüyordu. */
    --ea-bosluk: 36px;
    gap: 18px var(--ea-bosluk);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ea-liste-oge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    /* 600: madde adları artık bir liste değil, sayfanın taşıdığı bilgi.
     * 500'de fotoğraflı zeminin üstünde soluk kalıyordu. */
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-dark-dark);
}

/* İŞARET DOLU LACİVERT. `--primary-color-low` (%12) soluk gri bir kare
 * veriyordu ve dokulu zeminin üstünde iyice kayboluyordu. Dolu zemin +
 * beyaz tik, satırın başlangıcını net gösteriyor. */
.ea-liste-oge i {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--primary-color);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0;
    font-size: 11px;
}

.ea-bolum[data-ton='lacivert'] .ea-liste-oge {
    color: rgba(255, 255, 255, 0.92);
}

.ea-bolum[data-ton='lacivert'] .ea-liste-oge i {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ── Hücreler ───────────────────────────────────────────────────────────
 * `visa-sec`in sütun ızgarası: hücreler arası ayrım KENARLIK DEĞİL, 2px
 * genişliğinde bölüm zemini renginde bir kanal (grid `gap` + zemin rengi).
 * Sütun sayısı sabit; `auto-fit` ile satırın son hücresi bilinemiyor ve
 * kanal panonun kenarına dayanıyor — `visa-sec` de bu yüzden sabit sütun
 * kullanıyor. */
.ea-hucreler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--bg-color);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ea-bolum[data-ton='lacivert'] .ea-hucreler {
    background: rgba(255, 255, 255, 0.14);
}

.ea-hucre {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 2.2vw, 32px) clamp(22px, 2vw, 30px);
    background: var(--card-bg);
}

.ea-bolum[data-ton='lacivert'] .ea-hucre {
    background: var(--primary-color);
}

/* Vurgu hücresi — `visa-sec`te üç sütunun ORTASI lacivert ve panonun
 * kenarına kadar taşıyor; yuvarlatılmıyor. */
.ea-hucre--vurgu {
    background: var(--primary-color);
}

/* Numara kutusunun yerine BAŞLIĞIN ÜSTÜNDE kısa sarı çizgi. Sitenin bölüm
 * imzasının aynısı, yalnızca küçüğü. Hücreyi açıyor ve palete sadık kalıyor
 * (sarı = vurgu). */
.ea-hucre-ad::before {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--secondary-color);
    margin-bottom: 12px;
}

.ea-hucre-ad {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark-dark);
    margin: 0;
}

.ea-hucre--vurgu .ea-hucre-ad,
.ea-bolum[data-ton='lacivert'] .ea-hucre-ad {
    color: #ffffff;
}

.ea-hucre-metin {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--text-dark-low);
    margin: 0 0 10px;
}

.ea-hucre-metin:last-child {
    margin-bottom: 0;
}

.ea-hucre--vurgu .ea-hucre-metin,
.ea-bolum[data-ton='lacivert'] .ea-hucre-metin {
    color: rgba(255, 255, 255, 0.82);
}

/* ── Kapanış çağrısı ────────────────────────────────────────────────────
 * `plan-card` 04'ün anatomisi: metin yarısı + fotoğraf yarısı, bordo düğme.
 * Geçiş yalnızca metinle birleşen kenarda; fotoğrafın odağı net kalır. */
.ea-cta-govde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}

.ea-cta-metin-alan {
    padding: clamp(28px, 2.8vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.ea-cta-kicker {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.ea-cta-metin {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.84);
    margin: 0;
}

.ea-cta-gorsel {
    position: relative;
    background-image: url('/uploads/photos/online-derse-baslama.webp');
    background-size: cover;
    background-position: center;
    min-height: 240px;
}

.ea-cta-gorsel::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(72px, 8vw, 132px);
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--primary-color),
        color-mix(in srgb, var(--primary-color) 65%, transparent) 35%,
        color-mix(in srgb, var(--primary-color) 20%, transparent) 70%,
        transparent
    );
}

.ea-cta-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* Düğmeler ana sayfadan ölçüldü: bordo `rgb(191,23,26)`, beyaz metin,
 * r=10px, kenarlık ve gölge YOK; hover'da kararma değil YÜKSELTİ. */
.ea-dugme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.ea-dugme--birincil {
    background: var(--accent-color);
    color: #ffffff;
}

.ea-dugme--ikincil {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.ea-dugme:hover {
    transform: translateY(-2px);
}

.ea-dugme:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
}

/* ── Dar ekran ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ea-bolum-bas {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .ea-hucreler {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ea-cta-govde {
        grid-template-columns: minmax(0, 1fr);
    }

    .ea-cta-gorsel {
        min-height: 0;
        aspect-ratio: 16 / 9;
        order: -1;
    }

    .ea-cta-gorsel::after {
        inset: auto 0 0;
        width: auto;
        height: clamp(48px, 10vw, 96px);
        background: linear-gradient(
            0deg,
            var(--primary-color),
            color-mix(in srgb, var(--primary-color) 65%, transparent) 35%,
            color-mix(in srgb, var(--primary-color) 20%, transparent) 70%,
            transparent
        );
    }
}

@media (max-width: 640px) {
    .ea-hucreler {
        grid-template-columns: minmax(0, 1fr);
    }

    .ea-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ══ BİÇİM İÇERİKTEN TÜRETİLİR ══════════════════════════════════════════
 *
 * Her bölüm aynı panoya sokulduğunda sayfa baştan sona tek bir ritim
 * oluyordu. Panonun biçimini artık bloğun kendi içeriği seçiyor; kararı
 * `bloklar.tsx` veriyor, eşikler ağacın gerçek verisinden ölçüldü. */

/* ── Sayfa girişi ───────────────────────────────────────────────────────
 * Başlıksız paragraf bloğu = sayfanın giriş metni. Pano YOK, şapka YOK,
 * TAM GENİŞLİK. Önce şapkanın iki sütunlu düzenine düşüyor ve sayfanın
 * tepesinde yarım genişlikte, sahipsiz bir metin bloğu olarak duruyordu.
 * Punto gövde metninden bir kademe iri — `about-sec`in giriş paragrafı ve
 * `services-intro` da böyle ayrışıyor. */
.ea-bolum--giris {
    max-width: 100%;
}

/* SARI ŞERİT — `about-page` vizyon bloğunun aynısı:
 *   padding-left: 22px; border-left: 3px solid var(--secondary-color);
 *   color: var(--text-dark-dark);
 * Orada da giriş cümlesi bu şeritle akıştan ayrılıyor. Şerit paragraf
 * başına değil BLOĞUN tamamına veriliyor; giriş 2-3 paragraf olduğu için
 * her birine ayrı şerit koymak metni tarak gibi bölüyordu. */
.ea-lead {
    padding-left: 22px;
    border-left: 3px solid var(--secondary-color);
}

.ea-lead-p {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(15.5px, 1.35vw, 18px);
    line-height: 1.8;
    color: var(--text-dark-dark);
    margin: 0 0 14px;
}

.ea-lead-p:last-child {
    margin-bottom: 0;
}

/* ── Çip kümesi ─────────────────────────────────────────────────────────
 * Kısa maddeli listeler (ortalama 26 karakterin altı; 62 listenin 45'i)
 * onay ızgarasında satırın onda birini doldurup gerisini boş bırakıyordu.
 * Çip biçimi `services-tag` / `visa-step-badge`ten: `--primary-color-low`
 * zemin, `--primary-color-dark` metin, 8px yarıçap, Sora.
 *
 * TEK SAPMA punto: kaynakta 11px, burada 13px. Orada çip bir ETİKET
 * ("Yetişkin", "Çocuk"), burada sayfanın asıl içeriği — 11px'te
 * "Değerlendirme sistemini" okunmuyordu. */
/* Cumle icindeki listenin uc parcasi: giris, maddeler, devam. Aralarindaki
 * bosluk esit; boylece uc parca tek bir paragraf gibi okunuyor. Kapanisin
 * ustunde AYIRICI CIZGI YOK -- ayni cumlenin ikinci yarisi, cizgi onu
 * baska bir bolum gibi gosteriyordu. */
.ea-pano-giris {
    margin-bottom: 18px;
}

.ea-pano-devam {
    margin-top: 18px;
}

/* ── Satir ici maddeler ─────────────────────────────────────────────────
 * Liste cumlenin ortasindaysa maddeler blok degil, SATIR ICI akiyor: son
 * giris cumlesi + maddeler + kapanis tek bir paragraf. Madde arasi ayrimi
 * cip zemini yapiyor, virgul gerekmiyor; satir yuksekligi paragrafla ayni
 * kaldigi icin cipler metni sismiyor. */
.ea-akan {
    /* Haplar icin 2.05e acilmisti; marker satir yuksekligini sismiyor,
     * govde metniyle ayni ritme donuyor -- yalnizca seride pay birakiliyor. */
    line-height: 1.95;
}

/* ── Satır içi maddeler ─────────────────────────────────────────────────
 *
 * SİTENİN CÜMLE İÇİ VURGU ARACI. `style.css` içinde altı bölüm başlığı bu
 * kuralı paylaşıyor: metnin altına sarı bir şerit çekiliyor
 * (`background-size: 100% .26em; background-position: 0 92%`). Vurgu prozanın
 * İÇİNDE yapılacaksa sitenin kullandığı tek yol bu.
 *
 * İKİ DENEME GERİ ALINDI:
 *   1) soluk lacivert hap (`--primary-color-low`) — gri gövde metninin
 *      içinde leke gibi kayboluyordu, maddeler ayırt edilmiyordu;
 *   2) dolu lacivert hap — görünür oldu ama yedi koyu kutu paragrafı
 *      bloklara bölüyordu, cümle akmıyordu.
 * Marker ikisini de çözüyor: metin metin olarak akıyor, altındaki sarı şerit
 * hangi kelimelerin madde olduğunu gösteriyor. */
.ea-akan-oge {
    font-weight: 600;
    color: var(--primary-color-dark);
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-size: 100% 0.26em;
    background-position: 0 92%;
    padding-bottom: 0.04em;
    /* Maddeler arasında normal boşluktan biraz fazlası: iki şerit yan yana
     * gelince tek bir uzun vurgu gibi okunuyordu. */
    margin-right: 0.4em;
    /* Madde bir bütün; ortasından satır kırılırsa şerit ikiye bölünüyor. */
    white-space: nowrap;
}

/* DAR EKRANDA NOWRAP KALKIYOR. "Öğrencinin akademik veya profesyonel
 * hedefleri" gibi uzun maddeler telefon genişliğinde satıra sığmıyor ve
 * `nowrap` sayfayı yatay olarak taşırıyor. Orada madde satır kırabiliyor;
 * şeridin ikiye bölünmesi, sayfanın yana kaymasından iyi. */
@media (max-width: 560px) {
    .ea-akan-oge {
        white-space: normal;
    }
}

.ea-bolum[data-ton='lacivert'] .ea-akan-oge {
    color: #ffffff;
}

.ea-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ea-cip {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--primary-color-dark);
    background: var(--primary-color-low);
    padding: 9px 15px;
    border-radius: 8px;
}

.ea-bolum[data-ton='lacivert'] .ea-cip {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* ── Hücre düzenleri ────────────────────────────────────────────────────
 * Varsayılan `visa`: üç sütun, ortadaki hücre lacivert (bkz. `visa-sec`).
 * `.ea-hucreler` temel kuralı yukarıda; burada yalnızca sapmalar. */

/* Çok öge (10+): dört sütun, hücre sıkışık. Üç sütunda pano dört satır
 * boyunca uzayıp sayfayı tek bir koyu bloğa çeviriyordu. */
/* Yoğun ızgara (10+ öge): 2px kanal yerine GERÇEK BOŞLUK.
 *
 * Kanal düzeni üç-dört hücrede işe yarıyor; on iki hücrede kutular birbirine
 * yapışık tek bir blok gibi okunuyordu. Burada hücreler ayrı kartlar ve
 * aralarında `testimonial-grid` ile aynı 16px boşluk var. Panonun kendi
 * çerçevesi de kalkıyor — kartlar doğrudan sayfa zemininde duruyor. */
.ea-bolum:has(.ea-hucreler[data-duzen='dar']) .ea-pano {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ea-hucreler[data-duzen='dar'] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    background: transparent;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre {
    gap: 9px;
    padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.6vw, 24px);
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ea-hucreler[data-duzen='dar'] .ea-hucre-ad {
    font-size: 15px;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre-ad::before {
    width: 22px;
    margin-bottom: 10px;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre-metin {
    font-size: 12.5px;
    line-height: 1.7;
}

/* Uzun açıklamalı ögeler: iki sütun. Üç sütunda satırlar üç kelimede
 * kırılıp hücreler dikey bir şerit haline geliyordu. */
.ea-hucreler[data-duzen='genis'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ea-hucreler[data-duzen='genis'] .ea-hucre {
    padding: clamp(28px, 2.6vw, 38px) clamp(26px, 2.4vw, 36px);
}

/* ── Adım akışı ─────────────────────────────────────────────────────────
 * `adimlar` bloğunda sıra bir ANLAM taşıyor (kayıt süreci gibi); ızgaraya
 * dağıtmak o anlamı bozuyor. `lt-steps` düzeni: numara solda, metin yanında,
 * adımlar arasında saç teli çizgi. */
/* İKİ SÜTUN. Tek sütunda altı adım sayfanın en uzun bloğu oluyordu ve her
 * satır boydan boya uzanıp seyrek duruyordu. İki sütunda okuma sırası
 * bozulmuyor: numara zaten sırayı taşıyor, göz soldan sağa 1-2, 3-4, 5-6
 * gidiyor.
 *
 * AYIRICI ÇİZGİ YOK. Tek sütunda satırları çizgi ayırıyordu; ızgarada çizgi
 * hem satır hem sütun boyunca kırılıyor ve kafes gibi duruyor. Ayrımı
 * numaranın kendisi ve aradaki boşluk yapıyor. */
.ea-akis {
    margin: 0;
    padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.6vw, 40px);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 2.4vw, 34px) clamp(28px, 3vw, 48px);
}

.ea-akis-adim {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

@media (max-width: 820px) {
    .ea-akis {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Adım numarası ──────────────────────────────────────────────────────
 *
 * ÖNCEKİ DENEME GERİ ALINDI: %12'lik bordo zemin + bordo rakam soluk pembe
 * bir kutu olarak çıkıyordu — markanın bordosuna benzemiyordu. Üstelik her
 * satırda ÜÇ ayrı işaret vardı (kutu, başlığın üstündeki sarı çizgi, başlık)
 * ve birbirleriyle yarışıyorlardı.
 *
 * Şimdi tek ve net bir işaret var: DOLU bordo kare, beyaz rakam. Sitenin
 * bordoyu kullandığı biçim bu — küçük ögede dolu, soluk değil
 * (`lt-step-num` de aynı mantıkta, orada lacivert). Sarı çizgi bu blokta
 * kaldırıldı; numara zaten satırı açıyor. */
.ea-akis-no {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--accent-color);
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Akış satırlarında başlığın üstündeki sarı çizgi YOK — numarayla
 * yarışıyordu. Çizgi hücreli ızgaralarda kalmaya devam ediyor. */
.ea-akis .ea-hucre-ad::before {
    content: none;
}

.ea-akis .ea-hucre-ad {
    font-size: 16px;
    margin-bottom: 2px;
}

.ea-akis-govde {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Dar ekran ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ea-hucreler[data-duzen='dar'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ea-hucreler[data-duzen='genis'] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ea-hucreler[data-duzen='dar'] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ea-akis-adim {
        gap: 14px;
    }
}


/* ══ SÜTUN SAYISI ÖGE SAYISINDAN ════════════════════════════════════════
 *
 * Sabit sütun sayısı son satırda DELİK bırakıyordu: 5 öge 3 sütuna
 * dizilince ikinci satırda iki hücre var, üçüncüsü boş — ızgara yarım
 * kalmış gibi duruyordu. Sütun sayısını artık `bloklar.tsx` -> `sutunPlani()`
 * seçiyor ve `--ea-sut` olarak buraya geçiriyor.
 *
 * Tam bölen bulunamayan sayılarda (5, 7, 11, 13) `data-ortala` işaretleniyor
 * ve düzen ızgaradan çıkıp ortalanmış akışa geçiyor: son satır ortada durur,
 * delik görünmez. Flex kullanılıyor çünkü grid'de son satırı ortalamanın
 * temiz bir yolu yok. */
.ea-liste {
    grid-template-columns: repeat(var(--ea-sut, 3), minmax(0, 1fr));
}

.ea-liste[data-ortala] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ea-liste[data-ortala] .ea-liste-oge {
    /* Sütun genişliği ızgaradakiyle aynı; yalnızca son satır ortalanıyor. */
    flex: 0 1
        calc((100% - (var(--ea-sut, 3) - 1) * var(--ea-bosluk, 30px)) / var(--ea-sut, 3));
    min-width: 0;
}

.ea-hucreler {
    grid-template-columns: repeat(var(--ea-sut, 3), minmax(0, 1fr));
}

/* Hücrelerde 2px kanal düzeni (`visa-sec`) yalnızca ızgara TAM dolduğunda
 * çalışıyor; eksik son satırda kanal boşluğa uzanıp panoyu kesiyor. Bölen
 * bulunamayan sayılarda kanal yerine gerçek boşluk ve ortalanmış akış var.
 * Bu aynı zamanda ikinci bir görünüm veriyor — aynı sayfada iki hücreli
 * blok üst üste gelirse birbirinin kopyası olmuyorlar. */
.ea-hucreler[data-ortala] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    background: transparent;
}

.ea-hucreler[data-ortala] .ea-hucre {
    flex: 0 1 calc((100% - (var(--ea-sut, 3) - 1) * 16px) / var(--ea-sut, 3));
    min-width: 0;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Ortalanmış düzende pano çerçevesi kalkıyor — hücreler kendi kartları. */
.ea-bolum:has(.ea-hucreler[data-ortala]) .ea-pano {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ea-bolum[data-ton='lacivert']:has(.ea-hucreler[data-ortala]) .ea-hucre {
    background: var(--primary-color);
    box-shadow: none;
}

/* ══ ŞERİT — `ref-stats` bandı ══════════════════════════════════════════
 *
 * Referanslar sayfasındaki istatistik bandının aynısı: lacivert pano,
 * ögeler arasında dikey ince çizgi. Çizgi `+` seçicisiyle veriliyor ki
 * satır sarıldığında satır başında asılı kalmasın — orada da öyle
 * (`referanslar-page.css`: "Ayırıcı çizgiyi sınır olarak veriyoruz").
 *
 * Aynı sayfada ardışık iki liste bloğu geldiğinde ikincisinin onay
 * ızgarasından ayrılması için var. */
/* Bant doğrudan sayfa zemininde duruyor, panonun İÇİNDE değil —
 * referanslar sayfasında da öyle. Beyaz pano + lacivert bant iç içe iki
 * yüzey oluyordu, biri gereksiz. */
.ea-bolum:has(.ea-serit) .ea-pano {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ea-bolum:has(.ea-serit) .ea-pano-metin {
    padding: 0;
}

.ea-serit {
    display: flex;
    flex-wrap: wrap;
    background: var(--primary-color);
    border-radius: 24px;
    padding: 26px 8px;
    margin: 0;
    list-style: none;
}

.ea-serit-oge {
    flex: 1 1 200px;
    padding: 10px 22px;
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.ea-serit-oge + .ea-serit-oge {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* ŞERİT HER ZAMAN LACİVERT.
 *
 * Burada bir kural vardı: blok koyu tonluysa şerit `rgba(255,255,255,.1)`
 * oluyordu — çünkü o zaman şerit LACİVERT PANONUN İÇİNDE duruyordu ve aynı
 * renk üstüne aynı renk olmasın isteniyordu. Ama şerit bölümünde pano sonra
 * şeffaf yapıldı (bant doğrudan sayfa zemininde duruyor, `ref-stats` gibi).
 * Kural kalınca bant açık zeminde açık renge dönüyor ve beyaz metin
 * tamamen kayboluyordu — İtalyanca sayfasında görüldü.
 *
 * Panonun arkası artık yok; bant kendi rengini taşıyor. */

@media (max-width: 700px) {
    /* Sütunlar sarılınca soldaki çizgi satır başında asılı kalıyor. */
    .ea-serit-oge + .ea-serit-oge {
        border-left: none;
    }

    .ea-serit {
        flex-direction: column;
        padding: 8px 10px;
    }

    /* `flex: 1 1 200px` ANA EKSENE göre çalışır: satır yönündeyken 200px
     * GENİŞLİK tabanı demek, sütun yönüne dönünce 200px YÜKSEKLİK tabanı
     * oluyor. Her öğe tek satırlık bir meslek adı taşımasına rağmen 200
     * piksel yükseliyordu ve bandın altı kocaman boş kalıyordu (390px
     * ekranda ölçüldü: beş öğe x 200px). Dikey düzende taban içeriğe
     * bırakılıyor. */
    .ea-serit-oge {
        flex: 0 0 auto;
        padding: 15px 16px;
    }

    .ea-serit-oge + .ea-serit-oge {
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .ea-liste[data-ortala] .ea-liste-oge,
    .ea-hucreler[data-ortala] .ea-hucre {
        flex-basis: 100%;
    }
}


/* ══ AKAN BLOK — ana sayfadaki `about-sec` düzeni ══════════════════════
 *
 * Solda fotoğraf, sağda metin. Bütün ölçüler `about-sec`ten birebir:
 *   kap     -> minmax(0, .92fr) minmax(0, 1.08fr), gap clamp(36px,5vw,64px)
 *   görsel  -> 20px yarıçap, aspect-ratio 4/3, gölge 0 2px 12px rgba(0,0,0,.06)
 *   metin   -> max-width 38rem, sola hizalı
 *   başlık  -> Sora clamp(1.75rem,2.8vw,2.25rem), 700, -0.4px, satır 1.28
 *   çizgi   -> 40x3, --primary-color, alt boşluk 22px
 *   paragraf-> Montserrat 15px, --text-dark-low, satır 1.78
 *
 * Başlıkta sarı marker YOK: `about-sec` başlığı düz, ayrımı altındaki
 * lacivert çizgi yapıyor.
 *
 * ÖNCEKİ İKİ DENEME: (1) düz beyaz pano — sayfanın en sade parçası
 * kalıyordu; (2) fotoğraflı koyu sahne (`lt-stage`) — metin katmanı
 * sarmalayıcısı unutulunca perde metni tamamen örtüyordu, düzeltilince de
 * fotoğraf prozanın arkasında amaçsız kalıyordu. */
.ea-bolum[data-akan] .ea-pano {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ea-ikili {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
}

/* Fotograf sagda: sutunlarin yalnizca SIRASI degisiyor, genislik orani
 * ayni kaliyor (metin sutunu yine genis olan). `direction` ya da `order`
 * yerine acik sutun atamasi kullaniliyor; ikisi de erisilebilirlik acisindan
 * temiz ve DOM sirasi bozulmuyor. */
.ea-ikili[data-sagda] {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.ea-ikili[data-sagda] .ea-ikili-gorsel {
    grid-column: 2;
    grid-row: 1;
}

.ea-ikili[data-sagda] .ea-ikili-metin {
    grid-column: 1;
    grid-row: 1;
}

.ea-ikili-gorsel {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: var(--card-bg-low);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    aspect-ratio: 4 / 3;
}

.ea-ikili-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ea-ikili-metin {
    text-align: left;
    max-width: 38rem;
    padding-right: 8px;
}

/* METİN SOLA YAPIŞIK KALIYOR. Fotoğraf sağdayken metin `margin-left: auto`
 * ile fotoğrafa yaklaştırılmıştı; sonuç içeri kaçmış bir metin sütunu oldu
 * ve bölümün sol kenarı sayfanın geri kalanıyla hizasını kaybetti. Metin
 * artık her iki yönde de sütununun sol kenarından başlıyor. */
.ea-ikili[data-sagda] .ea-ikili-metin {
    padding-right: 0;
    padding-left: 0;
}

.ea-ikili-baslik {
    font-family: 'Sora', sans-serif;
    /* Bir kademe küçüldü (2.25rem tavanı 1.9'a). Uzun başlıklar iki satıra
     * taşıp metnin üstünde fazla yer kaplıyor, bölümün dengesi aşağı
     * kayıyordu. */
    font-size: clamp(1.5rem, 2.3vw, 1.9rem);
    font-weight: 700;
    color: var(--text-dark-dark);
    letter-spacing: -0.4px;
    line-height: 1.24;
    margin: 0 0 14px;
}

/* Baslik vurgusu: oteki bolum basliklariyla ayni marker. */
.ea-ikili-baslik .title-highlight {
    color: var(--primary-color);
    font-weight: 700;
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-size: 100% 0.26em;
    background-position: 0 92%;
    padding-bottom: 0.04em;
}

.ea-ikili-cizgi {
    width: 40px;
    height: 3px;
    margin: 0 0 22px;
    background: var(--primary-color);
    border-radius: 2px;
}

.ea-ikili-metin .ea-p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.78;
    color: var(--text-dark-low);
    margin: 0 0 1rem;
}

.ea-ikili-metin .ea-p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .ea-ikili {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    /* SAĞDAKİ FOTOĞRAFIN AÇIK YERLEŞİMİ DE SIFIRLANIYOR.
     *
     * `data-sagda` varyantı `grid-column: 2` / `grid-row: 1` ile fotoğrafı
     * ikinci sütuna sabitliyor. Tek sütuna inince bu atamalar ayakta kaldığı
     * için ızgara iki sütun olmaya devam ediyordu: telefonda metin şeride
     * dönüşüp fotoğraf yanında küçücük kalıyordu (390px'te görüldü).
     *
     * Yığılma sırası ana sayfadaki `about-sec` ile aynı: önce FOTOĞRAF,
     * altında metin. */
    .ea-ikili[data-sagda] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ea-ikili[data-sagda] .ea-ikili-gorsel,
    .ea-ikili .ea-ikili-gorsel {
        grid-column: 1;
        grid-row: 1;
    }

    .ea-ikili[data-sagda] .ea-ikili-metin,
    .ea-ikili .ea-ikili-metin {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }
}


/* ══ YOĞUN IZGARA — KAYDIRMALI RAY (bordo aksan) ═══════════════════════
 *
 * Bu düzen (`data-duzen="dar"`, 10+ öge) ağaçta TEK bir bölümde kullanılıyor:
 * "Hangi İngilizce Sınavlarına Hazırlanabilirsiniz?".
 *
 * NEDEN RAY: on iki kart dört sütunlu ızgarada üç satır kaplıyor ve sayfanın
 * en uzun bloğu oluyordu. Ray tek satıra indiriyor; okuyucu ilgilendiği
 * sınava kaydırarak gidiyor. Kalıp ana sayfadaki Google yorumları rayından
 * (`.gr-rail`, index.css): yatay taşma, kaydırma yapışması, gizli çubuk,
 * `cursor: grab`, `touch-action: pan-y` (dikey jest sayfaya gider).
 *
 * BORDO PANO DENENDİ, GERİ ALINDI: bütün panoyu bordoya boyamak bölümü
 * sayfadan kopardı. Bordo yine burada ama AKSAN olarak — kart çizgileri
 * bordo, bir kart dolu bordo. Sitenin geri kalanında da bordo böyle
 * kullanılıyor (düğmeler, rozetler). */
.ea-hucreler[data-duzen='dar'] {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    /* YAPISMA YUMUSAK: `mandatory` her kaydirmada karti zorla hizaliyor ve
     * surukleme sirasinda parmagi cekistiriyordu. `proximity` yalnizca
     * yakinsa hizaliyor. Surukleme suresince JS `is-dragging` ekleyip
     * yapismayi tamamen kapatiyor (asagida). */
    scroll-snap-type: x proximity;
    scroll-behavior: auto;
    /* Gölgeler kırpılmasın diye dikey pay — `.gr-rail` ile aynı gerekçe. */
    padding: 6px 4px 18px;
    margin: 0 -4px;
    /* `pan-y` YAZIYORDU ve niyet "yatay jest raya gitsin"di, ama
     * `touch-action` İZİN VERİLEN jestleri sayar: `pan-y` yalnızca dikey
     * panlamaya izin verir, yani yatay parmak hareketi bu öğede hiç
     * kaydırma üretmiyordu — telefonda şerit tutup çekilemiyordu.
     * İkisi birden: yatay jest şeridi kaydırır, dikey jest sayfaya geçer.
     * (Aynı hata Google yorumları rayında da vardı, orada da düzeltildi.) */
    touch-action: pan-x pan-y;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    background: transparent;
}

.ea-hucreler[data-duzen='dar']::-webkit-scrollbar {
    display: none;
}

.ea-hucreler[data-duzen='dar']:active,
.ea-hucreler[data-duzen='dar'].is-dragging {
    cursor: grabbing;
}

/* Surukleme ve atalet boyunca yapisma KAPALI; ray parmagi/ataleti serbest
 * takip ediyor. Bitince sinif kalkiyor ve ray en yakin karta yumusakca
 * oturuyor. */
.ea-hucreler[data-duzen='dar'].is-dragging {
    scroll-snap-type: none;
}

/* Sabit genişlik: raydaki her kart aynı, kaydırma adımı öngörülebilir.
 * `.gr-card` ile aynı değer. */
.ea-hucreler[data-duzen='dar'] .ea-hucre {
    flex: 0 0 clamp(268px, 26vw, 348px);
    scroll-snap-align: start;
    gap: 10px;
    padding: clamp(22px, 1.9vw, 28px) clamp(20px, 1.7vw, 26px);
    background: var(--card-bg);
    /* Daha kıvrık köşe: raydaki kartlar sayfadaki öteki kartlardan (20px)
     * ayrışsın diye 26px — `ref-cta-panel` ve `.roadmap-board` ile aynı
     * ölçek. */
    border-radius: 26px;
    box-shadow: 0 2px 12px rgba(191, 23, 26, 0.1);
}

.ea-hucreler[data-duzen='dar'] .ea-hucre-ad {
    font-size: 15px;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre-metin {
    font-size: 12.5px;
    line-height: 1.7;
}

/* RAY HÜCRESİNDE ÇİZGİ YOK, İKON VAR. Kısa bordo çizgi kartın üstünü
 * açıyordu ama ne olduğunu söylemiyordu; ikon hem aynı işi görüyor hem de
 * her sınavı ayırt ediyor. Kutu ölçüsü ana sayfadaki `.tcard-avatar`
 * ile aynı: 44x44, 13px yarıçap. */
.ea-hucreler[data-duzen='dar'] .ea-hucre-ad::before {
    content: none;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre-ikon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    background: var(--accent-color-low);
    color: var(--accent-color);
    font-size: 17px;
    margin-bottom: 4px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* ── Hover: kart yükseliyor ──────────────────────────────────────────────
 * Sitenin kart hover'ı (`testimonial-card`, `gr-card`): translateY(-4px) +
 * derinleşen gölge. İkon kutusu da sitenin altı bölümde paylaştığı
 * davranışı alıyor (büyüyüp hafifçe dönüyor). */
.ea-hucreler[data-duzen='dar'] .ea-hucre {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(191, 23, 26, 0.16);
}

.ea-hucreler[data-duzen='dar'] .ea-hucre:hover .ea-hucre-ikon {
    transform: scale(1.1) rotate(-4deg);
}

/* Sürüklerken kartlar zıplamasın — `.gr-rail:active .gr-card:hover` ile
 * aynı gerekçe. */
.ea-hucreler[data-duzen='dar']:active .ea-hucre:hover,
.ea-hucreler[data-duzen='dar'].is-dragging .ea-hucre:hover {
    transform: none;
}

/* RAYIN VURGU KARTI BORDO. Öteki düzenlerde vurgu lacivert; rayda bordo,
 * çünkü bu bölüm sayfanın tek bordo aksanı. Zemin/metin/ikon birlikte
 * `.ea-hucre--vurgu` üzerinden ayarlanıyor — hangi kartın vurgu olduğunu
 * `bloklar.tsx` -> `koyuHucre()` söylüyor. */
.ea-hucreler[data-duzen='dar'] .ea-hucre--vurgu {
    background: var(--accent-color);
}

.ea-hucreler[data-duzen='dar'] .ea-hucre--vurgu .ea-hucre-ikon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.ea-hucreler[data-duzen='dar'] .ea-hucre--vurgu .ea-hucre-ad::before {
    background: #ffffff;
}

/* Ray sayfa zemininde duruyor; panonun çerçevesi kalkıyor. */
.ea-bolum:has(.ea-hucreler[data-duzen='dar']) .ea-pano {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Sürükleme sırasında kartın içindeki bağlantı/metin seçilmesin. */
.ea-hucreler[data-duzen='dar'].is-dragging .ea-hucre {
    pointer-events: none;
}


/* ══ CEFR — GERÇEK MERDİVEN ════════════════════════════════════════════
 *
 * İKİ DENEME GERİ ALINDI:
 *   1) yedi eşit sütun, düz sıra — A1'den C2'ye giden bir yol olduğu
 *      okunmuyordu;
 *   2) rozetleri kademeli yükseltmek — rozetler farklı hizalarda durunca
 *      ALTLARINDAKİ METİNLER de kaydı ve ızgara bozuk göründü.
 *
 * Şimdiki hali gerçek bir merdiven: her seviye tabana oturan bir BASAMAK,
 * basamak boyu A1'den C2'ye doğru yükseliyor, rozet basamağın tepesinde
 * duruyor. İkinci denemenin hatası şuradan çözülüyor — basamak alanı SABİT
 * yükseklikte bir ızgara satırı (200px), metin ayrı bir satırda. Basamaklar
 * farklı boyda olsa bile metinlerin hepsi AYNI hizadan başlıyor.
 *
 * Renk de yükseliyor: A1'in %14 laciverdinden C1'e kadar kademelenip hedef
 * basamak C2'de sarıya dönüyor. Palet dışına çıkılmıyor. */
.ea-pano .egitim-levels {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 6px;
    /* STRETCH — `end` DEĞİL.
     *
     * `align-items: end` her sütunu kendi içeriği kadar yükseltip satırın
     * ALTINA yaslıyordu. Sütunların metinleri farklı satır sayısında olduğu
     * için sütun boyları da farklıydı ve her birinin İÇİNDEKİ basamak alanı
     * farklı yerde bitiyordu: çubukların tabanı üç ayrı hizaya dağılmıştı
     * (ölçüldü: 3941 / 3923 / 3904). Merdiven bu yüzden bozuk görünüyor,
     * C1 ile C2 aynı kademedeymiş gibi duruyordu.
     *
     * `stretch` ile yedi sütun da satırın tam boyunu alıyor, dolayısıyla
     * basamak alanları aynı yerde başlayıp aynı yerde bitiyor ve bütün
     * çubuklar TEK bir tabana oturuyor. */
    align-items: stretch;
}

.ea-pano .egitim-level {
    /* ZEMIN VE DOLGU SIFIRLANIYOR. `egitim-page.css` bu ogeyi bagimsiz bir
     * KART olarak tanimliyor (beyaz zemin, 16px yaricap, ic dolgu). Burada
     * oge bir kart degil, merdivenin bir basamagi; kart zemini beyaz panoda
     * gorunmuyordu ama panoya fotograf konunca her sutunun arkasinda beyaz
     * bir dikdortgen olarak ortaya cikti. */
    background: transparent;
    border-radius: 0;
    max-width: none;
    flex: none;
    /* DOLGU DA SIFIRLANIYOR. `egitim-page.css` bu ögeye `padding: 18px 16px`
     * veriyor; zemini sıfırladım ama dolgu kalmıştı ve açıklamaların altında
     * 18 piksellik boş bir şerit bırakıyordu. */
    padding: 0;
    position: relative;
    display: grid;
    /* Satır 1: basamak alanı (sabit) — satır 2: açıklama. */
    /* 196px'ti; en uzun basamak 190px olduğu için üstte 100 piksele yakın
     * ölü alan kalıyordu (ölçüldü). 172'ye çekildi, en uzun basamak da
     * 172'ye indi — tavan boşluğu kalmıyor. */
    grid-template-rows: 152px auto;
    justify-items: center;
    text-align: center;
}

.ea-pano .egitim-level:nth-child(1) { --ea-basamak: 0; }
.ea-pano .egitim-level:nth-child(2) { --ea-basamak: 1; }
.ea-pano .egitim-level:nth-child(3) { --ea-basamak: 2; }
.ea-pano .egitim-level:nth-child(4) { --ea-basamak: 3; }
.ea-pano .egitim-level:nth-child(5) { --ea-basamak: 4; }
.ea-pano .egitim-level:nth-child(6) { --ea-basamak: 5; }
.ea-pano .egitim-level:nth-child(7) { --ea-basamak: 6; }

/* Basamağın kendisi: tabana oturuyor, boyu kademeyle artıyor. Üst köşeleri
 * yuvarlak, alt köşeleri düz — basamak yere basıyor. */
.ea-pano .egitim-level::before {
    content: '';
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    width: 100%;
    /* EN KISA ÇUBUK 56px. 44px'ti; rozet 42 piksel olduğu için ilk basamağa
     * sığmıyor, alttan 2 piksel taşıyordu (A1'de görüldü). 56 tabanla rozet
     * çubuğun içine oturuyor, en uzun basamak yine 152'de kalıyor. */
    height: calc(56px + var(--ea-basamak, 0) * 16px);
    border-radius: 14px 14px 0 0;
    /* Renk aşağıdaki BANT kurallarından geliyor. */
}

/* ── Merdiven panosunda fotoğraf ─────────────────────────────────────────
 *
 * Pano düz beyazdı. Arkasına bir kare kondu ama DOKU olarak: üstünde %92'lik
 * beyaz perde var, fotoğraf ancak seziliyor. Perde şart — basamaklar
 * fotoğrafın üstünde duruyor ve renkleri okunur kalmalı.
 *
 * Basamak renkleri bu yüzden OPAK'a çevrildi (aşağıda). Yarı saydam
 * kaldıklarında fotoğraf içlerinden sızıp lacivert ve sarı tonlarını
 * kirletiyordu. Yeni değerler eski rgba'ların beyaz üstündeki tam
 * karşılığı — görünüm değişmedi, yalnızca arkaları kapandı. */
/* FOTOĞRAF AYRI KATMANDA VE BULANIK.
 *
 * Önce zemin görüntüsü olarak konmuştu, üstünde %92'lik beyaz perde vardı.
 * Yetmedi: karedeki lamba ve saksı hâlâ SEÇİLİYORDU, panonun sol yarısı
 * kalabalık sağ yarısı boş görünüyor ve bölüm bozuk duruyordu.
 *
 * Şimdi fotoğraf kendi katmanında ve `blur(5px)` ile bulanıklaştırılıyor —
 * tanınabilir nesne kalmıyor, geriye yalnızca doku ve ışık kalıyor.
 * `inset: -10px`: bulanıklık ögenin kenarında saydamlaşıyor, katman biraz
 * taşırılmazsa çerçeve boyunca soluk bir hat kalıyor. */
.ea-bolum--seviyeler .ea-pano {
    position: relative;
    overflow: hidden;
    border-color: transparent;
}

/* Merdivenin altında ve üstünde dolgu kısaldı: bölüm zaten yatay, dikey
 * pay gereksiz yer kaplıyordu. */
.ea-bolum--seviyeler .ea-pano-metin {
    padding-top: 16px;
    padding-bottom: 20px;
}

.ea-bolum--seviyeler .ea-pano::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: 0;
    background: var(--ea-pano-gorsel, url('/uploads/photos/online-dil-egitimi-calisma-masasi.webp')) var(--ea-pano-konum, center) / cover
        no-repeat;
    /* Fotoğraf hafif bulanık; üstündeki lacivert perde okunurluğu sağlıyor. */
    filter: blur(6px);
    pointer-events: none;
}

/* LACİVERT PERDE — onay listesi panosuyla ve ana sayfadaki `lt-stage` ile
 * aynı gradyan. Beyaz zeminli iki deneme (beyaz perde, sonra soluk doku)
 * fotoğrafı ya yok ediyor ya da panoyu kirli gösteriyordu. */
.ea-bolum--seviyeler .ea-pano::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(3, 20, 45, 0.93) 0%,
        rgba(5, 42, 97, 0.8) 48%,
        rgba(3, 20, 45, 0.55) 100%
    );
}

.ea-bolum--seviyeler .ea-pano > * {
    position: relative;
    z-index: 1;
}

/* ── RENK = CEFR BANDI ───────────────────────────────────────────────────
 *
 * CEFR'in kendi yapısı üç bant: A (temel), B (bağımsız), C (yetkin). Renk
 * bu bantları izliyor — yani dekorasyon değil, ölçeğin kendi bilgisi:
 *
 *   A1 · A2      -> SARI      başlangıç
 *   B1 · B1+ ·B2 -> LACİVERT  gelişim (bant içinde koyulaşıyor)
 *   C1           -> koyu lacivert
 *   C2           -> BORDO     hedef
 *
 * Tek renkli bir opaklık rampası denenmişti; ilk basamaklar beyaz zeminde
 * gri okunuyordu ve yedi basamak arasında hiçbir eşik görünmüyordu. Bant
 * renkleri hem paletin üçünü de kullanıyor hem de A/B/C sınırlarını
 * gösteriyor. */
/* KOYU ZEMİNE GÖRE RAMPA. Pano laciverde döndüğü için B bandının
 * lacivert tonları görünmez oldu; orta bant beyaz saydamlığa geçti.
 * Marka kimliğini uçlar taşıyor: A bandı SARI, hedef basamak BORDO. */
.ea-pano .egitim-level:nth-child(1)::before {
    background: rgba(255, 222, 89, 0.72);
}

.ea-pano .egitim-level:nth-child(2)::before {
    background: var(--secondary-color);
}

.ea-pano .egitim-level:nth-child(3)::before {
    background: rgba(255, 255, 255, 0.3);
}

.ea-pano .egitim-level:nth-child(4)::before {
    background: rgba(255, 255, 255, 0.45);
}

.ea-pano .egitim-level:nth-child(5)::before {
    background: rgba(255, 255, 255, 0.6);
}

.ea-pano .egitim-level:nth-child(6)::before {
    background: rgba(255, 255, 255, 0.82);
}

/* Sarı bantta rozet lacivert rakamlı kalıyor (varsayılan) — sarı üstünde
 * beyaz kutu ve lacivert rakam net okunuyor.
 *
 * HEDEF BASAMAK BORDO. Sarıydı; merdivenin tepesi sitenin vurgu sarısıyla
 * bitiyordu ama basamak dizisi lacivert rampasıyla yükseldiği için sarı
 * oraya yabancı düşüyordu. Bordo, laciverdin devamı gibi okunuyor ve
 * sitenin "varış / eylem" rengi zaten bu. */
.ea-pano .egitim-level:last-child::before {
    background: var(--accent-color);
}

/* Rozet basamağın TEPESİNDE: alttan basamak boyu kadar yukarı itiliyor. */
.ea-pano .egitim-level-code {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 1;
    margin-bottom: calc(56px + var(--ea-basamak, 0) * 16px - 48px);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--primary-color-dark);
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 10px rgba(5, 42, 97, 0.12);
}

/* Hedef basamağın rozeti ÖTEKİLERLE AYNI: beyaz kutu. Bordo basamağın
 * üstünde beyaz rozet net ayrışıyor; lacivert rozet iki koyu rengi yan yana
 * getirip bulanık kalıyordu. Rakam bordo — kutu ile basamağı bağlıyor. */
.ea-pano .egitim-level:last-child .egitim-level-code {
    background: var(--card-bg);
    color: var(--accent-color);
}

.ea-pano .egitim-level-text {
    grid-row: 2;
    font-family: 'Montserrat', sans-serif;
    /* Pano lacivert: metin beyaz. (Burada bir ara İKİ `color` bildirimi
     * kalmisti; sonraki koyu deger oncekini eziyor ve metin okunmuyordu.) */
    font-weight: 500;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 14px 0 0;
    padding: 0 4px;
    /* MIN-HEIGHT YOK. Dört satırlık pay ayrılmıştı ama en uzun açıklama üç
     * satır; altta boş bir satır kalıyordu. Hizalamayı zaten IZGARA SATIRI
     * yapıyor — yedi metin de aynı satırda, dolayısıyla aynı y'den başlıyor
     * ve satır en uzun metne göre büyüyor. */
}

/* Koyu panoda basamak ve rozet zemine göre değişiyor. */
.ea-bolum[data-ton='lacivert'] .ea-pano .egitim-level::before {
    background: rgba(255, 255, 255, calc(0.08 + var(--ea-basamak, 0) * 0.038));
}

.ea-bolum[data-ton='lacivert'] .ea-pano .egitim-level-text {
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
    /* Dar ekranda merdiven anlamını yitiriyor (iki sütuna sarınca basamak
     * boyu rastgele görünür); düz ızgaraya dönüyor. */
    .ea-pano .egitim-levels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }

    .ea-pano .egitim-level {
        grid-template-rows: auto auto;
    }

    .ea-pano .egitim-level::before {
        content: none;
    }

    .ea-pano .egitim-level-code {
        margin-bottom: 0;
    }
}

/* ── Hub sayfalarının program IZGARASI ───────────────────────────────────
 *
 * Kaynak: ana sayfadaki "Neden NYLA" kartları (`.testimonial-card`). Üstte
 * ikon kutusu, altında ad, altında açıklama; değerler oradan birebir.
 *
 * ÖNCEKİ DENEME GERİ ALINDI: tek bir panonun içinde bitişik hücreler vardı.
 * Kartlar birbirine yapışıktı ve panonun köşeleri dışında hiçbir kartın
 * kendi sınırı yoktu. Artık her kart ayrı ve aralarında `testimonial-grid`
 * ile aynı 16px boşluk var; panonun şeritli zeminine de gerek kalmadı. */
.ea-alt-liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.ea-alt-liste > li {
    display: flex;
}

/* Kart — `.testimonial-card` değerleri. */
.ea-alt-kart {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(18px, 1.5vw, 24px);
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover da sitenin kendi kart hover'ı: kart yükseliyor. Önce zemin
 * `--primary-color-dark`a düşüyordu; kart sönüyor gibi duruyordu. */
.ea-alt-kart:hover,
.ea-alt-kart:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* İkon kutusu — `.tcard-avatar` ölçüleri (44x44, r=13). */
.ea-alt-ikon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--primary-color);
    color: var(--text-light);
    /* Geçiş listesi `style.css`teki ortak ikon kuralıyla aynı. */
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ea-alt-ad {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark-dark);
}

.ea-alt-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-dark-low);
    flex: 1;
}

/* ── Renk karışımı ───────────────────────────────────────────────────────
 * Ana sayfadaki yol haritası panosunun kuralı: "adım kartlarının hepsi
 * lacivert olmasın" + "üç renk de boardda görünsün" (style.css).
 *
 * ÇEVRİM BEŞLİ, DÖRTLÜ DEĞİL. Dörtlü çevrim 4 sütunla aynı periyoda
 * düştüğü için renkler her satırda AYNI sütuna geliyordu: ikinci sütun
 * baştan aşağı lacivert, dördüncü sütun baştan aşağı sarı — ızgara dikey
 * şeritlere bölünüyordu. 5 ile 4'ün ortak böleni olmadığı için desen her
 * satırda bir hücre kayıyor ve beş satırda bir başa dönüyor. */
.ea-alt-liste > li:nth-child(5n + 2) .ea-alt-kart {
    background: var(--primary-color);
}

.ea-alt-liste > li:nth-child(5n + 2) .ea-alt-ad {
    color: #ffffff;
}

.ea-alt-liste > li:nth-child(5n + 2) .ea-alt-tagline {
    color: rgba(255, 255, 255, 0.8);
}

/* Lacivert kartta ikon kutusu açık yüzey — `visa-step` lacivert varyantı
 * `rgba(255,255,255,.18)` kullanıyor, aynısı. */
.ea-alt-liste > li:nth-child(5n + 2) .ea-alt-ikon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.ea-alt-liste > li:nth-child(5n + 4) .ea-alt-kart {
    background: var(--secondary-color);
    box-shadow: none;
}

.ea-alt-liste > li:nth-child(5n + 4) .ea-alt-ad {
    color: var(--primary-color-dark);
}

.ea-alt-liste > li:nth-child(5n + 4) .ea-alt-tagline {
    color: rgba(5, 42, 97, 0.78);
}

/* Sarı kartta ikon kutusu lacivert; hover'da sarıya dönmesi anlamsız
 * olurdu (zemin zaten sarı), onun yerine koyulaşıyor. */
.ea-alt-liste > li:nth-child(5n + 4) .ea-alt-ikon {
    background: var(--primary-color);
    color: var(--text-light);
}

/* Üçüncü renk: İLK kartın ikonu bordo. Roadmap'te de bordo yalnızca ilk
 * kartın rozetinde — yüzey olarak değil, aksan olarak. */
.ea-alt-liste > li:first-child .ea-alt-ikon {
    background: var(--accent-color);
    color: #ffffff;
}

/* ── İkon hover'ı ────────────────────────────────────────────────────────
 *
 * Sitenin ALTI bölümde paylaştığı davranış (`style.css`: visa-step,
 * sss-stat, footer-info, centerBox, tcard-avatar, cinfo): kutu sarıya döner,
 * ikon lacivert olur, hafifçe büyüyüp döner.
 *
 * ÖZGÜLLÜK: seçici bilerek `.ea-alt-liste > li` ile başlıyor. Kısa haliyle
 * (`.ea-alt-kart:hover .ea-alt-ikon`) yukarıdaki ton kurallarıyla EŞİT
 * ağırlıktaydı ve onlar sonra geldiği için kazanıyorlardı — sarı dolgu
 * yalnızca düz beyaz kartlarda çalışıyor, lacivert kartta ve ilk kartta hiç
 * görünmüyordu (ölçüldü: ikon hover'da bordo/şeffaf beyaz kalıyordu). */
.ea-alt-liste > li .ea-alt-kart:hover .ea-alt-ikon,
.ea-alt-liste > li .ea-alt-kart:focus-visible .ea-alt-ikon {
    background: var(--secondary-color);
    color: var(--primary-color);
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(255, 222, 89, 0.45);
}

/* SARI KART İSTİSNASI: zemin zaten sarı, kutunun da sarıya dönmesi ikonu
 * yok ediyor. Orada koyulaşıyor. Seçici bir sınıf daha uzun olduğu için
 * yukarıdaki ortak kuralı yeniyor. */
.ea-alt-liste > li:nth-child(5n + 4) .ea-alt-kart:hover .ea-alt-ikon,
.ea-alt-liste > li:nth-child(5n + 4) .ea-alt-kart:focus-visible .ea-alt-ikon {
    background: var(--primary-color-dark);
    color: var(--secondary-color);
    transform: scale(1.1) rotate(-4deg);
    box-shadow: none;
}

/* ── Yaprak: kardeş programlar ─────────────────────────────────────────── */

.ea-kardes-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

/* ── Kardeş programlar: TIKLANABİLİR ÇİP ─────────────────────────────────
 *
 * Biçim sayfadaki çip kümesinin (`.ea-cip`) aynısı — aynı zemin, aynı punto,
 * aynı yarıçap. Tek farkı sondaki ok: bunlar bir yere GÖTÜRÜYOR ve düz metin
 * gibi durmamalı.
 *
 * İKİ DENEME GERİ ALINDI: önce düz beyaz haplardı (sayfanın en sönük
 * parçası), sonra her satıra ikon kutusu konmuştu (yan gezinme için fazla
 * ağır, bölümü kart ızgarasına benzetiyordu). */
.ea-kardes-liste a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 16px;
    border-radius: 8px;
    background: var(--primary-color-low);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--primary-color-dark);
    text-decoration: none;
    transition:
        background 0.25s var(--ease-site, ease),
        color 0.25s var(--ease-site, ease),
        transform 0.25s var(--ease-site, ease);
}

/* Ok, çipin tıklanabilir olduğunu söyleyen tek işaret; küçük ve soluk
 * duruyor ki adın önüne geçmesin. */
.ea-kardes-liste a i {
    font-size: 10px;
    opacity: 0.5;
    transition:
        transform 0.25s var(--ease-site, ease),
        opacity 0.25s var(--ease-site, ease);
}

/* HOVER'DA RENK DEĞİŞMİYOR, YALNIZCA YÜKSELİYOR.
 *
 * Zemin laciverte dönüyordu; çip bütünüyle renk değiştirince satır yanıp
 * sönüyor gibi oluyordu. Sitenin düğme dili bu değil — bordo düğmelerde de
 * kararma kaldırılmış, tek geri bildirim yükselti. Aynısı burada:
 * renk sabit, çip kalkıyor, ok bir adım sağa gidiyor. */
.ea-kardes-liste a:hover,
.ea-kardes-liste a:focus-visible {
    transform: translateY(-2px);
}

/* Üzerine gelince ok bir adım sağa kayıyor — yönü gösteriyor. */
.ea-kardes-liste a:hover i,
.ea-kardes-liste a:focus-visible i {
    opacity: 1;
    transform: translateX(3px);
}


/* ── Dar ekran ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ea-dugme,
    .ea-alt-kart {
        transition: none;
    }

    .ea-dugme:hover,
    .ea-alt-kart:hover {
        transform: none;
    }
}

/* Vurgulu son kelime SARI. Açık blokta lacivert; lacivert zeminde lacivert
 * okunmaz, sitenin koyu bloklarında vurgu rengi sarı (bkz. `.contactBox`
 * başlığı, afiş etiketleri). */
/* Alt kartlar koyu zeminde AÇIK yüzeye dönüyor — ana sayfada `.contactBox`
 * içindeki alanların ve `.roadmap-col--final` fotoğraf kutusunun yaptığı
 * şeyin aynısı: `rgba(255,255,255,.10)`. Gölge kaldırılıyor; koyu zeminde
 * %4'lük siyah gölge görünmüyor, yalnızca kenarı kirletiyor. */
/* Gövdedeki bölüm başlığı da koyu blok komşuluğunda değişmiyor — o pano
 * dışında, açık zeminde duruyor. Burada bir şey gerekmiyor. */

/* ── Izgara: dar ekranda sütun sayısı ───────────────────────────────────
 * Kartlar artık ayrı ayrı; ızgaranın kendi zemini yok, yalnızca sütun
 * sayısı düşüyor. Renk çevrimi dörtlü olduğu için 2 sütunda desen
 * kendiliğinden kayıyor ve aynı renk alt alta gelmiyor. */
@media (max-width: 1024px) {
    .ea-alt-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Telefonda TEK sütun. İki sütunda kart genişliği 168 piksele düşüyor ve
 * program adları ("Çocuklar İçin İngilizce") üç satıra bölünüp açıklamayı
 * kartın dışına taşırıyordu (ölçüldü: 390px ekranda 2x168px). */
@media (max-width: 640px) {
    .ea-alt-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ══ SARI BLOKLAR ═══════════════════════════════════════════════════════
 *
 * Kaynak: ana sayfadaki yol haritası panosu. Kendi CSS'inde notu duruyor —
 * "Renk karışımı: adım kartlarının hepsi lacivert olmasın" (style.css) —
 * ve son sütun `--secondary-color` zemin + `--primary-color` metin.
 * Buradaki sarı blok o sütunun aynısı: zemin sarı, ÜSTÜNDEKİ HER ŞEY
 * lacivert. Sarı üstünde beyaz ya da açık gri okunmaz. */
/* Başlığın altındaki imza çizgisi sarı zeminde görünmez; lacivert oluyor.
 * DİKKAT: `background` KISAYOLU kullanılıyor, çünkü asıl kural da öyle —
 * orada çizginin 44 piksellik boyu `background-size`tan geliyor. Yalnızca
 * `background: var(--primary-color)` yazınca boyut da sıfırlanıyor ve çizgi
 * kartın tamamı boyunca uzanıyordu. */
/* Sarı zeminde alt kart: beyaz yüzey. Roadmap'in sarı sütununda fotoğraf
 * kutusu da böyle ayrışıyor. */
/* ══ KÖŞELER ════════════════════════════════════════════════════════════
 *
 * Bloklar peş peşe aynı kutu olarak okunuyordu. Site zaten asimetrik köşe
 * kullanıyor; ölçüldü:
 *   `.about-founder-card`      -> 32px 32px 32px 0    (bir köşe kare)
 *   `.about-page-mission-card` -> 24px 0 24px 0       (çapraz)
 * Aynı iki desen 20px'lik kart ölçeğine indirildi ve düz 20px'le birlikte
 * üçlü bir döngüye kondu, böylece ARDIŞIK iki blok asla aynı köşeye sahip
 * olmuyor. Köşe yalnızca dış hat; iç dolgu (26–56px) değişmediği için
 * metne dokunmuyor. */
/* ══ ÇENTİKLİ KÖŞE ══════════════════════════════════════════════════════
 *
 * Motorun (`InvertedRadiusV2.js`) çentiği çizebilmesi için işaretçi öge
 * konumlandırılmış olmalı; ölçüler `.sss-sec .sssFaqOuted` ve
 * `.sssLeftInverted` kurallarından alındı. Hangi köşenin oyulacağını
 * `bloklar.tsx` blok sırasına göre döndürüyor, böylece ardışık iki blok
 * aynı yerden oyulmuyor.
 *
 * Motor 768px altında kendini kapatıyor; dar ekranda kart düz kalıyor. */
/* ── Düz köşe denemesi geri alındı ──────────────────────────────────────
 * Bloklara `20px 20px 20px 0` / `20px 0 20px 0` gibi asimetrik yarıçaplar
 * verilmişti. Sitede kare köşeli kart yok; çeşitlilik çentikten geliyor.
 * Kurallar aşağıda sıfırlanıyor (kaldırmak yerine sıfırlamak, eski kuralın
 * neden gittiğini kaydediyor). */

/* Program izgarasi ve kardes listesi de ayni sapka dilbilgisini kullaniyor;
 * ek bir baslik stili yok. Izgaranin ust bosluğu sapkadan geliyor. */
.ea-bolum--alt .ea-alt-liste,
.ea-bolum--kardes .ea-kardes-liste {
    margin-top: 0;
}


/* ══ DAR EKRANDA SÜTUN SAYISI ═══════════════════════════════════════════
 *
 * `--ea-sut` bu dosyanın en başında değil, `bloklar.tsx` içinde SATIR İÇİ
 * stil olarak veriliyor (`style={{ '--ea-sut': plan.sutun }}`). Satır içi
 * stil, normal bir stylesheet kuralından güçlü olduğu için yukarıdaki
 * `@media (max-width: 640px)` blokları değişkeni ezemiyordu: telefonda
 * ızgara üç sütunda kalıyor, hücre genişliği 114 piksele düşüyor ve
 * "Etkileşimli Öğrenme" gibi başlıklar kartın dışına taşıyordu (390px
 * ekranda ölçüldü).
 *
 * `!important` burada gerçekten gerekli — satır içi stili yenmenin tek
 * yolu bu. Değişkenin kendisi eziliyor; böylece hem ızgara sütunları hem
 * `[data-ortala]` düzenindeki `flex-basis` hesabı hem de `.ea-liste` tek
 * noktadan düzeliyor.
 *
 * DOSYANIN SONUNDA duruyor: yukarıdaki `.ea-hucreler { grid-template-columns:
 * repeat(var(--ea-sut), ...) }` kuralı 967. satırda ve medya sorguları
 * özgüllük eklemediği için ondan ÖNCE yazılan her mobil kural zaten
 * eziliyordu. */
@media (max-width: 1024px) {
    .ea-hucreler,
    .ea-liste {
        --ea-sut: 2 !important;
    }
}

@media (max-width: 640px) {
    .ea-hucreler,
    .ea-liste {
        --ea-sut: 1 !important;
    }

    /* Tek sütuna inince 2 piksellik "kanal" düzeni anlamını yitiriyor
     * (bölen çizgi kalmıyor, yalnızca ince bir şerit oluyor); hücreler
     * gerçek boşlukla ayrılıyor. */
    .ea-hucreler {
        gap: 12px;
        background: transparent;
    }

    /* Kanal düzeni kalkınca AÇIK hücreler birbirinden ayırt edilemiyordu:
     * beyaz kart, açık gri sayfa zemini, arada yalnızca 12px boşluk. Lacivert
     * hücreler kendi rengiyle ayrılıyor, açık olanların ayrılması için sitenin
     * kart gölgesi gerekiyor (kenarlık YOK — `[data-ortala]` düzeninde de
     * aynı gölge kullanılıyor). */
    .ea-hucre {
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }
}


/* ══ TEK SÜTUNDA ŞAŞMAZ SIRA ════════════════════════════════════════════
 *
 * `genis` düzeninin kimliği DAMA TAHTASI: iki sütunda `a K` / `K a`. Bu
 * dizinin kendisi `a K K a` olduğu için tek sütuna inince iki koyu hücre
 * ALT ALTA geliyor ve arada kalan 12 piksellik açık şerit, tek bir lacivert
 * bloğun ortasındaki çatlak gibi okunuyor. 43 sayfada 6 blokta oluyor:
 * /egitimlerimiz, genel-ingilizce, cocuklar-icin-ingilizce,
 * konusma-ingilizcesi, ielts, korece.
 *
 * İki hedef aynı sınıf dizisiyle sağlanamıyor (2 sütunda dama = 1 sütunda
 * ikili tekrar), bu yüzden karar mobilde CSS'e devrediliyor: sıra yalnızca
 * burada, `nth-child` ile şaşmaz hale getiriliyor.
 *
 * ZEMİN VE YAZI AYNI KURALDA. Daha önce renk kararı iki ayrı kurala
 * bölündüğünde zemin ile metin birbirinden koptu ve 14 sayfada beyaz
 * üstüne beyaz yazı çıktı. Her iki yön de burada eksiksiz tanımlı:
 * çift sıradakiler koyu, tek sıradakiler açık — hiçbiri ötekinden
 * miras beklemiyor. */
@media (max-width: 640px) {
    .ea-hucreler[data-duzen='genis'] .ea-hucre:nth-child(even) {
        background: var(--primary-color);
    }

    .ea-hucreler[data-duzen='genis'] .ea-hucre:nth-child(even) .ea-hucre-ad {
        color: #ffffff;
    }

    .ea-hucreler[data-duzen='genis'] .ea-hucre:nth-child(even) .ea-hucre-metin {
        color: rgba(255, 255, 255, 0.82);
    }

    .ea-hucreler[data-duzen='genis'] .ea-hucre:nth-child(odd) {
        background: var(--card-bg);
    }

    .ea-hucreler[data-duzen='genis'] .ea-hucre:nth-child(odd) .ea-hucre-ad {
        color: var(--primary-color-dark);
    }

    .ea-hucreler[data-duzen='genis'] .ea-hucre:nth-child(odd) .ea-hucre-metin {
        color: var(--text-dark-low);
    }
}


/* ══ SINAV ŞERİDİ: GENİŞ EKRANDA IZGARA ═════════════════════════════════
 *
 * Şerit, kaydırılabilir olduğunu göstermek için sıradaki kartı yarım
 * bırakıyor. Telefonda bu tanıdık bir kalıp; masaüstünde ise ekranda yer
 * varken kartın kesilmesi bozukluk gibi okunuyordu — müşteri "YÖKDİL'in
 * yarısı gözükmüyor" diye bildirdi. Ölçüm: 1440 pikselde 12 karttan 3'ü tam
 * görünüyor, 4.'sü (YÖKDİL) %74'te kesiliyor.
 *
 * Karar: MOBİLDE ŞERİT KALIYOR (dar ekranda 12 kartı alt alta dizmek bölümü
 * gereksiz uzatır), geniş ekranda düzgün ızgaraya dönüyor.
 *
 * Sütun sayısı 12'nin böleni seçildi ki son satırda delik kalmasın:
 * 1280 piksel ve üstü 4 sütun (3 satır), 1025–1279 arası 3 sütun (4 satır).
 * 1025'te 4 sütun denendi, kart genişliği 230 piksele düşüyor ve
 * "PTE Academic" gibi adlar açıklamayla birlikte sıkışıyordu.
 *
 * Sürükleme kodu (`initEgitimRaylari`) ızgarada da bağlı kalıyor ama
 * taşma olmadığı için hiçbir şey yapmıyor; imleç ve metin seçimi normale
 * döndürülüyor ki tıklanabilir kartlar şerit gibi davranmasın. */
@media (min-width: 1025px) {
    .ea-hucreler[data-duzen='dar'] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
        /* Şeritteki dikey pay gölge kırpılmasın diyeydi; ızgarada taşma
         * olmadığı için gerekmiyor. */
        padding: 0;
        margin: 0;
        cursor: auto;
        user-select: auto;
    }

    .ea-hucreler[data-duzen='dar'] .ea-hucre {
        /* Şeritteki sabit genişlik (`flex: 0 0 clamp(...)`) ızgarada
         * sütunu eziyordu; hücre sütununu doldursun. */
        flex: initial;
        width: auto;
        scroll-snap-align: none;
    }
}

@media (min-width: 1280px) {
    .ea-hucreler[data-duzen='dar'] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ══ ŞERİT AYAĞI: İLERLEME ÇUBUĞU + OKLAR ═══════════════════════════════
 *
 * Yalnızca dar ekranda; 1025 pikselden itibaren şerit ızgaraya döndüğü için
 * kaydıracak bir şey kalmıyor ve ayak gizleniyor.
 *
 * Ölçüler Google yorumları ayağıyla (`gr-foot`) aynı aileden; orada düğmeler
 * 42 piksel, burada dokunma hedefi olarak 44'e çıkarıldı. */
.ea-ray-ayak {
    display: none;
}

@media (max-width: 1024px) {
    .ea-ray-ayak {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-top: 18px;
    }

    .ea-ray-ilerleme {
        flex: 1;
        height: 3px;
        border-radius: 2px;
        background: var(--primary-color-low);
        overflow: hidden;
    }

    /* Çubuk `scaleX` ile büyüyor: genişlik değiştirmek her karede yeniden
     * yerleşim tetikliyor, dönüşüm tetiklemiyor. */
    .ea-ray-ilerleme-cubuk {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        background: var(--primary-color);
        transform: scaleX(0.08);
        transform-origin: left center;
        transition: transform 0.18s ease-out;
    }

    .ea-ray-oklar {
        display: flex;
        gap: 10px;
    }

    /* KENARLIK YOK, YÜKSELTİ VAR — sitenin kuralı. `gr-nav-btn`de ince bir
     * çerçeve vardı; burada ayrım gölgeyle yapılıyor. */
    .ea-ray-ok {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: var(--card-bg);
        color: var(--primary-color);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(5, 42, 97, 0.12);
        transition:
            box-shadow 0.2s ease,
            opacity 0.2s ease;
    }

    .ea-ray-ok:hover:not(:disabled) {
        box-shadow: 0 4px 14px rgba(5, 42, 97, 0.18);
    }

    .ea-ray-ok:disabled {
        opacity: 0.3;
        box-shadow: none;
        cursor: default;
    }

    .ea-ray-ok:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 3px;
    }
}