/* ===========================================================================
   Teknolojide Fırsat Eşitliği — /certificate-programs/teknolojide-firsat-esitligi
   ---------------------------------------------------------------------------
   Programın kendi marka kimliği (logolar, lacivert arka plan görseli)
   korunmuştur; bileşenler sitenin tasarım diline çekilmiştir.
   Betik bağlantı noktaları — #courses, .s_course, span.message, .btn-preview,
   .preview_*, #info-modal, #preview_*, #vimeo_vid, .modal-close — dokunulmadı.
   =========================================================================== */

:root {
    /* DİKEY RİTİM JETONLARI — sayfadaki her boşluk bu üç değerden birine
       oturuyor. Ölçümde bölüm boşlukları 48/56/64px, blok araları 8/18/28px
       arasında dağınıktı; yukarıdan aşağı bakıldığında hiçbir aralık bir
       diğerine referans vermiyordu.
         --tfe-bolum  bölüm iç boşluğu (üst=alt) → iki bölüm arası 2 katı
         --tfe-blok   bölüm içindeki bloklar arası (başlık → ızgara vb.)
         --tfe-ogr    aynı gruptaki öğeler arası (paragraf, çip)
       Başvuru ekranları da aynı jetonları kullanıyor (basvuru-ui.css). */
    --tfe-panel: #121414;
    --tfe-line: #1f2222;
    --tfe-text: #e9eded;
    --tfe-muted: #b7bdbd;
    --tfe-dim: #8b9292;
    --tfe-accent: #f37a52;
}

.tfe .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Başlık alanı
   --------------------------------------------------------------------------- */
/* DİKEY RİTİM — tek tip `gap` yerine GRUPLANMIŞ aralıklar.
   Eskiden dört öğe de 22px arayla diziliyordu: paydaş şeridi (bağımsız bir
   şerit), program markası (odak) ve künye (ücretsiz rozeti + sayılar) aynı
   mesafede durunca hiçbiri diğerinden ayrışmıyordu. Şimdi:
     şerit → marka           --tfe-blok  (iki ayrı blok)
     marka → ücretsiz rozeti --tfe-orta  (odak ile künye arası)
     rozet → sayılar         --tfe-ogr   (ikisi TEK künye grubudur)
   Üç değer de merdivenden; eskiden 36/28/14 idi ve hiçbiri diğerinin katı
   değildi (bkz. public-ui.css jeton bloğu).
   `--tfe-hero-ust` değişkeni başvuru ekranlarıyla ORTAK: iki sayfanın
   başlangıcı birebir aynı hizada başlasın. */
.tfe-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* Alt boşluk merdivende bir basamak aşağıda (48px): künye çipleriyle
       tanıtım paneli arası 64px iken kahraman gereğinden uzun duruyordu
       (kullanıcı geri bildirimi). Bölüm sınırı değeri değil, kapanış eylemi
       basamağı kullanılıyor. */
    padding: var(--tfe-hero-ust) 0 var(--tfe-genis);
    text-align: center;
}
.tfe-hero > .tfe-brands { margin-bottom: var(--tfe-blok); }
.tfe-hero > .tfe-mark   { margin-bottom: var(--tfe-orta); }
.tfe-hero > .tfe-free   { margin-bottom: var(--tfe-ogr); }
/* Ücretsiz rozeti */
.tfe-free {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 122, 82, .5);
    background: rgba(243, 122, 82, .14);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #ffbe9c;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.tfe-free svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Künye şeridi — eski dört Bulma sütunu yerine sarılabilen çipler. */
.tfe-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.tfe-stat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 12, 12, .45);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}
.tfe-stat svg {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    fill: none; stroke: rgba(255, 255, 255, .7);
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   Tanıtım paneli
   --------------------------------------------------------------------------- */
.tfe-panel {
    max-width: 1024px;
    /* Alt boşluk ŞART: kahraman bölümü `p-0` taşıdığı için panelin kenarlığı
       doğrudan bir sonraki bölümün üst kenarına yapışıyordu (ölçüm: 0px) ve
       "Programdaki Eğitimler" başlığı çerçeveyle aynı hizadan başlıyor gibi
       görünüyordu. Bir bölüm boşluğu (64px) verilmişti ama bölümün KENDİ üst
       dolgusuyla toplanınca 128px oluyor ve başlık çok aşağıda kalıyordu
       (kullanıcı geri bildirimi: "biraz yukarı çek"). Blok basamağına
       indirildi — 32 + 64 = 96, merdivende. */
    margin: 0 auto var(--tfe-blok);
    padding: 1.5rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, .12);
    /* Eski panel düz `rgb(82 149 141 / 91%)` yeşiliydi; artık buzlu koyu cam. */
    background: rgba(10, 14, 14, .62);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95);
}
.tfe-player {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--tfe-line);
    background: #000;
    /* 1,35rem (21,6px) idi — merdivende olmayan bir ara değer. */
    margin-bottom: var(--tfe-orta);
}
/* Oranı `padding-top:56.25%` yerine `aspect-ratio` kuruyor. Kabın kendisi
   yüksekliğini korumalı: Plyr oynatıcıyı mutlak konumla yerleştiriyor, kap
   çökerse video dışarı taşıyor. */
.tfe-player .video-player-container.is-16by9 {
    position: relative;
    padding: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}
.tfe-player .is-16by9::before, .tfe-player .is-16by9::after { content: none !important; }
/* Plyr araya `.plyr__video-wrapper` katmanı koyuyor; o katman kendi
   yüksekliğini almadığında video 0px kalıyordu. */
.tfe-player .plyr,
.tfe-player .plyr__video-wrapper,
.tfe-player video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.tfe-prose { color: var(--tfe-muted); font-size: .95rem; line-height: 1.85; }
.tfe-prose p { margin: 0 0 var(--tfe-ogr); color: var(--tfe-muted) !important; }
.tfe-prose p:last-child { margin-bottom: 0; }
.tfe-prose strong { color: #fff !important; font-weight: 700; }
.tfe-prose a { color: var(--tfe-accent) !important; font-weight: 600; }

.tfe-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    /* .85rem (13,6px) idi. Satır dar ekranda sarıldığında bu değer DİKEY bir
       boşluğa dönüşüyor ve merdivenin dışına düşüyordu (375px'te ölçüldü). */
    gap: var(--tfe-ogr);
    flex-wrap: wrap;
    /* Ayraç çizgisinin iki yanı EŞİT ve merdivenden (1,35rem = 21,6px idi). */
    padding-top: var(--tfe-orta);
    margin-top: var(--tfe-orta);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
/* `.basketButton` sınıfı korunuyor (eski genişlik/kenar kuralları eziliyor). */
.tfe .tfe-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: auto !important;
    height: 48px;
    padding: 0 1.6rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(243, 122, 82, .6) !important;
    background: rgba(243, 122, 82, .2) !important;
    color: #fff !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
    line-height: 1;
    box-shadow: none !important;
    transition: border-color .25s ease, background .25s ease;
}
.tfe .tfe-btn:hover { border-color: rgba(243, 122, 82, .95) !important; background: rgba(243, 122, 82, .32) !important; }
.tfe .tfe-btn svg {
    width: 16px !important; height: 16px !important;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.tfe-cta-note { color: var(--tfe-dim); font-size: .78rem; }

/* ---------------------------------------------------------------------------
   Eğitim ızgarası
   --------------------------------------------------------------------------- */
/* `.tfe .all-courses` (SOYUNDAN) yazıyordu ama iki sınıf AYNI elemanda:
   `<div class="section ... all-courses tfe">`. Seçici hiç eşleşmiyordu ve
   bölüm Bulma'nın 3rem varsayılanında kalıyordu. Bileşik seçiciye çevrildi.

   DİKEY RİTİM — sayfadaki tüm bölümler tek bir değere oturuyor: 4rem (64px).
   Ölçümde bölümler 48px, panel ile bir sonraki bölüm arası 0px, başlık ile
   ızgara arası 18px idi; üç farklı boşluk göz için dengesiz duruyordu. */
.tfe.all-courses,
.section.tfe.has-background-black { padding-top: var(--tfe-bolum); padding-bottom: var(--tfe-bolum); }

/* Bulma'nın `has-background-black` yardımcısı `#0a0a0a` basıyor, sayfanın
   kendi zemini ise saf siyah (`html { background: #000 }`). Kahraman bölümü
   şeffaf olduğu için dokunun bittiği yerden itibaren #000 görünüyor ve
   eğitimler bölümünün #0a0a0a'sıyla karşılaştığı yerde ince bir bant çizgisi
   oluşuyordu — 10/255'lik bir basamak koyu ekranda fark ediliyor.
   Bölümler şeffafa çekilerek ikisi de sayfanın zeminini gösteriyor: basamak
   sıfır. Bulma yardımcısı `!important` taşıdığı için burada da gerekiyor. */
.section.tfe.has-background-black { background-color: transparent !important; }

/* Başlık → ızgara: 18px, bölüm ritminin (64px) yarısına çekildi.
   Başlık kendi içeriğine yakın, komşu bölümden uzak olmalı. */
.tfe .catrow-head { margin-bottom: var(--tfe-blok); }

.tfe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* 1,25rem (20px) idi; merdivenin "grup içi blok" basamağına çekildi. */
    gap: var(--tfe-orta);
}
.tfe-grid .s_course { min-width: 0; }
/* "Tüm Eğitimleri Göster" düğmesi ızgaranın tamamını kaplar. */
.tfe-grid .message {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    /* Üstünde 28px (ızgara aralığı + 8px), altında 64px (bölüm boşluğu) vardı;
       düğme kartlara yapışıp bölüm sınırında boşlukta kalıyordu. Kart dizisiyle
       arası merdivenin "kapanış eylemi" basamağına oturtuldu: ızgara zaten
       --tfe-orta (24px) aralık veriyor, kalan 24px buradan → toplam 48px. */
    margin: calc(var(--tfe-genis) - var(--tfe-orta)) 0 0;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    transition: border-color .25s ease, background .25s ease;
}
.tfe-grid .message:hover { border-color: rgba(243, 122, 82, .7); background: rgba(243, 122, 82, .16); }
.tfe-grid .message:empty { display: none; }

.tfe-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--tfe-line);
    background: var(--tfe-panel);
    transition: border-color .28s ease, box-shadow .28s ease;
}
.tfe-card:hover,
/* Hover da kenarlığı aydınlatmalı. Eskiden yalnızca `:focus-visible` vardı;
   fareyle gezen kullanıcı kartın tıklanabilir olduğuna dair hiçbir kenar
   ipucu görmüyordu. */
.tfe-card:hover,
.tfe-card:focus-visible {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28),
                0 24px 50px -32px rgba(243, 122, 82, .85);
}
.tfe-card-media { position: relative; display: block; overflow: hidden; background: #16191a; }
/* Eski kart `border-radius:50px` ve lacivere dönen 3px kenarlık taşıyordu. */
.tfe-card-media img,
.tfe-card .course_img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 0 !important;
    border-radius: 0 !important;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.tfe-card:hover .tfe-card-media img { transform: scale(1.04); }

/* Üzerine gelince inen perde — koyu, içinde çok hafif marka izi.
   Oynat düğmesinin camlı dokusu ve motto ancak yeterince koyu bir zeminde
   okunuyor; ders görselleri açık renkli olabiliyor. */
.tfe-card-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(126deg,
            rgba(253, 168, 113, .07) 0%,
            rgba(243, 122, 82, .06) 45%,
            rgba(236, 56, 125, .05) 100%),
        linear-gradient(to top,
            rgba(4, 5, 5, .95) 0%,
            rgba(4, 5, 5, .86) 32%,
            rgba(4, 5, 5, .66) 68%,
            rgba(4, 5, 5, .55) 100%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}
.tfe-card:hover .tfe-card-veil,
.tfe-card:focus-visible .tfe-card-veil { opacity: 1; }

/* Dersin mottosu — görselin altına yaslı. `.tfe-card-play` akıştan çıkarılmış
   ve tam ortada olduğu için ikisi çakışmıyor. */
.tfe-card-motto {
    position: absolute;
    /* DOLGU YOK — bilinçli. `overflow: hidden` DOLGU KUTUSUNUN kenarından
       kırpar, içerik kutusundan değil. Alt dolgu (12,8px) üçüncü satıra yer
       açıyordu: üç nokta ikinci satıra konuyor ama üçüncü satır dolgu
       alanında görünmeye devam ediyordu. Boşluk artık konum ofsetlerinden
       geliyor, kırpma tam iki satırın bittiği yerde. */
    left: .85rem; right: .85rem; bottom: .8rem;
    padding: 0;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* `max-height` ŞART, yalnızca `line-clamp` yetmiyor: Chrome'un yeni
       uygulamasında üçüncü satır yine yerleştiriliyor, `overflow: hidden`
       onu kesiyor ve geriye görünen ince bir dilim kalıyordu.

       `box-sizing: content-box` da ŞART: sayfa genelinde `border-box`
       geçerli ve o hâlde `max-height` dolguyu da kapsıyor; metne bir
       satırdan az yer kalıyordu. content-box ile sınır yalnızca METİN
       alanına uygulanıyor, dolgu dışarıda kalıyor.
       Satır yüksekliği 1.45 olduğu için iki satır = 2.9em. */
    /* Dolgu kalmadığı için content-box'a da gerek yok; sınır doğrudan iki
       satıra karşılık geliyor (satır yüksekliği 1.45 → 2 × 1.45em). */
    max-height: 2.9em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
    pointer-events: none;
}
.tfe-card:hover .tfe-card-motto,
.tfe-card:focus-visible .tfe-card-motto { opacity: 1; transform: none; }

@media (hover: none) { .tfe-card-veil, .tfe-card-motto { display: none; } }

.tfe-card-play {
    position: absolute;
    top: 50%; left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(12, 14, 14, .45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.tfe-card-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.tfe-card:hover .tfe-card-play,
.tfe-card:focus-visible .tfe-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.tfe-card-tag {
    position: absolute;
    top: .75rem; left: .75rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #e9eded;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
}

.tfe-card-body { display: flex; flex-direction: column; gap: var(--tfe-yakin); flex: 1 1 auto; padding: .95rem 1.05rem 1.05rem; }
/* Başlık TEK SATIR — uzunsa üç noktayla kısalır. Kartların künye
   yüksekliği böylece her kartta aynı; ızgara ritmi bozulmuyor. */
.tfe-card-title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff !important;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.tfe-card-ins {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    min-width: 0;
    /* Eğitmen adı da bir tık okunur: sönük griden açık griye. */
    color: #b9c0c0 !important;
    font-size: .8rem;
    font-weight: 600;
}
.tfe-card-ins span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Eğitmen avatarı 24 → 32px ve ince bir halka: künyede neredeyse
   seçilemiyordu. */
.tfe-card-ins img {
    width: 32px !important; height: 32px !important;
    flex: 0 0 auto;
    /* `!important` GEREKLİ: main.css'te bu görseli yakalayan ve 4px yarıçap
       basan daha özgül bir kural var — ölçümde `border-radius: 50%` yazılı
       olmasına rağmen hesaplanan değer 4px çıkıyordu, main.css devre dışı
       bırakılınca 50%'ye dönüyordu. Aynı dosya `width` için de aynı sebeple
       `!important` kullanıyor. */
    border-radius: 50% !important;
    object-fit: cover;
    /* Tek `border` bildirimi: kuralın sonunda ayrıca `1px solid #2b2f2f`
       vardı ve aynı özgüllükte daha sonra geldiği için 2px'i eziyordu. */
    border: 2px solid rgba(123, 116, 116, .29);
    background: #1b1f1f;
}
.tfe-card:hover .tfe-card-ins { color: var(--tfe-muted) !important; }

/* Betik, "Tüm Eğitimleri Göster" düğmesinden önceki son satıra
   `course_hidden` ekliyor. Eski tasarımda bu 100px'lik kırpma çıplak
   görselde "devamı var" izlenimi veriyordu; kart yapısında görselin bir
   dilimi kalıp bozuk/yüklenmemiş gibi görünüyordu. Kartlar artık tam
   görünüyor — "devamı var" bilgisini zaten düğme veriyor. */
.tfe-grid .s_course.course_hidden { height: auto; overflow: visible; }

/* ---------------------------------------------------------------------------
   Bilgi kartları (Kimler İçin? / Belgelendirme)
   --------------------------------------------------------------------------- */
.tfe-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--tfe-orta);
    /* Kendi dolgusu YOK: bölüm zaten 4rem üst/alt taşıyor. Eskiden buradaki
       `1rem 0 2rem` bölümün dolgusuna EKLENİYOR ve kartlar 80px'ten, eğitimler
       başlığı ise 64px'ten başlıyordu — aynı ritimde olmaları gereken iki
       bölüm 16px kayıyordu. */
    padding: 0;
}
.tfe-info-card {
    position: relative;
    padding: 1.75rem 1.6rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 14, 14, .62);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    overflow: hidden;
}
.tfe-info-card::before {
    content: "";
    position: absolute;
    top: -70px; right: -70px;
    width: 210px; height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 122, 82, .16), transparent 65%);
    pointer-events: none;
}
.tfe-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    /* .9rem (14,4px) idi. */
    margin-bottom: var(--tfe-ogr);
    border-radius: .8rem;
    border: 1px solid rgba(243, 122, 82, .35);
    background: rgba(243, 122, 82, .12);
    color: #ffbe9c;
}
.tfe-info-icon svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* Başlık ile kendi metni merdivenin EN SIKI basamağında (.6rem = 9,6px idi). */
.tfe-info-title { margin: 0 0 var(--tfe-yakin); color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.tfe-info-text { margin: 0; color: var(--tfe-muted) !important; font-size: .92rem; line-height: 1.8; }
.tfe-info-text strong { color: #fff !important; }
.tfe-info-text .tfe-hl { color: #ffbe9c !important; }

/* ---------------------------------------------------------------------------
   Önizleme penceresi
   --------------------------------------------------------------------------- */
.tfe-modal .modal-background {
    background: rgba(3, 5, 5, .78);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
}
.tfe-modal .modal-content {
    position: relative;
    width: calc(100% - 2rem);
    max-width: 940px;
    margin: 0 auto;
    overflow: visible;
}
.tfe-modal-inner {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(16, 19, 19, .9);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}
.tfe-modal-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--tfe-line);
    background: rgba(255, 255, 255, .02);
}
.tfe-modal-avatar {
    width: 48px !important; height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2b2f2f;
    background: #16191a;
}
.tfe-modal-meta { flex: 1 1 200px; min-width: 0; }
.tfe-modal-course { display: block; color: #fff; font-size: .95rem; font-weight: 800; line-height: 1.35; }
.tfe-modal-ins { display: block; margin-top: .15rem; color: var(--tfe-dim); font-size: .78rem; }
.tfe-modal-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tfe-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 38px;
    padding: 0 .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .05);
    color: #fff !important;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .25s ease, background .25s ease;
}
.tfe-modal-btn:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .1); }
.tfe-modal-btn svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tfe-modal-btn--primary { border-color: rgba(243, 122, 82, .55); background: rgba(243, 122, 82, .18); }
.tfe-modal-btn--primary:hover { border-color: rgba(243, 122, 82, .95); background: rgba(243, 122, 82, .3); }

.tfe-modal-video { background: #000; }
.tfe-modal-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* Kapatma düğmesi — köşede belirgin. */
.tfe-modal .tfe-modal-close {
    position: absolute;
    top: -14px; right: -14px;
    width: 42px; height: 42px;
    max-width: 42px; max-height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    background: rgba(16, 19, 19, .95) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: border-color .25s ease, background .25s ease;
}
.tfe-modal .tfe-modal-close:hover {
    border-color: rgba(255, 96, 72, .8) !important;
    background: rgba(255, 96, 72, .25) !important;
}
/* İki çubuk AYRI AYRI tanımlanmak zorunda.
   Tek kuralda ikisine de `height: 2px; width: 46%` verilmişti: Bulma her iki
   sözde öğeyi de 45° döndürdüğü için dikey olması gereken `::after` da yatay
   çubuğa dönüşüp diğerinin tam üstüne biniyor ve X yerine TEK ÇİZGİ
   görünüyordu. */
.tfe-modal .tfe-modal-close::before {
    background-color: #fff;
    height: 2px;
    width: 46%;
}
.tfe-modal .tfe-modal-close::after {
    background-color: #fff;
    width: 2px;
    height: 46%;
}

/* ---------------------------------------------------------------------------
   Küçük ekran
   --------------------------------------------------------------------------- */
/* Jeton kırılımları ORTAK katmanda (public-ui.css) — başvuru ekranları bu
   dosyayı yüklemiyor, kırılım burada kalsaydı onlar masaüstü değerlerinde
   takılı kalırdı (yerelde 375px'te ölçüldü: şerit 104 yerine 136px'te). */
@media screen and (max-width: 767px) {
    /* Üst boşluk 5rem (80px) idi: mobil başlık çubuğu 67px yükseklikte SABİT
       duruyor, şerit çubuğun 13px altından başlıyor ve ona yapışık
       görünüyordu. 6,5rem tabletle aynı 37px'lik nefesi veriyor. */
    .tfe-stat { height: 34px; padding: 0 .75rem; font-size: .76rem; }
    .tfe-panel { padding: 1.1rem; border-radius: 1.15rem; }
    .tfe-prose { font-size: .89rem; line-height: 1.8; }
    .tfe-grid { grid-template-columns: minmax(0, 1fr); }
    .tfe-info { grid-template-columns: minmax(0, 1fr); }
    .tfe-info-card { padding: 1.35rem 1.15rem; }
    .tfe-modal-actions { width: 100%; }
    .tfe-modal-actions .tfe-modal-btn { flex: 1 1 auto; justify-content: center; }
    .tfe-modal .tfe-modal-close { top: -12px; right: -6px; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .tfe-card, .tfe-card-media img, .tfe-card-play,
    .tfe .tfe-btn, .tfe-modal-btn, .tfe-grid .message { transition: none; }
    .tfe-card:hover .tfe-card-media img { transform: none; }
}

/* ---------------------------------------------------------------------------
   Başlık bölümünün arka planı
   ---------------------------------------------------------------------------
   `data-background` özniteliğini bundle.js işliyor ve elemana SATIR İÇİ
   `background-size: cover` yazıyor. Satır içi bildirimi yalnızca `!important`
   ezebildiği için burada da kullanılıyor.

   cover, görseli kutuya sığdırmak yerine taşırıp kırpıyordu; contain ile
   görselin tamamı görünür kalıyor.
   --------------------------------------------------------------------------- */
/* Yalnızca başlık bölümü. Sayfadaki ikinci `.tfe[data-background]` bölümü
   (bilgi kartları) aynı görseli dekoratif bir doku olarak kullanıyor; orada
   cover davranışı bilinçli, dokunulmuyor. */
.section.tfe.mobile-top-155[data-background] {
    background-size: contain !important;
    background-position: center top !important;
}