/* ===========================================================================
   Mikro Yeterlilikler vitrini — /mikro-yeterlilikler
   ---------------------------------------------------------------------------
   Bu dosya micro.css'ten SONRA yükleniyor ve YALNIZCA katalog sayfasını
   etkiliyor (kapsam: `.myp-showcase`).

   DİKKAT — sınıf adı: kapsam ilk denemede `.myp-catalog` idi ve micro.css'te
   AYNI ADLA bir kural var (`display: grid`, program ızgarası). Kök öğe o
   sınıfı alınca sayfa ızgaraya dönüşüp kahraman 278px'lik bir sütuna
   sıkışıyordu. Ad `myp-showcase` olarak değiştirildi. Amaç sayfayı sitenin genel diline
   çekmek; micro modülünün geri kalanı (öğrenme paneli, 50 görünüm) olduğu
   gibi kalıyor.

   NEDEN GEREKTİ
   `micro.css` bilinçli olarak MAVİ bir etkileşim rengi ve SERIF bir vitrin
   yazı tipi seçmiş (kendi yorumlarında yazılı: admin paneliyle aynı kaynak).
   Sitenin herkese açık yüzü ise Montserrat + marka degradesi (#fda871 →
   #f37a52 → #ec387d) kullanıyor; mavi hiçbir yerde geçmiyor. Ziyaretçi bu
   sayfaya gelince başka bir siteye düşmüş gibi oluyordu.
   =========================================================================== */

/* ===========================================================================
   RENK KURALI — SICAK = KİMLİK, SOĞUK = ETKİLEŞİM
   ---------------------------------------------------------------------------
   Sayfanın zemini lacivert/menekşe (`rgba(91,157,255,.2)` ve
   `rgba(139,123,247,.17)`). Bu yüzden ETKİLEŞİM yüzeyleri o aileden:
       hover / etkin hap / düğme / kart çerçevesi / imleç ışığı → #5b9dff
       kenarlık .45 (hover .85) · dolgu .14 (hover .26) · yazı #bcd6ff
   KİMLİK taşıyan öğeler SICAK kalıyor: AKTS etiketi ve belge işareti,
   kahramandaki plaket ve amblem, künye ikonları, bölüm ışımaları. Böylece
   "ne olduğunu" söyleyen şey turuncu, "ne yapabileceğini" söyleyen şey mavi.
   =========================================================================== */

/* --------------------------------------------------------------- 1) Palet
   Belirteçler yeniden tanımlanıyor; micro.css'teki kuralların tamamı bu
   değişkenlerden beslendiği için tek yerden dönüşüyor. */
.myp-showcase {
    /* Marka degradesi (başlıktaki gezen ışık bandı, kapanış çizgisi) SICAK
       kalıyor — kimlik oradan okunuyor. */
    --myp-brand-from: #fda871;
    --myp-brand-to: #ec387d;
    /* ETKİLEŞİM rengi modülün kendi mavisi. Bir süre turuncuydu; sayfanın
       zemini lacivert/menekşe olduğu için vurgular zeminle çelişiyordu.
       Bu belirteç `micro.css`teki onlarca kuralı besliyor (odak halkası
       dâhil: micro.css `.myp-subnav-link:focus-visible`). */
    --myp-accent: #5b9dff;
    --myp-accent-hover: #bcd6ff;
    --myp-accent-soft: rgba(91, 157, 255, .14);
    /* Vurgu zemini üzerindeki metin: #0a1526 / #5b9dff = 7,9:1. */
    --myp-on-accent: #0a1526;
    /* MAVİ CAM — ETİKET ve DÜĞMELERİN ortak reçetesi.
       Bu üçlü zaten öğrenme panelindeki etiket hapında (`.myp-pagehead-etiket`)
       kullanılıyordu; vitrindeki etiketler ve düğmeler ise nötr beyaz camdaydı.
       Aynı sayfa ailesi iki ayrı dil konuşuyordu: panelde mavi, katalogda gri.
       Artık ikisi de buradan besleniyor — tek yerden dönüyor. */
    --myp-cam-cizgi: rgba(91, 157, 255, .38);
    --myp-cam-dolgu: rgba(91, 157, 255, .12);
    --myp-cam-yazi: #bcd6ff;
    --myp-cam-cizgi-hover: rgba(91, 157, 255, .72);
    --myp-cam-dolgu-hover: rgba(91, 157, 255, .2);
    --myp-cam-yazi-hover: #dbe9ff;

    /* ===================================================================
       BAŞLIKLARDA GEZEN IŞIK BANDI — TEK TANIM, İKİ REÇETE
       -------------------------------------------------------------------
       Üç başlık bu bandı kullanıyor: katalog kahramanı (`.myp-hero-brand`),
       program detayı (`.myp-detail-title span`) ve öğrenme paneli
       (`.myp-dash-baslik span`). Duraklar (%38–%62) ve 6 saniyelik hız
       DEĞİŞMEDİ; yalnızca renkler değişiyor.

       GERİ DÖNÜŞ: aşağıdaki iki bloğun yorumunu takas etmek yeterli —
       başka hiçbir yere dokunmaya gerek yok.
       =================================================================== */

    /* ALTIN (eski hâl) — geri almak için bunun yorumunu açıp altındakini kapatın:
    --myp-bant: linear-gradient(100deg,
        #ffffff 0%, #ffffff 38%,
        #ffe487 43%,
        #ffc95e 47%, #ffb03d 50%, #f79a2e 53%,
        #ffe487 57%,
        #ffffff 62%, #ffffff 100%);
    */

    /* LACİVERT–MAVİ (yürürlükte).
       Bir önceki denemede mavi ELENMİŞTİ ve gerekçesi doğruydu: #5b9dff tek
       başına kullanılınca beyaza PARLAKLIK olarak çok yakın kalıyor (1,05 /
       0,33 = 3,2:1), bant beyaz harflerin üzerinde silik bir tül gibi
       görünüyordu. Sorun rengin ailesi değil, DERİNLİĞİYDİ.
       Bandın çekirdeği artık beyazdan belirgin biçimde koyu: #3a72e8 beyaza
       karşı 4,4:1 — harflerin üzerinden geçerken net okunuyor. Zemine karşı
       da 4,0:1, yani koyulaşırken kaybolmuyor (56px/800 başlıkta eşik 3:1).
       Üç kademe bandı "düz mavi leke" olmaktan çıkarıyor:
           #8ecbff  camgöbeğine çalan parlak ön yüz — canlılık buradan gelir,
           #5b9dff  sayfanın kendi etkileşim mavisi (`--myp-accent`),
           #3a72e8  lacivert çekirdek; profil çubuğunun zemin ailesi.
       Amblemin üzerinde dolaşan ışık ALTIN kalıyor: kahramanda sıcak olan
       kimlik (plaket, amblem), soğuk olan ise sayfanın her yerindeki
       etiket–düğme dili. Başlık ikisinin arasında duran beyaz yüzey. */
    --myp-bant: linear-gradient(100deg,
        #ffffff 0%, #ffffff 38%,
        #d6e8ff 43%,
        #8ecbff 47%, #5b9dff 50%, #3a72e8 53%,
        #d6e8ff 57%,
        #ffffff 62%, #ffffff 100%);
    /* Menekşe ve camgöbeği de zeminin ailesine dönüyor. */
    --myp-violet: #b9aeff;
    --myp-cyan: #9ec2ff;
    /* Vitrin başlıkları artık serif değil: sitenin her yerinde Montserrat. */
    --myp-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------- 2) Kahraman
   ---------------------------------------------------------------------------
   İSKELET: sertifika programı detayındaki `crt-hero` (cert-ui.css) — sitenin
   en yeni ve en dolu hero kalıbı. Ortalanmış düz metin bloğu denendi;
   ölçüleri `pubhead` ile birebirdi ama sayfada premium bir NESNE olmadığı
   için boş duruyordu. Buradaki dört aygıt o algıyı taşıyor:
       1) sola hizalı iki sütun (metin + görsel çapa),
       2) buzlu cam hap etiket,
       3) başlıkta GEZEN IŞIK BANDI — başlık %90 beyaz kalır, ince renkli bir
          bant üzerinden geçer (düz degrade değil; o "amatör" duruyordu),
       4) sağda dönen halkanın içinde amblem.
   Arka plan (`.myp-hero` radial ışımaları) DEĞİŞTİRİLMEDİ.
   --------------------------------------------------------------------------- */
.myp-showcase .myp-hero--vitrin { overflow: hidden; }
.myp-showcase .myp-hero-inner { max-width: 1240px; }

.myp-showcase .myp-hero-grid {
    display: grid;
    /* Metin sütunu 660px'te bitiyor (spot zaten 60ch), amblem sütunu kalan
       genişliği alıp ortalanıyor. `1fr 280px` denendi: metin 60ch'te
       durduğu, amblem ise en sağa yapıştığı için ortada ~370px'lik bir
       boşluk kalıyordu. */
    grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    text-align: left;
}
.myp-showcase .myp-hero-text { min-width: 0; }

/* ===== ETİKET ============================================================
   `crt-eyebrow` ile aynı ölçü (.68rem/800/.08em, 14px ikon). Kenarlık yok —
   ayrım malzemede: buzlu cam yüzey + altın yazı. */
.myp-showcase .myp-odul {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    /* Zemin yazının çevresinde geniş bir alan kaplasın — etiket kahramanın
       ilk okunan parçası. Sağ dolgu bir tık geniş: versal yazı son harften
       sonra da harf aralığı kadar boşluk bırakıyor. */
    padding: .72rem 1.75rem .72rem 1.45rem;
    border-radius: 999px;
    border: 0;
    /* Buzlu cam + ılık bir iç ton: düz beyaz tabaka koyu zeminde silik
       kalıyordu, etiketin daha çok göze çarpması gerekiyor. */
    background:
        linear-gradient(96deg, rgba(255, 207, 158, .24) 0%, rgba(255, 255, 255, .11) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
    /* Taban gölgesi KALDIRILDI: etiketin altında turuncu bir yayılma
       bırakıyordu. Etiketi zeminden ayıran şey artık yalnızca buzlu cam
       yüzeyin kendisi. */
    box-shadow: none;
    line-height: 1;
    overflow: hidden;
    isolation: isolate;
}

/* Premium ışık huzmesi: dar, eğik ve yavaş. 5 saniyede bir yüzeyin üstünden
   geçer — konturun etrafına yayılan bir hâle DEĞİL, yüzeyde bir yansıma;
   yazının netliğini bozmuyor. */
.myp-showcase .myp-odul::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -45%;
    width: 26%;
    height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 240, 218, .34) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: mypEtiketIsik 5s ease-in-out 1s infinite;
    pointer-events: none;
}
@keyframes mypEtiketIsik {
    0%, 58% { left: -45%; }
    80%, 100% { left: 120%; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .myp-showcase .myp-odul { background: rgba(255, 255, 255, .11); }
}
.myp-showcase .myp-odul-muhur { display: flex; align-items: center; color: #ffcf9e; flex-shrink: 0; }
.myp-showcase .myp-odul-muhur svg { width: 17px; height: 17px; transform: translateY(-.5px); }
.myp-showcase .myp-odul-yazi {
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    /* Bir tık daha açık altın: etiket kahramanın ilk okunan parçası. */
    color: #ffe3c4;
    background: none;
    -webkit-text-fill-color: #ffe3c4;
    white-space: nowrap;
}

/* ===== MOTTO =============================================================
   Tamamı italik. Yazı tipi Montserrat DEĞİL, Karla: `template.php` içindeki
   yazı tipi isteğinde Montserrat'ın italik kesimi yok (`wght@300…800`, ital
   ekseni tanımsız), italik yazılsaydı tarayıcı harfleri eğerek SAHTE bir
   italik üretirdi. Karla'nın gerçek italiği yüklü ama yalnızca 300
   ağırlığında (`ital,wght@…1,300`) — ağırlık da o yüzden 300.
   Vurgu kaldırıldı: cümlenin tamamı tek bir tonda okunuyor.
   ========================================================================= */
.myp-showcase .myp-hero-motto {
    margin: 1rem 0 0;
    font-family: var(--myp-font-body);
    font-style: italic;
    /* Küçük punto bilinçli: satır büyük harf ve italik; irileştirildiğinde
       (1,4rem denendi) başlıkla yarışıp bağırıyor. Küçük + ince + aralıklı
       versal, premium dizginin kendisi. */
    font-size: clamp(.98rem, 1.5vw, 1.15rem);
    font-weight: 300;
    /* Büyük harfte harfler birbirine yapışır; punto küçüldükçe aralık artar. */
    letter-spacing: .09em;
    /* Büyük harfe CSS ile çevriliyor, metin kaynakta normal yazılı: belge
       `lang="tr"` olduğu için tarayıcı Türkçe kuralını uygular (i → İ) ve
       ekran okuyucu cümleyi harf harf hecelemez. */
    text-transform: uppercase;
    line-height: 1.5;
    /* Kahramandaki sertifika ambleminin altını (#ffe487, bkz.
       `.myp-amblem-isik`; aynı ton süreç ikonlarında ve başlık bandında da
       var). Nötr gri (#dfe4e4) satırı alt metin gibi gösteriyordu; motto
       sayfanın vaadi, amblemle aynı renkte okunmalı. */
    color: #ffe487;
}

/* ===== BAŞLIK ============================================================
   `crt-title` ile birebir aynı teknik: başlık BEYAZ, degradenin içinde ince
   bir renkli bant var ve 6 saniyede bir metnin üzerinden geçiyor. Düz bir
   renk geçişi değil — o yüzden "gökkuşağı" hissi vermiyor.
   `background-clip: text` desteklenmiyorsa başlık düz beyaz kalır. */
.myp-showcase .myp-hero-title { margin: 1.05rem 0 0; }
.myp-showcase .myp-hero-title .myp-hero-brand {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    font-family: var(--myp-font);
    font-style: normal;
    font-weight: 800;
    font-size: clamp(2.05rem, 4.6vw, 3.5rem);
    /* Harf aralığı açıldı: sitenin başlık kuralları sıkı tracking kullanıyor
       (`crt-title` -.02em, `pubhead-title` -.015em) ama bu başlık iki satır ve
       800 ağırlıkta — sıkışınca harfler birbirine giriyordu. 0'a çekildi,
       56px'te karakter başına ~1,2px açılma. */
    letter-spacing: 0;
    line-height: 1.14;
    text-transform: none;
    text-wrap: balance;
    margin: 0;
    padding-bottom: 0;
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .myp-showcase .myp-hero-title .myp-hero-brand {
        /* Bandın renkleri ve gerekçesi tek yerde: palet bölümündeki
           `--myp-bant` (bkz. dosyanın başı). Eski ALTIN reçete orada yorum
           içinde duruyor — geri dönüş tek satırlık takas.
           Duraklar burada DEĞİL, belirtecin içinde: üç başlık aynı bandı
           paylaşıyor, biri değişip ötekiler kalmasın. */
        background-image: var(--myp-bant);
        background-size: 260% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: mypBaslikIsik 6s linear infinite;
    }
}
@keyframes mypBaslikIsik {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

/* ===== KISA AÇIKLAMA ===================================================== */
.myp-showcase .myp-hero-lead {
    max-width: 60ch;
    margin: .85rem 0 0;
    font-size: 1rem;
    line-height: 1.75;
    color: #c9c9d4;
}

/* Gövde metinlerindeki vurgu: beyaz ve kalın. Kahramanın spotunda da, bölüm
   açıklamalarında da aynı sınıf — vurgu sayfanın tek yerinde tanımlı olsun.
   Ağırlık 600: Karla'nın `template.php`de yüklü kesimleri 300/400/500/600/800;
   700 istenseydi tarayıcı bir üsttekine (800) atlardı. 300'lük gövdenin yanında
   600 zaten net bir sıçrama. */
.myp-showcase .myp-guc {
    color: #fff;
    font-weight: 600;
}

/* Ortalanmış hâlin kapanış çizgisi sola hizalı düzende anlamsız. */
.myp-showcase .myp-hero-inner::after { content: none; }

/* ===== GÖRSEL ÇAPA =======================================================
   `crt-hero-icon` + `crt-icon-ring` ikilisinin karşılığı: yavaşça dönen
   koni degrade halka ve içinde mühürlü belge amblemi. */
.myp-showcase .myp-hero-amblem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
/* Halkanın rengi kahramanın KENDİ arka planından alınıyor. Turuncu-pembe koni
   degrade denendi: amblemin durduğu yerde zemin menekşe (`rgba(139,123,247,.17)`,
   760×420 radyal, 88% 6%) olduğu için halka yabancı bir disk gibi duruyordu.
   Artık aynı menekşe-mavi aile ve kenar maskeyle eritiliyor — arka planın
   ışığı amblemin arkasında toplanmış gibi okunuyor. */
.myp-showcase .myp-hero-halka {
    position: absolute;
    left: 50%; top: 50%;
    /* Amblemle birlikte büyüdü (340 → 400): halkanın çizime oranı (~1,54)
       korunuyor, yoksa ışık amblemin arkasında dar bir yaka gibi kalırdı. */
    width: 400px; height: 400px;
    max-width: 96%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .05) 0%, transparent 60%),
        conic-gradient(from 210deg,
            rgba(139, 123, 247, .5),
            rgba(91, 157, 255, .26),
            rgba(139, 123, 247, .5));
    /* Mavi fazla baskındı: hem koni degradedeki payı hem de katmanın toplam
       opaklığı düşürüldü (.6 → .32). Amblemin arkasında ışık var ama artık
       zeminden ayrı bir renk lekesi gibi durmuyor. */
    opacity: .32;
    /* Bulanıklık + kenar maskesi: koni degradenin sert disk kenarı kalkıyor. */
    filter: blur(18px);
    -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 72%);
            mask-image: radial-gradient(circle, #000 42%, transparent 72%);
    animation: mypHalkaDon 26s linear infinite;
}
@keyframes mypHalkaDon { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* ÖLÇÜ: kutu 215 → 260px. Çizimin içeriği 120'lik ızgarada 24–108 arasını
   dolduruyor, yani kutunun yalnızca %75'i; 215px'lik kutuda ekranda görünen
   amblem ~161px kalıyordu. Sertifika programı detayındaki kahraman ikonu
   (cert-ui.css `.crt-hero-icon img`, 220px) yanında belirgin biçimde küçüktü.
   260px'lik kutuda görünen yükseklik ~195px: iki kahraman aynı bantta. */
.myp-showcase .myp-hero-amblem-cizim {
    position: relative;
    width: 260px;
    height: 260px;
    color: #ffcf9e;
}

/* Çizginin üzerinden kayan sarı ışık.
   Üst kat alttakiyle aynı yolları taşır; `stroke-dasharray: 16 84` ile yolun
   yalnızca %16'sı boyanır ve `stroke-dashoffset` 100'den 0'a giderek o parça
   yolun üzerinde dolaşır. Yollarda `pathLength="100"` olduğu için oran her
   parçada eşit.
   Not: ışık ALTTAKİ çizimi değiştirmiyor — ikonun kendi netliği yerinde
   kalıyor, hareket eden yalnızca üstteki parlak parça. */
.myp-showcase .myp-amblem-isik > g > * {
    stroke: #ffe487;
    stroke-width: 2.6;
    stroke-dasharray: 16 84;
    stroke-dashoffset: 100;
    animation: mypAmblemIsik 4.2s linear infinite;
    /* Işığın kendisi hafifçe parlıyor; hâle YALNIZCA hareket eden parçada,
       çizimin geri kalanında değil. */
    filter: drop-shadow(0 0 3px rgba(255, 220, 120, .55));
}
@keyframes mypAmblemIsik {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}
/* Gecikmeler: ışık belgeden başlayıp satırlara, oradan mühür–kurdele–yıldıza
   geçiyor. Aynı anda başlasalardı yedi ayrı nokta birlikte koşardı. */
/* Özgüllük notu: yukarıdaki kural `animation` KISAYOLUNU yazıyor, yani
   `animation-delay: 0s` de içeriyor ve seçicisi (0,2,1). Gecikme kuralları
   `g.` ile (0,3,1)'e çıkarılmasa hepsi sıfırlanıyordu (ölçüldü: yedi yolun
   yedisi de 0s). */
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-0 > * { animation-delay: 0s; }
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-1 > * { animation-delay: .35s; }
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-2 > * { animation-delay: .5s; }
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-3 > * { animation-delay: .65s; }
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-4 > * { animation-delay: .95s; }
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-5 > * { animation-delay: 1.2s; }
.myp-showcase .myp-amblem-isik > g.myp-amblem-isik-6 > * { animation-delay: 1.45s; }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-showcase .myp-amblem-isik { display: none; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-showcase .myp-hero-title .myp-hero-brand { animation: none; }
    .myp-showcase .myp-hero-halka { animation: none; }
    .myp-showcase .myp-odul::after { animation: none; opacity: 0; }
}

/* --- Sahneye giriş ------------------------------------------------------- */
@keyframes mypKahramanYuksel {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.myp-showcase .myp-odul,
.myp-showcase .myp-hero-motto,
.myp-showcase .myp-hero-title,
.myp-showcase .myp-hero-lead,
.myp-showcase .myp-hero-amblem {
    animation: mypKahramanYuksel .58s cubic-bezier(.22, .61, .36, 1) both;
}
.myp-showcase .myp-hero-motto { animation-delay: .07s; }
.myp-showcase .myp-hero-title { animation-delay: .14s; }
.myp-showcase .myp-hero-lead { animation-delay: .21s; }
.myp-showcase .myp-hero-amblem { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-showcase .myp-odul,
    .myp-showcase .myp-hero-motto,
    .myp-showcase .myp-hero-title,
    .myp-showcase .myp-hero-lead,
    .myp-showcase .myp-hero-amblem { animation: none; }
}

@media screen and (max-width: 900px) {
    .myp-showcase .myp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    /* Amblem üste alınıp küçülüyor; dar ekranda metnin altında kalırsa
       kahramanın sonunda boşta duruyor. Sola yaslanınca halka ekranın sol
       kenarından taşıp kırpılıyordu (bölümde `overflow: hidden` var) — ortada
       simetrik duruyor, metin sola hizalı kalmaya devam ediyor. */
    .myp-showcase .myp-hero-amblem { order: -1; justify-content: center; min-height: 0; margin-bottom: .5rem; }
    /* Masaüstündeki büyümeyle aynı oranda (×1,21): dar ekranda amblem metnin
       üstünde tek başına duruyor, orada da küçük kalmamalı. */
    .myp-showcase .myp-hero-amblem-cizim { width: 160px; height: 160px; }
    .myp-showcase .myp-hero-halka { width: 250px; height: 250px; left: 50%; }
}

@media screen and (max-width: 560px) {
    .myp-showcase .myp-odul { padding: .58rem 1.3rem .58rem 1.05rem; }
    .myp-showcase .myp-odul-yazi { font-size: .74rem; letter-spacing: .09em; }
    .myp-showcase .myp-odul-muhur svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------- 2b) Bölüm üst etiketi
   ---------------------------------------------------------------------------
   Bölüm başlıklarının üstündeki küçük yazı ("YÖK Mikro Yeterlilikler
   Çerçevesi", "Neden Mikro Yeterlilik?" …) micro.css'te 26px'lik bir çizgi +
   metin olarak çiziliyordu. Artık sitenin kendi etiket hapı: ölçüsü, dolgusu,
   punto/ağırlık/harf aralığı `public-ui.css` içindeki `.pubhead-eyebrow` ile
   BİREBİR. Tek fark kenarlıkta: turuncu yerine ALTIN — kahramandaki plaket ve
   amblemle aynı aile.

   Kapsam `.myp-showcase`: `.myp-eyebrow` mikro modülünün on kadar başka
   görünümünde de kullanılıyor (sepet, ödeme, detay, öğrenme paneli…), genel
   kural olduğu gibi kalıyor.
   --------------------------------------------------------------------------- */
.myp-showcase .myp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .85rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    /* MAVİ CAM: öğrenme panelindeki etiket hapıyla (`.myp-pagehead-etiket`)
       AYNI reçete. Bir ara nötr beyaz cama çevrilmişti (mavi + altın yan yana
       durmasın diye), ama o hâlde bölüm etiketleri hiçbir şey söylemeyen gri
       haplara dönüyordu. Ayrım artık net: ALTIN = kimlik ve yalnızca kahramanda
       (plaket, başlık bandı, amblem); MAVİ = etiket ve düğmelerin ortak dili. */
    border: 1px solid var(--myp-cam-cizgi);
    background: var(--myp-cam-dolgu);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    color: var(--myp-cam-yazi);
    font-family: var(--myp-font);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}
/* Etiketin önündeki çizgi hapla birlikte anlamını yitiriyor. */
.myp-showcase .myp-eyebrow::before { content: none; }

/* --------------------------------------------------- 2c) Süreç bölümünün zemini
   ---------------------------------------------------------------------------
   Kahraman `#0d0b0e`'de bitiyor (kendi dikey degradesinin sonu ve sayfanın
   taban rengi). `.myp-section--glow::before` ise bölümün ÜSTÜNDE yeni ve
   güçlü iki ışıma başlatıyordu:
       radial(900×420 at 16% -14%, rgba(91,157,255,.3))   ← mavi
       radial(820×400 at 86% -8%,  rgba(163,150,255,.24)) ← menekşe
   Yani kahraman koyulaşarak biterken hemen altında parlak bir bant açılıyor,
   iki bölüm arasında görünür bir kırılma oluşuyordu.

   Şimdi bölümün üstü kahramanın bittiği tonun AYNISI; renk aşağı indikçe
   yalnızca alttaki turuncu ışımayla geliyor. O ışıma DEĞİŞTİRİLMEDİ —
   `radial(760×340 at 50% 112%, rgba(243,122,82,.13))` birebir korundu.
   --------------------------------------------------------------------------- */
.myp-showcase #surec::before {
    background:
        /* Kahramanın son tonundan devam eden dikey akış. Üstte tam olarak
           `#0d0b0e`, aşağı doğru sönerek sayfanın tabanına bağlanıyor. */
        linear-gradient(180deg, #0d0b0e 0%, rgba(14, 12, 16, .6) 34%, transparent 68%),
        /* KORUNDU: bölümün altından yükselen parlak turuncu. Bu katman aşağıdaki
           zemin geçişinin ÜSTÜNDE duruyor, yoksa ışık örtülürdü. */
        radial-gradient(760px 340px at 50% 112%, rgba(243, 122, 82, .13), transparent 66%),
        /* Bölümün alt yarısı bir sonraki bölümün zeminine (`--myp-bg-soft`,
           #161319) dönüyor. Öncesinde `#surec` sayfa tabanında (#0d0b0e)
           bitiyor, `#kazanimlar` ise #161319'da başlıyordu: sınırda görünür bir
           renk basamağı vardı. Artık iki taraf aynı tonda buluşuyor. */
        linear-gradient(180deg, transparent 52%, #161319 100%);
}

/* `--alt` bölümlerin üstüne ince bir beyaz parlaklık koyuyor
   (`rgba(255,255,255,.035)` → %22'de sönüyor). Sınırın hemen altında bu, yeni
   eşitlediğimiz tonu bir tık açıp basamağı geri getiriyordu; vitrinde
   kaldırıldı, bölüm düz `#161319` ile başlıyor. */
.myp-showcase #kazanimlar { background: var(--myp-bg-soft); }

/* Rakam rozeti: buzlu cam + beyaz rakam.
   Dolu turuncu/pembe gövde ve koyu rakam yerine, kahramandaki etiketle aynı
   malzeme. `backdrop-filter` tablanın gradyan halkasını rozetin arkasında
   bulandırıyor — bu yüzden eski sert ayırıcı halkaya (3px'lik siyah gölge)
   gerek kalmadı; buzlu yüzey ayrımı kendisi yapıyor. */
.myp-showcase .myp-step-rozet {
    /* Zemin inceltildi (.13 → .08): camın arkasındaki tabla halkası ve bölüm
       ışıması içinden daha çok görünüyor. */
    background: rgba(255, 255, 255, .08);
    /* Kenarlık NÖTR beyaz: tablanın kendi turuncu gradyan halkası hemen
       yanında duruyor, rozete de sıcak bir çember konsaydı iki halka üst üste
       binip ikonu boğardı. İnce beyaz çizgi camın kenarı gibi okunuyor ve
       zemin inceldiği için rozetin sınırını da o taşıyor. */
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    box-shadow: none;
    /* Kenarlık kutunun İÇİNDE kalsın: rozet 30px'lik ölçüsünü korumalı,
       yoksa tablanın halkası üzerindeki 45° konumu kayar. */
    box-sizing: border-box;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .myp-showcase .myp-step-rozet { background: rgba(255, 255, 255, .13); }
}
/* Son adımın pembe rozeti kalktı: dördü de aynı buzlu yüzey, beyaz rakam. */
.myp-showcase .myp-step:last-child .myp-step-rozet { background: rgba(255, 255, 255, .08); color: #fff; }

/* ------------------------------------------- 2d) Kazanım şeridi ikonları
   ---------------------------------------------------------------------------
   Renk kahramandaki sertifika amblemiyle AYNI: `#ffcf9e` (bkz.
   `.myp-hero-amblem-cizim`). Amblemin üzerindeki kayan sarı ışık burada YOK —
   yalnızca ton ortak; şeritte yedi ikon var, hepsinde dolaşan bir ışık
   sayfayı huzursuz ederdi.

   Ölçü 58 → 66px. Kontur ağırlığı orantılı inceltildi (1,05 → 0,92): ekrandaki
   çizgi kalınlığı 2,53px'te sabit kalıyor, yani süreç ikonlarıyla ve
   anasayfadaki akış ikonlarıyla aynı bantta.
   --------------------------------------------------------------------------- */
.myp-showcase .myp-icon--warm { stroke: #ffcf9e; }

.myp-showcase .myp-iconrow-item .myp-icon {
    width: 66px;
    height: 66px;
    stroke-width: .92;
}
@media screen and (max-width: 900px) {
    .myp-showcase .myp-iconrow-item .myp-icon { width: 60px; height: 60px; stroke-width: 1.01; }
}
@media screen and (max-width: 560px) {
    .myp-showcase .myp-iconrow-item .myp-icon { width: 52px; height: 52px; stroke-width: 1.17; }
}

/* ------------------------------------------- 2e) Bölüm sınırındaki turuncu ışık
   ---------------------------------------------------------------------------
   `#surec`'in alt ışıması `radial(760×340 at 50% 112%)` ile tanımlı: merkezi,
   bölümün ALT KENARININ 84px ALTINDA (yüksekliğinin %12'si) ve `overflow:
   hidden` yüzünden ışığın alt yarısı kesiliyor. Sınırda ışık aniden bitiyordu.

   Buradaki kural o ışığın EKSİK YARISI: aynı ölçü, aynı renk, merkezi aynı
   noktada — `#kazanimlar`ın üstünden 84px aşağıda. İki bölüm birlikte tek bir
   elipsi tamamlıyor, geçişte kesinti kalmıyor.

   `#surec` tarafına DOKUNULMADI (istendiği gibi birebir korunuyor). Bu yüzden
   merkez burada piksel cinsinden yazılı: `#surec`in yüksekliği ekrana göre
   değişince iki merkez birkaç piksel ayrışabilir — 340px'lik yumuşak bir
   ışımada fark edilmez.
   --------------------------------------------------------------------------- */
.myp-showcase #kazanimlar {
    position: relative;
    overflow: hidden;
}
.myp-showcase #kazanimlar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(760px 340px at 50% 84px, rgba(243, 122, 82, .13), transparent 66%);
}
/* İçerik ışığın üstünde kalsın (glow bölümlerindeki kuralın aynısı). */
.myp-showcase #kazanimlar > * { position: relative; z-index: 1; }

/* --------------------------------------------- 2f) Öğrenme paneli köprüsü
   /ogrenme başlığının altındaki tek bağlantı. Biçim sayfadaki diğer hap
   düğmelerle aynı (buzlu değil, ince kenarlık + sıcak-nötr yüzey), ikon ise
   katalogdaki belge işaretinin aynısı. */
.myp-showcase .myp-dash-baglar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.myp-showcase .myp-dash-bag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .09);
    color: #fff !important;
    font-family: var(--myp-font);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
.myp-showcase .myp-dash-bag:hover {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
}
.myp-showcase .myp-dash-bag svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ------------------------------------ 2g) micro.css'ten sızan turuncu kalıntılar
   ---------------------------------------------------------------------------
   Bu iki kural `micro.css` içinde ve mikro modülünün ~50 görünümünde ortak;
   oraya dokunmak kapsam dışını etkilerdi. Vitrinde yerel olarak eziliyorlar.
   --------------------------------------------------------------------------- */
/* Bölüm ayracı: `mavi → turuncu` karışık geçişti; tek aileye indi. */
.myp-showcase .myp-section--seam::after {
    background: linear-gradient(90deg,
        transparent 6%,
        rgba(139, 123, 247, .28) 30%,
        rgba(91, 157, 255, .32) 62%,
        transparent 94%);
}
/* SSS'deki iletişim kutusunun ikon zemini. */
.myp-showcase .myp-contact-icon {
    background: rgba(91, 157, 255, .12);
    border-color: rgba(91, 157, 255, .3);
}

/* =========================================================================
   2h) PROGRAM DETAYI — katalog dilinin sayfaya uyarlanması
   -------------------------------------------------------------------------
   Sayfa `micro-catalog.css`i yükleyip `.myp-showcase` kapsamını taşıyor;
   palet ve tipografi oradan geliyor. Kalan farklar burada kapanıyor.
   ========================================================================= */

/* Başlıkta gezen ışık bandı — katalogdaki `.myp-hero-brand` ile AYNI teknik ve
   aynı duraklar: başlık %90 beyaz kalır, ince bir bant üzerinden geçer.
   Renk paletteki `--myp-bant`ten geliyor. Desteklenmeyen tarayıcıda başlık düz
   beyaz kalır, kaybolmaz. */
.myp-showcase .myp-detail-title span {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .myp-showcase .myp-detail-title span {
        background-image: var(--myp-bant);
        background-size: 260% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: mypBaslikIsik 6s linear infinite;
    }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-showcase .myp-detail-title span { animation: none; }
}

/* Rozetler buzlu cam — katalogdaki `.mcat-etiket` malzemesi. Düz zeminli
   hâlleri sayfanın geri kalanıyla aynı dili konuşmuyordu. */
.myp-showcase .myp-badge {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 12, 12, .55);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
            backdrop-filter: blur(12px) saturate(150%);
    color: #dfe4e4;
    font-weight: 800;
    letter-spacing: .02em;
}
/* Renk yalnızca kenarlıkta ve yazıda; zemin hep aynı buzlu yüzey. */
.myp-showcase .myp-badge--accent { border-color: rgba(91, 157, 255, .5); color: #bcd6ff; }
.myp-showcase .myp-badge--success { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }
.myp-showcase .myp-badge--violet { border-color: rgba(139, 123, 247, .5); color: #cdc5ff; }
.myp-showcase .myp-badge--cyan { border-color: rgba(158, 194, 255, .5); color: #cfe0ff; }

/* Işımalı düğmeler — sayfada ışıma/hâle bırakılmadı; ayrım kontur ve zeminde. */
.myp-showcase .myp-play span { box-shadow: none; }
.myp-showcase .myp-support { box-shadow: none; }

/* Öğrenme çıktısı ikonları tek renkte: yeşil, paletin dışında kalan tek tondu. */
.myp-showcase .myp-outcome svg { color: #9ec2ff; stroke: currentColor; }

/* =========================================================================
   2i) ÖĞRENME PANELİ (/ogrenme) — katalog dilinin sayfaya uyarlanması
   -------------------------------------------------------------------------
   NOT: panel kartları (`.myp-pcard`) KATALOG KARTIYLA DEĞİŞTİRİLMEDİ. Bu
   kartlar ilerleme yüzdesi, "kaldığın yerden devam et" ve kalan gün gibi
   yalnızca burada olan bilgileri taşıyor; katalog kartı bunları basmıyor,
   değiştirilseydi bilgi kaybolurdu. Bileşen yerinde kalıp yeni dilin
   MALZEMESİNİ giyiyor.
   ========================================================================= */

/* Panel başlığında gezen ışık bandı — katalogdakiyle aynı duraklar ve
   aynı renk kaynağı (`--myp-bant`). */
.myp-showcase .myp-dash-baslik span {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .myp-showcase .myp-dash-baslik span {
        background-image: var(--myp-bant);
        background-size: 260% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: mypBaslikIsik 6s linear infinite;
    }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-showcase .myp-dash-baslik span { animation: none; }
}

/* --- Program kartı: katalog kartının malzemesi -------------------------- */
.myp-showcase .myp-pcard {
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #121414;
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.myp-showcase .myp-pcard:hover {
    transform: translateY(-3px);
    border-color: rgba(91, 157, 255, .45);
    box-shadow: 0 26px 54px -34px rgba(91, 157, 255, .55);
}

/* Kapak, katalog plakasının malzemesini alıyor: koyu taban + iki ışıma, görsel
   onların ALTINDA sönük duruyor ve kartın üzerine gelince açılıyor. */
.myp-showcase .myp-pcard-media {
    background:
        radial-gradient(120% 105% at 10% -10%, rgba(139, 123, 247, .34), transparent 60%),
        radial-gradient(95% 85% at 95% 108%, rgba(91, 157, 255, .26), transparent 62%),
        #101113;
}
.myp-showcase .myp-pcard-media img {
    opacity: .45;
    filter: saturate(.92);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.myp-showcase .myp-pcard:hover .myp-pcard-media img { opacity: .65; transform: scale(1.04); }
/* İnce ızgara dokusu — plakadakiyle aynı 26px. */
.myp-showcase .myp-pcard-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
}
/* Alt perde gövdenin renginde bitiyor: kapak ile gövde arasında basamak yok. */
.myp-showcase .myp-pcard-media::after {
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(8, 9, 9, .25) 0%,
        transparent 30%,
        rgba(18, 20, 20, .55) 72%,
        rgba(18, 20, 20, .92) 92%,
        #121414 100%);
}

/* Arşiv: satır içi `opacity`/`grayscale` yerine sınıf. Yalnızca KAPAK soluyor,
   metin tam kontrastta kalıyor; durum ayrıca kenarlıktan okunuyor. */
.myp-showcase .myp-pcard--arsiv { border-style: dashed; }
.myp-showcase .myp-pcard--arsiv .myp-pcard-media img { opacity: .22; filter: grayscale(.7); }
.myp-showcase .myp-pcard--arsiv:hover .myp-pcard-media img { opacity: .38; }

/* --- Detay: sekmeden bölüme geçen içerik ---------------------------------
   Paneller artık gizlenmiyor, alt alta duruyor. Aralarında bir ayraç ve
   yapışkan menünün altına kayacakları pay var. */
.myp-showcase .myp-bolum { display: block; }
/* Üst dolgu HER bölümde: yapışkan hap 84–146px arasını kaplıyor ve `micro.js`
   kaydırma payını hapın yüksekliği + 28px olarak hesaplıyor (=90px). Dolgu
   olmasaydı bölüm başlığı tam hapın altına düşerdi — katalogda bunu bölümlerin
   104px'lik kendi dolgusu çözüyor, burada açıkça veriliyor. */
.myp-showcase .myp-bolum[id] { padding-top: 4.5rem; }
.myp-showcase .myp-bolum + .myp-bolum {
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
/* Menüye tıklayınca başlık hapın ALTINDA kalmasın. `micro.js` kendi payını
   hesaplıyor ama tarayıcının çapa atlaması (adres çubuğundan gelen #mufredat)
   bu değeri kullanıyor. */
.myp-showcase .myp-bolum[id] { scroll-margin-top: 150px; }
.myp-showcase .myp-bolum-bas { margin-bottom: 1.6rem; }

/* Belgelendirme listesi — katalogdaki `.myp-cert-list` diliyle aynı. */
.myp-showcase .myp-belge-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.myp-showcase .myp-belge-liste li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    color: #c9c9d4;
    font-size: .95rem;
    line-height: 1.7;
}
.myp-showcase .myp-belge-liste svg { width: 20px; height: 20px; color: #9ec2ff; margin-top: .15rem; }

/* ------------------------------------------------------- 3) Yapışkan alt menü
   İŞLEV DEĞİŞMEDİ: `data-myp-subnav`, `.myp-subnav-link` ve `.is-active`
   kancaları micro.js tarafından kullanılıyor (yumuşak kaydırma + görünürdeki
   bölümü işaretleme); yalnızca görünüm değişti.
   Eski hâli açık gri bir kapsül ve MAVİ bir "Kayıt Ol" düğmesiydi. Şimdi
   sitenin diğer haplarıyla aynı: buzlu koyu yüzey, ince kenar, aktif öğede
   soluk marka degradesi. */
.myp-showcase .myp-subnav-pill {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(16, 19, 19, .72);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
            backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .95);
    /* Dolgu SİMETRİK ve ferah. micro.css'te `8px 8px 8px 14px` yazıyordu:
       ölçüldüğünde solda 15px, sağda 9px boşluk kalıyordu — öğeler hapın sağ
       ucuna yapışık duruyordu. */
    padding: 9px 18px;
}
.myp-showcase .myp-subnav-link {
    border-radius: 999px;
    color: #cfd6d6;
    font-size: .84rem;
    font-weight: 600;
    transition: background-color .22s ease, color .22s ease;
}
.myp-showcase .myp-subnav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* Aktif öğeyi YALNIZCA arka plan anlatır. Daha önce buraya `font-weight: 700`
   ve mavi bir renk de yazılıydı: seçili bağlantı komşularından bir tık kalın
   ve daha geniş görünüyor, hap içindeki metinler kaydıkça satır oynuyordu.
   Yazı tipi ölçüleri artık pasif hâlle birebir aynı. */
.myp-showcase .myp-subnav-link.is-active {
    background: linear-gradient(96deg, rgba(139, 123, 247, .2), rgba(91, 157, 255, .18));
}
/* Menüdeki tek eylem ("Panelim" / "Kayıt Ol"). Gövdesi üst çubuktaki
   "Devam Et" düğmesiyle aynı iskelette (navbar-pro.css
   `.navigation-link.nav-continue > a`): hap gövde, ince kenarlık, saydam
   dolgu. RENGİ sayfanın etkileşim mavisi — düğme buzlu yüzeyin ardından zaten
   maviye çalıyordu (arkasındaki kahraman ışıması), o ton artık tesadüf değil
   tanımlı.
   Ölçü farkı bilinçli: "Devam Et" 34px, buradaki düğme komşusu bağlantılarla
   aynı boyda (42px) kalıyor. */
.myp-showcase .myp-subnav-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 42px !important;
    padding: 0 1.05rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--myp-cam-cizgi) !important;
    background: var(--myp-cam-dolgu) !important;
    color: var(--myp-cam-yazi) !important;
    font-size: .84rem !important;
    /* Komşu bağlantılarla AYNI kalınlık (600). 700'de düğme yazısı hapın geri
       kalanından bir tık iri duruyordu; ayrımı kenarlık ve dolgu veriyor. */
    font-weight: 600 !important;
    line-height: 1;
    box-shadow: none !important;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
.myp-showcase .myp-subnav-btn:hover {
    border-color: var(--myp-cam-cizgi-hover) !important;
    background: var(--myp-cam-dolgu-hover) !important;
    color: var(--myp-cam-yazi-hover) !important;
    filter: none;
}
/* Daire kontur + dolu üçgen — `template.php`deki `.nav-continue-icon` ile aynı. */
.myp-showcase .myp-subnav-btn-ikon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.myp-showcase .myp-subnav-btn-ikon path { fill: currentColor; stroke: none; }

/* Dar ekranda hap zaten yatay kayıyor; 18px'lik dolgu kayan alandan çalıyor.
   Bağlantılar da o kırılımda 40px'e iniyor (micro.css `padding: 8px 13px`),
   düğme de onlarla aynı boyda kalmalı. */
@media screen and (max-width: 560px) {
    /* TEK SATIR + parmakla yatay kaydırma — detay sayfasının hapıyla aynı
       davranış (micro-detail.css). Sıkılaştırılmış dolgularla 390px ekranda
       "Kayıt Ol" düğmesinin yarısı görünür kalıyor; kesik düğme kaydırma
       ipucunun kendisi. (Bir ara sarmalı düzen denendi; iki satırlı hap
       yapışkan hâldeyken fazla yer yiyordu.) */
    .myp-showcase .myp-subnav-pill {
        padding: 7px 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .myp-showcase .myp-subnav-btn { height: 40px !important; padding: 0 .85rem !important; }
    .myp-showcase .myp-subnav-btn-ikon { width: 15px; height: 15px; }
}

/* --------------------------------------------------- 4) Kategori rayları
   Her kategori kendi başlığı ve kaydırma rayıyla alt alta diziliyor; ray
   sitenin ortak `pub-slider` bileşeni (assets/js/pub-slider.js). Böylece
   ~30 program kalabalık bir ızgaraya dönüşmeden listelenebiliyor. */
.mcat-row + .mcat-row { margin-top: 2.75rem; }
.mcat-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}
.mcat-row-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem .65rem;
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.mcat-row-count {
    color: var(--myp-muted, #9aa1a1);
    font-size: .8rem;
    font-weight: 600;
}
.mcat-row-all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #ffbe9c !important;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none !important;
}
.mcat-row-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.mcat-row-all:hover svg { transform: translateX(3px); }

/* Ray genişliği: kart 300px. `pub-slider` sabit sütun genişliği bekliyor;
   esnek değer kartları sıkıştırıp kaydırmayı ortadan kaldırıyor.
   NOT: kategori rayları katalogdan kaldırıldı (bkz. `.mcat-izgara`); bu
   kurallar geriye dönmek gerekirse diye duruyor. */
.mcat-row .pub-slider-track { grid-auto-columns: 300px; }
@media screen and (min-width: 1408px) { .mcat-row .pub-slider-track { grid-auto-columns: 320px; } }
@media screen and (max-width: 767px)  { .mcat-row .pub-slider-track { grid-auto-columns: 82%; } }

/* ---------------------------------------------------- 4b) Katalog: süzgeç + ızgara
   ---------------------------------------------------------------------------
   Kategori başına yatay ray yerine tek ızgara + hap süzgeci. Gerekçe
   görünümün içindeki yorumda; özeti: ekranda 3,8 kart var, 3-4 kategoriye
   bölünen ~30 programda satırlar taşmıyor, taşmayan rayın da bir işlevi
   kalmıyor. Izgara ayrıca kartlardaki AKTS/saat/fiyat verisini
   KARŞILAŞTIRILABİLİR kılıyor.
   --------------------------------------------------------------------------- */
.myp-showcase .mcat-suzgec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 2.25rem;
}
/* Hap dili sayfadaki diğer haplarla aynı: ince kenarlık + saydam dolgu.
   BOŞTAKİ hâl nötr kalıyor — süzgeçte 6-7 hap yan yana duruyor, hepsi birden
   mavi olsaydı hangisinin SEÇİLİ olduğu okunmazdı. Renk seçimi işaretliyor:
   üzerine gelince mavi belirir, seçilince mavi kalır. */
.myp-showcase .mcat-hap {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #cfd6d6;
    font-family: var(--myp-font);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
/* Sayaç ikincil bilgi: aynı hapın içinde ama sönük. */
.myp-showcase .mcat-hap span {
    font-size: .74rem;
    font-weight: 700;
    color: #8e9797;
    transition: color .22s ease;
}
.myp-showcase .mcat-hap:hover {
    border-color: var(--myp-cam-cizgi);
    background: var(--myp-cam-dolgu);
    color: var(--myp-cam-yazi);
}
.myp-showcase .mcat-hap.is-active {
    border-color: var(--myp-cam-cizgi-hover);
    background: var(--myp-cam-dolgu-hover);
    color: var(--myp-cam-yazi-hover);
}
.myp-showcase .mcat-hap:hover span,
.myp-showcase .mcat-hap.is-active span { color: rgba(219, 233, 255, .8); }

.myp-showcase .mcat-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
/* Hücre ızgaranın öğesi; kart hücreyi tamamen kaplasın ki farklı başlık
   uzunluklarında kartların alt kenarı hizada kalsın. */
.myp-showcase .mcat-hucre { min-width: 0; display: flex; }
/* ŞART: `display: flex` bir YAZAR kuralı ve tarayıcının `[hidden] {display:none}`
   kuralını eziyor. Betik hücreleri `hidden` ile süzdüğü için bu satır olmadan
   süzgeç hiçbir şey gizlemiyordu (ölçüldü: 22 hücrede `hidden` var, hepsi
   ekranda). */
.myp-showcase .mcat-hucre[hidden] { display: none; }
.myp-showcase .mcat-hucre > .pub-slide { display: flex; width: 100%; }
.myp-showcase .mcat-hucre .mcat-card { width: 100%; }

@media screen and (max-width: 1023px) {
    .myp-showcase .mcat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media screen and (max-width: 639px) {
    .myp-showcase .mcat-izgara { grid-template-columns: minmax(0, 1fr); }
    .myp-showcase .mcat-suzgec { gap: .4rem; margin-bottom: 1.75rem; }
    .myp-showcase .mcat-hap { height: 36px; padding: 0 .85rem; font-size: .8rem; }
}

.myp-showcase .mcat-daha-sar { display: flex; justify-content: center; margin-top: 2.25rem; }
.myp-showcase .mcat-daha[hidden] { display: none !important; }
.myp-showcase .mcat-daha {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 46px;
    padding: 0 1.5rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--myp-cam-cizgi) !important;
    background: var(--myp-cam-dolgu) !important;
    color: var(--myp-cam-yazi) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    line-height: 1;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
/* Mavi zaten yalnızca hover'da beliriyordu; artık düğmenin kendi rengi ve
   hover bir tık koyulaşıyor. */
.myp-showcase .mcat-daha:hover {
    border-color: var(--myp-cam-cizgi-hover) !important;
    background: var(--myp-cam-dolgu-hover) !important;
    color: var(--myp-cam-yazi-hover) !important;
}
.myp-showcase .mcat-daha-kalan { font-size: .78rem; font-weight: 700; color: #8e9797; }

/* ------------------------------------------------------------- 5) Vitrin kartı
   ---------------------------------------------------------------------------
   TEK KOMPOZİSYON: kartın üstünde 16:9 bir "plaka" var ve programın ADINI o
   taşıyor. Plakanın zemini her kartta AYNI koyu yüzey; yalnızca üzerindeki iki
   ışımanın rengi programa göre değişiyor. Kapak görseli VARSA ışımaların
   ALTINA düşük opaklıkla giriyor — derinlik katıyor, düzeni belirlemiyor.

   Eski hâl: görselli kart bir fotoğraf, görselsiz kart renkli bir blok + baş
   harfler ("DM"). Yan yana geldiklerinde ızgara iki ayrı tasarım gibi
   duruyordu; üstelik baş harfler bilgi taşımıyor, program adı gövdede ikinci
   kez yazılıyordu.
   --------------------------------------------------------------------------- */
.mcat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #121414;
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.mcat-card:hover {
    border-color: rgba(91, 157, 255, .45);
    transform: translateY(-3px);
    box-shadow: 0 26px 54px -34px rgba(91, 157, 255, .55);
}

/* --- Plaka --------------------------------------------------------------- */
.mcat-plaka {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 16 / 9;
    padding: .85rem .95rem;
    overflow: hidden;
    text-decoration: none !important;
    /* İki ışıma + koyu taban. Işımaların rengi satır içi `--mcat-isik*`
       değişkenlerinden geliyor (programa göre), YERLEŞİM her kartta aynı. */
    background:
        radial-gradient(120% 105% at 10% -10%, rgba(var(--mcat-isik1, 253, 168, 113), .40), transparent 60%),
        radial-gradient(95% 85% at 95% 108%, rgba(var(--mcat-isik2, 243, 122, 82), .30), transparent 62%),
        #101113;
}

/* Kapak görseli: en altta, sönük. Kartın üzerine gelince açılıyor — fotoğraf
   kaybolmuyor, sadece kompozisyonun patronu olmaktan çıkıyor. */
.mcat-plaka-gorsel {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
    filter: saturate(.92);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.mcat-card:hover .mcat-plaka-gorsel { opacity: .62; transform: scale(1.04); }

/* Doku: sayfanın zemin ızgarasının aynısı, 26px. Görselsiz plakayı düz bir
   renk lekesi olmaktan çıkaran şey bu. */
.mcat-plaka-doku {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px;
    /* Izgara üstte kaybolsun, aşağı indikçe belirsin: plaka tek parça durmasın. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
}
/* Alt perde: ad her zeminde okunur kalsın (özellikle görselli hâlde). */
/* Perde GÖVDENİN renginde bitiyor (#121414). Önceden ayrı bir siyahta
   (rgba(8,9,9,.78)) bittiği için plakanın alt kenarı ile gri gövde arasında
   görünür bir basamak kalıyordu; şimdi görsel gövdeye eriyerek giriyor. */
.mcat-plaka-perde {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(8, 9, 9, .25) 0%,
        transparent 30%,
        rgba(18, 20, 20, .55) 72%,
        rgba(18, 20, 20, .92) 92%,
        #121414 100%);
}

/* İmleci izleyen ışık — kartın "canlı" hissi buradan geliyor. Konum JS'ten
   `--fx/--fy` ile geliyor; açılma/kapanma yalnızca opaklıkta olduğu için
   yeniden yerleşim (layout) tetiklenmiyor. Perdenin ÜSTÜNDE ki karartmayı
   delip geçsin, yazının ALTINDA ki adı yıkamasın. */
.mcat-plaka-imlec {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease;
    background: radial-gradient(200px circle at var(--fx, 50%) var(--fy, 50%),
        rgba(178, 212, 255, .3) 0%,
        rgba(120, 170, 255, .14) 34%,
        transparent 68%);
    mix-blend-mode: screen;
}
.mcat-card:hover .mcat-plaka-imlec { opacity: 1; }

.mcat-plaka-ust {
    position: absolute;
    top: .8rem;
    left: .9rem;
    right: .9rem;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.mcat-etiketler { display: flex; flex-wrap: wrap; gap: .3rem; }
.mcat-etiket {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .24rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(10, 12, 12, .55);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
            backdrop-filter: blur(12px) saturate(150%);
    color: #e9eded;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.4;
    white-space: nowrap;
}
/* AKTS sayfanın bütün vaadi — kartta ilk okunan rakam o. */
.mcat-etiket--akts { border-color: rgba(255, 205, 138, .55); color: #ffe3c4; }
/* Belge işareti: çizim 24 ızgarada ayrıntılı olduğu için 13px'te kontur bir tık
   kalın (1,85) — ekranda ~1px, ayrıntılar birbirine yapışmıyor. */
.mcat-etiket--akts svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Kartın üzerine gelince AKTS etiketi de canlanıyor: sayfanın vaadi hareketin
   içinde kalsın. */
.mcat-card:hover .mcat-etiket--akts {
    border-color: rgba(255, 205, 138, .9);
    color: #fff3e2;
}
.mcat-etiket--bedava { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }
.mcat-etiket--indirim { border-color: rgba(236, 56, 125, .5); color: #ffb3cd; }

/* Seviye: gölgeli serbest yazı yerine sağ üstte sakin bir etiket. */
.mcat-seviye {
    flex: 0 0 auto;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: rgba(10, 12, 12, .5);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
            backdrop-filter: blur(12px) saturate(150%);
    color: rgba(255, 255, 255, .78);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

/* Program adı — kartın kimliği. İki satırda kesiliyor ki plakanın yüksekliği
   her kartta aynı kalsın; tam adı `title` özniteliğinde duruyor. */
.mcat-ad {
    position: relative;
    z-index: 4;
    margin: 0;
    color: #fff;
    font-family: var(--myp-font);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    transition: color .25s ease;
}
.mcat-card:hover .mcat-ad { color: #dbe8ff; }

/* Izgara dokusu hover'da hafifçe yukarı kayıyor: plaka nefes alıyor, ama
   yalnızca `transform` değiştiği için bedeli yok. */
.mcat-plaka-doku { transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .35s ease; }
.mcat-card:hover .mcat-plaka-doku { transform: translateY(-6px) scale(1.03); opacity: 1.35; }

/* --- Gövde --------------------------------------------------------------- */
/* Gövde, plakanın rengini bir nefes daha aşağı taşıyor: kart "görsel + gri
   kutu" değil TEK yüzey olarak okunuyor. Renk kartın kendi değişkeninden
   geliyor, yani her programda plakayla aynı aileden. */
.mcat-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.1rem 1.1rem;
    background:
        linear-gradient(180deg, rgba(var(--mcat-isik2, 243, 122, 82), .10) 0%, transparent 58%),
        #121414;
}
/* Eğitmen satırı boşken de yer kaplıyor: künye satırı bütün kartlarda aynı
   yükseklikte başlasın. Koşullu basıldığı sürece eğitmensiz kartta "3 hafta /
   50 saat" bir satır yukarı kayıyordu. */
.mcat-ins {
    margin: 0;
    min-height: 1.15rem;
    color: var(--myp-muted, #9aa1a1);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    margin: .7rem 0 0;
    padding: 0;
    list-style: none;
}
.mcat-meta li {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: #dfe4e4;
    font-size: .8rem;
    font-weight: 600;
}
/* İkonlar 14 → 16px, opaklık .8 → 1 ve rengi metinden ayrılıp vurgu tonuna
   geçti: künye satırı artık tek bakışta okunuyor. Ton, sayfanın etkileşim
   mavisiyle aynı aileden — kartın en görünür renkli detayı olduğu için sıcak
   kaldığında zeminle çelişiyordu. */
.mcat-meta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #9ec2ff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

/* Alt satır kartın DİBİNE yaslı: künye satır sayısı değişse de fiyatlar
   ızgarada aynı hizada duruyor. */
.mcat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding-top: .9rem;
    /* Sabit yükseklik: fiyatın uzunluğu ya da düğmenin varlığı satırın boyunu
       değiştirmesin, kartlar arasında alt hizalar oynamasın. */
    min-height: 3.05rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
/* Fiyat TEK satır. İndirimli programda eski fiyat alt satıra sarıyordu; sarınca
   kart uzuyor, ızgarada o satırdaki bütün kartlar uzuyor ve künye ile fiyat
   arasındaki boşluk kartlar arasında farklılaşıyordu. */
.mcat-price {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
    color: #fff;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.mcat-price-ana { font-size: 1.05rem; font-weight: 800; }
.mcat-price small {
    color: var(--myp-muted, #9aa1a1);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: line-through;
}
.mcat-foot-actions { display: inline-flex; align-items: center; gap: .45rem; }

/* Sepete ekle: yazısı dar kartta gizlenen ikon düğme. Eskiden satır içi
   `style` ile kurulmuş çıplak bir düğmeydi. Rengi sayfanın etkileşim mavisi —
   kartın üzerindeki tek DÜĞME bu, künye ve fiyattan renkle ayrılıyor. */
.mcat-sepet {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 34px;
    padding: 0 .7rem;
    border-radius: 999px;
    border: 1px solid var(--myp-cam-cizgi);
    background: var(--myp-cam-dolgu);
    color: var(--myp-cam-yazi);
    font-family: var(--myp-font);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
.mcat-sepet:hover { border-color: var(--myp-cam-cizgi-hover); background: var(--myp-cam-dolgu-hover); color: var(--myp-cam-yazi-hover); }
.mcat-sepet svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Fiyat + sepet TEK düğmede — /certificate-programs'daki `.btn-basket`
   deseniyle aynı mekanik: fiyat ve "Sepete Ekle" AYNI ızgara hücresinde üst
   üste durur, hücre geniş olana göre ölçülür (düğme hover'da genişlemez);
   üzerine gelince fiyat yukarı solar, etiket alttan belirir. */
.mcat-sepet--fiyat {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: center;
    gap: .4rem;
}
.mcat-sepet--fiyat > svg { grid-area: 1 / 1; }
.mcat-sepet-fiyat,
.mcat-sepet-etiket {
    grid-area: 1 / 2;
    text-align: center;
    white-space: nowrap;
    transition: opacity .22s ease, transform .22s ease;
}
.mcat-sepet-fiyat {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
/* Üstü çizili eski fiyat — ikincil bilgi, sönük kalmalı. */
.mcat-sepet-fiyat small {
    color: var(--myp-muted, #9aa1a1);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: line-through;
}
.mcat-sepet-etiket { opacity: 0; transform: translateY(5px); pointer-events: none; }
.mcat-sepet--fiyat:hover .mcat-sepet-fiyat { opacity: 0; transform: translateY(-5px); }
.mcat-sepet--fiyat:hover .mcat-sepet-etiket { opacity: 1; transform: translateY(0); }

/* "İncele" bağlantısı da eylem: sepet düğmesiyle aynı mavi, ama gövdesiz —
   kart ayağında iki dolu hap yan yana ağır dururdu. */
.mcat-go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--myp-cam-yazi) !important;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}
.mcat-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.mcat-card:hover .mcat-go { color: var(--myp-cam-yazi-hover) !important; }
.mcat-card:hover .mcat-go svg { transform: translateX(3px); }

/* Dar kartta düğme sıkışıyor; yazı GİZLENMİYOR (fiyat artık düğmenin içinde,
   ikon tek başına kalırsa fiyat kaybolur) — dolgu ve punto küçülüyor. */
@media screen and (max-width: 1023px) and (min-width: 640px) {
    .mcat-sepet { padding: 0 .55rem; font-size: .74rem; }
    .mcat-sepet-fiyat { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .mcat-card, .mcat-plaka-gorsel, .mcat-plaka-doku, .mcat-plaka-imlec,
    .mcat-go svg, .mcat-row-all svg { transition: none; }
    .mcat-sepet-fiyat, .mcat-sepet-etiket { transition: opacity .01s linear; }
    .mcat-card:hover { transform: none; }
    .mcat-card:hover .mcat-plaka-gorsel { transform: none; }
    .mcat-card:hover .mcat-plaka-doku { transform: none; }
    .mcat-plaka-imlec { display: none; }
}


/* ------------------------------------------------ 2h) Süreç adım ikonları
   micro.css'te mavi tonlu; vitrinde nötr cam katmanına çekildi (bkz. bölüm
   etiketindeki gerekçe: sayfada tek renk ailesi = altın, gerisi malzeme). */
.myp-showcase .myp-step-icon {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ÇİZGİ RENGİ = kahramandaki sertifika amblemini dolaşan ALTIN: #ffe487
   (bkz. `.myp-amblem-isik`; aynı ton başlıktaki ışık bandında da var).
   micro.css'te ilk üç ikon soluk turuncu (#fda871), dördüncüsü pembeydi
   (#f4589a). Koyu zeminde ikisi de sönük kalıyordu ve sayfanın tek renk
   ailesi olan altının dışına düşüyordu. Artık dördü de aynı ton: son adımın
   pembe istisnası kalktı — vitrinde rozetleri de eşitlenmişti. */
.myp-showcase .myp-step-icon .myp-icon,
.myp-showcase .myp-step:last-child .myp-icon--teal { stroke: #ffe487; }

/* Adımları bağlayan dalga da aynı aileye geçiyor: `#mypGradTeal` (şeftali →
   turuncu → PEMBE) ikonlar altına döndükten sonra satırdaki tek pembe olarak
   kalırdı. Düz altın, %55 opaklıkta — bağlayıcı ikonların önüne geçmemeli. */
.myp-showcase .myp-step-yol path { stroke: rgba(255, 228, 135, .55); }

/* micro.css'te doğrudan `svg` seçen iki kural kapsayıcının rengini eziyordu;
   vitrinde nötr cam katmanına çekildi. */
.myp-showcase .myp-iconrow-item svg,
.myp-showcase .myp-cert-list li svg { color: #fff; }

/* ==========================================================================
   3) ÖĞRENCİ PANELİ — SAYFA BAŞLIĞI
   Genel Bakış sayfasındaki `.dash-pagehead` düzeninin birebir karşılığı:
   ortalanmış ikonlu hap etiket, degrade başlık, tek cümlelik açıklama, marka
   çizgisi ve arkasında yumuşak ışıma. TEK FARK RENKTE — orada turuncu, burada
   mavi: mikro modülünün kendi vurgusu. Başlıkta gezen ışık bandı YOK.
   ========================================================================== */
.myp-showcase .myp-pagehead {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.myp-showcase .myp-pagehead::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8%;
    width: min(620px, 94%);
    height: 190px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(91, 157, 255, .18), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.myp-showcase .myp-pagehead > * { position: relative; z-index: 1; }

/* Etiket hapı: Genel Bakış'takiyle aynı ölçü, mavi tonda. */
.myp-showcase .myp-pagehead-etiket {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .85rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 157, 255, .35);
    background: rgba(91, 157, 255, .12);
    color: #bcd6ff;
    font-family: var(--myp-font);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}

.myp-showcase .myp-pagehead-etiket svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Başlık: beyazdan açık maviye inen sabit degrade (animasyon yok). */
.myp-showcase .myp-pagehead-baslik {
    margin: 0;
    font-family: var(--myp-font);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #fff;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .myp-showcase .myp-pagehead-baslik {
        background-image: linear-gradient(180deg, #ffffff 30%, #c9dcff 100%);
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* `background-clip: text` alt uzantıları kırpabiliyor. */
        padding-bottom: .12em;
    }
}

.myp-showcase .myp-pagehead-lead {
    max-width: 620px;
    margin: .85rem auto 0;
    font-family: var(--myp-font-body);
    color: #dfe4e4;
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
    line-height: 1.65;
}

/* "bu sayfadan" vurgusu: kalınlığı ayarlı marka alt çizgisi. */
.myp-showcase .myp-pagehead-mark {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(91, 157, 255, .85);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.myp-showcase .myp-pagehead-cizgi {
    width: 64px;
    height: 3px;
    margin: 1.35rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #7cb8ff, #5b9dff 55%, rgba(91, 157, 255, .35));
}

@media screen and (max-width: 600px) {
    .myp-showcase .myp-pagehead-lead { font-size: .88rem; }
}

/* ---------------------------------------- 3b) Panel kategori süzgeci
   Katalogdaki `.mcat-hap` ile aynı dil (nötr cam hap + sayaç), yalnız burada
   düğme öğesi: seçim sunucuya gitmiyor, kartlar yerinde süzülüyor. */
.myp-showcase .myp-kfiltre {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem;
}

.myp-showcase .myp-kfiltre-hap {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: var(--myp-text-soft);
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s var(--myp-ease), background-color .2s var(--myp-ease), color .2s var(--myp-ease);
}

.myp-showcase .myp-kfiltre-hap:hover {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.myp-showcase .myp-kfiltre-hap.is-active {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .13);
    color: #fff;
}

/* Sayaç: hapın ağırlığını artırmadan "kaç tane" bilgisini verir. */
.myp-showcase .myp-kfiltre-hap span {
    padding: .12rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
}

.myp-showcase .myp-kfiltre-hap.is-active span { background: rgba(255, 255, 255, .18); color: #fff; }

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

/* ---------------------------------------------- 3c) Panel boş durumu
   Genel `.myp-empty` (ikon + başlık + düğme) bu sayfada zayıf kalıyordu:
   kişi ilk kez giriyorsa gördüğü tek şey "hiçbir şey yok" oluyor. Yerine
   sayfanın kendi malzemesiyle bir kart: buzlu cam panel, mavi ışıma, üç
   adımlık kısa yol haritası ve iki köprü. */
.myp-showcase .myp-bos {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    /* Kartın KENDİSİ boş: yüzey, kenarlık ve doku alttaki katmanda çiziliyor
       (aşağı doğru sönebilmesi için). İçerik bu kutuda ve üstte kalır. */
    padding: clamp(28px, 5vw, 48px) clamp(22px, 4vw, 44px) clamp(34px, 6vw, 56px);
    background: none;
    border: 0;
    text-align: center;
}

/* Yüzey katmanı: buzlu cam + kenarlık + ince ızgara. Aşağı indikçe maske ile
   söner, böylece kartın alt kenarı yok — sayfa zeminine karışıyor.
   Kenarlık `border` değil `inset box-shadow`: maskeyle birlikte sönmesi
   gerekiyor, ayrı bir `border` maskenin dışında kalıp keskin bir çizgi
   bırakıyordu. */
.myp-showcase .myp-bos::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 44px 44px,
        radial-gradient(80% 60% at 50% 0%, rgba(91, 157, 255, .16), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, .55) 74%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, .55) 74%, transparent 100%);
    pointer-events: none;
}

.myp-showcase .myp-bos > * { position: relative; z-index: 1; }

.myp-showcase .myp-bos-ikon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    /* Altın-mavi tema kuralı: ikon KİMLİK taşır → altın. (Mavi yalnız
       etkileşimde: düğmeler mavi kalıyor.) */
    border: 1px solid var(--myp-amber-line, rgba(243, 193, 79, .38));
    background: var(--myp-amber-soft, rgba(243, 193, 79, .12));
    color: var(--myp-amber-strong, #ffdf8e);
    box-shadow: 0 0 0 8px rgba(243, 193, 79, .05);
}

.myp-showcase .myp-bos-ikon svg { width: 30px; height: 30px; }

.myp-showcase .myp-bos-baslik {
    margin: 0;
    font-family: var(--myp-font);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}

.myp-showcase .myp-bos-metin {
    max-width: 52ch;
    margin: .7rem auto 0;
    font-family: var(--myp-font-body);
    font-size: .95rem;
    line-height: 1.7;
    color: var(--myp-text-soft);
}

.myp-showcase .myp-bos-eylem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.7rem;
}

.myp-showcase .myp-bos-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 44px;
    padding: 0 1.3rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff !important;
    font-family: var(--myp-font);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: border-color .2s var(--myp-ease), background-color .2s var(--myp-ease);
}

.myp-showcase .myp-bos-btn:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }

.myp-showcase .myp-bos-btn--birincil {
    border-color: rgba(91, 157, 255, .45);
    background: rgba(91, 157, 255, .16);
    color: #dbe8ff !important;
}

.myp-showcase .myp-bos-btn--birincil:hover { border-color: rgba(91, 157, 255, .85); background: rgba(91, 157, 255, .26); }

.myp-showcase .myp-bos-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

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

/* ---------------------------------------------- 3c-2) Boş durum sahnesi
   Cam panel tek başına "içerik yok" diyor; sahne "içerik BURAYA gelecek"
   desin diye panelin arkasına üç hayalet kart kondu: ızgaranın gerçek kart
   oranında, içi iskelet çubuklu, aşağı doğru sönen kopyalar. Panel camdır
   (backdrop blur), üstlerine binince hayaletler gerçekten buğulanır. */
.myp-showcase .myp-bos-sahne { position: relative; }

.myp-showcase .myp-bos-hayalet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 8px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 94%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 94%);
    pointer-events: none;
}

.myp-showcase .myp-bos-kart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 236px;
    padding: 14px;
    border-radius: 1.1rem;
    border: 1px solid var(--myp-border, rgba(158, 183, 255, .13));
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}

/* Kapak alanı: kartların gerçek kapaklarındaki gibi mavi + altın sis. */
.myp-showcase .myp-bos-kart::before {
    content: "";
    height: 96px;
    border-radius: .7rem;
    background:
        radial-gradient(120% 90% at 18% 0%, rgba(91, 157, 255, .15), transparent 60%),
        radial-gradient(120% 90% at 85% 100%, rgba(243, 193, 79, .10), transparent 60%),
        rgba(255, 255, 255, .04);
}

.myp-showcase .myp-bos-cubuk { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.myp-showcase .myp-bos-cubuk--genis { width: 84%; }
.myp-showcase .myp-bos-cubuk--orta  { width: 58%; }
/* Etek çubuğu: gerçek kartta fiyat/sepet mavi etkileşim alanıdır. */
.myp-showcase .myp-bos-cubuk--kisa  { width: 38%; margin-top: auto; background: rgba(91, 157, 255, .16); }

/* Panel hayaletlerin alt yarısına biner. */
.myp-showcase .myp-bos-sahne .myp-bos { margin-top: -150px; }

@media (max-width: 860px) {
    .myp-showcase .myp-bos-hayalet { grid-template-columns: repeat(2, 1fr); }
    .myp-showcase .myp-bos-hayalet .myp-bos-kart:nth-child(3) { display: none; }
}

@media (max-width: 560px) {
    .myp-showcase .myp-bos-hayalet { display: none; }
    .myp-showcase .myp-bos-sahne .myp-bos { margin-top: 0; }
}

/* ---------------------------------------------- 3c-3) Üç adımlık yol
   Baştaki tasarım notunun vadettiği harita: Tasarım ✓ → Akreditasyon
   (ŞU AN, altın) → Yayın. Biten adım mavi, sıradaki gri; çizgi biten
   adımdan sonra maviye döner. */
.myp-showcase .myp-bos-yol {
    display: flex;
    align-items: flex-start;
    max-width: 520px;
    margin: 32px auto 0;
    padding: 0;
    list-style: none;
}

.myp-showcase .myp-bos-yol li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--myp-font);
    font-size: .8rem;
    font-weight: 700;
    color: var(--myp-muted, #8d9bbd);
}

/* Bağlantı çizgisi: rozet hizasında, komşu rozetlere değmeden. */
.myp-showcase .myp-bos-yol li + li::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    height: 2px;
    margin: 0 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.myp-showcase .myp-bos-yol li.is-done + li::before { background: rgba(91, 157, 255, .35); }

.myp-showcase .myp-bos-rozet {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: var(--myp-muted, #8d9bbd);
}

.myp-showcase .myp-bos-rozet svg { width: 15px; height: 15px; }

.myp-showcase .myp-bos-yol li.is-done { color: var(--myp-text-soft, #c7d3ea); }
.myp-showcase .myp-bos-yol li.is-done .myp-bos-rozet {
    border-color: rgba(91, 157, 255, .45);
    background: rgba(91, 157, 255, .15);
    color: #9ec2ff;
}

.myp-showcase .myp-bos-yol li.is-now { color: var(--myp-amber-strong, #ffdf8e); }
.myp-showcase .myp-bos-yol li.is-now .myp-bos-rozet {
    border-color: var(--myp-amber-line, rgba(243, 193, 79, .45));
    background: var(--myp-amber-soft, rgba(243, 193, 79, .14));
    color: var(--myp-amber-strong, #ffdf8e);
    box-shadow: 0 0 0 6px rgba(243, 193, 79, .07);
}

.myp-showcase .myp-bos-yol small {
    font-family: var(--myp-font-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--myp-muted, #8d9bbd);
}

.myp-showcase .myp-bos-yol li.is-now small { color: var(--myp-amber, #f3c14f); }

/* ---------------------------------------------- 3d) Panelde dikey ritim
   Başlık bloğu ile içerik arasındaki tam genişlikteki AYIRAÇ ÇİZGİSİ kaldırıldı
   (`.myp-dash-head`in alt kenarlığı): sayfayı ortadan ikiye bölüyordu, oysa
   başlık ile liste aynı akışın parçası. Ayrım artık yalnızca boşlukla.

   Boşluklar tek bir ritme oturtuldu — 16px'in katları:
       etiket → başlık        16
       başlık → açıklama      16
       açıklama → çizgi       24
       çizgi  → içerik        48   (başlık bloğunun altı + bölümün üstü)
       içerik → sayfa sonu    48
   Böylece "aradaki boşluk neden şurada 21, burada 104?" sorusu kalmıyor. */
.myp-showcase .myp-dash-head {
    border-bottom: 0;
    padding-bottom: 0;
}

.myp-showcase .myp-dash-head + .myp-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

.myp-showcase .myp-pagehead-etiket { margin-bottom: 16px; }
.myp-showcase .myp-pagehead-lead   { margin-top: 16px; }
.myp-showcase .myp-pagehead-cizgi  { margin-top: 24px; }

/* Boş durum kartı: iç boşluklar da aynı ritimde (32 / 40). Alt dolgu bir
   kademe fazla — yüzey aşağı doğru söndüğü için son satırın altında nefes
   kalmazsa yazı kesilmiş gibi duruyor. */
.myp-showcase .myp-bos {
    padding: 40px clamp(22px, 4vw, 44px) 48px;
}

.myp-showcase .myp-bos-ikon   { margin-bottom: 16px; }
.myp-showcase .myp-bos-metin  { margin-top: 16px; }
.myp-showcase .myp-bos-eylem  { margin-top: 32px; }

/* Kategori süzgeci ile ilk ızgara arasındaki boşluk da aynı adım. */
.myp-showcase .myp-kfiltre { margin-bottom: 32px; }

/* ==========================================================================
   KAYITLI KİP — panel kartı (dashboard/mikro-yeterlilik-programlarim)
   --------------------------------------------------------------------------
   Vitrindeki kartın AYNISI; farkı fiyat/sepet yerine ilerleme ve erişim
   bilgisi taşıması. Panelde ayrı bir kart dili kurulmadı: kullanıcı aynı
   ürünü iki ayrı görünümde görmemeli.
   ========================================================================== */

/* Plaka üstü durum rozetleri — fiyat rozetleriyle aynı kutu, farklı renk. */
.mcat-etiket--bitti {
    border-color: rgba(52, 211, 153, .45);
    background: rgba(52, 211, 153, .16);
    color: #7ef0c2;
}
.mcat-etiket--doldu {
    border-color: rgba(251, 191, 36, .45);
    background: rgba(251, 191, 36, .16);
    color: #ffd98a;
}

/* İlerleme — künye ile etek arasında. */
.mcat-ilerleme { margin-top: 12px; }
.mcat-ilerleme-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--myp-muted, #918b9b);
    font-size: .74rem;
}
.mcat-ilerleme-ust b { color: var(--myp-text, #f4f4f7); font-size: .8rem; font-weight: 700; }
.mcat-ilerleme-ray {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.mcat-ilerleme-dolgu {
    display: block;
    height: 100%;
    border-radius: 999px;
    /* Mikro yeterliliğin rengi MAVİ (sertifika tarafı turuncu). Ayrım
       bilinçli: iki ürün ailesi tek bakışta ayrılsın. */
    background: linear-gradient(90deg, var(--myp-accent, #5b9dff), #7cb8ff);
    transition: width .5s cubic-bezier(.2, .7, .3, 1);
}
/* Tamamlanan program da MAVİ kalıyor (eskiden yeşildi): mikro yeterliliğin
   rengi tek. Ayrım renkle değil KOYULUKLA — bitmiş çubuk daha doygun bir
   maviden açığa akıyor, süren çubuk ise açık tonlarda. */
.mcat-ilerleme-dolgu.is-bitti {
    background: linear-gradient(90deg, #2563eb, #3b82f6 45%, #7cb8ff);
}

.mcat-foot--kayitli { justify-content: space-between; }
.mcat-erisim {
    color: var(--myp-muted, #918b9b);
    font-size: .74rem;
    white-space: nowrap;
}

/* Panel ızgarası: vitrinle aynı hücre ölçüsü. Kart `.pub-slide` sarmalıyla
   geliyor (ray bileşeninden miras), ızgarada o sarmal genişliği sınırlamamalı. */
.mcat-izgara--panel > [data-kkart] { min-width: 0; }
.mcat-izgara--panel .pub-slide { width: auto; min-width: 0; flex: 1 1 auto; }