/* ===========================================================================
   Eğitim detay sayfası — /course/{slug}
   ---------------------------------------------------------------------------
   Yalnızca "Eğitim Hakkında" bölümünden aşağısı. Üstteki tam ekran video
   kahramanı (`.hero.has-video`, `.play-button`) bilinçli olarak dokunulmadan
   bırakılmıştır.
   =========================================================================== */

:root {
    --cd-panel: #121414;
    --cd-line: #1f2222;
    --cd-text: #e9eded;
    --cd-muted: #9aa1a1;
    --cd-dim: #767d7d;
    --cd-accent: #f37a52;
}

.cdt { padding-bottom: 4rem; background: #0b0c0c; }

/* ---------------------------------------------------------------------------
   Başlık şeridi
   --------------------------------------------------------------------------- */
.cdt-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--cd-line);
}
.cdt-head-meta { min-width: 0; }
.cdt-eyebrow {
    display: block;
    margin-bottom: .35rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}
.cdt-eyebrow a { color: var(--cd-dim) !important; transition: color .22s ease; }
.cdt-eyebrow a:hover { color: var(--cd-accent) !important; }
.cdt-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 1.95rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.cdt-head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Düğmeler — hover'da yalnızca renk/parlaklık değişir, boy değişmez. */
.cdt .cdt-btn {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    height: 46px;
    padding: 0 1.4rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
/* Düğmeler `<a>` olduğu için sayfa/çerçeve genelindeki bir bağlantı kuralı
   altlarını çizebiliyor. Kaynağını bu kurulumda yeniden üretemedim
   (hesaplanan değer `none` çıkıyor), ama düğmede alt çizgi HİÇBİR durumda
   doğru olmadığı için dört durum birden açıkça sıfırlanıyor. */
.cdt .cdt-btn,
.cdt .cdt-btn:hover,
.cdt .cdt-btn:focus,
.cdt .cdt-btn:active,
/* İç ögeler de dahil: metin bir sarmalayıcıya alınmış olsa bile çizgi
   oradan gelmesin. */
.cdt .cdt-btn *,
.cdt .cdt-btn:hover * { text-decoration: none !important; }
.cdt .cdt-btn small, .cdt .cdt-btn div { font-size: .9rem !important; line-height: 1; }
.cdt .cdt-btn .icon { width: 20px; height: 20px; margin: 0; }
.cdt .cdt-btn .icon svg { width: 18px; height: 18px; }
.cdt .cdt-btn > svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cdt .cdt-btn--go > svg { fill: currentColor; stroke: none; }
.cdt .cdt-btn--primary {
    border-color: rgba(243, 122, 82, .55) !important;
    background: rgba(243, 122, 82, .18) !important;
    color: #ffffff !important;
}
.cdt .cdt-btn--primary:hover {
    border-color: rgba(243, 122, 82, .95) !important;
    background: rgba(243, 122, 82, .3) !important;
}
/* Sayfanın TEK birincil eylemi: kayıtlı kullanıcı için "Eğitime Devam Et".
   Eskiden `rgba(243,122,82,.12)` zeminli soluk bir dış çizgili düğmeydi ve
   hemen yanındaki "Sepete Ekle" (`--primary`, .18/.55) ile neredeyse aynı
   görünüyordu — ikisi arasında hiyerarşi yoktu.
   Artık markanın kendi degradesiyle DOLU: sayfada bu görünüme sahip başka
   düğme yok, dolayısıyla "asıl eylem burada" bakışta okunuyor.
   Metin koyu: degradenin üç durağında da kontrast yeterli —
   #1a0b06 üzerinde 10,07 / 7,05 / 4,96. Beyaz metin en açık durakta
   1,91'e düşüyordu, yani okunmuyordu. */
.cdt .cdt-btn--go {
    border-color: transparent !important;
    background-image: linear-gradient(96deg, #fda871 0%, #f37a52 52%, #ec387d 100%) !important;
    color: #1a0b06 !important;
    box-shadow: 0 14px 30px -18px rgba(243, 122, 82, .95) !important;
}
.cdt .cdt-btn--go:hover {
    /* Aydınlatma `filter` İLE DEĞİL ikinci bir arka plan katmanıyla yapılıyor.
       `filter` elemanı bir "backdrop kökü" hâline getiriyor ve içindeki
       oynat dairesinin `backdrop-filter`ını devre dışı bırakıyor — yani cam
       etkisi tam hover'da, en görünür olması gereken anda kayboluyordu. */
    background-image:
        linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)),
        linear-gradient(96deg, #fda871 0%, #f37a52 52%, #ec387d 100%) !important;
    box-shadow: 0 16px 34px -16px rgba(243, 122, 82, 1) !important;
}
.cdt .cdt-btn--go:focus-visible {
    outline: 2px solid #ffd0ae;
    outline-offset: 3px;
}

/* Oynat işareti — beyaz daire içinde koyu üçgen.
   Çıplak üçgen, altındaki degrade zeminin renk değişimi yüzünden kenarlarını
   kaybediyordu; daire hem kontrastı sabitliyor (üçgen/daire 19,2:1) hem de
   metinle arasına doğal bir ayrım koyuyor.
   Daire BEYAZ, koyu değil: degradenin en açık durağında (#fda871) koyu bir
   daire 1,9:1 ile eriyip gidiyordu; beyaz daire en açık durakta bile
   kenarını gölgeyle belli ediyor. */
.cdt .cdt-btn--go .cdt-btn-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    /* Metinden 2px içeri: 1.4rem'lik yatay dolgu daireyle birlikte fazla
       geniş duruyordu. */
    margin-left: -.25rem;
    border-radius: 50%;
    /* BUZLU CAM. Dolgu yarı saydam kalmak ZORUNDA: opak beyaz,
       `backdrop-filter`ın ürettiği bulanık katmanı örter ve etki görünmez.
       %28 beyaz, degradenin üç durağı üzerinde de koyu üçgene 12,1 / 9,3 /
       6,9 kontrast bırakıyor — en koyu pembe durakta bile AA üstünde. */
    background: rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
            backdrop-filter: blur(6px) saturate(180%);
    /* İnce beyaz kenarlık + iç parlaklık: camın kalınlığını hissettiren şey
       bu iki çizgi. Yalnızca saydam dolgu bırakılsa daire "silik" duruyor. */
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
                0 1px 3px rgba(26, 11, 6, .22);
}
.cdt .cdt-btn--go .cdt-btn-play svg {
    /* Üçgen optik olarak sağa kaçık durur; 1px sola alınıp dairenin
       görsel merkezine oturtuluyor. */
    width: 12px;
    height: 12px;
    margin-left: 1px;
    fill: #1a0b06;
    stroke: none;
}
.cdt .cdt-btn--ghost:hover { border-color: rgba(255, 255, 255, .4) !important; background: rgba(255, 255, 255, .09) !important; }

/* ---------------------------------------------------------------------------
   Düzen
   --------------------------------------------------------------------------- */
.cdt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 1.75rem;
    align-items: start;
}
.cdt-main { min-width: 0; }
.cdt-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* ---------------------------------------------------------------------------
   Yapışkan sağ sütun (yalnızca masaüstü)
   ---------------------------------------------------------------------------
   `position: sticky` ONARIMI: main.css'te `body { overflow-x: hidden }` var.
   `hidden` gövdeyi bir kaydırma kabına çevirir; içindeki sticky öğeler artık
   viewport'a değil O KABA göre davranır ve kap kaymadığı için hiç yapışmaz.
   Tarayıcıda doğrulandı: sticky verilen sütun scroll ile birlikte -400px,
   -800px'e kayıyordu. `clip` aynı yatay taşma korumasını verir ama kaydırma
   kabı OLUŞTURMAZ. `:has()` sayesinde kural yalnızca bu düzenin bulunduğu
   sayfaya iniyor — micro modülünde de aynı yöntem kullanılmıştı.
   Destek: :has() ve overflow:clip yoksa (Safari < 15.4) sütun eskisi gibi
   akar; hiçbir şey bozulmaz.

   ÜST BOŞLUK: gezinme çubuğu her zaman `fixed` ve 80px (üç kaydırma
   konumunda ölçüldü, küçülmüyor). 80 + 16 = 96px.

   İKİ KİP — `--cdt-yapisik-ust` değişkenini JS hesaplıyor:
     • Sütun ekrana sığıyorsa (çıkış yapmış kullanıcı, iki kart)
       değişken +96px: sütun menünün altına yapışır.
     • Sığmıyorsa (giriş yapmış kullanıcı, "Kayıt Durumu" ile üç kart)
       değişken NEGATİF olur: sütun aşağı kaydırdıkça sayfayla birlikte
       akar, ALT kenarı ekranın altına gelince orada sabitlenir. Böylece
       hem yapışkanlık korunur hem de "Eğitmen" kartının altı okunabilir
       kalır — sabit +96px verilseydi sütunun alt kısmı hiçbir kaydırma
       konumunda görünmezdi.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
    body:has(.cdt-layout) { overflow-x: clip; }

    .cdt-layout.is-yapiskan .cdt-side {
        position: sticky;
        top: var(--cdt-yapisik-ust, 96px);
        /* Izgara `align-items: start` olduğu için sütun zaten içeriği kadar;
           yine de esneme ihtimaline karşı açıkça yazılıyor — sticky, kutu
           sütun boyunca uzarsa çalışmaz. */
        align-self: start;
    }
}

/* ---------------------------------------------------------------------------
   Oynatıcı
   --------------------------------------------------------------------------- */
.cdt-player {
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--cd-line);
    background: #000;
}
/* Sayfanın kendi 16:9 sarmalayıcıları `position:relative` bekliyor. */
.cdt-player .video-player-container,
.cdt-player .video-player-pause { position: relative; width: 100%; }
/* `.is-16by9` oranı `padding-top:56.25%` ile kuruyor; oranı artık iframe'in
   kendisi taşıdığı için bu dolgu kutuyu iki katına çıkarıyordu. */
.cdt-player .video-player-container.is-16by9,
.cdt-player .video-player-pause.is-16by9 { padding: 0 !important; height: auto !important; }
.cdt-player .is-16by9::before,
.cdt-player .is-16by9::after { content: none !important; }
.cdt-player #vimeo_player,
.cdt-player #vimeo_vid {
    display: block;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    border: 0;
}
.cdt-paywall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    aspect-ratio: 16 / 9;
    padding: 1.5rem;
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(243, 122, 82, .1), transparent 60%),
        #0e1010;
}
.cdt-paywall-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}
.cdt-paywall-icon svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cdt-paywall-text { margin: 0; color: var(--cd-text); font-size: 1.05rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Künye satırı
   --------------------------------------------------------------------------- */
.cdt-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.1rem 0 1.25rem;
}
.cdt-fact {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 34px;
    padding: 0 .85rem;
    border-radius: 999px;
    border: 1px solid var(--cd-line);
    background: rgba(255, 255, 255, .03);
    color: var(--cd-muted);
    font-size: .8rem;
    font-weight: 600;
    max-width: 100%;
}
.cdt-fact svg {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    fill: none; stroke: var(--cd-dim);
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.cdt-fact-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cd-muted) !important;
    transition: color .22s ease;
}
a.cdt-fact-text:hover { color: #fff !important; }

/* Katılım belgesi çipi — künyedeki diğer çipler dersin kimliğini (süre,
   kategori, eğitmen) söylüyor; bu ise dersi tamamlamanın çıktısı, o yüzden
   nötr kalmıyor. Renk `/categories` kartlarındaki `.catcard-cert` etiketiyle
   birebir aynı (#ffd0ae) — kullanıcı listede gördüğü işareti burada da
   tanısın. Metin ve ikon `currentColor` ile aynı tona bağlı.
   Kontrast: #ffd0ae üzerine bu zemin ≈ 11:1, WCAG AA/AAA fazlasıyla geçer. */
.cdt-fact--cert {
    border-color: rgba(255, 208, 174, .34);
    background: rgba(255, 208, 174, .09);
    color: #ffd0ae;
}
.cdt-fact--cert svg { stroke: currentColor; }
.cdt-fact--cert .cdt-fact-text { color: #ffd0ae !important; }

/* ---------------------------------------------------------------------------
   Kartlar
   --------------------------------------------------------------------------- */
.cdt-card {
    padding: 1.5rem;
    border-radius: 1.15rem;
    border: 1px solid var(--cd-line);
    background: var(--cd-panel);
}
.cdt-card--flush { padding: 0; overflow: hidden; }
.cdt-card--logo { display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
/* 190px'lik sınır kaldırıldı: logo şeridi kartın içinde küçücük kalıyordu.
   Artık kullanılabilir genişliği tamamen dolduruyor; `width: 100%` ile
   birlikte `height: auto` en-boy oranını koruyor. */
.cdt-card--logo img { width: 100%; max-width: 100%; height: auto; }

.cdt-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--cd-line);
    background: rgba(255, 255, 255, .018);
}
.cdt-card-title { margin: 0; color: #fff; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
/* Kart başlığı ikonu — ince bir işaret, başlığın önüne geçmemeli.
   `inline-flex` DEĞİL satır içi hizalama kullanılıyor: `.cdt-card-head`
   `align-items: baseline` ile çalışıyor ve başlığı esnek kutuya çevirmek
   sağdaki bölüm sayacıyla taban hizasını bozuyordu. `vertical-align`
   ikonu metnin taban çizgisine göre oturtuyor, hiza korunuyor. */
.cdt-card-title > svg,
.cdt-subtitle > svg {
    /* Ölçü `px` DEĞİL `em`: ikon başlığın punto'suna bağlı kalıyor, başlık
       boyutu değişirse oran bozulmuyor. 1.35em → başlık .98rem (15,7px)
       iken ikon ~21px. */
    width: 1.35em;
    height: 1.35em;
    margin-right: .45rem;
    /* Dikey konum hesapla bulundu, göz kararıyla değil: ikonun merkezi
       metnin BÜYÜK HARF ortasına (taban çizgisinin ~0,36em üstü) oturmalı.
       İkon tabandan `d` kadar aşağı indiğinde merkezi (1,35/2 − d) olur;
       0,36'ya eşitlenince d = 0,32em. */
    vertical-align: -.32em;
    fill: none;
    /* `currentColor`: ikon başlığın rengini birebir alıyor. Sabit bir değer
       yazılsaydı başlık rengi ileride değiştiğinde ikon geride kalırdı. */
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* SKH alt başlığı gövde metninin içinde; `em` sayesinde oran kendiliğinden
   ölçekleniyor, ayrı bir değere gerek kalmadı. */
.cdt-card-count { color: var(--cd-dim); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.cdt-card-note { margin: 0; padding: .9rem 1.25rem 0; color: var(--cd-dim); font-size: .76rem; line-height: 1.5; }

/* Açıklama */
.cdt-lead {
    margin: 0 0 1.1rem;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.01em;
}
.cdt-prose { color: var(--cd-muted); font-size: .95rem; line-height: 1.85; }
.cdt-prose p { margin-bottom: 1rem; }
.cdt-prose p:last-child { margin-bottom: 0; }
.cdt-prose a { color: var(--cd-accent) !important; }
.cdt-prose strong, .cdt-prose b { color: var(--cd-text); }
.cdt-prose ul, .cdt-prose ol { margin: .5rem 0 1rem 1.25rem; }
.cdt-prose li { margin-bottom: .35rem; }
.cdt-prose img { max-width: 100%; height: auto; border-radius: .75rem; }
.cdt-banner { display: block; width: 100%; height: auto; border-radius: .9rem; margin-bottom: 1.25rem; }

.cdt-subtitle { margin: 0 0 .6rem; color: #fff; font-size: .92rem; font-weight: 700; }
.cdt-skh { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--cd-line); }
.cdt-skh-list { margin: 0 0 1rem 1.15rem; color: var(--cd-muted); font-size: .89rem; line-height: 1.7; }
.cdt-skh-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.cdt-skh-badges img { width: 92px; height: auto; border-radius: .5rem; }

.cdt-note {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--cd-line);
    color: var(--cd-muted);
    font-size: .89rem;
    line-height: 1.7;
}
.cdt-note p { margin: 0 0 .75rem; }
.cdt-note a { color: var(--cd-accent) !important; font-weight: 600; }
.cdt-note img { max-width: 100%; height: auto; border-radius: .75rem; }
.cdt-note--row { display: flex; align-items: center; gap: .85rem; }
.cdt-note--row p { margin: 0; }
.cdt-note-icon { width: 52px !important; height: 52px; flex: 0 0 auto; border-radius: 0; }

/* ---------------------------------------------------------------------------
   Kayıt durumu
   --------------------------------------------------------------------------- */
.cdt-status {
    padding: 1rem 1.15rem;
    border-radius: .9rem;
    border: 1px solid var(--cd-line);
    background: rgba(255, 255, 255, .022);
    color: var(--cd-muted);
    font-size: .88rem;
    line-height: 1.6;
}
.cdt-status--ok { border-color: rgba(243, 122, 82, .35); background: rgba(243, 122, 82, .07); }
.cdt-status--off { border-color: rgba(255, 96, 72, .35); background: rgba(255, 96, 72, .07); }
.cdt-status-label {
    display: block;
    margin-bottom: .3rem;
    color: var(--cd-dim);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.cdt-status a { color: var(--cd-accent) !important; font-weight: 700; }
/* Kayıt durumu artık tıklanabilir değil, bir DURUM ifadesi. Yeşil + onay
   ikonu + metin: panelin geri kalanındaki durum diliyle aynı, ve renk tek
   başına bilgi taşımıyor. Kontrast #7ee2b8 / kart zemini = 11,7:1. */
.cdt-status-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #7ee2b8;
    font-size: .88rem;
    font-weight: 700;
}
.cdt-status-state svg {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    fill: none; stroke: currentColor;
    stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
/* Kayıtlı durumda kutu da nötr-yeşile dönüyor; turuncu "eylem gerekiyor"
   çağrışımı yapıyordu, oysa burada yapılacak bir şey yok. */
.cdt-status--ok { border-color: rgba(52, 211, 153, .3) !important; background: rgba(52, 211, 153, .07) !important; }
.cdt-status-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #fff !important;
    font-weight: 700;
}
.cdt-status-link svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .22s ease;
}
.cdt-status-link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Bölüm listesi
   --------------------------------------------------------------------------- */
.cdt-list { margin: 0; padding: .4rem; list-style: none; }
.cdt-list li { margin: 0; }
.cdt-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .65rem .7rem;
    border: 0;
    border-radius: .7rem;
    background: transparent;
    color: var(--cd-muted) !important;
    font-family: inherit;
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background .22s ease, color .22s ease;
}
.cdt-item:hover { background: rgba(255, 255, 255, .05); color: #fff !important; }
.cdt-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--cd-line);
    background: rgba(255, 255, 255, .04);
    color: var(--cd-dim);
    transition: border-color .22s ease, background .22s ease, color .22s ease;
}
.cdt-item-icon svg { width: 12px; height: 12px; fill: currentColor; }
.cdt-item.is-locked { cursor: default; color: var(--cd-dim) !important; }
.cdt-item.is-locked:hover { background: transparent; color: var(--cd-dim) !important; }
.cdt-item.is-locked .cdt-item-icon svg { width: 15px; height: 15px; fill: none; }
.cdt-item-text { flex: 1 1 auto; min-width: 0; }
.cdt-item-tag {
    flex: 0 0 auto;
    padding: .15rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--cd-dim);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Oynatıcıda gösterilen bölüm — mevcut `side_active` sınıfı korunuyor. */
.cdt-item.side_active {
    background: rgba(243, 122, 82, .1);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(243, 122, 82, .3);
}
.cdt-item.side_active .cdt-item-icon {
    border-color: rgba(243, 122, 82, .55);
    background: rgba(243, 122, 82, .18);
    color: #ffbe9c;
}
.cdt-item.side_active .cdt-item-tag { border-color: rgba(243, 122, 82, .4); color: #ffbe9c; }

/* Sertifika programı satırı */
.cdt-item--cert { cursor: pointer; }
.cdt-item-logo { width: 34px !important; height: 34px; flex: 0 0 auto; object-fit: contain; }
.cdt-item-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;
}
.cdt-item--cert:hover .cdt-item-go { opacity: .6; }

/* ---------------------------------------------------------------------------
   Eğitmen kartı
   --------------------------------------------------------------------------- */
/* Kart artık `--flush` (kendi dolgusu yok); gövdenin dolgusunu bu satır
   taşıyor. Yan değerler başlıkla aynı (1.25rem) ki eğitmen fotoğrafı
   başlığın soluyla hizalansın. */
.cdt-teacher { display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem; }
.cdt-teacher-img {
    width: 84px !important; height: 84px;
    flex: 0 0 auto;
    border-radius: .8rem;
    object-fit: cover;
    border: 1px solid #2b2f2f;
}
.cdt-teacher-meta { min-width: 0; }
.cdt-teacher-prefix { display: block; color: var(--cd-dim); font-size: .74rem; font-weight: 600; }
.cdt-teacher-name {
    display: block;
    margin-top: .1rem;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}
.cdt-teacher-job {
    display: block;
    margin-top: .2rem;
    color: var(--cd-muted);
    font-size: .78rem;
    line-height: 1.5;
}
.cdt-teacher-go {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    color: var(--cd-accent) !important;
    font-size: .8rem;
    font-weight: 700;
}
.cdt-teacher-go svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .22s ease;
}
.cdt-teacher:hover .cdt-teacher-go svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Küçük ekran
   --------------------------------------------------------------------------- */
@media screen and (max-width: 1215px) {
    .cdt-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 1.35rem; }
}
@media screen and (max-width: 1023px) {
    .cdt-layout { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
    .cdt-head { align-items: flex-start; flex-direction: column; }
    .cdt-head-actions { width: 100%; }
    .cdt .cdt-btn { flex: 1 1 auto; justify-content: center; }
}
@media screen and (max-width: 600px) {
    .cdt-card { padding: 1.15rem; }
    .cdt-card-head { padding: .95rem 1rem; }
    .cdt-lead { font-size: 1rem; }
    .cdt-teacher-img { width: 66px !important; height: 66px; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .cdt .cdt-btn, .cdt-item, .cdt-item-icon, .cdt-item-go,
    .cdt-status-link svg, .cdt-teacher-go svg { transition: none; }
}

/* ===========================================================================
   Kahraman bölümü — .chero
   ---------------------------------------------------------------------------
   Videolu ve videosuz dersler bu bloğu paylaşır. Eskiden Bulma'nın
   `.hero .title.is-1` yığınına yaslanıyordu; tipografi üzerinde kontrol yoktu
   ve iki dal birbirinden sapmıştı.
   =========================================================================== */
.chero {
    position: relative;
    /* Masaüstünde tam ekran. Üst menü kahramanın üzerine bindiği için 100vh
       gerçekten ekranın tamamına denk geliyor. svh, mobil tarayıcıların
       açılıp kapanan adres çubuğunda zıplamayı önler. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: #060707;
    /* DİKKAT: bu kutunun ve alt katmanlarının opaklığı 1'in altına
       düşmemeli — oynat düğmesindeki backdrop-filter'ı iptal eder. */
}

.chero-video,
.chero-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center top;
    z-index: 0;
}

/* Perde: metin okunur kalsın, görselin üstü nefes alsın. */
.chero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* 1) Marka renk geçişi — çok düşük opaklıkta, köşegen.
              Amaç görüntüyü boyamak değil; nötr griyi kırıp kareye canlılık
              vermek. Turuncudan pembeye, logodaki sırayla. */
        linear-gradient(126deg,
            rgba(253, 168, 113, .10) 0%,
            rgba(243, 122, 82, .07) 38%,
            rgba(236, 56, 125, .09) 72%,
            rgba(236, 56, 125, .04) 100%),
        /* 2) Okunabilirlik perdesi — üstte menü, altta yazı bloğu için. */
        linear-gradient(180deg,
            rgba(6, 7, 7, .58) 0%,
            rgba(6, 7, 7, .28) 32%,
            rgba(6, 7, 7, .74) 78%,
            rgba(6, 7, 7, .96) 100%),
        /* 3) Yazı bloğunun arkasında sıcak, dağınık bir ışık. */
        radial-gradient(78% 52% at 50% 82%, rgba(243, 122, 82, .13), transparent 70%);
}

.chero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Ders adları uzun; masaüstünde geniş bir sütun iki satıra sığmayı
       kolaylaştırıyor. */
    max-width: 1240px;
    padding: 0 1.5rem 5.5rem;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Oynat düğmesi — site genelindeki camlı düğme
   --------------------------------------------------------------------------- */
.chero-play {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 2.25rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    color: #fff;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1);
}
.chero-play:hover,
.chero-play:focus-visible {
    border-color: rgba(253, 168, 113, .9);
    background: rgba(255, 255, 255, .2);
    transform: scale(1.06);
}
.chero-play svg { width: 32px; height: 32px; fill: currentColor; margin-left: 4px; }

/* ---------------------------------------------------------------------------
   Tipografi
   --------------------------------------------------------------------------- */
.chero-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    /* --chero-title-fit: ders adının uzunluğuna göre PHP'de hesaplanan
       çarpan (0.58–1.0). Tanımlı değilse 1 — davranış değişmez. */
    font-size: clamp(
        calc(2.4rem * var(--chero-title-fit, 1)),
        calc(5.4vw  * var(--chero-title-fit, 1)),
        calc(4.6rem * var(--chero-title-fit, 1))
    );
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    /* text-wrap: balance BİLİNÇLİ OLARAK YOK.
       Dengeleme yalnızca kırpma kapalıyken çalışıyor; ölçüm için kırpmayı
       geçici kaldırınca satırlar dengelenip 2 satır çıkıyor, gerçek kırpılmış
       düzende ise 3 satır oluşup başlık "…" ile kesiliyordu. İki düzenin aynı
       sonucu vermesi, otomatik küçültmenin doğru çalışmasının ön koşulu. */
    margin: 0;
    /* Üç nokta bu kutunun rengiyle çiziliyor — kelimeler ayrı <span>'lerde
       olduğu için ona animasyon uygulanamıyor. Bu yüzden kutunun kendi rengi
       saydam başlayıp SON KELİMEYLE aynı anda beyaza dönüyor; kelimeler kendi
       rengini taşıdığı için etkilenmiyor.
       text-shadow da kelimelere taşındı: saydam metnin gölgesi yine çiziliyor,
       burada kalsaydı üç noktanın bulanık gölgesi baştan görünürdü. */
    color: transparent;
    animation: chero-ellipsis .5s ease both;
    animation-delay: calc(
        var(--chero-title-delay, 0s) + var(--chero-last-word, 0) * var(--chero-word-step, .06s)
    );
    /* Son emniyet. Normalde JS boyu küçültüp iki satıra sığdırıyor; bu kural
       yalnızca JS çalışmazsa ya da uç bir durumda üçüncü satır oluşursa
       devreye giriyor. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Marka degradeli ince ayraç */
.chero-title > span {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
    /* Kelime kelime beliriş. inline-block zorunlu (transform uygulanabilsin
       diye); kelimeler ARASINDAKİ boşluklar metin düğümü olarak kaldığı için
       satır sarması bozulmuyor. Blur bilerek yok: uzun başlıklarda 20+ öğede
       filtre pahalıya patlıyor. */
    display: inline-block;
    opacity: 0;
    transform: translateY(.3em);
    animation: chero-word .55s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: calc(var(--chero-title-delay, 0s) + var(--i, 0) * var(--chero-word-step, .06s));
}
/* --- Başlık üzerinde geçen parlama ---------------------------------------
   Ad ile aynı teknik, aynı kısıtlar:
     - Degrade ANA ÖĞEDE boyanıp tüm gliflere kırpılıyor; bu yüzden kelime
       span'lerinin kendi `color` değeri kaldırılmak zorunda, yoksa üstünü
       örter.
     - Bu da kelime kelime beliriş ile aynı anda çalışamaz demek: span'lerin
       opaklığı, ana öğede yapılan boyamayı gizleyemiyor. Bu yüzden sıralı —
       beliriş bitince `.is-shining` ekleniyor.
     - `animation` kısayolu `chero-ellipsis`in yerine geçiyor; o animasyon
       `both` ile `color: #fff`i sabitliyordu ve animasyon değeri normal
       bildirimleri yendiği için saydamlık uygulanamazdı.
   --------------------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .chero-title.is-shining {
        background-image: linear-gradient(100deg,
            #ffffff 0%, #ffffff 40%,
            #ffd0ae 44%,
            #fda871 47%, #f37a52 50%, #ec387d 53%,
            #ffd0ae 56%,
            #ffffff 60%, #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: chero-shine 7s linear infinite;
    }
    .chero-title.is-shining > span {
        /* Animasyon MUTLAKA sıfırlanmalı. Çalışan/bitmiş bir animasyon span'i
           kendi katmanına ayırıyor; ana öğedeki background-clip: text o
           katmandaki glifleri kırpamıyor ve dolgu saydam olduğu için başlık
           tamamen kayboluyordu. Ad kartında (.chero-tutor-name) aynı sıfırlama
           zaten yapılıyordu, burada atlanmıştı. */
        animation: none;
        opacity: 1;
        transform: none;
        color: inherit;
        -webkit-text-fill-color: inherit;
    }
}

@keyframes chero-ellipsis {
    from { color: transparent; }
    to   { color: #fff; }
}
@keyframes chero-word {
    from { opacity: 0; transform: translateY(.3em); }
    to   { opacity: 1; transform: none; }
}

.chero-rule {
    width: 112px;
    height: 2px;
    margin: 1.7rem auto 1.6rem;
    border-radius: 2px;
    background: linear-gradient(90deg, #fda871 0%, #f37a52 50%, #ec387d 100%);
    /* Ortadan iki yana açılıyor. width yerine transform: layout tetiklemez,
       başlık ölçüm/sığdırma döngüsüyle çakışmaz. */
    transform: scaleX(0);
    animation: chero-rule .55s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: var(--chero-rule-delay, 0s);
}
@keyframes chero-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes chero-fade {
    from { opacity: 0; transform: translateY(.3em); }
    to   { opacity: 1; transform: none; }
}

.chero-tutor {
    margin: 0;
    line-height: 1.25;
}
.chero-tutor-prefix {
    /* Unvan adın parçası; adla aynı anda geliyor. */
    animation: chero-fade .5s ease both;
    animation-delay: var(--chero-name-delay, 0s);
    display: block;
    font-size: clamp(.82rem, 1.25vw, 1.02rem);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin-bottom: .5rem;
}
.chero-tutor-name {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.9vw, 2.45rem);
    letter-spacing: .01em;
    color: #fff;
}

/* --- Adın belirişi: önce harf harf, sonra parlama ---------------------------
   İki etki AYNI ANDA çalışamaz. Parlama, background-clip: text ile ADIN
   ÜZERİNDE (ana öğede) boyanır; harflerin kendi opaklığı bu boyamayı
   gizleyemez, çünkü boyama ana öğe düzeyinde yapılıp tüm glifler üzerinden
   kırpılıyor. Bu yüzden sıra ile: harfler belirirken ad düz beyaz, beliriş
   bitince `.is-shining` eklenip parlamaya geçiliyor. */
.chero-tutor-name > span {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translateY(.34em);
    filter: blur(6px);
    animation: chero-letter .5s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: calc(var(--chero-name-delay, 0s) + var(--i, 0) * .045s);
}
@keyframes chero-letter {
    from { opacity: 0; transform: translateY(.34em); filter: blur(6px); }
    to   { opacity: 1; transform: none;              filter: none; }
}

/* Parlama devreye girdiğinde harf animasyonu tamamen çekilir. */
.chero-tutor-name.is-shining > span {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
}

/* Parlama; background-clip: text metni saydamlaştırdığı için yalnızca
   desteklendiğinde uygulanır — desteklenmeyen tarayıcıda ad düz beyaz kalır,
   kaybolmaz. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .chero-tutor-name.is-shining {
        /* Parlama bandı gerçekten turuncu olsun. Önceki tonlar (#ffd9c4 /
           #ffbe9c) beyazın yanında sadece "sıcak beyaz" gibi okunuyordu;
           bant artık logonun turuncusuna iniyor ve ortasında pembeye
           dokunuyor. Bant dar tutuldu ki ad beyaz kalsın, üzerinden renk
           GEÇSİN. */
        background-image: linear-gradient(100deg,
            #ffffff 0%, #ffffff 40%,
            #ffd0ae 44%,
            #fda871 47%, #f37a52 50%, #ec387d 53%,
            #ffd0ae 56%,
            #ffffff 60%, #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: chero-shine 6s linear infinite;
    }
}
/* DİKKAT: konum 0%–100% aralığının DIŞINA çıkmamalı.
   Degrade `no-repeat` ve kutudan geniş olduğu için, bu aralıkta metin her
   zaman tamamen boyanır. 150%/-50% gibi değerlerde degradenin ucu metnin
   üstünden kayıyor, boyanmayan harfler background-clip:text yüzünden
   saydam kalıp kayboluyordu ("Selçuk TU" görünmüyordu). */
@keyframes chero-shine {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

.chero-motto {
    position: relative;
    max-width: 760px;
    margin: 2rem auto 0;
    padding-top: 1.9rem;
    font-family: "Karla", sans-serif;
    font-size: clamp(
        calc(1.2rem * var(--chero-motto-fit, 1)),
        calc(2.05vw * var(--chero-motto-fit, 1)),
        calc(1.7rem * var(--chero-motto-fit, 1))
    );
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    /* Vurgu: gövde metni tonundan çıkarılıp neredeyse tam beyaza alındı ve
       tırnaklar marka turuncusunda. Alıntı gibi okunması isteniyor. */
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.chero-motto::after {
    /* Tipografik tırnaklar — metnin kendisine dokunmadan alıntı hissi verir. */
    content: "";
}
.chero-motto-mark {
    color: #fda871;
    font-style: normal;
    font-weight: 700;
    padding: 0 .12em;
}
/* Motto'nun üstünde ortadan sönen ince çizgi */
.chero-motto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    opacity: 0;
    animation: chero-fade-only .55s ease both;
    animation-delay: var(--chero-rule-delay, 0s);
}
@keyframes chero-fade-only {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Motto METNİ sıranın en sonunda. Çizgisinden ayrı bir kapta olmasının
   nedeni bu: çizgi erken, metin en son.

   İki satır kırpması da BURADA, <p> üzerinde değil. Üç noktayı kırpmayı
   taşıyan kutu çiziyor; <p> üzerindeyken metin daha belirmeden üç nokta tek
   başına ekranda duruyordu. Aynı kutuya alınınca metinle birlikte beliriyor. */
.chero-motto-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: chero-fade .6s cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: var(--chero-motto-delay, 0s);
}

/* Mobilde video yerine kapak görseli: hücresel bağlantıda arka planda dönen
   bir video hem bant genişliği hem pil maliyeti. Masaüstünde tam tersi. */
.chero-still--mobil { display: none; }
@media (max-width: 768px) {
    .chero--video .chero-video { display: none; }
    .chero-still--mobil { display: block; }

    .chero { min-height: 82vh; min-height: 82svh; }
    .chero-inner { padding-bottom: 3.5rem; }
    .chero-play { width: 66px; height: 66px; margin-bottom: 1.6rem; }
    .chero-play svg { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .chero-tutor-name { animation: none; }
    .chero-tutor-name > span { animation: none; opacity: 1; transform: none; filter: none; }
    .chero-title > span { animation: none; opacity: 1; transform: none; }
    .chero-title { animation: none; color: #fff; }
    .chero-rule { animation: none; transform: none; }
    .chero-motto::before, .chero-motto-text, .chero-tutor-prefix {
        animation: none; opacity: 1; transform: none;
    }
    .chero-play { transition: none; }
}

/* ============================================================================
   F4 — FAVORİ YILDIZI (fav_star.php + fav-note.js)
   Bu sayfa public-ui.css YÜKLEMİYOR; oradaki .fav-star bloğunun birebir
   kopyası. Stil olmadan buton tarayıcı varsayılanında (beyaz kutu) kalıyordu.
   ========================================================================== */
.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; }