/* =============================================================================
   MUYS — Tasarım Sistemi
   -----------------------------------------------------------------------------
   Bu dosya iki katmandan oluşur:
     1) TOKEN katmanı  (§1-§4)  — renk, tipografi, boşluk, köşe, gölge değişkenleri
     2) BİLEŞEN katmanı (§5-…)  — kabuk, kenar çubuğu, kart, tablo, rozet, adım
                                   göstergesi, form, boş durum, baskı…

   KURAL: Hiçbir view'da sabit renk/ölçü yazılmaz. Her şey buradan gelir.
   Kurumsal renk değişimi: §1'deki --muys-birincil / --muys-ikincil satırları yeter.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   §0  Yazı tipi — IBM Plex Sans (yerel; Türkçe ı/İ/ğ/ş/ç/ö/ü tam destekli)
        latin + latin-ext alt kümeleri indirildi, CDN bağımlılığı yok.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../lib/fonts/plex-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../lib/fonts/plex-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   §1  Kurumsal renkler — DEĞİŞTİRİLECEK TEK YER
   --------------------------------------------------------------------------- */
:root {
    --muys-birincil: #003DA0;   /* SUBÜ kurumsal mavi */
    --muys-ikincil:  #1E9956;   /* SUBÜ kurumsal yeşil */
    --muys-ucuncul:  #54565A;   /* kurumsal gri */
}

/* ---------------------------------------------------------------------------
   §2  Türetilmiş palet — hepsi §1'den üretilir
   --------------------------------------------------------------------------- */
:root {
    /* Birincil tonlar */
    --muys-birincil-950: color-mix(in srgb, var(--muys-birincil) 62%, #000);
    --muys-birincil-900: color-mix(in srgb, var(--muys-birincil) 80%, #000);
    --muys-birincil-800: color-mix(in srgb, var(--muys-birincil) 92%, #000);
    --muys-birincil-600: var(--muys-birincil);
    --muys-birincil-500: color-mix(in srgb, var(--muys-birincil) 84%, #fff);
    --muys-birincil-300: color-mix(in srgb, var(--muys-birincil) 42%, #fff);
    --muys-birincil-200: color-mix(in srgb, var(--muys-birincil) 22%, #fff);
    --muys-birincil-100: color-mix(in srgb, var(--muys-birincil) 12%, #fff);
    --muys-birincil-50:  color-mix(in srgb, var(--muys-birincil) 6%, #fff);

    /* İkincil (yeşil) tonlar */
    --muys-ikincil-700: color-mix(in srgb, var(--muys-ikincil) 76%, #000);
    --muys-ikincil-600: var(--muys-ikincil);
    --muys-ikincil-100: color-mix(in srgb, var(--muys-ikincil) 14%, #fff);
    --muys-ikincil-50:  color-mix(in srgb, var(--muys-ikincil) 7%, #fff);

    /* Nötrler — kurumsal griden türetilir, hafif serin bir zemin verir */
    --muys-notr-900: color-mix(in srgb, var(--muys-ucuncul) 55%, #000);
    --muys-notr-800: color-mix(in srgb, var(--muys-ucuncul) 78%, #000);
    --muys-notr-700: var(--muys-ucuncul);
    --muys-notr-600: color-mix(in srgb, var(--muys-ucuncul) 82%, #fff);
    --muys-notr-500: color-mix(in srgb, var(--muys-ucuncul) 62%, #fff);
    --muys-notr-400: color-mix(in srgb, var(--muys-ucuncul) 42%, #fff);
    --muys-notr-300: color-mix(in srgb, var(--muys-ucuncul) 26%, #fff);
    --muys-notr-200: color-mix(in srgb, var(--muys-ucuncul) 15%, #fff);
    --muys-notr-100: color-mix(in srgb, var(--muys-ucuncul) 8%, #fff);
    --muys-notr-50:  color-mix(in srgb, var(--muys-ucuncul) 4%, #fff);

    /* Yüzeyler */
    --muys-zemin:        color-mix(in srgb, var(--muys-birincil) 3%, #f4f5f7);
    --muys-yuzey:        #ffffff;
    --muys-yuzey-alt:    var(--muys-notr-50);
    --muys-yuzey-vurgu:  var(--muys-birincil-50);
    --muys-kenarlik:     var(--muys-notr-200);
    --muys-kenarlik-kuv: var(--muys-notr-300);
    --muys-ayirici:      var(--muys-notr-100);

    /* Metin */
    --muys-metin:        var(--muys-notr-900);
    --muys-metin-ikincil: var(--muys-notr-600);
    --muys-metin-soluk:  var(--muys-notr-500);
    --muys-metin-ters:   #ffffff;
    --muys-baglanti:     var(--muys-birincil-800);
    --muys-baglanti-hover: var(--muys-birincil-950);

    /* Durum renkleri — metin tonları WCAG AA için koyulaştırılmıştır */
    --muys-basari:       #157347;
    --muys-basari-zemin: color-mix(in srgb, #157347 11%, #fff);
    --muys-basari-kenar: color-mix(in srgb, #157347 28%, #fff);
    --muys-uyari:        #8a5300;
    --muys-uyari-zemin:  color-mix(in srgb, #c47f00 15%, #fff);
    --muys-uyari-kenar:  color-mix(in srgb, #c47f00 34%, #fff);
    --muys-hata:         #b02121;
    --muys-hata-zemin:   color-mix(in srgb, #b02121 10%, #fff);
    --muys-hata-kenar:   color-mix(in srgb, #b02121 26%, #fff);
    --muys-bilgi:        var(--muys-birincil-800);
    --muys-bilgi-zemin:  var(--muys-birincil-100);
    --muys-bilgi-kenar:  var(--muys-birincil-200);
    --muys-notr-durum:       var(--muys-notr-700);
    --muys-notr-durum-zemin: var(--muys-notr-100);
    --muys-notr-durum-kenar: var(--muys-notr-300);

    /* Grafik paleti (Chart.js) — kategorik dizi; ilk iki renk kurumsal kimlikten gelir.
       NOT: canvas'a verildiği için bu değerler düz renk olmalıdır (color-mix değil);
       3-8 arası renkler kurumsal maviyle uyumlu olacak şekilde seçilmiştir. */
    --muys-grafik-1: var(--muys-birincil-600);
    --muys-grafik-2: var(--muys-ikincil-600);
    --muys-grafik-3: #c47f00;
    --muys-grafik-4: #7d9ad4;   /* birincil rengin açık tonu */
    --muys-grafik-5: #7a4b9c;
    --muys-grafik-6: #0e8f9e;
    --muys-grafik-7: #b02121;
    --muys-grafik-8: #94969a;   /* kurumsal grinin açık tonu */
}

/* Eski tarayıcı güvencesi: color-mix yoksa sabit değerlerle çalış. */
@supports not (color: color-mix(in srgb, red, blue)) {
    :root {
        --muys-birincil-950: #001a45; --muys-birincil-900: #003180; --muys-birincil-800: #003893;
        --muys-birincil-500: #1a55ad; --muys-birincil-300: #a3b8dd; --muys-birincil-200: #ccd8ec;
        --muys-birincil-100: #e0e7f4; --muys-birincil-50: #f0f3fa;
        --muys-ikincil-700: #175c3f; --muys-ikincil-100: #e4f4ea; --muys-ikincil-50: #f2faf5;
        --muys-notr-900: #2e2f31; --muys-notr-800: #414346; --muys-notr-700: #54565a;
        --muys-notr-600: #6b6d71; --muys-notr-500: #909296; --muys-notr-400: #adafb2;
        --muys-notr-300: #c9cacc; --muys-notr-200: #dedfe0; --muys-notr-100: #eeeff0;
        --muys-notr-50: #f7f7f8; --muys-zemin: #f4f5f7;
        --muys-basari-zemin: #e7f2ec; --muys-basari-kenar: #b6d4c4;
        --muys-uyari-zemin: #f9efdd; --muys-uyari-kenar: #e5c894;
        --muys-hata-zemin: #f7e9e9; --muys-hata-kenar: #e0b7b7;
    }
}

/* ---------------------------------------------------------------------------
   §3  Tipografi, boşluk, köşe, gölge, hareket
   --------------------------------------------------------------------------- */
:root {
    --muys-yazi: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --muys-yazi-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Ölçek */
    --muys-ol-sayfa:   1.5rem;    /* sayfa başlığı  (h1/h3 rolü) */
    --muys-ol-bolum:   1.125rem;  /* bölüm başlığı  */
    --muys-ol-kart:    .9375rem;  /* kart başlığı   */
    --muys-ol-govde:   .9375rem;  /* gövde metni    */
    --muys-ol-tablo:   .875rem;   /* tablo metni    */
    --muys-ol-yardim:  .8125rem;  /* yardım metni   */
    --muys-ol-etiket:  .75rem;    /* rozet/etiket   */

    /* Boşluk ölçeği (4px tabanlı) */
    --muys-b1: .25rem;  --muys-b2: .5rem;   --muys-b3: .75rem;
    --muys-b4: 1rem;    --muys-b5: 1.5rem;  --muys-b6: 2rem;  --muys-b7: 3rem;

    /* Köşe */
    --muys-kose-sm: 4px;
    --muys-kose:    8px;
    --muys-kose-lg: 12px;
    --muys-kose-tam: 999px;

    /* Kenarlık */
    --muys-cizgi: 1px;
    --muys-cizgi-kalin: 3px;

    /* Gölge — kurumsal ve sakin; kart neredeyse düz, katman yükseldikçe artar */
    --muys-golge-kart:  0 1px 1px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --muys-golge-yukselti: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 16px -6px rgba(16, 24, 40, .10);
    --muys-golge-menu:  0 6px 16px -4px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    --muys-golge-modal: 0 16px 48px -12px rgba(16, 24, 40, .28);

    /* Odak halkası — klavye erişilebilirliği için her zaman görünür */
    --muys-odak: 0 0 0 3px color-mix(in srgb, var(--muys-birincil) 30%, transparent);

    /* Hareket */
    --muys-gecis-hizli: 120ms ease;
    --muys-gecis: 200ms cubic-bezier(.2, .6, .3, 1);

    /* Kabuk ölçüleri */
    --muys-kenar-genislik: 264px;
    --muys-ust-yukseklik: 56px;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    :root { --muys-odak: 0 0 0 3px rgba(0, 61, 160, .3); }
}

/* ---------------------------------------------------------------------------
   §4  Bootstrap köprüsü — --bs-* değişkenleri kendi token'larımıza bağlanır
   --------------------------------------------------------------------------- */
:root, [data-bs-theme="light"] {
    --bs-primary: var(--muys-birincil);
    --bs-primary-rgb: 0, 61, 160;
    --bs-secondary: var(--muys-notr-700);
    --bs-success: var(--muys-ikincil);
    --bs-info: var(--muys-birincil-500);
    --bs-warning: #c47f00;
    --bs-danger: var(--muys-hata);
    --bs-light: var(--muys-notr-50);
    --bs-dark: var(--muys-notr-900);

    --bs-body-font-family: var(--muys-yazi);
    --bs-body-font-size: var(--muys-ol-govde);
    --bs-body-color: var(--muys-metin);
    --bs-body-bg: var(--muys-zemin);
    --bs-secondary-color: var(--muys-metin-ikincil);
    --bs-emphasis-color: var(--muys-notr-900);
    --bs-border-color: var(--muys-kenarlik);
    --bs-border-radius: var(--muys-kose);
    --bs-border-radius-sm: var(--muys-kose-sm);
    --bs-border-radius-lg: var(--muys-kose-lg);
    --bs-link-color: var(--muys-baglanti);
    --bs-link-hover-color: var(--muys-baglanti-hover);
    --bs-heading-color: var(--muys-notr-900);
    --bs-focus-ring-color: color-mix(in srgb, var(--muys-birincil) 30%, transparent);
}

/* ---------------------------------------------------------------------------
   §5  Taban
   --------------------------------------------------------------------------- */
html { font-size: 16px; position: relative; min-height: 100%; }

body {
    margin-bottom: 0;
    font-family: var(--muys-yazi);
    font-size: var(--muys-ol-govde);
    color: var(--muys-metin);
    background-color: var(--muys-zemin);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Sayı hizası: tablolarda ve KPI'larda rakamlar alt alta otursun */
table, .muys-sayi, .muys-kpi-deger, .badge, .muys-durum { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.011em; color: var(--muys-notr-900); }

a { text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--muys-birincil-300); }

hr { border-color: var(--muys-kenarlik); opacity: 1; }

/* Görünür odak halkası — her etkileşimli öğede */
:where(a, button, input, select, textarea, .btn, .form-control, .form-select, .form-check-input, [tabindex]):focus-visible {
    outline: 2px solid var(--muys-birincil);
    outline-offset: 2px;
    box-shadow: var(--muys-odak);
}
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: var(--muys-odak);
    border-color: var(--muys-birincil-500);
}

/* Düz metne tıklayınca Word'deki gibi yanıp sönen imleç çıkmasın.
   (Tarayıcının "imleçle gezinme"/caret browsing kipi açıkken de görünür.)
   Gerçek yazı alanlarında imleç normal şekilde çalışmaya devam eder. */
:root { caret-color: transparent; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] { caret-color: auto; }

/* Ekran okuyucu için "içeriğe atla" bağlantısı */
.muys-atla {
    position: absolute; left: var(--muys-b3); top: var(--muys-b3);
    z-index: 1200; transform: translateY(-200%);
    background: var(--muys-yuzey); color: var(--muys-birincil-900);
    border: var(--muys-cizgi) solid var(--muys-birincil);
    border-radius: var(--muys-kose-sm); padding: var(--muys-b2) var(--muys-b3);
    font-size: var(--muys-ol-yardim); font-weight: 600; text-decoration: none;
    transition: transform var(--muys-gecis);
}
.muys-atla:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   §6  Kabuk — sol kenar çubuğu + ince üst çubuk + içerik
   --------------------------------------------------------------------------- */
.muys-kabuk {
    display: grid;
    grid-template-columns: var(--muys-kenar-genislik) minmax(0, 1fr);
    min-height: 100vh;
}
.muys-kabuk--yalin { grid-template-columns: minmax(0, 1fr); }   /* giriş/hata ekranları */

/* ---- Kenar çubuğu ---- */
.muys-kenar {
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column;
    background:
        linear-gradient(180deg,
            var(--muys-birincil-900) 0%,
            var(--muys-birincil-950) 100%);
    color: rgba(255, 255, 255, .82);
    border-right: var(--muys-cizgi) solid rgba(255, 255, 255, .08);
}
/* İnce doku: dümdüz renk yerine hafif ışık geçişi */
.muys-kenar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 45% at 0% 0%, rgba(255, 255, 255, .10), transparent 60%);
}
.muys-kenar > * { position: relative; }

.muys-marka {
    display: flex; align-items: center; gap: var(--muys-b3);
    height: var(--muys-ust-yukseklik); flex: 0 0 auto;
    padding: 0 var(--muys-b4);
    color: #fff; text-decoration: none;
    border-bottom: var(--muys-cizgi) solid rgba(255, 255, 255, .10);
}
.muys-marka:hover { color: #fff; }
.muys-marka i { font-size: 1.35rem; color: color-mix(in srgb, var(--muys-ikincil) 55%, #fff); }
.muys-marka-ad { font-weight: 700; font-size: 1.0625rem; letter-spacing: .04em; }
.muys-marka-alt {
    display: block; font-size: .625rem; font-weight: 500; letter-spacing: .09em;
    text-transform: uppercase; color: rgba(255, 255, 255, .55); line-height: 1.2;
}

.muys-menu { flex: 1 1 auto; padding: var(--muys-b3) var(--muys-b3) var(--muys-b6); }
.muys-menu-grup + .muys-menu-grup { margin-top: var(--muys-b4); }
.muys-menu-baslik {
    display: flex; align-items: center; gap: var(--muys-b2);
    padding: 0 var(--muys-b3) var(--muys-b2);
    font-size: .6875rem; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
    color: rgba(255, 255, 255, .48);
}
.muys-menu-baslik::after {
    content: ""; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .12);
}
.muys-menu-liste { list-style: none; margin: 0; padding: 0; }

/* Sürecin kapanış adımı (Anketler): rol gruplarından silik bir çizgiyle ayrılır —
   ayrı bir modül gibi değil, "işlerden sonra gelen son adım" gibi okunur. */
.muys-menu-grup--kapanis {
    margin-top: var(--muys-b3);
    padding-top: var(--muys-b3);
    border-top: var(--muys-cizgi) solid rgba(255, 255, 255, .10);
}

.muys-menu-bag {
    position: relative;
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: .5rem var(--muys-b3);
    margin-bottom: 1px;
    border-radius: var(--muys-kose-sm);
    color: rgba(255, 255, 255, .82);
    font-size: .875rem; font-weight: 500; text-decoration: none;
    transition: background var(--muys-gecis-hizli), color var(--muys-gecis-hizli);
}
.muys-menu-bag i { width: 1.15rem; font-size: 1rem; text-align: center; opacity: .85; flex: 0 0 auto; }
.muys-menu-bag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muys-menu-bag:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.muys-menu-bag.aktif {
    background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600;
}
/* Aktif sayfa: sol kenarda kurumsal yeşil şerit */
.muys-menu-bag.aktif::before {
    content: ""; position: absolute; left: -.75rem; top: .35rem; bottom: .35rem;
    width: 3px; border-radius: 0 2px 2px 0; background: var(--muys-ikincil);
}
.muys-menu-bag .muys-menu-sayi {
    margin-left: auto; flex: 0 0 auto;
    min-width: 1.35rem; padding: 0 .35rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-hata); color: #fff;
    font-size: .6875rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}

/* Kenar çubuğu altındaki hızlı erişim ikonları (takvim, anket, bildirim, yardım…) */
.muys-kenar-kisayollar {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: var(--muys-b2);
    padding: var(--muys-b3);
    border-top: var(--muys-cizgi) solid rgba(255, 255, 255, .10);
}
.muys-kenar-kisayol {
    position: relative;
    flex: 1 1 calc(50% - var(--muys-b2));
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: var(--muys-b2) var(--muys-b1);
    border-radius: var(--muys-kose-sm);
    background: rgba(255, 255, 255, .07);
    border: var(--muys-cizgi) solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem; text-decoration: none;
    transition: background var(--muys-gecis-hizli), color var(--muys-gecis-hizli), border-color var(--muys-gecis-hizli);
}
.muys-kenar-kisayol:hover, .muys-kenar-kisayol:focus-visible {
    background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .22);
}
.muys-kenar-kisayol.aktif {
    background: rgba(255, 255, 255, .18); color: #fff;
    border-color: var(--muys-ikincil);
}
/* İkon + sayaç rozeti; ad ikonun altında görünür durur. */
.muys-kisayol-ikon { position: relative; display: grid; place-items: center; line-height: 1; }
.muys-kisayol-ad {
    font-size: var(--muys-ol-etiket); font-weight: 600; line-height: 1.2;
    text-align: center; letter-spacing: .01em;
}
.muys-kenar-kisayol .muys-kisayol-rozet { border-color: var(--muys-birincil-950); }

.muys-kenar-alt {
    flex: 0 0 auto; padding: var(--muys-b3);
    border-top: var(--muys-cizgi) solid rgba(255, 255, 255, .10);
    font-size: var(--muys-ol-etiket); color: rgba(255, 255, 255, .5);
}

/* ---- Üst çubuk ---- */
.muys-ust {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: var(--muys-b3);
    height: var(--muys-ust-yukseklik);
    /* Yan dolgu içerik gövdesiyle aynı: üst çubuktaki öğeler kartların kenarlarıyla hizalanır. */
    padding: 0 var(--muys-b5);
    background: color-mix(in srgb, var(--muys-yuzey) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
}
@supports not (color: color-mix(in srgb, red, blue)) { .muys-ust { background: #fff; } }

.muys-ust-donem {
    display: inline-flex; align-items: center; gap: var(--muys-b2);
    padding: .25rem .6rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil-100); color: var(--muys-birincil-900);
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
    font-size: var(--muys-ol-etiket); font-weight: 600; white-space: nowrap;
}
.muys-ust-donem.muys-ust-donem--yok {
    background: var(--muys-uyari-zemin); color: var(--muys-uyari); border-color: var(--muys-uyari-kenar);
}

.muys-ust-eylem {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--muys-b2);
    position: relative;
    height: 2.25rem; min-width: 2.25rem; padding: 0 .5rem;
    border: var(--muys-cizgi) solid transparent; border-radius: var(--muys-kose-sm);
    background: transparent; color: var(--muys-notr-700); text-decoration: none;
    font-size: .875rem;
    transition: background var(--muys-gecis-hizli), color var(--muys-gecis-hizli);
}
.muys-ust-eylem:hover { background: var(--muys-notr-100); color: var(--muys-birincil-900); }
.muys-ust-eylem i { font-size: 1.1rem; }
.muys-ust-rozet {
    position: absolute; top: .15rem; right: .1rem;
    min-width: 1.05rem; padding: 0 .25rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-hata); color: #fff;
    font-size: .625rem; font-weight: 700; line-height: 1.05rem; text-align: center;
    border: 2px solid var(--muys-yuzey);
}

.muys-kullanici { display: flex; align-items: center; gap: var(--muys-b2); }
.muys-avatar {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil-100); color: var(--muys-birincil-900);
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
}
.muys-kullanici-ad { font-size: .8125rem; font-weight: 600; line-height: 1.15; }
.muys-kullanici-rol { font-size: .6875rem; color: var(--muys-metin-soluk); line-height: 1.15; }

.muys-hamburger { display: none; }
.muys-perde { display: none; }

/* ---- İçerik ---- */
.muys-icerik { min-width: 0; display: flex; flex-direction: column; }
/*  İçerik SOLA YASLIDIR: kenar çubuğuyla arasındaki boşluk her ekran genişliğinde aynı
    (b5 = 24px). Önceden `max-width: 1320px + margin-inline: auto` vardı; tavanı aşan geniş
    ekranlarda içerik ortalanıp kenar çubuğundan ~190 px uzaklaşıyor, laptopta ise bitişik
    duruyordu — aynı sayfa makineden makineye başka görünüyordu.
    Üstteki tavan yalnız 2400 px+ ekranlarda devreye giren emniyet sınırıdır. */
.muys-govde {
    flex: 1 1 auto;
    width: 100%; max-width: 2200px;
    padding: var(--muys-b5) var(--muys-b5) var(--muys-b7);
    margin-inline: 0;
}
/* Form/okuma ağırlıklı ekranlar için dar kolon (satır uzunluğu kontrol altında kalsın). */
.muys-govde--dar { max-width: 880px; }

/* ---- Duyarlılık: dar ekranda kenar çubuğu çekmeceye döner ---- */
@media (max-width: 991.98px) {
    .muys-kabuk { grid-template-columns: minmax(0, 1fr); }
    .muys-kenar {
        position: fixed; inset: 0 auto 0 0; z-index: 1045;
        width: min(84vw, var(--muys-kenar-genislik));
        transform: translateX(-100%);
        transition: transform var(--muys-gecis);
        box-shadow: var(--muys-golge-modal);
    }
    .muys-kenar.acik { transform: translateX(0); }
    .muys-hamburger { display: inline-flex; }
    .muys-perde {
        display: block;
        position: fixed; inset: 0; z-index: 1040;
        background: rgba(16, 24, 40, .45);
        opacity: 0; visibility: hidden; transition: opacity var(--muys-gecis), visibility var(--muys-gecis);
    }
    .muys-perde.acik { opacity: 1; visibility: visible; }
    .muys-govde { padding: var(--muys-b4) var(--muys-b4) var(--muys-b6); }
    .muys-ust { padding-inline: var(--muys-b3); }
}
@media (prefers-reduced-motion: reduce) {
    .muys-kenar, .muys-perde, .muys-atla, * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   §7  Simülasyon bandı — güvenlik açısından kritik, silikleşmemeli
   --------------------------------------------------------------------------- */
.muys-simulasyon {
    position: relative; z-index: 1050;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--muys-b2);
    padding: var(--muys-b2) var(--muys-b4);
    background: repeating-linear-gradient(
        135deg,
        #7a4b00 0 14px,
        #8a5300 14px 28px);
    color: #fff; font-size: .875rem;
    border-bottom: 3px solid #ffc107;
}
.muys-simulasyon strong { color: #ffd970; }
.muys-simulasyon i { font-size: 1.05rem; }
.muys-simulasyon .btn { --bs-btn-bg: #fff; --bs-btn-color: #4a2d00; --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #ffe9b3; --bs-btn-hover-color: #3a2300; --bs-btn-hover-border-color: #ffe9b3;
    font-weight: 600; }

/* ---------------------------------------------------------------------------
   §8  Sayfa başlığı, kırıntı yolu, geri
   --------------------------------------------------------------------------- */
.muys-sayfa-ust { margin-bottom: var(--muys-b4); }
.muys-kirinti {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--muys-b2);
    margin-bottom: var(--muys-b2);
    font-size: var(--muys-ol-yardim);
}
.muys-kirinti .breadcrumb { margin: 0; font-size: inherit; --bs-breadcrumb-divider-color: var(--muys-notr-400); }
.muys-kirinti .breadcrumb-item a { color: var(--muys-metin-ikincil); text-decoration: none; }
.muys-kirinti .breadcrumb-item a:hover { color: var(--muys-birincil-800); text-decoration: underline; }
.muys-kirinti .breadcrumb-item.active { color: var(--muys-metin); font-weight: 600; }

.muys-geri {
    display: inline-flex; align-items: center; gap: var(--muys-b2);
    padding: .2rem .55rem .2rem .4rem; border-radius: var(--muys-kose-sm);
    color: var(--muys-metin-ikincil); text-decoration: none;
    font-size: var(--muys-ol-yardim); font-weight: 600;
    border: var(--muys-cizgi) solid transparent;
}
.muys-geri:hover { background: var(--muys-notr-100); color: var(--muys-birincil-900); border-color: var(--muys-kenarlik); }

.muys-sayfa-baslik {
    display: flex; align-items: flex-start; gap: var(--muys-b3);
}
.muys-sayfa-ikon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--muys-kose);
    background: var(--muys-birincil-100); color: var(--muys-birincil-800);
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
    font-size: 1.15rem;
}
.muys-sayfa-baslik > div { min-width: 0; }
.muys-sayfa-baslik h1 {
    margin: 0; font-size: var(--muys-ol-sayfa); font-weight: 600; line-height: 1.25;
}
.muys-sayfa-alt {
    margin-top: var(--muys-b1);
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); max-width: 90ch;
}
/*  Alt sayfalarda "kimin ekranındayım?" bilgisi (öğrenci adı) açıklama metninin
    içinde silikleşiyordu; artık başlığın hemen altında belirgin bir künye şeridi.
    Açıklama metni bu şeridin yanında durur — başlık bloğu üst üste yığılmasın. */
.muys-sayfa-kunye {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--muys-b2) var(--muys-b3);
    margin-top: var(--muys-b2);
}
.muys-sayfa-kunye .muys-sayfa-alt { margin-top: 0; max-width: 70ch; }
/* Künye ile açıklamayı ayıran ince dikey çizgi — yalnız yan yanayken görünür. */
.muys-sayfa-kunye .muys-sayfa-alt::before {
    content: ""; display: inline-block; vertical-align: -.15em;
    width: var(--muys-cizgi); height: 1em; margin-right: var(--muys-b3);
    background: var(--muys-kenarlik-kuv);
}
.muys-sayfa-kisi {
    display: inline-flex; align-items: center; gap: var(--muys-b2);
    padding: .2rem .6rem .2rem .45rem;
    border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil-100);
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
    color: var(--muys-birincil-900);
    font-size: var(--muys-ol-govde); font-weight: 600; line-height: 1.35;
}
.muys-sayfa-kisi i { font-size: .95rem; color: var(--muys-birincil-600); }
.muys-sayfa-kisi .muys-sayfa-kisi-alt {
    font-weight: 500; color: var(--muys-birincil-800);
    opacity: .85; font-size: var(--muys-ol-yardim);
}
.muys-sayfa-eylem { margin-left: auto; display: flex; gap: var(--muys-b2); flex-wrap: wrap; }

/* Açıklama şeridi — ekranın ne işe yaradığını anlatan bilgi kutusu */
.muys-serit {
    display: flex; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4);
    margin-bottom: var(--muys-b4);
    border: var(--muys-cizgi) solid var(--muys-bilgi-kenar);
    border-left: var(--muys-cizgi-kalin) solid var(--muys-birincil);
    border-radius: var(--muys-kose);
    background: var(--muys-bilgi-zemin);
    color: var(--muys-notr-900);
    font-size: var(--muys-ol-yardim); line-height: 1.55;
}
.muys-serit > i { flex: 0 0 auto; font-size: 1rem; color: var(--muys-birincil-800); margin-top: .1rem; }
.muys-serit--uyari { background: var(--muys-uyari-zemin); border-color: var(--muys-uyari-kenar); border-left-color: #c47f00; }
.muys-serit--uyari > i { color: var(--muys-uyari); }
.muys-serit--notr { background: var(--muys-yuzey); border-color: var(--muys-kenarlik); border-left-color: var(--muys-notr-400); }
.muys-serit--notr > i { color: var(--muys-notr-600); }
/* Dikkat çekmesi gereken uyarı: veri kaybı / üzerine yazma gibi geri alınamaz sonuçlar. */
.muys-serit--hata { background: var(--muys-hata-zemin); border-color: var(--muys-hata-kenar); border-left-color: var(--muys-hata); }
.muys-serit--hata > i { color: var(--muys-hata); }
.muys-serit--hata strong { color: var(--muys-hata); }

/* ---------------------------------------------------------------------------
   §9  Kartlar
   --------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--muys-yuzey);
    --bs-card-border-color: var(--muys-kenarlik);
    --bs-card-border-radius: var(--muys-kose);
    --bs-card-inner-border-radius: calc(var(--muys-kose) - 1px);
    --bs-card-cap-bg: var(--muys-yuzey);
    --bs-card-spacer-y: var(--muys-b4);
    --bs-card-spacer-x: var(--muys-b4);
    box-shadow: var(--muys-golge-kart);
}
.card > .card-header {
    display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap;
    padding: var(--muys-b3) var(--muys-b4);
    border-bottom-color: var(--muys-kenarlik);
    font-size: var(--muys-ol-kart); font-weight: 600; color: var(--muys-notr-900);
}
.card > .card-header .badge, .card > .card-header .muys-durum { font-weight: 600; }
.card > .card-footer { background: var(--muys-yuzey-alt); border-top-color: var(--muys-kenarlik); }
.card-title { font-size: var(--muys-ol-bolum); }

/* Tıklanabilir kart */
.muys-kart-bag { display: block; text-decoration: none; color: inherit; height: 100%; }
.muys-kart-bag .card { transition: box-shadow var(--muys-gecis), transform var(--muys-gecis), border-color var(--muys-gecis); }
.muys-kart-bag:hover .card,
.muys-kart-bag:focus-visible .card {
    box-shadow: var(--muys-golge-yukselti);
    border-color: var(--muys-birincil-300);
    transform: translateY(-2px);
}
.muys-kart-bag:focus-visible { outline: none; }
.muys-kart-bag:focus-visible .card { outline: 2px solid var(--muys-birincil); outline-offset: 2px; }

/* Hızlı erişim kartı */
.muys-erisim .card-body { display: flex; gap: var(--muys-b3); }
.muys-erisim-ikon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--muys-kose);
    background: var(--muys-birincil-100); color: var(--muys-birincil-800);
    font-size: 1.2rem;
}
.muys-erisim-baslik {
    display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap;
    font-size: var(--muys-ol-kart); font-weight: 600; margin-bottom: var(--muys-b1);
}
.muys-erisim-metin { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); margin: 0; line-height: 1.55; }
/*  Eylem bekleyen hızlı erişim kartı — "sizden bir iş bekleniyor" hâli.
    Diğer kartlarla aynı ızgarada durur; ayrımı sol şerit + amber ikon sağlar. */
.muys-erisim--eylem { border-color: var(--muys-uyari-kenar); box-shadow: var(--muys-golge-yukselti); }
.muys-erisim--eylem::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--muys-cizgi-kalin); background: #c47f00;
    border-radius: var(--muys-kose) 0 0 var(--muys-kose);
}
.muys-erisim--eylem { position: relative; overflow: hidden; }
.muys-erisim--eylem .muys-erisim-ikon { background: var(--muys-uyari-zemin); color: var(--muys-uyari); }
.muys-erisim-sayi {
    display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
    border-radius: var(--muys-kose-tam);
    background: #c47f00; color: #fff;
    font-size: var(--muys-ol-etiket); font-weight: 700; line-height: 1;
}
.muys-erisim-eylem-metin {
    display: inline-flex; align-items: center; gap: var(--muys-b1);
    margin-top: var(--muys-b2);
    font-size: var(--muys-ol-yardim); font-weight: 600; color: var(--muys-uyari);
}
.muys-adim-etiket {
    display: inline-block; margin-right: var(--muys-b2);
    padding: .05rem .4rem; border-radius: var(--muys-kose-sm);
    background: var(--muys-notr-100); color: var(--muys-notr-700);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    font-size: var(--muys-ol-etiket); font-weight: 600;
}

/*  Süreç penceresi kapanmış iş kartı — "bu işi artık yapamazsınız" hâli.
    Eylem kartının tersi: dikkat çekmez, tıklanmaz; yalnız kaçırıldığını ve nedenini bildirir. */
.muys-erisim--pasif { background: var(--muys-yuzey-alt); border-style: dashed; }
.muys-erisim--pasif .muys-erisim-ikon { background: var(--muys-notr-100); color: var(--muys-notr-600); }
.muys-erisim--pasif .muys-erisim-baslik { color: var(--muys-metin-ikincil); }
.muys-erisim-kapali-metin {
    display: inline-flex; align-items: flex-start; gap: var(--muys-b1);
    margin-top: var(--muys-b2);
    font-size: var(--muys-ol-yardim); color: var(--muys-notr-700);
}

/*  Panelin iş bölümü boşken görünen şerit: "bekleyen iş yok" + sıradaki takvim adımı.
    Boş bir kart ızgarası göstermek yerine tek satır; panel sessizken sessiz kalsın. */
.muys-pano-bos {
    display: flex; align-items: center; gap: var(--muys-b3); flex-wrap: wrap;
    padding: var(--muys-b3) var(--muys-b4);
    margin-bottom: var(--muys-b4);
    border: var(--muys-cizgi) solid var(--muys-basari-kenar);
    border-left: var(--muys-cizgi-kalin) solid var(--muys-basari);
    border-radius: var(--muys-kose);
    background: var(--muys-basari-zemin);
    font-size: var(--muys-ol-yardim);
}
.muys-pano-bos > i { font-size: 1.15rem; color: var(--muys-basari); }
.muys-pano-bos > div { flex: 1 1 18rem; min-width: 0; }
.muys-pano-bos-alt { color: var(--muys-metin-ikincil); margin-top: .1rem; }

/* İş kartlarının altındaki tek satırlık takvim notu. */
.muys-pano-siradaki {
    display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap;
    margin: 0 0 var(--muys-b4);
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
}
.muys-pano-siradaki > i { color: var(--muys-birincil-600); }

/*  Panel alt şeridi: Takvim + Yardım. İki büyük kart yerine iki ince satır. */
.muys-pano-araclar {
    display: grid; gap: var(--muys-b2);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-top: var(--muys-b4);
}
.muys-pano-araclar > a {
    display: flex; align-items: flex-start; gap: var(--muys-b3);
    padding: var(--muys-b3);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose);
    background: var(--muys-yuzey);
    color: var(--muys-metin-ikincil); text-decoration: none;
    font-size: var(--muys-ol-yardim); line-height: 1.5;
    transition: border-color var(--muys-gecis), box-shadow var(--muys-gecis);
}
.muys-pano-araclar > a:hover,
.muys-pano-araclar > a:focus-visible {
    border-color: var(--muys-birincil-300); box-shadow: var(--muys-golge-yukselti);
}
.muys-pano-araclar > a > i { flex: 0 0 auto; font-size: 1.1rem; color: var(--muys-birincil-700); margin-top: .1rem; }
.muys-pano-araclar strong { color: var(--muys-metin); }

/* Karşılama bloğu (D1 — rol panelinin ilk öğesi) */
.muys-karsilama {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--muys-b4); flex-wrap: wrap;
    padding: var(--muys-b5);
    margin-bottom: var(--muys-b5);
    border-radius: var(--muys-kose-lg);
    background: linear-gradient(135deg, var(--muys-birincil-900), var(--muys-birincil-950));
    color: #fff;
}
/* Yalnız yumuşak ışık geçişi — çapraz çizgi dokusu kaldırıldı (renk aynı kaldı). */
.muys-karsilama::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--muys-ikincil) 26%, transparent), transparent 62%);
}
.muys-karsilama > * { position: relative; z-index: 1; }
.muys-karsilama-baslik { font-size: 1.375rem; font-weight: 600; color: #fff; margin: 0; letter-spacing: -.015em; }
.muys-karsilama-alt { font-size: var(--muys-ol-yardim); color: rgba(255,255,255,.72); margin: .2rem 0 0; }
.muys-karsilama-roller { display: flex; flex-wrap: wrap; gap: var(--muys-b2); margin-top: var(--muys-b3); }
.muys-karsilama-rol {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .55rem; border-radius: var(--muys-kose-tam);
    background: rgba(255, 255, 255, .14); border: var(--muys-cizgi) solid rgba(255, 255, 255, .2);
    font-size: var(--muys-ol-etiket); font-weight: 600; color: #fff;
}
.muys-karsilama-yan { margin-left: auto; display: flex; gap: var(--muys-b2); flex-wrap: wrap; }
@supports not (color: color-mix(in srgb, red, blue)) { .muys-karsilama::after { display: none; } }

/* Hızlı erişim — orta boy ikon döşemeleri (D1).
   Kart yerine yan yana ikonlar; ad, üzerine gelince ipucu olarak görünür. */
.muys-kisayollar { display: flex; flex-wrap: wrap; gap: var(--muys-b3); }

.muys-kisayol {
    position: relative;
    display: grid; place-items: center;
    width: 3.25rem; height: 3.25rem;
    border-radius: var(--muys-kose);
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    box-shadow: var(--muys-golge-kart);
    color: var(--muys-birincil-800);
    font-size: 1.35rem; text-decoration: none;
    transition: transform var(--muys-gecis), box-shadow var(--muys-gecis),
                border-color var(--muys-gecis), background var(--muys-gecis-hizli);
}
.muys-kisayol:hover, .muys-kisayol:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--muys-golge-yukselti);
    border-color: var(--muys-birincil-300);
    background: var(--muys-birincil-50);
    color: var(--muys-birincil-900);
}
/* Ad ipucu — döşemenin altında belirir (üst çubuktaki zil ipucuyla aynı mantık). */
.muys-kisayol::after {
    content: attr(data-ad);
    position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%) translateY(-3px);
    z-index: 5;
    padding: .2rem .5rem; border-radius: var(--muys-kose-sm);
    background: var(--muys-notr-900); color: #fff;
    font-size: var(--muys-ol-etiket); font-weight: 600; white-space: nowrap; letter-spacing: .01em;
    opacity: 0; pointer-events: none;
    transition: opacity var(--muys-gecis), transform var(--muys-gecis);
}
.muys-kisayol:hover::after, .muys-kisayol:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Rozet (ör. okunmamış bildirim sayısı) */
.muys-kisayol-rozet {
    position: absolute; top: -.3rem; right: -.3rem;
    min-width: 1.15rem; padding: 0 .25rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-hata); color: #fff;
    font-size: .625rem; font-weight: 700; line-height: 1.15rem; text-align: center;
    border: 2px solid var(--muys-yuzey);
}

/* ---------------------------------------------------------------------------
   §10  KPI kartları (D1 — rol paneli)
   --------------------------------------------------------------------------- */
.muys-kpi {
    position: relative; height: 100%;
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b4);
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose);
    box-shadow: var(--muys-golge-kart);
    overflow: hidden;
    transition: box-shadow var(--muys-gecis), transform var(--muys-gecis), border-color var(--muys-gecis);
}
/* Sol renk şeridi — kartın kategorisini renkle işaretler */
.muys-kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--muys-cizgi-kalin); background: var(--muys-kpi-renk, var(--muys-birincil));
}
a.muys-kart-bag:hover .muys-kpi,
a.muys-kart-bag:focus-visible .muys-kpi {
    box-shadow: var(--muys-golge-yukselti); transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--muys-kpi-renk, var(--muys-birincil)) 45%, #fff);
}
.muys-kpi-ikon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--muys-kose);
    background: color-mix(in srgb, var(--muys-kpi-renk, var(--muys-birincil)) 12%, #fff);
    color: var(--muys-kpi-renk, var(--muys-birincil));
    font-size: 1.25rem;
}
.muys-kpi-govde { min-width: 0; }
.muys-kpi-baslik {
    font-size: var(--muys-ol-yardim); font-weight: 500; color: var(--muys-metin-ikincil);
    line-height: 1.3;
}
.muys-kpi-deger { font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: var(--muys-notr-900); }
.muys-kpi-alt { font-size: var(--muys-ol-etiket); color: var(--muys-metin-soluk); line-height: 1.35; margin-top: .1rem; }
.muys-kpi-ok {
    position: absolute; right: var(--muys-b3); top: 50%; transform: translateY(-50%) translateX(-4px);
    color: var(--muys-notr-300); opacity: 0; transition: all var(--muys-gecis);
}
a.muys-kart-bag:hover .muys-kpi-ok { opacity: 1; transform: translateY(-50%) translateX(0); color: var(--muys-birincil-500); }

/* Renk çeşitleri — Bootstrap renk adlarıyla uyumlu (DashboardKartDto.Renk) */
.muys-kpi--primary   { --muys-kpi-renk: var(--muys-birincil); }
.muys-kpi--success   { --muys-kpi-renk: var(--muys-basari); }
.muys-kpi--warning   { --muys-kpi-renk: #c47f00; }
.muys-kpi--danger    { --muys-kpi-renk: var(--muys-hata); }
.muys-kpi--info      { --muys-kpi-renk: #0e8f9e; }
.muys-kpi--secondary { --muys-kpi-renk: var(--muys-notr-600); }
.muys-kpi--dark      { --muys-kpi-renk: var(--muys-notr-900); }

/*  Vurgulu kart — yalnız sorun varken görünen sayaçlar (ör. "BYS'ye yeniden gönderilecek").
    Sol şerit + ikon rengi beyaz kartlar arasında yeterince ayırt edici olmuyordu; zemin de
    kartın kendi rengiyle boyanır, kenarlık ve başlık koyulaşır. */
.muys-kpi--vurgulu {
    background: color-mix(in srgb, var(--muys-kpi-renk, var(--muys-birincil)) 9%, #fff);
    border-color: color-mix(in srgb, var(--muys-kpi-renk, var(--muys-birincil)) 38%, #fff);
    box-shadow: var(--muys-golge-yukselti);
}
.muys-kpi--vurgulu .muys-kpi-baslik { color: var(--muys-kpi-renk, var(--muys-birincil)); font-weight: 600; }
.muys-kpi--vurgulu .muys-kpi-deger { color: var(--muys-kpi-renk, var(--muys-birincil)); }
.muys-kpi--vurgulu .muys-kpi-ikon { background: #fff; }

@supports not (color: color-mix(in srgb, red, blue)) {
    .muys-kpi-ikon { background: var(--muys-notr-100); }
    .muys-kpi--vurgulu { background: var(--muys-hata-zemin); border-color: var(--muys-hata-kenar); }
}

/* ---------------------------------------------------------------------------
   §11  Tablolar (D2)
   --------------------------------------------------------------------------- */
.muys-tablo-sarmal { overflow-x: auto; }
.table {
    --bs-table-bg: var(--muys-yuzey);
    --bs-table-border-color: var(--muys-ayirici);
    --bs-table-hover-bg: var(--muys-birincil-50);
    --bs-table-color: var(--muys-metin);
    font-size: var(--muys-ol-tablo);
    margin-bottom: 0;
}
.table > thead th {
    background: var(--muys-yuzey-alt);
    color: var(--muys-metin-ikincil);
    font-size: var(--muys-ol-etiket); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
    padding: var(--muys-b3) var(--muys-b4);
}
.table > tbody > tr > td { padding: var(--muys-b3) var(--muys-b4); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom-width: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--muys-birincil-50); }

/* Kart içine gömülü tablo köşeleri taşmasın */
.card > .muys-tablo-sarmal:last-child,
.card > .table-responsive:last-child { border-radius: 0 0 calc(var(--muys-kose) - 1px) calc(var(--muys-kose) - 1px); }

/* Satır işlem düğmeleri */
.muys-satir-eylem { display: inline-flex; gap: var(--muys-b2); justify-content: flex-end; flex-wrap: wrap; }

/* Sonuç sayacı */
.muys-sayac {
    display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap;
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
}
.muys-sayac strong { color: var(--muys-notr-900); }

/* Birincil hücre (ad/numara) */
.muys-hucre-ad { font-weight: 600; color: var(--muys-notr-900); }
.muys-hucre-alt { font-size: var(--muys-ol-etiket); color: var(--muys-metin-soluk); }

/* ---------------------------------------------------------------------------
   §12  Filtre çubuğu (D2) — üç ayrı filtre partial'ı tek görünüme yakınsar
   --------------------------------------------------------------------------- */
.muys-filtre {
    margin-bottom: var(--muys-b4);
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose);
    box-shadow: var(--muys-golge-kart);
}
.muys-filtre-govde { padding: var(--muys-b3) var(--muys-b4); }
.muys-filtre-ipucu {
    display: flex; gap: var(--muys-b2);
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
    margin-bottom: var(--muys-b3); line-height: 1.5;
}
.muys-filtre-ipucu i { color: var(--muys-birincil-500); margin-top: .1rem; }
.muys-filtre-alanlar { display: flex; flex-wrap: wrap; gap: var(--muys-b3); align-items: flex-end; }
.muys-filtre-alan { flex: 1 1 200px; min-width: 0; }
.muys-filtre-alan--genis { flex: 2 1 280px; }
.muys-filtre-alan--dar { flex: 0 0 auto; }
.muys-filtre-etiket {
    display: block; margin-bottom: var(--muys-b1);
    font-size: var(--muys-ol-etiket); font-weight: 600; letter-spacing: .03em;
    color: var(--muys-metin-ikincil); text-transform: uppercase;
}
/*  Durum satırı: etiket seçeneklerin ÜSTÜNDE değil YANINDA durur — "Durum: [Tümü][…]"
    tek satırda okunur, filtre çubuğu bir satır kısalır. Dar ekranda seçenekler alta sarar. */
.muys-filtre-durum {
    margin-top: var(--muys-b3); padding-top: var(--muys-b3);
    border-top: var(--muys-cizgi) solid var(--muys-ayirici);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--muys-b2) var(--muys-b3);
}
.muys-filtre-durum > .muys-filtre-etiket { flex: 0 0 auto; margin-bottom: 0; }

/*  Katlanır filtre — filtre çerçevesinin üstünde "▾ Filtrele" başlığı; tıklanınca gövde açılır/kapanır
    (Bootstrap collapse). Seçili filtre varsa sayısı rozet olarak başlıkta durur, kapalıyken de görünür.
    Liste ekranında tabloyu yukarı almak için: filtre kullanılmıyorsa kapalı başlar. */
.muys-katlanir-baslik {
    display: flex; align-items: center; gap: var(--muys-b2); width: 100%;
    padding: var(--muys-b2) var(--muys-b4);
    background: none; border: 0; text-align: left;
    font-weight: 600; color: var(--muys-metin);
}
.muys-katlanir-baslik:hover { color: var(--muys-birincil-500); }
.muys-katlanir-baslik:focus-visible { outline: 2px solid var(--muys-birincil-500); outline-offset: -2px; border-radius: var(--muys-kose); }
.muys-katlanir-ok { transition: transform .15s ease; }
.muys-katlanir-baslik[aria-expanded="true"] .muys-katlanir-ok { transform: rotate(90deg); }
.muys-katlanir-rozet {
    font-size: var(--muys-ol-etiket); font-weight: 600; line-height: 1;
    padding: .2rem .5rem; border-radius: 999px;
    background: var(--muys-birincil-500); color: #fff;
}
.muys-katlanir .muys-filtre-govde { border-top: var(--muys-cizgi) solid var(--muys-ayirici); }
@media (prefers-reduced-motion: reduce) { .muys-katlanir-ok { transition: none; } }
.muys-filtre-durum > .muys-secenekler { flex: 1 1 auto; }
/*  Özet sayaç şeridi — listenin durumunu tek satırda özetler (filtre DEĞİLDİR, bu yüzden
    filtre çerçevesinin dışında durur). Rozetler tablo etiketinden bir tık büyük. */
.muys-sayac-serit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--muys-b2); }
.muys-sayac-serit .muys-durum { font-size: var(--muys-ol-yardim); padding: .3rem .7rem; }
.muys-sayac-serit .btn { font-size: var(--muys-ol-yardim); }

/*  Amber eylem düğmesi — "başvurmayan: 3" gibi dikkat isteyen, tıklanınca liste açan sayaçlar.
    (Nötr outline düğme bu bağlamda silik kalıyordu.) */
.btn-uyari {
    --bs-btn-color: var(--muys-uyari);
    --bs-btn-bg: var(--muys-uyari-zemin);
    --bs-btn-border-color: var(--muys-uyari-kenar);
    --bs-btn-hover-color: var(--muys-uyari);
    --bs-btn-hover-bg: color-mix(in srgb, #c47f00 22%, #fff);
    --bs-btn-hover-border-color: #c47f00;
    --bs-btn-active-color: var(--muys-uyari);
    --bs-btn-active-bg: color-mix(in srgb, #c47f00 28%, #fff);
    --bs-btn-active-border-color: #c47f00;
    font-weight: 600;
}
@supports not (color: color-mix(in srgb, red, blue)) {
    .btn-uyari { --bs-btn-hover-bg: #f2dfbe; --bs-btn-active-bg: #ecd3a6; }
}
/* Düğmenin içindeki "Listele" ipucu: tıklanabilirliği görünür kılar. */
.muys-sayac-eylem {
    margin-left: var(--muys-b2); padding: .05rem .4rem;
    border-radius: var(--muys-kose-tam);
    background: rgba(255, 255, 255, .75);
    border: var(--muys-cizgi) solid var(--muys-uyari-kenar);
    font-size: var(--muys-ol-etiket); font-weight: 600;
}

/* Durum seçenekleri: radyo düğmesi yerine "pilule" görünümü — tıklama alanı büyük */
.muys-secenekler { display: flex; flex-wrap: wrap; gap: var(--muys-b2); }
.muys-secenek { position: relative; }
.muys-secenek input { position: absolute; opacity: 0; width: 0; height: 0; }
.muys-secenek label {
    display: inline-flex; align-items: center; gap: var(--muys-b2);
    padding: .3rem .7rem; border-radius: var(--muys-kose-tam);
    border: var(--muys-cizgi) solid var(--muys-kenarlik-kuv);
    background: var(--muys-yuzey); color: var(--muys-metin-ikincil);
    font-size: var(--muys-ol-yardim); font-weight: 500; cursor: pointer;
    transition: all var(--muys-gecis-hizli);
}
.muys-secenek label:hover { border-color: var(--muys-birincil-300); background: var(--muys-birincil-50); }
.muys-secenek input:checked + label {
    background: var(--muys-birincil-800); border-color: var(--muys-birincil-800);
    color: #fff; font-weight: 600;
}
.muys-secenek input:focus-visible + label { outline: 2px solid var(--muys-birincil); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   §13  Sayfalayıcı
   --------------------------------------------------------------------------- */
.muys-sayfalayici {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4);
    background: var(--muys-yuzey-alt);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
    font-size: var(--muys-ol-yardim);
}
.muys-sayfalayici:last-child { border-bottom: 0; border-top: var(--muys-cizgi) solid var(--muys-kenarlik); }
.muys-sayfalayici-bilgi { color: var(--muys-metin-ikincil); }
.muys-sayfalayici-bilgi strong { color: var(--muys-notr-900); }

/* ---------------------------------------------------------------------------
   §14  DURUM ROZETİ — bu uygulamanın en kritik bileşeni
        "Benim yapmam gereken" (eylem) ile "başkasından beklenen" (bekleyen)
        görsel olarak ayrışır: eylem = dolgulu + belirgin, bekleyen = soluk + kesikli.
        Renk tek başına anlam taşımaz; her rozette ikon veya metin de vardır.
   --------------------------------------------------------------------------- */
.muys-durum {
    display: inline-flex; align-items: center; gap: .35rem;
    max-width: 100%;
    padding: .18rem .5rem;
    border-radius: var(--muys-kose-sm);
    border: var(--muys-cizgi) solid var(--muys-notr-durum-kenar);
    background: var(--muys-notr-durum-zemin);
    color: var(--muys-notr-durum);
    font-size: var(--muys-ol-etiket); font-weight: 600; line-height: 1.4;
    text-align: left; white-space: normal;
}
.muys-durum > i { flex: 0 0 auto; font-size: .85em; }

/* — Bana düşen iş: dolgulu, kalın, dikkat çeker — */
.muys-durum--eylem {
    background: var(--muys-uyari-zemin);
    border-color: #c47f00;
    color: var(--muys-uyari);
    box-shadow: inset 3px 0 0 #c47f00;
    padding-left: .65rem;
}
/*  — Bana düşen ama ÖNCELİKLİ iş: eylem rozetinin kırmızı tonu.
      Aynı sütunda iki ayrı eylem varsa (ör. "ziyaret yok" ile "danışman puanı eksik")
      ikisi de amber olunca okunmadan aynı şey sanılıyordu; renk sırayı da anlatır:
      kırmızı = zincirin başındaki eksik (o olmadan puan girilemez), amber = sıradaki iş. — */
.muys-durum--eylem-acil {
    background: var(--muys-hata-zemin);
    border-color: var(--muys-hata);
    color: var(--muys-hata);
    box-shadow: inset 3px 0 0 var(--muys-hata);
    padding-left: .65rem;
}
/* — Başkasından beklenen / henüz olmamış: sakin ama NET okunur.
     "Sizden bir şey istenmiyor" mesajını rengin sakinliği verir; soluk gri metin +
     kesikli kenar okunaklılığı düşürdüğü için kullanılmaz (bkz. --sirada). — */
.muys-durum--bekleyen {
    background: var(--muys-notr-100);
    border-color: var(--muys-kenarlik-kuv);
    color: var(--muys-notr-800);
}
/* — Sırası HENÜZ GELMEMİŞ adım — yalnız onay akışı basamaklarında (_FormDurum).
     Kesikli kenar + soluk metin burada bilinçlidir: adım henüz "gerçek" değildir. — */
.muys-durum--sirada {
    background: var(--muys-yuzey);
    border-style: dashed;
    border-color: var(--muys-kenarlik-kuv);
    color: var(--muys-metin-soluk);
    font-weight: 500;
}
/* — Bitmiş / olumlu — */
.muys-durum--tamam {
    background: var(--muys-basari-zemin); border-color: var(--muys-basari-kenar); color: var(--muys-basari);
}
/* — Sorunlu / eksik — */
.muys-durum--hata {
    background: var(--muys-hata-zemin); border-color: var(--muys-hata-kenar); color: var(--muys-hata);
}
/* — Bilgi / süreç durumu — */
.muys-durum--bilgi {
    background: var(--muys-bilgi-zemin); border-color: var(--muys-bilgi-kenar); color: var(--muys-bilgi);
}
/* — Nötr bilgi etiketi (ör. "Kendi birimi: …") — */
.muys-durum--notr { background: var(--muys-notr-50); }
/* — Kapalı / pasif — */
.muys-durum--kapali {
    background: var(--muys-notr-100); border-color: var(--muys-kenarlik-kuv);
    color: var(--muys-metin-soluk); text-decoration: none; font-weight: 500;
}
/* — Süreç penceresi açık — */
.muys-durum--acik {
    background: var(--muys-ikincil-100);
    border-color: color-mix(in srgb, var(--muys-ikincil) 32%, #fff);
    color: var(--muys-ikincil-700);
}
@supports not (color: color-mix(in srgb, red, blue)) {
    .muys-durum--acik { border-color: #b6dcc5; }
}
/* Rozet yığını — bir hücrede birden çok durum alt alta */
.muys-durum-yigin { display: flex; flex-direction: column; gap: var(--muys-b1); align-items: flex-start; }

/* --- Bootstrap badge köprüsü ---------------------------------------------
   Ekranlarda hâlâ .badge kullanılan yerler de aynı görsel dile oturur:
   dolgulu koyu rozet yerine, durum rozetiyle aynı "yumuşak zemin + kenarlık"
   biçimi. Böylece yeni bir rozet eklenirken .muys-durum kullanılsa da,
   .badge text-bg-* kullanılsa da ekran tutarlı görünür.
   ------------------------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .5rem;
    border: var(--muys-cizgi) solid transparent;
    border-radius: var(--muys-kose-sm);
    font-size: var(--muys-ol-etiket); font-weight: 600; line-height: 1.4;
    white-space: normal; text-align: left;
}
.badge.text-bg-success   { background-color: var(--muys-basari-zemin) !important; color: var(--muys-basari) !important; border-color: var(--muys-basari-kenar); }
.badge.text-bg-warning   { background-color: var(--muys-uyari-zemin) !important; color: var(--muys-uyari) !important; border-color: var(--muys-uyari-kenar); }
.badge.text-bg-danger    { background-color: var(--muys-hata-zemin) !important; color: var(--muys-hata) !important; border-color: var(--muys-hata-kenar); }
.badge.text-bg-info      { background-color: var(--muys-bilgi-zemin) !important; color: var(--muys-bilgi) !important; border-color: var(--muys-bilgi-kenar); }
.badge.text-bg-primary   { background-color: var(--muys-birincil-100) !important; color: var(--muys-birincil-900) !important; border-color: var(--muys-birincil-200); }
.badge.text-bg-secondary { background-color: var(--muys-notr-durum-zemin) !important; color: var(--muys-notr-durum) !important; border-color: var(--muys-notr-durum-kenar); }
.badge.text-bg-light     { background-color: var(--muys-notr-50) !important; color: var(--muys-notr-700) !important; border-color: var(--muys-kenarlik-kuv); }
.badge.text-bg-dark      { background-color: var(--muys-notr-900) !important; color: #fff !important; border-color: var(--muys-notr-900); }

/* ---------------------------------------------------------------------------
   §15  Adım göstergesi (stepper) — e-onay akışı
   --------------------------------------------------------------------------- */
.muys-adimlar { list-style: none; margin: 0; padding: var(--muys-b2) 0; }
.muys-adim {
    position: relative;
    display: flex; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4) var(--muys-b3) var(--muys-b4);
}
/* Dikey bağlayıcı çizgi */
.muys-adim::before {
    content: ""; position: absolute;
    left: calc(var(--muys-b4) + .875rem); top: 2.4rem; bottom: -.4rem;
    width: 2px; background: var(--muys-kenarlik);
}
.muys-adim:last-child::before { display: none; }
.muys-adim--tamam::before { background: var(--muys-basari-kenar); }

.muys-adim-isaret {
    flex: 0 0 auto; z-index: 1;
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-yuzey);
    border: 2px solid var(--muys-kenarlik-kuv);
    color: var(--muys-metin-soluk);
    font-size: var(--muys-ol-etiket); font-weight: 700;
}
.muys-adim--tamam .muys-adim-isaret {
    background: var(--muys-basari); border-color: var(--muys-basari); color: #fff;
}
.muys-adim--simdi .muys-adim-isaret {
    background: #c47f00; border-color: #c47f00; color: #fff;
    box-shadow: 0 0 0 4px var(--muys-uyari-zemin);
}
.muys-adim-govde { min-width: 0; flex: 1 1 auto; }
.muys-adim-ad { font-size: var(--muys-ol-govde); font-weight: 600; color: var(--muys-notr-900); }
.muys-adim--sirada .muys-adim-ad { color: var(--muys-metin-soluk); font-weight: 500; }
.muys-adim-bilgi { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); margin-top: .1rem; }
.muys-adim-not {
    margin-top: var(--muys-b2); padding: var(--muys-b2) var(--muys-b3);
    background: var(--muys-yuzey-alt); border-left: 2px solid var(--muys-kenarlik-kuv);
    border-radius: 0 var(--muys-kose-sm) var(--muys-kose-sm) 0;
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
}
.muys-adim-durum { margin-top: var(--muys-b1); }
/* Adım rozeti rol adının yanında akar; satırı şişirmesin diye dolgusu kısılır. */
.muys-adim-rozet {
    margin-left: var(--muys-b2); vertical-align: middle; white-space: nowrap;
    padding: .05rem .4rem; line-height: 1.25;
    position: relative; top: -1px;
}
/* --eylem'in sol vurgu şeridi dar dolguda ikona yapışmasın. */
.muys-durum--eylem.muys-adim-rozet,
.muys-durum--eylem.muys-bildirim-durum { padding-left: .55rem; }

/* ---------------------------------------------------------------------------
   §16  Formlar (D4/D5)
   --------------------------------------------------------------------------- */
.form-label { font-size: var(--muys-ol-yardim); font-weight: 600; color: var(--muys-notr-800); margin-bottom: var(--muys-b1); }
.form-control, .form-select {
    border-color: var(--muys-kenarlik-kuv);
    border-radius: var(--muys-kose-sm);
    font-size: var(--muys-ol-govde);
    color: var(--muys-metin);
    transition: border-color var(--muys-gecis-hizli), box-shadow var(--muys-gecis-hizli);
}
/*  Bootstrap giriş alanlarının zemini --bs-body-bg'dir; bizde bu SAYFA ZEMİNİ (gri) olduğu için
    alanlar kartın/pencerenin zeminiyle aynı tona düşüp "kutu" gibi okunmuyordu. Zemin beyaza
    sabitlenir; salt-okunur/pasif alan aşağıda yine gri kalır (o ayrım kasıtlı). */
.form-control, .form-select { background-color: var(--muys-yuzey); }
.form-control::placeholder { color: var(--muys-notr-400); }
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--muys-birincil-300); }
.form-text { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); }
.input-group-text { background: var(--muys-yuzey-alt); border-color: var(--muys-kenarlik-kuv); color: var(--muys-metin-soluk); }

/* Salt-okunur alan: tarih penceresi kapalıyken net anlaşılmalı */
.form-control[readonly], .form-control:disabled, .form-select:disabled {
    background-color: var(--muys-notr-100);
    color: var(--muys-metin-ikincil);
    border-style: dashed;
    cursor: not-allowed;
}

/* Alan grubu */
.muys-alan-grup { margin-bottom: var(--muys-b5); }
.muys-alan-grup-baslik {
    display: flex; align-items: center; gap: var(--muys-b2);
    font-size: var(--muys-ol-kart); font-weight: 600; color: var(--muys-notr-900);
    padding-bottom: var(--muys-b2); margin-bottom: var(--muys-b3);
    border-bottom: var(--muys-cizgi) solid var(--muys-ayirici);
}
.muys-alan-grup-baslik i { color: var(--muys-birincil-600); }

/* Doğrulama */
.text-danger, .field-validation-error { color: var(--muys-hata) !important; font-size: var(--muys-ol-yardim); }
.input-validation-error { border-color: var(--muys-hata) !important; background: var(--muys-hata-zemin); }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
/* Hata yokken doğrulama özeti kutusu boş bir kutu olarak görünmesin. */
.validation-summary-valid { display: none !important; }

/* Form eylem çubuğu */
.muys-form-eylem {
    display: flex; gap: var(--muys-b2); flex-wrap: wrap; align-items: center;
    padding-top: var(--muys-b4); margin-top: var(--muys-b4);
    border-top: var(--muys-cizgi) solid var(--muys-ayirici);
}

/* ---------------------------------------------------------------------------
   DEĞER GİRİŞ LİSTESİ (puanlama, ders notu, kriter/ölçek girişleri)
   ---------------------------------------------------------------------------
   Sorun: etiket solda, kutu sağda ve ikisi de aynı tonda olunca hangi kutunun
   hangi satıra ait olduğu okunmuyordu. Çözüm:
     · satırlar arasında zebra + üzerine gelince vurgulama,
     · etiket ile değer arasında noktalı bağlantı çizgisi,
     · değer hücresi kendi zeminiyle ("giriş alanı burası" işareti),
     · odaklanılan satır kurumsal mavi şeritle işaretlenir.
   --------------------------------------------------------------------------- */
.muys-deger-liste { list-style: none; margin: 0; padding: 0; }

.muys-deger-satir {
    position: relative;
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4);
    border-bottom: var(--muys-cizgi) solid var(--muys-ayirici);
    transition: background var(--muys-gecis-hizli);
}
.muys-deger-satir:nth-child(even) { background: var(--muys-notr-50); }
.muys-deger-satir:last-child { border-bottom: 0; }
.muys-deger-satir:hover { background: var(--muys-birincil-50); }

/* Odaklanılan satır: kullanıcı hangi alandaysa o satır belirgin olur. */
.muys-deger-satir:focus-within { background: var(--muys-birincil-50); }
.muys-deger-satir::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--muys-cizgi-kalin);
    background: var(--muys-birincil); opacity: 0; transition: opacity var(--muys-gecis-hizli);
}
.muys-deger-satir:focus-within::before { opacity: 1; }

.muys-deger-etiket {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; gap: var(--muys-b2); flex-wrap: wrap;
    font-size: var(--muys-ol-govde); font-weight: 500; color: var(--muys-notr-900);
    cursor: default;
}
/* Etiketi değere bağlayan noktalı çizgi — uzun satırlarda göz kaymasını önler. */
.muys-deger-etiket::after {
    content: ""; flex: 1 1 auto; min-width: 1.5rem;
    align-self: center; height: 0;
    border-bottom: 1px dotted var(--muys-kenarlik-kuv);
}
.muys-deger-satir:hover .muys-deger-etiket::after,
.muys-deger-satir:focus-within .muys-deger-etiket::after { border-bottom-color: var(--muys-birincil-300); }

.muys-deger-kutu { flex: 0 0 auto; display: flex; align-items: center; gap: var(--muys-b2); }
.muys-deger-kutu .form-control {
    width: 6.5rem;
    text-align: center;
    font-size: 1rem; font-weight: 600;
    color: var(--muys-birincil-900);
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik-kuv);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05);
}
.muys-deger-kutu .form-control:hover:not([readonly]) { border-color: var(--muys-birincil-300); }
.muys-deger-kutu .form-control:focus { border-color: var(--muys-birincil); background: #fff; }
/* Salt-okunur / otomatik dolan değer: girilebilir alanla karışmasın. */
.muys-deger-kutu .form-control[readonly] {
    background: var(--muys-notr-100);
    color: var(--muys-metin-ikincil);
    border-style: dashed;
    box-shadow: none;
    font-weight: 500;
}
/* Ölçek ipucu (ör. "/100") — değerin sağında sabit genişlikte durur. */
.muys-deger-olcek {
    flex: 0 0 auto; width: 2.75rem;
    font-size: var(--muys-ol-etiket); font-weight: 600; color: var(--muys-metin-soluk);
}
.muys-deger-liste + .muys-form-eylem { margin-top: var(--muys-b4); }

/* Blok değişke: etiket üstte, giriş altta (anket soruları gibi uzun metinlerde) */
.muys-deger-satir--blok { display: block; }
.muys-soru { display: flex; align-items: flex-start; gap: var(--muys-b3); margin-bottom: var(--muys-b3); }
.muys-soru-sira {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil-100); color: var(--muys-birincil-900);
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
    font-size: var(--muys-ol-etiket); font-weight: 700;
}
.muys-soru-metin { font-size: var(--muys-ol-govde); font-weight: 500; color: var(--muys-notr-900); }
.muys-olcek { display: inline-flex; flex-wrap: wrap; gap: var(--muys-b1); margin-left: 2.35rem; }
.muys-olcek .btn {
    min-width: 2.75rem; font-weight: 600;
    border-radius: var(--muys-kose-sm) !important;   /* btn-group köşe birleştirmesini iptal et */
}
.muys-olcek .btn-check:checked + .btn { background: var(--muys-birincil); border-color: var(--muys-birincil); color: #fff; }
.muys-deger-satir--blok textarea.form-control { margin-left: 2.35rem; width: calc(100% - 2.35rem); }
@media (max-width: 575.98px) {
    .muys-olcek, .muys-deger-satir--blok textarea.form-control { margin-left: 0; width: 100%; }
}

@media (max-width: 575.98px) {
    .muys-deger-satir { flex-wrap: wrap; }
    .muys-deger-etiket::after { display: none; }
    .muys-deger-kutu { margin-left: auto; }
}

/* Uzun metin kutusu (taahhüt metni gibi kaydırılabilir salt-okunur alanlar) */
.muys-metin-kutu {
    max-height: 180px; overflow: auto;
    padding: var(--muys-b3);
    background: var(--muys-yuzey-alt);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose-sm);
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); line-height: 1.6;
}

/* Aç/kapa anahtarı (D5) */
.form-switch .form-check-input { width: 2.25rem; height: 1.15rem; }
.form-check-input:checked { background-color: var(--muys-birincil); border-color: var(--muys-birincil); }

/* Etiket/chip listesi (D5) */
.muys-chip-liste { display: flex; flex-wrap: wrap; gap: var(--muys-b2); }
.muys-chip {
    display: inline-flex; align-items: center; gap: var(--muys-b2);
    padding: .2rem .3rem .2rem .6rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil-50); border: var(--muys-cizgi) solid var(--muys-birincil-200);
    color: var(--muys-birincil-900); font-size: var(--muys-ol-yardim); font-weight: 500;
}
.muys-chip .btn-close { font-size: .55rem; padding: .25rem; }

/* ---------------------------------------------------------------------------
   §17  Düğmeler
   --------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--muys-kose-sm);
    --bs-btn-font-size: var(--muys-ol-govde);
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: .875rem;
    transition: background-color var(--muys-gecis-hizli), border-color var(--muys-gecis-hizli), box-shadow var(--muys-gecis-hizli);
}
.btn-sm { --bs-btn-font-size: var(--muys-ol-yardim); --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .625rem; }
.btn-primary {
    --bs-btn-bg: var(--muys-birincil); --bs-btn-border-color: var(--muys-birincil);
    --bs-btn-hover-bg: var(--muys-birincil-900); --bs-btn-hover-border-color: var(--muys-birincil-900);
    --bs-btn-active-bg: var(--muys-birincil-950); --bs-btn-active-border-color: var(--muys-birincil-950);
    --bs-btn-font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--muys-birincil-800); --bs-btn-border-color: var(--muys-birincil-300);
    --bs-btn-hover-bg: var(--muys-birincil-800); --bs-btn-hover-border-color: var(--muys-birincil-800);
    --bs-btn-active-bg: var(--muys-birincil-900);
}
.btn-success {
    --bs-btn-bg: var(--muys-ikincil); --bs-btn-border-color: var(--muys-ikincil);
    --bs-btn-hover-bg: var(--muys-ikincil-700); --bs-btn-hover-border-color: var(--muys-ikincil-700);
    --bs-btn-font-weight: 600;
}
.btn-outline-secondary {
    --bs-btn-color: var(--muys-notr-700); --bs-btn-border-color: var(--muys-kenarlik-kuv);
    --bs-btn-hover-bg: var(--muys-notr-100); --bs-btn-hover-color: var(--muys-notr-900);
    --bs-btn-hover-border-color: var(--muys-notr-400);
    --bs-btn-active-bg: var(--muys-notr-200); --bs-btn-active-color: var(--muys-notr-900);
    --bs-btn-active-border-color: var(--muys-notr-400);
}
.btn-outline-danger { --bs-btn-color: var(--muys-hata); --bs-btn-border-color: var(--muys-hata-kenar);
    --bs-btn-hover-bg: var(--muys-hata); --bs-btn-hover-border-color: var(--muys-hata); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--muys-kenarlik);
    --bs-dropdown-border-radius: var(--muys-kose);
    --bs-dropdown-font-size: var(--muys-ol-govde);
    --bs-dropdown-link-active-bg: var(--muys-birincil);
    box-shadow: var(--muys-golge-menu);
}
.dropdown-header { font-size: var(--muys-ol-etiket); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   §18  Uyarı kutuları ve toast
   --------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--muys-kose);
    border-width: var(--muys-cizgi);
    font-size: var(--muys-ol-yardim);
    line-height: 1.55;
}
.alert-info { --bs-alert-bg: var(--muys-bilgi-zemin); --bs-alert-border-color: var(--muys-bilgi-kenar); --bs-alert-color: var(--muys-notr-900); }
.alert-success { --bs-alert-bg: var(--muys-basari-zemin); --bs-alert-border-color: var(--muys-basari-kenar); --bs-alert-color: var(--muys-basari); }
.alert-warning { --bs-alert-bg: var(--muys-uyari-zemin); --bs-alert-border-color: var(--muys-uyari-kenar); --bs-alert-color: var(--muys-uyari); }
.alert-danger { --bs-alert-bg: var(--muys-hata-zemin); --bs-alert-border-color: var(--muys-hata-kenar); --bs-alert-color: var(--muys-hata); }
.alert-light { --bs-alert-bg: var(--muys-yuzey); --bs-alert-border-color: var(--muys-kenarlik); --bs-alert-color: var(--muys-metin); }

/* Toast — mesajlar uzun olabildiği için genişlik ve satır sarma esnek */
.muys-toast-kutu { z-index: 1090; max-width: min(420px, calc(100vw - 2rem)); }
.muys-toast {
    width: 100%;
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-left: var(--muys-cizgi-kalin) solid var(--muys-toast-renk, var(--muys-notr-600));
    border-radius: var(--muys-kose);
    box-shadow: var(--muys-golge-menu);
}
.muys-toast .toast-body {
    display: flex; gap: var(--muys-b3);
    font-size: var(--muys-ol-yardim); color: var(--muys-metin); line-height: 1.55;
    word-break: break-word;
}
.muys-toast .toast-body > i { flex: 0 0 auto; font-size: 1.05rem; color: var(--muys-toast-renk, var(--muys-notr-600)); margin-top: .05rem; }
.muys-toast--basari { --muys-toast-renk: var(--muys-basari); }
.muys-toast--bilgi  { --muys-toast-renk: var(--muys-birincil); }
.muys-toast--uyari  { --muys-toast-renk: #c47f00; }
.muys-toast--hata   { --muys-toast-renk: var(--muys-hata); }

/* ---------------------------------------------------------------------------
   §19  Boş durumlar / geri bildirim (D8)
   --------------------------------------------------------------------------- */
.muys-bos {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--muys-b2);
    padding: var(--muys-b7) var(--muys-b4);
    color: var(--muys-metin-ikincil);
}
.muys-bos-ikon {
    display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-notr-100); color: var(--muys-notr-400);
    font-size: 1.6rem; margin-bottom: var(--muys-b1);
}
.muys-bos-baslik { font-size: var(--muys-ol-kart); font-weight: 600; color: var(--muys-notr-800); }
.muys-bos-metin { font-size: var(--muys-ol-yardim); max-width: 46ch; margin: 0; }
.muys-bos-eylem { margin-top: var(--muys-b3); }
/* Tablo içindeki boş durum */
td > .muys-bos { padding-block: var(--muys-b5); }

/* Hata / yetkisiz sayfası */
.muys-sonuc {
    max-width: 620px; margin: var(--muys-b7) auto;
    text-align: center;
    background: var(--muys-yuzey); border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose-lg); box-shadow: var(--muys-golge-kart);
    padding: var(--muys-b6) var(--muys-b5);
}
.muys-sonuc-ikon {
    display: grid; place-items: center; margin: 0 auto var(--muys-b4);
    width: 4rem; height: 4rem; border-radius: var(--muys-kose-tam);
    font-size: 1.9rem;
    background: var(--muys-uyari-zemin); color: var(--muys-uyari);
}
.muys-sonuc-ikon--hata { background: var(--muys-hata-zemin); color: var(--muys-hata); }
.muys-sonuc h1 { font-size: 1.375rem; margin-bottom: var(--muys-b2); }
.muys-sonuc p { color: var(--muys-metin-ikincil); font-size: var(--muys-ol-govde); }
.muys-sonuc code {
    display: inline-block; padding: .1rem .4rem; border-radius: var(--muys-kose-sm);
    background: var(--muys-notr-100); color: var(--muys-notr-800); font-family: var(--muys-yazi-mono);
}

/* ---------------------------------------------------------------------------
   §20  Giriş ekranları (D7)
   --------------------------------------------------------------------------- */
.muys-giris {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: var(--muys-zemin);
}
/* Sol: kurumsal marka paneli */
.muys-giris-marka {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--muys-b5) var(--muys-b7) var(--muys-b6);
    background: linear-gradient(150deg, var(--muys-birincil-900) 0%, var(--muys-birincil-950) 62%, #001129 100%);
    color: #fff;
}
/* Yalnız yumuşak ışık geçişi — çapraz çizgi dokusu yok. */
.muys-giris-marka::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 85% 10%, color-mix(in srgb, var(--muys-ikincil) 26%, transparent), transparent 65%);
}
.muys-giris-marka > * { position: relative; z-index: 1; }

/* Üst şerit: solda +1 Uygulamalı Eğitim Modeli, sağda Koordinatörlük logosu */
.muys-giris-logolar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--muys-b4);
}
/* Kurumsal +1 logosu lacivert/yeşil olduğu için koyu zeminde beyaz zemine oturur. */
.muys-giris-logo-plaka {
    display: inline-flex; padding: var(--muys-b3);
    background: #fff; border-radius: var(--muys-kose-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.muys-giris-logo-plaka img { display: block; height: 84px; width: auto; }
.muys-giris-logo-koord { height: 62px; width: auto; opacity: .95; }

.muys-giris-slogan { font-size: 1.9rem; font-weight: 600; line-height: 1.25; max-width: 16ch; letter-spacing: -.015em; color: #fff; }
.muys-giris-aciklama { margin-top: var(--muys-b3); color: rgba(255,255,255,.75); font-size: var(--muys-ol-govde); max-width: 46ch; line-height: 1.6; }
.muys-giris-kunye { font-size: 1.0625rem; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .01em; }

/* Sağ: form */
.muys-giris-form { display: flex; align-items: center; justify-content: center; padding: var(--muys-b6) var(--muys-b5); }
.muys-giris-kutu { width: 100%; max-width: 380px; }
.muys-giris-baslik { font-size: 1.375rem; font-weight: 600; margin-bottom: var(--muys-b1); }
.muys-giris-alt { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); margin-bottom: var(--muys-b5); }
.muys-giris-ayirici {
    display: flex; align-items: center; gap: var(--muys-b3);
    margin: var(--muys-b5) 0 var(--muys-b3);
    font-size: var(--muys-ol-etiket); color: var(--muys-metin-soluk); text-transform: uppercase; letter-spacing: .06em;
}
.muys-giris-ayirici::before, .muys-giris-ayirici::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--muys-kenarlik);
}
.muys-giris-kart {
    background: var(--muys-yuzey); border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose); box-shadow: var(--muys-golge-kart);
    padding: var(--muys-b4);
}
@media (max-width: 991.98px) {
    .muys-giris { grid-template-columns: minmax(0, 1fr); }
    .muys-giris-marka { padding: var(--muys-b4); gap: var(--muys-b4); }
    .muys-giris-slogan { font-size: 1.375rem; max-width: none; }
    .muys-giris-logo-plaka img { height: 56px; }
    .muys-giris-logo-koord { height: 42px; }
    .muys-giris-form { padding: var(--muys-b5) var(--muys-b4) var(--muys-b6); }
}

/* ---------------------------------------------------------------------------
   §21  Yardımcı sınıflar
   --------------------------------------------------------------------------- */
.muys-yardim { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); line-height: 1.55; }
.muys-etiket { font-size: var(--muys-ol-etiket); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muys-metin-soluk); }
.muys-bolum-baslik {
    display: flex; align-items: center; gap: var(--muys-b2);
    font-size: var(--muys-ol-bolum); font-weight: 600; color: var(--muys-notr-900);
    margin-bottom: var(--muys-b3);
}
.muys-bolum-baslik i { color: var(--muys-birincil-600); }
.text-muted { color: var(--muys-metin-ikincil) !important; }
.muys-grafik { position: relative; height: 280px; }
.muys-grafik--kisa { height: 220px; }

/* Tanım listesi — detay ekranlarındaki özet alanı (D3) */
.muys-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--muys-b4); }
.muys-ozet-oge { min-width: 0; }
.muys-ozet-etiket { font-size: var(--muys-ol-etiket); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muys-metin-soluk); margin-bottom: .1rem; }
.muys-ozet-deger { font-size: var(--muys-ol-govde); font-weight: 600; color: var(--muys-notr-900); word-break: break-word; }

/* ---------------------------------------------------------------------------
   §21b  Diğer Bootstrap bileşenleri — aynı dile çekilir
   --------------------------------------------------------------------------- */
.modal {
    /* Pencere zemini kart gibi BEYAZ olmalı; --bs-body-bg (sayfa zemini) kalırsa
       içindeki giriş alanlarıyla aynı tona düşüp form "düz" görünüyordu. */
    --bs-modal-bg: var(--muys-yuzey);
    --bs-modal-header-border-color: var(--muys-ayirici);
    --bs-modal-footer-border-color: var(--muys-ayirici);
}
.modal-content {
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose-lg);
    box-shadow: var(--muys-golge-modal);
}
.modal-header { border-bottom-color: var(--muys-ayirici); padding: var(--muys-b4); }
.modal-title { font-size: var(--muys-ol-bolum); }
.modal-body { padding: var(--muys-b4); font-size: var(--muys-ol-govde); }
.modal-footer { border-top-color: var(--muys-ayirici); background: var(--muys-yuzey-alt); }

/*  Form penceresi başlığı — ikon + başlık + tek satır açıklama.
    "Yeni Talep (kendi şubeniz için)" gibi parantez içi açıklamalar başlığa yapışmasın. */
.muys-pencere-baslik { display: flex; align-items: center; gap: var(--muys-b3); min-width: 0; }
.muys-pencere-ikon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--muys-kose);
    background: var(--muys-birincil-100); color: var(--muys-birincil-800);
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
    font-size: 1.05rem;
}
.muys-pencere-baslik .modal-title { margin: 0; font-weight: 600; line-height: 1.25; }
.muys-pencere-alt { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); margin-top: .1rem; }
/*  Pencere kimin kaydı üzerinde çalıştığını söylüyorsa künye hapıyla gösterilir (§8).
    Hap BAŞLIĞIN YANINDA durur; dar ekranda alt satıra kayar. */
.muys-pencere-kisi {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--muys-b2) var(--muys-b3);
    min-width: 0;
}
.muys-pencere-kisi .muys-sayfa-kisi { font-size: var(--muys-ol-yardim); padding: .15rem .55rem .15rem .4rem; }

/*  Form penceresinde üç ton: başlık/altlık beyaz-gri, gövde hafif gri, giriş alanları BEYAZ.
    Her şey beyaz olunca alanların nerede başlayıp bittiği okunmuyordu. */
/*  Gövde tonu: --muys-yuzey-alt (%4 gri) beyaz alanların yanında fark edilmiyordu;
    bir kademe koyulaştırıldı ve gövde başlık/altlıktan ince çizgilerle ayrıldı. */
.muys-form-pencere .modal-body {
    background: var(--muys-notr-100);
    border-top: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
}
.muys-form-pencere .muys-alan-grup:last-child { margin-bottom: 0; }
.muys-form-pencere .muys-alan-grup-baslik { border-bottom-color: var(--muys-kenarlik-kuv); }
/* Giriş alanları beyaz kalır — "yazılacak yer burası" işareti. */
.muys-form-pencere .form-control,
.muys-form-pencere .form-select {
    background-color: var(--muys-yuzey);
    border-color: var(--muys-kenarlik-kuv);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.muys-form-pencere .form-text { color: var(--muys-metin-ikincil); }

/* Aramalı seçim (combobox): alan .form-select görünümünde durur; tıklanınca "Ara…" olur ve liste
   altında açılır, yazdıkça süzülür. Uzun listelerde ayrı arama kutusu yerine kullanılır.
   İlk kullanım: firma → Yeni Talep → Program. */
.muys-aramali-secim { position: relative; }
.muys-aramali-secim > .form-select { cursor: pointer; }
.muys-aramali-secim > .form-select:focus { cursor: text; }
.muys-aramali-secim > .form-select::placeholder { color: var(--muys-notr-400); }
.muys-aramali-secim-liste {
    position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + var(--muys-b1));
    max-height: 16rem; overflow-y: auto;
    margin: 0; padding: var(--muys-b1) 0; list-style: none;
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik-kuv);
    border-radius: var(--muys-kose);
    box-shadow: var(--muys-golge-menu);
}
.muys-aramali-secim-liste > li { padding: var(--muys-b2) var(--muys-b3); line-height: 1.3; cursor: pointer; }
.muys-aramali-secim-liste > li.muys-aramali-secim-isaretli { background: var(--muys-yuzey-vurgu); }
.muys-aramali-secim-liste > li[aria-selected="true"] { font-weight: 600; color: var(--muys-birincil); }
.muys-aramali-secim-liste > li.muys-aramali-secim-bos { cursor: default; color: var(--muys-metin-soluk); }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--muys-kenarlik);
    --bs-nav-tabs-link-active-color: var(--muys-birincil-900);
    --bs-nav-tabs-link-active-border-color: var(--muys-kenarlik) var(--muys-kenarlik) var(--muys-yuzey);
    --bs-nav-link-color: var(--muys-metin-ikincil);
    --bs-nav-link-hover-color: var(--muys-birincil-800);
    font-size: var(--muys-ol-yardim); font-weight: 600;
}

.accordion {
    --bs-accordion-border-color: var(--muys-kenarlik);
    --bs-accordion-border-radius: var(--muys-kose);
    --bs-accordion-btn-focus-box-shadow: var(--muys-odak);
    --bs-accordion-active-bg: var(--muys-birincil-50);
    --bs-accordion-active-color: var(--muys-birincil-900);
    --bs-accordion-btn-color: var(--muys-notr-900);
    box-shadow: var(--muys-golge-kart);
}
.accordion-button { font-weight: 600; font-size: var(--muys-ol-govde); }
.accordion-body { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); line-height: 1.6; }

.progress {
    --bs-progress-bg: var(--muys-notr-200);
    --bs-progress-border-radius: var(--muys-kose-tam);
    --bs-progress-bar-bg: var(--muys-birincil);
}

.list-group {
    /* Satır zemini Bootstrap'ta --bs-body-bg'den gelir; bizde o SAYFA ZEMİNİ (gri) olduğu için
       liste satırları kartla/sayfayla aynı tona düşüyordu. Beyaza sabitlenir. */
    --bs-list-group-bg: var(--muys-yuzey);
    --bs-list-group-color: var(--muys-metin);
    --bs-list-group-border-color: var(--muys-ayirici);
    --bs-list-group-item-padding-y: var(--muys-b3);
    --bs-list-group-item-padding-x: var(--muys-b4);
    --bs-list-group-action-hover-bg: var(--muys-birincil-50);
    --bs-list-group-active-bg: var(--muys-birincil);
    --bs-list-group-active-border-color: var(--muys-birincil);
    font-size: var(--muys-ol-govde);
}
/*  Satırın üzerine gelince vurgulanması, "hangi satırdaki düğmeye basıyorum?" sorusunu
    çözer — düğmeleri sağda hizalı listelerde şart. */
.list-group-item { transition: background var(--muys-gecis-hizli); }
.list-group-flush > .list-group-item:hover { background: var(--muys-birincil-50); }
/* Liste başlık şeridi (sütun adları) */
/* Pasif satır: soluk metin + sol gri şerit (zemin tonu değiştirilmez, okunurluk düşmesin). */
.muys-satir--pasif { color: var(--muys-metin-ikincil); box-shadow: inset 3px 0 0 var(--muys-kenarlik-kuv); }
.list-group-item.muys-liste-baslik {
    background: var(--muys-yuzey-alt);
    color: var(--muys-metin-ikincil);
    font-size: var(--muys-ol-etiket); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.list-group-flush > .list-group-item.muys-liste-baslik:hover { background: var(--muys-yuzey-alt); }

.table-light, .table > :not(caption) > * > .table-light { --bs-table-bg: var(--muys-yuzey-alt); }

/* ---------------------------------------------------------------------------
   §21c  Detay penceresi — data-muys-detay ile açılan öğrenci / firma künyesi
        Pencere üç katmandır: başlık şeridi → künye (hero) → bilgi blokları.
        Amaç: düz etiket-değer yığını yerine, tek bakışta okunan gruplu bir kart.
   --------------------------------------------------------------------------- */
.muys-detay-pencere .modal-header {
    background: var(--muys-yuzey-alt);
    padding: var(--muys-b3) var(--muys-b4);
}
.muys-detay-pencere .modal-title { font-weight: 600; font-size: var(--muys-ol-kart); color: var(--muys-metin-ikincil); }
.muys-detay-pencere .modal-body { padding: 0; }
.muys-detay-pencere .modal-footer { padding: var(--muys-b3) var(--muys-b4); }

.muys-detay-yukleniyor {
    display: flex; align-items: center; justify-content: center; gap: var(--muys-b2);
    padding: var(--muys-b7) var(--muys-b4);
    color: var(--muys-metin-ikincil); font-size: var(--muys-ol-yardim);
}
.muys-detay-uyari { padding: var(--muys-b6) var(--muys-b4); text-align: center; color: var(--muys-hata); margin: 0; }

/* Künye şeridi — kimin/neyin kartına baktığımız her zaman en üstte durur. */
.muys-detay-hero {
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b4) var(--muys-b5);
    background: linear-gradient(135deg, var(--muys-birincil-100), var(--muys-yuzey) 78%);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
}
.muys-detay-avatar {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil); color: var(--muys-metin-ters);
    font-weight: 600; font-size: 1.05rem; line-height: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--muys-birincil) 15%, #fff);
}
.muys-detay-avatar--firma {
    border-radius: var(--muys-kose); font-size: 1.35rem;
    background: var(--muys-yuzey); color: var(--muys-birincil-800);
    border: var(--muys-cizgi) solid var(--muys-birincil-200);
    box-shadow: var(--muys-golge-kart);
}
.muys-detay-hero > div { min-width: 0; }
.muys-detay-ad {
    font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--muys-notr-900);
    overflow-wrap: anywhere;
}
.muys-detay-meta {
    margin-top: .15rem; font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem;
}
.muys-detay-meta .muys-ayrac { color: var(--muys-notr-400); }

/* Bilgi blokları */
.muys-detay-govde { padding: var(--muys-b4) var(--muys-b5) var(--muys-b5); }
.muys-detay-izgara {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--muys-b3);
}
.muys-detay-blok {
    background: var(--muys-yuzey-alt);
    border: var(--muys-cizgi) solid var(--muys-ayirici);
    border-radius: var(--muys-kose);
    padding: var(--muys-b3) var(--muys-b4);
    min-width: 0;
}
.muys-detay-blok--tam { grid-column: 1 / -1; }
.muys-detay-blok-baslik {
    display: flex; align-items: center; gap: var(--muys-b2);
    font-size: var(--muys-ol-etiket); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muys-metin-soluk); margin-bottom: var(--muys-b2);
}
.muys-detay-blok-baslik i { color: var(--muys-birincil-600); font-size: .95rem; }

/* Etiket–değer satırları: ince ayırıcıyla ayrılır, hizalı okunur. */
.muys-detay-liste { margin: 0; }
.muys-detay-satir {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--muys-b3);
    padding: var(--muys-b2) 0;
    border-top: var(--muys-cizgi) solid var(--muys-ayirici);
}
.muys-detay-satir:first-child { border-top: 0; padding-top: 0; }
.muys-detay-satir:last-child { padding-bottom: 0; }
.muys-detay-satir dt {
    font-size: var(--muys-ol-yardim); font-weight: 500; color: var(--muys-metin-ikincil);
}
.muys-detay-satir dd {
    margin: 0; min-width: 0; font-size: var(--muys-ol-govde); color: var(--muys-metin);
    overflow-wrap: anywhere;
}
.muys-detay-bos { color: var(--muys-metin-soluk); }
/* Rozetin yanında akan serbest metin (ör. "Atandı  Ali Danışman"). */
.muys-detay-yan { margin-left: var(--muys-b2); color: var(--muys-metin); overflow-wrap: anywhere; }
/* Durumun yanına eklenen ikinci rozet (ör. "Yerleşti  Firma onayı bekleniyor"). */
.muys-detay-rozet { margin-left: var(--muys-b2); vertical-align: middle; position: relative; top: -1px; }
.muys-detay-alt { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); margin-top: .1rem; }
/* Sunucuda büyük harfle kaydedilen alan (ör. firma adı): yazarken de öyle görünsün; ipucu metni olduğu gibi kalsın. */
.muys-buyuk-harf { text-transform: uppercase; }
.muys-buyuk-harf::placeholder { text-transform: none; }
/* Blok içindeki tablo (ör. şube yetkilileri) beyaz zeminde durur. */
.muys-detay-blok .muys-tablo-sarmal {
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-ayirici);
    border-radius: var(--muys-kose-sm); overflow: hidden;
}
@media (max-width: 575.98px) {
    .muys-detay-hero { padding: var(--muys-b3) var(--muys-b4); }
    .muys-detay-govde { padding: var(--muys-b3) var(--muys-b4) var(--muys-b4); }
    .muys-detay-satir { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---------------------------------------------------------------------------
   §21d  Bildirim merkezi — akış (feed) görünümü
        Liste düz satır yığını değil, tarihe göre bölünmüş bir akıştır:
        her gün grubu arasında etiketli bir AYIRICI ÇİZGİ vardır. Böylece
        hepsi okunmuşken (renk farkı kalmayınca) bile bildirimler birbirine
        yapışmaz; nerede bittiği/başladığı görünür.
   --------------------------------------------------------------------------- */
.muys-bildirim-arac {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--muys-b3); flex-wrap: wrap;
    padding: var(--muys-b3) var(--muys-b4);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
    background: var(--muys-yuzey-alt);
}
.muys-bildirim-arac .btn-group .btn { font-weight: 500; }

/* Sayı rozeti (Okunmamış sekmesinde) */
.muys-bildirim-sayi {
    display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
    padding: 0 .35rem; margin-left: .35rem;
    border-radius: var(--muys-kose-tam);
    background: var(--muys-birincil); color: var(--muys-metin-ters);
    font-size: var(--muys-ol-etiket); font-weight: 600; line-height: 1;
}
.btn.active > .muys-bildirim-sayi { background: var(--muys-metin-ters); color: var(--muys-birincil-800); }

/* Akış gövdesi */
.muys-bildirim-akis { list-style: none; margin: 0; padding: 0; }

/* Gün ayırıcısı — etiket + hairline çizgi */
.muys-bildirim-ayrac {
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4) var(--muys-b2);
    background: var(--muys-yuzey);
}
.muys-bildirim-ayrac::after {
    content: ""; flex: 1 1 auto; height: var(--muys-cizgi); background: var(--muys-kenarlik);
}
.muys-bildirim-ayrac > span {
    flex: 0 0 auto;
    font-size: var(--muys-ol-etiket); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muys-metin-soluk);
}

/* Tek bildirim satırı */
.muys-bildirim {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4);
    /* Ayırıcı çizgi bilerek görünür tonda: hepsi okunmuşken renk farkı kalmaz,
       satırları birbirinden ayıran tek şey bu çizgidir. */
    border-top: var(--muys-cizgi) solid var(--muys-kenarlik);
    transition: background-color var(--muys-gecis-hizli);
}
/* Grubun ilk satırı ayracın hemen altındadır; üstüne ikinci bir çizgi koyma. */
.muys-bildirim-ayrac + .muys-bildirim { border-top: 0; }
.muys-bildirim:hover { background: var(--muys-birincil-50); }

/* Okunmamış: sol renk şeridi + hafif zemin + koyu başlık */
.muys-bildirim--yeni { background: var(--muys-yuzey-vurgu); }
.muys-bildirim--yeni::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: var(--muys-cizgi-kalin);
    background: var(--muys-birincil);
}
.muys-bildirim--yeni:hover { background: var(--muys-birincil-100); }

/* Tür ikonu */
.muys-bildirim-ikon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-notr-100); color: var(--muys-notr-600); font-size: 1rem;
}
.muys-bildirim--yeni .muys-bildirim-ikon { background: var(--muys-birincil-200); color: var(--muys-birincil-800); }
.muys-bildirim-ikon--is { background: var(--muys-uyari-zemin); color: var(--muys-uyari); }

.muys-bildirim-govde { min-width: 0; }
.muys-bildirim-baslik {
    font-size: var(--muys-ol-govde); font-weight: 500; color: var(--muys-notr-800);
    overflow-wrap: anywhere; margin: 0;
}
.muys-bildirim--yeni .muys-bildirim-baslik { font-weight: 600; color: var(--muys-notr-900); }
.muys-bildirim-mesaj {
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); line-height: 1.5;
    margin: .15rem 0 0; overflow-wrap: anywhere;
}
/* Durum rozeti başlığın yanında akar: uzun başlıkta alta kayar, satırı bozmaz.
   Satır yüksekliğini şişirmemesi için dolgusu ve satır aralığı kısılır. */
.muys-bildirim-durum {
    margin-left: var(--muys-b2); vertical-align: middle; white-space: nowrap;
    padding: .05rem .4rem; line-height: 1.25;
    position: relative; top: -2px;   /* satır kutusunun optik ortasına oturt */
}

/* Sağ sütun: zaman + eylemler */
.muys-bildirim-yan {
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--muys-b2);
    text-align: right;
}
.muys-bildirim-zaman {
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-soluk); white-space: nowrap;
}
/* Okunmuş satırlar okunmamışların yanında geri planda kalsın (ama okunabilir). */
.muys-bildirim--okundu .muys-bildirim-baslik { color: var(--muys-metin-ikincil); }

@media (max-width: 767.98px) {
    .muys-bildirim { grid-template-columns: auto minmax(0, 1fr); }
    .muys-bildirim-yan {
        grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start;
        flex-wrap: wrap; text-align: left;
    }
}

/* ---------------------------------------------------------------------------
   §21e  Puan kriterleri — numaralı, çizgiyle ayrılmış kriter listesi
        Kriterler birbirine yapışmasın diye her satır ayırıcı çizgiyle ayrılır;
        "yeni kriter" alanı ayrı zeminde durur ki liste ile yazılabilir alan
        birbirine karışmasın (boş durum metni input sanılıyordu).
   --------------------------------------------------------------------------- */
.muys-kriter-liste { list-style: none; margin: 0; padding: 0; }
.muys-kriter {
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4);
    border-top: var(--muys-cizgi) solid var(--muys-kenarlik);
}
.muys-kriter:first-child { border-top: 0; }
/* Zebra + hover: uzun listelerde satırdaki düğmenin hangi kaleme ait olduğu şaşmasın. */
.muys-kriter:nth-child(even) { background: var(--muys-notr-50); }
.muys-kriter:hover { background: var(--muys-birincil-50); }

/* ---------------------------------------------------------------------------
   SÜREÇ TAKVİMİ SATIRLARI — süreç adı + iki tarih alanı + işlem düğmeleri
   Satırlar beyaz zeminde, zebra + hover ile ayrılır: hangi tarihin hangi sürece
   ait olduğu ve hangi düğmenin hangi satırı kaydettiği tereddütsüz görünür.
   --------------------------------------------------------------------------- */
.muys-takvim { list-style: none; margin: 0; padding: 0; }
.muys-takvim-baslik,
.muys-takvim-satir {
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b3) var(--muys-b4);
}
.muys-takvim-baslik {
    background: var(--muys-yuzey-alt);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
    font-size: var(--muys-ol-etiket); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--muys-metin-ikincil);
}
.muys-takvim-satir {
    border-top: var(--muys-cizgi) solid var(--muys-ayirici);
    background: var(--muys-yuzey);
    transition: background var(--muys-gecis-hizli);
}
.muys-takvim-satir:first-child { border-top: 0; }
.muys-takvim-satir:nth-child(even) { background: var(--muys-notr-50); }
.muys-takvim-satir:hover,
.muys-takvim-satir:focus-within { background: var(--muys-birincil-50); }
.muys-takvim-form { display: contents; }
.muys-takvim-surec { flex: 2 1 14rem; min-width: 0; display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap; }
.muys-takvim-ad { font-weight: 600; color: var(--muys-notr-900); }
.muys-takvim-tarih { flex: 1 1 11rem; min-width: 0; }
.muys-takvim-tarih .form-control { background-color: var(--muys-yuzey); }
.muys-takvim-etiket { font-size: var(--muys-ol-etiket); color: var(--muys-metin-ikincil); display: block; margin-bottom: .1rem; }
.muys-takvim-eylem { flex: 0 0 auto; }
.muys-takvim-sil { flex: 0 0 2.25rem; display: flex; justify-content: flex-end; }
@media (max-width: 991.98px) {
    .muys-takvim-satir { flex-wrap: wrap; }
    .muys-takvim-surec { flex: 1 1 100%; }
    .muys-takvim-tarih { flex: 1 1 45%; }
}

/* ---------------------------------------------------------------------------
   AĞAÇ LİSTESİ — birim hiyerarşisi (fakülte → bölüm → program)
   Her satır kendi zemini ve hover vurgusuyla ayrılır: sağdaki düğmelerin hangi
   birime ait olduğu tereddütsüz görünsün. Girinti çizgisi derinliği gösterir.
   --------------------------------------------------------------------------- */
.muys-agac { list-style: none; margin: 0; padding: 0; }
.muys-agac-satir {
    position: relative;
    display: flex; align-items: center; gap: var(--muys-b3); flex-wrap: wrap;
    padding: var(--muys-b3) var(--muys-b4);
    padding-left: calc(var(--muys-b4) + var(--muys-agac-derinlik, 0) * 1.5rem);
    border-top: var(--muys-cizgi) solid var(--muys-ayirici);
    background: var(--muys-yuzey);
    transition: background var(--muys-gecis-hizli);
}
.muys-agac-satir:first-child { border-top: 0; }
.muys-agac-satir:hover { background: var(--muys-birincil-50); }
/* Kök birimler (fakülte/MYO) hafif vurgulu: ağacın ana dalları belli olsun. */
.muys-agac-satir--kok { background: var(--muys-yuzey-alt); }
.muys-agac-satir--kok .muys-agac-ad { font-weight: 600; color: var(--muys-notr-900); }
/* Girinti çizgisi — alt birimlerin hangi dala bağlı olduğunu gösterir. */
.muys-agac-satir:not(.muys-agac-satir--kok)::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--muys-b4) + (var(--muys-agac-derinlik, 1) - 1) * 1.5rem + .35rem);
    width: var(--muys-cizgi); background: var(--muys-kenarlik);
}
.muys-agac-govde { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--muys-b2) var(--muys-b3); flex-wrap: wrap; }
.muys-agac-ad { font-size: var(--muys-ol-govde); color: var(--muys-metin); overflow-wrap: anywhere; }
.muys-agac-ok { color: var(--muys-notr-400); margin-right: var(--muys-b1); }
.muys-agac-rozetler { display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap; }

/* Sıra numarası — kriterin kaçıncı olduğu puanlama ekranıyla eşleşir. */
.muys-kriter-no {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem; border-radius: var(--muys-kose-tam);
    background: var(--muys-notr-100); color: var(--muys-metin-ikincil);
    font-size: var(--muys-ol-etiket); font-weight: 600;
}
.muys-kriter-metin { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.muys-kriter-duzenle { flex: 1 1 auto; display: flex; gap: var(--muys-b2); min-width: 0; }
.muys-kriter-eylem { flex: 0 0 auto; }

/* Ölçek şeridi ve ekleme şeridi: kartın gövdesinden ayrı zeminler */
.muys-kriter-olcek {
    padding: var(--muys-b3) var(--muys-b4);
    background: var(--muys-yuzey-alt);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
}
/*  Ekleme alanı listenin ÜSTÜNDE durur: kriter sayısı arttıkça (10+) aşağıdaki form
    ekrandan çıkıyor, kullanıcı eklemek için her seferinde sayfayı kaydırmak zorunda kalıyordu. */
.muys-kriter-ekle {
    padding: var(--muys-b3) var(--muys-b4);
    background: var(--muys-yuzey-alt);
    border-bottom: var(--muys-cizgi) solid var(--muys-kenarlik);
}
/* Gri şeritte yazı alanı zeminle aynı tona düşmesin: yazılabilir yer beyaz kalır. */
.muys-kriter-ekle .form-control,
.muys-kriter-olcek .form-control { background-color: var(--muys-yuzey); }

/* ---------------------------------------------------------------------------
   §21d  ÖZET LİSTESİ (etiket ↔ değer) — okunur olması için hizalama şart
   ---------------------------------------------------------------------------
   Sorun: "Başvurunuz alınmıştır" gibi özet kutularında etiket solda, değer sağda,
   ikisi de aynı renkteydi; hangi değerin hangi satıra ait olduğu okunmuyordu.
   Çözüm: etiketi değere bağlayan noktalı çizgi + satır ayırıcı + değer vurgusu.
   (Puanlama ekranındaki `.muys-deger-liste` deseninin salt-okunur kardeşi.)
   --------------------------------------------------------------------------- */
.muys-ozet-liste { list-style: none; margin: 0; padding: 0; }
/*  Satır AYIRICI çizgi YOK: etiketi değere bağlayan noktalı çizgiyle karışıp
    "hangi çizgi neyi gösteriyor?" belirsizliği yaratıyordu. Satırları noktalı
    bağlantı + dolgu + üzerine gelince beliren zemin ayırır. */
.muys-ozet-satir {
    display: flex; align-items: baseline; gap: var(--muys-b3);
    padding: var(--muys-b2) var(--muys-b2);
    border-radius: var(--muys-kose-sm);
    transition: background var(--muys-gecis-hizli);
}
.muys-ozet-satir:hover { background: var(--muys-birincil-50); }
.muys-ozet-satir-etiket {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; gap: var(--muys-b2);
    font-size: var(--muys-ol-govde); color: var(--muys-metin-ikincil);
}
/* Göz kayması olmasın diye etiketi değere bağlayan noktalı çizgi. */
.muys-ozet-satir-etiket::after {
    content: ""; flex: 1 1 auto; min-width: 1.5rem;
    align-self: center; height: 0;
    border-bottom: 1px dotted var(--muys-kenarlik);
}
.muys-ozet-satir:hover .muys-ozet-satir-etiket::after { border-bottom-color: var(--muys-birincil-300); }
.muys-ozet-satir-deger {
    flex: 0 0 auto; max-width: 55%; text-align: right;
    font-size: var(--muys-ol-govde); font-weight: 600; color: var(--muys-notr-900);
    overflow-wrap: anywhere;
}
.muys-ozet-satir-deger .muys-ozet-satir-alt {
    display: block; font-size: var(--muys-ol-yardim); font-weight: 400; color: var(--muys-metin-soluk);
}
/* Tek tek okunması gereken teknik değerler (IBAN, TC, telefon) */
.muys-ozet-satir-deger--kod { font-family: var(--muys-yazi-mono); font-size: var(--muys-ol-tablo); letter-spacing: .01em; }
@media (max-width: 575.98px) {
    .muys-ozet-satir { flex-direction: column; align-items: stretch; gap: var(--muys-b1); }
    .muys-ozet-satir-etiket::after { display: none; }
    .muys-ozet-satir-deger { max-width: none; text-align: left; }
}

/*  Durum şeridi — kartın "işlem tamam" başlığı. Kart gövdesinde ayrı bir kutu olarak
    durunca kart içinde kart görünüyordu; artık kartın ÜST ŞERİDİ: tam genişlikte, ince,
    altındaki listeye tek çizgiyle bağlanır.
    NOT: adı `.muys-sonuc` DEĞİL — o ad hata/yetkisiz sayfasının ortalanmış kutusuna ait (§19). */
.muys-kart-serit {
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b2) var(--muys-b4);
    background: var(--muys-basari-zemin);
    border-bottom: var(--muys-cizgi) solid var(--muys-basari-kenar);
}
.card > .muys-kart-serit:first-child { border-radius: var(--muys-kose) var(--muys-kose) 0 0; }
.muys-kart-serit-ikon { flex: 0 0 auto; font-size: 1.15rem; color: var(--muys-basari); line-height: 1; }
.muys-kart-serit-baslik { font-size: var(--muys-ol-govde); font-weight: 600; color: var(--muys-notr-900); }
.muys-kart-serit-alt { font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil); }
.muys-kart-serit-eylem { margin-left: auto; }
@media (max-width: 575.98px) {
    .muys-kart-serit { flex-wrap: wrap; }
    .muys-kart-serit-eylem { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   §21e  DOSYA SATIRI — yüklenmiş/eksik belge + eylem düğmesi
   ---------------------------------------------------------------------------
   Belge listelerinde her şey aynı tonda düz metindi; "yüklendi mi?" ve "nereye
   basacağım?" ayırt edilmiyordu. Her belge kendi kutusunda: durum rengi taşıyan
   ikon karesi, ad + tarih, sağda eylem düğmesi.
   --------------------------------------------------------------------------- */
.muys-dosya-liste { display: grid; gap: var(--muys-b2); }
.muys-dosya {
    display: flex; align-items: center; gap: var(--muys-b3);
    padding: var(--muys-b3);
    background: var(--muys-yuzey);
    border: var(--muys-cizgi) solid var(--muys-kenarlik);
    border-radius: var(--muys-kose);
    transition: border-color var(--muys-gecis-hizli), box-shadow var(--muys-gecis-hizli);
}
.muys-dosya:hover { border-color: var(--muys-birincil-300); box-shadow: var(--muys-golge-kart); }
.muys-dosya-ikon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--muys-kose);
    background: var(--muys-basari-zemin); color: var(--muys-basari);
    border: var(--muys-cizgi) solid var(--muys-basari-kenar);
    font-size: 1.15rem;
}
/* Henüz yüklenmemiş / bilgilendirme amaçlı satır */
.muys-dosya--bos { background: var(--muys-yuzey-alt); border-style: dashed; }
.muys-dosya--bos .muys-dosya-ikon {
    background: var(--muys-notr-100); color: var(--muys-metin-soluk); border-color: var(--muys-kenarlik-kuv);
}
.muys-dosya-govde { flex: 1 1 auto; min-width: 0; }
.muys-dosya-ad { font-size: var(--muys-ol-govde); font-weight: 600; color: var(--muys-notr-900); overflow-wrap: anywhere; }
.muys-dosya-bilgi {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--muys-b1) var(--muys-b2);
    margin-top: .15rem; font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
}
.muys-dosya-eylem { flex: 0 0 auto; display: flex; align-items: center; gap: var(--muys-b2); }
@media (max-width: 575.98px) {
    .muys-dosya { flex-wrap: wrap; }
    .muys-dosya-eylem { width: 100%; justify-content: flex-end; }
}

/*  Tablo içindeki belge hücresi — durum satırı + eylem satırı HER ZAMAN aynı yapıda olur.
    Belge yüklü olan satırda fazladan bir bağlantı çıkınca yükleme alanları kayıyordu. */
/*  Belge hucresi: durum rozeti + tek eylem dugmesi yan yana. Dosya secme alanlari
    satir basina tekrar edip ekrani sisirdigi icin yukleme artik pencerede yapiliyor;
    bu yuzden hucre daralabilir (min-width kalktı). */
.muys-belge-hucre {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--muys-b1) var(--muys-b2);
}
/* Belgesi olmayan hucre: sessiz bir cizgi — "eksik" izlenimi vermeden bosluk doldurur. */
.muys-belge-yok { color: var(--muys-metin-ucuncul, var(--muys-metin-ikincil)); }
.muys-belge-hucre-durum {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--muys-b1) var(--muys-b2);
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
}
.muys-belge-hucre-eylem { display: flex; align-items: center; gap: var(--muys-b2); flex-wrap: wrap; }
.muys-belge-hucre-eylem form { display: flex; align-items: center; gap: var(--muys-b2); }
.muys-belge-hucre-eylem .form-control { max-width: 11.5rem; }

/* Yükleme kutusu — dosya seç + gönder ikilisi tek satırda, ayrı bir alan gibi */
.muys-yukleme {
    margin-top: var(--muys-b3); padding: var(--muys-b3);
    background: var(--muys-yuzey-alt);
    border: var(--muys-cizgi) dashed var(--muys-kenarlik-kuv);
    border-radius: var(--muys-kose);
}
.muys-yukleme-satir { display: flex; gap: var(--muys-b2); align-items: center; flex-wrap: wrap; }
.muys-yukleme-satir .form-control { flex: 1 1 12rem; min-width: 0; }
.muys-yukleme .form-text { margin-top: var(--muys-b2); margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   §22  Baskı (§8 — tarayıcıdan yazdırma)
   --------------------------------------------------------------------------- */
@media print {
    :root { --muys-zemin: #fff; }

    /* Ekrana ait olan her şey gizlenir */
    .muys-kenar, .muys-ust, .muys-perde, .muys-filtre, .muys-sayfalayici,
    .muys-satir-eylem, .muys-geri, .muys-atla, .muys-kpi-ok, .muys-bos-eylem,
    .toast-container, .btn, form[method="get"], .muys-form-eylem, .muys-yazdirma-gizle {
        display: none !important;
    }
    /* Simülasyon bandı çıktıda da görünsün — kimin adına işlem yapıldığı bilgisi kritik */
    .muys-simulasyon { display: flex !important; background: #fff !important; color: #000 !important;
        border: 2px solid #000 !important; }
    .muys-simulasyon strong { color: #000; }
    .muys-simulasyon .btn { display: none !important; }

    body, .muys-kabuk, .muys-icerik { display: block !important; background: #fff !important; }
    .muys-govde { max-width: none; padding: 0; margin: 0; }

    .card, .muys-kpi {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        break-inside: avoid;
    }
    .card > .card-header { background: #fff !important; border-bottom: 1px solid #999 !important; }

    /* Tablolar siyah-beyazda okunur: renk yerine kenarlık ve dolgu */
    .table { font-size: 10pt; }
    .table > thead th {
        background: #eee !important; color: #000 !important;
        border-bottom: 1.5pt solid #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .table > tbody > tr > td { border-bottom: .5pt solid #bbb !important; }
    thead { display: table-header-group; }   /* başlık her sayfada tekrar */
    tfoot { display: table-footer-group; }
    tr, .muys-adim { break-inside: avoid; page-break-inside: avoid; }
    .muys-tablo-sarmal, .table-responsive { overflow: visible !important; }

    /* Rozetler renk olmadan da ayrışsın */
    .muys-durum, .badge {
        background: #fff !important; color: #000 !important;
        border: .75pt solid #000 !important; box-shadow: none !important;
    }
    .muys-durum--sirada { border-style: dashed !important; color: #555 !important; }
    .muys-durum--tamam::before { content: "\2713\00a0"; }

    /* Adım göstergesi */
    .muys-adim-isaret { background: #fff !important; color: #000 !important; border: 1pt solid #000 !important; }
    .muys-adim--tamam .muys-adim-isaret::after { content: ""; }

    .muys-serit { border: 1pt solid #999 !important; background: #fff !important; }
    a { text-decoration: none !important; color: #000 !important; }
    h1, h2, h3 { break-after: avoid; }
    @page { margin: 14mm 12mm; }
}

/*  Sayfa başlığındaki BAĞLAM rozeti (ör. öğrencinin yerleştiği firma).
    Daha önce açıklama metni gibi soluk görünüyordu ve tıklanabilir olduğu anlaşılmıyordu;
    artık künye rozetiyle aynı ağırlıkta, ayırt edilsin diye nötr renkte ve tıklanabilir. */
.muys-sayfa-baglam {
    display: inline-flex; align-items: center; gap: var(--muys-b2);
    padding: .2rem .6rem .2rem .45rem;
    border-radius: var(--muys-kose-tam);
    background: var(--muys-yuzey-alt);
    border: var(--muys-cizgi) solid var(--muys-kenarlik-kuv);
    color: var(--muys-metin);
    font-size: var(--muys-ol-govde); font-weight: 600; line-height: 1.35;
    text-decoration: none;
}
.muys-sayfa-baglam:hover,
.muys-sayfa-baglam:focus-visible {
    background: var(--muys-birincil-100);
    border-color: var(--muys-birincil-200);
    color: var(--muys-birincil-900);
}
.muys-sayfa-baglam i { color: var(--muys-metin-ikincil); }
.muys-sayfa-baglam:hover i, .muys-sayfa-baglam:focus-visible i { color: inherit; }

/* ---------------------------------------------------------------------------
   §22  Anket katılım tablosu (Kalite) — kırılım açılır satırlar
   --------------------------------------------------------------------------- */
/* Düşük katılım vurgusu: %50 altı oranlar kırmızı zeminle işaretlenir. */
.muys-oran--dusuk {
    background: var(--muys-hata-zemin);
    color: var(--muys-hata);
    font-weight: 600;
}

/* Fakülte/MYO satırı tıklanabilir (kırılımı açar) — yalnız altı olan satırlarda. */
.muys-katilim-ust[data-hedef] { cursor: default; }
.muys-katilim-ust:has(.muys-kirilim-ok) { cursor: pointer; }

.muys-kirilim-ok {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; margin-right: var(--muys-b2);
    padding: 0; border: 0; border-radius: var(--muys-kose-sm);
    background: transparent; color: var(--muys-birincil-600);
    transition: transform var(--muys-gecis-hizli), background var(--muys-gecis-hizli);
}
.muys-kirilim-ok:hover { background: var(--muys-birincil-50); }
.muys-kirilim-ok.acik { transform: rotate(90deg); }
.muys-kirilim-ok:focus-visible { outline: 2px solid var(--muys-birincil); outline-offset: 1px; }

/* Oku olmayan satırlarda ad hizası kaymasın diye aynı genişlikte boşluk. */
.muys-kirilim-bosluk { display: inline-block; width: 1.4rem; margin-right: var(--muys-b2); }

/* Program satırı: üst satırdan görsel olarak ayrılsın (girinti + soluk ad). */
.muys-katilim-alt > td { background: var(--muys-notr-50); }
.muys-katilim-alt-ad {
    padding-left: 2.4rem !important;
    font-size: var(--muys-ol-yardim); color: var(--muys-metin-ikincil);
}

/* ---------------------------------------------------------------------------
   §23  Anket sonuç tablosu (Kalite) — Genel Memnuniyet satırı
   --------------------------------------------------------------------------- */
/*  Genel Memnuniyet, ifade satırlarından farklı bir şey söylüyor (tüm ifadelerin
    ortalaması); tablonun içinde sıradan bir satır gibi durunca gözden kaçıyordu.
    Renkli bant + kalın yazı ile "bu bir özet satırı" olduğu ilk bakışta anlaşılsın. */
.muys-anket-sonuc tfoot .muys-genel-memnuniyet > td {
    background: var(--muys-birincil-100);
    color: var(--muys-birincil-900);
    font-weight: 700;
    border-top: 2px solid var(--muys-birincil-200);
}

/* ---- Yardım sayfası: adım adım kılavuz listesi ----------------------------
   Numaralar bilerek belirgin: kullanıcı ekranla yardım arasında gidip gelirken
   kaldığı adımı gözüyle bulabilmeli. Var olan .muys-adimlar (zaman çizelgesi)
   ile karıştırılmasın diye ayrı bir ad kullanılır. */
.muys-kilavuz-adimlar {
    list-style: none;
    counter-reset: kilavuz;
    margin: 0;
    padding: 0;
}
.muys-kilavuz-adimlar > li {
    counter-increment: kilavuz;
    position: relative;
    padding: var(--muys-b2) 0 var(--muys-b2) calc(var(--muys-b6) + var(--muys-b1));
    border-bottom: 1px solid var(--muys-kenarlik);
    line-height: 1.55;
}
.muys-kilavuz-adimlar > li:last-child { border-bottom: 0; padding-bottom: 0; }
.muys-kilavuz-adimlar > li::before {
    content: counter(kilavuz);
    position: absolute;
    inset-inline-start: 0;
    top: var(--muys-b2);
    width: var(--muys-b6);
    height: var(--muys-b6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--muys-birincil-100);
    color: var(--muys-birincil-900);
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1;
}

/*  Kenar çubuğu ipucu (site.js → bootstrap.Tooltip, customClass). Varsayılan siyah kutu dar ve
    tek satır odaklı; menü açıklamaları iki satıra yayılabildiği için biraz daha geniş ve okunaklı. */
.muys-menu-ipucu { --bs-tooltip-max-width: 18rem; --bs-tooltip-font-size: .8rem;
    --bs-tooltip-padding-x: .7rem; --bs-tooltip-padding-y: .5rem; --bs-tooltip-opacity: .96; }
.muys-menu-ipucu .tooltip-inner { text-align: left; line-height: 1.45; }

/* Açık süreç satırındaki "ilgili ekrana git" bağlantısı. */
.muys-pano-rehber-bag {
    display: inline-flex; align-items: center; gap: .25rem;
    font-weight: 600; color: var(--muys-birincil-800); text-decoration: none; white-space: nowrap;
}
.muys-pano-rehber-bag:hover { text-decoration: underline; }

/* Kullanıcı Sözleşmesi / KVKK Aydınlatma Metni (firma kayıt modalları). */
.muys-yasal-metin { font-size: .9rem; line-height: 1.55; text-align: justify; }
.muys-yasal-metin .muys-metin-baslik { text-align: center; margin-bottom: .25rem; color: var(--muys-birincil-800); }
.muys-yasal-metin .muys-metin-bolum { font-weight: 700; margin: 1.1rem 0 .5rem; color: var(--muys-birincil-800); }
.muys-yasal-metin p { margin-bottom: .5rem; }
.muys-yasal-metin table { font-size: .85rem; text-align: left; }
.muys-yasal-metin table td:first-child { width: 35%; }
/* İlk girişteki zorunlu onay modalında açılır metin kutusu. */
.muys-yasal-metin-kutu { max-height: 40vh; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .75rem 1rem; background: var(--bs-tertiary-bg); }
/* Ortalı başlık şablonda <strong> ile gelir; editörde yeni yazılan başlık da kalın görünsün. */
.muys-yasal-metin .muys-metin-baslik { font-weight: 700; }

/* Yasal Metinler düzenleme ekranı: basit metin editörü ve HTML kaynağı görünümü. */
.muys-editor { min-height: 50vh; max-height: 70vh; overflow-y: auto; padding: 1rem 1.25rem; outline: none; }
.muys-editor:focus-visible { box-shadow: inset 0 0 0 2px var(--muys-birincil-800); }
.muys-editor table td, .muys-editor table th { min-width: 4rem; }
.muys-editor-kaynak { min-height: 50vh; font-family: var(--bs-font-monospace); font-size: .8rem; border: 0; border-radius: 0; }