/* ===========================================================================
   Sertifika programı detay sayfası — /certificate-programs/{slug}
   ---------------------------------------------------------------------------
   Betik bağlantı noktaları korunmuştur: `.btn-basket` (data-id),
   `.mall-cart-count`.
   =========================================================================== */

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

/* ---------------------------------------------------------------------------
   Programa göre renklenme — `--crt-*`
   ---------------------------------------------------------------------------
   Sayfadaki her vurgu (çerçeve, halka, ışıma, rozet, adım numarası, bağlantı,
   düğme) sabit marka turuncusu yerine bu değişkenlerden besleniyor. Değerler
   programın yönetim panelinden girilen iki degrade renginden üretiliyor ve
   sayfa düzeyinde `:root` üzerine yazılıyor (bkz. certificate_programs_detail_new.php).

   Her kullanımda ESKİ sabit değer yedek olarak duruyor. Bir program için renk
   girilmemişse ya da bu stil sayfası başka bir yerde kullanılırsa görünüm
   bugünküyle birebir aynı kalıyor.

   Değişkenlerin görevleri:
     --crt-c1 / --crt-c2   Ham degrade durakları. Yalnızca metin binmeyen
                           süslemelerde (aurora, ikon halkası) kullanılır.
     --crt-a-rgb           Baskın rengin KANALLARI. `rgba(var(--crt-a-rgb), .28)`
                           yazımı, mevcut onlarca kuraldaki saydamlık
                           değerlerinin tasarlandığı gibi kalmasını sağlıyor.
     --crt-b-rgb           İkincil rengin kanalları.
     --crt-ink             Koyu zeminde okunabilir vurgu metni rengi (AA).
     --crt-g1/g2/g3        Degrade metin durakları (başlık bandı, adım numarası).
     --crt-fill1/fill2     DOLU zeminler; üzerinde beyaz metin olduğu için
                           aydınlatılmaz, koyulaştırılır.
   --------------------------------------------------------------------------- */

.crt { background-color: #0b0c0c; position: relative; }
.crt > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Başlık alanı
   --------------------------------------------------------------------------- */
.crt-hero {
    padding-top: 7rem;
    padding-bottom: 3.5rem;
    overflow: hidden;
}
/* Programın kapak görseli bulanık ve koyu bir zemin olarak kullanılıyor;
   eskiden `data-background` ile keskin basılıyor, yazılar okunmuyordu. */
.crt-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--crt-cover);
    background-size: cover;
    background-position: center;
    opacity: .3;
    filter: blur(2px) saturate(115%);
}
.crt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(11, 12, 12, .78) 0%, rgba(11, 12, 12, .9) 55%, #0b0c0c 100%);
}

.crt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 2.5rem;
    align-items: center;
    margin-top: 1.25rem;
}
.crt-hero-text { min-width: 0; }

.crt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .8rem;
    border-radius: 999px;
    /* NÖTR rozet — liste kartlarındaki `.certcard-badge` ile aynı dil.
       Programın rengini taşıyordu (hem çerçeve hem yazı) ve başlığın hemen
       üstünde ikinci bir renkli blok oluşturuyordu; kahraman alanı boğuluyordu.
       Artık buzlu cam yüzey + ince beyaz kenarlık, renk yalnızca başlıkta. */
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #d5d9d9;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.crt-eyebrow svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.crt-title {
    margin: 1rem 0 0;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
}
/* Başlıkta gezen parlama — anasayfadaki "Kurumunuz da bu listede yer alsın"
   ifadesiyle birebir aynı teknik ve aynı degrade. 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. */
.crt-title span {
    /* `inline-block` + `fit-content` ŞART: h1 blok seviyesinde ve sütunun tüm
       genişliğine (660px) yayılıyor. Degrade o kutuya göre ölçeklenseydi
       harflere yalnızca ilk parçası düşer, parlama bandı hiç görünmezdi. */
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .crt-title span {
        /* Başlık ÇOĞUNLUKLA beyaz kalıyor; renk yalnızca gezen ince bantta.
           Programın rengi buraya giriyor (`--crt-g*`), beyaz duraklar
           korunuyor: başlık okunabilirliği renge bağlı değil, bant geçerken
           kısa bir vurgu yaşanıyor. */
        background-image: linear-gradient(100deg,
            #ffffff 0%, #ffffff 38%,
            var(--crt-g1, #ffd0ae) 43%,
            var(--crt-g1, #fda871) 47%, var(--crt-g2, #f37a52) 50%, var(--crt-g3, #ec387d) 53%,
            var(--crt-g1, #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: crt-title-shine 6s linear infinite;
    }
}
@keyframes crt-title-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 */ {
    .crt-title span { animation: none; }
}

.crt-lead {
    max-width: 60ch;
    margin: .85rem 0 0;
    color: var(--crt-muted) !important;
    font-size: 1rem;
    line-height: 1.75;
}

/* Künye çipleri */
.crt-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.crt-stat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}
/* Künye ikonları NÖTR — bkz. `.crt-trust svg` yanındaki not. Bir ara programın
   rengine bağlanmıştı, kahraman alanı fazla doygun hâle geldiği için geri
   alındı: rakamlar veri, işaretleri renk taşımıyor. */
.crt-stat svg {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    fill: none; stroke: rgba(255, 255, 255, .7);
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* Satın alma */
.crt-buy { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-top: 1.6rem; }
.crt .crt-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: 50px;
    padding: 0 1.6rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
    transition: border-color .25s ease, background .25s ease;
}
.crt .crt-btn--primary {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .6) !important;
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .2) !important;
}
.crt .crt-btn--primary:hover { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .95) !important; background: rgba(var(--crt-a-rgb, 243, 122, 82), .32) !important; }
.crt .crt-btn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.crt-price { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.crt-price-old { color: var(--crt-dim); font-size: .82rem; font-weight: 600; text-decoration: line-through; }
.crt-buy-note { color: var(--crt-dim); font-size: .82rem; }

.crt-hero-icon { display: flex; justify-content: center; }
.crt-hero-icon img { width: 100%; max-width: 220px; height: auto; }

/* ---------------------------------------------------------------------------
   Program hakkında
   --------------------------------------------------------------------------- */
.crt-panel {
    padding: 1.6rem 1.75rem;
    border-radius: 1.15rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
}
/* Yönetim panelinden gelen zengin metin — genel `p{}` ezmeleri yerine
   burada kapsanıyor. */
.crt-prose { color: var(--crt-muted); font-size: .96rem; line-height: 1.85; }
.crt-prose p { margin: 0 0 1rem; color: var(--crt-muted) !important; text-align: left !important; }
.crt-prose p:last-child { margin-bottom: 0; }
.crt-prose strong, .crt-prose b { color: #fff !important; }
.crt-prose a { color: var(--crt-accent) !important; font-weight: 600; }
.crt-prose ul, .crt-prose ol { margin: .5rem 0 1rem 1.25rem; list-style: disc; }
.crt-prose ol { list-style: decimal; }
.crt-prose li { margin-bottom: .4rem; }
.crt-prose img { max-width: 100%; height: auto; border-radius: .75rem; }

/* ---------------------------------------------------------------------------
   Eğitim kartları
   --------------------------------------------------------------------------- */
/* Eğitim rayı — masaüstünde üç tam kart ve dördüncünün bir bölümü. */
.pub-slider--crt .pub-slider-track {
    grid-auto-columns: calc((100% - 3rem) / 3.4);
    gap: 1rem;
    padding-bottom: .5rem;
}
@media screen and (max-width: 1023px) {
    .pub-slider--crt .pub-slider-track { grid-auto-columns: calc((100% - 1rem) / 1.9); }
}
@media screen and (max-width: 600px) {
    .pub-slider--crt .pub-slider-track { grid-auto-columns: 84%; }
}
.crt-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    transition: border-color .28s ease, box-shadow .28s ease;
}
.crt-card:hover,
.crt-card:focus-visible {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .7);
    box-shadow: 0 0 0 1px rgba(var(--crt-a-rgb, 243, 122, 82), .28),
                0 24px 50px -32px rgba(var(--crt-a-rgb, 243, 122, 82), .85);
}
.crt-card-media { position: relative; display: block; overflow: hidden; background: #16191a; }
/* Eski kartlarda görseller `border-radius: 50px` ile basılıyordu. */
.crt-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.crt-card:hover .crt-card-media img { transform: scale(1.04); }

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

.crt-card-body { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; padding: .95rem 1.05rem 1.05rem; }
.crt-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff !important;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.crt-card-len {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--crt-dim) !important;
    font-size: .78rem;
    font-weight: 600;
}
.crt-card-len svg {
    width: 13px; height: 13px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.crt-card-ins {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: .55rem;
    border-top: 1px solid var(--crt-line);
    min-width: 0;
    color: var(--crt-muted) !important;
    font-size: .79rem;
    font-weight: 600;
}
.crt-card-ins span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-card-ins img {
    width: 24px !important; height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2b2f2f;
}

/* Eğitmen rayı ana sayfadaki `--sm` ölçüsünü kullanır. */

/* ---------------------------------------------------------------------------
   Kimler İçin? / Belgelendirme
   --------------------------------------------------------------------------- */
.crt-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1.25rem;
}
/* Bu bölümün `subpage/*-kimler-icin.png` ve `*-belgelendirme.png` görselleri
   yalnızca bölüm başlığının resmedilmiş hâliydi ("Belgelendirme" yazısı,
   soru işareti vb.). Arka plana alındığında başlığın hayaleti gibi
   tekrarlanıyor, metnin okunurluğunu da düşürüyordu; tamamen kaldırıldı. */
.crt-info-card {
    display: flex;
    flex-direction: column;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
}
.crt-info-body {
    padding: 1.6rem;
    /* Metin filigranın ÜSTÜNDE kalmalı. */
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   Köşe filigranı
   ---------------------------------------------------------------------------
   Kartın kendi ikonu, sağ alt köşede çapraz ve çok soluk. Amaç kutuya kimlik
   vermek; okumayı hiçbir noktada zorlaştırmamak.

   Ölçüler:
   • Kontur 0,9 — ikon 19px'ten 168px'e çıkıyor, aynı kalınlık kalın bir
     çerçeveye dönüşürdü. İnce kontur büyük ölçekte zarif durur.
   • Opaklık .09 — köşe boş kalmıyor ama metnin önüne de geçmiyor.
     Tarayıcıda ölçülen gövde metni kontrastı:
       düz panel üzerinde ................. 7,03:1
       parıltının üzerinde ................ 6,07:1
       parıltı + filigran konturu üzerinde  4,94:1   (en kötü durum)
     Üçü de WCAG AA eşiğinin (4,5) üstünde. Parıltı ilk denemede .14'tü ve
     en kötü durumu 4,69'a düşürüyordu — eşiğe fazla yakın olduğu için
     .11'e çekildi.
   • Köşeden taşıyor (-26/-30px): tamamı görünseydi "yapıştırılmış rozet"
     gibi durur; kırpılınca desenin devam ettiği hissi veriyor. Kart zaten
     `overflow: hidden`.
   • -16° eğim: ızgaradaki dik çizgilerden ayrışsın, hareket hissi versin.

   Işık: köşeden içeri doğru sönen çok hafif bir marka parıltısı. Filigranın
   arkasında durduğu için ikon "aydınlanmış" gibi okunuyor. */
.crt-info-card { position: relative; }
.crt-info-card::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -34%;
    width: 78%;
    padding-bottom: 78%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--crt-a-rgb, 243, 122, 82), .11) 0%,
        rgba(var(--crt-a-rgb, 243, 122, 82), .05) 42%,
        rgba(var(--crt-a-rgb, 243, 122, 82), 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.crt-info-mark {
    position: absolute;
    right: -26px;
    bottom: -30px;
    z-index: 0;
    display: block;
    width: 168px;
    height: 168px;
    transform: rotate(-16deg);
    pointer-events: none;
}
.crt-info-mark svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--crt-ink, #ffbe9c);
    stroke-width: .9;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .09;
}

@media screen and (max-width: 600px) {
    /* Dar kartta metin sütunu daralıyor; filigran küçülmezse yazının
       arkasında fazla yer kaplıyor. */
    .crt-info-mark { width: 128px; height: 128px; right: -20px; bottom: -24px; }
}

/* DİKKAT: Bu kurallar bir düzenlemede yanlışlıkla silinmişti; ikon kutusunu
   almayınca SVG doğal boyutunda çizilip kartı ~800px'e uzatıyordu. */
.crt-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    flex: 0 0 auto;
    margin-bottom: .85rem;
    border-radius: .75rem;
    border: 1px solid rgba(var(--crt-a-rgb, 243, 122, 82), .35);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .12);
    color: var(--crt-ink, #ffbe9c);
}
.crt-info-icon svg {
    width: 19px; height: 19px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.crt-info-title { margin: 0 0 .55rem; color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.crt-info-text { color: var(--crt-muted); font-size: .93rem; line-height: 1.8; }
.crt-info-text p { margin: 0 0 .8rem; color: var(--crt-muted) !important; text-align: left !important; }
.crt-info-text p:last-child { margin-bottom: 0; }
.crt-info-text strong { color: #fff !important; }
.crt-info-text ul { margin: .4rem 0 .8rem 1.15rem; list-style: disc; }
.crt-info-text li { margin-bottom: .35rem; }
.crt-hl { color: var(--crt-ink, #ffbe9c) !important; }

/* ---------------------------------------------------------------------------
   Kapanış
   --------------------------------------------------------------------------- */
.crt-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.85rem 2rem;
    border-radius: 1.35rem;
    border: 1px solid var(--crt-line);
    background:
        radial-gradient(120% 130% at 12% 0%, rgba(var(--crt-a-rgb, 243, 122, 82), .12), transparent 62%),
        var(--crt-panel);
}
.crt-cta-title { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.crt-cta-sub { margin: .35rem 0 0; color: var(--crt-muted); font-size: .9rem; line-height: 1.7; }
.crt-cta .crt-buy { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Küçük ekran
   --------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
    .crt-hero { padding-top: 6rem; padding-bottom: 2.5rem; }
    .crt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .crt-hero-icon { justify-content: flex-start; order: -1; }
    .crt-hero-icon img { max-width: 130px; }
}
@media screen and (max-width: 767px) {
    /* Mobil başlık İKİ katlı: logo çubuğu (67px) + sabit alt gezinme (64px),
       yığın 131px'te bitiyor. 5.5rem (88px) kırıntıyı alt gezinmenin altında
       bırakıyordu; 10rem tablet kırılımıyla aynı ~29px nefes payını verir. */
    .crt-hero { padding-top: 10rem; padding-bottom: 2rem; }
    .crt-stat { height: 34px; padding: 0 .75rem; font-size: .76rem; }
    .crt-panel { padding: 1.15rem; }
    .crt-info { grid-template-columns: minmax(0, 1fr); }
    .crt-info-body { padding: 1.25rem 1.15rem 1.35rem; }
    .crt-cta { padding: 1.35rem 1.15rem; }
    .crt .crt-btn { width: 100%; }
    .crt-buy { width: 100%; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .crt .crt-btn, .crt-card, .crt-card-media img, .crt-card-play { transition: none; }
    .crt-card:hover .crt-card-media img { transform: none; }
}

/* ===========================================================================
   Bölüm zeminleri ve turuncu vurgu
   ---------------------------------------------------------------------------
   Ana sayfadaki `.pub-sec--*` diliyle aynı; başlıklarda logoyla uyumlu,
   abartısız turuncu geçiş.
   =========================================================================== */
.crt.pub-band { position: relative; overflow: hidden; }
.crt.pub-band > * { position: relative; z-index: 1; }

/* Sıcak köşe parlaması — bir bölüm atlayarak uygulanır. */
.crt-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 340px at 16% -12%, rgba(var(--crt-a-rgb, 243, 122, 82), .12), transparent 62%),
        radial-gradient(680px 320px at 86% -4%, rgba(var(--crt-b-rgb, 236, 56, 125), .1), transparent 60%);
}
/* Bölüm başında uçlarda sönümlenen ince hat. */
.crt-seam::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0; right: 0;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 6%,
        rgba(var(--crt-a-rgb, 243, 122, 82), .3) 34%,
        rgba(var(--crt-a-rgb, 253, 168, 113), .22) 66%,
        transparent 94%);
}
.crt-soft { background-image: linear-gradient(rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 22%); }

/* Bölüm başlıklarında ölçülü renk geçişi — beyazdan programın rengine.
   Degrade %0'da BEYAZ başlıyor ve rengi ancak sonuna doğru alıyor: başlığın
   büyük kısmı beyaz kaldığı için okunabilirlik programın rengine bağlı
   değil, renk yalnızca son hecelerde bir imza gibi görünüyor.

   Bu kural `public-ui.css`'teki `.catrow-title`'ı EZMİYOR, yalnızca `.crt`
   bölümlerinin içinde geçerli — aynı bileşen anasayfada, kategorilerde ve
   aramada kullanılıyor ve oralarda beyaz kalması gerekiyor. */
.crt .catrow-title {
    background-image: linear-gradient(92deg,
        #ffffff 0%,
        var(--crt-ink, #ffd9c2) 58%,
        var(--crt-g3, #f9a877) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Sayaç degradeye dâhil olmasın. */
.crt .catrow-count {
    -webkit-text-fill-color: var(--crt-dim);
    background: none;
}

/* Eğitmen fotoğraflarının üzerindeki renk perdesi de programın rengine
   döner. `public-ui.css`'te sabit turuncu; burada `.crt` kapsamında
   değişkene bağlanıyor, diğer sayfalarda turuncu kalıyor. */
.crt .ins-card-tint {
    background:
        linear-gradient(155deg, rgba(var(--crt-a-rgb, 243, 122, 82), .16) 0%, rgba(var(--crt-a-rgb, 243, 122, 82), 0) 46%),
        linear-gradient(30deg,  rgba(var(--crt-b-rgb, 243, 122, 82), .12) 0%, rgba(var(--crt-b-rgb, 243, 122, 82), 0) 42%);
}

/* ===========================================================================
   Premium katman — aurora, hareket, adım şeridi, yapışkan satın alma
   ---------------------------------------------------------------------------
   Renkler programın kendi `color_1`/`color_2` değerlerinden gelir
   (`--crt-c1` / `--crt-c2`), böylece her program sayfası kendine ait durur.
   =========================================================================== */

/* --- Kahraman aurorası -------------------------------------------------- */
.crt-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 140%;
    z-index: 0;
    pointer-events: none;
    filter: blur(60px);
    opacity: .5;
}
.crt-aurora span {
    position: absolute;
    display: block;
    width: 46vw; max-width: 620px;
    aspect-ratio: 1;
    border-radius: 50%;
}
.crt-aurora span:first-child {
    top: -12%; left: -4%;
    background: radial-gradient(circle, var(--crt-c1, #f37a52) 0%, transparent 68%);
    animation: crt-drift-a 22s ease-in-out infinite alternate;
}
.crt-aurora span:last-child {
    top: -22%; right: -6%;
    background: radial-gradient(circle, var(--crt-c2, #f37a52) 0%, transparent 68%);
    animation: crt-drift-b 26s ease-in-out infinite alternate;
}
@keyframes crt-drift-a { to { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes crt-drift-b { to { transform: translate3d(-7%, 6%, 0) scale(1.08); } }

/* Kapak görseli aurorayla birlikte daha sakin. */
.crt-hero-bg { opacity: .18; }

/* --- Program ikonu ------------------------------------------------------ */
.crt-hero-icon { position: relative; }
.crt-hero-icon img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .55));
    animation: crt-float 7s ease-in-out infinite alternate;
}
@keyframes crt-float { to { transform: translateY(-10px); } }
/* İkonun arkasındaki degrade halka ve yumuşak ışıma. */
.crt-icon-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 260px; height: 260px;
    max-width: 92%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .06) 0%, transparent 62%),
        conic-gradient(from 210deg, var(--crt-c1, #f37a52), var(--crt-c2, #f37a52), var(--crt-c1, #f37a52));
    opacity: .22;
    filter: blur(2px);
    animation: crt-spin 26s linear infinite;
}
@keyframes crt-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* --- Güven satırı ------------------------------------------------------- */
.crt-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.35rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}
.crt-trust li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--crt-muted);
    font-size: .82rem;
    font-weight: 600;
}
/* Güven satırı ikonları NÖTR. Kahraman alanında programın rengini taşıyan
   üç şey var: başlık, ikon ve satın alma düğmesi. Rozet, künye çipleri ve bu
   satır da renklenince alan boğuluyordu — göz nereye bakacağını bulamıyor.
   Bu yüzden kahramanın "kroniği" gri/beyaz kalıyor, renk yalnızca hiyerarşinin
   tepesindeki üç ögede. */
.crt-trust svg {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    fill: none; stroke: rgba(255, 255, 255, .55);
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Giriş animasyonu (kahraman) --------------------------------------- */
[data-rise] { animation: crt-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
[data-rise="1"] { animation-delay: .04s; }
[data-rise="2"] { animation-delay: .12s; }
[data-rise="3"] { animation-delay: .2s; }
[data-rise="4"] { animation-delay: .28s; }
[data-rise="5"] { animation-delay: .36s; }
[data-rise="6"] { animation-delay: .44s; }
@keyframes crt-rise { from { opacity: 0; transform: translateY(16px); } }

/* --- Kaydırma ile beliriş ---------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- Adım şeridi -------------------------------------------------------- */
.crt-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Adımları birbirine bağlayan ince hat. */
.crt-steps::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 18%, rgba(255, 255, 255, .14) 82%, transparent);
}
.crt-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem 1.25rem 1.4rem;
    border-radius: 1.15rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.crt-step:hover {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .5);
    box-shadow: 0 20px 44px -34px rgba(var(--crt-a-rgb, 243, 122, 82), .9);
}
/* Arka plan/kenarlık yok — rakam doğrudan sitenin marka degradesiyle
   boyanmış saf tipografi. Aynı degrade başlıklarda, rozetlerde ve
   düğmelerde kullanılıyor; sayfanın geri kalanıyla tek dil.
   `line-height: 1` ve `width: fit-content` ŞART: `background-clip: text`
   degradeyi ELEMANIN kutusuna göre ölçekler, glife göre değil. Kutu
   metinden genişse rakama degradenin yalnızca ilk parçası düşer. */
.crt-step-no {
    position: absolute;
    top: .95rem; right: 1.15rem;
    width: fit-content;
    /* Tek haneli rakamın kutusu 15px kalıyordu; altındaki çizgi o genişlikte
       bir güdük gibi duruyor. Alt sınır verip rakamı ortalıyoruz — çizgi
       dengeli bir işaret oluyor, degrade yine tüm kutuyu boyuyor. */
    min-width: 1em;
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    /* Rakamın altına ince marka çizgisi — kartın sağ üst köşesini
       "numaralandırılmış" hissettiren, kutulamayan bir işaret. */
    padding-bottom: .3rem;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, rgba(var(--crt-a-rgb, 253, 168, 113), .9), rgba(var(--crt-b-rgb, 236, 56, 125), .35)) 1;
    pointer-events: none;
}
.crt-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    margin-bottom: .9rem;
    border-radius: .85rem;
    border: 1px solid rgba(var(--crt-a-rgb, 243, 122, 82), .3);
    background:
        linear-gradient(140deg, rgba(var(--crt-a-rgb, 243, 122, 82), .18), rgba(var(--crt-a-rgb, 243, 122, 82), .05));
    color: var(--crt-ink, #ffbe9c);
}
.crt-step-icon svg {
    width: 21px; height: 21px;
    fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.crt-step-title { color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.crt-step-text { margin-top: .35rem; color: var(--crt-muted); font-size: .84rem; line-height: 1.65; }

/* --- Yapışkan satın alma çubuğu ---------------------------------------- */
.crt-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: .7rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: rgba(10, 12, 12, .82);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.crt-bar.is-in { transform: none; }
.crt-bar[hidden] { display: none; }
.crt-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.crt-bar-meta { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.crt-bar-meta img { width: 40px !important; height: 40px; flex: 0 0 auto; object-fit: contain; }
.crt-bar-meta span { display: block; min-width: 0; }
.crt-bar-meta strong {
    display: block;
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crt-bar-meta small { display: block; color: var(--crt-dim); font-size: .76rem; }
.crt-bar .crt-btn { height: 44px; }
/* NOT: `.crt-bar` sayfa gövdesinin sonunda, `.crt` kapsayıcısının dışında;
   bu yüzden çubuğa ait kurallar `.crt` önekiyle YAZILMAMALI. */

@media screen and (max-width: 1023px) {
    .crt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crt-steps::before { content: none; }
    .crt-icon-ring { width: 200px; height: 200px; }
    /* Bulma `.container` bu genişlikte oluksuz — çubuk içeriği ekran kenarına
       yapışıyordu. Sayfa içeriğinin 1.5rem oluğuyla hizalanır. */
    .crt-bar-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media screen and (max-width: 767px) {
    .crt-steps { grid-template-columns: minmax(0, 1fr); }
    .crt-trust { gap: .45rem .9rem; }
    .crt-trust li { font-size: .78rem; }
    .crt-bar-meta small { display: none; }
    .crt-bar-meta img { width: 34px !important; height: 34px; }
    .crt-bar .crt-btn { padding: 0 1.1rem !important; }
    .crt-aurora { filter: blur(46px); opacity: .42; }
}

/* Hareket azaltma: hiçbir şey oynamaz, her şey görünür. */
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .crt-aurora span, .crt-hero-icon img, .crt-icon-ring { animation: none; }
    [data-rise] { animation: none; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .crt-bar { transition: none; }
    .crt-step { transition: none; }
}

/* ===========================================================================
   Breadcrumb
   ---------------------------------------------------------------------------
   Bu sayfa `dash-ui.css` yüklemediği için `.account-breadcrumb` Bulma'nın
   varsayılanına düşüyordu: turuncu bağlantılar ve düz "/" ayracı.
   =========================================================================== */
.crt .account-breadcrumb { display: inline-block; margin-bottom: 1.5rem !important; font-family: inherit; }
.crt .account-breadcrumb ul {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
    margin: 0;
    padding: .3rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    list-style: none;
}
.crt .account-breadcrumb li { display: inline-flex; align-items: center; }
/* Bulma'nın "/" ayracı yerine ince ok. */
.crt .account-breadcrumb li + li::before {
    content: "";
    width: 6px; height: 6px;
    margin: 0 .45rem 0 .3rem;
    border-right: 1.6px solid #5a6161;
    border-bottom: 1.6px solid #5a6161;
    transform: rotate(-45deg);
}
.crt .account-breadcrumb li + li::after { content: none; }
.crt .account-breadcrumb li a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem !important;
    border-radius: 999px;
    color: var(--crt-muted) !important;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    transition: color .25s ease, background .25s ease;
}
.crt .account-breadcrumb li:not(.is-active) a:hover { color: #fff !important; background: rgba(255, 255, 255, .07); }
.crt .account-breadcrumb li.is-active a {
    color: #ffd9c2 !important;
    background: linear-gradient(92deg, rgba(var(--crt-a-rgb, 243, 122, 82), .2), rgba(var(--crt-b-rgb, 236, 56, 125), .2));
    cursor: default;
}
.crt .account-breadcrumb li a svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Mobilde hap TEK satır kalır: uzun program adı ikinci satıra kırılıp haptan
   taşacağına üç noktayla kısalır (mikro detayı da bu kuralları paylaşıyor). */
@media screen and (max-width: 767px) {
    .crt .account-breadcrumb { max-width: 100%; }
    .crt .account-breadcrumb ul { flex-wrap: nowrap; max-width: 100%; }
    /* Yalnızca etkin öğe daralır; üst kırıntılar ("Sertifika Programları",
       "Finans"…) tam genişliğini korur. */
    .crt .account-breadcrumb li { flex: 0 0 auto; }
    .crt .account-breadcrumb li.is-active { flex: 0 1 auto; min-width: 0; }
    .crt .account-breadcrumb li + li::before { flex: 0 0 auto; }
    .crt .account-breadcrumb li.is-active a {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===========================================================================
   "Nasıl İlerliyor?" — logo paletine geçiş (turuncu → pembe)
   =========================================================================== */
.crt-step-icon {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .35);
    background: linear-gradient(140deg, rgba(var(--crt-a-rgb, 253, 168, 113), .2), rgba(var(--crt-b-rgb, 236, 56, 125), .12));
    color: #ffc3a3;
}
.crt-step:hover {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .55);
    box-shadow: 0 20px 44px -34px rgba(var(--crt-b-rgb, 236, 56, 125), .9);
}
.crt-step:hover .crt-step-icon {
    border-color: rgba(var(--crt-b-rgb, 236, 56, 125), .6);
    color: #ffd9c2;
}
/* Adımları bağlayan hat da marka geçişini taşısın. */
.crt-steps::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--crt-a-rgb, 243, 122, 82), .35) 18%,
        rgba(var(--crt-b-rgb, 236, 56, 125), .35) 82%,
        transparent);
}
/* Köşedeki adım numarası — programın kendi degradesiyle boyanmış metin.
   Yedek renk `#fda871 → #f37a52 → #ec387d`: başlık parlamasında, CTA'da ve
   rozetlerde kullanılan marka degradesinin aynısı. */
.crt-step-no {
    opacity: 1;
    background-image: linear-gradient(120deg,
        var(--crt-g1, #fda871) 0%,
        var(--crt-g2, #f37a52) 52%,
        var(--crt-g3, #ec387d) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Degrade metinde `text-shadow` görünmez — hâle `drop-shadow` ile. */
    filter: drop-shadow(0 0 16px rgba(var(--crt-a-rgb, 243, 122, 82), .3));
    transition: filter .28s ease;
}
.crt-step:hover .crt-step-no {
    filter: drop-shadow(0 0 20px rgba(var(--crt-a-rgb, 243, 122, 82), .55));
}

/* ===========================================================================
   Yapışkan çubuk — fiyat + eylem
   ---------------------------------------------------------------------------
   Fiyat düğmenin içindeydi; rakam eylemle karışıyordu. Artık solda ayrı bir
   fiyat öbeği, sağda marka degradeli tek net eylem var.
   =========================================================================== */
.crt-bar-buy { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }

.crt-bar-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.crt-bar-price-label {
    color: var(--crt-dim);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.crt-bar-price-value {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    margin-top: .15rem;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.crt-bar-price-value small {
    color: var(--crt-dim);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: line-through;
}

/* Eylem — programın degradesi (yedek: logodaki turuncu→pembe geçiş).
   Bu düğme DOLU zeminli ve üzerindeki metin beyaz; bu yüzden diğer yerlerde
   kullanılan aydınlatılmış tonlar değil, `--crt-fill*` (koyulaştırılmış)
   tonlar kullanılıyor. Aksi hâlde açık renkli programlarda (ör. `#d3fe50`)
   beyaz yazı zeminde kaybolurdu. */
.crt-bar .crt-bar-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 46px;
    padding: 0 1.5rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(92deg,
        var(--crt-fill1, #f37a52) 0%,
        var(--crt-fill2, #ec387d) 100%) !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 30px -14px rgba(var(--crt-b-rgb, 236, 56, 125), .85) !important;
    transition: filter .25s ease, box-shadow .25s ease, transform .25s ease;
}
.crt-bar .crt-bar-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 16px 36px -14px rgba(var(--crt-b-rgb, 236, 56, 125), .95) !important;
}
.crt-bar .crt-bar-btn:active { transform: translateY(1px); }
.crt-bar .crt-bar-btn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media screen and (max-width: 767px) {
    .crt-bar-buy { gap: .6rem; }
    .crt-bar-price-label { display: none; }
    .crt-bar-price-value { font-size: 1.05rem; }
    .crt-bar .crt-bar-btn { height: 42px; padding: 0 1.05rem !important; font-size: .85rem !important; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .crt-bar .crt-bar-btn { transition: none; }
}