/* ==========================================================================
   Mikro Yeterlilikler — Tasarım Sistemi
   Tüm sınıflar "myp-" öneki ile izoledir; mevcut stiller etkilenmez.
   ========================================================================== */

:root {
    --myp-bg: #0d0b0e;
    --myp-bg-soft: #161319;
    --myp-surface: #191620;
    /* Yüzey merdiveni ölçülebilir adımlara oturtuldu: eski #1c1c26/#23232f
       adımları arasındaki fark CR 1.01 idi (algı eşiğinin altında, hover ile
       başlık satırı aynı renge düşüyordu). Yeni adımlar: surface→surface-2
       CR 1.19, surface-2→surface-3 CR 1.17. */
    --myp-surface-2: #221e29;
    --myp-surface-3: #2d2835;
    --myp-border: rgba(255, 255, 255, .09);
    --myp-border-strong: rgba(255, 255, 255, .16);
    --myp-text: #f4f4f7;
    --myp-text-soft: #c9c9d4;
    --myp-muted: #918b9b;
    /* Etkileşim rengi admin-ui.css ile aynı kaynaktan: MAVİ. Gerekçesi
       orada yazılı — pembe hem kurumsal ağırlığı taşımıyordu hem de
       "tıklanabilir" ile "durum" anlamlarını birbirine karıştırıyordu.
       NOT: Yönetim kabuğu (admin-ui.css v3.0) bu tokenları .adm kapsamında
       Minimals paletiyle EZER; buradaki değerler yalnızca halka açık
       mikro sayfalarında geçerlidir. */
    --myp-brand-from: #6aa9ff;
    --myp-brand-to: #3f7fe0;
    --myp-accent: #5b9dff;
    --myp-accent-hover: #7cb8ff;
    --myp-accent-soft: rgba(91, 157, 255, .14);
    /* #8b7bf7 kendi tonlu rozet zemininde 4.47:1 idi; #a396ff ile 6.02:1. */
    --myp-violet: #a396ff;
    --myp-cyan: #45c8f1;
    /* DİKKAT: `--myp-accent` eskiden bu dosyada İKİ KEZ tanımlıydı; ikinci
       tanım (turuncu) birincisini (pembe) eziyordu. Sonuç: rozet zemini
       pembe saydamlıkla, metni turuncuyla çiziliyordu — hiç eşleşmeyen bir
       çift. Tek tanıma indirildi. */
    --myp-accent-deep: #0b1f24;
    /* Vurgu zemini üzerine yazılacak metin. #fff/#5b9dff = 2.72:1 (AA altı);
       #0b1220/#5b9dff = 6.88:1. */
    --myp-on-accent: #0b1220;
    /* Amber ailesi — kahramandaki plaket, başlık degradesi ve amblemle aynı
       ton. KURAL: amber = VURGU/DURUM (etiket, rozet, tik, mühür, ray),
       mavi = TIKLANABİLİR (buton, aktif hap, akordeon düğmesi). İkisini
       birbirinin yerine kullanmayın; ayrım okunurluğun taşıyıcısı. */
    --myp-amber: #ffcf9e;
    --myp-amber-strong: #ffe3c4;
    --myp-amber-soft: rgba(255, 207, 158, .13);
    --myp-amber-line: rgba(255, 207, 158, .34);
    --myp-success: #34d399;
    --myp-warning: #fbbf24;
    /* Doygun kırmızı — gerekçesi admin-ui.css içinde. Kontrast 5.82:1. */
    --myp-danger: #fb5f4e;
    --myp-radius: 14px;
    --myp-radius-lg: 22px;
    --myp-radius-sm: 9px;
    --myp-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --myp-shadow-soft: 0 8px 26px rgba(0, 0, 0, .28);
    --myp-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --myp-font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Vitrin başlıkları için serif. Akademik kurumların görsel diline yakın,
       Montserrat'ın geometrik sertliğini dengeler. Yalnızca BÜYÜK boyutlarda
       kullanılır; küçük punto serif okunabilirliği düşürür. */
    --myp-font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
    --myp-ease: cubic-bezier(.22, .61, .36, 1);
    /* Boşluk ölçeği — yeni yazılan tüm kurallar bu tokenlara bağlanır. */
    --myp-s1: 4px;
    --myp-s2: 8px;
    --myp-s3: 12px;
    --myp-s4: 16px;
    --myp-s5: 24px;
    --myp-s6: 32px;
    --myp-s7: 48px;
}

/* ---------------------------------------------------------------- Temel */

.myp {
    background: var(--myp-bg);
    color: var(--myp-text);
    font-family: var(--myp-font-body);
    line-height: 1.6;
    min-height: 60vh;
}

.myp *,
.myp *::before,
.myp *::after {
    box-sizing: border-box;
}

.myp-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.myp-wrap--narrow {
    max-width: 900px;
}

.myp-wrap--wide {
    max-width: 1480px;
}

/* NOT: bu seçici (0,1,1). Bileşen başlık sınıfları (0,1,0) olduğu için
   font-family / font-weight / letter-spacing'i EZER. Serif vitrin
   başlıkları bu yüzden `.myp .myp-hero-title` gibi (0,2,0) seçicilerle
   tanımlanır — bkz. "VİTRİN 3.2 — tipografi" bloğu. */
.myp h1, .myp h2, .myp h3, .myp h4, .myp h5, .myp h6 {
    font-family: var(--myp-font);
    color: var(--myp-text);
    line-height: 1.22;
    margin: 0;
    font-weight: 800;
    letter-spacing: -.015em;
}

/*
 * Başlık ÖLÇEĞİ. Bulma minireset (ve datatables.min.css içindeki Bulma
 * kopyası) h1-h6'yı font-size:100% ile 16px'e sıfırlıyor; modülde hiç boyut
 * tanımlı değildi, bu yüzden panel başlığı gövde metninden yalnızca 1.6px
 * büyüktü. Seçici (0,1,1) olduğu için Bulma'nın (0,0,1) kuralını yükleme
 * sırasından bağımsız yener; kendinden SONRA gelen .myp-prose h3,
 * .myp-empty h3 gibi bileşen kurallarını ise bozmaz (aynı özgüllük, sonra
 * gelen kazanır) — bu yüzden ölçek burada, dosyanın tabanında durur.
 */
/* :where() ile SIFIR özgüllük katkısı: `.myp h1` (0,1,1) olsaydı
   `.myp-hero-title` / `.myp-section-title` / `.myp-pcard-title` (0,1,0)
   bileşen boyutlarını EZERDİ ve yönetim için eklenen bu ölçek 24 halka açık
   micro sayfasındaki başlıkları bozardı. `:where()` ile seçici (0,1,0)'a
   iner; bileşen sınıfları bu bloktan SONRA tanımlı olduğu için kaynak
   sırasıyla kazanır. Sınıfsız başlıklar ise ölçeği almaya devam eder. */
.myp :where(h1) { font-size: 1.75rem; }
.myp :where(h2) { font-size: 1.5rem; }
.myp :where(h3) { font-size: 1.25rem; }
.myp :where(h4) { font-size: 1.0625rem; }
.myp :where(h5) { font-size: .9375rem; }

.myp p {
    margin: 0;
    color: var(--myp-text-soft);
    line-height: 1.7;
}

.myp a {
    color: inherit;
    text-decoration: none;
    transition: color .2s var(--myp-ease);
}

.myp img {
    max-width: 100%;
    display: block;
}

.myp-section {
    padding: 104px 0;
}

.myp-section--tight {
    padding: 56px 0;
}

.myp-section--alt {
    background: var(--myp-bg-soft);
}

.myp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}

.myp-section-title {
    font-family: var(--myp-font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.1vw, 2.65rem);
    line-height: 1.14;
    letter-spacing: -.01em;
}

.myp-section-sub {
    margin-top: 16px;
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--myp-text-soft);
    max-width: 62ch;
}

.myp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--myp-font);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--myp-accent);
    margin-bottom: 14px;
}

.myp-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--myp-accent);
    border-radius: 2px;
}

/* ------------------------------------------------------------- Butonlar */

.myp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--myp-font);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;
    padding: 14px 24px;
    border-radius: var(--myp-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s var(--myp-ease), border-color .2s var(--myp-ease), color .2s var(--myp-ease), box-shadow .2s var(--myp-ease), filter .12s var(--myp-ease);
    white-space: nowrap;
    text-align: center;
}

/* Hover'da KONUM DEĞİŞMEZ. translateY(-2px) imleç altında butonu kaydırıyor,
   fare kenardaysa hover'dan çıkıp titreme (jitter) yapıyordu. Geri bildirim
   yalnızca renk/parlaklık üzerinden verilir. */
.myp-btn:active {
    filter: brightness(.94);
}

.myp-btn:focus-visible {
    outline: 2px solid var(--myp-accent);
    outline-offset: 3px;
}

/* Turuncu zeminde beyaz metin 2.72:1 idi → --myp-on-accent ile 6.89:1 (hover 8.38:1). */
/* Ağır turuncu parıltı ("glow") kaldırıldı; yerine nötr, alçak bir yükseklik
   gölgesi. Renkli glow ekranda ucuz duruyordu. */
.myp-btn--primary {
    background: var(--myp-accent);
    color: var(--myp-on-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.myp-btn--primary:hover {
    background: var(--myp-accent-hover);
    color: var(--myp-on-accent);
}

.myp-btn--ghost {
    background: transparent;
    border-color: var(--myp-border-strong);
    color: var(--myp-text);
}

.myp-btn--ghost:hover {
    border-color: var(--myp-accent);
    color: var(--myp-accent);
}

.myp-btn--light {
    background: #fff;
    color: #111;
}

.myp-btn--light:hover {
    background: #f1f1f1;
    color: #111;
}

.myp-btn--soft {
    background: var(--myp-surface-2);
    border-color: var(--myp-border);
    color: var(--myp-text);
}

.myp-btn--soft:hover {
    background: var(--myp-surface-3);
    color: var(--myp-text);
}

.myp-btn--block {
    width: 100%;
}

.myp-btn--sm {
    padding: 9px 15px;
    font-size: .82rem;
}

.myp-btn--lg {
    padding: 17px 32px;
    font-size: 1rem;
}

/* Devre dışı durum artık opaklıkla değil renk bildirimiyle: opacity .5 ghost
   düğmede metni 3.45:1'e düşürüyor ve kenarlığı da soldurup sınırı yok
   ediyordu. Yeni hâlde metin --myp-sub ile 6.5:1. */
.myp-btn[disabled],
.myp-btn.is-disabled {
    opacity: 1;
    color: var(--myp-sub);
    border-color: var(--myp-border);
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.myp-btn svg,
.myp-btn i {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* -------------------------------------------------------------- Rozetler */

.myp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--myp-font);
    /* .7rem = 11.2px büyük harf çok küçüktü; .75rem = 12px. */
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--myp-surface-3);
    color: var(--myp-text-soft);
    border: 1px solid var(--myp-border);
    white-space: nowrap;
}

.myp-badge--accent { background: var(--myp-accent-soft); color: var(--myp-accent); border-color: rgba(91, 157, 255, .3); }
.myp-badge--success { background: rgba(52, 211, 153, .13); color: var(--myp-success); border-color: rgba(52, 211, 153, .3); }
.myp-badge--warning { background: rgba(251, 191, 36, .13); color: var(--myp-warning); border-color: rgba(251, 191, 36, .3); }
.myp-badge--danger { background: rgba(251, 95, 78, .13); color: var(--myp-danger); border-color: rgba(251, 95, 78, .3); }
.myp-badge--violet { background: rgba(139, 123, 247, .14); color: var(--myp-violet); border-color: rgba(139, 123, 247, .3); }
.myp-badge--cyan { background: rgba(69, 200, 241, .13); color: var(--myp-cyan); border-color: rgba(69, 200, 241, .3); }
/* Nötr/pasif durum rozeti (ör. "Arşiv") — daha önce yanlışlıkla --danger
   kullanılıyordu, hata sinyali veriyordu. */
.myp-badge--soft { background: var(--myp-surface-3); color: var(--myp-text-soft); border: 1px solid var(--myp-border); }
/* `--neutral`, `--soft`un anlamsal adı. Panelin geri kalanı (admin-ui.css)
   nötr durumu bu adla tanıyor; iki modülde aynı kelimeyi kullanmak,
   "pasif" gibi durumların ekrandan ekrana farklı yazılmasını engelliyor. */
.myp-badge--neutral { background: var(--myp-surface-3); color: var(--myp-text-soft); border: 1px solid var(--myp-border); }
/* `--info`, `--cyan`in anlamsal adı. */
.myp-badge--info { background: rgba(69, 200, 241, .13); color: var(--myp-cyan); border-color: rgba(69, 200, 241, .3); }
/* Rozet ikonu — metinle aynı renk, metnin önüne geçmeyen incelikte. */
.myp-badge > .feather,
.myp-badge > [data-feather] { width: 12px; height: 12px; flex: 0 0 auto; stroke-width: 2.4; opacity: .95; }

/* ------------------------------------------------------------------ Hero */

.myp-hero {
    position: relative;
    padding: 116px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(900px 460px at 12% -10%, rgba(91, 157, 255, .20), transparent 62%),
        radial-gradient(760px 420px at 88% 6%, rgba(139, 123, 247, .17), transparent 60%),
        linear-gradient(180deg, #0d0d13 0%, var(--myp-bg) 100%);
    border-bottom: 1px solid var(--myp-border);
}

.myp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(circle at 50% 0, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at 50% 0, #000 0%, transparent 76%);
    pointer-events: none;
}

.myp-hero-inner {
    position: relative;
    z-index: 1;
}

.myp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: center;
}

.myp-hero-title {
    font-family: var(--myp-font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 5.2vw, 4.1rem);
    line-height: 1.06;
    letter-spacing: -.012em;
}

/* Vurgu: gradyan dolgu yerine italik serif + marka rengi. Gradyanlı metin
   küçük ekranda okunurluğu düşürüyor ve "startup" klişesi gibi duruyordu. */
.myp-hero-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--myp-accent);
}

.myp-hero-lead {
    margin-top: 24px;
    font-size: 1.14rem;
    line-height: 1.74;
    color: var(--myp-text-soft);
    max-width: 60ch;
}

.myp-hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.myp-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--myp-border);
}

.myp-stat-value {
    font-family: var(--myp-font);
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.myp-stat-label {
    margin-top: 7px;
    font-size: .8rem;
    color: var(--myp-muted);
}

.myp-hero-art {
    position: relative;
    border-radius: var(--myp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--myp-border);
    box-shadow: var(--myp-shadow);
    aspect-ratio: 4 / 3;
    background: var(--myp-surface);
}

.myp-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------- Süreç (adım) şeridi
   4 kutucuğu birbirine bağlayan tek bir çizgiyle "bunlar sıralı adımlar"
   mesajını netleştirir — düz bir kart ızgarası bunu iletemiyordu. */
.myp-steps {
    --myp-step-icon: 52px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 8px 0 44px;
}

.myp-step {
    position: relative;
}

.myp-step-icon {
    position: relative;
    width: var(--myp-step-icon);
    height: var(--myp-step-icon);
    border-radius: 50%;
    background: var(--myp-accent-soft);
    border: 1px solid rgba(91, 157, 255, .32);
    color: var(--myp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    z-index: 1;
}

.myp-step-icon svg { width: 21px; height: 21px; }

.myp-step-num {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--myp-accent);
    color: var(--myp-on-accent);
    font-family: var(--myp-font);
    font-weight: 800;
    font-size: .72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--myp-bg-soft);
}

/* Bağlantı çizgisi: ikon merkezinden bir sonraki adımın ikonuna kadar,
   grid `gap` boşluğunu da kapsayacak şekilde. */
.myp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--myp-step-icon) / 2 - 1px);
    left: var(--myp-step-icon);
    right: -28px;
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 157, 255, .55), rgba(91, 157, 255, .1));
    z-index: 0;
}

.myp-step-title {
    font-family: var(--myp-font);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--myp-text);
    margin-bottom: 7px;
}

.myp-step-text {
    font-size: .88rem;
    line-height: 1.62;
    color: var(--myp-muted);
}

@media screen and (max-width: 860px) {
    .myp-steps { grid-template-columns: 1fr; gap: 32px; }
    /* NOT: Eski "ikon solda, metin sağda" mobil düzeni buradaydı
       (.myp-step'e padding-left, ikona position:absolute). Sonraki "ortalı ve
       büyük" tasarım (bkz. §6 "Adımlar: ortalı ve büyük" + VİTRİN 4.4) ikon
       konumunu ve kenar boşluklarını ezdi ama padding-left'i ezmiyordu:
       mobilde tüm adım içeriği 92px'in yarısı kadar sağa kayık ortalanıyordu.
       Düzen tek sahibinde (catalog.php) ortalı olduğu için kalıntı silindi. */
    .myp-step:not(:last-child)::after {
        top: var(--myp-step-icon);
        left: calc(var(--myp-step-icon) / 2 - 1px);
        right: auto;
        bottom: -32px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(91, 157, 255, .55), rgba(91, 157, 255, .1));
    }
}

/* ------------------------------------------------------------ Bilgi notu
   "Bilmen gerekenler" — düz madde işaretli liste yerine her satırı ayrı
   ayrı tarayabileceğin, onay ikonlu bir kontrol listesi. */
.myp-note {
    background: rgba(69, 200, 241, .07);
    border: 1px solid rgba(69, 200, 241, .25);
    border-radius: var(--myp-radius);
    padding: 26px 28px;
}

.myp-note-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.myp-note-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(69, 200, 241, .16);
    color: var(--myp-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.myp-note-badge svg { width: 18px; height: 18px; }

.myp-note-head h3 {
    font-family: var(--myp-font);
    font-size: 1.05rem;
    color: var(--myp-text);
}

.myp-note-list {
    display: grid;
    gap: 13px;
}

.myp-note-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .92rem;
    line-height: 1.62;
    color: var(--myp-text-soft);
}

.myp-note-list li svg {
    width: 16px;
    height: 16px;
    color: var(--myp-cyan);
    flex-shrink: 0;
    margin-top: 4px;
}

/* -------------------------------------------------------------- Animasyon */
@keyframes myp-bounce-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.myp-bounce { animation: myp-bounce-y 1.6s var(--myp-ease) infinite; }

/* Kaydırınca görünüşe gelen bloklar: [data-myp-reveal] + micro.js IntersectionObserver. */
[data-myp-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--myp-ease), transform .6s var(--myp-ease);
}

[data-myp-reveal].is-visible { opacity: 1; transform: none; }

[data-myp-reveal]:nth-child(2) { transition-delay: .07s; }
[data-myp-reveal]:nth-child(3) { transition-delay: .14s; }
[data-myp-reveal]:nth-child(4) { transition-delay: .21s; }

/* ------------------------------------------------------------- Kartlar */

.myp-card {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    overflow: hidden;
}

.myp-card--pad {
    padding: 24px;
}

.myp-grid {
    display: grid;
    gap: 24px;
}

/* min() koruması: sabit minmax eşiği (340/310/250px) kabından dar ekranlarda
   taşıyordu; html{overflow-x:hidden} yüzünden taşan kısım kaydırılamadan
   KIRPILIYORDU (320px'te 68px kayıp). min(...,100%) taşmayı tamamen kaldırır. */
.myp-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.myp-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.myp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Program kartı */
.myp-pcard {
    display: flex;
    flex-direction: column;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    overflow: hidden;
    transition: transform .26s var(--myp-ease), border-color .26s var(--myp-ease), box-shadow .26s var(--myp-ease);
    height: 100%;
}

.myp-pcard:hover {
    transform: translateY(-6px);
    border-color: var(--myp-border-strong);
    box-shadow: var(--myp-shadow);
}

.myp-pcard-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--myp-surface-2);
}

.myp-pcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--myp-ease);
}

.myp-pcard:hover .myp-pcard-media img {
    transform: scale(1.055);
}

.myp-pcard-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .68) 100%);
}

.myp-pcard-tags {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.myp-pcard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
    gap: 12px;
}

.myp-pcard-category {
    font-family: var(--myp-font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--myp-accent);
}

.myp-pcard-title {
    font-size: 1.09rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.myp-pcard:hover .myp-pcard-title {
    color: var(--myp-accent);
}

.myp-pcard-summary {
    font-size: .89rem;
    color: var(--myp-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.myp-pcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .8rem;
    color: var(--myp-muted);
    padding-top: 4px;
}

.myp-pcard-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.myp-pcard-meta svg {
    width: 14px;
    height: 14px;
    opacity: .75;
}

.myp-pcard-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--myp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.myp-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-family: var(--myp-font);
}

.myp-price-now {
    font-size: 1.22rem;
    font-weight: 800;
    color: #fff;
}

.myp-price-old {
    font-size: .86rem;
    color: var(--myp-muted);
    text-decoration: line-through;
}

.myp-price-free {
    color: var(--myp-success);
}

.myp-instructor {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    color: var(--myp-text-soft);
}

.myp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--myp-border-strong);
    background: var(--myp-surface-3);
    flex-shrink: 0;
}

.myp-avatar--lg { width: 56px; height: 56px; }
.myp-avatar--xl { width: 84px; height: 84px; }

/* ------------------------------------------------------------ Filtreler */

.myp-catalog {
    display: grid;
    grid-template-columns: 278px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.myp-filters {
    position: sticky;
    top: 96px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    padding: 22px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.myp-filters::-webkit-scrollbar { width: 6px; }
.myp-filters::-webkit-scrollbar-thumb { background: var(--myp-surface-3); border-radius: 3px; }

.myp-filter-group + .myp-filter-group {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--myp-border);
}

.myp-filter-title {
    font-family: var(--myp-font);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--myp-muted);
    margin-bottom: 13px;
}

.myp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: .9rem;
    color: var(--myp-text-soft);
    cursor: pointer;
    transition: color .18s var(--myp-ease);
}

.myp-check:hover { color: var(--myp-text); }

.myp-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--myp-border-strong);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all .18s var(--myp-ease);
}

.myp-check input[type="radio"] { border-radius: 50%; }

.myp-check input:checked {
    background: var(--myp-accent);
    border-color: var(--myp-accent);
}

.myp-check input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.myp-check input[type="radio"]:checked::after {
    left: 4px;
    top: 4px;
    width: 5px;
    height: 5px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    transform: none;
}

.myp-check-count {
    margin-left: auto;
    font-size: .76rem;
    color: var(--myp-muted);
}

.myp-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.myp-result-count {
    font-size: .93rem;
    color: var(--myp-muted);
}

.myp-result-count strong { color: var(--myp-text); }

/* ------------------------------------------------------------ Form alanları */

.myp-field { margin-bottom: 17px; }

.myp-label {
    display: block;
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 700;
    color: var(--myp-text-soft);
    margin-bottom: 7px;
}

.myp-label .myp-req { color: var(--myp-accent); }

.myp-input,
.myp-select,
.myp-textarea {
    width: 100%;
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    color: var(--myp-text);
    font-family: var(--myp-font-body);
    font-size: .93rem;
    padding: 12px 14px;
    transition: border-color .2s var(--myp-ease), box-shadow .2s var(--myp-ease), background .2s var(--myp-ease);
    -webkit-appearance: none;
    appearance: none;
}

.myp-textarea { min-height: 118px; resize: vertical; line-height: 1.6; }

/* #6c6c7a giriş zemininde 3.27:1 (odakta 3.00:1) idi → #93939f ile 5.5:1. */
.myp-input::placeholder,
.myp-textarea::placeholder { color: #93939f; }

.myp-input:focus,
.myp-select:focus,
.myp-textarea:focus {
    /* outline:none yüksek karşıtlık modunda odağı tamamen yok ediyordu. */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--myp-accent);
    background: var(--myp-surface-3);
    box-shadow: 0 0 0 3px rgba(91, 157, 255, .13);
}

.myp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393939f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 38px;
}

.myp-select option { background: var(--myp-surface-2); color: var(--myp-text); }

.myp-help { margin-top: 6px; font-size: .8rem; color: var(--myp-muted); }
.myp-error { margin-top: 6px; font-size: .8rem; color: var(--myp-danger); }

/* A14 — tanımsız tamamlama ölçütü seçili: yönetici bunu fark etmeli.
   Sessizce 'auto'ya çevirmek yerine değeri koruyup görünür kılıyoruz. */
.myp-input--warn {
    border-color: rgba(251, 191, 36, .55);
    background: rgba(251, 191, 36, .07);
}

.myp-search {
    position: relative;
}

.myp-search .myp-input { padding-left: 42px; }

.myp-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--myp-muted);
    pointer-events: none;
}

.myp-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* ------------------------------------------------------- Program detayı */

.myp-detail-hero {
    position: relative;
    padding: 66px 0 54px;
    background:
        radial-gradient(880px 420px at 8% 0%, rgba(91, 157, 255, .19), transparent 60%),
        radial-gradient(700px 380px at 92% 12%, rgba(139, 123, 247, .15), transparent 58%),
        var(--myp-bg-soft);
    border-bottom: 1px solid var(--myp-border);
}

.myp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 388px;
    gap: 44px;
    align-items: start;
}

.myp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    color: var(--myp-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.myp-breadcrumb a:hover { color: var(--myp-accent); }
.myp-breadcrumb svg { width: 13px; height: 13px; opacity: .6; }

.myp-detail-title {
    font-size: clamp(1.75rem, 3.4vw, 2.65rem);
    margin-bottom: 14px;
}

.myp-detail-sub {
    font-size: 1.06rem;
    color: var(--myp-text-soft);
    max-width: 62ch;
}

.myp-detail-tags {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.myp-detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.myp-fact {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    padding: 15px 16px;
}

.myp-fact-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--myp-muted);
    margin-bottom: 7px;
}

.myp-fact-label svg { width: 14px; height: 14px; }

.myp-fact-value {
    font-family: var(--myp-font);
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
}

/* Satın alma paneli */
.myp-buybox {
    position: sticky;
    top: 96px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border-strong);
    border-radius: var(--myp-radius-lg);
    overflow: hidden;
    box-shadow: var(--myp-shadow);
}

.myp-buybox-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--myp-surface-2);
    overflow: hidden;
}

.myp-buybox-media img { width: 100%; height: 100%; object-fit: cover; }

.myp-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .42);
    cursor: pointer;
    transition: background .24s var(--myp-ease);
    border: 0;
    width: 100%;
}

.myp-play:hover { background: rgba(0, 0, 0, .58); }

.myp-play span {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--myp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(91, 157, 255, .48);
    transition: transform .24s var(--myp-ease);
}

.myp-play:hover span { transform: scale(1.09); }
.myp-play svg { width: 24px; height: 24px; color: #fff; margin-left: 3px; }

.myp-buybox-body { padding: 24px; }

.myp-buybox-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.myp-buybox-price .myp-price-now { font-size: 2.1rem; }

.myp-buybox-note {
    font-size: .82rem;
    color: var(--myp-muted);
    margin-bottom: 20px;
}

.myp-buybox-actions { display: grid; gap: 10px; margin-bottom: 22px; }

.myp-includes { display: grid; gap: 12px; }

.myp-include {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .89rem;
    color: var(--myp-text-soft);
}

.myp-include svg {
    width: 17px;
    height: 17px;
    color: var(--myp-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Sekmeler */
.myp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--myp-border);
    margin-bottom: 34px;
    overflow-x: auto;
    scrollbar-width: none;
}

.myp-tabs::-webkit-scrollbar { display: none; }

.myp-tab {
    padding: 14px 18px;
    font-family: var(--myp-font);
    font-size: .92rem;
    font-weight: 700;
    color: var(--myp-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s var(--myp-ease), border-color .2s var(--myp-ease);
}

.myp-tab:hover { color: var(--myp-text); }

.myp-tab.is-active {
    color: var(--myp-accent);
    border-bottom-color: var(--myp-accent);
}

.myp-tabpanel { display: none; }
.myp-tabpanel.is-active { display: block; animation: myp-fade .3s var(--myp-ease); }

@keyframes myp-fade {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

/* Öğrenim çıktıları */
.myp-outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.myp-outcome {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    padding: 17px 19px;
}

.myp-outcome svg {
    width: 19px;
    height: 19px;
    color: var(--myp-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.myp-outcome span { font-size: .94rem; color: var(--myp-text-soft); line-height: 1.6; }

/* Müfredat akordeonu */
.myp-curriculum { display: grid; gap: 12px; }

.myp-module {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    overflow: hidden;
    transition: border-color .22s var(--myp-ease);
}

.myp-module.is-open { border-color: var(--myp-border-strong); }

.myp-module-head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 19px 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.myp-module-head:hover { background: rgba(255, 255, 255, .022); }

.myp-module-index {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--myp-accent-soft);
    color: var(--myp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--myp-font);
    font-weight: 800;
    font-size: .92rem;
    flex-shrink: 0;
}

.myp-module-info { flex: 1; min-width: 0; }

.myp-module-title {
    font-family: var(--myp-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--myp-text);
    margin-bottom: 5px;
}

.myp-module-meta { font-size: .82rem; color: var(--myp-muted); }

.myp-module-chevron {
    width: 19px;
    height: 19px;
    color: var(--myp-muted);
    transition: transform .26s var(--myp-ease);
    flex-shrink: 0;
}

.myp-module.is-open .myp-module-chevron { transform: rotate(180deg); }

.myp-module-body {
    display: none;
    border-top: 1px solid var(--myp-border);
    padding: 6px 0;
}

.myp-module.is-open .myp-module-body { display: block; }

.myp-lesson {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 22px;
    font-size: .91rem;
    color: var(--myp-text-soft);
    transition: background .18s var(--myp-ease);
}

.myp-lesson:hover { background: rgba(255, 255, 255, .022); }

.myp-lesson-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--myp-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.myp-lesson-icon svg { width: 15px; height: 15px; color: var(--myp-muted); }
.myp-lesson.is-completed .myp-lesson-icon { background: rgba(52, 211, 153, .14); }
.myp-lesson.is-completed .myp-lesson-icon svg { color: var(--myp-success); }
.myp-lesson-name { flex: 1; min-width: 0; }
.myp-lesson-time { font-size: .8rem; color: var(--myp-muted); flex-shrink: 0; }

/* Eğitmen kartı */
.myp-instructor-card {
    display: flex;
    gap: 20px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    padding: 24px;
}

.myp-instructor-card .myp-avatar { width: 88px; height: 88px; border-radius: 16px; }
.myp-instructor-name { font-family: var(--myp-font); font-size: 1.08rem; font-weight: 700; }
.myp-instructor-role { font-size: .87rem; color: var(--myp-accent); margin: 4px 0 11px; }
.myp-instructor-bio { font-size: .9rem; color: var(--myp-muted); line-height: 1.66; }

/* Yorum kartı */
.myp-review {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.myp-stars { display: inline-flex; gap: 2px; }
.myp-stars svg { width: 15px; height: 15px; color: #4a4a56; }
.myp-stars svg.is-on { color: var(--myp-warning); fill: var(--myp-warning); }

.myp-review-text {
    font-size: .95rem;
    color: var(--myp-text-soft);
    line-height: 1.72;
    flex: 1;
}

.myp-review-author { display: flex; align-items: center; gap: 12px; }
.myp-review-name { font-family: var(--myp-font); font-weight: 700; font-size: .91rem; }
.myp-review-title { font-size: .8rem; color: var(--myp-muted); }

/* SSS */
.myp-faq { display: grid; gap: 10px; }

.myp-faq-item {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    overflow: hidden;
}

.myp-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 21px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--myp-font);
    font-size: .96rem;
    font-weight: 700;
    color: var(--myp-text);
    text-align: left;
}

.myp-faq-q svg {
    width: 18px;
    height: 18px;
    color: var(--myp-muted);
    transition: transform .26s var(--myp-ease);
    flex-shrink: 0;
}

.myp-faq-item.is-open .myp-faq-q svg { transform: rotate(45deg); color: var(--myp-accent); }

.myp-faq-a {
    display: none;
    padding: 0 21px 20px;
    font-size: .93rem;
    color: var(--myp-muted);
    line-height: 1.72;
}

.myp-faq-item.is-open .myp-faq-a { display: block; }

/* Kurum logoları */
.myp-partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.myp-partner img {
    height: 46px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) brightness(1.7);
    opacity: .62;
    transition: all .26s var(--myp-ease);
}

.myp-partner:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------- Sepet */

.myp-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 32px;
    align-items: start;
}

.myp-cart-item {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
}

.myp-cart-thumb {
    width: 148px;
    aspect-ratio: 16 / 9;
    border-radius: var(--myp-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--myp-surface-2);
}

.myp-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.myp-summary {
    position: sticky;
    top: 96px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border-strong);
    border-radius: var(--myp-radius-lg);
    padding: 26px;
}

.myp-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    font-size: .93rem;
    color: var(--myp-text-soft);
}

.myp-summary-row--total {
    border-top: 1px solid var(--myp-border);
    margin-top: 10px;
    padding-top: 18px;
    font-family: var(--myp-font);
    font-size: 1.16rem;
    font-weight: 800;
    color: #fff;
}

.myp-summary-row--discount { color: var(--myp-success); }

.myp-coupon { display: flex; gap: 9px; margin: 18px 0; }
.myp-coupon .myp-input { flex: 1; }

/* ------------------------------------------------------- Öğrenci paneli */

.myp-dash-head {
    padding: 44px 0 34px;
    background: linear-gradient(180deg, rgba(91, 157, 255, .09), transparent);
    border-bottom: 1px solid var(--myp-border);
}

.myp-progress {
    height: 7px;
    border-radius: 999px;
    background: var(--myp-surface-3);
    overflow: hidden;
}

.myp-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--myp-accent), #ffb489);
    transition: width .6s var(--myp-ease);
}

.myp-progress--success .myp-progress-bar { background: linear-gradient(90deg, var(--myp-success), #6ee7b7); }

.myp-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .81rem;
    color: var(--myp-muted);
    margin-bottom: 8px;
}

.myp-ring {
    --myp-ring-value: 0;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: conic-gradient(var(--myp-accent) calc(var(--myp-ring-value) * 1%), var(--myp-surface-3) 0);
    position: relative;
}

.myp-ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--myp-surface);
}

.myp-ring span {
    position: relative;
    font-family: var(--myp-font);
    font-size: .86rem;
    font-weight: 800;
    color: #fff;
}

/* LMS oynatıcı */
.myp-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    min-height: calc(100vh - 68px);
    background: var(--myp-bg);
}

.myp-player-main { min-width: 0; display: flex; flex-direction: column; }

.myp-player-stage {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
    width: 100%;
}

.myp-player-stage iframe,
.myp-player-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.myp-player-body { padding: 28px 32px 60px; }

.myp-player-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 32px;
    border-top: 1px solid var(--myp-border);
    background: var(--myp-surface);
    flex-wrap: wrap;
}

.myp-sidebar {
    border-left: 1px solid var(--myp-border);
    background: var(--myp-surface);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    position: sticky;
    top: 0;
}

.myp-sidebar::-webkit-scrollbar { width: 6px; }
.myp-sidebar::-webkit-scrollbar-thumb { background: var(--myp-surface-3); border-radius: 3px; }

.myp-sidebar-head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--myp-border);
    position: sticky;
    top: 0;
    background: var(--myp-surface);
    z-index: 2;
}

.myp-sidebar-lesson {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 22px;
    font-size: .88rem;
    color: var(--myp-text-soft);
    border-left: 3px solid transparent;
    transition: background .18s var(--myp-ease), border-color .18s var(--myp-ease);
}

.myp-sidebar-lesson:hover { background: rgba(255, 255, 255, .028); }

.myp-sidebar-lesson.is-active {
    background: var(--myp-accent-soft);
    border-left-color: var(--myp-accent);
    color: var(--myp-text);
}

.myp-sidebar-lesson.is-completed .myp-lesson-icon { background: rgba(52, 211, 153, .14); }
.myp-sidebar-lesson.is-completed .myp-lesson-icon svg { color: var(--myp-success); }

/* Okuma metni tipografisi */
.myp-prose { font-size: 1rem; line-height: 1.82; color: var(--myp-text-soft); max-width: 74ch; }
.myp-prose > * + * { margin-top: 1.05em; }
.myp-prose h2 { font-size: 1.5rem; margin-top: 2em; }
.myp-prose h3 { font-size: 1.22rem; margin-top: 1.7em; }
.myp-prose ul, .myp-prose ol { padding-left: 1.35em; }
.myp-prose li + li { margin-top: .45em; }
.myp-prose li { list-style: inherit; }
.myp-prose ul { list-style: disc; }
.myp-prose ol { list-style: decimal; }
.myp-prose a { color: var(--myp-accent); text-decoration: underline; text-underline-offset: 3px; }
.myp-prose blockquote {
    border-left: 3px solid var(--myp-accent);
    padding: 4px 0 4px 20px;
    color: var(--myp-muted);
    font-style: italic;
}
.myp-prose code {
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: .88em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.myp-prose pre {
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    padding: 18px;
    overflow-x: auto;
}
.myp-prose pre code { background: none; border: 0; padding: 0; }
.myp-prose img { border-radius: var(--myp-radius-sm); }
.myp-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.myp-prose th, .myp-prose td { border: 1px solid var(--myp-border); padding: 10px 12px; text-align: left; }
.myp-prose th { background: var(--myp-surface-2); font-family: var(--myp-font); }

/* Kaynak listesi */
.myp-resource {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    transition: border-color .2s var(--myp-ease), transform .2s var(--myp-ease);
}

.myp-resource:hover { border-color: var(--myp-accent); transform: translateX(3px); }

.myp-resource-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--myp-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.myp-resource-icon svg { width: 18px; height: 18px; color: var(--myp-accent); }
.myp-resource-info { flex: 1; min-width: 0; }
.myp-resource-name { font-family: var(--myp-font); font-weight: 700; font-size: .92rem; }
.myp-resource-meta { font-size: .79rem; color: var(--myp-muted); margin-top: 3px; }

/* Sınav */
.myp-quiz-question {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    padding: 28px;
    margin-bottom: 18px;
}

.myp-quiz-index {
    font-family: var(--myp-font);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--myp-accent);
    margin-bottom: 12px;
}

.myp-quiz-text { font-size: 1.06rem; color: var(--myp-text); line-height: 1.6; margin-bottom: 22px; }

.myp-option {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 18px;
    background: var(--myp-surface-2);
    border: 1.5px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    cursor: pointer;
    transition: all .18s var(--myp-ease);
    margin-bottom: 10px;
}

.myp-option:hover { border-color: var(--myp-border-strong); background: var(--myp-surface-3); }
.myp-option.is-selected { border-color: var(--myp-accent); background: var(--myp-accent-soft); }
.myp-option.is-correct { border-color: var(--myp-success); background: rgba(52, 211, 153, .1); }
.myp-option.is-wrong { border-color: var(--myp-danger); background: rgba(251, 95, 78, .1); }
.myp-option input { margin-top: 3px; }
.myp-option span { font-size: .95rem; color: var(--myp-text-soft); line-height: 1.55; }

.myp-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--myp-font);
    font-weight: 800;
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: var(--myp-radius-sm);
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    color: var(--myp-text);
}

.myp-timer.is-urgent {
    background: rgba(251, 95, 78, .13);
    border-color: rgba(251, 95, 78, .35);
    color: var(--myp-danger);
    animation: myp-pulse 1.1s infinite;
}

@keyframes myp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* Forum */
.myp-topic {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    transition: border-color .2s var(--myp-ease);
}

.myp-topic:hover { border-color: var(--myp-border-strong); }
.myp-topic-body { flex: 1; min-width: 0; }
.myp-topic-title { font-family: var(--myp-font); font-size: 1.02rem; font-weight: 700; margin-bottom: 7px; }
.myp-topic:hover .myp-topic-title { color: var(--myp-accent); }
.myp-topic-meta { display: flex; gap: 16px; font-size: .81rem; color: var(--myp-muted); flex-wrap: wrap; }

.myp-post {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid var(--myp-border);
}

.myp-post:last-child { border-bottom: 0; }
.myp-post--reply { margin-left: 52px; }
.myp-post-body { flex: 1; min-width: 0; }

.myp-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    flex-wrap: wrap;
}

.myp-post-author { font-family: var(--myp-font); font-weight: 700; font-size: .91rem; }
.myp-post-date { font-size: .79rem; color: var(--myp-muted); }
.myp-post-text { font-size: .95rem; color: var(--myp-text-soft); line-height: 1.72; white-space: pre-wrap; word-break: break-word; }

.myp-post-actions { display: flex; gap: 14px; margin-top: 12px; }

.myp-post-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--myp-muted);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.myp-post-action:hover { color: var(--myp-accent); }
.myp-post-action svg { width: 15px; height: 15px; }
.myp-post-action.is-active { color: var(--myp-accent); }

/* Tablolar */
.myp-table-wrap { overflow-x: auto; border: 1px solid var(--myp-border); border-radius: var(--myp-radius); }

/* Bulma savunması: datatables.min.css içindeki Bulma kopyası .table{background:#fff}
   diyor ve 5 sayfada micro.css'ten SONRA yükleniyor. */
.myp-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; background: transparent; }

.myp-table th {
    background: var(--myp-surface-2);
    font-family: var(--myp-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--myp-muted);
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--myp-border);
}

.myp-table td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--myp-border);
    color: var(--myp-text-soft);
    vertical-align: middle;
}

.myp-table tbody tr:last-child td { border-bottom: 0; }
.myp-table tbody tr:hover td { background: rgba(255, 255, 255, .022); }

/* Boş durum */
.myp-empty { text-align: center; padding: 64px 24px; }

.myp-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--myp-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--myp-border);
}

.myp-empty-icon svg { width: 30px; height: 30px; color: var(--myp-muted); }
.myp-empty h3 { font-size: 1.14rem; margin-bottom: 9px; }
/* Alt boşluk p'den butona taşındı: eylemsiz boş durumlarda dolgu asimetrikti
   (üstte 44px, altta 66px). */
.myp-empty p { color: var(--myp-muted); font-size: .93rem; max-width: 42ch; margin: 0 auto; }
.myp-empty .myp-btn { margin-top: 22px; }

/* Uyarılar */
.myp-alert {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 19px;
    border-radius: var(--myp-radius-sm);
    border: 1px solid var(--myp-border);
    background: var(--myp-surface);
    font-size: .92rem;
    color: var(--myp-text-soft);
    margin-bottom: 20px;
    line-height: 1.6;
}

.myp-alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.myp-alert--success { background: rgba(52, 211, 153, .09); border-color: rgba(52, 211, 153, .28); color: #a7f3d0; }
.myp-alert--success svg { color: var(--myp-success); }
.myp-alert--danger { background: rgba(251, 95, 78, .09); border-color: rgba(251, 95, 78, .28); color: #fecaca; }
.myp-alert--danger svg { color: var(--myp-danger); }
.myp-alert--warning { background: rgba(251, 191, 36, .09); border-color: rgba(251, 191, 36, .28); color: #fde68a; }
.myp-alert--warning svg { color: var(--myp-warning); }
.myp-alert--info { background: rgba(69, 200, 241, .09); border-color: rgba(69, 200, 241, .28); color: #bae6fd; }
.myp-alert--info svg { color: var(--myp-cyan); }

/* Sayfalama */
.myp-pagination { display: flex; justify-content: center; gap: 7px; margin-top: 42px; flex-wrap: wrap; }

.myp-page {
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--myp-radius-sm);
    border: 1px solid var(--myp-border);
    background: var(--myp-surface);
    color: var(--myp-text-soft);
    font-family: var(--myp-font);
    font-size: .88rem;
    font-weight: 700;
    transition: all .18s var(--myp-ease);
}

.myp-page:hover { border-color: var(--myp-accent); color: var(--myp-accent); }
/* Turuncu zeminde #fff 2.72:1 → --myp-on-accent 6.89:1. */
.myp-page.is-active { background: var(--myp-accent); border-color: var(--myp-accent); color: var(--myp-on-accent); }
/* opacity:.38 metni 2.64:1'e düşürüyordu; renk bildirimi ile 4.9:1. */
.myp-page.is-disabled {
    opacity: 1;
    color: #86868f;
    background: var(--myp-surface);
    border-color: rgba(255, 255, 255, .06);
    pointer-events: none;
}

/* Canlı destek düğmesi */
.myp-support {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--myp-accent);
    /* Turuncu zeminde okunabilirlik: 2.72:1 → 6.89:1 */
    color: var(--myp-on-accent);
    font-family: var(--myp-font);
    font-weight: 700;
    font-size: .89rem;
    box-shadow: 0 14px 34px rgba(91, 157, 255, .42);
    border: 0;
    cursor: pointer;
    transition: transform .22s var(--myp-ease);
}

.myp-support:hover { color: var(--myp-on-accent); }
.myp-support svg { width: 19px; height: 19px; }

/* Yardımcı sınıflar */
.myp-flex { display: flex; }
.myp-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.myp-flex-center { display: flex; align-items: center; gap: 10px; }
.myp-flex-wrap { flex-wrap: wrap; }
/* NOT: .myp-gap-* / .myp-mt-* / .myp-mb-* boşluk yardımcıları dosyanın EN
   SONUNA taşındı. Burada dururken .myp-panel ve .myp-kpi-grid gibi aynı
   özgüllükteki ve daha sonra gelen kurallar tarafından eziliyor, 28 kullanımda
   TAMAMEN ETKİSİZ kalıyorlardı. */
.myp-text-muted { color: var(--myp-muted); }
.myp-text-accent { color: var(--myp-accent); }
.myp-text-success { color: var(--myp-success); }
.myp-text-danger { color: var(--myp-danger); }
.myp-text-center { text-align: center; }
.myp-text-right { text-align: right; }
.myp-text-sm { font-size: .85rem; }
.myp-text-xs { font-size: .78rem; }
.myp-fw-bold { font-weight: 700; font-family: var(--myp-font); }
.myp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myp-hide { display: none !important; }
.myp-divider { height: 1px; background: var(--myp-border); margin: 26px 0; border: 0; }

.myp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------- Duyarlılık */

@media screen and (max-width: 1150px) {
    .myp-catalog { grid-template-columns: 1fr; }
    .myp-filters { position: static; max-height: none; }
    .myp-detail-grid { grid-template-columns: 1fr; }
    .myp-buybox { position: static; max-width: 520px; }
    .myp-cart-grid { grid-template-columns: 1fr; }
    .myp-summary { position: static; }
    .myp-player { grid-template-columns: 1fr; }
    .myp-sidebar { border-left: 0; border-top: 1px solid var(--myp-border); position: static; max-height: none; }
}

@media screen and (max-width: 860px) {
    .myp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    /* Üst menü `position:fixed` ve içerik altından geçiyor: 769-860px arasında
       header 80px. Kahraman rozeti bu yığının altında kalmasın. */
    .myp-hero { padding: 112px 0 60px; }
    .myp-section { padding: 68px 0; }
    .myp-instructor-card { flex-direction: column; }
    .myp-player-body { padding: 22px 20px 46px; }
    .myp-player-nav { padding: 16px 20px; }
    .myp-cart-item { flex-direction: column; }
    .myp-cart-thumb { width: 100%; }
    .myp-post--reply { margin-left: 22px; }
}

@media screen and (max-width: 560px) {
    .myp-wrap { padding: 0 15px; }
    .myp-hero-actions .myp-btn { width: 100%; }
    .myp-section-head { flex-direction: column; align-items: flex-start; }
    .myp-quiz-question { padding: 20px; }
    .myp-support { right: 14px; bottom: 14px; padding: 12px 16px; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp *,
    .myp *::before,
    .myp *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------- Yönetim paneli eklentileri */

/*
 * KALDIRILDI: .myp-admin-head / .myp-admin-nav / .myp-kpi-grid / .myp-kpi* /
 * .myp-panel* bileşenleri burada BİR KEZ, aşağıdaki FAZ-3 bloğunda İKİNCİ KEZ
 * (farklı değerlerle) tanımlıydı; kazananı yalnızca kaynak sırası belirliyordu.
 * Araya giren üçüncü parti CSS (datatables.min.css içindeki Bulma kopyası)
 * dengeyi anında bozuyordu. Tüm bildirimler tek kaynağa — FAZ-3 bloğuna —
 * taşındı, ölü ilk tanımlar silindi.
 */

/* İçerik geliştirici (drag & drop) */
.myp-builder { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }

.myp-builder-module {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    margin-bottom: 14px;
    overflow: hidden;
}

.myp-builder-module.myp-drag-over { border-color: var(--myp-accent); box-shadow: 0 0 0 3px rgba(91, 157, 255, .14); }

.myp-builder-mhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: var(--myp-surface-2);
    border-bottom: 1px solid var(--myp-border);
}

.myp-drag-handle {
    cursor: grab;
    color: var(--myp-muted);
    display: inline-flex;
    padding: 4px;
    border-radius: 5px;
    flex-shrink: 0;
}

.myp-drag-handle:hover { color: var(--myp-accent); background: rgba(255, 255, 255, .05); }
.myp-drag-handle:active { cursor: grabbing; }
.myp-drag-handle svg { width: 16px; height: 16px; }

.myp-builder-lessons { padding: 8px; min-height: 54px; }

.myp-builder-lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    margin-bottom: 7px;
    transition: border-color .18s var(--myp-ease), opacity .18s var(--myp-ease);
}

.myp-builder-lesson:hover { border-color: var(--myp-border-strong); }
.myp-builder-lesson.myp-dragging { opacity: .42; }
.myp-builder-lesson.myp-drag-over { border-color: var(--myp-accent); }
.myp-builder-lesson-info { flex: 1; min-width: 0; }
.myp-builder-lesson-title { font-size: .91rem; color: var(--myp-text); font-family: var(--myp-font); font-weight: 600; }
.myp-builder-lesson-meta { font-size: .77rem; color: var(--myp-muted); margin-top: 3px; }

.myp-builder-empty {
    padding: 18px;
    text-align: center;
    font-size: .85rem;
    color: var(--myp-muted);
    border: 1px dashed var(--myp-border-strong);
    border-radius: var(--myp-radius-sm);
}

.myp-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--myp-border);
    color: var(--myp-muted);
    cursor: pointer;
    transition: all .18s var(--myp-ease);
    flex-shrink: 0;
    padding: 0;
}

.myp-icon-btn:hover { border-color: var(--myp-accent); color: var(--myp-accent); }
.myp-icon-btn svg { width: 15px; height: 15px; }
.myp-icon-btn--danger:hover { border-color: var(--myp-danger); color: var(--myp-danger); }

/* Modal */
.myp-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.myp-modal.is-open { display: flex; }

.myp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .74);
    backdrop-filter: blur(3px);
}

.myp-modal-card {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border-strong);
    border-radius: var(--myp-radius-lg);
    box-shadow: var(--myp-shadow);
    animation: myp-fade .24s var(--myp-ease);
}

.myp-modal-card--lg { max-width: 880px; }

.myp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--myp-border);
    position: sticky;
    top: 0;
    background: var(--myp-surface);
    z-index: 2;
}

.myp-modal-body { padding: 24px; }

.myp-modal-foot {
    display: flex;
    justify-content: flex-end;
    /* flex-wrap yoktu: iki düğme 297px istiyor, 320px viewport'ta kullanılabilir
       iç genişlik 224px → birincil düğme görünür alanın dışına taşıyordu. */
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid var(--myp-border);
    position: sticky;
    bottom: 0;
    background: var(--myp-surface);
}

@media screen and (max-width: 900px) {
    .myp-builder { grid-template-columns: 1fr; }
}

/* Dar ekranda modal alt çubuğu tek sütun; birincil eylem en altta kalır. */
@media screen and (max-width: 520px) {
    .myp-modal { padding: 12px; }
    .myp-modal-body { padding: 16px; }
    .myp-modal-head,
    .myp-modal-foot { padding: 14px 16px; }
    .myp-modal-foot { flex-direction: column-reverse; align-items: stretch; }
    .myp-modal-foot .myp-btn { width: 100%; }
}

/* ==========================================================================
   FAZ 2 — GÖREV C: Bildirim zili ve toplu indirme ilerlemesi
   ========================================================================== */

.myp-bell {
    position: relative;
    display: inline-flex;
}

.myp-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--myp-border);
    background: var(--myp-surface-2);
    color: var(--myp-text-soft);
    cursor: pointer;
    transition: background .18s var(--myp-ease), color .18s var(--myp-ease), border-color .18s var(--myp-ease);
}

.myp-bell-btn:hover,
.myp-bell-btn:focus-visible {
    background: var(--myp-surface-3);
    border-color: var(--myp-border-strong);
    color: var(--myp-text);
}

.myp-bell-btn svg {
    width: 18px;
    height: 18px;
}

.myp-bell-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--myp-accent);
    color: #fff;
    font-family: var(--myp-font);
    font-size: .66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.myp-bell-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 420px;
    overflow-y: auto;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    box-shadow: var(--myp-shadow);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--myp-ease), transform .18s var(--myp-ease), visibility .18s;
}

.myp-bell.is-open .myp-bell-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.myp-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--myp-border);
    position: sticky;
    top: 0;
    background: var(--myp-surface);
}

.myp-bell-readall {
    background: none;
    border: none;
    padding: 0;
    color: var(--myp-accent);
    font-size: .74rem;
    cursor: pointer;
}

.myp-bell-readall:hover {
    color: var(--myp-accent-hover);
}

.myp-bell-list {
    display: flex;
    flex-direction: column;
}

.myp-bell-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--myp-border);
    color: var(--myp-text-soft);
    text-decoration: none;
    cursor: pointer;
    transition: background .16s var(--myp-ease);
}

.myp-bell-item:last-child {
    border-bottom: none;
}

.myp-bell-item:hover {
    background: var(--myp-surface-2);
    color: var(--myp-text);
}

.myp-bell-item.is-unread {
    background: var(--myp-accent-soft);
}

.myp-bell-title {
    display: block;
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--myp-text);
}

.myp-bell-body {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    line-height: 1.45;
}

.myp-bell-date {
    display: block;
    margin-top: 5px;
    font-size: .7rem;
    color: var(--myp-muted);
}

.myp-bell-empty {
    padding: 26px 16px;
    text-align: center;
    font-size: .8rem;
    color: var(--myp-muted);
}

@media screen and (max-width: 600px) {
    .myp-bell-panel { width: 290px; }
}

/* ==========================================================================
   FAZ 2 — Öğrenci: iç içe ağaç, tamamlama ölçütü ve pop-up quiz
   ========================================================================== */

/* --------------------------------------------------------- İçerik ağacı */

.myp-tree {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.myp-tree-node {
    --myp-tree-depth: 0;
    position: relative;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    overflow: hidden;
    margin-left: calc(var(--myp-tree-depth) * 20px);
}

.myp-tree-node.is-locked { opacity: .82; }
.myp-tree-node.is-done { border-color: rgba(52, 211, 153, .35); }

.myp-tree-node > .myp-tree-body { display: none; }
.myp-tree-node.is-open > .myp-tree-body { display: block; }

.myp-tree-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: var(--myp-font-body);
}

.myp-tree-head:hover { background: rgba(255, 255, 255, .03); }

.myp-tree-chevron {
    display: inline-flex;
    transition: transform .22s var(--myp-ease);
    color: var(--myp-muted);
    flex: 0 0 auto;
}

.myp-tree-node.is-open > .myp-tree-head .myp-tree-chevron { transform: rotate(180deg); }

.myp-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--myp-surface-2);
    color: var(--myp-accent);
    flex: 0 0 auto;
}

.myp-tree-icon svg { width: 16px; height: 16px; }

.myp-tree-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.myp-tree-title {
    font-family: var(--myp-font);
    font-weight: 700;
    font-size: .98rem;
    color: var(--myp-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.myp-tree-meta {
    font-size: .78rem;
    color: var(--myp-muted);
}

.myp-tree-percent {
    font-family: var(--myp-font);
    font-weight: 700;
    font-size: .84rem;
    color: var(--myp-text-soft);
    flex: 0 0 auto;
}

.myp-tree-body {
    padding: 4px 14px 14px 40px;
    border-top: 1px solid var(--myp-border);
}

.myp-tree-body .myp-tree-node {
    margin-left: 0;
    margin-top: 10px;
    background: var(--myp-surface-2);
}

/* -------------------------------------------------- Ağaçtaki elementler */

.myp-tree-lesson {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--myp-radius-sm);
    color: var(--myp-text-soft);
    text-decoration: none;
    transition: background .18s var(--myp-ease);
}

a.myp-tree-lesson:hover { background: rgba(255, 255, 255, .04); color: var(--myp-text); }

.myp-tree-lesson.is-locked { opacity: .58; cursor: not-allowed; }
.myp-tree-lesson.is-active { background: var(--myp-accent-soft); color: var(--myp-text); }

.myp-tree-lesson-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--myp-surface-3);
    flex: 0 0 auto;
}

.myp-tree-lesson-icon svg { width: 14px; height: 14px; }

.myp-tree-lesson.is-completed .myp-tree-lesson-icon { background: rgba(52, 211, 153, .16); }
.myp-tree-lesson.is-completed .myp-tree-lesson-icon svg { color: var(--myp-success); }

.myp-tree-lesson-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.myp-tree-lesson-name {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
}

.myp-tree-lesson-meta {
    font-size: .76rem;
    color: var(--myp-muted);
}

.myp-tree-lock-reason {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    color: var(--myp-warning);
    margin-top: 2px;
}

.myp-tree-lock-reason svg { width: 13px; height: 13px; }

/* Dar kenar çubuğu görünümü */

.myp-tree--sidebar { gap: 0; padding: 0; }

.myp-tree--sidebar .myp-tree-node {
    border: 0;
    border-top: 1px solid var(--myp-border);
    border-radius: 0;
    background: none;
    margin-left: 0;
}

.myp-tree--sidebar .myp-tree-head { padding: 12px 18px; }
.myp-tree--sidebar .myp-tree-icon { display: none; }
.myp-tree--sidebar .myp-tree-body { padding: 0 10px 10px 22px; border-top: 0; }
.myp-tree--sidebar .myp-tree-body .myp-tree-node { background: none; margin-top: 0; }
.myp-tree--sidebar .myp-tree-title { font-size: .88rem; }

/* --------------------------------------------------- Tamamlama ölçütü */

.myp-criterion {
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    padding: 12px 14px;
    margin-bottom: 22px;
}

.myp-criterion.is-done { border-color: rgba(52, 211, 153, .35); }

.myp-criterion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.myp-criterion-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: var(--myp-text-soft);
}

.myp-criterion-hint svg { width: 15px; height: 15px; color: var(--myp-accent); }

.myp-criterion-value {
    font-size: .8rem;
    color: var(--myp-muted);
    font-family: var(--myp-font);
}

.myp-progress--slim { height: 6px; }

.myp-progress-bar.myp-progress--success {
    background: linear-gradient(90deg, var(--myp-success), #6ee7b7);
}

.myp-nav-criterion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: var(--myp-text-soft);
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: 999px;
    padding: 8px 16px;
}

.myp-nav-criterion svg { width: 15px; height: 15px; color: var(--myp-accent); }

.myp-btn.is-locked { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------- Sertifika şart listesi */

.myp-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.myp-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--myp-text-soft);
}

.myp-check-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.myp-check-item.is-ok svg { color: var(--myp-success); }
.myp-check-item.is-missing svg { color: var(--myp-muted); }

.myp-check-label { flex: 1 1 auto; min-width: 0; }

.myp-check-value {
    font-family: var(--myp-font);
    font-size: .8rem;
    color: var(--myp-muted);
    white-space: nowrap;
}

.myp-criteria-table tr.is-ok td { background: rgba(52, 211, 153, .05); }
.myp-criteria-table tr.is-missing td { background: rgba(251, 191, 36, .05); }

/* ------------------------------------------------------ Mevcut kurs listesi */

.myp-course-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.myp-course-section {
    font-family: var(--myp-font);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--myp-muted);
    margin-top: 10px;
}

.myp-course-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    color: var(--myp-text-soft);
    text-decoration: none;
}

.myp-course-item:hover { border-color: var(--myp-border-strong); color: var(--myp-text); }
.myp-course-item.is-completed .myp-lesson-icon { background: rgba(52, 211, 153, .16); }
.myp-course-item.is-completed .myp-lesson-icon svg { color: var(--myp-success); }

/* ------------------------------------------------------------ Pop-up quiz */

body.myp-popup-open { overflow: hidden; }

.myp-popup-modal { z-index: 320; }
.myp-popup-modal[hidden] { display: none !important; }
.myp-popup-modal.is-open { display: flex; }

.myp-popup-modal .myp-modal-card { max-width: 620px; }

.myp-popup-modal .myp-option { margin-top: 10px; }

.myp-popup-image {
    display: block;
    max-width: 100%;
    border-radius: var(--myp-radius-sm);
    margin: 12px 0;
}

.myp-popup-inline:empty { display: none; }
.myp-popup-inline { margin-bottom: 22px; }
.myp-popup-inline .myp-option { margin-top: 10px; }

@media screen and (max-width: 900px) {
    .myp-tree-node { margin-left: calc(var(--myp-tree-depth) * 10px); }
    .myp-tree-body { padding-left: 18px; }
    .myp-tree-percent { display: none; }
}

/* ==========================================================================
   FAZ 2 — İç içe müfredat ağacı, zengin metin editörü, pop-up ve ön koşullar
   ========================================================================== */

/* --------------------------------------------------- Ağaç araç çubuğu */
.myp-tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
}

.myp-tree-toolbar svg { width: 15px; height: 15px; }

.myp-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--myp-accent-soft);
    border: 1px solid rgba(91, 157, 255, .32);
    border-radius: var(--myp-radius);
    color: var(--myp-text);
}

/* -------------------------------------------------------- Ağaç düğümü */
/* NOT: .myp-tree öğrenci panelindeki içerik ağacına ait (flex kolon + gap).
   Geliştirici ağacı ayrı bir sınıf kullanır ki iki düzen birbirini etkilemesin. */
.myp-builder-tree { min-height: 80px; }

.myp-builder-tree.myp-drag-over {
    outline: 2px dashed var(--myp-accent);
    outline-offset: 6px;
    border-radius: var(--myp-radius);
}

.myp-node {
    background: var(--myp-surface);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    margin-bottom: 12px;
    transition: border-color .2s var(--myp-ease), box-shadow .2s var(--myp-ease);
}

.myp-node.myp-dragging { opacity: .45; }

.myp-node-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: grab;
    border-radius: var(--myp-radius) var(--myp-radius) 0 0;
    border-bottom: 1px solid var(--myp-border);
}

.myp-node-head:active { cursor: grabbing; }

.myp-node-head.myp-drop-before { box-shadow: inset 0 3px 0 0 var(--myp-accent); }
.myp-node-head.myp-drop-after { box-shadow: inset 0 -3px 0 0 var(--myp-accent); }

.myp-node-head.myp-drop-inside {
    background: var(--myp-accent-soft);
    box-shadow: inset 0 0 0 2px var(--myp-accent);
}

.myp-node-toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    color: var(--myp-text-soft);
    cursor: pointer;
}

.myp-node-toggle:hover { border-color: var(--myp-accent); color: var(--myp-accent); }
.myp-node-toggle svg { width: 14px; height: 14px; }

.myp-node-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--myp-surface-3);
    border-radius: var(--myp-radius-sm);
    color: var(--myp-accent);
}

.myp-node-icon svg { width: 16px; height: 16px; }

.myp-node-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.myp-node-body { padding: 6px 10px 10px; }

.myp-node.is-collapsed > .myp-node-body { display: none; }
.myp-node.is-collapsed > .myp-node-head { border-bottom: 0; border-radius: var(--myp-radius); }

/* Girinti ve bağlantı çizgisi: her seviye 28px */
.myp-node-children {
    margin-left: 28px;
    padding-left: 12px;
    border-left: 1px dashed var(--myp-border-strong);
    min-height: 8px;
}

.myp-node-children:empty { min-height: 0; padding: 0; border-left: 0; }

.myp-node-children.myp-drag-over {
    border-left-color: var(--myp-accent);
    background: rgba(91, 157, 255, .06);
    border-radius: var(--myp-radius-sm);
    min-height: 40px;
}

.myp-node-lessons {
    margin-left: 28px;
    padding-left: 12px;
    border-left: 1px solid var(--myp-border);
    min-height: 10px;
}

.myp-node-lessons.myp-drag-over {
    border-left-color: var(--myp-accent);
    background: rgba(91, 157, 255, .06);
    border-radius: var(--myp-radius-sm);
}

.myp-node-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.myp-node-check input { width: 15px; height: 15px; accent-color: var(--myp-accent); cursor: pointer; }

/* NOT: .myp-lesson-icon vitrin/öğrenci tarafında da kullanılıyor (bkz. ~1088. satır).
   Geliştirici ağacındaki ikonu ezmemesi için kapsam .myp-builder-lesson ile sınırlandırıldı. */
.myp-builder-lesson .myp-lesson-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--myp-surface-3);
    border-radius: var(--myp-radius-sm);
    color: var(--myp-text-soft);
}

.myp-builder-lesson .myp-lesson-icon svg { width: 14px; height: 14px; }

.myp-builder-lesson .myp-node-actions { margin-left: auto; }

/* ------------------------------------------------------------- Çipler */
.myp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    font-size: .72rem;
    line-height: 1.6;
    border-radius: 999px;
    background: var(--myp-surface-3);
    border: 1px solid var(--myp-border);
    color: var(--myp-text-soft);
    max-width: 100%;
}

/* Filtre çipinin seçili durumu: dolu turuncu düğme DEĞİL — kenarlık + tint.
   Böylece sayfadaki tek dolu turuncu yüzey gerçek birincil eylem olur. */
.myp-chip.is-selected {
    border-color: var(--myp-accent);
    color: var(--myp-accent);
    background: rgba(91, 157, 255, .10);
    font-weight: 700;
}

.myp-chip:focus-visible { outline: 2px solid var(--myp-accent); outline-offset: 2px; }

.myp-chip--rule { border-color: rgba(139, 123, 247, .32); color: var(--myp-violet); }
.myp-chip--lock { border-color: rgba(251, 191, 36, .3); color: var(--myp-warning); }
.myp-chip--pop { border-color: rgba(69, 200, 241, .32); color: var(--myp-cyan); }

.myp-chip--prereq {
    background: var(--myp-surface-2);
    border-color: var(--myp-border-strong);
    color: var(--myp-text);
    font-size: .76rem;
}

.myp-chip--prereq em { color: var(--myp-muted); font-style: normal; font-size: .7rem; }

.myp-chip-remove {
    border: 0;
    background: transparent;
    color: var(--myp-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.myp-chip-remove:hover { color: var(--myp-danger); }

.myp-chips { display: flex; flex-wrap: wrap; gap: 2px; min-height: 26px; align-items: center; }

.myp-builder-lesson-meta,
.myp-node-head .myp-builder-lesson-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 5px;
}

.myp-node-head .myp-builder-lesson-title,
.myp-builder-lesson .myp-builder-lesson-title { overflow-wrap: anywhere; }

/* -------------------------------------------------------- Özet listesi */
.myp-summary-list { list-style: none; margin: 0; padding: 0; }

.myp-summary-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: .82rem;
    color: var(--myp-text-soft);
    border-bottom: 1px dashed var(--myp-border);
}

.myp-summary-list li:last-child { border-bottom: 0; }
.myp-summary-list strong { color: var(--myp-text); }

/* ------------------------------------------------------- Pop-up listesi */
.myp-popup-list { display: flex; flex-direction: column; gap: 8px; }

.myp-popup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
}

/* ------------------------------------------------ Zengin metin editörü */
.myp-editor {
    border: 1px solid var(--myp-border-strong);
    border-radius: var(--myp-radius-sm);
    background: var(--myp-surface-2);
    overflow: hidden;
}

.myp-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 8px;
    background: var(--myp-surface-3);
    border-bottom: 1px solid var(--myp-border);
}

.myp-editor-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--myp-border-strong);
    display: inline-block;
}

.myp-editor-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--myp-radius-sm);
    color: var(--myp-text-soft);
    font-family: var(--myp-font);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s var(--myp-ease), color .18s var(--myp-ease);
}

.myp-editor-btn:hover { background: var(--myp-surface); color: var(--myp-accent); border-color: var(--myp-border); }
.myp-editor-btn:focus-visible { outline: 2px solid var(--myp-accent); outline-offset: 1px; }
.myp-editor-btn svg { width: 15px; height: 15px; }

.myp-editor-area {
    min-height: 260px;
    max-width: none;
    max-height: 55vh;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--myp-surface);
    color: var(--myp-text);
    font-family: var(--myp-font-body);
    font-size: .92rem;
    line-height: 1.7;
    outline: none;
}

.myp-editor-area:focus { box-shadow: inset 0 0 0 2px rgba(91, 157, 255, .25); }
.myp-editor-area h2 { font-size: 1.25rem; margin: 14px 0 8px; font-family: var(--myp-font); }
.myp-editor-area h3 { font-size: 1.08rem; margin: 12px 0 6px; font-family: var(--myp-font); }
.myp-editor-area p { margin: 0 0 10px; }
.myp-editor-area ul, .myp-editor-area ol { margin: 0 0 10px 22px; }
.myp-editor-area img { max-width: 100%; border-radius: var(--myp-radius-sm); }

.myp-editor-area blockquote {
    margin: 0 0 12px;
    padding: 8px 14px;
    border-left: 3px solid var(--myp-accent);
    background: var(--myp-surface-2);
    color: var(--myp-text-soft);
}

.myp-editor-area pre {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--myp-bg-soft);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    overflow-x: auto;
    font-size: .84rem;
}

.myp-editor-area table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }

.myp-editor-area th,
.myp-editor-area td {
    border: 1px solid var(--myp-border-strong);
    padding: 7px 10px;
    text-align: left;
    font-size: .86rem;
}

.myp-editor-area th { background: var(--myp-surface-3); font-family: var(--myp-font); }

.myp-editor-source {
    width: 100%;
    min-height: 260px;
    padding: 14px 16px;
    background: var(--myp-bg-soft);
    color: var(--myp-text-soft);
    border: 0;
    outline: none;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .82rem;
    line-height: 1.6;
    resize: vertical;
}

.myp-editor-status {
    padding: 6px 12px;
    min-height: 24px;
    font-size: .74rem;
    color: var(--myp-muted);
    background: var(--myp-surface-3);
    border-top: 1px solid var(--myp-border);
}

.myp-editor-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    background: var(--myp-surface-2);
    border-bottom: 1px solid var(--myp-border);
}

.myp-editor-prompt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 120px;
    font-size: .74rem;
    color: var(--myp-muted);
}

.myp-editor-prompt-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ------------------------------------------------------------ Duyarlı */
@media screen and (max-width: 900px) {
    .myp-node-children,
    .myp-node-lessons { margin-left: 12px; padding-left: 8px; }

    .myp-node-head { flex-wrap: wrap; }
    .myp-node-actions { width: 100%; justify-content: flex-end; }
    .myp-builder-lesson { flex-wrap: wrap; }
    .myp-builder-lesson .myp-node-actions { width: 100%; }
    .myp-editor-area { min-height: 200px; }
}

/* ==========================================================================
   FAZ 3 — Yönetim arayüzü rafinasyonu (TEK KAYNAK)
   Bu blok, yönetim bileşenlerinin TAM tanımını içerir. Aynı bileşenlerin
   dosyanın üst kısmındaki ikinci (ölü) tanımları kaldırıldı; artık kazanan
   kural kaynak sırasına değil, tek tanıma bağlı.
   ========================================================================== */

:root {
    /*
     * Yönetim kabuğunun OPAK zemini. Daha önce .container.myp saydamdı ve
     * gerçek zemin public layout'un yatay gradyanıydı (#232526 → #111212):
     * panel yüzeyi (#15151d) solda zeminden KOYU (CR 1.179), sağda AÇIK
     * (CR 1.034) görünüyordu — işaret dönüşü 1440px'te x≈1161px, yani 4. KPI
     * kartının İÇİNDE. Opak #0e0e12 zeminde panel (#16161e) her yatay konumda
     * zeminden açık (CR 1.071); konuma bağlı kayma sıfırlandı.
     */
    --myp-admin-bg: #0e0e12;

    /*
     * Yüzey ailesi tekilleştirildi. --myp-admin-surface (#15151d) ile
     * --myp-surface (#16161e) arasındaki fark CR 1.0093 idi — algı eşiğinin
     * altında, ama aynı ekranda iki ayrı bileşen ailesi üretiyordu.
     * Artık takma ad; tek kaynak --myp-surface.
     */
    --myp-admin-surface: var(--myp-surface);
    --myp-admin-surface-2: var(--myp-surface-2);
    --myp-admin-line: var(--myp-border);
    --myp-admin-line-strong: var(--myp-border-strong);

    --myp-label: #a2a2b2;   /* bağlam metni — okunur gri */
    /* #82828f gerçek zeminde 4.06:1 (geri bağlantı okunmuyordu) → #9a9aa8 ile
       yeni opak zeminde 6.5:1. */
    --myp-sub: #9a9aa8;
}

/* ==========================================================================
   1) SAYFA KABUĞU — opak zemin + KİLİTLİ yatay/dikey boşluk
   Sekmeler arasındaki 24px yatay ve 14-15px dikey sıçramanın kaynağı,
   kabuk boşluğunun modülde HİÇ tanımlı olmayıp Bulma'dan miras alınmasıydı.
   Kabuk artık burada tanımlı; her sekmede AYNI padding, AYNI zemin.
   :has() seçildi çünkü .section.app-section / .container.myp sarmalayıcıları
   head.php'de değil 30 ayrı görünüm dosyasında yer alıyor.
   ========================================================================== */
.section.app-section:has(> .container.myp) {
    background: var(--myp-admin-bg);
    padding: 120px 48px 56px;
}

.container.myp {
    background: transparent;
    max-width: 1344px;
}

/* ---- :has() YEDEĞİ ----------------------------------------------------
   Yukarıdaki kabuk kuralının TAMAMI (zemin + padding) tek bir :has()
   seçicisine bağlı. :has() desteklemeyen bir motorda kural tümüyle düşer ve
   düzeltilen İKİ kusur da aynen geri gelir: sayfa public layout'un yatay
   gradyanına düşer ve datatables.min.css içindeki Bulma kopyasının
   `.section{padding:3rem 1.5rem}` kuralı 4 sayfada 24px, diğerlerinde 48px
   vererek sekme sıçramasını geri getirir.
   Bu blok yalnızca :has() YOKSA devreye girer ve aynı işi ebeveyn seçici
   gerektirmeden .container.myp üzerinden yapar. */
@supports not selector(:has(*)) {
    .container.myp {
        background: var(--myp-admin-bg);
        /* Bulma .section'ın değişken yatay padding'ini nötrle: boşluk artık
           kabın kendi içinde, her sayfada eşit. */
        padding: 32px 24px 40px;
        max-width: 1392px;   /* 1344 + 2*24 -> içerik genişliği aynı kalır */
        min-height: 60vh;
    }
    .section.app-section { padding-left: 0; padding-right: 0; }
}

@media screen and (max-width: 1023px) {
    .section.app-section:has(> .container.myp) { padding: 104px 24px 40px; }
}

@media screen and (max-width: 768px) {
    .section.app-section:has(> .container.myp) { padding: 91px 16px 40px; }
}

/* ==========================================================================
   2) RENK BARİYERİ
   Sitenin genel CSS'i .app-section altındaki öğelere lacivert (#283252, koyu
   zeminde 1.44:1) metin rengi dayatıyor. Eskiden 20 seçicilik bir liste bunu
   eziyordu; ancak liste etiket metnini taşıyan <span>'i DOĞRUDAN hedeflediği
   için mirası da kesiyordu: .myp-admin-nav a.is-active ve .myp-btn--primary
   renkleri span'e ULAŞAMIYOR, span #c9c9d4 kalıyordu (turuncu üstünde 1.66:1).
   :where() özgüllüğe 0 kattığı için seçici (0,0,1) olur — main.css'teki
   div{color:#283252} ile AYNI özgüllükte ama sonra yüklendiği için kazanır,
   buna karşılık .myp-text-muted / .myp-badge--danger gibi (0,1,0)
   yardımcılarını BOZMAZ ve mirası da kesmez.
   ========================================================================== */
:where(.myp) div,
:where(.myp) span,
:where(.myp) li,
:where(.myp) td,
:where(.myp) th { color: inherit; }

/* Bariyer :where() ile SIFIR özgüllükte yazıldığı için main.css'in ELEMENT
   seçicilerini (0,0,1) ezemiyordu; strong/b/em/small/code/label bu yüzden
   kapsam dışında kalmıştı:
     main.css  strong { color:#363636 }  -> panel #16161e üzerinde 1.49:1
     main.css  code   { color:#da1039 }  -> panel #16161e üzerinde 3.52:1
   İkisi de WCAG AA'nın (4.5:1) çok altında; <strong> pratikte görünmezdi.
   `.myp strong` (0,1,1) element seçicisini net biçimde ezer ve mirası
   sürdürür (inherit), böylece rozet/uyarı gibi renkli kaplarda doğru renk
   devam eder. Panel zemininde sonuç: inherit -> #f4f4f7 = 15.2:1. */
.myp strong,
.myp b,
.myp em,
.myp small,
.myp label { color: inherit; }

/* <code> okunur bir vurgu rengi alır. #ffa585 / #16161e = 8.6:1 (AA+),
   marka turuncusuyla aynı aileden. */
.myp code {
    color: #ffa585;
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    padding: .12em .38em;
    font-size: .92em;
}
.myp .myp-prose code { color: #ffa585; }

.myp-admin-head { color: var(--myp-text-soft); }
.myp-fw-bold { color: var(--myp-text); }

/* Rakam her zaman en yüksek kontrastta kalmalı (#fff / #16161e = 15.9:1) */
.myp-kpi-value,
.myp .myp-kpi-value { color: #fff; }

/* ==========================================================================
   3) TURUNCU ZEMİN ÜZERİ METİN
   #fff/#5b9dff = 2.72:1 → #0b1220/#5b9dff = 6.89:1 (hover #7cb8ff: 8.38:1).
   Marka rengi değişmedi.
   ========================================================================== */
.myp-btn--primary,
.myp-btn--primary:hover,
.myp-page.is-active,
.myp-support,
.myp-admin-nav a.is-active { color: var(--myp-on-accent); }

/* ==========================================================================
   4) BAŞLIK BLOĞU — Bulma/DataTables'a karşı savunmacı özgüllük
   datatables.min.css TAM bir Bulma 0.9.2 kopyası içeriyor ve 5 sayfada
   micro.css'ten SONRA yükleniyor. .subtitle:not(:last-child){margin-bottom:1.5rem}
   (0,2,0) eski (0,2,0) kuralımızı eziyor (+14px), .title.is-3{font-size:2rem}
   +1px ekliyordu — ölçülen 14-15px dikey sıçramanın tam kaynağı buydu.
   Aşağıdaki seçiciler (0,3,0)/(0,2,1) olduğu için yükleme sırasından
   BAĞIMSIZ kazanır.
   ========================================================================== */
.myp-admin-head {
    padding: 8px 0 var(--myp-s5);
    margin-bottom: var(--myp-s5);
    border-bottom: 1px solid var(--myp-admin-line);
}

/*
 * Modül başlığı. Önceden Bulma'nın .title.is-3.is-bold sınıfları
 * kullanılıyordu; yönetim kabuğu artık main.css yüklemediği için o sınıfların
 * karşılığı kalmadı ve başlık tarayıcı varsayılanına düşüyordu. Ölçüler
 * panelin .adm-page-head__title bileşeniyle hizalı tutuldu.
 */
.myp-admin-title {
    gap: var(--myp-s3);
    font-family: var(--myp-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--myp-text);
    margin: 0;
}
.myp-admin-title .feather { width: 24px; height: 24px; color: var(--myp-accent); }

@media (max-width: 639px) {
    .myp-admin-title { font-size: 21px; }
    .myp-admin-title .feather { width: 20px; height: 20px; }
}

.myp .myp-admin-head .subtitle,
.myp .myp-admin-head h4 {
    margin: 0 0 10px;
    font-size: .82rem;
    line-height: 1;
}

.myp .myp-admin-head .title,
.myp .myp-admin-head h1,
.myp .myp-admin-head h2 {
    margin: 0;
    font-family: var(--myp-font);
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
}

.myp-admin-head .title svg,
.myp-admin-head h1 svg,
.myp-admin-head h2 svg {
    width: 22px;
    height: 22px;
    color: var(--myp-accent);
    flex-shrink: 0;
}

/* Modülden çıkan geri bağlantı ve sayfa yolu */
.myp-admin-head .myp-breadcrumb {
    margin: 0 0 10px;
    font-size: .8rem;
    color: var(--myp-sub);
}

.myp-admin-head .myp-breadcrumb a { color: var(--myp-sub); font-family: var(--myp-font); font-weight: 600; }
.myp-admin-head .myp-breadcrumb a:hover { color: var(--myp-accent); }
.myp-admin-head .myp-breadcrumb [aria-current="page"] { color: var(--myp-text-soft); }
.myp-admin-head .myp-breadcrumb a:focus-visible { outline: 2px solid var(--myp-accent); outline-offset: 2px; border-radius: 4px; }

.myp-admin-head .a-link,
.myp-admin-head .a-link span {
    color: var(--myp-sub);
    font-family: var(--myp-font);
    font-weight: 600;
    transition: color .18s var(--myp-ease);
}

.myp-admin-head .a-link:hover,
.myp-admin-head .a-link:hover span { color: var(--myp-accent); }

/* ==========================================================================
   5) ANA GEZİNME
   ========================================================================== */
.myp-admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 22px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--myp-admin-line);
    width: fit-content;
    max-width: 100%;
}

.myp-admin-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    /* --myp-label #a2a2b2, nav zemininde (≈#131319) 7.4:1 */
    color: var(--myp-label);
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: color .18s var(--myp-ease), background .18s var(--myp-ease);
}

.myp-admin-nav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.myp-admin-nav a.is-active {
    background: var(--myp-accent);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(91, 157, 255, .3);
}

.myp-admin-nav a svg { width: 14px; height: 14px; opacity: .85; flex-shrink: 0; }
.myp-admin-nav a.is-active svg { opacity: 1; }

/* ==========================================================================
   6) ALT GEZİNME (.myp-subnav) — 11 görünümdeki satır içi <style> kopyalarının
   yerini alır. Aktif durum aria-current="page" ile verilir; myp-btn--primary
   ARTIK alt gezinmede kullanılmaz, böylece sayfadaki tek dolu turuncu yüzey
   gerçek birincil eylem olur.
   ========================================================================== */
.myp-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--myp-s2);
    margin-bottom: var(--myp-s5);
}

.myp-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius-sm);
    background: transparent;
    color: var(--myp-label);
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s var(--myp-ease), background .18s var(--myp-ease), border-color .18s var(--myp-ease);
}

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

.myp-subnav-link[aria-current="page"] {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: var(--myp-border-strong);
    box-shadow: inset 0 -2px 0 var(--myp-accent);
}

.myp-subnav-link:focus-visible { outline: 2px solid var(--myp-accent); outline-offset: 2px; }
.myp-subnav-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Tek boyutlu durum filtresi satırı — panelin ÜSTÜNDE tek satır */
.myp-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--myp-s2);
    margin-bottom: var(--myp-s5);
}

/* ==========================================================================
   7) ÜST DÜĞMELER
   ========================================================================== */
.myp-admin-head .myp-btn--ghost {
    border-color: var(--myp-admin-line-strong);
    color: var(--myp-text-soft);
}

.myp-admin-head .myp-btn--ghost:hover {
    border-color: var(--myp-accent);
    color: var(--myp-accent);
    background: rgba(91, 157, 255, .07);
}

.myp-admin-head .myp-btn--primary { box-shadow: 0 4px 14px rgba(91, 157, 255, .24); }

/* ==========================================================================
   8) KPI KARTLARI — uyarlanabilir ızgara
   repeat(4, ...) sabitti; gerçek kart sayısı sayfa başına 2/3/4/5/6/8 arasında
   değişiyor, öksüz kartlar ve boş satırlar oluşuyordu. grid-auto-rows:1fr +
   min-height kart yüksekliklerini eşitler, böylece sekme değişiminde altındaki
   içerik kaymaz.
   ========================================================================== */
.myp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 14px;
    grid-auto-rows: 1fr;
    margin-bottom: var(--myp-s5);
}

.myp-kpi {
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: 18px 20px 20px;
    background: var(--myp-admin-surface);
    border: 1px solid var(--myp-admin-line);
    border-radius: var(--myp-radius);
    box-shadow: var(--myp-shadow-soft);
    transition: border-color .2s var(--myp-ease), background .2s var(--myp-ease);
}

.myp-kpi:hover {
    background: var(--myp-admin-surface-2);
    border-color: var(--myp-admin-line-strong);
}

.myp-kpi-label {
    display: flex;
    align-items: center;
    gap: var(--myp-s2);
    margin-bottom: 14px;
    font-family: var(--myp-font);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--myp-label);
}

.myp-kpi-label svg {
    width: 14px;
    height: 14px;
    color: var(--myp-accent);
    opacity: .9;
    flex-shrink: 0;
}

.myp-kpi-value {
    margin-top: auto;
    font-family: var(--myp-font);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.myp-kpi-sub {
    margin-top: 9px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--myp-sub);
}

/* ==========================================================================
   9) PANELLER — tek dikey ritim: tüm ana blokların alt boşluğu 24px
   ========================================================================== */
.myp-panel {
    margin-bottom: var(--myp-s5);
    background: var(--myp-admin-surface);
    border: 1px solid var(--myp-admin-line);
    border-radius: var(--myp-radius);
    box-shadow: var(--myp-shadow-soft);
    overflow: hidden;
}

.myp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--myp-s4);
    padding: 17px 22px;
    border-bottom: 1px solid var(--myp-admin-line);
}

/* .myp-panel-title (0,1,0) daha önce .myp h3 (0,1,1) tarafından eziliyordu:
   59 <div> ve 32 <h3> başlık farklı ağırlık/satır yüksekliğiyle (~4px fark)
   render ediliyordu. (0,2,0)/(0,2,1) ile her iki markup aynı görünür. */
.myp .myp-panel-title,
.myp h2.myp-panel-title,
.myp h3.myp-panel-title {
    font-family: var(--myp-font);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: #fff;
}

.myp-panel-body { padding: 22px; }
.myp-panel-body--flush { padding: 0; }

/* Panel gövdesi tablo taşıyorsa tablo HER ZAMAN kenara dayansın: daha önce
   21 tablo --flush, 5 tablo dolgulu gövdedeydi; sekme değişince tablonun sol
   kenarı 22px kayıyordu. */
.myp-panel-body:has(> .myp-table-wrap) { padding: 0; }

/* ==========================================================================
   10) TABLOLAR — yapışkan başlık, görünür kaydırma, ölçülebilir yüzey adımları
   ========================================================================== */
.myp-panel .myp-table-wrap { border: 0; border-radius: 0; }

.myp-table-wrap {
    max-height: 70vh;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--myp-surface-3) transparent;
}

.myp-table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.myp-table-wrap::-webkit-scrollbar-thumb { background: var(--myp-surface-3); border-radius: 4px; }

.myp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--myp-surface-2);
}

/* Başlık satırı panelden CR 1.15; hover'lı satır başlıktan CR 1.13.
   Eskiden .022/.026 alfa ile aradaki fark CR 1.01 idi — imleç bir satıra
   geldiğinde satır başlık satırıyla aynı renge düşüyordu. */
.myp-panel .myp-table th {
    background: rgba(255, 255, 255, .055);
    border-bottom-color: var(--myp-admin-line);
    /* 11.52px büyük harf çok küçüktü → .76rem = 12.16px */
    font-size: .76rem;
    letter-spacing: .06em;
    color: var(--myp-sub);
    padding: 12px 22px;
}

.myp-panel .myp-table td {
    padding: 13px 22px;
    border-bottom-color: var(--myp-admin-line);
    font-size: .88rem;
}

.myp-panel .myp-table tbody tr:hover td { background: rgba(255, 255, 255, .095); }

/* Çok sütunlu tablolarda (enrollments 10, assignments/quizzes 11 sütun)
   ilk sütunu yatay kaydırmada sabitler. */
.myp-table--pin-first td:first-child,
.myp-table--pin-first th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--myp-surface);
}

.myp-table--pin-first thead th:first-child { z-index: 3; }

/* Tablo satırı işlem düğmeleri — 5 görünümdeki satır içi
   style="justify-content:flex-end" tekrarının yerine. */
.myp-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--myp-s2);
    justify-content: flex-end;
}

/* ==========================================================================
   11) BOŞ DURUM
   ========================================================================== */
.myp-panel .myp-empty { padding: 44px 24px; }
.myp-panel .myp-empty-icon { width: 60px; height: 60px; margin-bottom: 16px; }
.myp-panel .myp-empty-icon svg { width: 24px; height: 24px; }
/* Panel İÇİNDEKİ boş-durum h3'ü (16.32px) panel başlığından (15.68px) BÜYÜKTÜ
   — hiyerarşi tersti. Artık panel başlığının (1.06rem) altında. */
.myp-panel .myp-empty h3 { font-size: .95rem; color: #fff; }
.myp-panel .myp-empty p { font-size: .87rem; color: var(--myp-sub); }

/* ==========================================================================
   12) UYARI ŞERİTLERİ — opak taban
   Varyantlar %9 tint'i doğrudan zemine bindiriyordu; saydam kapta aynı şerit
   solda #24342f sağda #15241f oluyordu (CR 1.233). Artık taban her zaman
   --myp-surface; konum bağımlılığı yok.
   ========================================================================== */
.myp-alert {
    margin-bottom: var(--myp-s5);
    border-radius: var(--myp-radius);
    background: var(--myp-surface);
}

.myp-alert--success { background: color-mix(in srgb, var(--myp-success) 9%, var(--myp-surface)); }
.myp-alert--warning { background: color-mix(in srgb, var(--myp-warning) 9%, var(--myp-surface)); }
.myp-alert--danger { background: color-mix(in srgb, var(--myp-danger) 9%, var(--myp-surface)); }
.myp-alert--info { background: color-mix(in srgb, var(--myp-cyan) 9%, var(--myp-surface)); }

/* ==========================================================================
   13) KLAVYE ODAĞI
   programs/index.php her satıra 7 ikon düğmesi basıyor (25 satır = 175
   odaklanabilir öğe) ve hiçbirinde odak halkası yoktu.
   ========================================================================== */
.myp-admin-nav a:focus-visible,
.myp-subnav a:focus-visible,
.myp-icon-btn:focus-visible,
.myp-tab:focus-visible,
.myp-page:focus-visible,
.myp-input:focus-visible,
.myp-select:focus-visible,
.myp-textarea:focus-visible {
    outline: 2px solid var(--myp-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   14) SATIR İÇİ <style> BLOKLARINDAN TAŞINAN BİLEŞENLER
   ========================================================================== */

/* Şablon değişkeni düğme listesi (settings/mail_templates, notifications) */
.myp-varlist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--myp-s2);
}

.myp-varlist button {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    cursor: pointer;
}

/* Günlük ciro çubuk grafiği — dashboard.php (168px, yatay etiket) ve
   finance/index.php (220px, dikey etiket) iki ayrı satır içi kopya
   kullanıyordu; tek bileşen + --myp-bars-height ile birleştirildi. */
.myp-bars {
    --myp-bars-height: 200px;
    display: flex;
    align-items: flex-end;
    gap: var(--myp-s1);
    height: var(--myp-bars-height);
    padding: 10px 2px 0;
}

.myp-bar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 6px;
}

.myp-bar > span {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--myp-accent), rgba(91, 157, 255, .35));
    transition: filter .18s var(--myp-ease);
}

.myp-bar:hover > span { filter: brightness(1.25); }
.myp-bar.is-empty > span { background: rgba(255, 255, 255, .07); }

.myp-bar-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: .74rem;
    color: var(--myp-muted);
}

.myp-bar-axis--vertical { writing-mode: vertical-rl; font-size: .68rem; }

/* ==========================================================================
   15) BOŞLUK YARDIMCILARI (dosyanın EN SONUNDA)
   Daha önce dosyanın ortasındaydılar ve aynı özgüllükteki .myp-panel /
   .myp-kpi-grid kuralları tarafından eziliyorlardı; 28 kullanımda tamamen
   etkisizlerdi. Değerler de ölçeğe hizalandı (10/20/34 → 8/16/32).
   ========================================================================== */
.myp-gap-sm { gap: var(--myp-s2); }
.myp-gap-md { gap: var(--myp-s4); }
.myp-gap-lg { gap: var(--myp-s5); }
.myp-mt-0 { margin-top: 0; }
.myp-mt-sm { margin-top: var(--myp-s2); }
.myp-mt-md { margin-top: var(--myp-s4); }
.myp-mt-lg { margin-top: var(--myp-s6); }
.myp-mb-0 { margin-bottom: 0; }
.myp-mb-sm { margin-bottom: var(--myp-s2); }
.myp-mb-md { margin-bottom: var(--myp-s4); }
.myp-mb-lg { margin-bottom: var(--myp-s6); }
.myp-w-auto { width: auto; }

/* ==========================================================================
   16) DUYARLILIK
   Kırılma noktaları gerçek kap genişliğine (Bulma .container: 960/1152/1344px)
   hizalandı. Eskiden 1200→1201px'te KPI kartı %26 daralıp 1216'da yeniden
   büyüyordu. 8 sekmeli nav tek satır için 1099,6px istiyor; 861-1215px
   arasında iki satıra sarıp altındaki her şeyi ~38px aşağı itiyordu — yatay
   kaydırma eşiği 1215px'e çekildi (.myp-tabs ile aynı desen).
   ========================================================================== */
@media screen and (max-width: 1215px) {
    .myp-admin-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .myp-admin-nav::-webkit-scrollbar { display: none; }
    .myp-admin-nav a { white-space: nowrap; }

    .myp-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .myp-subnav::-webkit-scrollbar { display: none; }
    .myp-subnav > * { flex-shrink: 0; }
}

@media screen and (max-width: 520px) {
    .myp-kpi-value { font-size: 1.55rem; }
    .myp-panel-body { padding: 16px 16px 18px; }
    .myp-panel-head { padding: 15px 16px; }
    .myp-panel .myp-table th,
    .myp-panel .myp-table td { padding: 11px 16px; }
}

/* ==========================================================================
   DATATABLES / BULMA SAYFALAMA — KOYU TEMA
   datatables.min.css içindeki Bulma 0.9.2 kopyası sayfalama düğmelerine AÇIK
   tema veriyor ve koyu panelde okunmaz hale getiriyordu:
     .pagination-link[disabled]{background:#dbdbdb;color:#7a7a7a;opacity:.5}
       -> panel #16161e üzerinde ~2.07:1 (WCAG 4.5 gerekli)
     .pagination-link.is-current{background:#3273dc} -> marka yerine Bulma mavisi
   Daha önce yalnızca programs/index.php içinde YARIM bir kopya vardı
   (opacity sıfırlanmamıştı). Kural burada merkezîleştirildi; `.myp` ile
   sınırlı olduğu için sitenin geri kalanını etkilemez.
   ========================================================================== */
.myp .pagination-link,
.myp .pagination-next,
.myp .pagination-previous {
    background-color: var(--myp-surface-2);
    border-color: var(--myp-border);
    color: var(--myp-text-soft);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.myp .pagination-link:hover,
.myp .pagination-next:hover,
.myp .pagination-previous:hover {
    background-color: var(--myp-surface-3);
    border-color: var(--myp-border-strong);
    color: var(--myp-text);
}

/* Aktif sayfa: marka turuncusu, üzerinde koyu metin -> 6.89:1 */
.myp .pagination-link.is-current {
    background-color: var(--myp-accent);
    border-color: var(--myp-accent);
    color: #0b1220;
    font-weight: 700;
}

/* Devre dışı: opacity:.5 MUTLAKA sıfırlanmalı, yoksa kontrast yarıya iner. */
.myp .pagination-link[disabled],
.myp .pagination-next[disabled],
.myp .pagination-previous[disabled],
.myp .pagination-link:disabled,
.myp .pagination-next:disabled,
.myp .pagination-previous:disabled {
    background-color: var(--myp-bg-soft);
    border-color: var(--myp-border);
    color: #6f6f7e;
    opacity: 1;
    cursor: not-allowed;
}

/* DataTables'ın kendi uzunluk/arama girdileri (Bulma .input/.select) */
.myp .dataTables_wrapper .input,
.myp .dataTables_wrapper .select select,
.myp .dataTables_length select,
.myp .dataTables_filter input {
    background-color: var(--myp-surface-2);
    border-color: var(--myp-border);
    color: var(--myp-text);
}

.myp .dataTables_wrapper .dataTables_info,
.myp .dataTables_wrapper .dataTables_length,
.myp .dataTables_wrapper .dataTables_filter { color: var(--myp-text-soft); }


/* ==========================================================================
   VİTRİN 3.0 — Mikro Yeterlilikler tanıtım sayfası bileşenleri
   --------------------------------------------------------------------------
   Bu blok bilinçli olarak dosyanın EN SONUNDA durur: yukarıdaki
   `@media (max-width: …)` blokları bu bileşenleri tanımıyor, dolayısıyla
   kendi duyarlı kurallarımı da bu blok içinde tutuyorum. Böylece kaynak
   sırası kaynaklı sürprizler olmuyor.

   Referans kalite çıtası: MasterClass sertifika / executive sayfaları.
   Renkler MARKA paletinden (turuncu #5b9dff) alınır; referansın lime yeşili
   kopyalanmaz.
   ========================================================================== */

/* ----------------------------------------------------- 1) Yapışkan alt menü
   Ana header `position:fixed` (80px; kaydırınca 68px). Mobilde ayrıca 67px
   header + 64px alt gezinme şeridi var → toplam 131px. */
/* Sayfa genişliğinde bir şerit DEĞİL: ortada yüzen, buzlu cam bir hap.
   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: 4px;
    max-width: 100%;
    padding: 7px 7px 7px 12px;
    border-radius: 999px;
    background: rgba(20, 20, 27, .62);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 255, 255, .07) inset;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.myp-subnav-link {
    flex: 0 0 auto;
    padding: 9px 16px;
    font-family: var(--myp-font);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--myp-text-soft);
    white-space: nowrap;
    border-radius: 999px;
    transition: color .2s var(--myp-ease), background-color .2s var(--myp-ease);
}

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

.myp-subnav-link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}

.myp-subnav-btn { flex: 0 0 auto; border-radius: 999px !important; }

/* --------------------------------------------------------- 2) İkon şeridi
   Referanstaki "Unlock high-impact skills" bloğu: ince çizgili ikon + kısa
   etiket. Feather varsayılan stroke-width 2 → 1.3 ile inceltilir. */
.myp-iconrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--myp-s6) var(--myp-s5);
    max-width: 940px;
    margin: 0 auto;
}

.myp-iconrow-item { text-align: center; }

.myp-iconrow-item svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.3;
    color: var(--myp-accent);
    margin-bottom: 14px;
}

.myp-iconrow-label {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--myp-text-soft);
}

/* --------------------------------------------------- 3) Sertifika vitrini
   Sol: sıcak zeminde duran belge maketi. Sağ: koyu panel + kazanım listesi.
   Belge tamamen CSS ile çizilir; ayrı bir görsel dosyasına bağımlılık yok. */
.myp-cert {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--myp-border);
    box-shadow: var(--myp-shadow);
}

.myp-cert-visual {
    display: grid;
    place-items: center;
    padding: 58px 46px;
    background:
        radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .55), transparent 60%),
        linear-gradient(155deg, #e9dfd2 0%, #ddd0be 55%, #d3c4af 100%);
}

.myp-cert-panel {
    padding: 58px 52px;
    background: #08080b;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.myp-cert-panel .myp-eyebrow { color: var(--myp-accent); }

.myp-cert-title {
    font-family: var(--myp-font-display);
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.012em;
    color: #fff;
    margin-bottom: var(--myp-s5);
}

.myp-cert-list { display: grid; gap: 15px; margin-bottom: var(--myp-s6); }

.myp-cert-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: .96rem;
    line-height: 1.6;
    color: var(--myp-text-soft);
}

.myp-cert-list li svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
    color: var(--myp-accent);
    flex-shrink: 0;
    margin-top: 3px;
}

/* -- Belge maketi -- */
.myp-cert-doc {
    width: 100%;
    max-width: 430px;
    aspect-ratio: 1.42 / 1;
    padding: 26px 24px;
    border-radius: 6px;
    background: linear-gradient(160deg, #16161d 0%, #0c0c11 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 26px 60px -18px rgba(60, 40, 20, .55),
        0 8px 20px -8px rgba(60, 40, 20, .35);
    display: flex;
    flex-direction: column;
    transform: rotate(-1.1deg);
    transition: transform .5s var(--myp-ease);
}

.myp-cert:hover .myp-cert-doc { transform: rotate(0deg) translateY(-4px); }

.myp-cert-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.myp-cert-doc-head img { height: 22px; width: auto; }

.myp-cert-doc-kicker {
    font-family: var(--myp-font);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--myp-accent);
    text-align: right;
    line-height: 1.5;
}

.myp-cert-doc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 14px 0; }

.myp-cert-doc-label {
    font-size: .5rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--myp-muted);
    margin-bottom: 9px;
}

.myp-cert-doc-name {
    font-family: var(--myp-font);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.22;
    color: #fff;
    letter-spacing: -.01em;
}

.myp-cert-doc-person {
    margin-top: 10px;
    font-size: .72rem;
    color: var(--myp-text-soft);
}

.myp-cert-doc-meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 13px;
    flex-wrap: wrap;
}

.myp-cert-doc-chip {
    font-family: var(--myp-font);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--myp-accent-soft);
    color: var(--myp-accent);
    border: 1px solid rgba(91, 157, 255, .32);
}

.myp-cert-doc-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.myp-cert-doc-sign { flex: 1; }

.myp-cert-doc-sign-line {
    height: 1px;
    background: rgba(255, 255, 255, .22);
    margin-bottom: 6px;
}

.myp-cert-doc-sign span {
    font-size: .46rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--myp-muted);
}

.myp-cert-doc-qr {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 4px;
    background:
        conic-gradient(from 0deg at 50% 50%, #fff 0 25%, #0c0c11 0 50%, #fff 0 75%, #0c0c11 0);
    background-size: 9px 9px;
    opacity: .85;
}

/* ------------------------------------------------------------- 4) Slider
   Referans: oncall.masterclass.com "Your AI coaches" — dikey kartlar,
   scroll-snap, yuvarlak oklar, nokta sayfalama. */
.myp-slider { position: relative; }

.myp-slider-track {
    display: grid;
    grid-auto-flow: column;
    /* DİKKAT: minmax(…, 1fr) veya minmax(0, …) KULLANMAYIN. Grid, esneyebilen
       parçaları kaydırma yerine kaba sığdırır; kartlar eziliyordu. Sabit yüzde
       = tam N kart/sayfa + gerçek yatay taşma. */
    grid-auto-columns: 84%;
    gap: var(--myp-s5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.myp-slider-track::-webkit-scrollbar { display: none; }

.myp-slider-track > * { scroll-snap-align: start; }

@media screen and (min-width: 620px) {
    .myp-slider-track { grid-auto-columns: calc(50% - var(--myp-s5) / 2); }
}

@media screen and (min-width: 950px) {
    .myp-slider-track { grid-auto-columns: calc(33.3333% - var(--myp-s5) * 2 / 3); }
}

@media screen and (min-width: 1240px) {
    .myp-slider-track { grid-auto-columns: calc(25% - var(--myp-s5) * 3 / 4); }
}

.myp-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--myp-s3);
    margin-top: var(--myp-s6);
}

.myp-slider-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border-strong);
    color: var(--myp-text);
    cursor: pointer;
    transition: background-color .2s var(--myp-ease), border-color .2s var(--myp-ease), opacity .2s;
}

.myp-slider-btn:hover:not(:disabled) { background: var(--myp-surface-3); border-color: var(--myp-accent); color: var(--myp-accent); }
.myp-slider-btn:disabled { opacity: .32; cursor: default; }
.myp-slider-btn svg { width: 18px; height: 18px; }

.myp-slider-dots { display: flex; align-items: center; gap: 7px; }

.myp-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--myp-surface-3);
    cursor: pointer;
    transition: background-color .25s var(--myp-ease), width .25s var(--myp-ease);
}

.myp-slider-dot.is-active { background: var(--myp-accent); width: 22px; border-radius: 999px; }

/* -- Slider kartı -- */
.myp-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 400px;
    padding: 22px;
    border-radius: var(--myp-radius-lg);
    overflow: hidden;
    background: var(--myp-surface-2);
    border: 1px solid var(--myp-border);
    isolation: isolate;
    transition: transform .35s var(--myp-ease), border-color .35s var(--myp-ease);
}

.myp-slide:hover { transform: translateY(-5px); border-color: var(--myp-border-strong); }

.myp-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .55s var(--myp-ease);
}

.myp-slide:hover .myp-slide-img { transform: scale(1.05); }

.myp-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 8, 11, .12) 0%, rgba(8, 8, 11, .72) 52%, rgba(8, 8, 11, .96) 100%);
}

.myp-slide-tags {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.myp-slide-title {
    font-family: var(--myp-font);
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.26;
    color: #fff;
    letter-spacing: -.01em;
}

.myp-slide-title a { color: inherit; }
.myp-slide-title a:hover { color: var(--myp-accent); }

.myp-slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    margin-top: 10px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .72);
}

.myp-slide-meta span { display: inline-flex; align-items: center; gap: 5px; }
.myp-slide-meta svg { width: 13px; height: 13px; stroke-width: 1.7; }

.myp-slide-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.myp-slide-price {
    font-family: var(--myp-font);
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
}

.myp-slide-price small {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
    text-decoration: line-through;
}

/* --------------------------------------------------------------- 6) SSS
   Referanstaki sade varyant: zeminsiz, yalnızca ince ayraçlar. */
.myp-faq--plain { max-width: 860px; margin: 0 auto; }

.myp-faq--plain .myp-faq-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--myp-border);
    border-radius: 0;
    margin: 0;
}

.myp-faq--plain .myp-faq-item:last-child { border-bottom: 1px solid var(--myp-border); }

.myp-faq--plain .myp-faq-q {
    padding: 22px 4px;
    font-size: 1rem;
    background: transparent;
}

.myp-faq--plain .myp-faq-q:hover { color: var(--myp-accent); }
.myp-faq--plain .myp-faq-a { padding: 0 4px 22px; }

/* --------------------------------------------------------- 7) Duyarlılık */
@media screen and (max-width: 1023px) {
    .myp-cert { grid-template-columns: 1fr; }
    .myp-cert-visual { padding: 44px 28px; }
    .myp-cert-panel { padding: 40px 30px; }
}

@media screen and (max-width: 860px) {
    .myp-subnav-cta { display: none; }
}

@media screen and (max-width: 768px) {
    /* Mobilde header 67px + alt gezinme şeridi 64px. */
    .myp-subnav { top: 131px; }
}

@media screen and (max-width: 560px) {
    .myp-subnav-inner { height: 52px; }
    .myp-subnav-link { padding: 8px 11px; font-size: .72rem; }
    .myp-cert-visual { padding: 32px 18px; }
    .myp-cert-panel { padding: 32px 22px; }
    .myp-slide { min-height: 360px; }
}

/* Slider kartı içindeki kategori etiketi (ızgara kartından farklı boşluk). */
.myp-slide .myp-pcard-category { display: block; margin-bottom: 7px; }

/* Bölüm bağlantılarına atlarken başlık yapışkan menünün altında kalmasın. */
.myp [id] { scroll-margin-top: 150px; }

@media screen and (max-width: 768px) {
    .myp [id] { scroll-margin-top: 205px; }
}

/* ==========================================================================
   VİTRİN 3.2 — Lansman rozeti ve son rötuşlar
   ========================================================================== */

/* Lansman iddiası — kahraman başlığın üstünde, ölçülü bir şerit rozet.
   Marka rengiyle dolgulu değil: iddianın kendisi zaten güçlü, dolgulu rozet
   reklam bandı gibi duruyordu. */
.myp-firstbadge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 10px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(91, 157, 255, .10);
    border: 1px solid rgba(91, 157, 255, .34);
    font-family: var(--myp-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ffcdb8;
}

.myp-firstbadge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--myp-accent);
    color: var(--myp-on-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.myp-firstbadge-tag svg { width: 13px; height: 13px; stroke-width: 2.4; }

@media screen and (max-width: 560px) {
    .myp-firstbadge { font-size: .72rem; padding: 6px 12px 6px 8px; gap: 8px; }
    .myp-firstbadge-tag { font-size: .64rem; padding: 3px 8px; }
}

/* Sertifika maketindeki QR: dama tahtası deseni sahte duruyordu.
   Gerçek QR'ların üç konum işaretini (finder pattern) taklit eden bir maske. */
.myp-cert-doc-qr {
    background:
        /* sol üst konum işareti */
        linear-gradient(#fff, #fff) 0 0 / 13px 3px no-repeat,
        linear-gradient(#fff, #fff) 0 10px / 13px 3px no-repeat,
        linear-gradient(#fff, #fff) 0 0 / 3px 13px no-repeat,
        linear-gradient(#fff, #fff) 10px 0 / 3px 13px no-repeat,
        /* sağ üst konum işareti */
        linear-gradient(#fff, #fff) 100% 0 / 13px 3px no-repeat,
        linear-gradient(#fff, #fff) 100% 10px / 13px 3px no-repeat,
        linear-gradient(#fff, #fff) calc(100% - 10px) 0 / 3px 13px no-repeat,
        linear-gradient(#fff, #fff) 100% 0 / 3px 13px no-repeat,
        /* sol alt konum işareti */
        linear-gradient(#fff, #fff) 0 100% / 13px 3px no-repeat,
        linear-gradient(#fff, #fff) 0 calc(100% - 10px) / 13px 3px no-repeat,
        linear-gradient(#fff, #fff) 0 100% / 3px 13px no-repeat,
        linear-gradient(#fff, #fff) 10px 100% / 3px 13px no-repeat,
        /* veri alanı dokusu */
        repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 17px 17px / 4px 4px,
        #0c0c11;
    opacity: .92;
}

/* Bilgi notu ve SSS gövde metni: satır yüksekliği akademik metne göre açıldı. */
.myp-note-list li { line-height: 1.7; }
.myp-faq--plain .myp-faq-a { line-height: 1.78; color: var(--myp-text-soft); }

/* İkon şeridi etiketleri arasında daha net dikey ritim. */
.myp-iconrow { gap: var(--myp-s7) var(--myp-s5); }

/* ==========================================================================
   VİTRİN 3.3 — Serif vitrin başlıkları (özgüllük düzeltmesi)
   --------------------------------------------------------------------------
   `.myp h1, .myp h2, …` seçicisi (0,1,1) olduğundan, tek sınıflı (0,1,0)
   başlık kuralları font-family/weight/letter-spacing'i uygulayamıyordu.
   Aşağıdaki seçiciler (0,2,0) olarak yazıldı ve o bloğu yener.
   ========================================================================== */
.myp .myp-hero-title,
.myp .myp-section-title,
.myp .myp-cert-title {
    font-family: var(--myp-font-display);
    font-weight: 600;
    letter-spacing: -.012em;
}

.myp .myp-hero-title { line-height: 1.06; }
.myp .myp-section-title { line-height: 1.14; }
.myp .myp-cert-title { line-height: 1.12; }

.myp .myp-hero-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--myp-accent);
}

/* ==========================================================================
   VİTRİN 3.4 — Ortalanmış kahraman + kaydırma işareti
   ========================================================================== */

.myp-hero--center { text-align: center; }

/* Kahraman içindeki blok öğeler ortaya alınır. `.myp-hero-lead` ve
   `.myp-hero-title` üzerlerindeki `max-width` yüzünden otomatik
   ortalanmıyordu; margin-inline:auto şart. */
.myp-hero--center .myp-hero-title,
.myp-hero--center .myp-hero-lead {
    margin-left: auto;
    margin-right: auto;
}

/* Başlık, `.myp-wrap--narrow` (900px) kadar geniş kalır: daha dar bir
   ölçü dört satıra kırıyordu. Alt metin ise okunur satır uzunluğu için
   bilinçli olarak daha dar tutulur. */
.myp-hero--center .myp-hero-title { max-width: none; }
.myp-hero--center .myp-hero-lead { max-width: 56ch; }

/* Kaydırma işareti: buton değil, metin bağlantısı + altında halka içinde ok. */
.myp-scrollcue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 44px;
    color: var(--myp-text-soft);
    transition: color .22s var(--myp-ease);
}

.myp-scrollcue-text {
    font-family: var(--myp-font);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.myp-scrollcue:hover { color: var(--myp-accent); }

.myp-scrollcue-ring {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(91, 157, 255, .45);
    background: rgba(91, 157, 255, .10);
    color: var(--myp-accent);
    transition: background-color .22s var(--myp-ease), border-color .22s var(--myp-ease);
}

/* Dışa doğru genişleyip sönen ikinci halka — dikkat çeker, yer kaplamaz. */
.myp-scrollcue-ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--myp-accent);
    animation: myp-cue-ping 2.4s var(--myp-ease) infinite;
}

.myp-scrollcue-ring svg {
    width: 21px;
    height: 21px;
    stroke-width: 2;
    animation: myp-cue-dip 2.4s var(--myp-ease) infinite;
}

.myp-scrollcue:hover .myp-scrollcue-ring {
    background: rgba(91, 157, 255, .18);
    border-color: var(--myp-accent);
}

@keyframes myp-cue-ping {
    0%        { transform: scale(1);    opacity: .75; }
    70%, 100% { transform: scale(1.55); opacity: 0; }
}

@keyframes myp-cue-dip {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(5px); }
}

@media screen and (max-width: 768px) {
    /* Mobilde üst menü 67px + alt gezinme şeridi 64px = 131px, + boşluk. */
    .myp-subnav { top: 145px; }
    .myp-hero { padding: 168px 0 56px; }
}

@media screen and (max-width: 560px) {
    .myp-subnav { padding: 0 12px; margin-top: -24px; }
    .myp-subnav-pill { padding: 6px 6px 6px 8px; }
    .myp-subnav-link { padding: 8px 12px; font-size: .82rem; }
    .myp-scrollcue { margin-top: 34px; gap: 13px; }
    .myp-scrollcue-ring { width: 48px; height: 48px; }
    .myp-hero--center .myp-hero-title { max-width: none; }
}

/* ==========================================================================
   VİTRİN 4.0 — Kahraman, süreç, kart ve iletişim bloğu ince ayarı
   ========================================================================== */

/* ------------------------------------------------------ 1) Lansman rozeti */
.myp-firstbadge {
    gap: 9px;
    padding: 9px 18px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #ffd9c6;
}

.myp-firstbadge svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: var(--myp-accent);
}

/* ------------------------------------------------------- 2) İki satır başlık */
.myp .myp-hero-title { display: block; }

.myp .myp-hero-claim {
    display: block;
    font-family: var(--myp-font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.1vw, 2.45rem);
    line-height: 1.2;
    letter-spacing: -.008em;
    color: #fff;
}

/* Marka satırı: logodaki geçişi anımsatan sıcak gradyan.
   Gradyanlı metin yalnızca BURADA kullanılır — tek vurgu noktası. */
.myp .myp-hero-brand {
    display: block;
    margin-top: 10px;
    font-family: var(--myp-font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(2.05rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.015em;
    background: linear-gradient(92deg, #ffb35c 0%, var(--myp-accent) 42%, #ff6f9c 78%, #b98cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Safari'de background-clip:text ile gölge kaybolur; ışıma ayrı katmanda. */
    filter: drop-shadow(0 6px 26px rgba(91, 157, 255, .22));
}

/* ------------------------------------------- 3) Bölümler arası süreklilik
   Kahramandaki ışıma bazı bölümlerin üstünde tekrar eder; bölümler
   birbirinin devamı gibi okunur, sert kesik oluşmaz. */
.myp-section--glow {
    position: relative;
    overflow: hidden;
}

.myp-section--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 340px at 18% -12%, rgba(91, 157, 255, .13), transparent 62%),
        radial-gradient(680px 320px at 84% -6%, rgba(163, 150, 255, .11), transparent 60%);
}

.myp-section--glow > * { position: relative; z-index: 1; }

/* Bölüm ayracı: sert 1px çizgi yerine ortada sönümlenen ince hat. */
.myp-section--seam { border-top: 0; }

.myp-section--seam::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
}

/* --------------------------------------------------- 4) Ortalı bölüm başlığı */
.myp-headcenter {
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
}

.myp-headcenter .myp-eyebrow { justify-content: center; }
.myp-headcenter .myp-section-sub { margin-left: auto; margin-right: auto; }

.myp-subhead {
    margin: 72px auto 40px;
    text-align: center;
}

.myp-subhead h3 {
    font-family: var(--myp-font-display);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    color: var(--myp-text-soft);
    letter-spacing: -.005em;
}

/* İkon şeridinin "olumsuz" varyantı: soluk, dikkat çekmeyen. */
.myp-iconrow--muted .myp-iconrow-item svg { color: #6f6f80; }
.myp-iconrow--muted .myp-iconrow-label { color: var(--myp-muted); font-size: .88rem; }

/* -------------------------------------------------- 5) Adım şeridi (yeniden)
   Önceki halde sıralı olduğu yeterince okunmuyordu. Artık her adımda büyük
   serif sıra numarası (01…04) ve numaraların hizasından geçen tek bir
   bağlantı hattı var. */
.myp-steps {
    --myp-step-icon: 46px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0;
    counter-reset: myp-step;
}

.myp-step {
    position: relative;
    padding-top: 4px;
}

.myp-step-ord {
    display: block;
    font-family: var(--myp-font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    /* Sayı, ikon ve metinden geri planda dursun: kontur hissi veren soluk ton. */
    color: rgba(255, 255, 255, .16);
    margin-bottom: 14px;
}

.myp-step-icon {
    position: relative;
    z-index: 1;
    width: var(--myp-step-icon);
    height: var(--myp-step-icon);
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(91, 157, 255, .22), rgba(91, 157, 255, .09));
    border: 1px solid rgba(91, 157, 255, .34);
    color: var(--myp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.myp-step-icon svg { width: 20px; height: 20px; stroke-width: 1.7; }

/* Bağlantı hattı, ikon kutularının dikey ortasından geçer. */
.myp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(2.5rem + 14px + 4px + var(--myp-step-icon) / 2);
    left: calc(var(--myp-step-icon) + 12px);
    right: -30px;
    height: 1px;
    background: linear-gradient(90deg, rgba(91, 157, 255, .5), rgba(91, 157, 255, .06));
}

.myp-step-title {
    font-family: var(--myp-font);
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--myp-text);
    margin-bottom: 8px;
    letter-spacing: -.005em;
}

.myp-step-text {
    font-size: .89rem;
    line-height: 1.68;
    color: var(--myp-muted);
}

@media screen and (max-width: 900px) {
    .myp-steps { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
    .myp-step:nth-child(2n)::after { display: none; }
}

@media screen and (max-width: 560px) {
    .myp-steps { grid-template-columns: 1fr; gap: 30px; }
    .myp-step:not(:last-child)::after { display: none; }
    .myp-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
    .myp-step-ord { grid-row: 1; font-size: 1.9rem; margin: 0; }
    .myp-step-icon { grid-row: 1; margin: 0; width: 40px; height: 40px; }
    .myp-step-title, .myp-step-text { grid-column: 1 / -1; }
    .myp-step-title { margin-top: 14px; }
}

/* ---------------------------------------- 6) Görselsiz kart (gradyan zemin) */
.myp-slide--art { background: linear-gradient(158deg, var(--myp-c1), var(--myp-c2)); }

/* Görselsiz kartta gradyan zaten koyu; karartma katmanı yalnızca ALT yarıda
   çalışsın ki renk üstte canlı kalsın. */
.myp-slide--art::before {
    background: linear-gradient(180deg, transparent 8%, rgba(8, 8, 11, .42) 48%, rgba(8, 8, 11, .9) 100%);
}

/* İnce doku: rengi düz plastik gibi bırakmaz. */
.myp-slide--art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 78% 14%, rgba(255, 255, 255, .16), transparent 44%),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: auto, 26px 26px, 26px 26px;
    opacity: .5;
}

/* Program adının baş harfleri — dev, saydam tipografik damga. */
.myp-slide-mono {
    position: absolute;
    top: 44px;
    left: 20px;
    z-index: -1;
    font-family: var(--myp-font-display);
    font-size: 7.4rem;
    font-weight: 600;
    line-height: .82;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .13);
    pointer-events: none;
    user-select: none;
}

/* ------------------------------------------------- 7) İletişim bloğu (SSS altı) */
.myp-contact {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--myp-s6);
    max-width: 900px;
    margin: 72px auto 0;
    padding: 30px 34px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 62%),
        var(--myp-surface);
    border: 1px solid var(--myp-border);
    box-shadow: var(--myp-shadow-soft);
}

.myp-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(520px 220px at 8% 0%, rgba(91, 157, 255, .14), transparent 66%);
}

.myp-contact > * { position: relative; }

.myp-contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Zemin ve çerçeve eski MAVİ paletten kalmıştı; içindeki ikon turuncu
       olduğu için kutu ikonuna yabancı duruyordu. */
    background: rgba(243, 122, 82, .12);
    border: 1px solid rgba(243, 122, 82, .3);
    color: var(--myp-accent);
    flex-shrink: 0;
}

.myp-contact-icon svg { width: 22px; height: 22px; stroke-width: 1.7; }

.myp-contact-title {
    font-family: var(--myp-font);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--myp-text);
    letter-spacing: -.005em;
}

.myp-contact-text {
    margin-top: 5px;
    font-size: .93rem;
    line-height: 1.62;
    color: var(--myp-muted);
}

@media screen and (max-width: 700px) {
    .myp-contact {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--myp-s4);
        padding: 26px 22px;
        margin-top: 52px;
    }
    .myp-contact-icon { margin: 0 auto; }
    .myp-contact .myp-btn { width: 100%; }
}

/* ==========================================================================
   VİTRİN 4.3 — Yapışkanlık, tipografi kırpması ve ortalı adımlar
   ========================================================================== */

/* ------------------------------------------- 1) position:sticky ONARIMI
   main.css'te `body{overflow-x:hidden}` var. `hidden` gövdeyi bir kaydırma
   kabına çevirir ve içindeki `position:sticky` öğeler VIEWPORT'a değil bu kaba
   göre davranır — menü bu yüzden yapışmıyordu.
   `clip` aynı taşma korumasını sağlar ama kaydırma kabı OLUŞTURMAZ.
   :has() ile yalnızca bu menünün bulunduğu sayfalara uygulanır; sitenin geri
   kalanı etkilenmez. Destelemeyen tarayıcıda menü eskisi gibi akar (bozulmaz). */
body:has(.myp-subnav) {
    overflow-x: clip;
}

/* ---------------------------------- 2) Gradyanlı başlıkta "g" kuyruğu kırpması
   `background-clip: text` boyamayı içerik kutusuyla sınırlar; 1.08 satır
   yüksekliğinde alt uzantılar (g, ğ, y, ş) kutunun dışında kalıp kesiliyordu.
   Satır yüksekliği ve alt dolgu, iniş çizgisine yer açar. */
.myp .myp-hero-brand {
    line-height: 1.18;
    padding-bottom: .14em;
}

/* ------------------------------------------------- 3) Alt menü: daha ferah */
.myp-subnav-pill { gap: 10px; padding: 8px 8px 8px 14px; }
.myp-subnav-link { padding: 9px 18px; }

@media screen and (max-width: 560px) {
    .myp-subnav-pill { gap: 6px; padding: 6px 6px 6px 10px; }
    .myp-subnav-link { padding: 8px 13px; }
}

/* --------------------------------------------- 6) Adımlar: ortalı ve büyük */
.myp-steps { text-align: center; }

.myp-step-ord {
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, .3);
    margin-bottom: 12px;
}

.myp-step-icon { margin-left: auto; margin-right: auto; }

/* Bağlantı hattı artık ortalanmış ikonların iki yanından geçer. */
.myp-step:not(:last-child)::after {
    top: calc(3.6rem + 12px + 4px + var(--myp-step-icon) / 2);
    left: calc(50% + var(--myp-step-icon) / 2 + 14px);
    right: calc(-50% + var(--myp-step-icon) / 2 + 14px);
}

@media screen and (max-width: 900px) {
    .myp-step:nth-child(2n)::after { display: none; }
}

@media screen and (max-width: 560px) {
    /* Dar ekranda ızgara yerine dikey akış; ortalama korunur. */
    .myp-step { display: block; }
    .myp-step-ord { font-size: 2.6rem; margin-bottom: 10px; }
    .myp-step-icon { margin-bottom: 16px; }
    .myp-step-title { margin-top: 0; }
}

/* ==========================================================================
   VİTRİN 4.4 — Adım ikonları, sıra numarası ve bölüm geçişleri
   ========================================================================== */

/* ---------------------------------------------- 1) Sıra numarası (1–4)
   Serif rakamlar adım göstergesi olarak zayıf kalıyordu; geometrik sans
   daha net okunuyor. Ton da belirgin biçimde açıldı. */
.myp-steps .myp-step-ord {
    font-family: var(--myp-font);
    font-weight: 800;
    font-size: 2.1rem;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 18px;
}

/* --------------------------------------- 2) Adım ikonu: iki katı + turkuaz */
.myp-steps { --myp-step-icon: 92px; }

.myp-step-icon {
    border-radius: 26px;
    background: linear-gradient(150deg, #08171b 0%, var(--myp-accent-deep) 42%, var(--myp-accent) 100%);
    border: 1px solid rgba(243, 122, 82, .38);
    color: #eafffd;
    margin-bottom: 22px;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(243, 122, 82, .1) inset,
        0 -10px 26px rgba(243, 122, 82, .16) inset;
}

.myp-step-icon svg { width: 40px; height: 40px; stroke-width: 1.5; }

/* Bağlantı hattı da turkuaza döner (ikonla aynı aile). */
.myp-step:not(:last-child)::after {
    top: calc(2.1rem + 18px + 4px + var(--myp-step-icon) / 2);
    background: linear-gradient(90deg, rgba(243, 122, 82, .55), rgba(243, 122, 82, .07));
}

@media screen and (max-width: 900px) {
    .myp-steps { --myp-step-icon: 82px; }
    .myp-step-icon svg { width: 36px; height: 36px; }
}

@media screen and (max-width: 560px) {
    .myp-steps { --myp-step-icon: 74px; }
    .myp-step-icon { border-radius: 22px; }
    .myp-step-icon svg { width: 32px; height: 32px; }
    .myp-steps .myp-step-ord { font-size: 1.7rem; margin-bottom: 12px; }
}

/* ------------------------------------------------- 3) Bölüm geçişleri
   Önceki ışıma (%13 opaklık) neredeyse görünmüyordu ve bölümlerin nerede
   başlayıp bittiği okunmuyordu. Işıma güçlendirildi, üstte ve altta
   yumuşak bir renk sızması eklendi. */
.myp-section--glow::before {
    background:
        radial-gradient(900px 420px at 16% -14%, rgba(91, 157, 255, .3), transparent 64%),
        radial-gradient(820px 400px at 86% -8%, rgba(163, 150, 255, .24), transparent 62%),
        radial-gradient(760px 340px at 50% 112%, rgba(243, 122, 82, .13), transparent 66%);
}

/* Alternatif zeminli bölümlerde de aynı derinlik olsun. */
.myp-section--alt {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, transparent 22%),
        var(--myp-bg-soft);
}

/* Bölüm ayracı: ince hattı belirginleştir ve marka rengiyle renklendir. */
.myp-section--seam::after {
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 6%,
        rgba(91, 157, 255, .28) 30%,
        rgba(243, 122, 82, .3) 62%,
        transparent 94%);
}

/* ==========================================================================
   VİTRİN 4.5 — Adım ikonu: düz yüzey, yalnızca gradyan kenarlık
   --------------------------------------------------------------------------
   Önceki halde kutunun İÇİ gradyan doluydu, üstüne iki iç gölge ve büyük bir
   dış gölge bindiriliyordu: kabartma/3B görünüyordu. Artık iç yüzey tamamen
   saydam (bölümün ışıması içeriden geçer), gradyan YALNIZCA kenarlıkta.
   ========================================================================== */

.myp-step-icon {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--myp-accent);
    border-radius: 24px;
}

/* Gradyan kenarlık: iki maske katmanı XOR'lanır; yalnızca `padding` kadar
   kalınlıktaki çerçeve boyanır, iç bölge saydam kalır. */
.myp-step-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(145deg,
        var(--myp-accent) 0%,
        rgba(243, 122, 82, .55) 38%,
        rgba(255, 255, 255, .14) 72%,
        rgba(243, 122, 82, .3) 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;
}

/* Maske desteklemeyen tarayıcıda en azından düz bir kenarlık görünsün. */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .myp-step-icon { border: 1.5px solid rgba(243, 122, 82, .45); }
    .myp-step-icon::before { content: none; }
}

.myp-step-icon svg { position: relative; }

@media screen and (max-width: 560px) {
    .myp-step-icon { border-radius: 20px; }
}

/* ==========================================================================
   VİTRİN 4.6 — Sıra numarası ile ikonun bütünleşmesi
   --------------------------------------------------------------------------
   Rakam artık ikonun ÜSTÜNE biner: negatif alt boşlukla ikon yukarı çekilir,
   rakamın alt kısmı ikonun üst %25'ini örter. İkisi tek bir işaret gibi okunur.
   Bağlantı hattının dikey konumu da aynı değişkenlerden türetilir; ölçüler
   değiştiğinde hat kendiliğinden hizada kalır.
   ========================================================================== */

.myp-steps {
    --myp-step-ord: 3.4rem;                                  /* rakam boyutu   */
    --myp-step-overlap: calc(var(--myp-step-icon) * .25);    /* örtüşme payı   */
}

.myp-steps .myp-step-ord {
    position: relative;
    z-index: 2;
    font-size: var(--myp-step-ord);
    line-height: 1;
    /* Bir ton daha açık. */
    color: rgba(255, 255, 255, .8);
    margin-bottom: calc(var(--myp-step-overlap) * -1);
}

.myp-step-icon { z-index: 1; }

/* top = üst dolgu + rakam yüksekliği − örtüşme + ikonun yarısı */
.myp-step:not(:last-child)::after {
    top: calc(4px + var(--myp-step-ord) - var(--myp-step-overlap) + var(--myp-step-icon) / 2);
}

@media screen and (max-width: 900px) {
    .myp-steps { --myp-step-ord: 3rem; }
}

@media screen and (max-width: 560px) {
    .myp-steps { --myp-step-ord: 2.6rem; }
    .myp-steps .myp-step-ord { margin-bottom: calc(var(--myp-step-overlap) * -1); }
}

/* ==========================================================================
   VİTRİN 4.7 — Rozet ikonu ve sıra numarası rengi
   ========================================================================== */

/* -------------------------------------------- 2) Lansman rozeti ikonu büyütüldü */
.myp-firstbadge svg { width: 26px; height: 26px; }

@media screen and (max-width: 560px) {
    .myp-firstbadge svg { width: 22px; height: 22px; }
}

/* --------------------------- 3) Sıra numarası: ikonun turkuaz gradyan ailesi
   Birebir "siyahtan turkuaza" bir geçiş, neredeyse siyah zeminde rakamın üst
   yarısını görünmez kılardı. Bu yüzden ikon kenarlığının İZLEDİĞİ yön
   korunur (parlak turkuazdan sönük turkuaza) — aynı aile, tam okunur. */
.myp-steps .myp-step-ord {
    background: linear-gradient(155deg,
        #ffbe9c 0%,
        var(--myp-accent) 42%,
        rgba(243, 122, 82, .5) 78%,
        rgba(243, 122, 82, .28) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    /* background-clip:text ile boyama içerik kutusuyla sınırlı; rakamlarda alt
       uzantı yok ama üst kesime karşı küçük bir pay bırakılır. */
    padding-bottom: .04em;
}

/* ==========================================================================
   VİTRİN 4.8 — Kahraman tipografisi ve neon ikon ailesi
   ========================================================================== */

/* ---------------------------------------------------- 1/2) Kahraman satırları
   NOT: `.myp .myp-hero-title em` (0,2,1) seçicisi daha önce tanımlı; marka
   satırının italiğini kapatmak için özgüllüğü (0,3,0) yapmak gerekiyor. */
/* Ağırlık 500'dü ve marka satırının hemen üstünde fazla dolu duruyordu.
   Playfair'in en ince kesimi 400; `template.php` içindeki yazı tipi
   isteğine bu ağırlık eklendi (yoksa tarayıcı 500'e düşer ve hiçbir şey
   değişmez). Harf aralığı da hafifçe açıldı, ince kesim böyle daha rahat
   nefes alıyor. */
.myp .myp-hero-claim {
    font-size: clamp(1.4rem, 2.7vw, 2.1rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: .004em;
}

.myp .myp-hero-title .myp-hero-brand {
    font-style: normal;
    font-size: clamp(2.3rem, 5.1vw, 4rem);
}

/* ------------------------------------------------------- 3) Neon ikon ailesi
   Referans görselindeki ışıklı çizgi dili: gradyan konturlu, dolgusuz,
   çevresine hafif ışıma bırakan ince çizim. Renkler markadan alınır
   (turkuaz = süreç, turuncu = kazanım); gradyanlar sayfada BİR KEZ
   tanımlanır ve tüm ikonlar `url(#…)` ile aynı tanıma bağlanır. */
.myp-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.myp-icon {
    fill: none;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Neon ışıma KALDIRILDI. İki katlı `drop-shadow` ince konturun çevresine
   bulanık bir hâle bırakıyor, çizgi kendi ışığının içinde eriyor ve ikon
   kabartma/3B gibi okunuyordu — 24 ızgarada 2,5px'lik bir çizgi için fazla.
   Renk de degradeden düz tona çekildi: anasayfadaki akış ikonlarının rengi
   (#fda871). Degrade tek bir ikonun içinde ton değiştirdiği için küçük
   ölçekte kenarları yumuşak gösteriyordu.
   (Geri almak için: `stroke: url(#mypGradTeal)` ve filtre satırları.) */
.myp-icon--teal { stroke: #fda871; }
/* Son adım pembe — anasayfadaki son düğümle ve rozetiyle aynı renk. */
.myp-step:last-child .myp-icon--teal { stroke: #f4589a; }

/* Aynı gerekçe (bkz. `.myp-icon--teal`): ışıma yok, düz ton. Buradaki hale
   ayrıca MAVİ'ydi (rgba(91,157,255)) — eski palet kalıntısı, turuncu çizginin
   çevresinde mavi bir duman bırakıyordu. */
.myp-icon--warm { stroke: #fda871; }

/* Kazanım şeridindeki ikonlar artık neon; boyut da bir tık büyütüldü. */
.myp-iconrow-item .myp-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
}

/* Hover geri bildirimi ışımayla değil, rengin açılmasıyla veriliyor —
   anasayfadaki akışın üzerinden ışık geçerken yaptığının aynısı. */
.myp-iconrow-item .myp-icon--warm { transition: stroke .22s ease; }
.myp-iconrow-item:hover .myp-icon--warm { stroke: #fff3e6; }

.myp-step-icon .myp-icon { width: 40px; height: 40px; }

@media screen and (max-width: 560px) {
    .myp-iconrow-item .myp-icon { width: 36px; height: 36px; }
}

/* ==========================================================================
   VİTRİN 4.9 — Sıra numarası: siyah gövde, ince gradyan kontur
   --------------------------------------------------------------------------
   CSS'te `-webkit-text-stroke` yalnızca DÜZ renk kabul eder; gradyan kontur
   için iki katman gerekir:
     ::before  → rakamın konturlu kopyası, gradyan `background-clip: text` ile
                 boyanır (dolgu saydam olduğu için gradyan tüm glif + kontur
                 alanında görünür), negatif z-index ile arkada durur.
     Öğenin kendisi → üstte, düz siyah dolgu; ::before'un iç kısmını örter.
   Geriye yalnızca ince gradyan halka kalır.
   ========================================================================== */

.myp-steps .myp-step-ord {
    position: relative;
    /* Önceki gradyan DOLGU iptal ediliyor. */
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    color: #07070a;
    -webkit-text-fill-color: #07070a;
    padding-bottom: 0;
}

.myp-steps .myp-step-ord::before {
    content: attr(data-ord);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    -webkit-text-stroke: 1.4px transparent;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(168deg,
        #0a0a0e 0%,
        #25100a 38%,
        rgba(243, 122, 82, .75) 78%,
        var(--myp-accent) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    pointer-events: none;
}

/* text-stroke desteklenmiyorsa rakam düz siyah kalır (kontur çizilmez);
   okunurluk için bir tık açılır. */
@supports not (-webkit-text-stroke: 1px black) {
    .myp-steps .myp-step-ord {
        color: #1b1b22;
        -webkit-text-fill-color: #1b1b22;
    }
    .myp-steps .myp-step-ord::before { content: none; }
}

@media screen and (max-width: 560px) {
    .myp-steps .myp-step-ord::before { -webkit-text-stroke-width: 1.1px; }
}

/* ==========================================================================
   VİTRİN 5.0 — Kazanım ikonları büyütüldü
   --------------------------------------------------------------------------
   Neon çizim ince konturlu olduğu için 42px'te etiketlerin yanında zayıf
   kalıyordu; ölçek büyütülürken kontur kalınlığı da orantılı düşürüldü ki
   çizgi kalınlaşıp kabalaşmasın.
   ========================================================================== */

.myp-iconrow-item .myp-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    /* Ekrandaki çizgi kalınlığı iki ikon ailesinde eşit olsun diye ölçüldü:
       58px'e büyütülen 24 ızgarada ölçek 2,42 — 1,15 kontur ekranda 2,78px
       ediyordu, süreç ikonlarında (40px, 1,5) 2,5px. 1,05 ikisini de 2,5px'e
       getiriyor; anasayfadaki akış ikonları da bu ağırlıkta. */
    stroke-width: 1.05;
}

@media screen and (max-width: 900px) {
    .myp-iconrow-item .myp-icon { width: 52px; height: 52px; }
}

@media screen and (max-width: 560px) {
    .myp-iconrow-item .myp-icon { width: 46px; height: 46px; margin-bottom: 16px; }
}

/* ==========================================================================
   VİTRİN 5.1 — Kazanım etiketleri
   --------------------------------------------------------------------------
   Gövde yazı tipi (Karla) ve soluk gri (--myp-text-soft) bu kısa etiketlerde
   "yardımcı metin" gibi duruyordu. Etiketler artık arayüz/başlık ailesinde
   (Montserrat), tam beyaza yakın ve hafif harf aralıklı: ikonun yanında
   kendi ağırlığı olan bir ifade gibi okunuyor.
   ========================================================================== */

.myp-iconrow-label {
    font-family: var(--myp-font);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .012em;
    color: #fbfbfd;
    max-width: 15ch;
    margin: 0 auto;
}

@media screen and (max-width: 560px) {
    .myp-iconrow-label { font-size: .9rem; max-width: 17ch; }
}

/* ==========================================================================
   VİTRİN 5.2 — Program kartı hover: kırpılma giderildi
   --------------------------------------------------------------------------
   SORUN: `.myp-slider-track` yatay kaydırma için `overflow-x: auto` kullanıyor.
   CSS'te bir eksen `visible` dışına çıkarıldığında diğer eksen de otomatik
   olarak `auto`ya döner; yani DİKEY taşma da kırpılıyordu. Kart hover'da
   `translateY(-5px)` ile yukarı kalkınca üst kenarı kesiliyordu.
   ÇÖZÜM: Yükselme hareketi kaldırıldı (butonlarda da aynı tercih yapılmıştı)
   ve şeride dikey pay verildi; böylece hover gölgesi de kırpılmıyor.
   ========================================================================== */

.myp-slider-track {
    padding-top: 10px;
    padding-bottom: 14px;
}

.myp-slide {
    transition:
        border-color .3s var(--myp-ease),
        box-shadow .3s var(--myp-ease);
}

/* Konum DEĞİŞMEZ; geri bildirim kenarlık + yumuşak ışıma ile verilir. */
.myp-slide:hover {
    transform: none;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   VİTRİN 5.3 — Sabit üst menü payı (tüm mikro sayfaları)
   --------------------------------------------------------------------------
   Site şablonundaki `.main-navigation-light` SABİT konumlu; sayfa içeriği
   onun altından başlıyor ve ilk blok menünün arkasında kalıyordu. Ölçülen
   yığın yükseklikleri:
       >=769px : üst menü 80px
        768px  : üst menü 67px
       <=767px : üst menü 67px + mobil alt şerit 64px = 131px
   Pay tek bir değişkende toplanır; sayfa başındaki bileşenler kendi üst
   dolgularına BU PAYI EKLER (üzerine yazmaz), böylece her bileşenin kendi
   dikey ritmi korunur.
   ========================================================================== */

.myp { --myp-header-offset: 80px; }

@media screen and (max-width: 768px) { .myp { --myp-header-offset: 67px; } }
@media screen and (max-width: 767px) { .myp { --myp-header-offset: 131px; } }

/* Katalog / kurumsal kahramanı */
.myp-hero { padding-top: calc(var(--myp-header-offset) + 40px); }

/* Program detayı ve sertifika doğrulama başlığı */
.myp-detail-hero { padding-top: calc(var(--myp-header-offset) + 40px); }

/* Öğrenci paneli başlıkları (11 sayfa) */
.myp-dash-head { padding-top: calc(var(--myp-header-offset) + 28px); }

/* Doğrudan bölümle açılan sayfalar: sepet, ödeme formu, sonuç */
.myp > .myp-section:first-child { padding-top: calc(var(--myp-header-offset) + 44px); }

/* Ders oynatıcı tam yükseklik çalışır; yalnızca menü payı kadar iner. */
.myp > .myp-player:first-child { padding-top: var(--myp-header-offset); }

/* ==========================================================================
   VİTRİN 6.0 — Süreç şeridi: anasayfadaki yol haritası dili
   --------------------------------------------------------------------------
   Anasayfadaki "BAUGO Nedir?" akışı (app/Views/partials/baugo_flow.php) üç
   imzayla okunuyor:
       1) koyu DAİRE tabla + turuncu halka,
       2) tablanın köşesine oturan numara ROZETİ,
       3) adımları birbirine bağlayan, kayarken çizilen degrade YOL.
   Süreç şeridi bu üç imzayı devralıyor. Önceki hâlde tabla yuvarlatılmış
   kareydi, sıra numarası tablanın üstünde duran dev bir konturlu rakamdı ve
   bağlantı düz bir saç teliydi.

   Yol DALGALI ama tabla merkezleri AYNI hizada: anasayfadaki gibi zikzak
   yapılsaydı dört sütunun başlık ve paragrafları birbirinden kayardı —
   orada düğümün altında yalnızca tek satırlık bir ad var, burada paragraf.
   ========================================================================== */

/* Tabla daireye döner; gradyan halka `border-radius: inherit` ile onu izler
   (bkz. VİTRİN 4.5, `.myp-step-icon::before`). */
.myp-step-icon { border-radius: 50%; }

/* Dev konturlu rakam kaldırıldı; sırayı artık rozet taşıyor. Kural, kalan
   `.myp-step-ord` biçimlendirmesini de etkisiz bırakır. */
.myp-steps .myp-step-ord { display: none; }

/* --- Numara rozeti ------------------------------------------------------- */
.myp-step-rozet {
    position: absolute;
    /* Anasayfadaki oranın aynısı: rozet çapı tablanın %33'ü ve merkezi 45°'de
       halkanın üstünde (orada disk r=38, rozet r=13, merkez uzaklığı 38). */
    top: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Anasayfadaki rozetle aynı: dolu turuncu gövde, neredeyse siyah rakam. */
    background: var(--myp-accent);
    color: #1a0b06;
    font-family: var(--myp-font);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    /* Bölümün ışıması rozetin altından geçmesin diye ince bir ayırıcı. */
    box-shadow: 0 0 0 3px #0a0a0e;
}
/* Son adım pembeye döner — anasayfadaki son düğümün rengi. Yolculuğun bittiği
   yer renkle de işaretleniyor. */
.myp-step:last-child .myp-step-rozet { background: #ec387d; color: #26060f; }

/* --- Adımları bağlayan dalga --------------------------------------------- */
.myp-step-yol {
    position: absolute;
    /* Dikey merkez = tabla merkezi. Tabla adımın en üstünde (padding-top 4px),
       dalga da 24px yüksekliğinde olduğu için yarısı kadar yukarı çekilir. */
    top: calc(4px + var(--myp-step-icon) / 2 - 12px);
    left: calc(50% + var(--myp-step-icon) / 2 + 10px);
    /* Sondaki `- 30px` ızgara boşluğudur (`.myp-steps { gap: 30px }`). O terim
       olmadan dalga sonraki tablaya 40px uzakta bitiyor, baştaki 10px'lik payla
       simetrisi bozuluyordu (ölçüldü: 10 / 40). */
    right: calc(-50% + var(--myp-step-icon) / 2 + 10px - 30px);
    height: 24px;
    overflow: visible;
    /* Tablaların ve rozetin altında kalır. */
    z-index: 0;
    pointer-events: none;
}
/* Sarmalayıcı bir `span`: `svg` yerine öğeye doğrudan `left`/`right` verilseydi
   yerini bulmazdı — SVG yerine geçen (replaced) bir öğe ve mutlak konumda
   genişliğini `right`ten değil kendi içsel oranından alıyor (ölçülen: 158px
   yerine 100px). */
.myp-step-yol svg { display: block; width: 100%; height: 100%; overflow: visible; }
.myp-step-yol path {
    fill: none;
    stroke: url(#mypGradTeal);
    stroke-width: 2;
    stroke-linecap: round;
    /* Yol kayarken soldan sağa çizilir; `clip-path` ile açıldığı için
       `stroke-dasharray` hesabına gerek yok. */
}
.myp-step-yol { clip-path: inset(0 100% 0 0); transition: clip-path 1.05s cubic-bezier(.22, .61, .36, 1) .15s; }
.myp-step.is-visible .myp-step-yol { clip-path: inset(0 0 0 0); }

/* Eski düz saç teli artık gereksiz. */
.myp-step:not(:last-child)::after { content: none; }

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-step-yol { clip-path: inset(0 0 0 0); transition: none; }
}

@media screen and (max-width: 900px) {
    /* İki sütunlu ızgarada dalga satır sonunda boşluğa çıkıyor; sırayı zaten
       rozetler anlatıyor. */
    .myp-step-yol { display: none; }
    .myp-step-rozet { width: 28px; height: 28px; font-size: .78rem; }
}

@media screen and (max-width: 560px) {
    /* Dar ekranda eski katmanlar tablayı 40px'e sabitliyor, sonraki bir kural
       da içindeki çizimi 40px'e büyütüyordu: ikon tablayı tam dolduruyor,
       halka ile çizim birbirine değiyordu (rozet eklenince oran iyice
       bozuluyor). Üçlü oran masaüstündekiyle aynı hizaya çekildi. */
    .myp-step-icon { width: 64px; height: 64px; }
    .myp-step-icon .myp-icon { width: 30px; height: 30px; }
    .myp-step-rozet { width: 22px; height: 22px; font-size: .7rem; }
}

/* ==========================================================================
   VİTRİN 6.1 — Sayfadaki son stok ikonlar da el çizimine geçti
   --------------------------------------------------------------------------
   Belgelendirme ve SSS bölümlerindeki ikonlar Feather setinden geliyordu
   (çentik ×4, kalkan, artı ×10, konuşma balonu, zarf) — boş durum
   ikonlarıyla birlikte 20 adet. Hepsi 24 ızgarada, yuvarlak uçlu, sayfanın
   kendi ikon ailesine göre yeniden çizildi:
     çentik → daire içinde onay (anasayfadaki "Tamamla" düğümünün kuruluşu)
     kalkan → kazanım şeridindeki "Doğrulanabilir belge kaydı" ikonunun aynısı
   Çizim işaretlemede satır içi; `feather.replace()` bu sayfada artık
   değiştirecek bir şey bulmuyor.
   ========================================================================== */

/* Çentik daire kazandığı için 2,4'lük kontur ağırdı: 18px'lik bir dairede
   ekranda 1,8px'e denk geliyor ve halka tıknazlaşıyordu. */
.myp-cert-list li svg { stroke-width: 1.9; }

/* ============================================================================
   GÖMÜLÜ MOD (birleşik oynatıcı iframe'i)
   ----------------------------------------------------------------------------
   BaseMicroPublic::viewData ?gomulu=1'de body'ye .is-gomulu basar. Amaç:
   çerçevede YALNIZ etkileşim gövdesi kalsın — başlık, kırıntı, ölçüt şeridi
   ve gezinme dış oynatıcıda zaten var; tekrarları gizlenir. Marka rengi
   oynatıcıyla eşitlenir (micro mavi vurgusu burada turuncu-degradeye döner).
   ========================================================================== */
body.is-gomulu { background: #0b0c0c; }
body.is-gomulu .myp-dash-head,
body.is-gomulu .myp-sidebar,
body.is-gomulu .myp-sidebar-toggle,
body.is-gomulu .myp-player-nav,
body.is-gomulu .myp-breadcrumb,
body.is-gomulu .myp-player-body > .myp-section-title,
body.is-gomulu .myp-player-body > .myp-flex.myp-gap-sm,
body.is-gomulu .myp-criterion { display: none !important; }

/* Sayfa kabuğunun üst boşluğu ve tam-ekran yüksekliği çerçevede gereksiz:
   yükseklik içerikle eşitleniyor, üst boşluk dış panelde zaten var. */
body.is-gomulu .myp-player {
    display: block;
    padding-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
body.is-gomulu .myp,
body.is-gomulu .myp-player-main { min-height: 0 !important; height: auto !important; }
body.is-gomulu .myp { padding: 0; }
body.is-gomulu .myp-wrap { padding-left: 1.1rem; padding-right: 1.1rem; max-width: none; }
body.is-gomulu .myp-player-body { padding-top: 1.1rem; }
body.is-gomulu .myp-player-body > *:first-child { margin-top: 0 !important; }

/* Birincil eylem oynatıcının marka degradesine döner. */
body.is-gomulu .myp-btn--primary {
    background: linear-gradient(90deg, #fda871, #f37a52 52%, #ec387d) !important;
    border-color: transparent !important;
    color: #1a0b06 !important;
}
body.is-gomulu .myp-btn--primary:hover { filter: brightness(1.06); }

/* ==========================================================================
   YÖNETİM KABUĞU HİZALAMASI  (yalnızca .adm içinde)
   ==========================================================================

   Sorun: modül yönetim ekranları panelin kabuğunu (template_admin.php) ve
   RENK tokenlarını kullanıyordu ama BİÇİM dilini kullanmıyordu. admin-ui.css
   `.adm` üzerinde --myp-* → --adm-* köprüsünü kuruyor, dolayısıyla renkler
   zaten aynıydı; ayrışan şey ölçüler ve yüzey imzalarıydı:

     panel/kart   çerçeveli + DÜZ ayraç      → panelde çerçevesiz + KESİKLİ
     KPI etiketi  .72rem BÜYÜK HARF, turuncu → panelde 14px normal, nötr ikon
     KPI değeri   28px                       → panelde 32px
     tablo başlığı .78rem BÜYÜK HARF          → panelde 13px normal
     rozet        hap + çerçeve, BÜYÜK HARF  → panelde 6px köşe, çerçevesiz
     düğme        14/24px dolgu, serbest boy → panelde 40px (sm 32px) sabit
     girdi        dolu zemin                 → panelde saydam + ince çerçeve
     odak halkası MAVİ (sabit rgba)          → panelde amber
     boş durum    72px daire ikon            → panelde 40px düz ikon

   Bu blok tek tek bileşenleri panelin ölçülerine çeker. `.adm` kapsamı
   dışında (vitrin, öğrenci paneli, oynatıcı) HİÇBİR kural değişmez — bu
   yüzden her seçici .adm ile başlar. Blok dosyanın SONUNDA: aynı özgüllükteki
   modül kuralları yukarıda kaldığı için kaynak sırası burayı kazandırır.

   İlgili: YONETIM_PANELI.md §6 (renk kuralı) ve §2 (ekran iskeleti).
   ========================================================================== */

/* --- Kaçak mavi: köprülenmeyen sabit rgba(91,157,255) değerleri ---------- */
.adm {
    /* Odak/sürükleme halkası — panelin amber vurgusundan türer. */
    --myp-ring: rgba(253, 169, 45, .16);
    /* micro.css'in kendi gri ekseni panelin --adm-muted ekseninden ayrıydı. */
    --myp-label: var(--adm-muted);
    --myp-sub: var(--adm-muted);

    /*
     * --myp-admin-* ailesi yukarıda :root üzerinde --myp-* takma adı olarak
     * tanımlı. Özel değişken ikamesi BİLDİRİMİN yapıldığı öğede çözüldüğü
     * için, admin-ui.css'in `.adm` üzerindeki köprüsü bu dört değere HİÇ
     * ulaşmıyordu: panel ve KPI yüzeyleri modülün mor-siyahında (#191620)
     * kalıyor, panelin slate yüzeyiyle (#1C252E) yan yana durunca ton farkı
     * veriyordu. Köprü burada, kabuğun kendi kapsamında yeniden kuruluyor.
     */
    --myp-admin-bg: var(--adm-bg);
    --myp-admin-surface: var(--adm-surface);
    --myp-admin-surface-2: var(--adm-surface-2);
    --myp-admin-line: var(--adm-line);
    --myp-admin-line-strong: var(--adm-line-strong);
}

/* --- Panel → .adm-card biçimi ------------------------------------------- */
.adm .myp-panel {
    border: 0;
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-soft);
    margin-bottom: var(--adm-s4);
}

.adm .myp-panel-head {
    padding: var(--adm-s4) var(--adm-s5);
    /* Minimals imzası: ayraçlar kesikli. */
    border-bottom: 1px dashed var(--adm-line);
}

.adm .myp-panel-body { padding: var(--adm-s5); }
.adm .myp-panel-body--flush { padding: 0; }
.adm .myp-panel-body:has(> .myp-table-wrap) { padding: 0; }

.adm .myp .myp-panel-title,
.adm .myp h2.myp-panel-title,
.adm .myp h3.myp-panel-title {
    font-family: var(--adm-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--adm-text);
}

.adm .myp-panel-title .feather,
.adm .myp-panel-title svg { color: var(--adm-muted); }

/* --- KPI → .adm-stat biçimi --------------------------------------------- */
.adm .myp-kpi-grid { gap: var(--adm-s4); margin-bottom: var(--adm-s4); }

.adm .myp-kpi {
    border: 0;
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-soft);
    padding: var(--adm-s5);
    min-height: 0;
    gap: var(--adm-s2);
    transition: box-shadow .16s var(--adm-ease), transform .16s var(--adm-ease);
}

.adm .myp-kpi:hover {
    background: var(--adm-surface);
    box-shadow: var(--adm-shadow);
}

.adm a.myp-kpi:hover { transform: translateY(-2px); }

/* Etiket panelde bir "mikro başlık" değil, normal okunur satır. */
.adm .myp-kpi-label {
    margin-bottom: 0;
    font-family: var(--adm-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--adm-text);
}

/* Dekoratif ikon nötr: turuncu eyleme ve duruma ayrıldı (YONETIM_PANELI §6). */
.adm .myp-kpi-label svg { width: 18px; height: 18px; color: var(--adm-muted); opacity: 1; }

.adm .myp-kpi-value {
    margin-top: 0;
    font-family: var(--adm-font);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--adm-text);
}

.adm .myp-kpi-sub { margin-top: 0; font-size: 12.5px; line-height: 1.5; color: var(--adm-muted); }

/* --- Düğmeler → .adm-btn ölçüleri --------------------------------------- */
.adm .myp-btn {
    gap: var(--adm-s2);
    height: 40px;
    padding: 0 var(--adm-s4);
    border-radius: var(--adm-radius-sm);
    font-family: var(--adm-font);
    font-size: 14px;
    font-weight: 600;
    background: var(--adm-surface-2);
    color: var(--adm-text);
    transition: background .16s var(--adm-ease), border-color .16s var(--adm-ease),
                color .16s var(--adm-ease), box-shadow .16s var(--adm-ease);
}

.adm .myp-btn:hover { background: var(--adm-surface-3); color: var(--adm-text); }
.adm .myp-btn svg { width: 16px; height: 16px; }

.adm .myp-btn--sm { height: 32px; padding: 0 var(--adm-s3); font-size: 13px; }
.adm .myp-btn--sm svg { width: 14px; height: 14px; }
.adm .myp-btn--lg { height: 46px; padding: 0 var(--adm-s5); font-size: 15px; }

/* Birincil: DÜZ amber + hover'da marka gölgesi (Minimals contained). */
.adm .myp-btn--primary {
    background: var(--adm-accent);
    color: var(--adm-on-accent);
    border-color: transparent;
    box-shadow: none;
}

.adm .myp-btn--primary:hover {
    background: var(--adm-accent);
    color: var(--adm-on-accent);
    box-shadow: var(--adm-shadow-accent);
}

.adm .myp-btn--ghost { background: transparent; border-color: var(--adm-line-strong); color: var(--adm-text); }
.adm .myp-btn--ghost:hover { background: var(--adm-hover); border-color: var(--adm-muted); color: var(--adm-text); }

.adm .myp-btn--soft { background: var(--adm-surface-2); border-color: transparent; color: var(--adm-text); }
.adm .myp-btn--soft:hover { background: var(--adm-surface-3); color: var(--adm-text); }

.adm .myp-btn--danger { background: var(--adm-danger-soft); color: var(--adm-danger-light); border-color: transparent; }
.adm .myp-btn--danger:hover { background: var(--adm-danger); color: #fff; }

.adm .myp-btn:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

/* İkon düğmesi → tablo eylem düğmesiyle aynı: çerçevesiz, yumuşak zemin. */
.adm .myp-icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-2);
    color: var(--adm-text-soft);
    transition: background .16s var(--adm-ease), color .16s var(--adm-ease);
}

.adm .myp-icon-btn:hover { background: var(--adm-surface-3); color: var(--adm-text); }
.adm .myp-icon-btn svg { width: 15px; height: 15px; }
.adm .myp-icon-btn--danger:hover { background: var(--adm-danger); color: #fff; }
.adm .myp-icon-btn:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

/* --- Form alanları → .adm-field / .adm-input ---------------------------- */
.adm .myp-field { margin-bottom: var(--adm-s4); }
.adm .myp-field:last-child { margin-bottom: 0; }
.adm .myp-field-row { gap: var(--adm-s4); }

.adm .myp-label {
    font-family: var(--adm-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-text-soft);
    margin-bottom: 6px;
}

/* Zorunluluk yıldızı veri durumudur, marka değil (YONETIM_PANELI §6). */
.adm .myp-label .myp-req,
.adm .myp-req { color: var(--adm-danger); }

.adm .myp-input,
.adm .myp-select,
.adm .myp-textarea {
    min-height: 42px;
    padding: 9px var(--adm-s3);
    background: transparent;
    border: 1px solid var(--adm-line-strong);
    border-radius: var(--adm-radius-sm);
    font-family: var(--adm-font-body);
    font-size: 14.5px;
    transition: border-color .16s var(--adm-ease), background .16s var(--adm-ease);
}

.adm .myp-select { padding-right: 38px; }
.adm .myp-textarea { min-height: 110px; }

.adm .myp-input::placeholder,
.adm .myp-textarea::placeholder { color: var(--adm-muted); }

.adm .myp-input:focus,
.adm .myp-select:focus,
.adm .myp-textarea:focus {
    border-color: var(--adm-accent);
    background: transparent;
    /* Mavi halka (rgba(91,157,255,.13)) panelin tek amber odak dilinden
       ayrışıyordu. */
    box-shadow: 0 0 0 3px var(--myp-ring);
}

.adm .myp-help { font-size: 12px; color: var(--adm-muted); margin-top: 6px; }
.adm .myp-error { font-size: 12px; color: var(--adm-danger); margin-top: 6px; }

/* --- Rozet → .adm-badge ------------------------------------------------- */
.adm .myp-badge {
    gap: 5px;
    padding: 2px 8px;
    border: 0;
    border-radius: 6px;
    font-family: var(--adm-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.65;
    background: rgba(145, 158, 171, .16);
    color: var(--adm-text-soft);
}

.adm .myp-badge svg { width: 12px; height: 12px; stroke-width: 2.4; }
.adm .myp-badge--success { background: var(--adm-success-soft); color: var(--adm-success-light); }
.adm .myp-badge--warning { background: var(--adm-warning-soft); color: var(--adm-warning-light); }
.adm .myp-badge--danger  { background: var(--adm-danger-soft);  color: var(--adm-danger-light); }
.adm .myp-badge--info    { background: var(--adm-info-soft);    color: var(--adm-info-light); }
.adm .myp-badge--accent  { background: var(--adm-accent-soft);  color: var(--adm-accent-hover); border: 0; }
.adm .myp-badge--soft,
.adm .myp-badge--neutral { background: rgba(145, 158, 171, .16); color: var(--adm-text-soft); border: 0; }

/* Etiket hapı (filtre/ölçüt çipleri) — panelde çerçeve yerine yumuşak dolgu. */
.adm .myp-chip {
    border: 0;
    background: rgba(145, 158, 171, .16);
    color: var(--adm-text-soft);
    font-size: 12px;
}

.adm .myp-chip.is-selected {
    background: var(--adm-accent-soft);
    color: var(--adm-accent-hover);
    border: 0;
}

/* Çip TÜRLERİ anlam taşıyor (kural / kilit / pop-up); çerçeve kalkarken renk
   kodu kaybolmasın diye panelin yumuşak dolgu + açık uç metin çiftine
   çevriliyor — .adm-badge varyantlarıyla aynı davranış. */
.adm .myp-chip--rule { background: rgba(198, 132, 255, .16); color: var(--adm-violet); }
.adm .myp-chip--lock { background: var(--adm-warning-soft); color: var(--adm-warning-light); }
.adm .myp-chip--pop  { background: var(--adm-info-soft); color: var(--adm-info-light); }
.adm .myp-chip--prereq { background: var(--adm-surface-2); color: var(--adm-text); font-size: 12px; }

/* --- Tablo → .adm-table ------------------------------------------------- */
.adm .myp-table-wrap { border: 0; border-radius: 0; }

/*
 * Yönetim kabuğunda DİKEY İÇ KAYDIRMA YOK.
 *
 * `.myp-table-wrap` modülün kendi kaydırma kabı: `max-height: 70vh` +
 * `overflow: auto`. Panelde bu, sayfa kaydırmasının İÇİNDE ikinci bir
 * kaydırma üretiyordu — 1280×800'de 8 satırlık program listesi bile kabı
 * (560px) aşıyordu; kullanıcı önce sayfayı, sonra tabloyu kaydırmak zorunda
 * kalıyordu. Sınır kalkınca kap her zaman içeriği kadar uzuyor: dikey
 * kaydırma çubuğu HİÇ çıkmaz, tablo sayfayla birlikte akar.
 *
 * `overflow: auto` bilerek duruyor — kayıt yönetimi (10 sütun) ve ödev/sınav
 * listeleri (11 sütun) dar ekranda hâlâ yatay kaydırma istiyor. Panelin
 * kendisi `overflow: hidden` olduğu için kap kaldırılsaydı bu tablolar
 * kırpılır, sütunlara hiç ulaşılamazdı.
 *
 * Yapışkan başlık (`thead th { position: sticky }`) buna bağlıydı; artık
 * kaydıracak dikey yüzey olmadığı için başlık akışta kalıyor. Kural yerinde
 * bırakıldı: `--pin-first` tablolarında ilk sütunun yatay sabitlemesi aynı
 * bildirimden geliyor.
 */
.adm .myp-table-wrap { max-height: none; }

.adm .myp-table { font-size: 14px; }

/*
 * Panelde tabloya 620px'lik ALT SINIR dayatılmaz.
 *
 * `.myp-table { min-width: 620px }` vitrin/öğrenci ekranları için konmuştu.
 * Yönetim panelinde tablolar yarım genişlikte panellerin içinde de duruyor
 * (genel bakıştaki "Son 10 Kayıt" ve "En Çok Satan 5 Program" panelleri
 * 464px): orada 620px'lik sınır, içerik rahatça sığdığı hâlde 167px'lik
 * YAPAY bir yatay kaydırma üretiyordu. Sınır kalkınca tablo kabına uyar;
 * içerik gerçekten sığmıyorsa `overflow: auto` yine devrede.
 */
.adm .myp-table { min-width: 0; }


/* Panelin tablo başlığı BÜYÜK HARF değil: hiyerarşiyi ağırlık taşır. */
.adm .myp-table th {
    background: var(--adm-surface-2);
    font-family: var(--adm-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--adm-muted);
    padding: var(--adm-s4);
    border-bottom: 0;
}

/* Satır ayracı kesikli; hücre RENGİ bilinçli olarak burada bildirilmiyor —
   köprü zaten doğru tonu veriyor ve bir renk bildirimi .myp-text-accent /
   .myp-text-muted gibi yardımcı sınıfları (0,1,0) ezerdi. */
.adm .myp-table td {
    padding: var(--adm-s3) var(--adm-s4);
    border-bottom: 1px dashed var(--adm-line);
}

.adm .myp-table tbody tr:last-child td { border-bottom: 0; }
.adm .myp-table tbody tr:hover td { background: var(--adm-hover); }
/*
 * Kenar çubuğunun ŞERİDE indiği aralıkta (1024-1279) içerik 888px'e kadar
 * daralıyor. Panelin 16px'lik yatay hücre dolgusu 8-9 sütunlu tablolarda bu
 * genişlikte birkaç pikselle taşmaya yetiyordu (ölçme raporunda 6px, işlem
 * günlüğünde 3px) — ve birkaç piksel de olsa kaydırma çubuğu çıkıyor.
 * Dar aralıkta dolgu 12px'e iniyor; geniş ekranda panelin ölçüsü korunuyor.
 */
@media (max-width: 1279px) {
    .adm .myp-table th,
    .adm .myp-table td { padding-left: 12px; padding-right: 12px; }
}

.adm .myp-table tbody td strong { color: var(--adm-text); font-weight: 600; }

/*
 * Ad hücresi bağlantısı: modülde her satırda turuncuydu, panelde ise sakin
 * durup üzerine gelince amber oluyor (bkz. .adm-table__link). Turuncu bir
 * sütun boyunca tekrarlanınca "vurgu" olmaktan çıkıp dekorasyona dönüşüyor
 * ve sayfadaki gerçek birincil eylemi bastırıyor (YONETIM_PANELI §6).
 */
.adm .myp-table tbody td a.myp-text-accent {
    color: var(--adm-text);
    font-weight: 600;
    text-decoration: none;
}

.adm .myp-table tbody td a.myp-text-accent:hover {
    color: var(--adm-accent);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/*
 * Satır işlem düğmeleri panelin tablo diliyle aynı: 34px, ince çerçeveli,
 * buzlu zemin (bkz. admin-ui.css .adm-table__actions .adm-btn--icon). Sarma
 * kapalı — dört düğme iki satıra bölününce satır yüksekliği tabloda
 * dalgalanıyordu.
 */
.adm .myp-table-actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.adm .myp-table-actions .myp-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--adm-line-strong);
    background: var(--adm-surface-2);
    background: color-mix(in srgb, var(--adm-surface-2) 72%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--adm-text-soft);
}

.adm .myp-table-actions .myp-icon-btn svg { width: 16px; height: 16px; stroke-width: 2.25; }

.adm .myp-table-actions .myp-icon-btn:hover {
    border-color: var(--adm-muted);
    background: var(--adm-surface-3);
    color: var(--adm-text);
}

.adm .myp-table-actions .myp-icon-btn--danger:hover { border-color: var(--adm-danger); background: var(--adm-danger); color: #fff; }

/* --- Boş durum → .adm-empty --------------------------------------------- */
.adm .myp-empty { padding: var(--adm-s7) var(--adm-s4); color: var(--adm-muted); }

/* Panelde boş durum ikonu daire içinde değil: düz, ince çizgili ve sessiz. */
.adm .myp-empty-icon {
    width: auto;
    height: auto;
    margin: 0 auto var(--adm-s3);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.adm .myp-empty-icon svg {
    width: 40px;
    height: 40px;
    color: var(--adm-surface-3);
    stroke-width: 1.5;
}

.adm .myp-empty h3 { font-size: 15px; font-weight: 600; color: var(--adm-text-soft); margin-bottom: var(--adm-s1); }
.adm .myp-empty p { font-size: 13.5px; max-width: 44ch; color: var(--adm-muted); }
.adm .myp-empty .myp-btn { margin-top: var(--adm-s4); }

/* --- Uyarı kutusu → .adm-alert ------------------------------------------ */
.adm .myp-alert {
    gap: var(--adm-s3);
    padding: var(--adm-s3) var(--adm-s4);
    border: 0;
    border-radius: var(--adm-radius-sm);
    background: rgba(145, 158, 171, .12);
    font-size: 13.5px;
    color: var(--adm-text-soft);
    margin-bottom: var(--adm-s4);
}

.adm .myp-alert svg { width: 18px; height: 18px; }
.adm .myp-alert--success { background: var(--adm-success-soft); color: var(--adm-success-light); }
.adm .myp-alert--warning { background: var(--adm-warning-soft); color: var(--adm-warning-light); }
.adm .myp-alert--danger  { background: var(--adm-danger-soft);  color: var(--adm-danger-light); }
.adm .myp-alert--info    { background: var(--adm-info-soft);    color: var(--adm-info-light); }
.adm .myp-alert--success svg,
.adm .myp-alert--warning svg,
.adm .myp-alert--danger svg,
.adm .myp-alert--info svg { color: inherit; }

/* --- Alt gezinme ve sekmeler → .adm-tabs -------------------------------- */
/*
 * Modülde ÜÇ ayrı gezinme katmanı vardı: dolu turuncu hap şeridi (bölümler),
 * çerçeveli hap satırı (.myp-subnav) ve alt çizgili sekme satırı (.myp-tabs).
 * Panelin tek sekme dili var; alt gezinme de aynı dile çekildi, böylece
 * ekranda tek bir dolu turuncu yüzey (birincil eylem) kalıyor.
 */
/*
 * DİKKAT — .myp-subnav micro.css'te İKİ KEZ tanımlı: yönetim şeridi (yukarıda)
 * ve vitrinin ortada yüzen buzlu hap şeridi (aşağıda, ~4000. satır). İkincisi
 * daha SONRA geldiği için yönetim ekranlarında da o kazanıyordu:
 *   position: sticky; top: 84px; margin-top: -30px; pointer-events: none;
 * Vitrinde tıklamayı .myp-subnav-pill sarmalayıcısı geri açıyor; yönetim
 * markup'ında öyle bir sarmalayıcı YOK — yani /settings ve /finance altındaki
 * 10 ekranın alt gezinme bağlantıları hiç tıklanamıyordu (isabet testi
 * bağlantıyı değil, arkadaki .myp div'ini döndürüyordu). Aşağıdaki sıfırlama
 * hem biçimi panele hizalar hem de o kusuru kapatır.
 */
.adm .myp-subnav {
    position: static;
    z-index: auto;
    pointer-events: auto;
    /* Vitrin şeridi ortalanıyor; yönetimde sekme satırı sola yaslı. */
    justify-content: flex-start;
    padding: 0;
    margin-top: 0;
    gap: var(--adm-s4);
    border-bottom: 1px dashed var(--adm-line);
    margin-bottom: var(--adm-s5);
}

.adm .myp-subnav-link { pointer-events: auto; }

.adm .myp-subnav-link {
    padding: var(--adm-s3) var(--adm-s1);
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--adm-muted);
    font-family: var(--adm-font);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}

.adm .myp-subnav-link:hover { background: transparent; color: var(--adm-text); }

.adm .myp-subnav-link[aria-current="page"] {
    background: transparent;
    color: var(--adm-text);
    border-bottom-color: var(--adm-accent);
    box-shadow: none;
}

.adm .myp-tabs {
    gap: var(--adm-s4);
    border-bottom: 1px dashed var(--adm-line);
    margin-bottom: var(--adm-s5);
    flex-wrap: wrap;
    overflow-x: visible;
}

.adm .myp-tab {
    padding: var(--adm-s3) var(--adm-s1);
    font-family: var(--adm-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-muted);
}

.adm .myp-tab:hover { color: var(--adm-text); }
.adm .myp-tab.is-active { color: var(--adm-text); border-bottom-color: var(--adm-accent); }

/* --- Sayfalama ---------------------------------------------------------- */
.adm .myp-pagination { margin-top: var(--adm-s5); gap: var(--adm-s2); }

.adm .myp-page {
    min-width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--adm-radius-sm);
    background: transparent;
    color: var(--adm-text-soft);
    font-family: var(--adm-font);
    font-size: 13px;
    font-weight: 600;
}

.adm .myp-page:hover { background: var(--adm-hover); color: var(--adm-text); }

.adm .myp-page.is-active {
    background: var(--adm-accent-soft);
    color: var(--adm-accent-hover);
    border: 0;
}

/* --- Kip (modal) → .adm-modal ------------------------------------------- */
.adm .myp-modal-card {
    border: 0;
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow);
}

.adm .myp-modal-head {
    padding: var(--adm-s4) var(--adm-s5);
    border-bottom: 1px dashed var(--adm-line);
}

.adm .myp-modal-body { padding: var(--adm-s5); }

.adm .myp-modal-foot {
    padding: var(--adm-s4) var(--adm-s5);
    border-top: 1px dashed var(--adm-line);
    gap: var(--adm-s2);
}

.adm .myp-modal-close {
    border: 0;
    background: transparent;
    color: var(--adm-muted);
    border-radius: var(--adm-radius-sm);
}

.adm .myp-modal-close:hover { background: var(--adm-surface-2); color: var(--adm-text); }

/* --- İlerleme çubuğu → .adm-progress ------------------------------------ */
.adm .myp-progress { height: 8px; background: var(--adm-surface-3); }
.adm .myp-progress-bar { background: var(--adm-brand-gradient); }
.adm .myp-progress--success .myp-progress-bar { background: var(--adm-success); }

/* --- İçerik geliştiricideki kalan mavi sabitleri ------------------------- */
.adm .myp-builder-module.myp-drag-over,
.adm .myp-node-children.myp-drag-over,
.adm .myp-node-lessons.myp-drag-over { box-shadow: 0 0 0 3px var(--myp-ring); background: var(--adm-hover); }

.adm .myp-editor-area:focus { box-shadow: inset 0 0 0 2px var(--myp-ring); }

/* --- Ayraç -------------------------------------------------------------- */
.adm .myp-divider { background: none; border-top: 1px dashed var(--adm-line); height: 0; margin: var(--adm-s5) 0; }

/* ==========================================================================
   SSS — "kart" varyantı (v6.5)
   Sade ayraç listesi (`--plain`) yerine kullanılır: her soru kendi kartında,
   solunda numara rozeti ve açıkken vurgu rayı taşır. Açılış animasyonu
   `grid-template-rows: 0fr → 1fr` ile yapılır; bu yüzden yanıt gövdesi
   `display:none` DEĞİL, taşması gizlenmiş bir ızgara hücresidir (temel
   `.myp-faq-a` kuralı burada ezilir).
   ========================================================================== */
.myp-faq--cards {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.myp-faq--cards .myp-faq-item {
    position: relative;
    background: linear-gradient(180deg, var(--myp-surface) 0%, var(--myp-bg-soft) 100%);
    border: 1px solid var(--myp-border);
    border-radius: var(--myp-radius);
    overflow: hidden;
    transition: border-color .26s var(--myp-ease), box-shadow .26s var(--myp-ease), transform .26s var(--myp-ease);
}

/* Sol vurgu rayı: kapalıyken 0 genişlikte, açılınca yerine kayar. */
.myp-faq--cards .myp-faq-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    /* DİKKAT: `--myp-brand-*` bu sayfada micro-catalog.css tarafından
       turuncu/pembeye eziliyor. SSS'te istenen ton MAVİ, o yüzden ray ve
       rozet doğrudan vurgu mavisine bağlandı. */
    background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .25));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s var(--myp-ease);
}

.myp-faq--cards .myp-faq-item:hover {
    border-color: var(--myp-border-strong);
    transform: translateY(-1px);
}

.myp-faq--cards .myp-faq-item.is-open {
    border-color: var(--myp-border-strong);
    box-shadow: var(--myp-shadow-soft), 0 0 34px -14px rgba(255, 255, 255, .22);
    transform: none;
}

.myp-faq--cards .myp-faq-item.is-open::before { transform: scaleY(1); }

.myp-faq--cards .myp-faq-q {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--myp-s4);
    width: 100%;
    padding: var(--myp-s4) var(--myp-s5);
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--myp-font);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--myp-text);
    cursor: pointer;
    transition: color .2s var(--myp-ease);
}

.myp-faq--cards .myp-faq-q:hover { color: #fff; }

.myp-faq--cards .myp-faq-q:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7);
    outline-offset: -3px;
    border-radius: var(--myp-radius);
}

/* Numara rozeti — CSS sayacıyla, işaretlemede fazladan düğüm gerekmeden. */
.myp-faq--cards { counter-reset: myp-faq; }
.myp-faq--cards .myp-faq-item { counter-increment: myp-faq; }

.myp-faq--cards .myp-faq-q::before {
    content: counter(myp-faq, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--myp-font);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--myp-text-soft);
    transition: background .26s var(--myp-ease), color .26s var(--myp-ease), border-color .26s var(--myp-ease);
}

.myp-faq--cards .myp-faq-item.is-open .myp-faq-q::before {
    /* Dolu gradyan yerine şeffaf mavi parıltı: rozet zeminde kalır,
       çevresine yumuşak bir halka ve dış parlaklık yayar. */
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .05), 0 0 18px rgba(255, 255, 255, .12);
}

/* Artı/eksi düğmesi: dairenin içinde döner. */
.myp-faq--cards .myp-faq-q svg {
    width: 30px;
    height: 30px;
    padding: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--myp-border);
    color: var(--myp-muted);
    transition: transform .3s var(--myp-ease), color .26s var(--myp-ease), border-color .26s var(--myp-ease), background .26s var(--myp-ease);
}

.myp-faq--cards .myp-faq-item.is-open .myp-faq-q svg {
    transform: rotate(135deg);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .09);
}

/* Yanıt: yükseklik animasyonu için ızgara hücresi (display:none ezilir). */
.myp-faq--cards .myp-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    transition: grid-template-rows .32s var(--myp-ease);
}

.myp-faq--cards .myp-faq-item.is-open .myp-faq-a {
    /* `display` burada da yazılmalı: temel katmandaki
       `.myp-faq-item.is-open .myp-faq-a { display:block }` kuralı aynı
       özgüllükte ve daha önce geldiği için ızgarayı ezerdi. */
    display: grid;
    grid-template-rows: 1fr;
}

.myp-faq--cards .myp-faq-a > * { min-height: 0; }

/* Metin, sorunun rozetiyle hizalı kalsın diye rozet + boşluk kadar içeride. */
.myp-faq--cards .myp-faq-a-in {
    overflow: hidden;
    padding: 0 var(--myp-s5) 0 calc(var(--myp-s5) + 32px + var(--myp-s4));
    font-family: var(--myp-font-body);
    font-size: .94rem;
    line-height: 1.78;
    color: var(--myp-text-soft);
    opacity: 0;
    transition: opacity .26s var(--myp-ease), padding-bottom .32s var(--myp-ease);
}

.myp-faq--cards .myp-faq-item.is-open .myp-faq-a-in {
    padding-bottom: var(--myp-s5);
    opacity: 1;
}

@media screen and (max-width: 600px) {
    .myp-faq--cards .myp-faq-q { padding: var(--myp-s3) var(--myp-s4); gap: var(--myp-s3); font-size: .92rem; }
    .myp-faq--cards .myp-faq-q::before { width: 28px; height: 28px; font-size: .68rem; }
    .myp-faq--cards .myp-faq-q svg { width: 26px; height: 26px; }
    .myp-faq--cards .myp-faq-a-in { padding-left: var(--myp-s4); padding-right: var(--myp-s4); }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-faq--cards .myp-faq-item,
    .myp-faq--cards .myp-faq-item::before,
    .myp-faq--cards .myp-faq-q svg,
    .myp-faq--cards .myp-faq-a,
    .myp-faq--cards .myp-faq-a-in { transition: none; }
}

/* ==========================================================================
   SERTİFİKA VİTRİNİ v2 (micro.css v6.7)
   Sol yarım: koyu "sahne" üzerinde ışık alan AÇIK RENKLİ kâğıt belge.
   Belge, gerçek bir mikro yeterlilik sertifikasının alan düzenini taklit
   eder (antet, künye, gövde, veri şeridi, imza satırları, mühür, QR) ama
   TEMSİLİDİR — "Örnek" şeridi ve filigran bilinçli olarak durur.
   Eski `.myp-cert-doc` kuralları bozulmadan bırakıldı; yeni maket ayrı
   `.myp-doc` ad alanında.
   ========================================================================== */
.myp-cert--v2 {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    border-color: var(--myp-border);
    background: var(--myp-bg);
}

/* -- Sahne: sıcak krem zemin yerine ışık düşen koyu yüzey ---------------- */
.myp-cert--v2 .myp-cert-visual {
    position: relative;
    grid-template-rows: 1fr auto;
    gap: var(--myp-s4);
    padding: clamp(32px, 4.4vw, 62px);
    background:
        radial-gradient(90% 70% at 50% 12%, rgba(255, 255, 255, .10), transparent 62%),
        radial-gradient(120% 100% at 50% 120%, rgba(255, 255, 255, .05), transparent 55%),
        linear-gradient(160deg, #14121a 0%, #0b0a0e 100%);
    overflow: hidden;
}

/* Sahneye ince bir ızgara: belgenin "masada durduğu" hissini verir. */
.myp-cert--v2 .myp-cert-visual::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;
    mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 100%);
    pointer-events: none;
}

.myp-cert-note {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--myp-muted);
}

/* -- Kâğıt --------------------------------------------------------------- */
.myp-doc {
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1.414 / 1;      /* A4 yatay */
    padding: 1.9cqw;
    border-radius: 4px;
    /* Belge bir GÖRSEL gibi ölçeklenmeli: tüm iç ölçüler kabın genişliğine
       (cqw) bağlandı, böylece dar ekranda da oranlar bozulmaz. */
    container-type: inline-size;
    display: flex;               /* iç çerçeve kâğıdın tamamını kaplasın */
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 40%),
        linear-gradient(158deg, #fdfbf6 0%, #f6f1e7 52%, #efe8db 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 2px 3px rgba(0, 0, 0, .35),
        0 34px 70px -26px rgba(0, 0, 0, .85),
        0 0 0 1px rgba(0, 0, 0, .35);
    transform: rotate(-1.2deg);
    transition: transform .55s var(--myp-ease), box-shadow .55s var(--myp-ease);
    overflow: hidden;
    isolation: isolate;
}

/* Kâğıt dokusu: çok düşük opaklıkta yatay tarama çizgileri. */
.myp-doc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(90, 70, 40, .045) 0 1px, transparent 1px 3px);
    pointer-events: none;
    z-index: 3;
}

.myp-cert--v2:hover .myp-doc {
    transform: rotate(0deg) translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 2px 3px rgba(0, 0, 0, .35),
        0 46px 90px -28px rgba(0, 0, 0, .9),
        0 0 0 1px rgba(0, 0, 0, .35);
}

/* Köşe şeridi: belgenin temsili olduğunu ilk bakışta söyler. */
.myp-doc-ribbon {
    position: absolute;
    top: 2.8cqw;
    left: -7.2cqw;
    z-index: 4;
    width: 28cqw;
    padding: .9cqw 0;
    transform: rotate(-45deg);
    /* Şerit belgenin kendi paletinde: lacivert mürekkep. */
    background: linear-gradient(135deg, #1c4079, #14315e);
    color: #f6f1e7;
    font-family: var(--myp-font);
    font-size: 1.7cqw;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6);
}

.myp-doc-watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    transform: rotate(-19deg);
    font-family: var(--myp-font);
    font-size: 8cqw;
    font-weight: 800;
    letter-spacing: .3em;
    color: rgba(20, 49, 94, .07);
    white-space: nowrap;
    pointer-events: none;
}

/* İç çerçeve: klasik belgelerdeki çift cetvel. */
.myp-doc-frame {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 2.6cqw 4.4cqw;
    border: 1px solid rgba(20, 49, 94, .3);
    outline: 1px solid rgba(176, 141, 63, .45);
    outline-offset: 3px;
}

/* -- Antet -- */
.myp-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5cqw;
    padding-bottom: 2cqw;
    border-bottom: 1px solid rgba(20, 49, 94, .18);
}

/* Kilitli logo görselinin SAĞ yarısı (BAUGO) beyaz konturlu; açık kâğıtta
   kaybolduğu için yalnızca sol yarısı (lacivert BAU) gösterilir. */
.myp-doc-logo {
    display: block;
    width: 23cqw;
    overflow: hidden;
    flex-shrink: 0;
}

.myp-doc-logo img {
    display: block;
    width: 47cqw;          /* 23 / 0.49 — sol %49'luk BAU bölümü kadrajda */
    max-width: none;
    height: auto;
}

.myp-doc-head-meta { text-align: right; display: grid; gap: .6cqw; }

.myp-doc-kicker {
    font-family: var(--myp-font);
    font-size: 1.75cqw;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #14315e;
}

.myp-doc-serial {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5cqw;
    letter-spacing: .08em;
    color: rgba(20, 49, 94, .6);
}

/* -- Gövde -- */
.myp-doc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.2cqw 0;
}

.myp-doc-label {
    font-family: var(--myp-font);
    font-size: 1.5cqw;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(20, 49, 94, .55);
}

.myp-doc-person {
    margin-top: 1.5cqw;
    font-family: var(--myp-font-display);
    font-size: 5.2cqw;
    font-weight: 600;
    line-height: 1.2;
    color: #14315e;
}

/* Adın altındaki ince altın cetvel. */
.myp-doc-person::after {
    content: "";
    display: block;
    width: 20cqw;
    height: 1px;
    margin: 1.6cqw auto 0;
    background: linear-gradient(90deg, transparent, rgba(176, 141, 63, .85), transparent);
}

.myp-doc-text {
    max-width: 33ch;
    margin: 1.5cqw 0 0;
    font-family: var(--myp-font-body);
    font-size: 1.62cqw;
    line-height: 1.7;
    color: rgba(28, 32, 42, .72);
}

.myp-doc-name {
    margin-top: 1.5cqw;
    font-family: var(--myp-font);
    font-size: 3.3cqw;
    font-weight: 800;
    letter-spacing: -.005em;
    color: #0f1620;
}

/* -- Veri şeridi -- */
.myp-doc-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(20, 49, 94, .16);
    background: rgba(20, 49, 94, .04);
}

.myp-doc-field {
    display: grid;
    gap: .4cqw;
    padding: 1.4cqw .8cqw;
    text-align: center;
    border-right: 1px solid rgba(20, 49, 94, .12);
}

.myp-doc-field:last-child { border-right: 0; }

.myp-doc-field span {
    font-family: var(--myp-font);
    font-size: 1.32cqw;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(20, 49, 94, .55);
}

.myp-doc-field strong {
    font-family: var(--myp-font);
    font-size: 2.1cqw;
    font-weight: 800;
    color: #14315e;
}

/* -- Alt bölüm: imzalar, QR, mühür -- */
.myp-doc-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 3cqw;
    padding-top: 2cqw;
}

.myp-doc-sign { display: grid; justify-items: center; }

/* Temsili imza: el yazısını andıran italik serif. */
.myp-doc-sign-mark {
    font-family: var(--myp-font-display);
    font-style: italic;
    font-size: 2.7cqw;
    line-height: 1;
    color: rgba(20, 49, 94, .5);
    transform: rotate(-6deg);
    margin-bottom: .6cqw;
}

.myp-doc-sign-line {
    width: 100%;
    height: 1px;
    background: rgba(20, 49, 94, .35);
}

.myp-doc-sign-role {
    margin-top: .9cqw;
    font-family: var(--myp-font);
    font-size: 1.36cqw;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(20, 49, 94, .6);
}

.myp-doc-verify { display: grid; justify-items: center; gap: .9cqw; }

.myp-doc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.36cqw;
    letter-spacing: .05em;
    color: rgba(20, 49, 94, .65);
}

/* QR maketi: gerçek karekodların üç konum işaretini taklit eder. */
/* QR artık GERÇEK bir görsel (`<img>`, veri URI'si). Eskiden burada CSS
   degradelerinden örülmüş bir desen vardı: uzaktan QR'a benziyor ama
   okunmuyordu. Kutu ölçüsü ve beyaz sessiz alan aynı kaldı. */
.myp-doc-qr {
    display: block;
    width: 9cqw;
    height: 9cqw;
    padding: 3px;
    background: #fff;
    border: 1px solid rgba(20, 49, 94, .28);
    border-radius: 2px;
    object-fit: contain;
}

/* Kabartma mühür KALDIRILDI. Üzerindeki "Doğrulanabilir / Dijital Belge"
   ifadesi gerçek belgeden çıkarıldı (gereksiz bulundu); maket de gerçek
   belgeyi taklit ettiği için burada da durmamalı. Belgenin doğrulanabilirliği
   zaten QR ve doğrulama koduyla anlatılıyor. */

/* -- Sağ panel -- */
.myp-cert--v2 .myp-cert-panel {
    gap: var(--myp-s3);
    background: linear-gradient(180deg, #0a0a0e 0%, #0e0d13 100%);
}

.myp-cert--v2 .myp-cert-panel .myp-eyebrow {
    /* Panel bir flex sütunu; etiket varsayılan olarak tam genişliğe geriliyordu. */
    align-self: flex-start;
    width: fit-content;
}

/* Başlık tek satırda kalsın: ölçü, ekrandan (vw) değil PANEL genişliğinden
   (cqi) türetilir — 38 karakterlik başlık %5'lik oranda tek satıra sığıyor. */
.myp-cert--v2 .myp-cert-panel { container-type: inline-size; }

.myp-cert--v2 .myp-cert-title {
    font-size: clamp(1.25rem, 4.9cqi, 2.1rem);
    margin-bottom: var(--myp-s4);
}

@media screen and (min-width: 1024px) {
    .myp-cert--v2 .myp-cert-title { white-space: nowrap; }
}

/* Ana CTA, üst gezinmedeki "Panelim" hapıyla aynı dil: şeffaf mavi hap. */
.myp-cert--v2 .myp-cert-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 46px;
    padding: 0 1.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    font-family: var(--myp-font);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    transition: background .2s var(--myp-ease), border-color .2s var(--myp-ease), color .2s var(--myp-ease);
}

.myp-cert--v2 .myp-cert-cta:hover {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .13);
    color: #fff;
    filter: none;
}

.myp-cert--v2 .myp-cert-cta svg { width: 17px; height: 17px; flex: 0 0 auto; }

.myp-cert-lead {
    max-width: 46ch;
    margin: 0 0 var(--myp-s5);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--myp-text-soft);
}

/* Kazanımlar 2x2 ızgara: dört uzun paragraf yerine başlık + tek satır. */
.myp-cert--v2 .myp-cert-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--myp-s5) var(--myp-s5);
    margin-bottom: var(--myp-s6);
}

.myp-cert--v2 .myp-cert-list li {
    align-items: flex-start;
    gap: var(--myp-s3);
    padding: 0;
    border: 0;
    font-size: .88rem;
    line-height: 1.62;
    color: var(--myp-muted);
}

.myp-cert--v2 .myp-cert-list li strong {
    display: block;
    margin-bottom: 3px;
    font-family: var(--myp-font);
    font-size: .93rem;
    font-weight: 700;
    color: var(--myp-text);
}

@media screen and (max-width: 1279px) and (min-width: 1024px) {
    .myp-cert--v2 .myp-cert-list { grid-template-columns: 1fr; gap: var(--myp-s4); }
}

@media screen and (max-width: 560px) {
    .myp-cert--v2 .myp-cert-list { grid-template-columns: 1fr; gap: var(--myp-s4); }
}

.myp-cert-tick {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
}

.myp-cert-tick svg { width: 13px; height: 13px; }

@media screen and (max-width: 1023px) {
    .myp-cert--v2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .myp-doc, .myp-cert--v2:hover .myp-doc { transition: none; transform: rotate(-1.2deg); }
}

/* ==========================================================================
   MİKRO YETERLİLİK BELGESİ — ekrandaki önizleme çerçevesi
   --------------------------------------------------------------------------
   Belge (sertifika + belge eki) tek PDF olarak üretiliyor; `<img>` ile
   gösterilemez. Onun yerine PDF ile AYNI şablonun HTML hâli bir `iframe`
   içinde basılıyor ve `transform: scale` ile küçültülüyor.

   Neden `scale`: belge 297mm (≈1123px) genişliğinde kurgulanmış. `iframe`in
   genişliğini daraltmak metni yeniden akıtır ve önizleme, indirilecek
   belgeyle AYNI görünmez. Ölçekleme yerleşimi bozmadan küçültüyor.

   `--myp-belge-olcek` kap genişliğine göre değil, sabit: kartlar ve doğrulama
   sayfası iki farklı ölçek kullanıyor.
   ========================================================================== */
.myp-belge-cerceve {
    display: block;
    width: 1123px;              /* 297mm @96dpi */
    height: 794px;              /* 210mm @96dpi */
    border: 0;
    transform: scale(var(--myp-belge-olcek, .3));
    transform-origin: top left;
    pointer-events: none;       /* kartta tıklama kartın kendisine gitsin */
}
.myp-belge-cerceve--buyuk { pointer-events: auto; }

/* Kart kapağı: 16/9 plakanın içine ölçeklenmiş belge. Taşan kısım kırpılıyor. */
.myp-pcard-media--belge {
    position: relative;
    overflow: hidden;
    background: #f4f1ea;
}
.myp-pcard-media--belge .myp-belge-cerceve {
    --myp-belge-olcek: .265;
    position: absolute;
    top: 0; left: 50%;
    margin-left: -149px;        /* 1123 × .265 ÷ 2 */
}

/* Doğrulama sayfası: belge büyük, iki sayfası birden görünür.
   KUTU ÖLÇÜSÜ = ölçeklenmiş belge ölçüsü. `transform` düzen akışını
   değiştirmediği için kutuyu elle küçültmezsek sağda 1123px'lik kutunun
   boşluğu kalıyor ve belge sola yapışık duruyor. */
.myp-belge-kutu {
    --myp-belge-olcek: .62;
    width: calc(1123px * var(--myp-belge-olcek));
    height: calc(1620px * var(--myp-belge-olcek));
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--myp-radius-lg);
    border: 1px solid var(--myp-border);
    background: #f4f1ea;
}
.myp-belge-kutu .myp-belge-cerceve { height: 1620px; }   /* iki sayfa + aralık */

@media screen and (max-width: 900px) {
    .myp-belge-kutu { --myp-belge-olcek: .3; }
}
@media screen and (max-width: 520px) {
    .myp-belge-kutu { --myp-belge-olcek: .22; }
}

/* ==========================================================================
   İKON DÜĞMESİ ARAÇ İPUCU (.myp-tip)
   .myp-icon-btn üzerine gelince/odaklanınca düğmenin başlığını (title veya
   aria-label) gösteren tek balon. Davranış: administration/micro/partials/
   head.php içindeki betik. Balon gövdeye (body) eklenip position:fixed ile
   konumlanır: tablo kapları (.myp-table-wrap) kaydırma kabı olduğundan
   ::after ile düğmenin içine çizilseydi kenarlarda kırpılırdı (kebap
   menüsünün body'ye taşınma nedeniyle aynı — bkz. programs/index.php).
   ========================================================================== */
.myp-tip {
    position: fixed;
    z-index: 500;                 /* modal (200) üstünde: kapat düğmeleri de ipucu taşır */
    max-width: 260px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #0f172a;
    color: #f1f5f9;
    font-family: var(--adm-font, var(--myp-font));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;         /* balon imleci yakalayıp mouseout tetiklemesin */
    box-shadow: 0 0 2px 0 rgba(2, 6, 23, .3), 0 6px 16px -4px rgba(2, 6, 23, .35);
    opacity: 0;
    transition: opacity .12s ease;
}

.myp-tip.is-acik { opacity: 1; }