/* ===========================================================================
   ALTIN & GECE LACİVERTİ TEMASI — mikro yeterlilik ailesi
   ---------------------------------------------------------------------------
   GERİ ALMAK İÇİN: ilgili görünümdeki bu dosyanın <link> satırını silmek
   YETERLİDİR. Bu dosya yalnızca ÜZERİNE yazar; kaynak CSS'lerde hiçbir kural
   değiştirilmedi. Dosya dört sayfadan yükleniyor, her bölüm kendi kapsamıyla
   sınırlı — bir sayfadan kaldırmak diğerlerini etkilemez:

       §1-7  KATALOG   /mikro-yeterlilikler            kapsam .myp-showcase
             (catalog.php — micro-catalog.css'ten sonra)
       §8    GENEL BAKIŞ /dashboard                    kapsam #bolum-mikro
             (dashboard/index.php)
       §9    ÖĞRENME PANELİ + PROGRAM SAYFASI          kapsam .ovw-mikro
             (micro/learn/dashboard.php + program.php)
       §10   PROGRAM DETAYI /mikro-yeterlilikler/{slug} kapsam .crt/.mcd
             (micro/detail.php — sayfaya özgü sınıflar; sertifika detayı bu
             dosyayı YÜKLEMEDİĞİ için .crt kuralları ona ulaşamaz)

   NOT: detay sayfasının renk kimliği CSS'ten değil, detail.php'deki
   `$mcdPalet` dizisinden gelir (cert_color_ramp'e giren kaynak renkler);
   o dizi de altın/mavi çiftlere çevrildi — eski değerleri yorumda duruyor.

   RENK KURALI — İKİ AİLE, İKİ GÖREV:
       ALTIN  = kimlik ve vaat  → plaket, başlık bandı, amblem, ikonlar,
                AKTS etiketi, bölüm ışımalarının sıcak ucu.
       MAVİ   = etkileşim       → düğme, hap, kart çerçevesi, odak, bağlantı.
   Zemin iki ailenin buluştuğu GECE LACİVERTİ: eski sıcak-siyah (#0d0b0e)
   turuncuya çalıyordu ve altını kirletiyordu; lacivert zemin altını mücevher
   gibi öne çıkarır, maviyle de aynı ailedendir.
   =========================================================================== */

/* --------------------------------------------------------------- 1) Palet */
.myp-showcase {
    /* Zemin: sıcak siyah yerine gece laciverti. */
    --myp-bg: #070c18;
    --myp-bg-soft: #0b1226;
    --myp-surface: #0e1628;
    --myp-surface-2: #152039;
    --myp-surface-3: #1d2c4e;
    --myp-border: rgba(158, 183, 255, .13);
    --myp-border-strong: rgba(158, 183, 255, .24);
    --myp-text: #f4f7fd;
    --myp-text-soft: #c7d3ea;
    --myp-muted: #8d9bbd;

    /* Kimlik: turuncu-pembe marka degradesi yerine ALTIN. */
    --myp-brand-from: #ffe487;
    --myp-brand-to: #e8a422;
    --myp-amber: #f3c14f;
    --myp-amber-strong: #ffdf8e;
    --myp-amber-soft: rgba(243, 193, 79, .13);
    --myp-amber-line: rgba(243, 193, 79, .38);

    /* Etkileşim: sayfanın mavisi korunuyor, yalnızca hover bir tık açıldı. */
    --myp-accent: #5b9dff;
    --myp-accent-hover: #8ec0ff;
    --myp-accent-soft: rgba(91, 157, 255, .15);
    --myp-on-accent: #071224;
    --myp-violet: #8fb2ff;
    --myp-cyan: #9ec2ff;

    /* Başlıkta gezen ışık bandı: ALTIN. (micro-catalog.css'te yorumda saklanan
       eski reçetenin kendisi — duraklar ve hız aynı, yalnız renk.) */
    --myp-bant: linear-gradient(100deg,
        #ffffff 0%, #ffffff 38%,
        #ffe487 43%,
        #ffc95e 47%, #ffb03d 50%, #f79a2e 53%,
        #ffe487 57%,
        #ffffff 62%, #ffffff 100%);

    /* Sayfa kökü de yeni zemini bassın (gövde rengi :root'tan geliyor). */
    background-color: var(--myp-bg);
}

/* ------------------------------------------------------------- 2) Kahraman
   Sol üstten mavi, sağdan (amblemin arkasından) ALTIN ışık: altın amblem
   artık menekşe bir sisin değil, kendi ışığının içinde duruyor. */
.myp-showcase .myp-hero {
    background:
        radial-gradient(900px 480px at 10% -12%, rgba(91, 157, 255, .22), transparent 62%),
        radial-gradient(720px 460px at 86% 10%, rgba(243, 193, 79, .17), transparent 60%),
        linear-gradient(180deg, #0a1122 0%, var(--myp-bg) 100%);
    border-bottom-color: rgba(243, 193, 79, .14);
}

/* Dönen halka: menekşe-mavi koni yerine altın↔mavi. Amblemin arkasında iki
   ailenin buluşması — sayfanın renk tezini tek görselde anlatıyor. */
.myp-showcase .myp-hero-halka {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .05) 0%, transparent 60%),
        conic-gradient(from 210deg,
            rgba(243, 193, 79, .55),
            rgba(91, 157, 255, .30),
            rgba(243, 193, 79, .55));
    opacity: .38;
}

/* Amblem çizgisi şeftaliden gerçek altına. Üzerinde dolaşan ışık (#ffe487)
   zaten altındı — taban artık onunla aynı aileden. */
.myp-showcase .myp-hero-amblem-cizim { color: #e9bd58; }

/* Plaket: ılık şeftali cam yerine altın cam. */
.myp-showcase .myp-odul {
    background:
        linear-gradient(96deg, rgba(255, 214, 120, .22) 0%, rgba(255, 255, 255, .10) 100%);
}
.myp-showcase .myp-odul-muhur { color: #ffd97a; }
.myp-showcase .myp-odul-yazi {
    color: #ffe6a3;
    -webkit-text-fill-color: #ffe6a3;
}

/* Motto ve gövde vurguları: sayfanın vaadi altın konuşur. */
.myp-showcase .myp-hero-motto { color: #ffdf8e; }
.myp-showcase .myp-guc { color: #ffd97a; }

/* --------------------------------------------------- 3) Bölüm geçişleri
   Turuncu ışımalar altına, menekşeler maviye; sıcak-siyah dikişler
   (#0d0b0e / #161319) lacivert karşılıklarına dönüyor. */
.myp-showcase .myp-section--glow::before {
    background:
        radial-gradient(900px 420px at 16% -14%, rgba(91, 157, 255, .26), transparent 64%),
        radial-gradient(820px 400px at 86% -8%, rgba(120, 152, 255, .15), transparent 62%),
        radial-gradient(760px 340px at 50% 112%, rgba(243, 193, 79, .12), transparent 66%);
}

.myp-showcase #surec::before {
    background:
        linear-gradient(180deg, var(--myp-bg) 0%, rgba(7, 12, 24, .6) 34%, transparent 68%),
        radial-gradient(760px 340px at 50% 112%, rgba(243, 193, 79, .12), transparent 66%),
        linear-gradient(180deg, transparent 52%, var(--myp-bg-soft) 100%);
}

.myp-showcase #kazanimlar::before {
    background: radial-gradient(760px 340px at 50% 84px, rgba(243, 193, 79, .12), transparent 66%);
}

/* Bölüm ayracı: maviden altına akan ince hat. */
.myp-showcase .myp-section--seam::after {
    background: linear-gradient(90deg,
        transparent 6%,
        rgba(91, 157, 255, .30) 30%,
        rgba(243, 193, 79, .45) 62%,
        transparent 94%);
}

/* ------------------------------------------------------------- 4) Süreç
   İkon tablasının gradyan kenarlığı: turuncu yerine altından maviye. */
.myp-showcase .myp-step-icon::before {
    background: linear-gradient(145deg,
        rgba(255, 223, 142, .85) 0%,
        rgba(243, 193, 79, .45) 38%,
        rgba(158, 183, 255, .22) 72%,
        rgba(91, 157, 255, .35) 100%);
}
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .myp-showcase .myp-step-icon { border: 1.5px solid rgba(243, 193, 79, .45); }
}

/* Adımları bağlayan düz hat (dalga zaten altın — micro-catalog). */
.myp-showcase .myp-step:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(243, 193, 79, .5), rgba(243, 193, 79, .06));
}

/* Son adımın rozeti micro.css'te pembeydi ((0,3,0)'lık kural); diğer üç
   rozetle aynı buzlu cama eşitleniyor. */
.myp-showcase .myp-step:last-child .myp-step-rozet {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ------------------------------------------------------- 5) İkon aileleri
   Kazanım ikonları soluk turuncuydu (#fda871); süreç ikonlarının altınıyla
   (#ffe487, micro-catalog) aynı tona çekiliyor. Hover: altın beyaza ısınır. */
.myp-showcase .myp-icon--warm,
.myp-showcase .myp-icon--teal { stroke: #ffe487; }
.myp-showcase .myp-iconrow-item:hover .myp-icon--warm { stroke: #fff6d8; }

/* ------------------------------------------------------------ 6) Kartlar
   Kart gövdesi ve plaka tabanı sıcak-siyahtan lacivert yüzeye. Işıma
   değişkenlerinin YEDEKLERİ de altın/mavi (değişkensiz kart bile temada). */
.myp-showcase .mcat-card {
    background: #0d1424;
    border-color: rgba(158, 183, 255, .10);
}
.myp-showcase .mcat-card:hover {
    border-color: rgba(91, 157, 255, .5);
    box-shadow: 0 26px 54px -34px rgba(91, 157, 255, .55);
}
.myp-showcase .mcat-plaka {
    background:
        radial-gradient(120% 105% at 10% -10%, rgba(var(--mcat-isik1, 255, 214, 120), .38), transparent 60%),
        radial-gradient(95% 85% at 95% 108%, rgba(var(--mcat-isik2, 91, 157, 255), .30), transparent 62%),
        #0b1120;
}
.myp-showcase .mcat-body {
    background:
        linear-gradient(180deg, rgba(var(--mcat-isik2, 91, 157, 255), .10) 0%, transparent 58%),
        #0d1424;
}

/* Plaka ışımaları: kartın PHP'den gelen satır içi paleti (mercan/pembe/menekşe)
   yerine altın↔mavi çiftleri. Satır içi stili ancak !important ezer; sıra
   `nth-child` ile dönüyor, bitişik kartlar hep farklı çift alıyor.
   (Kaynak paleti app/Views/frontend/micro/partials/catalog_card.php'de duruyor;
   tema kalkarsa kartlar kendiliğinden eski renklerine döner.) */
.myp-showcase .mcat-hucre:nth-child(6n+1) .mcat-card { --mcat-isik1: 255, 214, 120 !important; --mcat-isik2: 91, 157, 255 !important; }  /* altın → mavi      */
.myp-showcase .mcat-hucre:nth-child(6n+2) .mcat-card { --mcat-isik1: 91, 157, 255 !important;  --mcat-isik2: 243, 193, 79 !important; }  /* mavi → altın      */
.myp-showcase .mcat-hucre:nth-child(6n+3) .mcat-card { --mcat-isik1: 255, 223, 142 !important; --mcat-isik2: 232, 164, 34 !important; }  /* açık → koyu altın */
.myp-showcase .mcat-hucre:nth-child(6n+4) .mcat-card { --mcat-isik1: 122, 167, 255 !important; --mcat-isik2: 58, 114, 232 !important; }  /* mavi → lacivert   */
.myp-showcase .mcat-hucre:nth-child(6n+5) .mcat-card { --mcat-isik1: 243, 193, 79 !important;  --mcat-isik2: 142, 203, 255 !important; }  /* altın → gök       */
.myp-showcase .mcat-hucre:nth-child(6n)   .mcat-card { --mcat-isik1: 158, 183, 255 !important; --mcat-isik2: 255, 214, 120 !important; }  /* eflatun-mavi → altın */

/* Kart etiketleri: AKTS altını netleşiyor, indirim pembesi altına dönüyor. */
.myp-showcase .mcat-etiket--akts { border-color: rgba(255, 214, 120, .55); color: #ffe6a3; }
.myp-showcase .mcat-card:hover .mcat-etiket--akts {
    border-color: rgba(255, 214, 120, .9);
    color: #fff3d6;
}
.myp-showcase .mcat-etiket--indirim { border-color: rgba(243, 193, 79, .55); color: #ffdf8e; }

/* "Daha Fazla Göster" sayacı: nötr griden zeminin mavi-grisine. */
.myp-showcase .mcat-daha-kalan { color: var(--myp-muted); }

/* --------------------------------------------------------- 7) Sertifika
   Sahne ve panel sıcak-siyahtan lacivert yüzeye; onay işaretleri altın —
   krem belge maketi lacivert zeminde mühür gibi parlıyor. */
.myp-showcase .myp-cert--v2 .myp-cert-visual {
    background:
        radial-gradient(90% 70% at 50% 12%, rgba(158, 183, 255, .10), transparent 62%),
        radial-gradient(120% 100% at 50% 120%, rgba(243, 193, 79, .06), transparent 55%),
        linear-gradient(160deg, #101a30 0%, #0a1122 100%);
}
.myp-showcase .myp-cert--v2 .myp-cert-panel {
    background: linear-gradient(180deg, #0b1226 0%, #0e1628 100%);
}
.myp-showcase .myp-cert-tick {
    background: rgba(243, 193, 79, .12);
    border-color: rgba(243, 193, 79, .4);
    color: #ffdf8e;
}

/* ===========================================================================
   §8 GENEL BAKIŞ (/dashboard) — Mikro Yeterlilik kartları: "Altın Mühür"
   ---------------------------------------------------------------------------
   Kapsam #bolum-mikro: sertifika ve eğitim kartları AYNI sınıfları kullanıyor
   (dash-mikro-*, #bolum-kurum-egitim), bu bölümün dışına tek kural sızmamalı.

   AMAÇ: mikro yeterlilik kartı, üstündeki sertifika kartlarından bir kademe
   DEĞERLİ okunmalı — mücevher kutusu: lacivert cam gövde, altın degrade
   çerçeve, yüzeyde 7 saniyede bir geçen ışık huzmesi, altın monogram ve
   altın ilerleme çubuğu. Etkileşim dili (mavi) AKTS rozetinde sürüyor.
   =========================================================================== */

/* Bölüm başlığındaki adet etiketi altın konuşsun. */
#bolum-mikro .dash-head-tag {
    border-color: rgba(255, 214, 120, .4);
    background: rgba(243, 193, 79, .1);
    color: #ffe6a3;
}
#bolum-mikro .dash-ray-rozet { color: #b9a86d; }

/* --- Kart gövdesi: lacivert cam + altın degrade çerçeve ------------------- */
#bolum-mikro .dash-mikro-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: transparent;
    background:
        radial-gradient(130% 90% at 100% 0%, rgba(91, 157, 255, .10), transparent 55%),
        linear-gradient(165deg, #111b32 0%, #0a1122 58%, #0d1830 100%);
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .85);
}

/* Altın çerçeve: iki maske katmanı XOR'lanır, yalnızca 1px'lik çerçeve
   boyanır (katalogdaki adım ikonlarıyla aynı teknik). */
#bolum-mikro .dash-mikro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(155deg,
        rgba(255, 223, 142, .75) 0%,
        rgba(243, 193, 79, .35) 34%,
        rgba(158, 183, 255, .16) 68%,
        rgba(243, 193, 79, .45) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    #bolum-mikro .dash-mikro-card { border-color: rgba(243, 193, 79, .4); }
    #bolum-mikro .dash-mikro-card::before { content: none; }
}

/* Yüzeyde dolaşan ışık huzmesi — katalogdaki plaketle aynı dil: dar, eğik,
   yavaş; 7 saniyede bir yüzeyin üstünden geçer. */
#bolum-mikro .dash-mikro-card::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -45%;
    width: 24%;
    height: 220%;
    z-index: 1;
    transform: rotate(16deg);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 236, 190, .13) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: dashMikroIsik 7s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes dashMikroIsik {
    0%, 62% { left: -45%; }
    86%, 100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    #bolum-mikro .dash-mikro-card::after { animation: none; opacity: 0; }
}

#bolum-mikro .dash-mikro-card:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow:
        0 26px 54px -30px rgba(243, 193, 79, .38),
        0 18px 44px -32px rgba(91, 157, 255, .3);
}

/* --- Kapak: altın-mavi ışımalı lacivert plaka, altın monogram ------------- */
#bolum-mikro .dash-mikro-cover { background: #0b1120; }
#bolum-mikro .dash-mikro-cover--art {
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(255, 214, 120, .30), transparent 55%),
        radial-gradient(130% 170% at 100% 100%, rgba(91, 157, 255, .26), transparent 55%),
        #0b1120;
}
/* Baş harf kuralı kaldırıldı: kapakta artık harf basılmıyor (index.php). */

/* --- Kimlik satırı: "Mikro Yeterlilik" mührü + AKTS rozeti ----------------
   Bu iki hap görünümün (index.php) mikro bölümüne eklenen KÜÇÜK işaretleme:
   sertifika kartındaki "SERTİFİKA PROGRAMI" hapının değerli karşılığı. */
#bolum-mikro .dash-mikro-onekler {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
#bolum-mikro .dash-mikro-onek {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .2rem .58rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 214, 120, .42);
    background: linear-gradient(96deg, rgba(255, 214, 120, .16) 0%, rgba(255, 255, 255, .05) 100%);
    color: #ffe6a3;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
#bolum-mikro .dash-mikro-onek svg {
    width: 11px; height: 11px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto;
}
#bolum-mikro .dash-mikro-akts {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 157, 255, .4);
    background: rgba(91, 157, 255, .12);
    color: #bcd6ff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- Metin ve ilerleme ----------------------------------------------------- */
#bolum-mikro .dash-mikro-ins { color: #8d9bbd; }
#bolum-mikro .dash-mikro-foot { color: #8d9bbd; }
#bolum-mikro .dash-mikro-foot strong { color: #ffdf8e; }
#bolum-mikro .dash-mikro-track { background: #16203a; }
#bolum-mikro .dash-mikro-track span {
    background: linear-gradient(90deg, #ffe487, #f3c14f 55%, #e8a422);
    box-shadow: 0 0 10px rgba(243, 193, 79, .45);
}
#bolum-mikro .dash-mikro-devam { color: #ffd97a; }

/* Sertifika indirme rozeti: altın mühür. */
#bolum-mikro .dash-mikro-cert-link {
    border-color: rgba(255, 214, 120, .5);
    background: rgba(7, 12, 24, .85);
    color: #ffe6a3;
}
#bolum-mikro .dash-mikro-cert-link:hover {
    color: #fff3d6;
    border-color: rgba(255, 214, 120, .9);
}

/* Arşiv kartı sönük kalmayı sürdürüyor; yalnızca ton ailesi laciverte döndü. */
#bolum-mikro .dash-mikro-card.is-arsiv::after { animation: none; opacity: 0; }

/* ===========================================================================
   §9 ÖĞRENME PANELİ + PROGRAM SAYFASI — kapsam .ovw-mikro
   ---------------------------------------------------------------------------
   `overview-ui.css` mikro kapsamını maviye çevirir (--du-accent). Mavi
   ETKİLEŞİM rengi olarak kalıyor; bu bölüm yalnızca YÜZEYLERİ laciverte,
   KİMLİK öğelerini (sayfa mührü, belge bağlantıları, etiketler) altına
   çeviriyor. Panel kabuğu (dash-ui.css) sertifika sayfalarıyla ortak olduğu
   için hiçbir kural .ovw-mikro dışına yazılmıyor.
   =========================================================================== */

.ovw-mikro {
    --du-panel: #0d1424;
    --du-line: #1c2743;
    --du-line-soft: #141d33;
    --du-muted: #8d9bbd;
    --du-dim: #6e7d9f;
}

/* Sayfa mührü: başlık ikonu ve üst etiket altın — sayfanın "değer" imzası. */
.ovw-mikro .cov-prog-ikon { stroke: #f3c14f; }
.ovw-mikro .dashpage-eyebrow { color: #d8bd6f; }

/* Belge bağlantıları (Belgelerim, sertifika indirme): altın cam hap. */
.ovw-mikro .cert-doc {
    border-color: rgba(255, 214, 120, .42);
    background: linear-gradient(96deg, rgba(255, 214, 120, .12) 0%, rgba(255, 255, 255, .04) 100%);
    color: #ffe6a3;
}
.ovw-mikro .cert-doc:hover {
    border-color: rgba(255, 214, 120, .8);
    color: #fff3d6;
}
.ovw-mikro .cert-doc svg { stroke: currentColor; }

/* Panel ızgarasındaki kayıtlı kartlar: hücreler `.mcat-hucre` değil
   `[data-kkart]` sarmalayıcıları — katalogdaki altın/mavi ışıma çiftleri
   burada da dönsün (satır içi stili yalnızca !important ezer). */
.ovw-mikro .mcat-izgara > div:nth-child(6n+1) .mcat-card { --mcat-isik1: 255, 214, 120 !important; --mcat-isik2: 91, 157, 255 !important; }
.ovw-mikro .mcat-izgara > div:nth-child(6n+2) .mcat-card { --mcat-isik1: 91, 157, 255 !important;  --mcat-isik2: 243, 193, 79 !important; }
.ovw-mikro .mcat-izgara > div:nth-child(6n+3) .mcat-card { --mcat-isik1: 255, 223, 142 !important; --mcat-isik2: 232, 164, 34 !important; }
.ovw-mikro .mcat-izgara > div:nth-child(6n+4) .mcat-card { --mcat-isik1: 122, 167, 255 !important; --mcat-isik2: 58, 114, 232 !important; }
.ovw-mikro .mcat-izgara > div:nth-child(6n+5) .mcat-card { --mcat-isik1: 243, 193, 79 !important;  --mcat-isik2: 142, 203, 255 !important; }
.ovw-mikro .mcat-izgara > div:nth-child(6n)   .mcat-card { --mcat-isik1: 158, 183, 255 !important; --mcat-isik2: 255, 214, 120 !important; }

/* Program sayfasındaki istatistik kutuları ve belge kartları lacivert
   yüzeyde; "Kalan" kutusunun altın vurgusu kalıyor (dash-ui'nin sabitleri
   --du-panel'den geldiği için çoğu kendiliğinden döndü). Burada yalnızca
   sabit yazılmış sıcak kenarlıklar düzeltiliyor. */
.ovw-mikro .cert-window.is-soon { border-color: rgba(243, 193, 79, .4); color: #ffe6a3; }

/* ===========================================================================
   §10 PROGRAM DETAYI (/mikro-yeterlilikler/{slug}) — kapsam .crt / .mcd
   ---------------------------------------------------------------------------
   Sayfanın renk kimliği detail.php'deki `$mcdPalet`ten (cert_color_ramp)
   geliyor; dizi altın/mavi çiftlere çevrildiği için vurgular, başlık
   degradeleri, çipler ve monogram KENDİLİĞİNDEN temaya döndü. Burada yalnızca
   zemin sıcak siyahtan (0b0c0c) gece lacivertine alınıyor. Bu dosya sertifika
   detayında YÜKLENMEDİĞİ için `.crt` güvenle hedeflenebilir.
   =========================================================================== */

.crt { background-color: #070c18; }

/* Kahramanda kapak görselinin üstündeki karartma perdesi de aynı laciverte
   insin (cert-ui'da rgba(11,12,12) sabitleriyle yazılı). */
.crt-hero::after {
    background: linear-gradient(to bottom,
        rgba(7, 12, 24, .78) 0%,
        rgba(7, 12, 24, .9) 55%,
        #070c18 100%);
}

/* --- Buzlu cam paneller ----------------------------------------------------
   Sayfadaki bütün kutu yüzeyleri cert-ui'ın iki değişkeninden türüyor
   (--crt-panel: #121414, --crt-line: #1f2222). Opak yeşilimsi gri, lacivert
   zeminde yama gibi duruyordu; kapsam içinde saydam laciverte alınca her
   tüketici (crt-panel/card/info-card/cta/step, mcd-olcu/dahil/kazanim/modul/
   plan/egitmen/sss-oge/ortak, arama girişi, mcd-dugme) kendiliğinden zeminle
   kaynaşıyor. */
.crt {
    --crt-panel: rgba(19, 30, 56, .48);
    --crt-line: rgba(148, 178, 255, .14);
}

/* Cam dokusu: kutunun arkasındaki bölüm ışımaları süzülüp yüzeye vursun.
   `:where()` özgüllüğü (0,1,0)'da tutuyor — kaynak dosyalardaki :hover
   kuralları (kenarlık, ışıma gölgesi) çalışmaya devam eder, bu kurallar
   yalnızca sonra yüklendiği için tabanı kazanır. */
:where(.crt) .crt-panel,
:where(.crt) .crt-card,
:where(.crt) .crt-info-card,
:where(.crt) .crt-cta,
:where(.crt) .crt-step,
:where(.crt) .mcd-olcu,
:where(.crt) .mcd-dahil,
:where(.crt) .mcd-kazanim,
:where(.crt) .mcd-modul,
:where(.crt) .mcd-plan,
:where(.crt) .mcd-egitmen,
:where(.crt) .mcd-sss-oge,
:where(.crt) .mcd-ortak {
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    /* Üst kenarda tek çizgilik ışık + altta yumuşak derinlik. :hover'daki
       ışıma gölgeleri bunu bilinçli olarak ezip geçer. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05),
                0 22px 44px -36px rgba(0, 0, 0, .85);
}

/* Küçük denetimler (arama girişi, süzgeç düğmesi): cam gövdeye ince buz. */
:where(.crt) .mcd-ara input,
:where(.crt) .mcd-dugme {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
}

/* Grimsi saydam parçalar da lacivert aileye dönsün: künye çipleri,
   yapışkan satın alma çubuğu ve bölüm gezinme hapı (cert-ui/micro-detail'de
   rgba(10-16,12-19,12-19) sabitleriyle yazılı). */
:where(.crt) .crt-stat { background: rgba(13, 21, 40, .55); border-color: rgba(160, 186, 255, .16); }
.crt-bar { background: rgba(8, 14, 28, .8); }
.myp-subnav-pill { background: rgba(11, 18, 36, .7); border-color: rgba(158, 183, 255, .14); }
.crt .account-breadcrumb ul { background: rgba(13, 21, 40, .55); border-color: rgba(160, 186, 255, .14); }