/* =============================================================================
 * Eğitim detay sayfaları — /ingilizce-egitimleri, /sinav-hazirlik, /diger-diller
 *
 * Bu sayfaların kendi tasarım dili YOK. Kart ızgarası `programs-page.css`ten,
 * afiş `components.css`ten, alt bölüm ana sayfadaki `visa-sec`ten geliyor.
 * Buradaki kurallar yalnızca üç şeyi ayarlar: sayfaya özel afiş görseli,
 * arka arkaya gelen iki bölümün boşluk fazlası ve seviye tablosu.
 *
 * NOT: `programs-page.css` içindeki tek gövde-bağımlı kural afişe ait
 * (`body.page-programs .headerBanner ...`). Bu sayfalar o sınıfı EKLEMEZ,
 * kendi afiş kuralını aşağıda tanımlar — bu yüzden dosya güvenle paylaşılıyor.
 * ========================================================================== */

/* --- Afiş görselleri -------------------------------------------------------
 * Seçici iki sınıfı birlikte alıyor (0,3,0) ki components.css'teki
 * `.headerBanner .headerBanner-inner` (0,2,0) kuralını dosya yükleme
 * sırasından bağımsız olarak ezsin. */

.headerBanner.headerBanner--ingilizce .headerBanner-inner {
    background-image: linear-gradient(
            180deg,
            rgba(3, 20, 45, 0.62) 0%,
            rgba(3, 20, 45, 0.5) 40%,
            rgba(3, 20, 45, 0.82) 100%
        ),
        var(--ea-afis-gorsel, url('/uploads/photos/sinif-ogretmen.webp'));
    background-position: center 38%;
}

.headerBanner.headerBanner--sinav .headerBanner-inner {
    background-image: linear-gradient(
            180deg,
            rgba(3, 20, 45, 0.62) 0%,
            rgba(3, 20, 45, 0.5) 40%,
            rgba(3, 20, 45, 0.82) 100%
        ),
        var(--ea-afis-gorsel, url('/uploads/photos/ogrenci-yazi.webp'));
    background-position: center 42%;
}

.headerBanner.headerBanner--diller .headerBanner-inner {
    background-image: linear-gradient(
            180deg,
            rgba(3, 20, 45, 0.62) 0%,
            rgba(3, 20, 45, 0.5) 40%,
            rgba(3, 20, 45, 0.82) 100%
        ),
        var(--ea-afis-gorsel, url('/uploads/photos/nyla-diller-2026.webp'));
    background-position: center 45%;
}

/* --- Alt bölüm: aralık ve hizalama -----------------------------------------
 *
 * ARALIK: Burada `padding-top: 0` yazılıydı ve iki bölüm birbirine yapışık
 * duruyordu (ölçülen ara: 0 px). Varsayım yanlıştı: `.programs-page` ALTTA
 * dolgu bırakmıyor (`padding: 80px 0 0`), dolayısıyla aradaki tek boşluk
 * `.visa-sec`in kendi üst dolgusu. Ana sayfadaki ritimle aynı kalsın diye
 * o dolguya dokunulmuyor; burada yalnızca hizalama ayarlanıyor.
 *
 * HİZALAMA: Üstteki program blokları artık ALTBİLGİ ölçüsünde
 * (`.programs-page-container` = 1440 / 60px dolgu, bkz. programs-page.css).
 * Bu blok da aynı hatta otursun diye ölçü ve kırılımlar birebir kopyalanıyor:
 * içerik genişliği her ekranda `min(vw, 1440) - 2 * dolgu`.
 *
 * `.visa-sec` kendi yan dolgusunu 20px olarak veriyor; onu da altbilgininkine
 * eşitliyoruz, yoksa 1200 px üstünde 40 px'lik bir kayma kalıyor. */
.egitim-sec--alt .visa-inner {
    max-width: 1320px;
}

.egitim-sec--alt {
    padding-left: 60px;
    padding-right: 60px;
}

/* Altbilginin kırılımları (index.css): 1200 -> 20px, 768 -> 14px */
@media (max-width: 1200px) {
    .egitim-sec--alt {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 768px) {
    .egitim-sec--alt {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --- Seviye şeridi ---------------------------------------------------------
 * A1'den C2'ye altı kutu. `visa-board` ızgarasının içinde yaşar ama kendi
 * daha dar ölçüsü var; kart değil, hızlı okunan bir referans şeridi. */
/* IZGARA DEGIL FLEX. Basamak sayisi 6'dan 7'ye cikti (B1+ eklendi) ve 7 asal
 * bir sayi: her sabit sutunlu izgarada son satirda tek basina bir kart
 * kaliyordu. Flex sarmasi + `justify-content: center` son satiri ortaliyor,
 * `max-width` de az sayida karti asiri genisletmiyor. Basamak sayisi ileride
 * yine degisirse duzen kendini toparlar. */
.egitim-levels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.egitim-level {
    flex: 1 1 150px;
    max-width: 240px;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 18px 16px;
}

.egitim-level-code {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--primary-color);
    display: block;
    margin-bottom: 6px;
}

/* Son iki seviye (C1–C2) sarı vurguyla ayrışsın: hedef nokta orası. */
.egitim-level--top .egitim-level-code {
    color: var(--secondary-color-dark);
}

.egitim-level-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-dark-low);
    margin: 0;
}

@media (max-width: 560px) {
    .egitim-levels {
        gap: 10px;
    }

    .egitim-level {
        flex-basis: 130px;
    }

    .egitim-level {
        padding: 14px 12px;
        border-radius: 14px;
    }
}

/* ===========================================================================
 * PROGRAM ÖZELLİKLERİ — açıklamalı blok
 *
 * /programs sayfasındaki kartta bu alan tikli bir madde listesi. Burası o
 * sayfanın DETAYI olduğu için aynı görünmemeli: madde yerine numaralı,
 * başlıklı ve paragraflı bloklar var.
 *
 * Site diliyle uyum: açık gri yüzey (--bg-color), lacivert numara ve başlık,
 * sarı yalnızca vurgu şeridinde. KENARLIK YOK — ayrım yüzey farkı ve yumuşak
 * gölgeyle taşınıyor; hover'da blok yükseliyor (.plan-card / .oa-card ile
 * aynı yükseltme dili).
 * ========================================================================= */

.egitim-detay {
    margin: 26px 0 24px;
}

.egitim-detay-heading {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 0 0 16px;
}

.egitim-detay-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.egitim-detay-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 18px 20px;
    border: none;
    border-radius: 16px;
    background: var(--bg-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.egitim-detay-item:hover {
    transform: translateY(-3px);
    background: var(--card-bg);
    box-shadow: 0 12px 30px rgba(5, 42, 97, 0.1);
}

/* Numara: sitedeki adım rozetlerinin (plan-card-stamp, visa-step) dili */
.egitim-detay-num {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--primary-color);
    color: var(--secondary-color);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.egitim-detay-text {
    min-width: 0;
}

.egitim-detay-title {
    font-family: 'Sora', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark-dark);
    margin: 0 0 7px;
}

.egitim-detay-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-dark-low);
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .egitim-detay-item {
        gap: 12px;
        padding: 16px;
    }

    .egitim-detay-num {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 12px;
    }

    .egitim-detay-title { font-size: 14px; }
    .egitim-detay-desc { font-size: 13px; }
}

/* ===========================================================================
 * PROGRAM BLOĞU — /programs'tan bağımsız düzen
 *
 * O sayfada kart "solda foto, sağda metin". Burası onun DETAYI olduğu için
 * aynı kalıbı tekrar etmiyor: ortalanmış başlık, geniş görsel bandı, altında
 * kart ızgarası ve ortalanmış tek eylem.
 *
 * Renkler siteden: açık gri zemin (--bg-color), beyaz kart, lacivert metin,
 * sarı yalnızca rozet ve numara vurgusunda. KENARLIK YOK — ayrım yüzey ve
 * yumuşak gölgeyle; hover'da yükselme (.plan-card / .oa-card dili).
 * ========================================================================= */

/* Blok kendi basina duran bir yuzey: acik gri bolum zemininde beyaz kart.
 * Onceden serbest akiyordu ve ustundeki bolum basligiyla iliskisi kopuktu;
 * kart olunca baslik + icerik tek bir kompozisyon olarak okunuyor. */
.egitim-blok {
    /* max-width YOK: blok sayfa kapsayicisinin (1340 px) genisligini alir,
     * boylece bolum basligi, program bloklari ve seviye seridi bastan sona
     * ayni hizada. */
    width: 100%;
    margin: 0 auto 28px;
    padding: 48px 56px 52px;
    border: none;
    /* Alt köşeler üsttekilerden belirgin daha yuvarlak: blok içerideki hero
     * görselle yukarıdan zaten kesin bir sınır çiziyor, aşağıda ise CTA'nın
     * altındaki boşlukta bitiyor — geniş yarıçap o bitişi "kıvrılarak
     * kapanan" bir yüzey haline getiriyor, düz kesik gibi durmuyor. */
    border-radius: 26px 26px 48px 48px;
    background: var(--card-bg);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.egitim-blok:last-child { margin-bottom: 0; }

/* --- Ortalanmış başlık --- */

.egitim-blok-head {
    position: relative;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.egitim-blok-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.egitim-blok-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary-color-low);
    color: var(--primary-color);
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.egitim-blok-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.005em;
    color: var(--text-dark-dark);
    margin: 0 0 10px;
}

.egitim-blok-sub {
    font-family: 'Sora', sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 14px;
}

.egitim-blok-lead {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-dark-low);
    margin: 0;
}

/* --- Geniş görsel bandı (yanda değil, üstte) --- */

/* --- Görsel başlığın ARKASINDA ---------------------------------------
 * Metin doğrudan fotoğrafın üstünde durunca okunmaz; bu yüzden görselin
 * üzerine lacivert bir perde seriliyor (sitenin hero perdesiyle aynı ton:
 * .landing-sec .slide-overlay ve .headerBanner rgba(3,20,45,…) kullanır).
 * Perde + açık renk metin, kontrastı zemin fotoğrafından bağımsız kılıyor. */
.egitim-blok-hero {
    position: relative;
    isolation: isolate;
    margin-bottom: 26px;
    padding: 54px 44px 48px;
    border: none;
    border-radius: 22px;
    /* `overflow: hidden` YOK: InvertedRadius kose katlamasi panelin disina
     * tasan "kulaklar" ciziyor, gizlenirse katlama kirik gorunuyor. Gorselin
     * ve perdenin kendi yaricapi var, o yuzden kirpmaya gerek kalmiyor. */
    background: var(--primary-color-dark);
    box-shadow: 0 12px 34px rgba(5, 42, 97, 0.16);
}



/* Kadraj noktasi — IELTS/TOEFL blogu.
 *
 * Fotograf DIKEY (1122x1402), afis kutusu ise cok genis ve alcak (~3:1).
 * object-fit: cover gorseli genislige gore buyutunce yuksekligin yalnizca
 * ~%26lik bir bandi goruntuye giriyor. Ortak deger (%38) o bandi burun
 * hizasindan basliyordu: gozler kadrajin ustunde kaliyor, surat yarim
 * gorunuyordu.
 *
 * Bu fotografta yuz ust kenardan ~%20de (ayni tespit programs-page.css
 * icindeki kart kuralinda da var). %18 secilince gorunen bant ~%13-39
 * araligina denk geliyor ve surat tam ortada kaliyor. Deger yalnizca BU
 * bloga veriliyor; diger bloklarin fotograflari farkli. */
#ielts-toefl .egitim-blok-bg {
    object-position: center 18%;
}

.egitim-blok-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(3, 20, 45, 0.66) 0%,
        rgba(3, 20, 45, 0.54) 45%,
        rgba(3, 20, 45, 0.72) 100%
    );
}

/* --- Özellik kartları: iki sütun --- */

.egitim-blok .egitim-detay { margin: 0 0 26px; }

.egitim-blok .egitim-detay-heading {
    text-align: center;
    margin-bottom: 18px;
}

/* TEK SUTUN. Iki sutunda 5 madde kaliyordu ve sonuncusu tek basina ortada
 * asili duruyordu; hicbir hizalama numarasi bunu duzeltmiyor. Satir duzeninde
 * boyle bir artik yok, uzun aciklamalar da rahat okunuyor. */
.egitim-blok .egitim-detay-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* Satirlar: kutu degil, aralarinda ince ayrac olan bloklar.
 * Kenarlik yok — ayrac cok dusuk alfali bir hairline degil, YUZEY farki:
 * satira gelindiginde acik gri zemin beliriyor. */
.egitim-blok .egitim-detay-item {
    background: transparent;
    box-shadow: none;
    border-radius: 14px;
    padding: 20px 18px;
    align-items: start;
}

.egitim-blok .egitim-detay-item + .egitim-detay-item {
    margin-top: 2px;
}

.egitim-blok .egitim-detay-item:hover {
    background: var(--bg-color);
    box-shadow: none;
    transform: none;
}

/* Numara ile metin arasindaki dikey cizgi: maddeleri bir sira olarak baglar */
.egitim-blok .egitim-detay-item {
    position: relative;
}

.egitim-blok .egitim-detay-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 35px;
    top: 58px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: var(--primary-color-low);
}

/* --- Ortalanmış tek eylem --- */

.egitim-blok-foot {
    display: flex;
    justify-content: center;
}

.egitim-blok-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 12px;
    background: var(--accent-color);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(191, 23, 26, 0.24);
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.egitim-blok-cta:hover {
    background: var(--accent-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(191, 23, 26, 0.3);
}

.egitim-blok-cta i { transition: transform 0.22s ease; }
.egitim-blok-cta:hover i { transform: translateX(3px); }

@media (max-width: 860px) {
    .egitim-blok { margin-bottom: 48px; }

    .egitim-blok-media {
        aspect-ratio: 16 / 9;
        border-radius: 18px;
        margin-bottom: 22px;
    }

    .egitim-blok {
        padding: 26px 20px 30px;
        /* Dar ekranda blok zaten kısa; masaüstündeki 48 px orantısız kalıyor. */
        border-radius: 20px 20px 32px 32px;
    }

    .egitim-blok .egitim-detay-item { padding: 16px 12px; }
    .egitim-blok .egitim-detay-item:not(:last-child)::before { left: 27px; top: 50px; }

    .egitim-blok-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
 * Bölüm genişlikleri: her şey aynı kolonda hizalansın
 *
 * Program blokları 1000 px'lik bir kolonda duruyor; üstündeki bölüm başlığı
 * ile altındaki seviye şeridi ise sayfa kapsayıcısının tam genişliğini
 * (1340 px) kullanıyordu. Blok içeri, başlık ve şerit dışarı taşınca sayfa üç
 * ayrı hizada okunuyordu. Üçü de aynı kolona alındı.
 * ------------------------------------------------------------------------- */


/* --- Perde üzerindeki metin renkleri ---------------------------------- */
/* Soluk saydam zemin + sari yazi fotograf uzerinde okunmuyordu.
 * Dolu marka sarisi + koyu lacivert yazi: kontrast zeminden bagimsiz. */
.egitim-blok-hero .egitim-blok-tag {
    background: var(--secondary-color);
    color: var(--primary-color-dark);
}

.egitim-blok-hero .egitim-blok-title { color: var(--text-light); }
.egitim-blok-hero .egitim-blok-sub { color: var(--secondary-color); }
.egitim-blok-hero .egitim-blok-lead { color: var(--text-light-dark); }

@media (max-width: 860px) {
    .egitim-blok-hero {
        padding: 34px 20px 32px;
        border-radius: 18px;
        margin-bottom: 22px;
    }
}

/* Bölüm başlığı ve alt şeritler blok kolonuyla aynı hizada (Sınav Hazırlık
 * ve Diğer Diller sayfaları için de). */

/* ---------------------------------------------------------------------------
 * Madde satırları — geniş kolona uyum ve bağlantı çizgisi
 * ------------------------------------------------------------------------- */

/* Bağlantı çizgisi: önceki hali satırın alt kenarında bitiyor, bir sonraki
 * numaraya kadar ~26 px boşluk kalıyordu — çizgi kopuk görünüyordu. Alt uç
 * bir sonraki rozetin tepesine kadar uzatıldı (2 px satır aralığı + 20 px üst
 * dolgu + 4 px pay). */
.egitim-blok .egitim-detay-item:not(:last-child)::before {
    top: 60px;
    bottom: -26px;
}

/* Geniş kolonda metin küçük kalmasın */
.egitim-blok .egitim-detay-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    padding: 22px 20px;
}

.egitim-blok .egitim-detay-num {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 14px;
}

.egitim-blok .egitim-detay-title {
    font-size: 16.5px;
}

/* Paragraf blogun TAMAMINI kullaniyor.
 *
 * Burada `max-width: 88ch` vardi: satir uzunlugunu okunur bir olcude tutmak
 * icin konulmus bir sinir. Ama blok artik altbilgi genisliginde (1320px) ve
 * paragraf ~830px'te kesiliyordu; sagda kalan genis bosluk metni "yarim
 * kalmis" gosteriyordu. Sinir kaldirildi, metin kabin sonuna kadar akiyor. */
.egitim-blok .egitim-detay-desc {
    font-size: 15px;
    line-height: 1.8;
    max-width: none;
}

.egitim-blok .egitim-detay-heading {
    font-size: 13px;
    letter-spacing: 1.8px;
    margin-bottom: 20px;
}

@media (max-width: 860px) {
    .egitim-blok { padding: 26px 18px 30px; }
    .egitim-blok .egitim-detay-item { gap: 14px; padding: 16px 12px; }

    .egitim-blok .egitim-detay-num {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 12.5px;
    }

    .egitim-blok .egitim-detay-title { font-size: 14.5px; }
    .egitim-blok .egitim-detay-desc { font-size: 13.5px; }

    .egitim-blok .egitim-detay-item:not(:last-child)::before {
        left: 29px;
        top: 52px;
        bottom: -22px;
    }
}

/* Perde hafifletilip fotoğraf tam opak yapıldığı için metne ince bir gölge
 * eklendi. Perde tek başına açık bir kareye denk geldiğinde harflerin
 * kenarını kaybediyordu; gölge kontrastı zeminden bağımsız kılıyor ve
 * gözle fark edilmiyor. */
.egitim-blok-hero .egitim-blok-title,
.egitim-blok-hero .egitim-blok-sub,
.egitim-blok-hero .egitim-blok-lead {
    text-shadow: 0 1px 3px rgba(3, 20, 45, 0.55);
}

/* ---------------------------------------------------------------------------
 * Dar ekran: metin genişliği
 *
 * İç içe dolgular 390 px'de metni boğuyordu — ölçüldü: hero paragrafı 286 px,
 * madde açıklaması yalnızca 254 px. Zincir şöyleydi:
 *   390 − kapsayıcı 28 − blok 36 − satır 24 − (numara 34 + boşluk 14) = 254
 * Satırlar bu genişlikte 4-5 kelimeye düşüyor ve metin uzun bir şerit gibi
 * akıyordu. Dolgular kısaldı; 560 px altında numara kendi sütununu bırakıp
 * başlığın üstünde küçük bir çipe dönüşüyor, böylece metin tam genişliği alıyor.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .egitim-blok { padding: 22px 10px 26px; }
    .egitim-blok-hero { padding: 30px 14px 28px; }
    .egitim-blok .egitim-detay-item { gap: 10px; padding: 14px 6px; }

    .egitim-blok .egitim-detay-num {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 12px;
    }

    .egitim-blok .egitim-detay-item:not(:last-child)::before {
        left: 25px;
        top: 48px;
        bottom: -20px;
    }
}

@media (max-width: 560px) {
    /* Numara kendi sütununu bırakıyor: metin tam genişlik */
    .egitim-blok .egitim-detay-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px 4px 16px;
    }

    .egitim-blok .egitim-detay-num {
        width: auto;
        min-width: 34px;
        height: 24px;
        padding: 0 10px;
        border-radius: 8px;
        justify-self: start;
        font-size: 11.5px;
        letter-spacing: 1px;
    }

    /* Numaralar artık tek sütunda alt alta değil; dikey bağlayıcı anlamını
     * yitirdiği için kapatıldı. Sıra bilgisini çipler zaten taşıyor. */
    .egitim-blok .egitim-detay-item::before {
        display: none !important;
    }

    .egitim-blok .egitim-detay-title { font-size: 15px; }
    .egitim-blok .egitim-detay-desc { font-size: 14px; line-height: 1.72; }
}

/* İkon ile başlık arasına net bir boşluk. `gap` flex kabına bağlı; başlık
 * bazı kırılımlarda satır içi akışa döndüğü için margin ile garantiye alındı. */
.egitim-detay-title i {
    margin-right: 8px;
}

/* ---------------------------------------------------------------------------
 * Dar ekranda alt başlık
 *
 * Giriş paragrafının dar ekran kuralları burada değil, aşağıdaki 860 px
 * bloğunda (`.egitim-blok-top .egitim-blok-lead`): paragraf DOM'da
 * `.egitim-blok-hero`ın İÇİNDE değil KARDEŞİ, bu yüzden `.egitim-blok-hero .…`
 * ile yazılan kurallar hiç eşleşmiyor.
 * ------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .egitim-blok-hero .egitim-blok-sub {
        font-size: 15px;
    }
}

/* ===========================================================================
 * GÖRSEL ARKA PLANI  ·  kırılıma göre farklı elemanda
 *
 * Görsel `<img>` yerine CSS değişkeni (`--blok-gorsel`) olarak veriliyor.
 * Sebep: aynı görselin GENİŞ ekranda başlık + paragrafın ikisinin birden
 * arkasında, DAR ekranda ise yalnızca başlığın arkasında durması gerekiyor.
 * Tek bir <img> iki farklı kapsayıcıyı aynı anda kaplayamaz; değişken ile
 * zemini kırılım başına istediğimiz elemana verebiliyoruz. Görsel tamamen
 * dekoratif olduğu için alt metin kaybı yok.
 * ========================================================================= */

.egitim-blok-top {
    position: relative;
    isolation: isolate;
    margin-bottom: 26px;
    border-radius: 22px;
}

.egitim-blok-hero {
    position: relative;
    isolation: isolate;
    border-radius: inherit;
}

/* Ortak zemin + perde: hangi elemana verilirse orayı kaplar */
.egitim-blok-top::before,
.egitim-blok-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background-image: var(--blok-gorsel);
    background-size: cover;
    background-position: center 38%;
}

.egitim-blok-top::after,
.egitim-blok-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(3, 20, 45, 0.66) 0%,
        rgba(3, 20, 45, 0.54) 45%,
        rgba(3, 20, 45, 0.72) 100%
    );
}

/* --- GENİŞ EKRAN: zemin .egitim-blok-top'ta; paragraf da görselin üstünde --- */
@media (min-width: 861px) {
    .egitim-blok-top {
        padding: 54px 44px 48px;
        background: var(--primary-color-dark);
        box-shadow: 0 12px 34px rgba(5, 42, 97, 0.16);
    }

    /* Hero yalnızca hizalama kabı; kendi zemini yok */
    .egitim-blok-hero { padding: 0; background: none; box-shadow: none; }
    .egitim-blok-hero::before,
    .egitim-blok-hero::after { content: none; }

    .egitim-blok-top .egitim-blok-lead {
        position: relative;
        max-width: 860px;
        margin: 0 auto;
        text-align: center;
        color: var(--text-light-dark);
        text-shadow: 0 1px 3px rgba(3, 20, 45, 0.55);
    }
}

/* --- DAR EKRAN: zemin yalnızca başlıkta; paragraf beyaz yüzeyde ---------- */
@media (max-width: 860px) {
    .egitim-blok-top {
        padding: 0;
        background: none;
        box-shadow: none;
        margin-bottom: 22px;
    }

    .egitim-blok-top::before,
    .egitim-blok-top::after { content: none; }

    .egitim-blok-hero {
        padding: 30px 16px 28px;
        border-radius: 20px;
        background: var(--primary-color-dark);
        box-shadow: 0 10px 26px rgba(5, 42, 97, 0.16);
        margin-bottom: 20px;
    }

    /* Paragraf panelin dışında: beyaz zeminde koyu metin, tam genişlik.
     *
     * Hizalama ORTALI (geniş ekrandaki haliyle aynı): üstündeki çipler,
     * başlık ve alt başlık ortalı olduğu için sola yaslı paragraf blokun
     * tek parça durmasını bozuyordu. Panelle arasına ve altındaki madde
     * listesine geçişte nefes payı bırakıldı. */
    .egitim-blok-top .egitim-blok-lead {
        position: relative;
        margin: 10px 0 8px;
        text-align: center;
        color: var(--text-dark-low);
        text-shadow: none;
        font-size: 15px;
        line-height: 1.8;
    }
}