/* ===========================================================================
   Herkese açık sayfa bileşenleri — /certificate-programs, /categories
   ---------------------------------------------------------------------------
   Panelde kullanılan tasarım diliyle aynı: koyu paneller, turkuaz vurgu,
   buzlu cam etiketler, konum değiştirmeyen hover durumları.
   =========================================================================== */

:root {
    --pu-bg: #0b0c0c;
    --pu-panel: #121414;
    --pu-line: #1f2222;
    --pu-line-soft: #191c1c;
    --pu-text: #e9eded;
    --pu-muted: #9aa1a1;
    --pu-dim: #767d7d;
    --pu-accent: #f37a52;
    --pu-accent-soft: rgba(243, 122, 82, .14);

    /* TFE ekranlarının ORTAK dikey ritim MERDİVENİ. Program sayfası
       (tfe-ui.css) ve başvuru ekranları (basvuru-ui.css) aynı jetonlara
       bakıyor; başvuru ekranları tfe-ui.css yüklemediği için jetonlar bu
       ortak katmanda.

       Ölçümde sayfa 11 ayrı boşluk değeri kullanıyordu — 10 / 14 / 16 / 20 /
       22 / 28 / 32 / 36 / 44 / 64 / 128px. Hiçbiri diğerinin katı değildi,
       bu yüzden yukarıdan aşağı bakıldığında aralıklar gelişigüzel duruyordu.
       Artık TEK merdiven, hepsi 8'in katı — sayfadaki her dikey boşluk bu
       altı değerden birine oturmak ZORUNDA, ara değer yazılmaz:

         --tfe-yakin   8px   sıkı bağlı ikili   (başlık ↔ kendi metni)
         --tfe-ogr    16px   aynı grubun öğeleri (paragraf, rozet, ikon)
         --tfe-orta   24px   grup içi bloklar   (ızgara aralığı, oynatıcı)
         --tfe-blok   32px   bölüm içi bloklar  (başlık → içerik)
         --tfe-genis  48px   bölümün kapanış eylemi
         --tfe-bolum  64px   bölüm sınırı       (→ iki bölüm arası 128px)

       `--tfe-hero-ust` ayrı tutuluyor: sabit başlık çubuğunun altındaki
       başlangıç hizası, ritim merdiveninden bağımsız bir kırılım değeri. */
    --tfe-hero-ust: 8.5rem;
    --tfe-yakin: .5rem;
    --tfe-ogr: 1rem;
    --tfe-orta: 1.5rem;
    --tfe-blok: 2rem;
    --tfe-genis: 3rem;
    --tfe-bolum: 4rem;
}

/* Dar ekranda merdivenin KENDİSİ değişmiyor — 8/16/24/32/48 telefonda da doğru
   okunuyor ve kırılımda ikinci bir merdiven tanımlamak sayfayı yine iki ayrı
   ritme bölerdi. Yalnız iki jeton kırılıyor: başlangıç hizası (sabit başlık
   çubuğu 80px'ten 67px'e iniyor) ve bölüm sınırı (tek başına sayfanın boyunu
   belirliyor). Kurallar jetonlara baktığı için ölçüler tek tek yazılmıyor. */
@media screen and (max-width: 1023px) {
    :root { --tfe-hero-ust: 6.5rem; }
}
@media screen and (max-width: 767px) {
    :root { --tfe-bolum: 3rem; }
}

/* ---------------------------------------------------------------------------
   Sayfa başlığı
   Eski hâli ortalanmış `title is-2` + `title-divider` idi; sayfanın geri
   kalanıyla bağı yoktu ve alt açıklama gri üstüne gri kalıyordu.
   --------------------------------------------------------------------------- */
.pubhead { max-width: 760px; margin: 0 auto; text-align: center; }
.pubhead-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .85rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 122, 82, .35);
    background: var(--pu-accent-soft);
    color: #ffbe9c;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}
.pubhead-eyebrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pubhead-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
}
.pubhead-lead {
    margin: .8rem auto 0;
    max-width: 620px;
    /* Beyaza yakın ton: başlığın altında sönük kalmasın. */
    color: #dfe4e4;
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
    line-height: 1.6;
}
/* `.pubhead-lead` içindeki kalın metin, Bulma'nın `strong { color: #363636 }`
   varsayılanını miras alıp koyu zeminde kayboluyordu. */
.pubhead-lead strong { color: inherit; }
.pubhead-rule {
    width: 64px;
    height: 3px;
    margin: 1.4rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec387d, #f37a52 55%, #fda871);
}

/* ---------------------------------------------------------------------------
   Sertifika programı kartları
   Eski kart: sabit `min-height: 430px`, mutlak konumlu alt satır ve
   `is-pulled-left/right` yüzenleri. Uzun başlıklarda alt satırla çakışıyor,
   kısa başlıklarda ortada büyük boşluk kalıyordu. Artık esnek kutu.
   --------------------------------------------------------------------------- */
#frame-certificate {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 1.35rem;
    margin: 0;
}
/* Bulma `.column` yüzenlerini/iç boşluklarını sıfırla — ızgara yönetiyor. */
#frame-certificate > .column { width: auto; padding: 0; }

.certificate-programs {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Sabit yükseklik yerine alt sınır; satırdaki en uzun kart diğerlerini
       zaten ızgara ile eşitliyor. 430px sabitken kısa başlıklı kartlarda
       ortada büyük bir boşluk kalıyordu. */
    min-height: 250px !important;
    padding: 1.35rem 1.35rem 1.25rem !important;
    border-radius: 1.15rem !important;
    /* Sayfadaki diğer kartlarda 1px kenar var; bu kart kenarsızdı. */
    border: 1px solid var(--pu-line) !important;
    background-color: var(--pu-panel) !important;
    transition: border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
/* ---------------------------------------------------------------------------
   Programın kendi rengi — `--cc-*`
   ---------------------------------------------------------------------------
   Karta gelince çerçeve, halka, gölge ve başlık o programın degrade
   renklerinden üretilmiş tonlara döner; her sertifika kendi ikonunun rengiyle
   ayrışır. Değişkenler kartın `style` niteliğinden geliyor
   (bkz. certificate_programs.php + app/Helpers/cert_color_helper.php).

   Her kullanımda marka turuncusu YEDEK olarak duruyor: bu bileşen anasayfa
   kaydırıcısı, /search ve /social-impact sayfalarında da kullanılıyor ve
   oralarda değişken basılmıyor. Değişken yoksa kart bugünkü görünümünü
   birebir koruyor — yani bu bölüm hiçbir sayfada regresyon üretmiyor.

   DURAĞAN hâl bilinçli olarak dokunulmadı: renk yalnızca hover'da ortaya
   çıkıyor, ızgara sakin kalıyor (altta duran `[data-glow]` ışıması korunuyor).
   --------------------------------------------------------------------------- */
.certificate-programs:hover {
    background-color: #151818 !important;
    /* Diğer kartlarla aynı turkuaz halka; burada yalnızca siyah gölge vardı. */
    border-color: rgba(var(--cc-a-rgb, 243, 122, 82), .7) !important;
    box-shadow: 0 0 0 1px rgba(var(--cc-a-rgb, 243, 122, 82), .28),
                0 24px 50px -32px rgba(var(--cc-a-rgb, 243, 122, 82), .85);
}

.certcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.certcard-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .26rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #c9cdcd;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.certcard-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.certificate-programs:hover .certcard-badge { border-color: rgba(var(--cc-a-rgb, 243, 122, 82), .45); color: #e2e6e6; }

/* İkon: eski hâli `float: right` + `margin-top: 25px` ile elle hizalanmıştı. */
.certcard-icon { flex: 0 0 auto; width: 62px; height: 62px; display: grid; place-items: center; }
.certcard-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Alt boşluk: başlık ile altındaki eğitmen avatarları arasında yalnızca
   yığının kendi üst dolgusu (18,4px) vardı ve başlık sıkışık duruyordu.
   8px eklenerek 26,4px'e çıkıyor — üst rozetle başlık arasındaki 17px'ten
   belirgin biçimde fazla, yani başlık "yukarıya ait" olduğu okunuyor.
   Kart bileşeni /certificate-programs, /social-impact ve anasayfa
   kaydırıcısında ortak; değer üçünde birden değişiyor ki kartlar birbirinin
   aynısı kalsın. */
.certcard-title { margin: 1.1rem 0 .5rem; }
.certcard-title a { color: #fff; }
.certcard-title a:hover { color: #fff; }

/* Üzerine gelince başlık marka degradesine dönüyor — "BAUGO Nedir?"
   rozetindeki renk ailesi.
   Degrade `span`e uygulanıyor, saran `a`ya değil: span `-webkit-box` ile
   satır kırpması yapıyor ve ana öğede boyanan bir degradeyi o kutudaki
   glifler almıyor. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* Başlık degradesi programın renginden başlar ve BEYAZA çözülür.
       Şekil, aşağıdaki OYD/TFE kurallarında tasarımcının elle kurduğu
       düzenin aynısı (renk → açık ton → soluk ton → beyaz): başlığın ilk
       hecelerinde programın kimliği okunur, sonu sitenin ortak beyazına
       bağlanır. Renk baştan sona doygun kaldığında kart ızgarasında on iki
       ayrı doygun blok oluşuyordu; beyaza çözülünce hem sakinleşiyor hem
       diğer başlıklarla aynı aileden görünüyor.

       `--cc-ink1` / `--cc-ink` ham depo değerleri DEĞİL: koyu kart zeminine
       karşı en az 4,5:1 (WCAG AA) verecek şekilde tonu korunarak
       aydınlatılmış hâlleri. Ham değerler basılsaydı `#0373d2` gibi koyu
       duraklarda başlığın başı okunmaz olurdu — OYD/TFE kurallarında bu
       sorun elle çözülmüş, burada rampa hallediyor. */
    .certificate-programs:hover .certcard-title span,
    .certificate-programs:focus-within .certcard-title span {
        background-image: linear-gradient(96deg,
            var(--cc-ink1, #fda871) 0%,
            var(--cc-ink, #f37a52) 40%,
            var(--cc-soft, #ffd0ae) 72%,
            #ffffff 100%);
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent !important;
        -webkit-text-fill-color: transparent;
    }

    /* Kendi kurumsal rengi olan programlar. Marka renkleri (#017548 / #095796)
       koyu kart üzerinde tek başına 3,19:1 ve 2,47:1 kontrast veriyor — 16px
       başlık için AA eşiği 4,5:1. Bu yüzden renk 0%'da tam tonuyla başlıyor
       ama degrade hızlıca aydınlanıyor: yalnızca ilk birkaç glif eşiğin
       altında kalıyor, geri kalanı 5:1 ve üzeri. */
    .certificate-programs[data-brand="oyd"]:hover .certcard-title span,
    .certificate-programs[data-brand="oyd"]:focus-within .certcard-title span {
        background-image: linear-gradient(96deg,
            #017548 0%, #0f9c65 14%, #2bbd84 40%, #a9f0d3 72%, #ffffff 100%);
    }
    .certificate-programs[data-brand="tfe"]:hover .certcard-title span,
    .certificate-programs[data-brand="tfe"]:focus-within .certcard-title span {
        background-image: linear-gradient(96deg,
            #095796 0%, #1f7fc9 14%, #4aa3e8 40%, #b9dcfa 72%, #ffffff 100%);
    }
}

/* Aynı iki program için kartın hover halkası ve "İncele" bağlantısı da kendi
   rengine dönüyor; başlık yeşile kayarken çerçevenin turuncu kalması kartı
   ikiye bölüyordu.
   Halka ve gölge için markanın koyu tonu değil AÇIK tonu kullanılıyor:
   #017548 / #095796 koyu zeminde neredeyse görünmez, ışıma etkisi kaybolur.
   Temel kurallar `!important` taşıdığı için buradakiler de taşımak zorunda —
   nitelik seçicisinin ek özgüllüğü tek başına yetmez. */
.certificate-programs[data-brand="oyd"]:hover {
    border-color: rgba(43, 189, 132, .7) !important;
    box-shadow: 0 0 0 1px rgba(43, 189, 132, .28),
                0 24px 50px -32px rgba(1, 117, 72, .95) !important;
}
.certificate-programs[data-brand="tfe"]:hover {
    border-color: rgba(74, 163, 232, .7) !important;
    box-shadow: 0 0 0 1px rgba(74, 163, 232, .28),
                0 24px 50px -32px rgba(9, 87, 150, .95) !important;
}
/* Kendi kurumsal rengi olan iki kartta da "İncele" BEYAZ. Buradaki
   `[data-brand]` kuralları eskiden yeşil/mavi basıyordu; özgüllükleri genel
   kuraldan yüksek olduğu için beyazı eziyorlardı ve kaldırıldı.
   Çerçeve, halka ve başlık degradesi kendi renklerinde KALIYOR — kartın
   kimliği oradan geliyor, "İncele" ise eylem olduğu için nötr beyaz. */
/* Marka varyantlarında da doğrudan hover beyaz. Bu kural OLMAK ZORUNDA:
   `[data-brand]` seçicisinin özgülüğü daha yüksek olduğu için, yukarıdaki
   genel beyaz kuralı bu iki kartta ezilir ve yeşil/mavi geri gelirdi. */
.certificate-programs[data-brand="oyd"]:hover .certcard-more:hover {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, .4);
}
.certificate-programs[data-brand="tfe"]:hover .certcard-more:hover {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, .4);
}
/* `width: fit-content`: span blok seviyesinde ve kart genişliğine yayılıyordu
   (275px kutu, 123px metin). Hover degradesi o genişliğe dağılınca harflere
   yalnızca ilk yarısı düşüyor, pembe uç hiç görünmüyordu. */
.certcard-title span {
    width: fit-content;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

/* "Yeni" rozeti — başlığın üstünde kendi satırında. */
.certcard-new { margin-top: 1rem; align-self: flex-start; }
.certcard-new + .certcard-title { margin-top: .7rem; }

/* Program ortağı logoları (/social-impact) */
/* Logo şeridi: kutu yerine yalnızca üst ve alt çizgi.
   Çerçeveli kutu, kartın içinde ikinci bir kart gibi duruyordu; iki ince
   çizgi şeridi ayırmaya yetiyor ve logolar kartın zemininde yüzüyor. */
.certcard-partner {
    margin-top: 1rem;
    /* Dolgu YOK: iki çizgi arasındaki şerit doğrudan logo sırasının
       yüksekliği kadar. Dolgu varken şerit 80px'e çıkıyor ve logolar
       çizgilerin ortasında yüzüyor gibi duruyordu. Gereken nefes payı
       artık `.cpm-item` yüksekliğinin içinde. */
    padding: 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
.certcard-partner img { display: block; width: 100%; height: auto; max-height: 46px; object-fit: contain; }

/* ---------------------------------------------------------------------------
   Katkı sağlayan kurumlar şeridi — .cpm
   ---------------------------------------------------------------------------
   Logoların en-boy oranları 1.63 (UNITAR, neredeyse kare) ile 6.41
   (CIFAL UNITAR, çok geniş) arasında değişiyor. Yalnızca yükseklik sabitlense
   geniş logolar kartı yiyor, yalnızca genişlik sabitlense kare olanlar cüce
   kalıyor. Bu yüzden her logo SABİT BİR YUVAYA (104×30) `contain` ile
   oturtuluyor: hangi boyut önce sınıra değerse o belirliyor, görsel ağırlık
   dengeleniyor.
   --------------------------------------------------------------------------- */
.cpm {
    position: relative;
    overflow: hidden;
    /* Kenarlarda sert kesim yerine erime. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cpm-track {
    display: flex;
    align-items: center;
    /* `gap` KULLANILMIYOR — bilinçli.
       `gap` ile aralık öğelerin ARASINA giriyor: 12 öğe için 11 aralık.
       Şerit 1534px, bir turun gerçek uzunluğu ise 780px (6×104 + 6×26) ve
       `-50%` = 767px oluyor. Aradaki 13px her döngüde bir sıçrama demek.
       Aralık `margin-right` ile her öğeye verilince her öğe 130px oluyor,
       şerit 12×130 = 1560px ve `-50%` = 780px = tam bir tur. Dikişsiz. */
    width: max-content;
    /* `transform` ile kaydırma: `left`/`margin` her karede yerleşim hesabı
       tetikler ve titremeye yol açar. */
    animation: cpm-slide 26s linear infinite;
    will-change: transform;
}
/* Liste iki kez basıldığı için -50% tam bir tur; dikiş görünmüyor. */
@keyframes cpm-slide {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.cpm:hover .cpm-track { animation-play-state: paused; }

.cpm-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ölçüler logo başına imlemeden geliyor (bkz. certificate_programs_sosyal_etki.php).
       Tek ortak yuva denendi ve BIRAKILDI: PNG'lerin içindeki saydam boşluk
       miktarı çok farklı, aynı kutuya sığdırınca bazı logolar görünür şekilde
       küçük kalıyordu. */
    width: var(--cpm-w, 104px);
    /* 68px = en uzun logo (BAU, 64px) + üstte ve altta 2'şer piksel pay.
       Önceki 60px değeri o logodan KISAYDI: `.cpm` `overflow: hidden`
       taşıdığı için logo üstten ve alttan 2'şer piksel kırpılıyordu.
       Sarmalayıcının dolgusu bunu gizlemiyordu, kırpma zaten oluyordu. */
    height: 68px;
    margin-right: var(--cpm-gap, 26px);
}
.cpm-item img {
    display: block;
    max-width: 100%;
    /* `max-height: none` ŞART: `.certcard-partner img` kuralındaki
       `max-height: 46px` burada da geçerli ve yüksekliği kilitliyordu.
       max-height her zaman height'ı ezer, bu yüzden verilen ölçüler
       uygulanmıyordu. */
    max-height: none !important;
    width: auto !important;
    height: var(--cpm-h, 30px) !important;
    object-fit: contain;
    opacity: .85;
    transition: opacity .25s ease;
}
.cpm-item:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .cpm-track { animation: none; }
    .cpm { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   Eğitmen avatarları — üst üste binen yuvarlaklar
   --------------------------------------------------------------------------- */
.ins-stack {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.05rem;
}
.ins-stack-faces { display: flex; align-items: center; }
.ins-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    /* Halka rengi.
       Eskiden düz beyazdı (`2px solid #fff`) ve koyu kartta yüzlerden daha
       baskın duruyordu: göz önce halkaları görüyordu. Nötr ve saydam bir
       gri, yuvarlakları hâlâ birbirinden ayırıyor ama öne çıkmıyor. */
    border: 2px solid rgba(123, 116, 116, .29);
    background: #1b1f1f;
    /* Üst üste binme. Denemeler: -6px yığını dağıtıyor, -9px hâlâ açık.
       -12px'te yüzlerin %65'i görünüyor; yığın sıkı ama yüzler seçilebiliyor. */
    margin-left: -12px;
}
.ins-face:first-child { margin-left: 0; }
.ins-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ins-face--more {
    color: #ffbe9c;
    /* Zemin .16 → .28 → .40: koyu kartta yuvarlak neredeyse kaybolup düz
       bir delik gibi duruyordu; sayının bir rozet olduğu anlaşılmalı. */
    background: rgba(243, 122, 82, .40);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.ins-stack-label { color: var(--pu-dim); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.certificate-programs:hover .ins-stack-label { color: var(--pu-muted); }

/* Alt eylem satırı — mutlak konum ve yüzenler kaldırıldı. */
/* Eğitmen avatarları kartın DİBİNE, "İncele" satırının hemen üstüne itiliyor.
   `margin-top: auto` bu yüzden `.certcard-foot`tan buraya taşındı: boşluk
   başlığın ALTINDA toplanıyor, yığın da alt bloğun parçası oluyor. Eskiden
   avatarlar başlığa yapışıktı ve kartın ortasında büyük bir boşluk kalıyordu. */
.certificate-programs .ins-stack {
    /* `auto` yalnızca kartta ARTAN yer varsa iter; uzun başlıklı kartlarda
       artan yer olmadığı için başlık ile avatarlar sıfır boşlukla dip dibe
       kalıyordu. `padding-top` her hâlükârda garantili aralığı veriyor. */
    margin-top: auto;
    padding-top: 1.15rem;
}

.certcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    /* margin-top: auto YOK — `.ins-stack` zaten alt bloğu aşağı itiyor;
       ikisinde birden olursa boşluk ikiye bölünüp yığın ortada kalıyor. */
    padding-top: 1.15rem;
}
.certcard-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--pu-muted);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color .25s ease, gap .25s ease;
}
.certcard-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Karta gelince "İncele" ve oku BEYAZ. Ok `currentColor` kullandığı için
   metinle birlikte dönüyor, ayrı bir kural gerekmiyor. Kontrast 17,9:1. */
.certificate-programs:hover .certcard-more {
    color: #ffffff;
    gap: .5rem;
    text-shadow: 0 0 18px rgba(255, 255, 255, .3);
}

/* İmleç kartın üzerindeyken ok sürekli sağa doğru dürtüyor — "buraya
   tıklanır" bilgisini renk değişimine ek olarak hareketle de veriyor.

   Ritim eğitmen kartlarındaki `.ins-card-go` ile AYNI (3px yol, 1,1 sn,
   `ease-in-out`): sitede "ileri git" işareti nerede olursa olsun aynı
   biçimde hareket ediyor, kullanıcı ikinci kez öğrenmek zorunda kalmıyor.

   Animasyon OKUN kendisinde, saran bağlantıda değil: `.certcard-more`
   hover'da `gap` geçişi yapıyor ve aynı ögeye bir de sonsuz `transform`
   bindirmek iki hareketi üst üste bindirirdi. */
.certificate-programs:hover .certcard-more svg,
.certificate-programs:focus-within .certcard-more svg {
    animation: certcard-go-durt 1.1s ease-in-out infinite;
}
@keyframes certcard-go-durt {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}
/* Doğrudan bağlantının üzerine gelince BEYAZ. İki kademeli bir hiyerarşi:
   karta gelince "İncele" programın kendi rengine bürünüyor (turuncu / yeşil /
   mavi), bağlantının kendisine gelince beyaza çıkıyor — yani "işaretlendi"
   ile "şimdi tıklıyorum" birbirinden ayrılıyor.
   Ok da `currentColor` kullandığı için metinle birlikte beyaza dönüyor.
   Kontrast 15,9:1. */
.certcard-more:hover,
.certificate-programs:hover .certcard-more:hover {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------------
   Sepet / fiyat düğmesi — sitenin düğme çizgisi
   ---------------------------------------------------------------------------
   Auth ekranlarındaki `.au-btn` ile aynı muamele: düz, düşük opaklıkta
   degrade dolgu + aynı degradenin daha doygun kenarlığı, hover'da ikisi de
   canlanır. Dolu degrade zemin + koyu metin kullanılmıyordu; kart yüzeyinde
   parlak bir yama gibi duruyor ve buton hiyerarşisini bozuyordu.

   `.btn-basket` betik kancası (data-id) korunuyor, yalnızca biçim değişti.
   Bulma'nın `.button.is-primary.is-outlined` renkleri `!important` ile
   ezilmek zorunda.
   --------------------------------------------------------------------------- */
.certificate-programs .btn-basket {
    display: inline-flex !important;
    align-items: center;
    gap: .45rem;
    height: 40px !important;
    padding: 0 1.05rem !important;
    border: 1px solid rgba(243, 122, 82, .55) !important;
    border-radius: 999px !important;
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .10) 0%,
        rgba(243, 122, 82, .10) 45%,
        rgba(236, 56, 125, .10) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    line-height: 1;
    transition: background .25s ease, border-color .25s ease;
}
/* Kart üzerine gelince düğme de programın rengine döner — kartın çerçevesi,
   başlığı ve düğmesi aynı anda aynı renge geçtiği için kart tek parça okunuyor.
   Saydamlıklar (.55 / .10) DEĞİŞMİYOR, yalnızca renk değişiyor; yani düğmenin
   ağırlığı aynı kalıyor.

   Durağan hâl bilinçli olarak dışarıda: ızgara ilk bakışta nötr kalsın diye
   renk yalnızca hover'da ortaya çıkıyor (kartın geri kalanıyla aynı kural). */
.certificate-programs:hover .btn-basket {
    border-color: rgba(var(--cc-a-rgb, 243, 122, 82), .55) !important;
    background: linear-gradient(96deg,
        rgba(var(--cc-a-rgb, 253, 168, 113), .12) 0%,
        rgba(var(--cc-a-rgb, 243, 122, 82), .12) 45%,
        rgba(var(--cc-b-rgb, 236, 56, 125), .12) 100%) !important;
}
/* Doğrudan düğmenin üzerine gelince aynı renk daha doygun.
   Bu kural yukarıdakiyle AYNI özgüllükte (0,3,0) olduğu için SONRA gelmek
   zorunda — yer değiştirirlerse kart hover'ı düğme hover'ını eziyor ve
   "şimdi tıklıyorum" geri bildirimi kayboluyor. */
.certificate-programs .btn-basket:hover {
    border-color: rgba(var(--cc-a-rgb, 253, 168, 113), .95) !important;
    background: linear-gradient(96deg,
        rgba(var(--cc-a-rgb, 253, 168, 113), .3) 0%,
        rgba(var(--cc-a-rgb, 243, 122, 82), .3) 45%,
        rgba(var(--cc-b-rgb, 236, 56, 125), .3) 100%) !important;
}
.certificate-programs .btn-basket .icon { margin: 0 !important; }
.certificate-programs .btn-basket svg { width: 16px; height: 16px; fill: #fff !important; }
/* `.btn-basket-etiket`: sepete eklendikten sonraki "Sepete Git" metni.
   Çıplak metin düğümü olarak bırakılınca düğmenin kendi ölçüsünü (1rem)
   alıyor, yani sepete ekleme anında yazı fiyat metninden büyüyordu. */
.certificate-programs .btn-basket small,
.certificate-programs .btn-basket .btn-basket-etiket,
.certificate-programs .btn-basket .price-line { color: #fff !important; font-size: .85rem !important; font-weight: 700; }
/* Üstü çizili eski fiyat — ikincil bilgi, sönük kalmalı. */
.certificate-programs .btn-basket .td-line { color: rgba(255, 255, 255, .55) !important; font-weight: 500; }

/* ---------------------------------------------------------------------------
   Katalog kartı (/categories)
   Eski kart: köşeleri hafif yuvarlatılmış, kenarlıksız; görsel oranı
   belirsiz olduğu için satırlar birbirini tutmuyordu.
   --------------------------------------------------------------------------- */
.trip-card.catlist-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Sayfadaki tüm kartlarla aynı köşe yarıçapı (1.15rem). */
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel);
    transition: border-color .28s ease, box-shadow .28s ease;
}
/* Katılım belgesi etiketi — görselin SOL üstünde.
   Sağ üst köşe TFE programı logosuna ayrılmış (bazı kartlarda sağda, bazı
   kartlarda solda konumlanıyor); etiket sabit olarak solda duruyor ve
   `z-index` ile üzerine gelince beliren perdenin üstünde kalıyor.
   Buzlu cam + ince kenarlık: görselin rengi ne olursa olsun okunuyor. */
.catcard-cert {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(10, 12, 12, .62);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
            backdrop-filter: blur(12px) saturate(150%);
    color: #ffd0ae;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}
.catcard-cert svg {
    width: 12px; height: 12px;
    flex: 0 0 auto;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Karta gelince etiket de canlanıyor — kartın geri kalanıyla aynı anda. */
.trip-card.catlist-card:hover .catcard-cert,
.trip-card.catlist-card:focus-within .catcard-cert {
    border-color: rgba(243, 122, 82, .5);
    color: #ffe0c8;
}

.trip-card.catlist-card:hover,
.trip-card.catlist-card:focus-within {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28),
                0 20px 42px -30px rgba(243, 122, 82, .85);
}
.catlist-card .card-image { display: block; overflow: hidden; background: #16191a; }
.catlist-card .card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.catlist-card .card-content { flex: 1 1 auto; padding: .9rem .95rem 1rem; }
/* Kart alt bloğu iki kata ayrıldı (bkz. `.catcard-foot`), bu yüzden esneklik
   KAPSAYICIDAN iç satıra taşındı. `!important` burada zorunlu: main.css
   `.trip-card .card-content .card-content-inner`a flex basıyor ve eski kural
   da `!important` ile yazılmıştı; aynı silahla geri alınıyor. */
.catlist-card .card-content-inner {
    display: block !important;
    height: 100%;
}
.catlist-card .card-content-inner .left { flex: 1 1 auto; min-width: 0; gap: .6rem; }
/* Avatar 40 → 48px. Künye iki satıra çıkınca (unvan + ad soyad, ≈39px) 40px'lik
   fotoğraf yanındaki metinden kısa kalıp cılız duruyordu; 48px iki satırı
   tam karşılıyor. Satır zaten `min-height: 57px` olduğu için kart yüksekliği
   değişmiyor. */
.catlist-card .card-content-inner .left > img {
    width: 48px !important; height: 48px !important; min-width: 48px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2b2f2f;
}
/* `main.css` zincirinde `.meta`ya genişlik verilmediği için `-webkit-box`
   olan başlık en dar içeriğe (tek harfe) çöküyordu. */
.catlist-card .meta { flex: 1 1 auto; min-width: 0; margin-left: .6rem; }
.catlist-card .meta span:first-child {
    display: block;
    color: var(--pu-dim) !important;
    font-size: .74rem !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.catlist-card .meta span:nth-child(2) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: none !important;
    white-space: normal !important;
    color: #fff !important;
    font-size: .9rem !important;
    font-weight: 600;
    line-height: 1.35;
    margin-top: .15rem;
}

/* Sepet düğmesi — sertifika kartlarıyla aynı dil. */
/* Katalog kartındaki sepet/fiyat düğmesi — yukarıdakiyle aynı çizgi,
   kart içinde durduğu için bir tık küçük. */
.catlist-card .btn-basket {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    height: 36px !important;
    padding: 0 .85rem !important;
    border: 1px solid rgba(243, 122, 82, .55) !important;
    border-radius: 999px !important;
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .10) 0%,
        rgba(243, 122, 82, .10) 45%,
        rgba(236, 56, 125, .10) 100%) !important;
    color: #fff !important;
    line-height: 1;
    white-space: nowrap;
    transition: background .25s ease, border-color .25s ease;
}
.catlist-card .btn-basket:hover {
    border-color: rgba(253, 168, 113, .95) !important;
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .3) 0%,
        rgba(243, 122, 82, .3) 45%,
        rgba(236, 56, 125, .3) 100%) !important;
}
.catlist-card .btn-basket .icon { margin: 0 !important; }
/* Sepet ikonu dolgudan kontura geçti (bkz. `.catcard-cart-ico`); buradaki
   `fill:#fff !important` yeni ikonun içini beyaza boyayıp lekeye çeviriyordu.
   Ölçü ve renk artık ikonun kendi kuralında. */
.catlist-card .btn-basket svg:not(.catcard-cart-ico) { width: 15px; height: 15px; fill: #fff !important; }
.catlist-card .btn-basket small,
.catlist-card .btn-basket .btn-basket-etiket { color: #fff !important; font-size: .8rem !important; font-weight: 700; }
.catlist-card .btn-basket .td-line { color: rgba(255, 255, 255, .55) !important; font-weight: 500; }

/* "Sadece sertifika programlarında" rozeti — turuncu kutudan sakin etikete. */
.catlist-card .card-content-inner .is-pulled-right > div[style] {
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .04);
    color: var(--pu-muted) !important;
    padding: .45rem .7rem !important;
    width: auto !important;
    max-width: 140px;
    font-size: .68rem !important;
    line-height: 1.3;
}
.catlist-card .card-content-inner .is-pulled-right > div[style] a { color: var(--pu-muted) !important; }
.catlist-card:hover .card-content-inner .is-pulled-right > div[style] { border-color: rgba(243, 122, 82, .45) !important; }

/* ---------------------------------------------------------------------------
   Arama alanı
   Eski hâlinde arama ikonu, girdinin YANINDA duran ayrı bir kutuydu
   (`border-left: 0` ile bitiştirilmiş turuncu bir dikdörtgen). Artık ikon
   girdinin içinde, sağ kenara oturan yuvarlak bir gönder düğmesi.
   --------------------------------------------------------------------------- */
.search_field {
    position: relative;
    display: block;
    width: 100%;
    /* Üst boşluk artık `.pubhead`in alt dolgusundan geliyor; buradaki marj
       onunla toplanıp aralığı iki katına çıkarıyordu. */
    margin-top: 0;
}
.search_field .search_frame {
    width: 100%;
    height: 56px;
    /* Sağda düğmeye yer bırakılır. */
    padding: 0 68px 0 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--pu-line);
    background: rgba(255, 255, 255, .03);
    color: var(--pu-text);
    font-size: .95rem;
    -webkit-box-shadow: none !important;
    box-shadow: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.search_field .search_frame:focus {
    border-color: rgba(243, 122, 82, .6);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 3px rgba(243, 122, 82, .12) !important;
    outline: none;
}
.search_field .search_frame::placeholder { color: #5f6666; }

.search_field label {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    line-height: 0;
}
.search_field .search_icon {
    width: 42px;
    height: 42px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(12, 14, 14, .6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.search_field .search_icon:hover {
    border-color: rgba(243, 122, 82, .7);
    background: rgba(243, 122, 82, .16);
}

/* ---------------------------------------------------------------------------
   "1 Yıl Boyunca Sınırsız Erişim" — sistemin en üst paketi
   Eski hâli: siyah zemin üzerine sağa kaçmış bir fotoğraf, düz beyaz başlık
   ve `is-outlined` bir düğme. Artık degrade çerçeveli, cam görünümlü panel.
   --------------------------------------------------------------------------- */
.fullaccess_banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 1.5rem !important;
    padding: 2.5rem 2.25rem !important;
    margin: 0 0 2.25rem !important;
    background-color: #0d0f0f !important;
    background-position: right center !important;
    background-size: cover !important;
}
/* Fotoğrafın üzerine soldan sağa açılan koyu perde — metin her zaman okunur. */
.fullaccess_banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, #0b0d0d 4%, rgba(11, 13, 13, .93) 34%, rgba(11, 13, 13, .55) 62%, rgba(11, 13, 13, .2) 100%),
        radial-gradient(58% 70% at 6% 8%, rgba(243, 122, 82, .22), transparent 68%);
}
/* Degrade çerçeve: iç kısmı saydam kalsın diye maske farkı alınır. */
.fullaccess_banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(253, 168, 113, .75), rgba(243, 122, 82, .25) 38%, rgba(255, 255, 255, .06) 62%, rgba(243, 122, 82, .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Sol metin / sağ akademik kadro */
.fa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 2.5rem;
    align-items: center;
}
.fa-copy { min-width: 0; }

/* Akan kadro sütunları ------------------------------------------------------
   Üç sütun aşağıdan yukarı akar. Her sütunun içeriği iki kez basıldığı için
   ray %50 yukarı kaydığında başa dönmüş olur — kesinti görünmez. */
.fa-faces {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    height: 400px;
    overflow: hidden;
    /* Panelin sağ iç boşluğu iptal edilir; sütunlar kenarlığa kadar uzanır. */
    margin-right: -2.25rem;
    /* İki maske birlikte: üst/alt uçlarda ve sağ kenara yaklaşırken erime.
       `intersect` ikisinin kesişimini alır — köşeler de yumuşak kalır. */
    -webkit-mask-image:
        linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%),
        linear-gradient(90deg, #000 0, #000 58%, transparent 97%);
            mask-image:
        linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%),
        linear-gradient(90deg, #000 0, #000 58%, transparent 97%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}
.fa-col { overflow: hidden; }
/* Ortadaki sütun kaymış görünmeli, ama kutusu AŞAĞI İNMEMELİ: `margin-top`
   verildiğinde sütunun üst kenarı maskenin opak bölgesine denk geliyor ve
   `overflow: hidden` orada sert bir kesme yapıyordu — yandaki sütunlar
   yumuşak erirken ortadaki bıçakla kesilmiş gibi duruyordu.
   Kayma artık animasyon fazından veriliyor: kutu aynı hizada başlar,
   kartlar farklı noktada olur. */
.fa-col--mid .fa-track { animation-delay: -7s; }

.fa-track {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    animation: fa-flow var(--fa-sure, 40s) linear infinite;
    will-change: transform;
}
@keyframes fa-flow {
    from { transform: translate3d(0, 0, 0); }
    /* Yarısı kadar kayınca ikinci kopyanın başı, birincinin başıyla çakışır. */
    to   { transform: translate3d(0, -50%, 0); }
}
/* Kaydırma imleç ÜZERİNDEYKEN ve KLAVYE ODAĞI içindeyken duruyor. Odak
   şartı kartlar tıklanabilir olduğu için eklendi: sekmeyle gezen biri
   hareket eden bir hedefe basmak zorunda kalmamalı. */
.fa-faces:hover .fa-track,
.fa-faces:focus-within .fa-track { animation-play-state: paused; }

/* Kart — artık eğitmen sayfasına giden bir bağlantı. */
.fa-face {
    position: relative;
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 3 / 4;
    border-radius: .85rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #121515;
    box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .95);
    /* Yalnızca kenarlık ve gölge geçişli: `transform` eklenirse kaydıran
       `.fa-track` animasyonuyla aynı özelliği paylaşmaz ama kartın kendi
       katmanı her karede yeniden çizilir ve şerit titrer. */
    transition: border-color .22s ease, box-shadow .22s ease;
}
/* Üzerine gelince beyaza yakın saydam kenarlık — hangi kartın seçildiği
   belli oluyor. Marka turuncusu YERİNE beyaz: şeritte 24 fotoğraf var ve
   turuncu kenarlık o yoğunlukta kartı bir uyarı gibi gösteriyordu. */
.fa-face:hover,
.fa-face:focus-visible {
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .95),
                0 0 0 1px rgba(255, 255, 255, .18);
}
/* Klavye odağı ayrıca halka alıyor: `:hover` ile aynı görünmesi yetmez,
   odak her zaman fareyle gezinmeden ayırt edilebilir olmalı. */
.fa-face:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
}
/* Kart bağlantı olduğu için imleç işaretini de veriyor. */
.fa-face { cursor: pointer; }
/* Üzerine gelince fotoğraf hafifçe canlanıyor — kartın "uyandığı" hissi. */
.fa-face:hover img,
.fa-face:focus-visible img { filter: saturate(1.02) contrast(1.05) brightness(1.06); }
.fa-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fotoğraflar farklı tonlarda; hafif bir birleştirme. */
    filter: saturate(.92) contrast(1.03);
    transition: filter .22s ease;
}
.fa-face-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 10, .92) 4%, rgba(8, 10, 10, .45) 38%, rgba(8, 10, 10, 0) 68%);
}
.fa-face-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .5rem .55rem .55rem;
}
/* Akademik unvan — adın ÜSTÜNDE ayrı satır. Adın önüne eklenseydi
   "Dr. Öğr. Üyesi Mehmet Yılmaz" tek satıra sığmaz, kırpılan kısım da
   çoğunlukla soyadı olurdu. Ayrı satırda unvan tam görünüyor ve isim
   kendi ağırlığını koruyor. */
.fa-face-prefix {
    display: block;
    margin-bottom: .05rem;
    color: #ffbe9c;
    font-size: .56rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fa-face-name {
    display: block;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fa-face-job {
    display: block;
    margin-top: .1rem;
    color: rgba(255, 255, 255, .62);
    font-size: .6rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    padding: .34rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}
.fa-eyebrow svg { width: 13px; height: 13px; fill: none; stroke: #fda871; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fa-title {
    margin: 0;
    max-width: 18ch;
    color: #fff;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
}
.fa-title em {
    font-style: normal;
    /* Marka geçişinin kanonik hâli: turuncudan pembeye.
       Eskiden `#ffbe9c` (soluk şeftali) ile bitiyordu; iki durağı da turuncu
       olduğu için yıkanmış tek renk gibi okunuyor, sitedeki diğer degradelerle
       (ayraçlar, düğmeler, ilerleme çubukları) aynı aileden görünmüyordu. */
    background: linear-gradient(100deg, #fda871, #f37a52 50%, #ec387d);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fa-lead { margin: .9rem 0 0; max-width: 40ch; color: #b8bfbf; font-size: 1rem; line-height: 1.6; }

.fa-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-top: 1.35rem; }
.fa-price-now { color: #fff; font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.fa-price-note { color: var(--pu-dim); font-size: .8rem; font-weight: 600; }

.fa-perks { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.35rem; }
.fa-perk {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .045);
    color: #d3d7d7;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}
.fa-perk svg { width: 13px; height: 13px; fill: none; stroke: #fda871; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Ana eylem düğmesi — sitenin düğme çizgisi (auth `.au-btn` ile aynı).
   `.fullaccess_banner_button` JS kancası korunur.

   Dolu degrade + koyu metin + dışa düşen gölge kullanılmıyordu: gölge
   kabartma etkisi veriyor ve düğme arayüzün geri kalanından kopuyordu. */
.fullaccess_banner .fullaccess_banner_button {
    display: inline-flex !important;
    align-items: center;
    gap: .55rem;
    height: 52px !important;
    margin-top: 1.6rem;
    padding: 0 1.9rem !important;
    border: 1px solid rgba(243, 122, 82, .55) !important;
    border-radius: 999px !important;
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .10) 0%,
        rgba(243, 122, 82, .10) 45%,
        rgba(236, 56, 125, .10) 100%) !important;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none !important;
    transition: background .25s ease, border-color .25s ease;
}
.fullaccess_banner .fullaccess_banner_button:hover {
    border-color: rgba(253, 168, 113, .95) !important;
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .3) 0%,
        rgba(243, 122, 82, .3) 45%,
        rgba(236, 56, 125, .3) 100%) !important;
}
.fullaccess_banner .fullaccess_banner_button .icon { margin: 0 !important; }
.fullaccess_banner .fullaccess_banner_button svg { width: 18px; height: 18px; fill: #fff !important; }
.fullaccess_banner .fullaccess_banner_button small,
.fullaccess_banner .fullaccess_banner_button span { color: #fff !important; font-size: 1rem !important; font-weight: 800; }

/* Büyük ekranda kartlar belirgin şekilde büyür. */
@media screen and (min-width: 1280px) {
    .fa-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 2.75rem; }
    .fa-faces { height: 470px; gap: .9rem; }
    .fa-col--mid .fa-track { animation-delay: -9s; }
    .fa-face-name { font-size: .82rem; }
    .fa-face-job { font-size: .68rem; }
    .fa-face-meta { padding: .6rem .65rem .65rem; }
}
@media screen and (min-width: 1600px) {
    .fa-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
    .fa-faces { height: 520px; }
}

@media screen and (max-width: 1023px) {
    /* Dar ekranda akan sütunlar metnin altına iner ve alçalır. */
    .fa-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .fa-faces {
        height: 260px;
        /* Tek sütuna düşünce iki yana da taşar. */
        margin-right: -1.25rem;
        margin-left: -1.25rem;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
                mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
        -webkit-mask-composite: source-over;
                mask-composite: add;
    }
    .fa-col--mid .fa-track { animation-delay: -5s; }
}

@media screen and (max-width: 768px) {
    .fullaccess_banner { padding: 1.75rem 1.25rem !important; border-radius: 1.15rem !important; }
    /* Telefonda üç sütunluk hareket dikkat dağıtıyor; kaldırılır. */
    .fa-faces { display: none; }
    .fullaccess_banner::before {
        background:
            linear-gradient(180deg, rgba(11, 13, 13, .82) 0%, rgba(11, 13, 13, .95) 55%),
            radial-gradient(70% 60% at 8% 4%, rgba(243, 122, 82, .22), transparent 70%);
    }
    .fa-title { max-width: none; }
    .fa-lead { max-width: none; font-size: .92rem; }
    .fullaccess_banner .fullaccess_banner_button { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Sınırsız Erişim — kapsam dışı uyarısı (.fak)
   ---------------------------------------------------------------------------
   İşaretleme: app/Views/frontend/partials/fullaccess_kapsam.php
   Paketin satıldığı her yerde (afiş, ana sayfa plan kartı, sepet kartı ve
   sepetteki öneri kartı) TEK SATIR duruyor; gerekçeler tıklanınca açılan
   kipte. Uyarı rengi değil sakin bir bilgi tonu: kırmızı şerit satın alma
   anında caydırıcı okunuyordu.
   --------------------------------------------------------------------------- */
.fak-tetik {
    display: inline-flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .7rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #9aa1a1;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease;
}
.fak-tetik:hover,
.fak-tetik:focus-visible { color: #d3d7d7; }
.fak-tetik svg {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    margin-top: .1rem;
    fill: none; stroke: #fda871;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* "Ayrıntılar" metnin peşinden gider — ayrı bir düğme gibi durmasın diye
   satır içi ve altı çizili; tıklanabilirlik ipucu olarak yeterli.
   Cümlenin İÇİNDE duruyor: kardeş esnek öge olduğunda dar kartta cümlenin
   ortasına düşüyordu ("…pakete dâhil  Ayrıntılar  değildir."). */
.fak-tetik-metin { min-width: 0; }
.fak-tetik-baglanti {
    margin-left: .35rem;
    color: #fda871;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: .18em;
}
.fak-tetik:hover .fak-tetik-baglanti { color: #f37a52; }
/* Sepet kartının altında satır tam genişlikte durur. */
.fak-tetik--genis { display: flex; width: 100%; }

/* --- Kip (pencere) --------------------------------------------------------
   Site dilinde: koyu panel, ince çerçeve, bulanık perde — önizleme
   penceresiyle (`.cpv-modal`, dash-ui.css) aynı ölçüler. Bulma'ya bağlı
   değil, parça kendi kendine yetiyor. */
.fak-kip {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}
.fak-kip[hidden] { display: none; }
html.fak-kip-acik { overflow: hidden; }

.fak-kip-perde {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 6, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fak-kip-belir .18s ease-out;
}
.fak-kip-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 3rem);
    overflow: hidden auto;
    overscroll-behavior: contain;
    padding: 1.6rem 1.7rem 1.7rem;
    border-radius: 1rem;
    border: 1px solid #232626;
    background: #0e0f0f;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
    scrollbar-width: thin;
    animation: fak-kip-yuksel .2s ease-out;
}
@keyframes fak-kip-belir { from { opacity: 0; } }
@keyframes fak-kip-yuksel { from { opacity: 0; transform: translateY(10px); } }

.fak-kip-kapat {
    position: absolute;
    top: .85rem;
    right: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.fak-kip-kapat:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); }
/* Odak halkası: pencere açılınca odak buraya BETİKLE geçiyor, tarayıcının
   varsayılan mavi halkası paletin dışında kalıyordu. */
.fak-kip-kapat:focus-visible,
.fak-tetik:focus-visible,
.fak-kip-madde-govde a:focus-visible {
    outline: 2px solid rgba(253, 168, 113, .9);
    outline-offset: 3px;
}
.fak-kip-kapat svg {
    width: 15px; height: 15px;
    fill: none; stroke: #fff;
    stroke-width: 2; stroke-linecap: round;
}

.fak-kip-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: .28rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 122, 82, .45);
    background: rgba(243, 122, 82, .12);
    color: #ffbe9c;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.fak-kip-baslik {
    margin: .8rem 0 0;
    padding-right: 2.5rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.fak-kip-lead { margin: .6rem 0 0; color: #b8bfbf; font-size: .88rem; line-height: 1.65; }

.fak-kip-liste { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.35rem; }
.fak-kip-madde {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .9rem;
    padding: 1rem 1.05rem;
    border-radius: .8rem;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .03);
}
.fak-kip-madde-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(253, 168, 113, .35);
    background: rgba(243, 122, 82, .1);
}
.fak-kip-madde-ikon svg {
    width: 19px; height: 19px;
    fill: none; stroke: #fda871;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.fak-kip-madde-govde h3 {
    margin: 0;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
}
.fak-kip-madde-govde p { margin: .4rem 0 0; color: #9aa1a1; font-size: .82rem; line-height: 1.65; }
.fak-kip-madde-govde a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .6rem;
    color: #fda871 !important;
    font-size: .8rem;
    font-weight: 700;
}
.fak-kip-madde-govde a:hover { color: #f37a52 !important; text-decoration: underline; }
.fak-kip-madde-govde a svg {
    width: 13px; height: 13px;
    fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

@media screen and (max-width: 768px) {
    .fak-kip { padding: 1rem .75rem; }
    .fak-kip-panel { padding: 1.35rem 1.15rem 1.4rem; border-radius: .85rem; max-height: calc(100vh - 2rem); }
    .fak-kip-baslik { font-size: 1.18rem; }
    .fak-kip-madde { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .fak-kip-perde, .fak-kip-panel { animation: none; }
}

/* ---------------------------------------------------------------------------
   Kategori satırları (/categories için ayrı düzen)
   --------------------------------------------------------------------------- */
.catrow-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.catrow-title {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -.01em;
}
.catrow-count { color: var(--pu-dim); font-size: .74rem; font-weight: 600; white-space: nowrap; }
/* Kart ızgarasının başlığı — rayların aksine altında yatay kaydırma yok,
   bu yüzden başlıkla ilk kart satırı arasına biraz daha nefes bırakılıyor. */
.catrow-head--list { margin-top: .5rem; margin-bottom: .1rem; }
.catrow-all {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--pu-muted);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color .25s ease, gap .25s ease;
}
.catrow-all svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.catrow-all:hover { color: #ffbe9c; gap: .5rem; }

/* Karuseldeki eğitim kartı */
.listing-categories .trip-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel);
    transition: border-color .28s ease, box-shadow .28s ease;
}
.listing-categories .trip-card:hover {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28),
                0 20px 42px -30px rgba(243, 122, 82, .85);
}
.listing-categories .trip-card .card-image { display: block; overflow: hidden; background: #16191a; }
.listing-categories .trip-card .card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.listing-categories .trip-card .card-content { padding: .85rem .9rem 1rem; }
.listing-categories .trip-card .meta span:first-child {
    display: block;
    color: var(--pu-dim) !important;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listing-categories .trip-card .meta span:nth-child(2) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: none !important;
    white-space: normal !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 600;
    line-height: 1.35;
    margin-top: .2rem;
}

/* Karusel okları — turuncu yuvarlaklardan buzlu cam düğmelere. */
.listing-categories .glide__arrow {
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(12, 14, 14, .6) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff !important;
    box-shadow: none !important;
    transition: border-color .25s ease, background .25s ease;
}
.listing-categories .glide__arrow:hover {
    border-color: rgba(243, 122, 82, .7) !important;
    background: rgba(243, 122, 82, .16) !important;
}
.listing-categories .glide__arrow svg { width: 17px; height: 17px; }

/* Bölüm arası ayraç */
.listing-categories-wrapper + .listing-categories-wrapper { border-top: 1px solid var(--pu-line-soft); }

/* Üstte kayan kategori çubuğu */
.listing-nav .nav-item {
    border-radius: 999px;
    padding: .4rem .85rem;
    color: var(--pu-muted);
    font-size: .84rem;
    font-weight: 600;
    transition: color .25s ease, background .25s ease;
}
.listing-nav .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }

@media screen and (max-width: 600px) {
    #frame-certificate { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
    .certificate-programs { min-height: 250px !important; padding: 1.05rem !important; }
    .certcard-icon { width: 48px; height: 48px; }
    .certcard-title span { font-size: 1rem; }
    .certcard-foot { padding-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .certificate-programs, .certcard-more, .catrow-all,
    .listing-categories .trip-card, .listing-categories .glide__arrow { transition: none; }
    /* Hareket tercihi kapalıysa akış durur, kartlar sabit kalır. */
    .fa-track { animation: none; }
}

/* ===========================================================================
   Sertifika kartı köşe parıltısı
   ---------------------------------------------------------------------------
   Panelin (`/dashboard`) sertifika kartlarıyla aynı sistem: koyu zemin ve
   bir köşede yumuşak radyal parıltı. Renk, kart kimliğinden türer
   (`id % 6`) — program sayısı arttıkça yeni kartlar da kendiliğinden
   dağılımdan bir renk alır, elle bir şey tanımlamak gerekmez.
   `background` kısayolu yerine `background-color` kullanılır; aksi hâlde
   parıltı katmanı sıfırlanır.
   =========================================================================== */
.certificate-programs { background-color: var(--pu-panel) !important; }
.certificate-programs[data-glow="0"] { background-image: radial-gradient(78% 62% at 92% 4%,  rgba(243, 122, 82, .26), transparent 68%) !important; }
.certificate-programs[data-glow="1"] { background-image: radial-gradient(72% 60% at 6%  96%, rgba(243, 122, 82, .22), transparent 66%) !important; }
.certificate-programs[data-glow="2"] { background-image: radial-gradient(76% 64% at 4%  6%,  rgba(120, 132, 255, .20), transparent 68%) !important; }
.certificate-programs[data-glow="3"] { background-image: radial-gradient(80% 62% at 96% 94%, rgba(243, 122, 82, .20), transparent 66%) !important; }
.certificate-programs[data-glow="4"] { background-image: radial-gradient(74% 60% at 94% 92%, rgba(214, 116, 210, .18), transparent 66%) !important; }
.certificate-programs[data-glow="5"] { background-image: radial-gradient(76% 62% at 8%  4%,  rgba(255, 190, 110, .18), transparent 68%) !important; }

/* "Yeni" rozeti: kart akışını kaydırmasın diye mutlak konumlu, buzlu cam. */
.certcard-new {
    position: absolute;
    top: 1.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0 !important;
    padding: .3rem .8rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(12, 14, 14, .55) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #ffbe9c !important;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: none !important;
}
.certcard-new + .certcard-title { margin-top: 1.1rem; }

/* ===========================================================================
   Sepet düğmesi — fiyat ↔ "Sepete Ekle" geçişi
   ---------------------------------------------------------------------------
   Eskiden JS `toggle()` ile iki metni birbirinin yerine koyuyordu; metinler
   farklı genişlikte olduğu için düğme her hover'da boyut değiştiriyordu.
   İki metin artık AYNI ızgara hücresinde üst üste duruyor: hücre en geniş
   metne göre ölçülüyor, geçiş yalnızca opaklık/kayma ile yapılıyor.
   =========================================================================== */
.btn-basket,
.certificate-programs .btn-basket,
.catlist-card .btn-basket {
    display: grid !important;
    /* Etiket sütunu iki metnin GENİŞ olanına göre ölçülür. */
    grid-template-columns: auto max-content;
    align-items: center;
    gap: .45rem;
}
.btn-basket .icon { grid-area: 1 / 1; }
/* Fiyat, hover etiketi ve "Sepete Git" — üçü de ikinci hücrede.
   `--sepette` durumunda hücrede yalnız `.btn-basket-etiket` bulunur; solma
   kuralları (`:hover small`) yalnız `small`i hedeflediği için bu metin
   hover'da kaybolmaz. */
.btn-basket small,
.btn-basket .btn-basket-etiket,
.btn-basket > div {
    grid-area: 1 / 2;
    text-align: center;
    transition: opacity .22s ease, transform .22s ease;
}
.btn-basket > div {
    /* İşaretlemedeki `style="display:none"` bu kuralla ezilir. */
    display: block !important;
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
    white-space: nowrap;
}
.btn-basket small { opacity: 1; transform: translateY(0); }
.btn-basket:hover small { opacity: 0; transform: translateY(-5px); }
.btn-basket:hover > div { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .btn-basket small, .btn-basket > div { transition: opacity .01s linear; }
}

/* ===========================================================================
   Sayfa başlığı — alt boşluk her sayfada aynı
   Görünümler `pt-6` / `pb-0` gibi farklı Bulma sınıfları taşıdığı için
   `.pubhead` sonrası boşluk sayfadan sayfaya değişiyordu.
   =========================================================================== */
.pubhead { padding-top: .5rem; padding-bottom: 2.5rem; }
.section-title:has(> .pubhead) { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* "Sadece sertifika programlarında" / "Ücretsiz" — turuncu kutudan etikete.
   Eski hâli 125px sabit genişlikte, turuncu kenarlıklı bir dikdörtgendi ve
   kartın diğer öğeleriyle aynı dili konuşmuyordu. */
.course-only-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: var(--pu-muted);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    max-width: 150px;
    text-align: center;
    transition: border-color .25s ease, color .25s ease;
}
.course-only-tag a { color: inherit !important; }
/* Emniyet: etiket metni ne olursa olsun tek satırda kalsın. Sarınca kart
   uzuyor ve ızgarada aynı satırdaki BÜTÜN kartlar onunla birlikte esniyordu. */
.catlist-card .course-only-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.catlist-card .catcard-foot-row > .is-pulled-right { flex: 0 1 auto; min-width: 0; }
.catlist-card:hover .course-only-tag { border-color: rgba(243, 122, 82, .45); color: var(--pu-text); }

/* ===========================================================================
   Akademik kadro kartı (ana sayfa karuseli)
   =========================================================================== */
.ins-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    /* Diğer kartlarla aynı yarıçap ve panel rengi. */
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel);
    transition: border-color .28s ease, box-shadow .28s ease;
}
.ins-card:hover,
.ins-card:focus-visible {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28),
                0 20px 42px -30px rgba(243, 122, 82, .85);
}
.ins-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.94) contrast(1.02);
}
.ins-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 10, .94) 6%, rgba(8, 10, 10, .5) 40%, rgba(8, 10, 10, 0) 70%);
}
.ins-card-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem .9rem .95rem; }
.ins-card-prefix {
    display: block;
    color: var(--pu-dim);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: .18rem;
}
.ins-card-name {
    display: block;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.ins-card-job {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .2rem;
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ { .ins-card { transition: none; } }

/* ===========================================================================
   Yatay kart rayı (ana sayfa) — panelin sertifika rayıyla aynı davranış
   =========================================================================== */
.pub-slider { position: relative; }

.pub-slider-track {
    display: grid;
    grid-auto-flow: column;
    /* Sabit genişlik şart: `1fr`/`minmax(0,…)` kartları sıkıştırıp taşmayı,
       dolayısıyla kaydırmayı ortadan kaldırır. */
    grid-auto-columns: 240px;
    gap: 1rem;
    overflow-x: auto;
    /* DİKEY KAYDIRMA KAPALI — sayfanın rayın üzerinde takılmasının sebebi.
       `overflow-x: auto` verildiğinde diğer eksen kendiliğinden `auto` olur;
       ray içinde 1px'lik bir dikey taşma bile kutuyu DİKEY kaydırılabilir
       yapar ve fare oradayken tekerlek önce o payı tüketir, sayfa ancak
       sonra kayar. Sertifika programı sayfasında `data-reveal` kartları
       giriş animasyonu boyunca `translateY(22px)` taşıyor ve tam 14px'lik
       böyle bir pay oluşturuyordu (scrollHeight 386 / clientHeight 372) —
       kullanıcının "sadece burada takılıyor" dediği yer burası.

       `clip` yazılıyor ama şartname gereği bir eksen kaydırılabilirken
       (`overflow-x: auto`) diğer eksendeki `clip` KULLANILAN değerde
       `hidden`a dönüşüyor — tarayıcıda da öyle ölçüldü. Sonuç yine doğru:
       kutu kullanıcı tarafından dikey kaydırılamıyor, tekerlek doğrudan
       sayfaya geçiyor. `overflow-clip-margin` destekleyen tarayıcıda
       taşma payı bırakıyor, desteklemeyende zararsız. */
    overflow-y: hidden;
    overflow-y: clip;
    overflow-clip-margin: 28px;
    padding: .35rem .35rem 1.25rem;
    margin: 0 -.35rem;
    scroll-snap-type: x proximity;
    scroll-padding-left: .35rem;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    --pub-fade-left: 0px;
    --pub-fade-right: 0px;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 var(--pub-fade-left),
        #000 calc(100% - var(--pub-fade-right)), transparent 100%);
            mask-image: linear-gradient(90deg,
        transparent 0, #000 var(--pub-fade-left),
        #000 calc(100% - var(--pub-fade-right)), transparent 100%);
    transition: -webkit-mask-image .25s ease, mask-image .25s ease;
}
.pub-slider-track::-webkit-scrollbar { display: none; }
.pub-slider-track:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 4px; }
.pub-slide { scroll-snap-align: start; min-width: 0; }

.pub-slider-nav {
    position: absolute;
    top: calc(50% - .6rem);
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(17, 20, 20, .72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .9);
    color: #fff;
    cursor: pointer;
    transition: opacity .25s ease, background .25s ease, border-color .25s ease;
}
.pub-slider-nav svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}
.pub-slider-nav:hover { background: rgba(17, 20, 20, .9); border-color: rgba(243, 122, 82, .75); }
.pub-slider-nav:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 2px; }
.pub-slider-nav[disabled] { opacity: 0; pointer-events: none; }
.pub-slider-nav--prev { left: -14px; }
.pub-slider-nav--next { right: -14px; }

/* Dokunmatik cihazlarda parmakla kaydırılıyor; oklar yer kaplamasın. */
@media (hover: none), only screen and (max-width: 1023px) {
    .pub-slider-nav { display: none; }
}

/* Büyük ekranda en az 5 kart görünsün. */
@media screen and (min-width: 1216px) { .pub-slider-track { grid-auto-columns: 216px; } }
@media screen and (min-width: 1408px) { .pub-slider-track { grid-auto-columns: 232px; } }
@media screen and (max-width: 767px)  { .pub-slider-track { grid-auto-columns: 62%; gap: .75rem; } }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ { .pub-slider-track { transition: none; } }

/* ---------------------------------------------------------------------------
   Eğitmen kartı — görseli canlandıran degrade ve hover renkleri
   Bulma'nın `a:hover { color: #363636 }` kuralı kart bir bağlantı olduğu için
   içindeki metinleri koyulaştırıyordu; renkler açıkça sabitlenir.
   --------------------------------------------------------------------------- */
.ins-card-tint {
    position: absolute;
    inset: 0;
    /* Fotoğrafları bir arada canlı ve bütün gösteren şeffaf geçiş. */
    background:
        linear-gradient(155deg, rgba(243, 122, 82, .16) 0%, rgba(243, 122, 82, 0) 46%),
        linear-gradient(30deg, rgba(243, 122, 82, .12) 0%, rgba(243, 122, 82, 0) 42%);
    mix-blend-mode: screen;
    opacity: .85;
    transition: opacity .3s ease;
}
.ins-card:hover .ins-card-tint { opacity: 1; }

.ins-card,
.ins-card:hover,
.ins-card:focus,
.ins-card:active { color: inherit !important; }
.ins-card .ins-card-name,
.ins-card:hover .ins-card-name { color: #fff !important; }
.ins-card .ins-card-prefix,
.ins-card:hover .ins-card-prefix { color: rgba(255, 255, 255, .62) !important; }
.ins-card .ins-card-job,
.ins-card:hover .ins-card-job { color: rgba(255, 255, 255, .6) !important; }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ { .ins-card-tint { transition: none; } }

/* ===========================================================================
   Eğitmen detay sayfası
   =========================================================================== */
.ind-hero {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
    padding: 1.5rem 0 2.75rem;
}

/* Fotoğraf kartı — ana sayfadaki kadro kartıyla aynı dil. */
.ind-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: #121515;
    box-shadow: 0 30px 70px -50px rgba(0, 0, 0, .95);
}
.ind-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.02); }
.ind-photo-tint {
    position: absolute; inset: 0;
    background:
        linear-gradient(155deg, rgba(243, 122, 82, .16) 0%, rgba(243, 122, 82, 0) 46%),
        linear-gradient(30deg, rgba(243, 122, 82, .12) 0%, rgba(243, 122, 82, 0) 42%);
    mix-blend-mode: screen;
}
.ind-photo-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 10, .95) 4%, rgba(8, 10, 10, .35) 34%, rgba(8, 10, 10, 0) 62%);
}

.ind-social {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: .9rem;
}
.ind-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(12, 14, 14, .55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #fff !important;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.ind-social-btn svg { width: 17px; height: 17px; fill: currentColor; }
.ind-social-btn svg[fill="none"] { fill: none; }
.ind-social-btn:hover { border-color: rgba(243, 122, 82, .75); background: rgba(243, 122, 82, .18); }
.ind-social-btn:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 2px; }

/* Künye */
.ind-meta { min-width: 0; padding-top: .35rem; }
.ind-name {
    margin: .9rem 0 0;
    color: #fff;
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
}
.ind-prefix {
    display: block;
    color: var(--pu-muted);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: .25rem;
}
.ind-job {
    margin: .6rem 0 0;
    color: #ffbe9c;
    font-size: clamp(.95rem, 1.6vw, 1.1rem);
    font-weight: 600;
    line-height: 1.5;
}

.ind-stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.15rem; }
.ind-stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: var(--pu-muted);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.ind-stat b { color: #fff; font-weight: 800; }
.ind-stat svg { width: 14px; height: 14px; fill: currentColor; }
.ind-stat svg[fill="none"] { fill: none; }
.ind-stat--accent { color: #ffbe9c; border-color: rgba(243, 122, 82, .38); background: var(--pu-accent-soft); }

/* Hakkında */
.ind-about {
    margin-top: 1.6rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1rem;
    border: 1px solid var(--pu-line);
    background:
        radial-gradient(70% 60% at 96% 4%, rgba(243, 122, 82, .10), transparent 68%),
        var(--pu-panel);
}
.ind-about-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .8rem;
    color: var(--pu-text);
    font-size: .95rem;
    font-weight: 700;
}
.ind-about-title svg { width: 16px; height: 16px; }
.ind-about-text {
    color: var(--pu-muted);
    font-size: .95rem;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ind-about-text.is-open { display: block; -webkit-line-clamp: none; overflow: visible; }

/* Eğitim ızgarası */
.ind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 1.25rem;
}
.ind-course {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel);
    color: inherit !important;
    transition: border-color .28s ease, box-shadow .28s ease;
}
.ind-course:hover {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28),
                0 20px 42px -30px rgba(243, 122, 82, .85);
}
.ind-course-media { position: relative; display: block; overflow: hidden; background: #16191a; }
.ind-course-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ind-course-play {
    position: absolute;
    left: 50%; top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
    transition: opacity .3s ease, transform .3s ease;
}
.ind-course-play svg { width: 19px; height: 19px; margin-left: 2px; fill: #fff; }
.ind-course:hover .ind-course-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ind-course-tag {
    position: absolute;
    top: .7rem; right: .7rem;
    padding: .26rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(12, 14, 14, .55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #d3d7d7;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.ind-course-body { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem .95rem 1rem; }
.ind-course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
}
.ind-course-more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    color: var(--pu-dim);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color .25s ease, gap .25s ease;
}
.ind-course-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ind-course:hover .ind-course-more { color: #ffbe9c; gap: .45rem; }

@media screen and (max-width: 860px) {
    .ind-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-bottom: 2rem; }
    .ind-photo { max-width: 260px; }
    .ind-meta { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .ind-course, .ind-course-play, .ind-course-more, .ind-social-btn { transition: none; }
}

/* "Devamını oku" — eğitmen hakkında metni */
.ind-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .7rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffbe9c;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.ind-more[hidden] { display: none; }
.ind-more:hover { color: #ffbe9c; }
.ind-more-icon {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .25s ease;
}
.ind-more.is-open .ind-more-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ { .ind-more-icon { transition: none; } }

/* Akademik kadro listesi ızgarası (/instructor) */
.ins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    padding-bottom: 3rem;
}
@media screen and (max-width: 600px) {
    .ins-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
}

/* Detay sayfasında ad, üstteki sayfa başlığında da geçtiği için künyedeki
   hâli bir tık küçük — tekrar baskın durmasın. */
.ind-name { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
/* Künyenin ilk öğesi çipler olduğunda üstteki boşluk sıfırlanır. */
.ind-stats--first { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Sayfa başlığı — parıltılı varyant
   Başlığın arkasında yumuşak bir turkuaz hale; yapı aynı kalır, yalnızca
   zenginleşir.
   --------------------------------------------------------------------------- */
.pubhead--glow { position: relative; }
.pubhead--glow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12%;
    width: min(620px, 92%);
    height: 190px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(243, 122, 82, .16), transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.pubhead--glow > * { position: relative; z-index: 1; }
.pubhead--glow .pubhead-title {
    background: linear-gradient(180deg, #ffffff 30%, #ffd7c2 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    /* `background-clip: text` alt uzantıları kırpabiliyor; satır kutusu
       biraz genişletilir. */
    padding-bottom: .12em;
}

/* ---------------------------------------------------------------------------
   Kadro listesi kartı — liste sayfasında daha iri tipografi ve "git" oku
   (ana sayfadaki karusel kartları daha küçük kaldığı için ayrı kapsam)
   --------------------------------------------------------------------------- */
.ins-grid .ins-card-meta { padding: 1rem 1.05rem 1.1rem; }
.ins-grid .ins-card-prefix {
    color: #ffbe9c !important;
    font-size: .68rem;
    letter-spacing: .07em;
    margin-bottom: .3rem;
}
.ins-grid .ins-card-name,
.ins-grid .ins-card:hover .ins-card-name {
    font-size: clamp(1.18rem, 1.35vw, 1.42rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.015em;
}
.ins-grid .ins-card-job { margin-top: .32rem; font-size: .8rem; }

/* Tıklanabilirliği anlatan ok — üzerine gelince belirir. */
.ins-card-go {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(12, 14, 14, .55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #fff;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
}
.ins-card-go svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.ins-card:hover .ins-card-go,
.ins-card:focus-visible .ins-card-go {
    opacity: 1;
    transform: translateX(0);
    border-color: rgba(243, 122, 82, .75);
    background: rgba(243, 122, 82, .22);
}

/* İmleç kartın üzerindeyken ok sürekli sağa doğru dürtüyor: kartın
   tıklanabilir olduğunu ve nereye götürdüğünü hareketle söylüyor.

   Animasyon DAİRENİN kendisinde değil İÇİNDEKİ OKTA. İki gerekçe:
   1. Daire, giriş için `transform: translateX(-6px) → 0` geçişini
      kullanıyor; aynı özelliğe bir de sonsuz animasyon bindirilirse
      animasyon geçişi ezer ve daire hover'da yerine hiç oturmaz.
   2. Dairenin tamamı kaymış olsaydı kartın köşesinden dışarı çıkıyor gibi
      görünürdü; hareket eden yalnızca ok olunca "ileri" işareti okunuyor.

   3px'lik yol ve 1,1 sn'lik tur bilinçli: daha uzun bir yol okla dairenin
   kenarı arasındaki boşluğu tüketiyor, daha hızlı bir tur ise dikkat
   çekmekten çok tedirgin ediyor. */
.ins-card:hover .ins-card-go svg,
.ins-card:focus-visible .ins-card-go svg {
    animation: ins-go-durt 1.1s ease-in-out infinite;
}
@keyframes ins-go-durt {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    /* Dürtme kapanıyor; ok yine görünüyor, yalnızca durgun. */
    .certificate-programs:hover .certcard-more svg,
    .certificate-programs:focus-within .certcard-more svg { animation: none; }
    .ins-card-go { transition: opacity .01s linear; transform: none; }
    /* Dürtme kapanıyor: sürekli hareket bu tercihin tam olarak
       engellemek istediği şey. Ok yine görünüyor, yalnızca durgun. */
    .ins-card:hover .ins-card-go svg,
    .ins-card:focus-visible .ins-card-go svg { animation: none; }
}

/* Rayın küçük varyantı — /categories içindeki akademik kadro şeridi. */
/* Rayın kendi alt boşluğu yok: sarmalayan Bulma sütunu zaten .75rem
   dolgu veriyor, üstüne 2.5rem eklenince altındaki başlıkla arada
   göze batan bir boşluk kalıyordu. */
.pub-slider--sm { margin-bottom: 0; }
.pub-slider--sm .pub-slider-track { grid-auto-columns: 176px; gap: .8rem; padding-bottom: 1rem; }
.pub-slider--sm .ins-card-meta { padding: .7rem .75rem .8rem; }
.pub-slider--sm .ins-card-prefix { font-size: .6rem; margin-bottom: .12rem; }
.pub-slider--sm .ins-card-name { font-size: .82rem; }
.pub-slider--sm .ins-card-job { font-size: .66rem; -webkit-line-clamp: 1; }
.pub-slider--sm .ins-card-go { width: 30px; height: 30px; top: .6rem; right: .6rem; }
.pub-slider--sm .ins-card-go svg { width: 14px; height: 14px; }
.pub-slider--sm .pub-slider-nav { width: 38px; height: 38px; }
.pub-slider--sm .pub-slider-nav svg { width: 17px; height: 17px; }
@media screen and (min-width: 1216px) { .pub-slider--sm .pub-slider-track { grid-auto-columns: 168px; } }
@media screen and (max-width: 767px)  { .pub-slider--sm .pub-slider-track { grid-auto-columns: 45%; } }

/* ===========================================================================
   Kategori detay sayfası (/categories/{slug})
   ---------------------------------------------------------------------------
   Masaüstünde sol sütun + kart ızgarası; 1024px altında kategori listesi
   yatay kaydırılan bir şeride dönüşür.
   =========================================================================== */
.catnav-layout {
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}
.catnav {
    position: sticky;
    top: 92px;
    padding: 1rem .75rem 1.1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--pu-line);
    background: rgba(255, 255, 255, .022);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}
.catnav-title {
    display: block;
    padding: 0 .6rem .7rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--pu-line);
    color: var(--pu-dim);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.catnav-list { margin: 0; padding: 0; list-style: none; }
.catnav-list li { margin: 0; }
.catnav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .58rem .6rem;
    border-radius: .7rem;
    color: var(--pu-muted) !important;
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.3;
    transition: background .22s ease, color .22s ease;
}
.catnav-link:hover { background: rgba(255, 255, 255, .05); color: #fff !important; }
.catnav-dot {
    flex: 0 0 auto;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #3a4040;
    transition: background .22s ease, box-shadow .22s ease, width .22s ease, height .22s ease;
}
.catnav-label { min-width: 0; flex: 1 1 auto; }
.catnav-go {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .22s ease;
}
.catnav-link:hover .catnav-go { opacity: .55; }
.catnav-link.is-active {
    background: rgba(243, 122, 82, .1);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(243, 122, 82, .3);
}
.catnav-link.is-active .catnav-dot {
    width: 6px; height: 6px;
    background: var(--pu-accent);
    box-shadow: 0 0 10px rgba(243, 122, 82, .8);
}
.catnav-link.is-active .catnav-go { opacity: .8; }

/* Kart üzerindeki kategori etiketi */
/* Sol üst etiket yığını.
   Şu an tek etiket taşıyor (katılım belgesi); kategori etiketi kaldırıldı —
   kartı kalabalıklaştırıyordu ve kategoriye ders detay sayfasından zaten
   gidilebiliyor. Yığın olarak duruyor ki ileride eklenecek bir etiket yine
   alt alta dizilsin, üst üste binmesin. Sağ üst köşe oynat/ses
   düğmelerine ayrılmış durumda. */
.catcard-etiketler {
    position: absolute;
    top: .6rem; left: .6rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    /* Kartın sağ yarısı boş kalsın: uzun kategori adları görselin ortasına
       kadar uzanmasın. */
    max-width: calc(100% - 5.5rem);
    pointer-events: none;
}
/* Yığın içindeyken konumlandırma sarmalayıcıya ait. */
.catcard-etiketler .catcard-cert {
    position: static;
    max-width: 100%;
}

/* Boş kategori */
.catnav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 3.5rem 1.5rem;
    border-radius: 1.15rem;
    border: 1px dashed var(--pu-line);
    background: rgba(255, 255, 255, .015);
    text-align: center;
}
.catnav-empty svg {
    width: 30px; height: 30px;
    fill: none; stroke: var(--pu-dim);
    stroke-width: 1.8; stroke-linecap: round;
}
.catnav-empty p { margin: 0; color: var(--pu-muted); font-size: .92rem; }
.catnav-empty-link { color: var(--pu-accent) !important; font-size: .85rem; font-weight: 700; }

@media screen and (max-width: 1023px) {
    .catnav-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .catnav {
        position: static;
        padding: .85rem 0 0;
        border: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .catnav-title { padding: 0 0 .55rem; border: 0; }
    /* Şeride dönüşüyor: satır kaydırma, kenarlarda kırpılmadan. */
    .catnav-list {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: .35rem;
    }
    .catnav-list::-webkit-scrollbar { display: none; }
    .catnav-link {
        white-space: nowrap;
        border-radius: 999px;
        border: 1px solid var(--pu-line);
        padding: .45rem .8rem;
    }
    .catnav-go { display: none; }
}

/* ===========================================================================
   Ana sayfa — "Neler Söylediler?" ve "İş Birliklerimiz"
   =========================================================================== */
.pub-quotes { background-color: #0b0c0c; }

.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.quote-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Kartlar aynı boyda bitsin: alıntı esner, künye dibe yapışır. */
    height: 100%;
    margin: 0;
    padding: 1.6rem 1.5rem 1.35rem;
    border-radius: 1.15rem;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel);
    overflow: hidden;
    transition: border-color .28s ease, box-shadow .28s ease;
}
/* Köşe parlaması — sertifika kartlarıyla aynı dil. */
.quote-card::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 122, 82, .16), transparent 65%);
    pointer-events: none;
}
/* Parlama (box-shadow) YOK: kart yüzeyden kalkmış gibi duruyordu.
   Yalnızca kenarlık canlanıyor. */
/* Hover kenarlığı nötr ve saydam. Marka turuncusu (`rgba(243,122,82,.7)`)
   burada fazla iddialıydı: kart tıklanabilir bir eylem değil, bir görüş
   alıntısı — vurgu okuyucuyu içeriğe değil çerçeveye çekiyordu. */
.quote-card:hover { border-color: rgba(79, 78, 78, .74); }

.quote-mark {
    display: inline-flex;
    width: 34px; height: 34px;
    margin-bottom: .85rem;
    color: rgba(243, 122, 82, .75);
}
.quote-mark svg { width: 100%; height: 100%; fill: currentColor; }

.quote-text {
    flex: 1 1 auto;
    margin: 0 0 1.35rem;
    padding: 0;
    border: 0;
    color: var(--pu-muted);
    font-size: .92rem;
    line-height: 1.8;
}

.quote-foot {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--pu-line);
}
.quote-avatar {
    flex: 0 0 auto;
    width: 52px !important; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2b2f2f;
}
.quote-meta { flex: 1 1 auto; min-width: 0; }
.quote-prefix { display: block; color: var(--pu-dim); font-size: .7rem; font-weight: 600; line-height: 1.3; }
.quote-name { display: block; color: #fff; font-size: .95rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.quote-role { display: block; margin-top: .1rem; color: var(--pu-muted); font-size: .76rem; line-height: 1.4; }
/* Kurum logoları beyaz zeminli JPG; koyu panelde ters çevrilerek uyumlanıyor. */
/* Kurum logosu.
   Artık koyu zemin için hazırlanmış SAYDAM sürümler kullanılıyor
   (bauglobal-footer.png, bau-logo-white-horizontal.svg, baugo-footer.png).
   Bu yüzden `grayscale + invert + mix-blend-mode: screen` numarasına gerek
   kalmadı; o numara beyaz/bej zeminli JPG'leri koyu karta oturtmak içindi ve
   logoları griye çeviriyordu.

   Logolar yatay ve farklı en-boy oranlarında; sabit yükseklik + otomatik
   genişlik ile optik olarak dengeleniyor. */
.quote-logo {
    flex: 0 0 auto;
    width: auto !important;
    /* Temel yükseklik ORTAK, marka başına optik katsayıyla ölçekleniyor
       (görünümdeki `--q-k`). `max-width` yükseldi: 150px'te BAU Global
       kırpılıp yüksekliği de düşüyordu, yani katsayı işlemiyordu. */
    height: calc(30px * var(--q-k, 1));
    max-width: 190px;
    object-fit: contain;
    object-position: right center;
    opacity: .92;
    transition: opacity .28s ease;
}
.quote-card:hover .quote-logo { opacity: 1; }

@media screen and (max-width: 767px) {
    .quote-logo { height: calc(26px * var(--q-k, 1)); max-width: 150px; }
}

/* ---------------------------------------------------------------------------
   İş birlikleri şeridi
   --------------------------------------------------------------------------- */
.pub-partners { background-color: #0b0c0c; }

.partner-strip {
    position: relative;
    margin-top: 1.35rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--pu-line);
    border-bottom: 1px solid var(--pu-line);
    background: rgba(255, 255, 255, .015);
    overflow: hidden;
    /* Şerit kenarlarda sertçe kesilmesin. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* Eski kabuk yüksek dolgu ve `min-height:100vh` taşıyordu. */
.partner-strip #logoMarqueeSection { overflow: hidden; }
.partner-strip .default-content-container {
    display: block;
    min-height: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}
.partner-strip .marquee a { padding-right: 3.25rem; vertical-align: middle; }
.partner-strip div.marquee > a > img {
    max-width: 116px;
    max-height: 58px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    filter: grayscale(1) invert(1);
    mix-blend-mode: screen;
    opacity: .45;
    transition: opacity .3s ease;
}
/* Renkli hâline dönmek koyu zeminde parlıyordu; sadece netleşiyor. */
.partner-strip div.marquee > a:hover > img {
    filter: grayscale(1) invert(1);
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .quote-card { padding: 1.3rem 1.15rem 1.1rem; }
    .quote-text { font-size: .88rem; line-height: 1.75; }
    .partner-strip .marquee a.partner-link { margin-right: 2.25rem; }
    .partner-strip div.marquee > a > img { max-width: 92px; max-height: 46px; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .quote-card, .quote-logo, .partner-strip div.marquee > a > img { transition: none; }
    .partner-strip .marquee { animation: none; }
}

/* ===========================================================================
   Ana sayfa — Popüler Eğitimler rayı
   ---------------------------------------------------------------------------
   Geniş kapak kartları. Masaüstünde iki tam kart + üçüncünün yarısı görünür;
   böylece rayın devam ettiği ilk bakışta anlaşılır.
   =========================================================================== */
.pub-popular { background-color: #0b0c0c; }


/* Kart genişliği kaptan pay alır: (100% - 2 boşluk) / 2.5 */
.pub-slider--wide .pub-slider-track {
    grid-auto-columns: calc((100% - 2rem) / 2.5);
    gap: 1rem;
    padding-bottom: .5rem;
}

.popcard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: var(--pu-panel);
    transition: border-color .28s ease, box-shadow .28s ease;
}
/* Gölge kaldırıldı: kart zaten kenarlık aydınlanması, görsel yakınlaşması ve
   oynat düğmesiyle tepki veriyordu; turuncu dış gölge bunun üstüne fazla
   geliyor ve kartı zeminden koparıyordu. */
.popcard:hover,
.popcard:focus-visible {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28);
}

/* Kapak. Görselin kendisi zaten eğitim adını taşıyor; bu yüzden metin
   üstüne bindirilmiyor, künye görselin altında duruyor. */
.popcard-cover { position: relative; display: block; overflow: hidden; background: #16191a; }
.popcard-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.popcard:hover .popcard-img { transform: scale(1.04); }

/* Üzerine gelince görselin üstüne inen perde — bu bölüme özel.
   Üç katman, sırayla (üstten alta doğru boyanır):
     1. Marka yıkaması: köşegen turuncu → pembe, düşük opaklıkta. Kimliği
        taşıyan katman; tek başına metni okunur kılmaz.
     2. Alttan yukarı koyulaşan perde: motto ve künye burada duruyor.
     3. Genel karartma: oynat düğmesinin camlı dokusu ancak yeterince koyu
        bir zeminde okunuyor.
   Eskiden yalnızca `rgba(6,8,8,.45)`lik tek bir alt perde vardı; açık
   görsellerde motto zor okunuyor, marka rengi hiç yoktu. */
.popcard-veil {
    position: absolute;
    inset: 0;
    background:
        /* 1. Marka izi — belli belirsiz. Önceki değerler (.20–.26) görseli
              turuncuya boyuyordu; artık yalnızca karartmanın nötr siyahını
              kırıyor, renk olarak okunmuyor. */
        linear-gradient(126deg,
            rgba(253, 168, 113, .07) 0%,
            rgba(243, 122, 82, .06) 45%,
            rgba(236, 56, 125, .05) 100%),
        /* 2. Karartma — daha koyu. Görsel geri plana çekiliyor, oynat düğmesi
              ve motto öne çıkıyor. */
        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;
}
.popcard:hover .popcard-veil { opacity: 1; }

/* Oynatma göstergesi — eleman yerinden oynamaz, yalnızca belirir. */
.popcard-play {
    position: absolute;
    top: 50%; left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    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;
}
.popcard-play svg { width: 19px; height: 19px; fill: currentColor; margin-left: 2px; }
.popcard:hover .popcard-play,
.popcard:focus-visible .popcard-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Motto — /categories ve "Yeni Eğitimler" kartlarındaki `.catcard-motto`
   ile aynı dil. Görselin altına yaslı; perde (`.popcard-veil`) zaten alttan
   koyulaştığı için metin okunur kalıyor.

   `.popcard-play` görselin TAM ORTASINDA ve akıştan çıkarılmış olduğu için
   motto onu itmiyor; ikisi çakışmıyor. */
.popcard-motto {
    position: absolute;
    /* Dolgu yok: `overflow: hidden` dolgu kutusundan kırptığı için alt dolgu
       üçüncü satıra yer açıyor ve kırpılmış bir satır görünüyordu. Boşluk
       konum ofsetlerinden geliyor. */
    left: .9rem; right: .9rem; bottom: .85rem;
    padding: 0;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
    /* Uzun metinler kapağı taşırmasın. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* line-clamp tek başına yetmiyor: üçüncü satır yine yerleştiriliyor.
       Satır yüksekliği 1.45 → iki satır = 2.9em. */
    max-height: 2.9em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
    pointer-events: none;
}
.popcard:hover .popcard-motto,
.popcard:focus-visible .popcard-motto { opacity: 1; transform: none; }

@media (hover: none) { .popcard-motto { display: none; } }
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .popcard-motto { transition: opacity .01s linear; transform: none; }
}

.popcard-tag {
    position: absolute;
    top: .8rem; left: .8rem;
    padding: .3rem .65rem;
    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: .68rem;
    font-weight: 700;
    line-height: 1.3;
    pointer-events: none;
}

/* Künye */
.popcard-meta {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .55rem;
    padding: .95rem 1.05rem 1.05rem;
}
/* Başlık TEK SATIR. `-webkit-box` + `line-clamp: 1` yerine düz taşma
   kırpması kullanılıyor: tek satırda `text-overflow: ellipsis` daha güvenilir
   ve satır yüksekliği kartlar arasında tam olarak eşit kalıyor. */
.popcard-title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff !important;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.popcard-ins {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    color: var(--pu-muted) !important;
    font-size: .82rem;
    font-weight: 600;
    min-width: 0;
}
.popcard-ins span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Avatar 24 → 34px. Kartın künyesinde neredeyse seçilemiyordu; eğitmen
   ders kartının asıl imzası. Halka rengi ve kalınlığı sertifika kartlarındaki
   `.ins-face` ile aynı, böylece iki bileşen aynı dili konuşuyor. */
.popcard-ins img {
    width: 34px !important; height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(123, 116, 116, .29);
    background: #1b1f1f;
}
/* Künye iki satıra çıktı: üstte ünvan, altta ad soyad. Metin bloğu ayrı bir
   sarmalayıcıya alındı; `.popcard-ins span` kırpma kuralı iki satıra da
   kendiliğinden uygulanıyor.
   `min-height`: ünvanı olmayan derslerde (121 aktif dersin 20'si) satır
   kısalıp kartın taban çizgisini kaydırmasın — künye `margin-top: auto` ile
   dibe yaslı olduğu için fark doğrudan görünüyordu. */
.popcard-ins-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 34px;   /* = avatar çapı */
    line-height: 1.25;
}
.popcard-ins-unvan {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .72;
}
.popcard-ins-ad { font-size: .82rem; font-weight: 600; }

.popcard:hover .popcard-ins { color: var(--pu-text) !important; }

@media screen and (max-width: 1023px) {
    /* Tablette bir tam kart + sonrakinin bir bölümü. */
    .pub-slider--wide .pub-slider-track { grid-auto-columns: calc((100% - 1rem) / 1.6); }
    .popcard-title { font-size: .93rem; }
}
@media screen and (max-width: 600px) {
    .pub-slider--wide .pub-slider-track { grid-auto-columns: 86%; }
    .popcard-meta { padding: .8rem .9rem .9rem; }
    .popcard-play { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .popcard, .popcard-img, .popcard-play { transition: none; }
    .popcard:hover .popcard-img { transform: none; }
}

/* ===========================================================================
   Bölüm zeminleri — /mikro-yeterlilikler sayfasındaki dilin aynısı
   ---------------------------------------------------------------------------
   Düz siyah blokların üst üste binmesi yerine bölümler birbirinden yumuşak
   bir geçişle ayrılıyor:
     .pub-sec        → konumlandırma kabuğu (içerik katmanı üstte kalsın)
     .pub-sec--soft  → üstten aşağı sönümlenen ince aydınlık
     .pub-sec--seam  → bölüm başındaki, uçlarda kaybolan renkli saç teli
     .pub-sec--glow  → köşelerden gelen geniş yumuşak parlamalar
   =========================================================================== */
.pub-sec { position: relative; }
.pub-sec > * { position: relative; z-index: 1; }

.pub-sec--soft {
    background-image: linear-gradient(rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 22%);
}

.pub-sec--seam::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0; right: 0;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 6%,
        rgba(243, 122, 82, .28) 30%,
        rgba(243, 122, 82, .3) 62%,
        transparent 94%);
}

.pub-sec--glow { overflow: hidden; }
.pub-sec--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 340px at 18% -12%, rgba(243, 122, 82, .13), transparent 62%),
        radial-gradient(680px 320px at 84% -6%, rgba(243, 122, 82, .12), transparent 60%);
}
/* Sağdan gelen parlama — sayfanın alt yarısındaki bölümlerde çeşitlilik. */
/* Parlama ortadan. Varsayılan iki köşe (sol üst + sağ üst) yerine tek ve
   geniş bir ışık; iş birlikleri şeridi tam genişlikte olduğu için köşe
   parlamaları şeridin iki ucuyla çakışıp dengesiz duruyordu. */
.pub-sec--glow.pub-sec--glow-c::before {
    background: radial-gradient(900px 380px at 50% -14%, rgba(243, 122, 82, .15), transparent 64%);
}

.pub-sec--glow.pub-sec--glow-r::before {
    background:
        radial-gradient(700px 320px at 82% -10%, rgba(139, 123, 247, .14), transparent 60%),
        radial-gradient(620px 300px at 14% 4%, rgba(243, 122, 82, .1), transparent 58%);
}

@media (prefers-reduced-motion: no-preference) {
    /* Geçişler yalnızca görsel; hareket içermiyor. */
}

/* ===========================================================================
   Ana sayfa kahramanı — paket kartları
   ---------------------------------------------------------------------------
   Video tam ekran oynarken kartlar ekranın altına yaslanır. Tek işaretleme
   her boyutta çalışır; eskiden masaüstü ve mobil için iki ayrı kopya vardı.
   =========================================================================== */
.heroplan-hero { position: relative; }

/* Perde — video her boyutta yazının arkasında kalsın.
   ---------------------------------------------------------------------------
   Eskiden alt uç .92, ORTA ve ÜST uç bile .28-.35'ti: perde kartın koyu
   zeminiyle üst üste binince kahramanın alt yarısında video tamamen
   kayboluyordu. Şimdi perde yalnızca kartların oturduğu alt banda iniyor,
   ortası tamamen açık. Kartın altındaki karartma perdeden değil kartın kendi
   `backdrop-filter: brightness()` süzgecinden geliyor (aşağıya bakınız) —
   böylece video kartın arkasında da akmaya devam ediyor.
   Üstteki ince tabaka menü için: gezinme çubuğunun kendi zemini yok. */
.heroplan-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(6, 8, 8, .58) 0%,
        rgba(6, 8, 8, .34) 14%,
        rgba(6, 8, 8, .08) 34%,
        rgba(6, 8, 8, 0) 52%,
        rgba(6, 8, 8, .06) 74%,
        rgba(6, 8, 8, .35) 100%);
}

.heroplan-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 0 0 2.25rem;
}

.heroplan {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    align-items: stretch;
}

/* Buzlu cam — DOLGU İLE DEĞİL SÜZGEÇLE karartılır.
   ---------------------------------------------------------------------------
   Okunurluk gereken karartmayı eskiden `background: rgba(10,12,12,.58)` yani
   opak bir katman veriyordu; perdeyle toplamı ~%97'ye çıkıyor, kartın ardında
   videodan hiçbir şey kalmıyordu. Aynı kontrast `backdrop-filter`ın
   `brightness()` adımıyla da elde ediliyor: bu, arkadaki görüntüyü KARARTIR
   ama yok etmez — video kartın altında akmaya devam eder. Dolgu yalnızca
   camın kendi tonunu veren ince bir tabaka olarak kaldı.
   Küçük punto (madde listesi .74rem) hareketli zeminde titrek okunduğu için
   metne ayrıca gölge veriliyor (aşağıda `.heroplan-card` metin kuralları). */
.heroplan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    /* Üst dolgu ÜÇ KARTTA DA aynı: "En Popüler" şeridi yalnızca öne çıkan
       kartta var ama akışın dışında durduğu için yer açmıyor. Boşluk burada
       ayrıldığında hem şerit metni ezmiyor hem de üç paket adı aynı hizada
       başlıyor. `--hp-serit` şeridin yüksekliği; ikisi tek yerden beslenir. */
    --hp-serit: 30px;
    padding: calc(var(--hp-serit) + .8rem) 1.15rem 1.15rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 12, 12, .18);
    -webkit-backdrop-filter: blur(16px) saturate(135%) brightness(.38);
    backdrop-filter: blur(16px) saturate(135%) brightness(.38);
    transition: border-color .28s ease, background .28s ease, box-shadow .28s ease,
                -webkit-backdrop-filter .28s ease, backdrop-filter .28s ease;
}
.heroplan-card:hover {
    border-color: rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(16px) saturate(135%) brightness(.30);
    backdrop-filter: blur(16px) saturate(135%) brightness(.30);
}
/* Öne çıkan paket — altın vurgusu korunuyor. */
.heroplan-card.is-featured {
    border-color: rgba(182, 150, 105, .58);
    background:
        linear-gradient(rgba(182, 150, 105, .16), rgba(182, 150, 105, 0) 42%),
        rgba(10, 12, 12, .18);
}

/* Süzgeci olmayan tarayıcı (eski Firefox, `backdrop-filter` kapalı): karartma
   hiç uygulanmaz ve yazı hareketli videonun üstünde okunmaz kalırdı. O durumda
   eski opak dolguya dönülüyor. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .heroplan-card { background: rgba(10, 12, 12, .82); }
    .heroplan-card.is-featured {
        background:
            linear-gradient(rgba(182, 150, 105, .18), rgba(182, 150, 105, 0) 42%),
            rgba(10, 12, 12, .84);
    }
}

/* Metin gölgesi: cam artık daha saydam, altındaki video ise hareketli. Gölge
   olmadan ince punto her karede farklı bir zemine düşüyor ve titriyor. */
.heroplan-card .heroplan-name,
.heroplan-card .heroplan-sub,
.heroplan-card .heroplan-price,
.heroplan-card .heroplan-list li { text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }

/* Kahraman videosu her gün değişiyor (home.php'deki liste) ve bazıları AÇIK
   kareler içeriyor. `brightness(.38)` beyaz bir kareyi ~#3d3d3d'ye indiriyor;
   koyu zemin için seçilmiş `--pu-muted` (#9aa1a1) orada 2.3:1'e düşerdi.
   Kahraman kartında madde metni bir ton açılıyor — koyu videoda da fazla
   parlamıyor, açık videoda okunur kalıyor. */
.heroplan-card .heroplan-list li { color: #cdd2d2; }
.heroplan-card .heroplan-sub { color: #b3b9b9; }
.heroplan-card.is-featured:hover {
    border-color: rgba(182, 150, 105, .9);
    box-shadow: 0 0 0 1px rgba(182, 150, 105, .3),
                0 26px 54px -34px rgba(182, 150, 105, .9);
}

/* Başlık satırı: solda ad + alt başlık, SAĞDA fiyat. Fiyat eskiden kendi
   satırındaydı ve kart ~45px boşuna uzuyordu. `align-items: baseline` fiyatın
   taban çizgisini paket adınınkine oturtuyor (alt başlık altta kalır). */
.heroplan-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: .75rem;
}
.heroplan-id { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
/* "En Popüler" — kartın üst kenarına oturan şerit.
   ---------------------------------------------------------------------------
   Eskiden başlığın üstünde akış içinde bir haptı; yalnızca öne çıkan kartta
   olduğu için o kartın adını ve fiyatını 31px aşağı itiyor, üç kartın hizası
   bozuluyordu. Şimdi mutlak konumlu: hiçbir şeyi itmiyor, yer ise kartın
   ortak üst dolgusundan geliyor.
   Köşeler kartınkinden 1px eksik — mutlak konum çerçevenin İÇİNDEN başlar,
   kartın yarıçapı aynen verilseydi köşelerde kıl payı boşluk kalırdı.
   Zemin altın olduğu için metin KOYU: #b69669 üzerinde beyaz 2.5:1'de
   kalıyordu, şeridin taşıdığı vurguya yetmiyor. */
.heroplan-badge {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--hp-serit, 30px);
    border-radius: calc(1.15rem - 1px) calc(1.15rem - 1px) 0 0;
    background: linear-gradient(90deg, #97794f 0%, #e0c48f 50%, #97794f 100%);
    color: #201803;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1;
}

.heroplan-name {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.heroplan-sub { color: var(--pu-dim); font-size: .74rem; font-weight: 600; }

.heroplan-price {
    justify-self: end;
    color: #dfe4e4;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-align: right;
    white-space: nowrap;
}
.heroplan-card.is-featured .heroplan-price { color: #e2c79c; }

/* `align-content: start` olmadan satırlar boşluğu paylaşıp seyreliyor:
   az maddeli kartta maddeler arası aralık kartla birlikte büyüyordu. */
.heroplan-list {
    flex: 1 1 auto;
    margin: 0; padding: 0;
    list-style: none;
    display: grid;
    align-content: start;
    gap: .3rem;
}
.heroplan-list li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    color: var(--pu-muted);
    font-size: .74rem;
    line-height: 1.5;
}
.heroplan-list svg {
    flex: 0 0 auto;
    width: 13px; height: 13px;
    margin-top: .18rem;
    fill: none; stroke: rgba(243, 122, 82, .9);
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.heroplan-card.is-featured .heroplan-list svg { stroke: #d8b98a; }

.heroplan-foot { display: flex; }
.heroplan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff !important;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    transition: border-color .25s ease, background .25s ease;
}
.heroplan-btn:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }
.heroplan-btn svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.heroplan-btn--primary {
    border-color: rgba(182, 150, 105, .7);
    background: rgba(182, 150, 105, .28);
}
.heroplan-btn--primary:hover { border-color: #b69669; background: rgba(182, 150, 105, .45); }

@media screen and (max-width: 1023px) {
    .heroplan { gap: .6rem; }
    .heroplan-card { --hp-serit: 26px; padding: calc(var(--hp-serit) + .65rem) .9rem 1rem; gap: .55rem; }
    .heroplan-name { font-size: 1.15rem; }
    .heroplan-price { font-size: 1.45rem; }
    .heroplan-list li { font-size: .68rem; }
    .heroplan-body { padding-bottom: 1.5rem; }
}
@media screen and (max-width: 768px) {
    /* main.css bu kırılımda kahramanı 210px'lik bir video şeridine indiriyor;
       kartlar oraya sığmaz. Bu yüzden kartlar mutlak konumdan çıkıp videonun
       hemen altına, akışın içine yerleşiyor — görsel olarak yine kahramanın
       alt bandında duruyor. */
    .heroplan-hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .hero-video-player { position: relative !important; height: 210px; flex: 0 0 auto; }
    .heroplan-veil { bottom: auto; height: 210px; }
    .heroplan-body {
        position: static;
        flex: 0 0 auto;
        padding: .9rem 0 0;
    }

    /* Üç kart yan yana sığmıyor: kaydırılabilir şeride dönüşüyor ve
       kartın bir bölümü görünerek devamı olduğu belli oluyor. */
    .heroplan {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-template-columns: none;
        gap: .6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: .2rem .1rem .4rem;
        margin: 0 -.1rem;
        overscroll-behavior-x: contain;
    }
    .heroplan::-webkit-scrollbar { display: none; }
    .heroplan-card { scroll-snap-align: center; }
    .heroplan-body { padding-bottom: 1.15rem; }
    .heroplan-list li { font-size: .7rem; }
}
@media screen and (max-width: 400px) {
    .heroplan { grid-auto-columns: 86%; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .heroplan-card, .heroplan-btn { transition: none; }
}

/* ===========================================================================
   Öne çıkan program görselleri (Paranın Değeri / TFE)
   =========================================================================== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.75rem;
}
.feature-card {
    position: relative;
    display: block;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--pu-line);
    background: #16191a;
    transition: border-color .28s ease, box-shadow .28s ease;
}
.feature-card:hover,
.feature-card:focus-visible {
    border-color: rgba(243, 122, 82, .7);
    box-shadow: 0 0 0 1px rgba(243, 122, 82, .28),
                0 26px 54px -34px rgba(243, 122, 82, .9);
}
.feature-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1), filter .35s ease;
}
.feature-card:hover .feature-img { transform: scale(1.04); filter: brightness(.42) saturate(.9); }

.feature-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 6, 6, .9), rgba(4, 6, 6, .45) 60%, rgba(4, 6, 6, .15));
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.feature-card:hover .feature-veil { opacity: 1; }

/* Yazılar yalnızca üzerine gelince; görselin kendi tasarımı serbest kalır. */
.feature-body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding: 1.35rem 1.5rem 1.45rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.feature-card:hover .feature-body,
.feature-card:focus-visible .feature-body { opacity: 1; transform: none; }

.feature-tag {
    padding: .22rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #e9eded;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.feature-title {
    color: #fff !important;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    /* Boyut değişimi `transform: scale()` ile DEĞİL `font-size` ile yapılıyor.
       Ölçekleme bileşik bir katman oluşturur ve altındaki
       `background-clip: text` kırpmasını bozar — başlık saydam kalırdı.
       Metin kutunun içinde ve mutlak konumlu olduğu için font büyümesi
       sayfanın geri kalanını etkilemiyor. */
    transition: font-size .32s cubic-bezier(.2, .8, .3, 1);
}
/* Kendi kurumsal rengi olan iki kartta başlık büyüyor ve renk akıyor.
   `@media (hover: hover)`: dokunmatik ekranlarda `:hover` dokunuştan sonra
   takılı kalabiliyor; başlık büyümüş ve degradeye kırpılmış hâlde donardı. */
@media (hover: hover) {
    .feature-card[data-brand]:hover .feature-title,
    .feature-card[data-brand]:focus-visible .feature-title { font-size: 1.45rem; }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) { @media (hover: hover) {
    /* `width: fit-content` ŞART: degrade ELEMANIN kutusuna göre ölçeklenir.
       Başlık esnek sütunun tüm genişliğine yayılsaydı harflere degradenin
       yalnızca ilk parçası düşer, renk akışı görünmezdi. */
    .feature-card[data-brand]:hover .feature-title,
    .feature-card[data-brand]:focus-visible .feature-title {
        width: fit-content;
        max-width: 100%;
        background-size: 220% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent !important;
        -webkit-text-fill-color: transparent;
        /* `alternate`: konum 0%–100% arasında gidip geliyor. Tek yönlü
           olsaydı her turda başa sıçrayıp renk sıçraması yaratırdı. */
        animation: feature-akis 3.2s ease-in-out infinite alternate;
    }
    .feature-card[data-brand="oyd"]:hover .feature-title,
    .feature-card[data-brand="oyd"]:focus-visible .feature-title {
        background-image: linear-gradient(100deg,
            #2bbd84 0%, #6fe0b0 28%, #d8fff0 50%, #6fe0b0 72%, #2bbd84 100%);
    }
    .feature-card[data-brand="tfe"]:hover .feature-title,
    .feature-card[data-brand="tfe"]:focus-visible .feature-title {
        background-image: linear-gradient(100deg,
            #4aa3e8 0%, #86c6f7 28%, #e2f2ff 50%, #86c6f7 72%, #4aa3e8 100%);
    }
} }
@keyframes feature-akis {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}
.feature-desc {
    max-width: 46ch;
    color: var(--pu-muted) !important;
    font-size: .85rem;
    line-height: 1.65;
}
.feature-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .2rem;
    color: var(--pu-accent) !important;
    font-size: .82rem;
    font-weight: 700;
}
.feature-more svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* Sağ üstteki ok — tıklanabilir olduğunu üzerine gelmeden de sezdirir. */
.feature-go {
    position: absolute;
    top: .9rem; right: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .3s ease, border-color .3s ease, background .3s ease;
    pointer-events: none;
}
.feature-go svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.feature-card:hover .feature-go,
.feature-card:focus-visible .feature-go {
    opacity: 1;
    transform: none;
    border-color: rgba(243, 122, 82, .75);
    background: rgba(243, 122, 82, .25);
}

/* Kendi kurumsal rengi olan iki vitrin kartı — /social-impact'teki kart
   kurgusunun aynısı. Halka ve metin için markanın AÇIK tonu kullanılıyor:
   #017548 / #095796 koyu zeminde neredeyse görünmez, ışıma kaybolur.
   Yalnızca alt gölge koyu tondan besleniyor. */
.feature-card[data-brand="oyd"]:hover,
.feature-card[data-brand="oyd"]:focus-visible {
    border-color: rgba(43, 189, 132, .7);
    box-shadow: 0 0 0 1px rgba(43, 189, 132, .28),
                0 26px 54px -34px rgba(1, 117, 72, .95);
}
.feature-card[data-brand="tfe"]:hover,
.feature-card[data-brand="tfe"]:focus-visible {
    border-color: rgba(74, 163, 232, .7);
    box-shadow: 0 0 0 1px rgba(74, 163, 232, .28),
                0 26px 54px -34px rgba(9, 87, 150, .95);
}
/* "Programı İncele" — temel kural `!important` taşıdığı için bunlar da
   taşımak zorunda. Kontrast: 7,6:1 (yeşil) ve 6,7:1 (mavi). */
.feature-card[data-brand="oyd"] .feature-more { color: #2bbd84 !important; }
.feature-card[data-brand="tfe"] .feature-more { color: #4aa3e8 !important; }
/* Sağ üstteki ok da aynı renge dönsün; turuncu kalırsa kart ikiye bölünüyor. */
.feature-card[data-brand="oyd"]:hover .feature-go,
.feature-card[data-brand="oyd"]:focus-visible .feature-go {
    border-color: rgba(43, 189, 132, .75);
    background: rgba(43, 189, 132, .25);
}
.feature-card[data-brand="tfe"]:hover .feature-go,
.feature-card[data-brand="tfe"]:focus-visible .feature-go {
    border-color: rgba(74, 163, 232, .75);
    background: rgba(74, 163, 232, .25);
}

@media screen and (max-width: 767px) {
    .feature-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; margin-bottom: 2rem; }
    /* Dokunmatikte hover yok: yazılar her zaman görünür. */
    .feature-veil, .feature-body { opacity: 1; transform: none; }
    .feature-img { filter: brightness(.45) saturate(.9); }
    /* Gövde mutlak konumda 16/7 görselin (≈150px) üstüne yığılıp etiketlerle
       ve görselin kendi yazılarıyla çakışıyordu. Mobilde normal akışa iner:
       görsel üstte, yazılar altında — etiketler görselin üstünde kalır. */
    .feature-body { position: static; padding: 1rem 1.15rem 1.2rem; }
    .feature-title { font-size: 1.08rem; }
    .feature-go { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .feature-card, .feature-img, .feature-veil, .feature-body, .feature-go { transition: none; }
    .feature-card:hover .feature-img { transform: none; }
    /* Renk akışı durur ama renk kalır: hareketi kapatmak anlamı silmemeli —
       başlık yine kendi kurumsal tonunda görünüyor. */
    .feature-card[data-brand]:hover .feature-title,
    .feature-card[data-brand]:focus-visible .feature-title {
        animation: none;
        background-position: 50% 0;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Ana sayfa bölüm ritmi
   ---------------------------------------------------------------------------
   Bölümler farklı Bulma yardımcılarıyla (pt-0/pt-4/pt-5/mt-6) farklı üst
   boşluklara sahipti. Tek ölçüye çekiliyor.
   --------------------------------------------------------------------------- */
/* Tüm bölümler aynı siyahı kullanır. Daha önce üç ayrı değer vardı:
   #0b0c0c, Bulma'nın `.has-background-black` (#0a0a0a) ve şeffaf. */
.pub-band { padding-top: 3.5rem; padding-bottom: 3.5rem; background-color: #0b0c0c; }
.pub-band .catrow-head { margin-bottom: .85rem; }
/* Alt alta gelen iki bölüm arasında boşluk iki katına çıkmasın. */
.pub-band + .pub-band { padding-top: 3rem; }

@media screen and (max-width: 767px) {
    .pub-band { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .pub-band + .pub-band { padding-top: 2rem; }
}

/* ===========================================================================
   Ana sayfa — "BAUGO Nedir?"
   ---------------------------------------------------------------------------
   Bu bölüm sitenin turkuaz vurgusunu KULLANMAZ. Palet, logodaki ve
   bölümün kendi görselindeki renklerden alınmıştır: ölçülen baskın tonlar
   #f08040 (turuncu) ve #e02080 (pembe).
   =========================================================================== */
.bn {
    position: relative;
    background-color: #0b0c0c;
    overflow: hidden;
    --bn-1: #fda871;   /* açık turuncu */
    --bn-2: #f37a52;   /* ana turuncu  */
    --bn-3: #ec387d;   /* logo pembesi */
}
/* Köşelerden gelen sıcak parlama — bölümü siyah zeminden ayırır. */
.bn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 340px at 20% -12%, rgba(243, 122, 82, .18), transparent 62%),
        radial-gradient(680px 320px at 82% -4%, rgba(236, 56, 125, .14), transparent 60%);
}
.bn > * { position: relative; z-index: 1; }

.bn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 122, 82, .45);
    background: rgba(243, 122, 82, .12);
    color: #ffbe9c;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.bn-eyebrow svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.bn-title {
    margin: 1rem 0 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    /* Degrade metin; desteklenmeyen tarayıcıda düz turuncuya düşer. */
    color: var(--bn-2);
    background-image: linear-gradient(92deg, var(--bn-1) 0%, var(--bn-2) 42%, var(--bn-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bn-lead {
    max-width: 62ch;
    margin: 1rem 0 0;
    color: var(--pu-muted) !important;
    font-size: clamp(.98rem, 1.4vw, 1.12rem);
    line-height: 1.8;
}
.bn-lead strong { color: #fff !important; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Akış şeması — "BAUGO Nedir?" altı adım
   ---------------------------------------------------------------------------
   Çerçeveli panel; degrade halka adımların renk ilerleyişiyle uyumlu
   (turuncudan pembeye, tıpkı rotanın kendisi gibi).
   --------------------------------------------------------------------------- */
.bn-flow {
    width: 100%;
    max-width: 1080px;
    margin: 2.25rem 0 0;
    padding: 1px;
    border-radius: 1.4rem;
    background: linear-gradient(120deg, rgba(253, 168, 113, .5), rgba(236, 56, 125, .35) 55%, rgba(255, 255, 255, .06));
}
/* Yalnızca `<symbol>` taşıyan kap — hiç yer kaplamamalı. */
.bn-flow-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bn-flow-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(1.4rem - 1px);
    background: #101212;
    padding: .5rem 0 0;
}

/* --- Rota ---------------------------------------------------------------
   İki kat: soluk "iz" hep görünür (yolun tamamı baştan bellidir), degradeli
   çizgi ise onun üstüne çizilir. Tek katman olsaydı animasyon başlamadan
   önce alan bomboş görünürdü. */
.bn-flow-track {
    fill: none;
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    stroke-linecap: round;
}
.bn-flow-line {
    fill: none;
    stroke: url(#bnf-yol);
    stroke-width: 3;
    stroke-linecap: round;
    /* Yol uzunluğu JS ile ölçülüp buraya yazılıyor; JS çalışmazsa
       `is-ready` sınıfı hiç eklenmez ve çizgi olduğu gibi görünür. */
    filter: drop-shadow(0 0 6px rgba(243, 122, 82, .35));
}
.bn-flow[data-ready] .bn-flow-line {
    stroke-dasharray: var(--bnf-uzunluk);
    stroke-dashoffset: var(--bnf-uzunluk);
}
.bn-flow[data-ready].is-on .bn-flow-line {
    transition: stroke-dashoffset 3.4s cubic-bezier(.4, 0, .2, 1);
    stroke-dashoffset: 0;
}

/* --- Rotada dolaşan ışık -------------------------------------------------
   Çizim bittikten sonra devreye giriyor: kısa bir parlak parça yolun
   başından sonuna ilerliyor, geçtiği adımı da parlatıyor. Yolculuğun
   sürdüğü hissi bundan geliyor.
   `stroke-dasharray` değerini JS yazıyor: parçanın uzunluğu ile yolun geri
   kalanı toplandığında toplam uzunluğa eşit olmalı, yoksa birden fazla
   parça belirir. */
.bn-flow-spark {
    fill: none;
    stroke: #ffd0ae;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 190, 156, .9));
    pointer-events: none;
}
.bn-flow[data-ready].is-loop .bn-flow-spark {
    opacity: 1;
    stroke-dasharray: var(--bnf-kuyruk);
    animation: bnf-isik var(--bnf-dongu, 5s) linear infinite;
}
@keyframes bnf-isik {
    from { stroke-dashoffset: var(--bnf-uzunluk); }
    to   { stroke-dashoffset: 0; }
}

/* --- Adımlar ------------------------------------------------------------ */
.bn-flow-halo { fill: rgba(243, 122, 82, .1); opacity: 0; }
.bn-flow-disc {
    fill: #14100f;
    stroke: rgba(243, 122, 82, .45);
    stroke-width: 1.5;
}
.bn-flow-icon { overflow: visible; }
/* Adım renkleri DEĞİŞKENDE: hem taban hâli hem de ışık geçerken uygulanan
   vurgu buradan okunuyor. Sabit yazılsaydı, döngü animasyonunun bitişinde
   son adımı (pembe) yanlış renge döndürürdü — animasyon bittiğinde
   `animation-fill-mode` devrede olmasa da ara karelerdeki renk sabitten
   gelirdi. */
/* Vurgu tonları algısal fark (ΔE) ölçülerek seçildi — ikisi de kendi
   TABANINDAN belirgin biçimde uzak olmalı, birbirine benzemesi gerekmiyor:
     ikon  #fda871 → #fff3e6   ΔE 45,8
     yazı  #e9eded → #ffd0ae   ΔE 27,9
   Yazı için ilk denemem beyazdı (#ffffff) ve ΔE yalnızca 6,7 çıkıyordu:
   17px'lik bir metinde, saniyenin üçte birinde, gri-beyazdan beyaza geçiş
   fark edilmiyordu. Yazı artık ışığın kendi rengine (#ffd0ae, `.bn-flow-spark`
   konturu) dönüyor — ışığın üzerinden geçtiği bakışta okunuyor. */
.bn-flow-yer {
    --bnf-ikon: #fda871;
    --bnf-vurgu: #fff3e6;
    --bnf-ad: #e9eded;
    --bnf-ad-vurgu: #ffd0ae;
    --bnf-no: #f37a52;
    --bnf-no-vurgu: #ffd0ae;
}
.bn-flow-yer:last-of-type {
    --bnf-ikon: #f4589a;
    --bnf-vurgu: #ffe4f0;
    --bnf-ad-vurgu: #ffc7e0;
    --bnf-no: #ec387d;
    --bnf-no-vurgu: #ffc7e0;
}

.bn-flow-icon use {
    fill: none;
    stroke: var(--bnf-ikon);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bn-flow-yer:last-of-type .bn-flow-disc { stroke: rgba(236, 56, 125, .5); }

.bn-flow-no-bg { fill: var(--bnf-no); }
.bn-flow-no {
    fill: #1a0b06;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
}
.bn-flow-ad {
    fill: var(--bnf-ad);
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-anchor: middle;
}

/* Adımlar başlangıçta yok; sıraları gelince yerine oturuyor.
   Animasyon İÇ katmanda: dıştaki grup konumu taşıyan `transform` niteliğini
   koruyor, buradaki `transform` özelliği onu ezmiyor. */
.bn-flow[data-ready] .bn-flow-step {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.bn-flow[data-ready].is-on .bn-flow-step {
    animation: bnf-adim .55s cubic-bezier(.2, .8, .3, 1) forwards;
    /* Gecikme, rotanın o noktaya varış anıyla eşleşsin diye JS'ten geliyor. */
    animation-delay: var(--bnf-gecikme, 0s);
}
@keyframes bnf-adim {
    from { opacity: 0; transform: translateY(10px) scale(.82); }
    60%  { transform: translateY(0) scale(1.06); }
    to   { opacity: 1; transform: none; }
}
/* Halkanın nabzı yalnızca adım belirdikten sonra, bir kez. */
.bn-flow[data-ready].is-on .bn-flow-halo {
    animation: bnf-hale 1.1s ease-out forwards;
    animation-delay: var(--bnf-gecikme, 0s);
}
@keyframes bnf-hale {
    0%   { opacity: .9; transform: scale(.6); }
    100% { opacity: 0;  transform: scale(1.15); }
}

/* --- Döngü: ışık adımın üzerinden geçerken o adım parlıyor ---------------
   Gecikme, adımın rota üzerindeki KONUM ORANIYLA hesaplanıyor (JS'ten gelen
   `--bnf-oran`), böylece parlama ışığın geçtiği anla örtüşüyor. Sabit
   gecikmeler kullanılsaydı ikonlar ışıktan bağımsız yanıp sönerdi. */
.bn-flow[data-ready].is-loop .bn-flow-halo {
    animation: bnf-nabiz var(--bnf-dongu, 5s) ease-out infinite;
    animation-delay: calc(var(--bnf-oran, 0) * var(--bnf-dongu, 5s));
}
@keyframes bnf-nabiz {
    0%   { opacity: 0;   transform: scale(.72); }
    6%   { opacity: .85; transform: scale(.72); }
    18%  { opacity: 0;   transform: scale(1.18); }
    100% { opacity: 0;   transform: scale(1.18); }
}
/* Işık geçerken halkanın kendisi de bir an için canlanıyor. */
.bn-flow[data-ready].is-loop .bn-flow-disc {
    animation: bnf-nabiz-disk var(--bnf-dongu, 5s) ease-out infinite;
    animation-delay: calc(var(--bnf-oran, 0) * var(--bnf-dongu, 5s));
}
@keyframes bnf-nabiz-disk {
    0%, 100% { stroke: rgba(243, 122, 82, .45); }
    7%       { stroke: rgba(255, 208, 174, .95); }
    22%      { stroke: rgba(243, 122, 82, .45); }
}

/* Işık adımın üzerinden geçerken İKON ve BAŞLIK birlikte parlıyor, sonra
   kendi rengine dönüyor. Aynı gecikme değişkenini kullandıkları için üçü
   (hale, ikon, yazı) tek bir olay gibi okunuyor.
   Zamanlama `bnf-nabiz` ile birebir aynı: 0 → %7 tepe → %22 sönme. Ayrı
   yüzdeler verilseydi yazı ile ikon arasında görünür bir gecikme olurdu. */
.bn-flow[data-ready].is-loop .bn-flow-icon use {
    animation: bnf-nabiz-ikon var(--bnf-dongu, 5s) ease-out infinite;
    animation-delay: calc(var(--bnf-oran, 0) * var(--bnf-dongu, 5s));
}
@keyframes bnf-nabiz-ikon {
    0%       { stroke: var(--bnf-ikon); }
    7%, 11%  { stroke: var(--bnf-vurgu); }
    26%      { stroke: var(--bnf-ikon); }
    100%     { stroke: var(--bnf-ikon); }
}

.bn-flow[data-ready].is-loop .bn-flow-ad {
    animation: bnf-nabiz-ad var(--bnf-dongu, 5s) ease-out infinite;
    animation-delay: calc(var(--bnf-oran, 0) * var(--bnf-dongu, 5s));
}

/* Sıra rakamının rozeti de aynı anda aydınlanıyor. Yalnızca ZEMİN
   değişiyor, rakamın kendisi koyu kalıyor: taban zeminde kontrast 7,05:1,
   vurgu zemininde 13,6:1 — yani parladığında rakam daha da okunur oluyor,
   tersi olsaydı vurgu bilgiyi bozardı. */
.bn-flow[data-ready].is-loop .bn-flow-no-bg {
    animation: bnf-nabiz-no var(--bnf-dongu, 5s) ease-out infinite;
    animation-delay: calc(var(--bnf-oran, 0) * var(--bnf-dongu, 5s));
}
@keyframes bnf-nabiz-no {
    0%       { fill: var(--bnf-no); }
    7%, 11%  { fill: var(--bnf-no-vurgu); }
    26%      { fill: var(--bnf-no); }
    100%     { fill: var(--bnf-no); }
}
@keyframes bnf-nabiz-ad {
    0%       { fill: var(--bnf-ad); }
    /* Tepede kısa bir bekleme (%7→%11): 5 saniyelik döngüde %4 = 0,2 saniye.
       Anlık bir tepe noktası göz tarafından yakalanamıyordu. */
    7%, 11%  { fill: var(--bnf-ad-vurgu); }
    26%      { fill: var(--bnf-ad); }
    100%     { fill: var(--bnf-ad); }
}

/* --- Mobil: dikey liste -------------------------------------------------
   Yatay rota dar ekranda okunmuyor. Adımlar dikey bir çizgiye diziliyor ve
   masaüstünde yer olmadığı için gizlenen açıklamalar burada görünür oluyor. */
.bn-flow-list { display: none; }

@media screen and (max-width: 860px) {
    .bn-flow-svg--wide { display: none; }
    .bn-flow-list {
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
        margin: 0;
        padding: 1.5rem 1.25rem;
        border-radius: calc(1.4rem - 1px);
        background: #101212;
        list-style: none;
        counter-reset: bnf;
    }
    .bn-flow-item {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: .9rem;
        padding-left: .25rem;
    }
    /* Adımları birbirine bağlayan dikey iz — mobildeki "rota". */
    .bn-flow-item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 22px;
        top: 46px;
        bottom: -1.15rem;
        width: 2px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(243, 122, 82, .5), rgba(243, 122, 82, .12));
    }
    .bn-flow-item-mark {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 1.5px solid rgba(243, 122, 82, .45);
        background: #14100f;
    }
    .bn-flow-item-mark svg {
        width: 24px; height: 24px;
        fill: none; stroke: #fda871;
        stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    }
    /* Sıra numarası: sayaçla üretiliyor, işaretlemede tekrar edilmiyor. */
    .bn-flow-item-mark::after {
        counter-increment: bnf;
        content: counter(bnf);
        position: absolute;
        right: -4px; top: -4px;
        width: 19px; height: 19px;
        border-radius: 50%;
        background: #f37a52;
        color: #1a0b06;
        font-size: .68rem;
        font-weight: 800;
        line-height: 19px;
        text-align: center;
    }
    .bn-flow-item:last-child .bn-flow-item-mark { border-color: rgba(236, 56, 125, .5); }
    .bn-flow-item:last-child .bn-flow-item-mark svg { stroke: #f4589a; }
    .bn-flow-item:last-child .bn-flow-item-mark::after { background: #ec387d; }

    .bn-flow-item-text { display: flex; flex-direction: column; gap: .15rem; padding-top: .3rem; }
    .bn-flow-item-text strong { color: #fff !important; font-size: .95rem; font-weight: 700; }
    .bn-flow-item-text small { color: var(--pu-muted); font-size: .8rem; line-height: 1.5; }

    /* Girişte sırayla beliriyor. */
    .bn-flow[data-ready] .bn-flow-item { opacity: 0; transform: translateX(-10px); }
    .bn-flow[data-ready].is-on .bn-flow-item {
        animation: bnf-satir .5s cubic-bezier(.2, .8, .3, 1) forwards;
        animation-delay: var(--bnf-gecikme, 0s);
    }
    @keyframes bnf-satir {
        to { opacity: 1; transform: none; }
    }
}

/* Hareket azaltma tercihi: her şey anında ve yerinde. */
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .bn-flow[data-ready] .bn-flow-step,
    .bn-flow[data-ready] .bn-flow-item { opacity: 1; transform: none; animation: none; }
    .bn-flow[data-ready] .bn-flow-line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
    .bn-flow[data-ready] .bn-flow-halo,
    .bn-flow[data-ready] .bn-flow-disc,
    .bn-flow[data-ready] .bn-flow-icon use,
    .bn-flow[data-ready] .bn-flow-ad,
    .bn-flow[data-ready] .bn-flow-no-bg { animation: none; }
    .bn-flow[data-ready] .bn-flow-halo { opacity: 0; }
    .bn-flow[data-ready] .bn-flow-spark { display: none; }
}

.bn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.bn .bn-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 48px;
    padding: 0 1.6rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(243, 122, 82, .6) !important;
    background: linear-gradient(92deg, rgba(253, 168, 113, .28), rgba(236, 56, 125, .28));
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1;
    box-shadow: none !important;
    transition: border-color .25s ease, background .25s ease;
}
.bn .bn-btn:hover {
    border-color: rgba(253, 168, 113, .95) !important;
    background: linear-gradient(92deg, rgba(253, 168, 113, .45), rgba(236, 56, 125, .45));
}
.bn .bn-btn svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.bn-cta-note { color: var(--pu-dim); font-size: .82rem; }

@media screen and (max-width: 767px) {
    .bn-flow { margin-top: 1.5rem; border-radius: 1.15rem; }
    .bn-flow-list { border-radius: calc(1.15rem - 1px); }
    .bn-cta { margin-top: 1.5rem; }
    .bn .bn-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .bn .bn-btn { transition: none; }
}

/* ===========================================================================
   Yapışkan yan sütunlar
   ---------------------------------------------------------------------------
   main.css `body { overflow-x: hidden }` veriyor. Bu, body'yi kendi kaydırma
   kabına çevirdiği için içindeki `position: sticky` öğeler görüntü alanına
   değil body'ye göre konumlanıyor ve hiç yapışmıyordu (kategori yan menüsü,
   sepet özeti, hesap menüsü, kurumsal sayfadaki görsel).
   Yatay kırpma zaten `html { overflow-x: hidden }` ile sağlandığı için
   body'deki kopyayı bu sayfalarda kaldırmak güvenli.
   =========================================================================== */
body:has(.catnav),
body:has(.acc-nav),
body:has(.bsk-side),
body:has(.crp-split-media) {
    overflow-x: visible;
}

/* ===========================================================================
   Akademik kadro — kendiliğinden kayan şerit (marquee)
   ---------------------------------------------------------------------------
   Sitedeki eski şerit (.marquee, custom.css) `left` özelliğini canlandırıyor.
   `left` her karede YERLEŞİM hesabı tetikler; tarayıcı ana iş parçacığında
   sayfayı yeniden dizerken kareler düşer ve şerit titrer. Buradaki şerit
   yalnızca `transform` canlandırıyor: transform derleyici (compositor)
   üzerinde çalışır, yerleşimi hiç yeniden hesaplatmaz.

   Kesintisiz döngü: kart kümesi iki kez basılıyor, şerit tam bir küme boyu
   (%50) kayıyor. Döngü başa döndüğünde ekrandaki görüntü birebir aynı
   olduğu için dikiş yeri görünmüyor.
   =========================================================================== */

.ins-marquee {
    position: relative;
    overflow: hidden;
    padding: .35rem 0 1.25rem;
    /* Kartlar kenarlarda sertçe kesilmesin, silinerek bitsin. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ins-marquee__track {
    display: flex;
    /* max-content: şerit içeriği kadar genişler; yüzde tabanlı kaydırmanın
       doğru çalışması için gerekli. */
    width: max-content;
    animation: ins-marquee-scroll var(--ins-marquee-duration, 60s) linear infinite;

    /*
     * Kendi derleyici katmanına alınıyor. Bu olmadan tarayıcı şeridi her
     * karede yeniden boyayabiliyor ve özellikle görsel ağırlıklı kartlarda
     * gözle görülür bir titreme oluşuyor.
     */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes ins-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    /* Tam olarak BİR küme kadar: iki küme eşit genişlikte olduğu için %50. */
    to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * Üzerine gelince dursun. :focus-within de dahil — klavyeyle kartlar
 * arasında gezinirken odaklanılan kart kayıp gitmesin.
 */
/* --- Yalnızca /categories rayındaki kart yazıları -------------------------
   Kapsam `.ins-marquee` ile sınırlı: bu sarmalayıcı YALNIZCA
   categories_none.php'de kullanılıyor, dolayısıyla anasayfa, /instructor,
   /search ve sertifika detay sayfalarındaki `.ins-card`'lar etkilenmiyor.

   Ray kartları diğer sayfalardakinden dar (176px). O genişlikte sola
   yaslanmış üç satır kartın soluna yığılıp sağda boşluk bırakıyordu;
   ortalanınca kart dengeye oturuyor. Puntolar da bir kademe küçültüldü —
   dar kartta aynı boy metni satır sonlarına dayıyordu. */
.ins-marquee .ins-card-meta { text-align: center; padding: .7rem .6rem .8rem; }
.ins-marquee .ins-card-prefix { font-size: .6rem; margin-bottom: .14rem; }
.ins-marquee .ins-card-name { font-size: .84rem; line-height: 1.2; }
.ins-marquee .ins-card-job { font-size: .66rem; line-height: 1.25; margin-top: .16rem; }

.ins-marquee:hover .ins-marquee__track,
.ins-marquee:focus-within .ins-marquee__track {
    animation-play-state: paused;
}

.ins-marquee__group {
    display: flex;
    gap: .875rem;
    /* Kümenin sonundaki boşluk küme genişliğine DAHİL olmalı; aksi hâlde
       iki küme arası aralık eksik kalır ve döngü başa dönerken kartlar
       birbirine yapışmış görünür. */
    padding-right: .875rem;
}

/* Kart ölçüsü: 1344px'lik şeritte aynı anda ~8 eğitmen görünsün diye
   (8 × 156 + 7 × 14 ≈ 1346). Önceden 232px ile 5,4 kart görünüyordu.
   Sabit genişlik + aspect-ratio ŞART: görseller yüklenmeden önce de kart
   ölçüsü belli olmalı, yoksa şerit boyu değişir ve kaydırma sıçrar. */
.ins-marquee .ins-card {
    flex: 0 0 168px;
    width: 168px;
}

@media screen and (min-width: 1216px) { .ins-marquee .ins-card { flex-basis: 150px; width: 150px; } }
@media screen and (min-width: 1408px) { .ins-marquee .ins-card { flex-basis: 156px; width: 156px; } }

/* Kart daraldığı için künye de bir tık küçülüyor; aksi hâlde uzun
   unvanlar iki satırı aşıp kırpılıyordu. */
.ins-marquee .ins-card-meta { padding: .6rem .65rem .7rem; }
.ins-marquee .ins-card-prefix { font-size: .58rem; letter-spacing: .03em; }
.ins-marquee .ins-card-name { font-size: .8rem; line-height: 1.2; }
.ins-marquee .ins-card-job { font-size: .68rem; margin-top: .15rem; }
/* Ray kartlarında daire 36 → 26px'e küçültülmüş ama ok 17px'te kalmıştı:
   oran 0,65 çıkıyor ve ikon dairesini dolduruyordu (tipik ikon/daire oranı
   0,38–0,42). Ok 11px'e iniyor → oran 0,42. Kontur da 2,4 → 2,1: küçülen
   ikonda aynı kalınlık çizgileri birbirine yapıştırıyordu.
   Kapsam `.ins-marquee` ile sınırlı; bu sarmalayıcı yalnızca
   categories_none.php'de kullanılıyor, diğer sayfalardaki `.ins-card-go`
   36px/17px olarak kalıyor. */
.ins-marquee .ins-card-go { width: 26px; height: 26px; }
.ins-marquee .ins-card-go svg { width: 11px; height: 11px; stroke-width: 2.1; }

/* ---------------------------------------------------------------------------
   /categories — dikey boşluk ölçeği (`.cat-ritim`)
   ---------------------------------------------------------------------------
   Ölçüm sonucu üç aralık üç farklı değerdeydi ve ilişkili öğeler ayrışmıyordu:
     "Akademik Kadro" başlığı → eğitmen kartları : 19px
     eğitmen kartları → "Eğitimler" başlığı      : 52px
     "Eğitimler" başlığı → eğitim kartları       : 25px
   Yani iki başlığın altındaki boşluk birbirinden farklı, bölüm arası ise
   bunun yalnızca ~2 katıydı.

   YENİ ÖLÇEK — 16px tabanlı:
     başlık → içerik : 16px  (1×)   ilişkili öğeler yakın
     bölüm  → bölüm  : 48px  (3×)   ayrı konular ayrışıyor

   Bölüm arası önce 4× (64px) denendi; iki bölüm gereğinden fazla kopuyordu.
   3× hem ayrımı koruyor hem sayfayı toparlıyor — başlık altındaki 16px'in
   tam katı olduğu için ölçek bozulmuyor.

   Değerler tek yerde, `--cat-yakin` / `--cat-uzak` ile tanımlı.

   BULMA SÜTUN DOLGUSU: `.column` dikeyde 12px (.75rem) dolgu basıyor ve bu
   dolgu ölçüye sessizce ekleniyordu. Tam sütunlarda (başlık/ray blokları)
   sıfırlanıp boşluk açıkça yazılıyor; kart ızgarasının 12px'lik oluğuna
   dokunulmuyor — orası kartlar arası ritmi kuruyor. Kartların üstündeki
   oluk yine de sayılmak zorunda: bu yüzden başlığın alt boşluğu o bölümde
   `calc(var(--cat-yakin) - .75rem)`.
   --------------------------------------------------------------------------- */
.cat-ritim {
    --cat-yakin: 16px;
    --cat-uzak: 48px;
}
/* Yalnızca tam genişlikteki sarmalayıcı sütunlar; kart sütunları hariç. */
.cat-ritim > .column.is-12 { padding-top: 0; padding-bottom: 0; }

.cat-ritim .catrow-head { margin: 0 0 var(--cat-yakin); }

/* Ray kendi dolgusuyla ölçüyü bozuyordu (üstte 5,6px, altta 20px). */
.cat-ritim .ins-marquee { padding-top: 0; padding-bottom: 0; }

/* Akademik kadro bölümü ile sonraki bölüm arası. */
.cat-ritim > .column.is-12:first-child { margin-bottom: var(--cat-uzak); }

/* Eğitim listesinin başlığı: altındaki kart sütunu 12px oluk getiriyor,
   toplam yine 16px kalsın diye o kadarı düşülüyor. */
.cat-ritim .catrow-head--list { margin-bottom: calc(var(--cat-yakin) - .75rem); }

@media screen and (max-width: 767px) {
    /* Dar ekranda bir tık daha yakın; oran 2,5× kalıyor. */
    .cat-ritim { --cat-uzak: 40px; }
}

/* ---------------------------------------------------------------------------
   Eğitim kartının alt bloğu — iki kat (yalnızca /categories)
   ---------------------------------------------------------------------------
   Eskiden tek satırdı: solda eğitmen + ALTINDA eğitim başlığı, sağda sepet.
   Başlığa 202px kalıyordu ve uzun adların çoğu iki satıra taşıyordu.
   Şimdi 1. kat eğitmen ile sepeti karşı karşıya koyuyor, başlık 2. katta
   400px'in tamamını kullanıyor.

   Kapsam `.catlist-card`: bu sınıf yalnızca categories_none.php'de var.
   --------------------------------------------------------------------------- */
.catlist-card .catcard-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
    /* Sağdaki içerik üç boyda geliyor: sepet düğmesi 36px, "Sadece sertifika
       programlarında" etiketi 43px, indirimli fiyat gösteren düğme 57px.
       Satır boyu bunlardan büyüğüne sabitlenmezse kart yükseklikleri ızgarada
       birbirinden ayrılıyordu (355 / 358 / 371 ölçüldü). */
    min-height: 57px;
}
/* Sepet/bilgi sütunu satırın sonunda; Bulma'nın float'ı esnek kutuda zaten
   yok sayılıyor, genişliği de içeriği kadar kalsın. */
.catlist-card .catcard-foot-row > .is-pulled-right {
    flex: 0 0 auto;
    float: none !important;
}
.catlist-card .catcard-foot-row > .left { min-width: 0; }

/* Sepet ikonu — eski ikon 20×20 kutuda DOLGU (fill) ile çizilmiş, gövdesi
   kalın, tekerlekleri iri, sol alt köşesi kırpık bir simgeydi; sayfadaki
   diğer bütün ikonlar ise 24×24 kutuda İNCE KONTURLU (`fill:none` + stroke).
   Yeni ikon o dile geçiyor: aynı kutu, aynı kalınlık (1,8), aynı yuvarlak
   uçlar. Renk `currentColor`, yani düğmenin metin rengini izliyor —
   "Sepete Ekle" (anahat) ve "Sepete Git" (dolu yeşil) düğmelerinde ayrı ayrı
   renk tanımlamaya gerek kalmıyor. */
.catcard-cart-ico {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Bulma'nın `.icon` sarmalayıcısı 24px'lik sabit bir kare; ikon 17px olunca
   içinde ortalanması için. */
.catlist-card .button .icon { display: inline-flex; align-items: center; justify-content: center; }

/* Eğitmen künyesi: unvan üstte, ad soyad altta.
   `.meta > span` boyutları main.css'ten geliyordu (`:first-child .8rem`,
   `:nth-child(2) .9rem, max-width:170px`) — ikinci satır artık ad soyad
   olduğu için o 170px sınırı adları kırpardı; burada açıkça yazılıyor. */
.catlist-card .catcard-ins-unvan,
.catlist-card .catcard-ins-ad {
    display: block;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.catlist-card .catcard-ins-unvan {
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.catlist-card .catcard-ins-ad {
    font-size: .84rem !important;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}

/* Başlık — tam genişlik, tek satır. Kartların alt kenarı hizada kalsın diye
   sabit tek satır; taşan adlar üç noktayla kesiliyor ve `title` özniteliğiyle
   okunabiliyor. Kart zaten dersin sayfasına bağlantı. */
.catlist-card .catcard-course-title {
    display: block;
    margin-top: .65rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .25s ease;
}
.catlist-card:hover .catcard-course-title { color: #fff; }

/* Ad ile meslek arasındaki ayraç. Profil açılır menüsündeki
   `.drop-menu-inner hr` ile birebir aynı dil: 1px, iki ucu şeffaflığa sönen
   yatay hat. Oradaki %20/%80 durakları burada %15/%85 — kart o menüden çok
   daha dar (≈150px), aynı duraklarda sönme payı 30px'e düşüp çizgi düz bir
   çubuk gibi duruyordu.
   Genişlik %58 ve ortalı: kenarlara dayanan bir hat kartı ikiye böler,
   künyeyi bir arada tutmak istiyoruz. Kart üzerindeki kaplama koyulaştığı
   için hover'da opaklık biraz artıyor. */
.ins-marquee .ins-card-sep {
    display: block;
    width: 58%;
    height: 1px;
    margin: .3rem auto .28rem;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .3) 15%,
        rgba(255, 255, 255, .3) 85%,
        transparent);
    transition: opacity .3s;
    opacity: .85;
}
.ins-marquee .ins-card:hover .ins-card-sep { opacity: 1; }

/* Meslek üst boşluğu ayraca devredildi; iki değer üst üste binerse
   başlıkla meslek arası açılıp künye dengesiz duruyordu. */
.ins-marquee .ins-card-job { margin-top: 0; }

@media screen and (max-width: 767px) {
    .ins-marquee__group { gap: .7rem; padding-right: .7rem; }
    .ins-marquee .ins-card { flex-basis: 44vw; width: 44vw; }
}

/*
 * Hareket azaltma tercihi: şerit durur ve elle kaydırılabilir hâle gelir.
 * İkinci kopya gizlenir, yoksa liste iki kez görünürdü.
 */
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .ins-marquee {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ins-marquee::-webkit-scrollbar { display: none; }
    .ins-marquee__track { animation: none; width: auto; }
    .ins-marquee__group[aria-hidden="true"] { display: none; }
}

/* ===========================================================================
   Katalog kartı — üzerine gelince beliren katman
   ---------------------------------------------------------------------------
   Görselin üstünde camlı bir oynat düğmesi ve altta dersin mottosu
   (`course.audience`). Katman yalnızca görselin içinde; kartın künye
   bölümünü örtmüyor.
   =========================================================================== */

.catlist-card .card-image { position: relative; overflow: hidden; }

.catcard-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Motto dibe yaslanır; oynat düğmesi akıştan çıkarıldığı için buradaki
       hizalama yalnızca motto'yu ilgilendiriyor. */
    justify-content: flex-end;
    padding: 1rem 1.1rem 1.15rem;
    pointer-events: none;
    /* DİKKAT: bu katmanın opacity'si ASLA 1'den küçük olmamalı.
       Opaklığı 1'in altındaki bir ata öğe "backdrop root" yaratır ve içindeki
       backdrop-filter arkasındaki görseli örnekleyemez. Katmanı fade ederken
       buzlanma tüm geçiş boyunca kapalı kalıyor, opaklık tam 1'e vardığında
       aniden beliriyordu — "buz sonradan yükleniyor" görüntüsü buydu.
       Bu yüzden perde ::before'a taşındı, çocuklar tek tek fade ediliyor. */
}

/* Alttan yukarı koyulaşan perde: motto okunur kalsın, görselin üst kısmı
   fazla kararmasın. */
.catcard-hover::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Yukarıdan aşağı koyulaşıyor: üst kısım videoyu göstersin, motto'nun
       durduğu alt bant neredeyse siyah olsun. Video eklendikten sonra eski
       degrade (.35 → .88) motto'yu hareketli görüntü üzerinde okunmaz
       bırakıyordu; alt uç .98'e, orta durak da aşağı kaydırıldı. */
    background: linear-gradient(180deg,
        rgba(8, 9, 9, .18) 0%,
        rgba(8, 9, 9, .34) 38%,
        rgba(8, 9, 9, .78) 72%,
        rgba(8, 9, 9, .96) 100%);
    opacity: 0;
    transition: opacity .28s ease;
}
.catlist-card:hover .catcard-hover::before,
.catlist-card:focus-within .catcard-hover::before { opacity: 1; }

/* ---------------------------------------------------------------------------
   Kart üzerinde video, oynat ve sessizlik düğmeleri
   ---------------------------------------------------------------------------
   `.catcard-tools` bağlantının DIŞINDA duran, görsel alanını kaplayan bir
   katman. İçindeki iki düğmenin DİNLENME YERİ sağ üst köşe; oynat simgesi
   video yokken oradan görselin ortasına ötelenir. Öteleme `transform` ile
   yapılıyor (yerleşimi değiştirmez, akıcı animasyon verir) ve mesafe JS'te
   ölçülüp `--catv-x` / `--catv-y` olarak yazılıyor — kart genişliği kırılma
   noktasına göre değiştiği için sabit bir sayı yazılamazdı.
   --------------------------------------------------------------------------- */
.catcard-tools {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 4;                 /* perde ve motto'nun üstünde */
    display: flex;
    align-items: center;
    gap: .4rem;
    pointer-events: none;       /* yalnızca gerçek düğme tıklanabilir */
}

/* İki düğme de aynı camlı dairenin türevi.
   DİKKAT: yalnızca `.catcard-tools` içindekiler. Ana sayfadaki "Yeni
   Eğitimler" kartları da `.catcard-play` kullanıyor ama orada araç katmanı
   yok; o varyantın kuralları aşağıda ayrıca duruyor. */
.catcard-tools .catcard-play,
.catcard-tools .catcard-mute,
.catcard-tools .catcard-buyut {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    color: #fff;
    /* Kendi opaklığı sorun değil — backdrop-filter önce uygulanır, opaklık
       sonuca sonradan çarpılır. Kısıtlama yalnızca ATA öğeler için geçerli. */
    opacity: 0;
    transition: opacity .28s ease,
                transform .42s cubic-bezier(.2, .8, .3, 1),
                background-color .2s ease,
                border-color .2s ease;
}

/* Oynat: video oynamıyorken görselin ortasında ve 1,5 kat büyük.
   Ölçek ve öteleme tek `transform`ta; ikisi ayrı yazılamaz. */
.catcard-tools .catcard-play {
    position: relative;   /* yükleme halkası buna göre konumlanıyor */
    transform: translate(var(--catv-x, 0px), var(--catv-y, 0px)) scale(1.5);
}
.catcard-tools .catcard-play svg { width: 15px; height: 15px; fill: currentColor; margin-left: 1px; }

/* ---------------------------------------------------------------------------
   Yükleme halkası
   ---------------------------------------------------------------------------
   Video ilk kez çekilirken düğmenin KENDİ KENARI bir yükleme göstergesine
   dönüşüyor: dairenin çevresinde tek bir yay dönüyor, video oynamaya
   başlayınca halka sönüyor ve düğme köşedeki yerine süzülüyor.

   Ayrı bir katman (`::after`) kullanılıyor, `border-top-color` doğrudan
   düğmeye verilmiyor: düğmenin kendi kenarı görünür kalmalı ki daire
   yükleme sırasında yarım görünmesin. Halka 1px dışarıda duruyor, böylece
   kenarın üstüne binip onu kalınlaştırmıyor.

   Kalınlık 1,6px: düğme yükleme sırasında `scale(1.5)` ile duruyor, yani
   ekranda ~2,4px'e karşılık geliyor — kenarın (1px → 1,5px) belirgin ama
   abartısız bir tık üstü.

   Dönüş `transform`la yapılıyor ama düğmenin kendi `transform`u ayrı bir
   öğede olduğu için ikisi çakışmıyor: ana öğe ortadan köşeye süzülürken
   halka kendi ekseninde dönmeyi sürdürebiliyor. */
.catcard-tools .catcard-play::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.6px solid transparent;
    /* Yay tam beyazken (.92) düğmenin camlı yüzeyinden fazla ayrışıyor ve
       gözü kendine çekiyordu; bu bir bekleme işareti, ana aktör değil.
       .62 hâlâ koyu kapak görsellerinde rahat seçiliyor ama daha sakin. */
    border-top-color: rgba(255, 255, 255, .62);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.catlist-card.is-catv-loading .catcard-tools .catcard-play::after,
[data-catcard].is-catv-loading .catcard-tools .catcard-play::after {
    opacity: 1;
    animation: catv-halka .8s linear infinite;
}
/* Yükleme sürerken düğmenin kendi kenarı geri çekiliyor; sahneyi dönen yay
   taşısın, iki daire birbiriyle yarışmasın. */
.catlist-card.is-catv-loading .catcard-tools .catcard-play,
[data-catcard].is-catv-loading .catcard-tools .catcard-play {
    border-color: rgba(255, 255, 255, .16);
}
@keyframes catv-halka { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Oynat düğmesinin ana sayfa varyantı (`.catcard-hover` içinde)
   ---------------------------------------------------------------------------
   Ana sayfadaki kartlarda video önizlemesi yok; düğme görselin ortasında
   sabit duruyor. Bu kural /categories'ten önce de vardı ve aynen korunuyor —
   yeni araç katmanı yalnızca `.catcard-tools` altında geçerli. */
.catcard-hover .catcard-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px; height: 54px;
    /* Camlı görünüm — araç katmanındaki kardeşiyle aynı. */
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
.trip-card:hover .catcard-hover .catcard-play,
.trip-card:focus-within .catcard-hover .catcard-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.catcard-hover .catcard-play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }

/* Video oynarken oynat simgesi köşedeki yerine süzülüp küçülüyor. */
.catlist-card.is-catv-playing .catcard-tools .catcard-play,
[data-catcard].is-catv-playing .catcard-tools .catcard-play { transform: none; }

.catcard-mute,
.catcard-buyut {
    pointer-events: auto;
    cursor: pointer;
    /* Köşeye doğru küçük bir kayma ile beliriyor. */
    transform: translateY(-4px);
}
.catcard-mute:hover,
.catcard-buyut:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.catcard-mute:focus-visible,
.catcard-buyut:focus-visible { outline: 2px solid #fda871; outline-offset: 2px; }
.catcard-mute svg,
.catcard-buyut svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* Büyüt: köşe okları dışarı doğru bir tık açılıyor — "genişleyecek" duygusu
   düğmenin kendi hareketiyle değil, simgenin ölçeğiyle veriliyor; daire
   yerinde kalsın ki iki düğme birlikte titremesin. */
.catcard-buyut:hover svg { transform: scale(1.12); }
.catcard-buyut svg { transition: transform .2s cubic-bezier(.2, .8, .3, 1); }
/* İki simge üst üste değil, duruma göre biri gösteriliyor. */
.catcard-mute .catcard-mute-acik { display: none; }
.catcard-mute[aria-pressed="true"] .catcard-mute-kapali { display: none; }
.catcard-mute[aria-pressed="true"] .catcard-mute-acik { display: block; }

/* Görünürlük: kart üzerine gelince ya da içine odaklanınca. */
.catlist-card:hover .catcard-tools .catcard-play,
.catlist-card:focus-within .catcard-tools .catcard-play,
[data-catcard]:hover .catcard-tools .catcard-play,
[data-catcard]:focus-within .catcard-tools .catcard-play { opacity: 1; }
.catlist-card:hover .catcard-mute,
.catlist-card:focus-within .catcard-mute,
[data-catcard]:hover .catcard-mute,
[data-catcard]:focus-within .catcard-mute,
.catlist-card:hover .catcard-buyut,
.catlist-card:focus-within .catcard-buyut,
[data-catcard]:hover .catcard-buyut,
[data-catcard]:focus-within .catcard-buyut { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Video katmanı
   ---------------------------------------------------------------------------
   Kapak görselinin üstünde, perdenin altında. Görsel ARDINDA kalmaya devam
   ediyor: video hazır olana kadar (`is-ready`) saydam, böylece yüklenirken
   siyah bir kare parlamıyor.
   --------------------------------------------------------------------------- */
.catcard-vid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    background: #0d0f10;
}
.catcard-vid.is-ready { opacity: 1; }
.catcard-vid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* TFE program logosu — kapak görselinin köşesinde.
   Bu kural categories_none.php'nin gömülü <style>'ındaydı. Kart ortak parçaya
   taşınınca kategori sayfasında konumsuz kaldı: `position: absolute` olmadığı
   için akışta bir blok gibi davranıp kartı 58px uzatıyor ve ızgarada aynı
   satırdaki tüm kartları birlikte esnetiyordu (332 → 389px ölçüldü).
   Artık iki sayfa da aynı kuralı kullanıyor. */
.tfe_logo {
    position: absolute;
    top: 5px;
    max-width: 200px;
    border: 1px solid rgb(213 213 213 / 50%);
    border-radius: 16px;
}

/* TFE logosu bir kısım kartta SAĞ ÜSTTE duruyor (görünümde `right: 10px`) —
   yani yeni düğmelerle aynı köşede. Düğmeler yalnızca üzerine gelince
   belirdiğinden logo o an sönüyor: iki işaret üst üste binmiyor, logo da
   kartın dinlenme hâlinde yerini koruyor. */
.catlist-card .tfe_logo { transition: opacity .28s ease; }
.catlist-card:hover .tfe_logo,
.catlist-card:focus-within .tfe_logo { opacity: 0; }

/* Perde ve motto videonun üstünde kalmalı. */
.catcard-hover { z-index: 2; }
.catcard-hover::before { z-index: 0; }


/* Motto — görselin altına yaslı */
.catcard-motto {
    position: relative;   /* perdenin üstünde kalsın */
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
    /* Uzun metinler kartı taşırmasın. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
.catlist-card:hover .catcard-motto,
.catlist-card:focus-within .catcard-motto { opacity: 1; transform: none; }

/* Dokunmatik cihazda hover yok; katman hiç görünmesin. */
@media (hover: none) {
    .catcard-hover { display: none; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .catcard-hover::before, .catcard-play, .catcard-mute, .catcard-buyut,
    .catcard-motto, .catcard-vid { transition: none; }
    .catcard-motto { transform: none; }
    /* Video bu tercihte JS tarafından hiç başlatılmıyor; oynat simgesi de
       ortada kalıyor, köşeye yolculuk yok. */
}

/* ===========================================================================
   Kart videosunun büyütülmüş hâli — "tiyatro kipi" (`.catkip`)
   ---------------------------------------------------------------------------
   Kart üzerindeki sessiz önizlemenin bir üst perdesi: aynı <video> ÖĞESİ
   karttan alınıp bu panele taşınıyor (bkz. catcard-video.js). Yeni bir öğe
   kurulmadığı için arabellek korunuyor — pencere açıldığında görüntü tek
   kare bile duraksamıyor, video kaldığı yerden büyüyor.

   Dil `sinirsiz-teklif.css` ile aynı: koyu panel, turuncu-pembe degrade
   çerçeve, buzlu perde, hap birincil eylem. Fark, panelin İÇİNİN tamamen
   videoya ayrılmış olması — denetimler videonun üstünde, alttan yukarı
   açılan bir perdenin içinde duruyor.

   z-index 122: satış davetinin (`.stk-kip`, 118) ve kapsam kipinin
   (`.fak-kip`, 120) ÜSTÜNDE. Video kullanıcının doğrudan açtığı pencere;
   arkasından çıkan bir davetin onu örtmesi kabul edilemez. Çerez bandı
   (100000) yine hepsinin üstünde kalıyor.
   =========================================================================== */

.catkip {
    position: fixed;
    inset: 0;
    z-index: 122;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.75rem);
}
.catkip[hidden] { display: none; }

/* Gövde kilidi — AYRI sınıf. Satış daveti (`stk-kip-acik`) bu kipin altında
   açık kalabiliyor; biri kapanırken diğerinin kilidini kaldırmamalı. */
html.catkip-acik { overflow: hidden; }

.catkip-perde {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(24, 10, 4, .88) 0%, rgba(3, 5, 5, .95) 60%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
            backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    transition: opacity .3s ease;
}
.catkip.is-acik .catkip-perde { opacity: 1; }

/* --------------------------------------------------------------------------
   Panel
   Oran videonun KENDİ ölçüsünden geliyor (`--catkip-oran`, JS yazıyor); ön
   tanım 16:9. Yükseklik sınırı `max-height` ile değil genişliğe çevrilerek
   veriliyor: `aspect-ratio` ile `max-height` birlikte kullanıldığında
   tarayıcı oranı bozup paneli yassıltabiliyor.
   -------------------------------------------------------------------------- */
.catkip-panel {
    --catkip-oran: 1.7778;
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    max-width: calc((100vh - 7rem) * var(--catkip-oran));
    max-width: calc((100dvh - 7rem) * var(--catkip-oran));
    aspect-ratio: var(--catkip-oran);
    border-radius: 1.15rem;
    overflow: hidden;
    background: #050606;
    box-shadow: 0 50px 120px -45px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .05);
    transform-origin: 50% 50%;
    transition: transform .42s cubic-bezier(.2, .8, .3, 1);
}

/* Çerçeve gerçek bir kenarlık DEĞİL: degrade dolgulu bir katman maskeyle
   yalnız kenarda bırakılıyor (`.stk-panel::before` ile aynı teknik).
   Böylece turuncu ışıltı köşelerde kesilmeden dönüyor. */
.catkip-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(253, 168, 113, .72) 0%,
        rgba(243, 122, 82, .42) 32%,
        rgba(255, 255, 255, .06) 58%,
        rgba(236, 56, 125, .32) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Sahne — videonun taşındığı yer
   `object-fit: contain`: karttaki `cover` kırpması burada yanlış olurdu,
   büyüten kişi kareyi TAM görmek istiyor. Kap `.catcard-vid` değil, bu
   yüzden karttaki `cover` kuralı buraya sızmıyor.
   -------------------------------------------------------------------------- */
.catkip-sahne {
    position: absolute;
    inset: 0;
    background: #000;
    cursor: pointer;     /* tıklayınca duraklat/sürdür */
}
.catkip-sahne video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Duraklatma göstergesi — yalnızca duraklatılmışken. Anlık bir parlama
   değil, kalıcı bir işaret: kullanıcı videoyu durdurduğunda ekranın
   donmadığını görmeli. */
.catkip-durum {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
    pointer-events: none;
}
.catkip-durum svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.catkip.is-duraklatildi .catkip-durum { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --------------------------------------------------------------------------
   Üst köşe kümesi — ses + kapat
   ---------------------------------------------------------------------------
   Ses düğmesi bilerek BURADA, alt şeritte değil: kart üzerinde de sağ üstte
   duruyor ve pencere açılınca ekrandaki yerini değiştirmemeli. Kapatmanın
   solunda; iki düğme aynı camlı dairenin türevi, kart üzerindeki kümenin
   büyük kardeşi.
   -------------------------------------------------------------------------- */
.catkip-ust {
    position: absolute;
    top: .9rem; right: .9rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.catkip-ust button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    color: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.catkip-ust button:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); }
.catkip-kapat svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* Ses — kart üzerindeki düğmenin simgeleriyle birebir aynı. */
.catkip-ses svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.catkip-ses .catkip-ses-acik { display: none; }
.catkip-ses[aria-pressed="true"] .catkip-ses-kapali { display: none; }
.catkip-ses[aria-pressed="true"] .catkip-ses-acik { display: block; }

/* --------------------------------------------------------------------------
   Alt şerit — künye + eylemler, videonun ÜSTÜNDE
   Perde `pointer-events: none`; yalnızca çocukları tıklanabilir, böylece
   şeridin boş kalan kısmına tıklamak videoyu duraklatmayı sürdürüyor.
   -------------------------------------------------------------------------- */
.catkip-alt {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 3.4rem 1.15rem 1.1rem;
    background: linear-gradient(180deg,
        rgba(5, 6, 6, 0) 0%,
        rgba(5, 6, 6, .55) 40%,
        rgba(5, 6, 6, .92) 100%);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease .1s, transform .34s cubic-bezier(.2, .8, .3, 1) .1s;
}
.catkip.is-acik .catkip-alt { opacity: 1; transform: none; }
.catkip-alt > * { pointer-events: auto; }

.catkip-kunye { flex: 1 1 auto; min-width: 0; }
.catkip-baslik {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: clamp(.98rem, 1.5vw, 1.2rem);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.01em;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .8);
}
/* Motto — başlığın HEMEN ALTINDA. Kartta hover katmanında duran metnin
   (`.catcard-motto`) kipteki karşılığı. Başlıktan bir tık silik, eğitmen
   satırından bir tık belirgin: üç satırın sırası böyle okunuyor. */
.catkip-motto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .3rem;
    color: rgba(255, 255, 255, .87);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.45;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
.catkip-motto[hidden] { display: none; }

.catkip-egitmen {
    display: block;
    margin-top: .22rem;
    color: #c4cbcb;
    font-size: .82rem;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.catkip-egitmen[hidden] { display: none; }

/* Alt şeritte tek eylem kaldı (ses üst köşeye taşındı); sarmalayıcı yine de
   duruyor — künye ile eylem arasındaki hizalama ondan geliyor. */
.catkip-eylem {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Birincil eylem — sayfanın her yerindeki hap düğmenin aynısı
   (`.stk-cta` degradesi). */
.catkip-git {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .62rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(253, 168, 113, .55);
    background: linear-gradient(96deg, #fda871 0%, #f37a52 48%, #ec387d 100%);
    box-shadow: 0 16px 30px -16px rgba(243, 122, 82, .9);
    color: #1a0d07 !important;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: transform .18s ease, filter .2s ease, box-shadow .25s ease;
}
.catkip-git:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 20px 36px -16px rgba(243, 122, 82, 1); }
.catkip-git:active { transform: translateY(0); }
.catkip-git svg { width: 16px; height: 16px; fill: none; stroke: #1a0d07; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* Odak halkası — kip açılınca odak betikle taşınıyor, tarayıcının mavi
   halkası paletin dışında kalıyor. */
.catkip-ust button:focus-visible,
.catkip-git:focus-visible { outline: 2px solid #fda871; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   İlerleme çizgisi — en altta, tıklanabilir DEĞİL
   Video döngüde; çizgi "nerede olduğunu" söylüyor, kumanda değil. Sürükleme
   eklenirse alt şeritteki eylemlerle aynı bantta yarışırdı.
   -------------------------------------------------------------------------- */
.catkip-cizgi {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    height: 3px;
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}
.catkip-cizgi span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f37a52, #fda871);
}

/* Dar ekran: künye ve eylemler alt alta; hap düğme tam genişlikte, başparmak
   menzilinde. */
@media screen and (max-width: 600px) {
    .catkip { padding: .75rem; }
    .catkip-alt { flex-direction: column; align-items: stretch; gap: .6rem; padding: 2.2rem .85rem .85rem; }
    .catkip-git { flex: 1 1 auto; justify-content: center; }
    .catkip-baslik { -webkit-line-clamp: 2; font-size: .92rem; }
    .catkip-motto { -webkit-line-clamp: 2; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .catkip-perde, .catkip-panel, .catkip-alt, .catkip-durum { transition: none; }
    .catkip-alt { transform: none; }
}

/* Rayın sertifika varyantı — ana sayfadaki "Online Sertifika Programları".
   Kartlar eğitmen kartlarından geniş ve yüksek; sabit sütun genişliği
   şart (bkz. .pub-slider-track), yoksa kartlar sıkışıp kaydırma kalkıyor. */
.pub-slider--cert .pub-slider-track { grid-auto-columns: 300px; }
.pub-slider--cert .pub-slide { display: flex; }
/* Kart, slaytın tamamını kaplasın ki farklı başlık uzunluklarında
   kartların alt kenarı hizada kalsın. */
.pub-slider--cert .certificate-programs { width: 100%; display: flex; flex-direction: column; }
.pub-slider--cert /* `margin-top: auto` .ins-stack'e taşındı (yukarı bkz.). */
@media screen and (min-width: 1408px) { .pub-slider--cert .pub-slider-track { grid-auto-columns: 320px; } }
@media screen and (max-width: 767px)  { .pub-slider--cert .pub-slider-track { grid-auto-columns: 78%; } }

/* ---------------------------------------------------------------------------
   "Premium" üzerinde geçen altın parlama
   ---------------------------------------------------------------------------
   Ders kahramanındaki `.chero-tutor-name` ile aynı teknik, altın tonlarda.
   Yalnızca öne çıkan kartta; diğer plan adları düz beyaz kalıyor ki fark
   gerçekten Premium'a işaret etsin.

   Sadece desteklendiğinde uygulanıyor: `background-clip: text` metni
   saydamlaştırdığı için, desteklenmeyen tarayıcıda yazı düz beyaz kalır,
   kaybolmaz.

   Konum 0%–100% aralığının DIŞINA çıkmamalı; `no-repeat` degrade bu aralıkta
   metni her zaman tamamen boyar. Dışına taşınca boyanmayan harfler saydam
   kalıp kayboluyor. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .heroplan-card.is-featured .heroplan-name {
        background-image: linear-gradient(100deg,
            #ffffff 0%, #ffffff 36%,
            #ffe9b8 42%,
            #ffd76a 47%, #f5c14e 50%, #e0a63a 53%,
            #ffe9b8 58%,
            #ffffff 64%, #ffffff 100%);
        background-size: 260% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: heroplan-shine 6.5s linear infinite;
    }
}
@keyframes heroplan-shine {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .heroplan-card.is-featured .heroplan-name { animation: none; }
}

/* ---------------------------------------------------------------------------
   İş birliği logoları — hover ipucu (tooltip)
   ---------------------------------------------------------------------------
   Kurum adları yalnızca `alt` içindeydi; tarayıcının `title` balonu da yoktu,
   dolayısıyla hangi logonun hangi kuruma ait olduğu anlaşılmıyordu.

   Balon GÖVDE DÜZEYİNDE tek bir öğe (`.plt`) ve `position: fixed`.
   Sözde öğe (::after) ile denendi ve BIRAKILDI: `.logoMarqueeSection`
   üzerinde `overflow: hidden` var — şeridin yatay kaydırmasını gizleyen kural
   bu, kaldırılamaz — ve logonun üstünde açılan balonu kırpıyor. Şeridin dikey
   boşluğu da (103px kutuda 58px logo) balona yetmiyor.

   Şerit hover'da DURUYOR: kayan bir öğenin üzerindeki ipucu okunamıyor, fare
   sabit dururken logo altından kayıp gidiyor.
   --------------------------------------------------------------------------- */
.partner-strip .marquee:hover,
.partner-strip .marquee:focus-within { animation-play-state: paused; }

/* Aralık `padding-right` yerine `margin-right`: öğe satır içiyken yüksekliği
   0 ölçülüyordu ve konumlandırma güvenilmezdi. */
.partner-strip .marquee a.partner-link { padding-right: 0; margin-right: 3.25rem; }
.partner-link {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.plt {
    position: fixed;
    z-index: 99998;
    top: 0; left: 0;
    padding: .42rem .72rem;
    border-radius: .6rem;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(16, 19, 19, .72);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
            backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
    color: #e9eded;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1);
}
.plt.is-on { opacity: 1; transform: translateY(0); }

/* Ok — balonun alt kenarında, aynı ton ve kenarlık. */
.plt::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    border-radius: 2px;
    border-right: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    background: rgba(16, 19, 19, .72);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
            backdrop-filter: blur(18px) saturate(150%);
    transform: rotate(45deg);
}

@media (hover: none) { .plt { display: none; } }
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ { .plt { transition: opacity .01s linear; transform: none; } }

/* ---------------------------------------------------------------------------
   Akademik kadro kartı — üzerine gelince künye hafifçe büyür
   ---------------------------------------------------------------------------
   `transform-origin: left bottom` ŞART: künye kartın altına mutlak
   konumlandırılmış, merkezden büyütülünce metin iki yana birden taşıyor ve
   `.ins-card`ın `overflow: hidden` kuralı kenarlardan kırpıyor. Sol alttan
   büyüyünce blok yerinde duruyor, yalnızca sağa ve yukarı açılıyor.

   Ölçek 1.05 ile sınırlı: daha fazlası hem uzun adları kartın sağ kenarına
   dayıyor hem de ölçeklenen metni bulanıklaştırıyor.
   --------------------------------------------------------------------------- */
.ins-card-meta {
    transform-origin: left bottom;
    transform: scale(1);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.ins-card:hover .ins-card-meta,
.ins-card:focus-visible .ins-card-meta { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .ins-card-meta { transition: none; }
    .ins-card:hover .ins-card-meta,
    .ins-card:focus-visible .ins-card-meta { transform: none; }
}

/* ---------------------------------------------------------------------------
   İş birlikleri — kurumsal üyelik çağrısı
   --------------------------------------------------------------------------- */
.partner-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.35rem 1.6rem;
    /* Yarıçap korunuyor, kenarlık yok: buzlu zemin kartı zaten ayırıyor,
       çerçeve üstüne fazla geliyordu. */
    border-radius: 1.25rem;
    border: 0;
    background: rgba(255, 255, 255, .022);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
            backdrop-filter: blur(14px) saturate(130%);
}
.partner-cta-text { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.partner-cta-title {
    /* `align-self: flex-start` ŞART. Kapsayıcı dikey bir esnek kutu; span
       varsayılan olarak tüm genişliğe esniyor ve degrade metinden çok daha
       geniş bir alana yayılıyor. O durumda harflere degradenin yalnızca ilk
       parçası düşüyor, parlama bandı hiç görünmüyor. */
    align-self: flex-start;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Üzerinden geçen parlama — "Premium" ve ders başlığındaki teknikle aynı.
   Yalnızca desteklendiğinde: `background-clip: text` metni saydamlaştırdığı
   için, desteklenmeyen tarayıcıda başlık düz beyaz kalır, kaybolmaz. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .partner-cta-title {
        background-image: linear-gradient(100deg,
            #ffffff 0%, #ffffff 38%,
            #ffd0ae 43%,
            #fda871 47%, #f37a52 50%, #ec387d 53%,
            #ffd0ae 57%,
            #ffffff 62%, #ffffff 100%);
        background-size: 260% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* Konum 0%–100% dışına ÇIKMAMALI: `no-repeat` degrade bu aralıkta
           metni her zaman tamamen boyar. Dışına taşınca boyanmayan harfler
           saydam kalıp kayboluyor. */
        animation: partner-cta-shine 6s linear infinite;
    }
}
@keyframes partner-cta-shine {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .partner-cta-title { animation: none; }
}
.partner-cta-sub { color: var(--pu-muted); font-size: .88rem; line-height: 1.6; }

/* Düğme — sitedeki dış çizgili marka düğmesi. */
.partner-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 122, 82, .55);
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .07) 0%, rgba(243, 122, 82, .07) 45%, rgba(236, 56, 125, .07) 100%);
    color: #fff !important;
    font-size: .9rem;
    font-weight: 700;
    transition: background .25s ease, border-color .25s ease;
}
.partner-cta-btn:hover {
    border-color: rgba(253, 168, 113, .95);
    background: linear-gradient(96deg,
        rgba(253, 168, 113, .38) 0%, rgba(243, 122, 82, .38) 45%, rgba(236, 56, 125, .38) 100%);
}
.partner-cta-btn svg {
    /* Ölçü şart: verilmezse SVG kabına yayılıp düğmeyi devleştiriyor. */
    width: 16px; height: 16px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

@media screen and (max-width: 640px) {
    .partner-cta { flex-direction: column; align-items: stretch; text-align: center; }
    /* Dar ekranda metin ortalanıyor; başlık da ortalanmalı, yoksa sola
       yapışık kalıyor. */
    .partner-cta-title { align-self: center; }
    .partner-cta-btn { justify-content: center; }
}


/* ---------------------------------------------------------------------------
   Program kartında video önizlemesi (`/certificate-programs/...`)
   ---------------------------------------------------------------------------
   Kartın kendisi bir <a>; ses düğmesi gerçek bir <button> olduğu için
   bağlantının dışına, slayta konuluyor. Slayt konumlandırılmış olmalı ki
   denetimler kartın üzerine otursun. Oynat simgesinin ortaya olan mesafesi
   yine JS'te ölçülüyor (`--catv-x/--catv-y`), bu yüzden kart genişliği
   değişse de simge görselin tam ortasında kalıyor.
   --------------------------------------------------------------------------- */
.pub-slide[data-catcard] { position: relative; }
.crt-card-media { position: relative; overflow: hidden; }

/* Eski, tıklanamaz oynat rozeti yerini araç katmanına bıraktı. */
.pub-slide[data-catcard] .crt-card-play { display: none; }

/* Video kapak görselinin üstünde, kart gövdesinin altında. */
.crt-card-media .catcard-vid { border-radius: inherit; }

/* ---------------------------------------------------------------------------
   Anasayfa "Popüler Eğitimler" kartında video önizlemesi
   ---------------------------------------------------------------------------
   Video kabı `z-index: 1` taşıyor; kapaktaki perde, kategori etiketi ve motto
   ise konumlandırılmış ama z-index'siz. Konumlandırılmış bir kardeş z-index
   aldığı anda, DOM sırası ne olursa olsun z-index'siz kardeşlerin ÜSTÜNE
   çıkıyor — video perdeyi ve mottoyu örtüyordu. Üçü de videonun üstüne
   alınıyor; oynat/ses düğmeleri zaten kartın dışında ve daha yüksek katmanda.
   --------------------------------------------------------------------------- */
.popcard-cover .catcard-vid { z-index: 1; }
.popcard-veil,
.popcard-tag,
.popcard-motto { z-index: 2; }

/* ---------------------------------------------------------------------------
   Anasayfa vitrin kartları — sabit etiket ve kayan kurum şeridi
   ---------------------------------------------------------------------------
   İki program kartında (Paranın Değeri / Teknolojide Fırsat Eşitliği) yazılar
   yalnızca üzerine gelince açılıyordu; kartın NE olduğu okunmadan önce
   anlaşılmıyordu. Etiket gövdeden çıkarılıp sol üste sabitlendi ve her zaman
   görünür. Kurum şeridi ise /social-impact'teki `.cpm` bileşeninin aynısı,
   başlığın hemen üstünde.
   --------------------------------------------------------------------------- */
/* Etiket ŞERİDİ. Konumlandırma tek etiketten şeride devredildi: sosyal etki
   hattındaki iki program ikinci bir etiket taşıyor, ikisi yan yana durmalı.
   Sağ sınır `.feature-go` düğmesinin (top .9rem / right .9rem, 38px) altına
   girmesin diye açık bırakılıyor; sığmazsa ikinci etiket alta iner. */
.feature-tags {
    position: absolute;
    top: 1rem;
    left: 1.1rem;
    right: 3.9rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    pointer-events: none;
}
.feature-tag {
    /* Görselin üstünde okunabilirlik: kart perdesi yalnızca hover'da geliyor,
       bu yüzden etiketin kendi zemini var. */
    background: rgba(10, 12, 12, .55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    white-space: nowrap;
}

/* Sosyal etki etiketi programın KENDİ kurumsal rengini alıyor — kartın hover
   halkası, gölgesi ve başlık degradesi zaten aynı renkten besleniyor. Koyu
   değil AÇIK ton: #017548 / #095796 bu zeminde okunmuyor. */
.feature-tag--sosyal { color: #d8fff0; border-color: rgba(255, 255, 255, .28); }
.feature-card[data-brand="oyd"] .feature-tag--sosyal {
    color: #6fe0b0;
    border-color: rgba(43, 189, 132, .55);
}
.feature-card[data-brand="tfe"] .feature-tag--sosyal {
    color: #86c6f7;
    border-color: rgba(74, 163, 232, .55);
}

/* Şerit gövdenin ilk satırı; gövdeyle birlikte açılıyor. */
.feature-partner {
    display: block;
    width: 100%;
    margin-bottom: .35rem;
}
/* `.cpm` bu bağlamda satır içi bir kutu içinde duruyor (gövde `<span>`lerden
   kurulu), bu yüzden blok davranışı açıkça veriliyor. */
.feature-partner .cpm { display: block; }
.feature-partner .cpm-track { display: flex; }
/* Kart yüksekliği sınırlı: sosyal etki sayfasındaki 68px'lik yuva burada
   fazla yer kaplıyor. Logolar oransal olarak %75'e iniyor — mürekkep
   ölçümüyle belirlenen oranlar korunduğu için hiçbiri komşusundan küçük
   görünmüyor. */
.feature-partner .cpm-item {
    height: 46px;
    width: calc(var(--cpm-w, 104px) * .75);
    margin-right: calc(var(--cpm-gap, 26px) * .75);
}
.feature-partner .cpm-item img { height: calc(var(--cpm-h, 30px) * .75) !important; }

/* Şerit yalnızca kart açıkken aksın: görünmezken dönen bir animasyon boşuna
   kare üretir. `paused` konumu koruduğu için tekrar gelindiğinde kaldığı
   yerden sürüyor, başa sıçramıyor. */
.feature-card .feature-partner .cpm-track { animation-play-state: paused; }
.feature-card:hover .feature-partner .cpm-track,
.feature-card:focus-visible .feature-partner .cpm-track { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .feature-card:hover .feature-partner .cpm-track,
    .feature-card:focus-visible .feature-partner .cpm-track { animation-play-state: paused; }
}

@media screen and (max-width: 767px) {
    .feature-tag { top: .8rem; left: .85rem; }
    /* Dar kartta dört logo sığmıyor; şerit daha da küçülüyor. */
    .feature-partner .cpm-item {
        height: 38px;
        width: calc(var(--cpm-w, 104px) * .62);
        margin-right: calc(var(--cpm-gap, 26px) * .62);
    }
    .feature-partner .cpm-item img { height: calc(var(--cpm-h, 30px) * .62) !important; }
}

/* ============================================================================
   F4 — FAVORİ YILDIZI (fav_star.php + fav-note.js)
   Kart köşesinde ya da başlık yanında duran buton; dolu hâl marka turuncusu.
   ========================================================================== */
.fav-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(11, 12, 12, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #9aa1a1;
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.fav-star svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-star:hover { color: #ffd0ae; border-color: rgba(253, 168, 113, .5); transform: scale(1.06); }
.fav-star.is-on { color: #fda871; border-color: rgba(253, 168, 113, .55); }
.fav-star.is-on svg { fill: currentColor; stroke: currentColor; }

/* ---------------------------------------------------------------------------
   Paydaş şeridi — akan kurdele
   ---------------------------------------------------------------------------
   Logolar tek bir PNG değil, ayrı görseller: BAU markası güncellenebiliyor.
   Şerit sürekli sola akıyor; iki özdeş küme olduğu için %50'de başa dönmek
   dikiş bırakmıyor. Kenarlarda maske ile silinerek giriyor/çıkıyor.
   Fare üzerine gelince duruyor (logoyu okumak isteyen için). İşletim
   sisteminin hareket azaltma tercihi bilerek YOK SAYILIYOR: şerit her
   makinede aynı akıyor (Windows/Mac farkı olmasın diye — bkz. dosyadaki
   "ETKİSİZ: hareket azaltma yok sayılıyor" işaretli medya koşulları).
   --------------------------------------------------------------------------- */
.tfe-brands {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    /* Kenarlarda yumuşak silinme; maskesiz tarayıcıda sadece kırpılır. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tfe-brands__track {
    display: flex;
    width: max-content;
    animation: tfeBrandsAk 26s linear infinite;
}
.tfe-brands:hover .tfe-brands__track,
.tfe-brands:focus-within .tfe-brands__track { animation-play-state: paused; }
.tfe-brands__set { display: flex; align-items: center; }
.tfe-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1.2rem, 3.2vw, 2.4rem);
}
.tfe-brand img {
    /* Temel yükseklik ORTAK, ama her marka kendi optik katsayısıyla
       ölçekleniyor (parçadaki `--tfe-k`): aynı piksel yüksekliği eşit
       GÖRÜNMÜYOR — geniş ve kalın harfli Yapı Kredi markası şeridi eziyor,
       dikey UNITAR markası ise cılız kalıyordu. */
    height: calc(clamp(34px, 5.2vw, 50px) * var(--tfe-k, 1));
    width: auto;
    max-width: none;
    /* Logolar zaten tek renk (beyaz); doygunluk filtresi gereksiz —
       yalnızca saydamlıkla sakinleştiriliyor. */
    opacity: .88;
    transition: opacity .25s ease;
}
.tfe-brands:hover .tfe-brand img { opacity: 1; }

/* CIFAL + UNITAR ikilisi: aralarındaki boşluk yarıya iner (birlikte
   kullanılan kilit), dışa bakan kenarlar normal aralığı korur. */
.tfe-brand--cift-sol { padding-right: clamp(.4rem, 1vw, .8rem); }
.tfe-brand--cift-sag { padding-left: clamp(.4rem, 1vw, .8rem); }

@keyframes tfeBrandsAk {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .tfe-brands__track { animation: none; justify-content: center; width: 100%; }
    .tfe-brands__set:last-child { display: none; }
    .tfe-brands { -webkit-mask-image: none; mask-image: none; }
}

/* Program markası: figürün kendi genişliği YOK (esnek sütunun ortalanmış
   çocuğu) — img'e `width: 100%` verilince kutu içeriğe, içerik kutuya
   bakıyor ve görsel 2x2 piksele çöküyordu (ölçüldü: 700px'lik logo 2px
   basılıyordu, ekranda nokta gibi görünüyordu). Genişlik artık FİGÜRDE. */

@media screen and (max-width: 900px) { .tfe-brands { max-width: 560px !important; } }
@media screen and (max-width: 560px) { .tfe-brands { max-width: 100% !important; } }

/* Program markası — buzlu plaka.
   Eski görünüm kurs kartı rozetinden sızan 1px gri çerçeveydi (bkz. görünüm
   içindeki not). Artık bilinçli bir tasarım: yumuşak köşeler, ince ışık
   kenarı, hafif buzlu zemin ve markaya nefes payı. */
.tfe-mark {
    display: block;
    /* Plaka hero'nun BAŞ AKTÖRÜ değil: paydaş şeridi ve künyeyle aynı
       ölçekte durmalı. Eski `tfe_logo` sınıfı markayı 200px'e kilitliyordu;
       sınıf kalkınca 420px'e fırlayıp künyeyi eziyordu — ölçü artık bilinçli. */
    width: min(330px, 78%);
    margin: 0 auto;
    padding: clamp(.75rem, 1.8vw, 1.1rem) clamp(1.05rem, 2.4vw, 1.6rem);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .13);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 22px 50px -34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tfe-mark img { display: block; position: static; width: 100%; max-width: none; height: auto; margin: 0 auto; }

@media screen and (max-width: 900px) { .tfe-mark { width: min(290px, 84%) !important; border-radius: 18px; } }
@media screen and (max-width: 560px) { .tfe-mark { width: min(240px, 86%) !important; border-radius: 16px; } }