/* ===========================================================================
   Mikro yeterlilik program sayfası — /mikro-yeterlilikler/{slug}
   ---------------------------------------------------------------------------
   Bu dosya TEK BAŞINA bir tasarım dili DEĞİL: sertifika detay sayfasının
   (`cert-ui.css`) uzantısı. Sayfa aynı zemini (#0b0c0c), aynı bölüm ritmini
   (`.pub-band` + `.crt-glow` / `.crt-seam .crt-soft`), aynı başlık bileşenini
   (`.catrow-head`) ve aynı `--crt-*` renk rampasını kullanıyor.

   Burada YALNIZCA sertifikada karşılığı olmayan bileşenler tanımlı:
   künye/dahiller ızgarası, müfredat akordeonu, çalışma planlayıcı, sertifika
   önizlemesi, belge eki tablosu, puan dağılımı, yorumlar, SSS.

   Renk kuralı sertifikayla aynı: her değer `rgba(var(--crt-a-rgb), …)`
   üzerinden geliyor ve YEDEĞİ marka turuncusu (243, 122, 82). Program için
   renk üretilemezse sayfa turuncu kalır, bozulmaz.

   Betik bağlantı noktaları: `micro.js` (akordeon, sepet, video, alt menü),
   `cert-detail.js` (`[data-reveal]`, `[data-crt-bar]`),
   `micro-detail.js` (planlayıcı, müfredat aracı, paylaşım, ilerleme çizgisi).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Sayfa çatısı
   --------------------------------------------------------------------------- */

/* Okuma ilerleme çizgisi — sayfanın en üstünde, navbar'ın hemen altında.
   Genişliği `micro-detail.js` tarafından `--mcd-ilerleme` ile yazılıyor. */
.mcd-ilerleme {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    height: 2px;
    pointer-events: none;
    background: transparent;
}
.mcd-ilerleme::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--mcd-ilerleme, 0%);
    background: linear-gradient(90deg,
        rgba(var(--crt-a-rgb, 243, 122, 82), .95),
        rgba(var(--crt-b-rgb, 236, 56, 125), .95));
    box-shadow: 0 0 12px rgba(var(--crt-a-rgb, 243, 122, 82), .5);
    transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .mcd-ilerleme::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   1. Kahraman ek parçaları
   ---------------------------------------------------------------------------
   Sertifikadaki `.crt-hero` olduğu gibi kullanılıyor; buraya yalnızca
   mikro yeterliliğe özgü üç şey ekleniyor: rozet satırı, künye satırı
   (eğitmen + puan + katılımcı) ve kapak yerine geçen "plaka".
   --------------------------------------------------------------------------- */

.mcd-rozetler { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.mcd-rozet {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #d5d9d9;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Vurgulu rozet programın rengini taşır — satırda EN FAZLA biri böyle
   olmalı, yoksa kahraman alanı yine boğuluyor (bkz. cert-ui.css notu). */
.mcd-rozet--vurgu {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .5);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .14);
    color: var(--crt-ink, #ffbe9c);
}
.mcd-rozet svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Eğitmen · puan · katılımcı satırı */
.mcd-kunye { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.35rem; }
.mcd-kunye-oge { display: inline-flex; align-items: center; gap: .55rem; color: var(--crt-muted); font-size: .84rem; }
.mcd-kunye-oge svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mcd-kunye-oge strong { color: #fff; font-weight: 700; }
.mcd-kunye-ad { display: block; color: #fff; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.mcd-kunye-alt { display: block; color: var(--crt-dim); font-size: .74rem; }

/* Eğitmen ekibi (2026-10-02): ana eğitmen + diğerlerinin üst üste binen
   fotoğrafları; blok Eğitmenler bölümüne kaydırır. Renkler temada. */
.mcd-ekip { margin: -.35rem -.6rem; padding: .35rem .75rem .35rem .45rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.mcd-ekip:hover, .mcd-ekip:focus-visible { border-color: var(--crt-line); background: var(--crt-panel); }
.mcd-ekip-yigin { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mcd-ekip-yigin .mcd-avatar { box-shadow: 0 0 0 2px #070c18; }
.mcd-ekip-yigin .mcd-avatar--kucuk { width: 28px; height: 28px; margin-left: -9px; font-size: .62rem; }
.mcd-ekip-yigin .mcd-avatar:first-child { position: relative; z-index: 4; }
.mcd-ekip-yigin .mcd-avatar--kucuk:nth-child(2) { z-index: 3; }
.mcd-ekip-yigin .mcd-avatar--kucuk:nth-child(3) { z-index: 2; }
.mcd-ekip-yigin .mcd-avatar--kucuk:nth-child(4) { z-index: 1; }
.mcd-ekip-yigin .mcd-avatar--kucuk { position: relative; }
.mcd-ekip .mcd-kunye-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
.mcd-ekip-daha { font-weight: 700; }
.mcd-ekip-gor { display: inline-flex; align-items: center; gap: .15rem; font-weight: 600; }
.mcd-ekip-gor svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.mcd-ekip:hover .mcd-ekip-gor svg { transform: translateY(2px); }

.mcd-avatar {
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    /* Eğitmen fotoğrafları dikey portre (3:4): ortadan kırpınca yuvarlakta
       gövde kalıyor, baş kesiliyordu. Kırpma üstten — yüz tam görünsün. */
    object-position: 50% 6%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: #16191a;
}
/* Fotoğrafı olmayan kişi için baş harf madalyonu — aynı ölçü, aynı çerçeve. */
span.mcd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crt-ink, #ffbe9c);
    font-family: Montserrat, sans-serif;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .13);
}

/* Yıldızlar */
.mcd-yildiz { display: inline-flex; align-items: center; gap: 2px; }
.mcd-yildiz svg { width: 15px; height: 15px; fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.6; stroke-linejoin: round; }
.mcd-yildiz svg.is-on { fill: #f6bf4f; stroke: #f6bf4f; }
.mcd-yildiz--sm svg { width: 13px; height: 13px; }

/* --- Plaka: kapak görseli ya da üretilmiş monogram --------------------- */
.mcd-plaka { position: relative; display: flex; align-items: center; justify-content: center; }
/* Sertifikada ikon saydam PNG olduğu için dönen halka ARKASINDAN görünüyor.
   Burada plaka dolu bir kare; halka aynı ölçüde kalsaydı tamamen örtülürdü.
   Büyütülüp bulanıklaştırılarak plakanın çevresine taşan bir hâleye
   dönüştürülüyor. */
.mcd-plaka .crt-icon-ring {
    width: 340px; height: 340px;
    max-width: 132%;
    opacity: .32;
    filter: blur(16px);
}
/* Sargı: çerçeve + köşe rozeti tek gövde gibi süzülsün diye yüzer animasyon
   çerçeveden BURAYA taşındı (rozet çerçevenin dışına taştığı için içine
   konamıyor — overflow:hidden kırpar). */
.mcd-plaka-sargi {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 260px;
    animation: crt-float 7s ease-in-out infinite alternate;
}
/* Standart Mikro Yeterlilik Rozeti — plakanın köşesine oturan mühür. */
.mcd-plaka-rozet {
    position: absolute;
    right: -34px;
    bottom: -30px;
    z-index: 2;
    width: 118px;
    height: 118px;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .5));
}
.mcd-plaka-cerceve {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(150deg, var(--crt-c1, #f37a52), var(--crt-c2, #ec387d));
    box-shadow: 0 26px 52px rgba(0, 0, 0, .58);
}
.mcd-plaka-cerceve img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Monogram: kapak yoksa programın baş harfleri degradenin üzerinde.
   Harfler beyaz değil, ZEMİNİN koyu tonunda: degrade her programda farklı
   açıklıkta ve beyaz harf bazılarında okunmuyordu. */
.mcd-plaka-harf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    color: rgba(9, 10, 10, .78);
    font-family: Montserrat, sans-serif;
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
}
/* Amblemli plaka: kapak görseli olmayan programlarda baş harf yerine
   katalog kahramanındaki mühürlü belge çizimi. Zemin, program degradesi
   yerine rozetin gece laciverdi alanı — altın çizgi ancak koyuda parlar.
   Işık katı kuralları katalogdan uyarlandı (micro-catalog.css bu sayfada
   yüklü değil; oradaki özgüllük notu burada da geçerli: gecikmeler `g.`
   ile yazılmazsa animation kısayolu hepsini sıfırlıyor). */
.mcd-plaka-cerceve--amblem {
    background: radial-gradient(120% 140% at 46% 38%, #22416f 0%, #16315c 55%, #0f2547 100%);
}
.mcd-plaka-amblem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    color: #ffcf9e;
}
.mcd-plaka-amblem svg { width: 66%; height: 66%; }
.mcd-amblem-isik > g > * {
    stroke: #ffe487;
    stroke-width: 2.6;
    stroke-dasharray: 16 84;
    stroke-dashoffset: 100;
    animation: mcdAmblemIsik 4.2s linear infinite;
    filter: drop-shadow(0 0 3px rgba(255, 220, 120, .55));
}
@keyframes mcdAmblemIsik {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}
.mcd-amblem-isik > g.mcd-amblem-isik-0 > * { animation-delay: 0s; }
.mcd-amblem-isik > g.mcd-amblem-isik-1 > * { animation-delay: .35s; }
.mcd-amblem-isik > g.mcd-amblem-isik-2 > * { animation-delay: .5s; }
.mcd-amblem-isik > g.mcd-amblem-isik-3 > * { animation-delay: .65s; }
.mcd-amblem-isik > g.mcd-amblem-isik-4 > * { animation-delay: .95s; }
.mcd-amblem-isik > g.mcd-amblem-isik-5 > * { animation-delay: 1.2s; }
.mcd-amblem-isik > g.mcd-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 */ {
    .mcd-amblem-isik { display: none; }
}

/* Plakanın üzerindeki cam parlaması — düz degradeyi nesneleştiriyor. */
.mcd-plaka-cerceve::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}
/* Tanıtım videosu düğmesi */
.mcd-plaka-oynat {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px; height: 62px;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 12, 12, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 10px 26px rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease;
}
.mcd-plaka-oynat:hover { transform: translate(-50%, -50%) scale(1.07); background: rgba(10, 12, 12, .8); }
.mcd-plaka-oynat svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }

@media screen and (max-width: 1023px) {
    .mcd-plaka { justify-content: flex-start; order: -1; }
    .mcd-plaka-sargi { max-width: 150px; }
    .mcd-plaka-rozet { width: 76px; height: 76px; right: -18px; bottom: -16px; }
    .mcd-plaka-cerceve { max-width: 150px; border-radius: 20px; }
    .mcd-plaka .crt-icon-ring { left: 75px; width: 210px; height: 210px; }
}

/* Kayıt durumu uyarıları — kahramanda ve gerekirse bölümlerde. */
.mcd-uyari {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 60ch;
    margin-top: 1.1rem;
    padding: .8rem 1rem;
    border-radius: .8rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: var(--crt-muted);
    font-size: .85rem;
    line-height: 1.6;
}
.mcd-uyari svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mcd-uyari--ok { border-color: rgba(6, 214, 160, .32); background: rgba(6, 214, 160, .08); color: #8fe8cc; }
.mcd-uyari--dikkat { border-color: rgba(246, 191, 79, .32); background: rgba(246, 191, 79, .08); color: #f0d49a; }
.mcd-uyari--hata { border-color: rgba(239, 68, 68, .34); background: rgba(239, 68, 68, .08); color: #f3b0b0; }

/* ---------------------------------------------------------------------------
   1b. `body` kaydırma kabı olmaktan çıkıyor
   ---------------------------------------------------------------------------
   `main.css` bütün siteye `body { overflow-x: hidden }` veriyor. Bu, body'yi
   kendi kaydırma kabına çevirdiği için içindeki `position: sticky` öğeler
   görüntü alanına değil BODY'ye göre konumlanıyor — bölüm menüsü hiç
   yapışmıyordu. Menü artık vitrinin `.myp-subnav` bileşeni olduğu için bu işi
   `micro.css` yapıyor: `body:has(.myp-subnav) { overflow-x: clip }`. Buradaki
   `body:has(.mcd-nav)` kuralı kaldırıldı — kancası kalmadı.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2. Yapışkan bölüm menüsü — KATALOG VİTRİNİNİN BİREBİR AYNISI
   ---------------------------------------------------------------------------
   Menü eskiden sayfa genişliğinde, degrade zeminli bir şeritti (`.mcd-nav`).
   Artık `/mikro-yeterlilikler` vitrinindeki hapın ta kendisi: kahramanın alt
   kenarına 30px binen, ortada yüzen buzlu cam.

   NEDEN BURAYA KOPYALANDI: görünümü besleyen iki kaynak var — `micro.css`
   (taban `.myp-subnav*` kuralları, bu sayfada YÜKLÜ) ve `micro-catalog.css`
   (`.myp-showcase` örtüsü, bu sayfada YÜKLÜ DEĞİL). İkincisini yüklemek
   sayfanın tamamının paletini değiştirirdi; onun yerine yalnızca menüye
   dokunan kuralları buraya alıyoruz.

   ÖLÇÜLER VİTRİNDEN ALINDI, tahmin değil: hap 62px, dolgu 9px/18px,
   bağlantı 9px/18px · .84rem/600, düğme 42px. Sıralama önemli — bu dosya
   `micro.css`ten SONRA yükleniyor, bu yüzden oradaki medya sorgularının
   ezdiği değerleri (≤768 `top`, ≤560 dolgular) aşağıda yeniden yazmak
   ZORUNLU; yoksa dar ekranda menü masaüstü ölçüleriyle kalır.

   Kancalar değişmedi: `micro.js → initSubnav` `[data-myp-subnav]` ve
   `a[href^="#"]` üzerinden sürüyor, etkin bağlantıyı `.is-active` işaretliyor.
   --------------------------------------------------------------------------- */

/* Sarmalayıcı saydam ve tıklama geçirgen; yalnızca hap tıklanabilir. */
.myp-subnav {
    position: sticky;
    /* Üst menü kaydırıldığında 68px'e iniyor; üstüne nefes payı bırakılır. */
    top: 84px;
    z-index: 8;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    margin-top: -30px;
    pointer-events: none;
}

.myp-subnav-pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Vitrinde gövdeden miras: 1.6. Bu sayfanın `.crt` katmanı 1.5 veriyor —
       bağlantı kutusu 42px yerine 40px kalıyor, hover hapı komşu düğmeden
       alçak duruyordu. Miras zinciri hapta kesiliyor. */
    line-height: 1.6;
    max-width: 100%;
    /* Dolgu SİMETRİK: micro.css'teki `8px 8px 8px 14px` öğeleri hapın sağ
       ucuna yapıştırıyordu (bkz. micro-catalog.css §3). */
    padding: 9px 18px;
    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);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* MAVİ CAM — düğmenin reçetesi. Vitrinde `.myp-showcase` üzerinde tanımlı;
       burada menünün kendi kapsamında yaşıyor, sayfanın turkuaz `--crt-*`
       paletine karışmı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;
}

.myp-subnav-pill::-webkit-scrollbar { display: none; }

.myp-subnav-link {
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--myp-font);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.6;
    color: #cfd6d6;
    white-space: nowrap;
    transition: background-color .22s ease, color .22s ease;
}

.myp-subnav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* Etkin öğeyi YALNIZCA arka plan anlatır; yazı ölçüleri pasif hâlle birebir
   aynı kalıyor, yoksa hap içindeki satır her kaydırmada oynuyor. Beyaz metin
   micro.css'teki `.myp-subnav-link.is-active` kuralından geliyor. */
.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: hap gövde, ince kenarlık, saydam
   dolgu. Ölçüsü komşu bağlantılarla aynı (42px). */
.myp-subnav-btn {
    flex: 0 0 auto;
    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-family: var(--myp-font);
    font-size: .84rem !important;
    /* Komşu bağlantılarla AYNI kalınlık (600); ayrımı kenarlık ve dolgu verir. */
    font-weight: 600 !important;
    line-height: 1;
    box-shadow: none !important;
    transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}

.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ı.
   Küçük boyutta konturlu üçgen bulanık okunduğu için üçgen dolu.
   Seçici hap üzerinden kuruluyor: `micro.css`teki `.myp-btn svg` kuralı
   (0,1,1) ikona 17px dayatıyor, tek sınıf onu ezemiyor. Vitrin de aynı işi
   `.myp-showcase .myp-subnav-btn-ikon` ile yapıyor. */
.myp-subnav-pill .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-subnav-pill .myp-subnav-btn-ikon path { fill: currentColor; stroke: none; }

/* Dar ekran — vitrindeki değerlerin aynısı. Bu dosya micro.css'ten sonra
   yüklendiği için oradaki medya sorguları yukarıdaki kurallarca eziliyor;
   burada birebir geri yazılıyorlar. */
@media screen and (max-width: 768px) {
    /* Mobilde üst menü 67px + alt gezinme şeridi 64px = 131px, + boşluk. */
    .myp-subnav { top: 145px; }
}

@media screen and (max-width: 560px) {
    .myp-subnav { padding: 0 12px; margin-top: -24px; }
    /* Hap zaten yatay kayıyor; 18px'lik dolgu kayan alandan çalıyor.
       Kaydırma incelikleri katalog hapıyla ortak (micro-catalog.css §3):
       sayfa gövdesine taşan momentum yok, dokunmatikte atalet var. */
    .myp-subnav-pill {
        gap: 6px;
        padding: 7px 12px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .myp-subnav-link { padding: 8px 13px; }
    .myp-subnav-btn { height: 40px !important; padding: 0 .85rem !important; }
    .myp-subnav-pill .myp-subnav-btn-ikon { width: 15px; height: 15px; }
}

/* Sertifikada satın alma bağlantıları <a> idi; burada üçü de <button>
   (JS ile sepete ekleniyor). Tarayıcı varsayılanlarını sıfırlıyoruz —
   `cert-ui.css` yalnızca görünümü tanımlıyor, öge türünü değil. */
.crt button.crt-btn,
.crt button.crt-bar-btn {
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.crt button.crt-btn[disabled],
.crt button.crt-bar-btn[disabled] { opacity: .55; cursor: progress; }

/* Fiyat + sepet TEK düğmede — vitrin kartı ve /certificate-programs'daki
   `.btn-basket` ile 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. */
.crt .crt-btn--sepet {
    display: inline-grid !important;
    grid-template-columns: auto max-content;
    align-items: center;
    justify-items: center;
}
.crt .crt-btn--sepet > svg { grid-area: 1 / 1; }
.crt-sepet-fiyat,
.crt-sepet-etiket {
    grid-area: 1 / 2;
    white-space: nowrap;
    transition: opacity .22s ease, transform .22s ease;
}
.crt-sepet-fiyat {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .45rem;
}
.crt-sepet-etiket { opacity: 0; transform: translateY(6px); pointer-events: none; }
.crt .crt-btn--sepet:hover .crt-sepet-fiyat { opacity: 0; transform: translateY(-6px); }
.crt .crt-btn--sepet:hover .crt-sepet-etiket { opacity: 1; transform: translateY(0); }

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

/* ---------------------------------------------------------------------------
   3. Künye ızgarası + pakete dahil
   --------------------------------------------------------------------------- */
.mcd-olculer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}
.mcd-olcu {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    transition: border-color .25s ease, transform .25s ease;
}
.mcd-olcu:hover { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .4); transform: translateY(-2px); }
.mcd-olcu-etiket { display: flex; align-items: center; gap: .4rem; color: var(--crt-dim); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mcd-olcu-etiket svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mcd-olcu-deger { margin-top: .45rem; color: #fff; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }

.mcd-dahil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .5rem 1.5rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1.1rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
}
.mcd-dahil-oge { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; color: var(--crt-muted); font-size: .88rem; }
.mcd-dahil-oge svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--crt-ink, #ffbe9c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------
   4. Kazanımlar ve yetkinlik çipleri
   --------------------------------------------------------------------------- */
.mcd-kazanimlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}
.mcd-kazanim {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    color: var(--crt-text);
    font-size: .92rem;
    line-height: 1.6;
    transition: border-color .25s ease, transform .25s ease;
}
.mcd-kazanim:hover { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .4); transform: translateY(-2px); }
.mcd-kazanim svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: var(--crt-ink, #ffbe9c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Öğrenme çıktıları v2 (2026-10-02): numaralı iki sütun, eylem etiketi,
   4 satır kısaltma, ikonlu kanıt etiketleri. Renkler temada (§10). */
.mcd-kz-giris { margin: .9rem 0 0; color: var(--crt-muted); font-size: .95rem; font-style: italic; }
.mcd-kz {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    counter-reset: none;
}
@media screen and (max-width: 860px) { .mcd-kz { grid-template-columns: 1fr; } }
.mcd-kz-oge {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    margin: 0;
    padding: 1.25rem 1.35rem 1.2rem 1.2rem;
    border-radius: 1.1rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    overflow: hidden;
}
.mcd-kz-no {
    font-family: Montserrat, sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: lining-nums tabular-nums;
    min-width: 2.6ch;
}
.mcd-kz-govde { min-width: 0; }
.mcd-kz-eylem {
    display: inline-block;
    margin-bottom: .45rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.mcd-kz-metin {
    margin: 0;
    color: var(--crt-text, #e9eded);
    font-size: .95rem;
    line-height: 1.65;
    max-width: 62ch;
}
.mcd-kz-metin.is-kisa {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mcd-kz-devam {
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.mcd-kz-kanit { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.mcd-kz-kanit span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 26px;
    padding: 0 .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}
.mcd-kz-kanit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Dar ekranda numara üstte, metin tam genişlik (yan sütun metni daraltıyordu). */
@media screen and (max-width: 560px) {
    .mcd-kz-oge { grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem 1.1rem 1.05rem 1.2rem; }
    .mcd-kz-no { font-size: 1.55rem; }
}

.mcd-cipler { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.mcd-cip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 .85rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--crt-a-rgb, 243, 122, 82), .3);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .09);
    color: var(--crt-ink, #ffbe9c) !important;
    font-size: .8rem;
    font-weight: 700;
}
/* Çipler bilgi etiketi, bağlantı değil (2026-10-02): üzerine gelme efekti yok. */

/* ---------------------------------------------------------------------------
   5. Müfredat
   --------------------------------------------------------------------------- */
.mcd-muf-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.mcd-muf-ozet { color: var(--crt-muted); font-size: .86rem; }
.mcd-muf-ozet strong { color: #fff; }

/* Modül ağırlık şeridi: her modül, süresi oranında bir dilim. Müfredatın
   nerede yoğunlaştığını akordeonu açmadan gösteriyor; dilime tıklayınca o
   modül açılıp görünüşe kayıyor (micro-detail.js). */
.mcd-serit { display: flex; gap: 3px; height: 12px; margin-bottom: 1rem; border-radius: 999px; overflow: hidden; }
.mcd-serit-dilim {
    flex: 1 1 auto;
    min-width: 8px;
    border: 0;
    padding: 0;
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .28);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.mcd-serit-dilim:hover,
.mcd-serit-dilim:focus-visible { background: rgba(var(--crt-a-rgb, 243, 122, 82), .85); outline: none; }
.mcd-serit-dilim.is-open { background: rgba(var(--crt-a-rgb, 243, 122, 82), .7); }
.mcd-serit-dilim[hidden] { display: none; }

.mcd-muf-arac { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.mcd-ara {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
}
.mcd-ara svg { position: absolute; left: .85rem; width: 16px; height: 16px; fill: none; stroke: var(--crt-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mcd-ara input {
    width: 100%;
    height: 42px;
    padding: 0 .95rem 0 2.4rem;
    border-radius: 999px;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    color: var(--crt-text);
    font-size: .86rem;
}
.mcd-ara input::placeholder { color: var(--crt-dim); }
.mcd-ara input:focus { outline: none; border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .6); }

.mcd-dugme {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 42px;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    color: var(--crt-text) !important;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.mcd-dugme:hover { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .55); background: rgba(var(--crt-a-rgb, 243, 122, 82), .12); }
.mcd-dugme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mcd-muf { display: grid; gap: .6rem; }
.mcd-modul {
    border-radius: 1rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    overflow: hidden;
    transition: border-color .25s ease;
}
.mcd-modul.is-open { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .38); }
.mcd-modul[hidden] { display: none; }

.mcd-modul-bas {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: 1rem 1.15rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.mcd-modul-bas:hover { background: rgba(255, 255, 255, .025); }
.mcd-modul-no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: .8rem;
    border: 1px solid rgba(var(--crt-a-rgb, 243, 122, 82), .3);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .1);
    color: var(--crt-ink, #ffbe9c);
    font-family: Montserrat, sans-serif;
    font-size: .82rem;
    font-weight: 800;
}
.mcd-modul-bilgi { flex: 1 1 auto; min-width: 0; }
/* İkisi de <span>: `display: block` olmadan başlık ve alt satır aynı satıra
   akıyor ve dar ekranda "Modül Adı 1. hafta · 3 ders" gibi karışıyordu. */
.mcd-modul-ad { display: block; color: #fff; font-size: .98rem; font-weight: 700; line-height: 1.35; }
.mcd-modul-meta { display: block; margin-top: .25rem; color: var(--crt-dim); font-size: .78rem; }
.mcd-modul-ok { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--crt-dim); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease, stroke .25s ease; }
.mcd-modul.is-open .mcd-modul-ok { transform: rotate(180deg); stroke: var(--crt-ink, #ffbe9c); }

/* Gövde: `grid-template-rows` ile yükseklik animasyonu — `max-height`
   tahminine gerek kalmıyor, uzun modüller de kesilmiyor. */
.mcd-modul-govde {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.2, .7, .3, 1);
}
.mcd-modul.is-open .mcd-modul-govde { grid-template-rows: 1fr; }
.mcd-modul-ic { overflow: hidden; }
.mcd-modul-not { padding: 0 1.15rem .85rem 4.05rem; color: var(--crt-muted); font-size: .85rem; line-height: 1.7; }

.mcd-ders {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.15rem .7rem 4.05rem;
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.mcd-ders[hidden] { display: none; }
.mcd-ders-ikon { flex: 0 0 auto; display: inline-flex; }
.mcd-ders-ikon svg { width: 17px; height: 17px; fill: none; stroke: var(--crt-dim); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mcd-ders-ad { flex: 1 1 auto; min-width: 0; color: var(--crt-text); font-size: .88rem; line-height: 1.45; }
.mcd-ders-tur { display: block; margin-top: .15rem; color: var(--crt-dim); font-size: .72rem; }
.mcd-ders-sure { flex: 0 0 auto; color: var(--crt-dim); font-size: .78rem; font-variant-numeric: tabular-nums; }
.mcd-ders mark { padding: 0 .1em; border-radius: 3px; background: rgba(var(--crt-a-rgb, 243, 122, 82), .32); color: #fff; }

.mcd-onizle {
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin-left: .4rem;
    padding: 0 .5rem;
    border-radius: 999px;
    border: 1px solid rgba(6, 214, 160, .4);
    background: rgba(6, 214, 160, .12);
    color: #8fe8cc;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: 2px;
}

@media screen and (max-width: 767px) {
    .mcd-modul-not,
    .mcd-ders { padding-left: 1.15rem; }
}

/* ---------------------------------------------------------------------------
   6. Çalışma planlayıcı
   ---------------------------------------------------------------------------
   Programın toplam iş yükünü (saat) ziyaretçinin haftalık ayırabileceği
   süreye bölüp bitiş tarihini gösteriyor. Tamamen istemci tarafında; hiçbir
   veri gönderilmiyor.
   --------------------------------------------------------------------------- */
.mcd-plan {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.75rem;
    padding: 1.6rem 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid var(--crt-line);
    background:
        radial-gradient(520px 220px at 88% -20%, rgba(var(--crt-a-rgb, 243, 122, 82), .12), transparent 62%),
        var(--crt-panel);
}
.mcd-plan-baslik { margin: 0 0 .4rem; color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.mcd-plan-alt { margin: 0 0 1.3rem; color: var(--crt-muted); font-size: .88rem; line-height: 1.7; }

.mcd-plan-etiket { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.mcd-plan-etiket span:first-child { color: var(--crt-muted); font-size: .82rem; font-weight: 600; }
.mcd-plan-saat { color: var(--crt-ink, #ffbe9c); font-family: Montserrat, sans-serif; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mcd-plan-saat small { color: var(--crt-dim); font-size: .74rem; font-weight: 600; }

/* Kaydırıcı — tarayıcı varsayılanı koyu zeminde kayboluyor, iki motor için
   de elle biçimlendirildi. */
.mcd-plan-kaydirac {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(var(--crt-a-rgb, 243, 122, 82), .85) var(--mcd-doluluk, 30%),
        rgba(255, 255, 255, .1) var(--mcd-doluluk, 30%));
    cursor: pointer;
}
.mcd-plan-kaydirac::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid #0b0c0c;
    background: var(--crt-ink, #ffbe9c);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.mcd-plan-kaydirac::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid #0b0c0c;
    background: var(--crt-ink, #ffbe9c);
}
.mcd-plan-kaydirac:focus-visible { outline: 2px solid rgba(var(--crt-a-rgb, 243, 122, 82), .8); outline-offset: 4px; }
.mcd-plan-uclar { display: flex; justify-content: space-between; margin-top: .4rem; color: var(--crt-dim); font-size: .72rem; }

.mcd-plan-hazir { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.mcd-plan-hazir button {
    height: 30px;
    padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid var(--crt-line);
    background: transparent;
    color: var(--crt-muted);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.mcd-plan-hazir button:hover,
.mcd-plan-hazir button.is-active {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .55);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .12);
    color: var(--crt-ink, #ffbe9c);
}

.mcd-plan-sonuc { display: grid; align-content: center; gap: .7rem; }
.mcd-plan-kutu {
    padding: 1.05rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--crt-a-rgb, 243, 122, 82), .26);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .07);
}
.mcd-plan-kutu-etiket { color: var(--crt-dim); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mcd-plan-kutu-deger { margin-top: .3rem; color: #fff; font-family: Montserrat, sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.mcd-plan-kutu-not { margin-top: .25rem; color: var(--crt-muted); font-size: .8rem; line-height: 1.55; }
.mcd-plan-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.mcd-plan-ikili .mcd-plan-kutu-deger { font-size: 1.15rem; }

@media screen and (max-width: 1023px) {
    .mcd-plan { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; padding: 1.35rem 1.2rem; }
}

/* ---------------------------------------------------------------------------
   7. Eğitmen kartları
   --------------------------------------------------------------------------- */
.mcd-egitmenler { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .85rem; }
.mcd-egitmen {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1.1rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
    transition: border-color .25s ease, transform .25s ease;
}
.mcd-egitmen:hover { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .4); transform: translateY(-2px); }
.mcd-egitmen .mcd-avatar { width: 64px; height: 64px; font-size: 1.1rem; }
.mcd-egitmen-ad { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.mcd-egitmen-rol { margin-top: .2rem; color: var(--crt-ink, #ffbe9c); font-size: .8rem; font-weight: 600; }
.mcd-egitmen-oz { margin: .6rem 0 0; color: var(--crt-muted); font-size: .85rem; line-height: 1.7; }
.mcd-egitmen-bag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    color: var(--crt-muted) !important;
    font-size: .8rem;
    font-weight: 700;
}
.mcd-egitmen-bag:hover { color: var(--crt-ink, #ffbe9c) !important; }
.mcd-egitmen-bag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------
   8. Sertifika önizlemesi ve belge eki
   --------------------------------------------------------------------------- */
.mcd-belge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

/* Belge sahnesi — katalog vitrinindeki `.myp-cert-visual` ile aynı fikir:
   koyu bir yüzey ve üzerine ışık düşen açık renkli kâğıt. Maketin kendi
   kuralları `micro.css` içinde (`.myp-doc*`); burada yalnızca onu taşıyan
   zemin var. Izgara deseni belgenin "masada durduğu" hissini veriyor. */
.mcd-belge-sahne {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: clamp(1.5rem, 3.5vw, 2.6rem);
    border-radius: 1.15rem;
    border: 1px solid var(--crt-line);
    background:
        radial-gradient(90% 70% at 50% 10%, rgba(255, 255, 255, .07), transparent 62%),
        linear-gradient(160deg, #15131a 0%, #0b0a0e 100%);
    overflow: hidden;
}
.mcd-belge-sahne::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 100%);
            mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 100%);
    pointer-events: none;
}
.mcd-belge-sahne > * { position: relative; z-index: 1; }
.mcd-belge-not { margin: 0; color: var(--crt-dim); font-size: .72rem; letter-spacing: .02em; text-align: center !important; }

@media screen and (max-width: 1023px) {
    .mcd-belge { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   9. SSS
   --------------------------------------------------------------------------- */
.mcd-sss { display: grid; gap: .55rem; }
/* Ortalanmış varyant — katalog vitrinindeki `.myp-faq--cards` ile AYNI ölçü.
   Cevaplar uzun paragraflar; tam genişlikte satır uzunluğu 120 karakteri
   aşıyor ve göz satır başını kaybediyor. 880px ~95 karakterde tutuyor. */
.mcd-sss--orta { max-width: 880px; margin-inline: auto; }

/* Ortalanmış bölüm başlığı: hap etiket + degrade başlık, alt alta ve merkezde.
   `.catrow-head`ten ayrı bir sınıf çünkü o, sayaç rozetini sağa iten
   `space-between` düzeninde. */
.mcd-orta {
    display: grid;
    justify-items: center;
    gap: .8rem;
    margin-bottom: 1.9rem;
    text-align: center;
}
.mcd-orta .catrow-title { justify-content: center; font-size: clamp(1.35rem, 2.6vw, 1.85rem); }

/* Bölüm altındaki destek düğmesi de listeyle aynı eksende. */
.mcd-orta-buy { justify-content: center; margin-top: 1.6rem; }
.mcd-sss-oge { border-radius: 1rem; border: 1px solid var(--crt-line); background: var(--crt-panel); overflow: hidden; transition: border-color .25s ease; }
.mcd-sss-oge.is-open { border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .38); }
.mcd-sss-soru {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.05rem 1.25rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.mcd-sss-soru:hover { background: rgba(255, 255, 255, .025); }
.mcd-sss-soru svg { flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--crt-dim); stroke-width: 2.2; stroke-linecap: round; transition: transform .25s ease, stroke .25s ease; }
.mcd-sss-oge.is-open .mcd-sss-soru svg { transform: rotate(45deg); stroke: var(--crt-ink, #ffbe9c); }
.mcd-sss-cevap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2, .7, .3, 1); }
.mcd-sss-oge.is-open .mcd-sss-cevap { grid-template-rows: 1fr; }
.mcd-sss-ic { overflow: hidden; }
.mcd-sss-ic p { margin: 0; padding: 0 1.25rem 1.15rem; color: var(--crt-muted) !important; font-size: .89rem; line-height: 1.8; text-align: left !important; }

/* ---------------------------------------------------------------------------
   10. Paylaşım satırı ve boş durumlar
   --------------------------------------------------------------------------- */
.mcd-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.6rem; }
.mcd-paylas-etiket { margin-right: .3rem; color: var(--crt-dim); font-size: .78rem; font-weight: 700; }
.mcd-paylas a,
.mcd-paylas button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: var(--crt-muted) !important;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.mcd-paylas a:hover,
.mcd-paylas button:hover {
    border-color: rgba(var(--crt-a-rgb, 243, 122, 82), .6);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .14);
    color: var(--crt-ink, #ffbe9c) !important;
}
.mcd-paylas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mcd-paylas .is-kopyalandi { border-color: rgba(6, 214, 160, .55); color: #8fe8cc !important; }

.mcd-bos {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    border-radius: 1.1rem;
    border: 1px dashed rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .015);
    text-align: center;
}
.mcd-bos-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(var(--crt-a-rgb, 243, 122, 82), .28);
    background: rgba(var(--crt-a-rgb, 243, 122, 82), .09);
    color: var(--crt-ink, #ffbe9c);
    margin-bottom: .4rem;
}
.mcd-bos-ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mcd-bos h3 { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.mcd-bos p { margin: 0; color: var(--crt-muted) !important; font-size: .87rem; line-height: 1.7; text-align: center !important; }

/* ---------------------------------------------------------------------------
   11. Ortaklar / akreditasyon logoları
   --------------------------------------------------------------------------- */
.mcd-ortaklar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.mcd-ortak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 1.1rem;
    border-radius: .9rem;
    border: 1px solid var(--crt-line);
    background: var(--crt-panel);
}
.mcd-ortak img { max-height: 30px; width: auto; opacity: .78; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.mcd-ortak:hover img { opacity: 1; filter: none; }

/* ---------------------------------------------------------------------------
   12. Benzer programlar kartı
   ---------------------------------------------------------------------------
   Sertifikadaki `.crt-card` ile aynı iskelet; mikro programda kapak
   görseli olmayabildiği için plaka yedeği burada da geçerli.
   --------------------------------------------------------------------------- */
.mcd-kart-plaka {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(150deg, var(--crt-c1, #f37a52), var(--crt-c2, #ec387d));
    color: rgba(9, 10, 10, .72);
    font-family: Montserrat, sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.mcd-kart-fiyat { margin-top: auto; color: var(--crt-ink, #ffbe9c); font-size: .88rem; font-weight: 800; }
.mcd-kart-fiyat small { margin-left: .35rem; color: var(--crt-dim); font-size: .72rem; font-weight: 600; text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   13. Yetkinlikler (WEF taksonomisi) · SKH kartları · belge künyesi (EK-1)
   ---------------------------------------------------------------------------
   Çipin rengi kategoriden (`--bec-renk`), SKH kartının rengi hedefin BM
   renginden (`--skh-renk`) — ikisi de görünümden satır içi geliyor; burada
   yalnız nasıl kullanılacakları var.
   --------------------------------------------------------------------------- */
/* Çıktı satırının altındaki kanıt etiketi (UBD hizalaması): sessiz, küçük,
   yalnız eşleme varsa basılır. */
.mcd-kazanim-kanit {
    display: block;
    margin-top: .25rem;
    color: var(--crt-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Kategoriler ızgarada (2026-10-02): tam genişlikte alt alta 1-3 çiplik
   şeritler sağı boş bırakıp bölümü uzatıyordu. */
.mcd-becerigrup { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; gap: .9rem; margin-top: 1rem; }
.mcd-beceri {
    padding: .85rem 1rem .95rem 1.1rem;
    border: 1px solid var(--crt-line);
    border-left: 3px solid var(--bec-renk, var(--crt-ink, #ffbe9c));
    border-radius: .9rem;
    background: var(--crt-panel);
}
.mcd-beceri .mcd-cipler { margin-top: .6rem; }
.mcd-beceri-kat {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .01em;
}
.mcd-beceri-nokta {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--bec-renk, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bec-renk, #fff) 22%, transparent);
}
.mcd-cip--beceri {
    border-color: color-mix(in srgb, var(--bec-renk, #fff) 45%, transparent);
    background: color-mix(in srgb, var(--bec-renk, #fff) 12%, transparent);
    color: #fff;
}

.mcd-skh {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}
.mcd-skh-kart {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid color-mix(in srgb, var(--skh-renk, #fff) 40%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--skh-renk, #fff) 10%, var(--crt-panel));
    color: #fff;
    text-decoration: none;
}
/* Kart artık bağlantı değil: üzerine gelince kalkma/renk açılması yok
   (tıklanabilir izlenimi vermesin). */
/* Rozet PNG'lerinde renkli daire 256px karenin ortasındaki 176px'lik alan;
   yuvaya oturtan scale(1.4545) taşmayı da getiriyor — kırpma YUVADA. */
.mcd-skh-yuva { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--skh-renk, #333); }
.mcd-skh-yuva img { display: block; width: 100%; height: 100%; transform: scale(1.4545); }
.mcd-skh-metin { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mcd-skh-kod { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--skh-renk, #fff); }
.mcd-skh-ad { font-size: .84rem; font-weight: 700; line-height: 1.3; }

.mcd-ek1 { margin-top: 1.4rem; }
.mcd-ek1-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-bottom: .9rem; }
.mcd-ek1-baslik { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 800; }
.mcd-ek1-alt { color: var(--crt-muted); font-size: .8rem; }
.mcd-ek1-liste { margin: 0; }
.mcd-ek1-satir {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: .35rem 1.2rem;
    padding: .7rem 0;
    border-top: 1px solid var(--crt-line);
}
.mcd-ek1-satir:first-child { border-top: 0; padding-top: 0; }
.mcd-ek1-satir dt { margin: 0; color: var(--crt-ink, #ffbe9c); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mcd-ek1-satir dd { margin: 0; color: #dfe4e4; font-size: .9rem; line-height: 1.65; }

/* ---------------------------------------------------------------------------
   14. Küçük ekran
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .mcd-plan-ikili { grid-template-columns: minmax(0, 1fr); }
    .mcd-dahil { padding: 1.1rem 1.15rem; }
    .mcd-egitmen { flex-direction: column; }
    .mcd-ek1-satir { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* Bölüm başlığındaki sayaç (`.catrow-count`, public-ui: nowrap) dar ekranda
   uzun metinle taşıyordu ("6 yetkinlik · WEF Küresel Beceri Taksonomisi").
   Başlık satırı sarılabilir, sayaç kendi satırına iner ve sarılır. */
@media screen and (max-width: 560px) {
    .crt .catrow-title { flex-wrap: wrap; row-gap: .15rem; }
    .crt .catrow-title .catrow-count { white-space: normal; flex-basis: 100%; line-height: 1.35; }
}

/* ---------------------------------------------------------------------------
   2026-10-02 inceleme turu
   --------------------------------------------------------------------------- */
/* Açıklama metni: satır ~180 karaktere uzuyordu; rahat okuma 70-80.
   Geniş ekranda iki sütun (her biri ~70 karakter, panel boş kalmaz);
   tablet ve telefonda tek sütun, 78 karakter sınırıyla. Başlık sütun
   sonunda yalnız kalmasın, paragraf iki sütuna bölünmesin. */
.mcd-aciklama > * { max-width: 78ch; }
@media screen and (min-width: 1100px) {
    .mcd-aciklama { columns: 2; column-gap: 3rem; }
    .mcd-aciklama > * { max-width: none; break-inside: avoid-column; }
    .mcd-aciklama h2, .mcd-aciklama h3, .mcd-aciklama h4, .mcd-aciklama strong:only-child { break-after: avoid-column; }
}
/* Telefonda ağırlık şeridi dilimleri 12px'lik dokunma hedefiydi. */
@media screen and (max-width: 768px) {
    .mcd-serit { height: 18px; gap: 4px; }
}
/* Telefonda: breadcrumb'ın son halkası (program adı) "Ç…" diye kesiliyordu;
   ad hemen altında başlık olarak yazıyor, halka gizlenir. Plaka (amblem)
   başlığın üstünde 150px yer kaplıyordu — 112px'e iner, başlık erken görünür. */
@media screen and (max-width: 600px) {
    .crt-hero .account-breadcrumb li.is-active { display: none; }
    .mcd-plaka-sargi,
    .mcd-plaka-cerceve { max-width: 112px; }
    .mcd-plaka-cerceve { border-radius: 16px; }
    .mcd-plaka-rozet { width: 60px; height: 60px; right: -14px; bottom: -12px; }
    .mcd-plaka .crt-icon-ring { left: 56px; width: 160px; height: 160px; }
}