/* =====================================================================
   EgitimPro — Marka Renk Sistemi (2026)
   ---------------------------------------------------------------------
   1. Renk : #c97f67  Terracotta   (ana marka rengi)
   2. Renk : #2c6e63  Deep Teal    (tamamlayıcı)

   Durum renkleri de aynı doygunlukta tutulur; hiçbir bileşende
   palet dışı "cart" renk kalmaz. Nötrler soğuk gri yerine sıcak.

   Bu dosya derlenmiş tema CSS'inden SONRA yüklenir ve tema
   değişkenlerini (Modernize `--bs-*` ve Around `--ar-*`) ezer.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Marka token'ları                                                 */
/* ------------------------------------------------------------------ */
html:root {
    /* Terracotta ölçeği */
    --brand-50:  #fdf7f5;
    --brand-100: #f7ebe6;
    --brand-200: #eed5cc;
    --brand-300: #e3b6a6;
    --brand-400: #d69a84;
    --brand-500: #c97f67;   /* ANA RENK */
    --brand-600: #b56a52;
    --brand-700: #a05941;   /* metin için okunabilir ton */
    --brand-800: #7d452f;
    --brand-900: #5c3323;

    /* Deep Teal ölçeği */
    --accent-50:  #f2f7f6;
    --accent-100: #e3efec;
    --accent-200: #c3ddd7;
    --accent-300: #94c0b7;
    --accent-400: #5d9c90;
    --accent-500: #2c6e63;  /* İKİNCİ RENK */
    --accent-600: #245b52;
    --accent-700: #1d4942;
    --accent-800: #163832;
    --accent-900: #102722;

    /* Durum renkleri — palet doygunluğuna çekilmiş */
    --state-success:      #4e8f68;
    --state-success-dark: #3f7856;
    --state-success-ink:  #2f5a41;
    --state-success-wash: #e6f1eb;
    --state-success-line: #cfe4d8;

    --state-info:      #2c6e63;
    --state-info-dark: #245b52;
    --state-info-ink:  #1d4942;
    --state-info-wash: #e3efec;
    --state-info-line: #c3ddd7;

    --state-warning:      #b9863f;
    --state-warning-dark: #9c6f31;
    --state-warning-ink:  #7a5624;
    --state-warning-wash: #f8f0e2;
    --state-warning-line: #e8d5b4;

    --state-danger:      #b0453c;
    --state-danger-dark: #973830;
    --state-danger-ink:  #7a3029;
    --state-danger-wash: #f9eae8;
    --state-danger-line: #e8c8c4;

    /* Kısa yollar */
    --brand:      var(--brand-500);
    --brand-rgb:  201, 127, 103;
    --brand-ink:  var(--brand-700);
    --accent:     var(--accent-500);
    --accent-rgb: 44, 110, 99;
    --accent-ink: var(--accent-600);

    /* Sıcak nötrler — sayfa zemini sol menü ile aynı */
    --neutral-bg:      #faf8f7;   /* sayfa ve menü zemini */
    --neutral-surface: #ffffff;   /* kart, modal, tablo */
    --neutral-soft:    #f7f4f2;   /* ikinci derece zemin */
    --neutral-line:    #ece5e1;
    --neutral-line-2:  #e4dcd7;
    --neutral-muted:   #8b8079;
    --neutral-body:    #6a615b;
    --neutral-ink:     #2f2b28;

    --brand-gradient:        linear-gradient(135deg, #c97f67 0%, #b56a52 100%);
    --brand-accent-gradient: linear-gradient(135deg, #c97f67 0%, #2c6e63 100%);
    --accent-gradient:       linear-gradient(135deg, #2c6e63 0%, #1d4942 100%);
}

/* Karanlık mod token'ları */
html:root[data-bs-theme="dark"] {
    --state-success: #6aab84; --state-success-dark: #589671; --state-success-ink: #a8cdb8;
    --state-success-wash: #1d2f27; --state-success-line: #2c453a;
    --state-info: #5d9c90; --state-info-ink: #94c0b7;
    --state-info-wash: #1d2733; --state-info-line: #2d3d4d;
    --state-warning: #c99a58; --state-warning-ink: #e8d5b4;
    --state-warning-wash: #2e2718; --state-warning-line: #463b23;
    --state-danger: #cf6a60; --state-danger-ink: #dda9a3;
    --state-danger-wash: #2e1d1b; --state-danger-line: #472b27;

    --neutral-bg:      #241f1d;
    --neutral-surface: #202936;
    --neutral-soft:    #232d3b;
    --neutral-line:    #2f2b28;
    --neutral-line-2:  #384356;
    --neutral-muted:   #8b8079;
    --neutral-body:    #a4b0c0;
    --neutral-ink:     #e9e3df;
}

/* ------------------------------------------------------------------ */
/* 2. Modernize (admin / okul / öğretmen)                              */
/*    `[data-color-theme=X]:root` (0,2,0) seçicisini ezmek için        */
/*    `html:root[...]` (0,2,1) kullanılıyor.                           */
/* ------------------------------------------------------------------ */
html:root,
html:root[data-color-theme],
html:root[data-bs-theme][data-color-theme] {
    --bs-primary:               #c97f67;
    --bs-primary-rgb:           201, 127, 103;
    --bs-light-primary:         rgba(201, 127, 103, .10);
    --bs-primary-bg-subtle:     rgba(201, 127, 103, .10);
    --bs-primary-border-subtle: rgba(201, 127, 103, .28);
    --bs-primary-text-emphasis: #a05941;

    --bs-secondary:               #2c6e63;
    --bs-secondary-rgb:           44, 110, 99;
    --bs-light-secondary:         rgba(44, 110, 99, .10);
    --bs-secondary-bg-subtle:     rgba(44, 110, 99, .10);
    --bs-secondary-border-subtle: rgba(44, 110, 99, .28);
    --bs-secondary-text-emphasis: #245b52;

    --bs-success:               #4e8f68;
    --bs-success-rgb:           78, 143, 104;
    --bs-light-success:         rgba(78, 143, 104, .10);
    --bs-success-bg-subtle:     #e6f1eb;
    --bs-success-border-subtle: #cfe4d8;
    --bs-success-text-emphasis: #2f5a41;

    --bs-info:               #2c6e63;
    --bs-info-rgb:           44, 110, 99;
    --bs-light-info:         rgba(44, 110, 99, .10);
    --bs-info-bg-subtle:     #e3efec;
    --bs-info-border-subtle: #c3ddd7;
    --bs-info-text-emphasis: #1d4942;

    --bs-warning:               #b9863f;
    --bs-warning-rgb:           185, 134, 63;
    --bs-light-warning:         rgba(185, 134, 63, .10);
    --bs-warning-bg-subtle:     #f8f0e2;
    --bs-warning-border-subtle: #e8d5b4;
    --bs-warning-text-emphasis: #7a5624;

    --bs-danger:               #b0453c;
    --bs-danger-rgb:           176, 69, 60;
    --bs-light-danger:         rgba(176, 69, 60, .10);
    --bs-danger-bg-subtle:     #f9eae8;
    --bs-danger-border-subtle: #e8c8c4;
    --bs-danger-text-emphasis: #7a3029;

    /* İkincil "indigo" tonları da palete katlanır */
    --bs-indigo:           #2c6e63;
    --bs-indigo-rgb:       44, 110, 99;
    --bs-light-indigo:     #e3efec;
    --bs-light-indigo-rgb: 227, 239, 236;
    --bs-blue:             #c97f67;

    /* Nötrler */
    --bs-light:             #f7f4f2;
    --bs-light-rgb:         247, 244, 242;
    --bs-light-bg-subtle:   #faf8f7;
    --bs-muted:             #8b8079;
    --bs-muted-rgb:         139, 128, 121;
    --bs-secondary-color:   #8b8079;
    --bs-body-color:        #6a615b;
    --bs-body-color-rgb:    106, 97, 91;
    --bs-emphasis-color:    #2f2b28;
    --bs-heading-color:     #2f2b28;
    --bs-border-color:      #ece5e1;
    --bs-border-color-translucent: rgba(47, 43, 40, .10);

    --bs-link-color:           #2f2b28;
    --bs-link-color-rgb:       47, 43, 40;
    --bs-link-hover-color:     #a05941;
    --bs-link-hover-color-rgb: 160, 89, 65;
}

/* Karanlık modda tonlar açılır */
html:root[data-bs-theme="dark"],
html:root[data-bs-theme="dark"][data-color-theme] {
    --bs-primary:               #d69a84;
    --bs-primary-rgb:           214, 154, 132;
    --bs-light-primary:         rgba(214, 154, 132, .12);
    --bs-primary-bg-subtle:     rgba(214, 154, 132, .12);
    --bs-primary-text-emphasis: #e3b6a6;

    --bs-secondary:               #5d9c90;
    --bs-secondary-rgb:           93, 156, 144;
    --bs-light-secondary:         rgba(93, 156, 144, .12);
    --bs-secondary-bg-subtle:     rgba(93, 156, 144, .12);
    --bs-secondary-text-emphasis: #94c0b7;

    --bs-success: #6aab84;  --bs-success-rgb: 106, 171, 132;
    --bs-success-bg-subtle: #1d2f27; --bs-success-border-subtle: #2c453a;
    --bs-success-text-emphasis: #a8cdb8;

    --bs-info: #5d9c90;  --bs-info-rgb: 125, 159, 188;
    --bs-info-bg-subtle: #1d2733; --bs-info-border-subtle: #2d3d4d;
    --bs-info-text-emphasis: #94c0b7;

    --bs-warning: #c99a58;  --bs-warning-rgb: 221, 176, 85;
    --bs-warning-bg-subtle: #2e2718; --bs-warning-border-subtle: #463b23;
    --bs-warning-text-emphasis: #e8d5b4;

    --bs-danger: #cf6a60;  --bs-danger-rgb: 207, 106, 96;
    --bs-danger-bg-subtle: #2e1d1b; --bs-danger-border-subtle: #472b27;
    --bs-danger-text-emphasis: #dda9a3;

    --bs-indigo: #5d9c90;  --bs-light-indigo: #163832;
    --bs-light: #232d3b;   --bs-light-rgb: 35, 45, 59;
    --bs-muted: #8b8079;   --bs-muted-rgb: 151, 163, 180;
    --bs-body-color: #a4b0c0;   --bs-body-color-rgb: 164, 176, 192;
    --bs-emphasis-color: #e9e3df;
    --bs-heading-color: #e9e3df;
    --bs-border-color: #2f2b28;

    --bs-link-color: #d8d2ce;   --bs-link-color-rgb: 216, 210, 206;
    --bs-link-hover-color: #d69a84;
    --bs-link-hover-color-rgb: 214, 154, 132;
}

/* ------------------------------------------------------------------ */
/* 3. Around (öğrenci / veli) — `--ar-*` değişkenleri                  */
/* ------------------------------------------------------------------ */
html:root,
html:root[data-bs-theme] {
    --ar-primary:               #c97f67;
    --ar-primary-rgb:           201, 127, 103;
    --ar-primary-bg-subtle:     #f7ebe6;
    --ar-primary-border-subtle: #eed5cc;
    --ar-primary-text-emphasis: #a05941;

    --ar-success:               #4e8f68;
    --ar-success-rgb:           78, 143, 104;
    --ar-success-bg-subtle:     #e6f1eb;
    --ar-success-border-subtle: #cfe4d8;
    --ar-success-text-emphasis: #2f5a41;

    --ar-info:               #2c6e63;
    --ar-info-rgb:           44, 110, 99;
    --ar-info-bg-subtle:     #e3efec;
    --ar-info-border-subtle: #c3ddd7;
    --ar-info-text-emphasis: #1d4942;

    --ar-warning:               #b9863f;
    --ar-warning-rgb:           185, 134, 63;
    --ar-warning-bg-subtle:     #f8f0e2;
    --ar-warning-border-subtle: #e8d5b4;
    --ar-warning-text-emphasis: #7a5624;

    --ar-danger:               #b0453c;
    --ar-danger-rgb:           176, 69, 60;
    --ar-danger-bg-subtle:     #f9eae8;
    --ar-danger-border-subtle: #e8c8c4;
    --ar-danger-text-emphasis: #7a3029;

    --ar-secondary:     #f3efec;
    --ar-secondary-rgb: 243, 239, 236;
    --ar-border-color:  #ece5e1;
}

html:root[data-bs-theme="dark"] {
    --ar-primary:               #d69a84;
    --ar-primary-rgb:           214, 154, 132;
    --ar-primary-bg-subtle:     #1d1413;
    --ar-primary-border-subtle: #33221d;
    --ar-primary-text-emphasis: #e3b6a6;

    --ar-success: #6aab84;  --ar-success-rgb: 106, 171, 132;
    --ar-success-bg-subtle: #14201a; --ar-success-text-emphasis: #a8cdb8;
    --ar-info: #5d9c90;     --ar-info-rgb: 125, 159, 188;
    --ar-info-bg-subtle: #141c24;    --ar-info-text-emphasis: #94c0b7;
    --ar-warning: #c99a58;  --ar-warning-rgb: 221, 176, 85;
    --ar-warning-bg-subtle: #221d11; --ar-warning-text-emphasis: #e8d5b4;
    --ar-danger: #cf6a60;   --ar-danger-rgb: 207, 106, 96;
    --ar-danger-bg-subtle: #221413;  --ar-danger-text-emphasis: #dda9a3;

    --ar-secondary: #1a1e24; --ar-secondary-rgb: 26, 30, 36;
    --ar-border-color: #2a2f38;
}

/* ------------------------------------------------------------------ */
/* 4. Sayfa zemini — iç sayfalar sol menü ile aynı sıcak nötr üzerinde  */
/*    Kart / modal / tablo / dropdown beyaz kalır (--bs-body-bg).       */
/* ------------------------------------------------------------------ */
body,
#main-wrapper,
.page-wrapper,
.body-wrapper,
.topbar,
.topbar .app-header {
    background-color: var(--neutral-bg);
}

/* Around panellerinde gövde `bg-secondary` ile boyanıyor */
body.bg-secondary,
main.page-wrapper {
    background-color: var(--neutral-bg) !important;
}

/* Beyaz kalması gereken yüzeyler */
html:root .card,
html:root .modal-content,
html:root .dropdown-menu,
html:root .offcanvas,
html:root .popover {
    --bs-card-bg: var(--neutral-surface);
    --bs-modal-bg: var(--neutral-surface);
    --bs-dropdown-bg: var(--neutral-surface);
    --bs-offcanvas-bg: var(--neutral-surface);
    --bs-popover-bg: var(--neutral-surface);
}

/* Sayfa içi "beyaz kutu" yardımcıları da yüzey rengine bağlanır */
.bg-white { background-color: var(--neutral-surface) !important; }
.bg-body   { background-color: var(--neutral-surface) !important; }
.bg-light  { background-color: var(--neutral-soft) !important; }

/* ------------------------------------------------------------------ */
/* 5. Bileşen düzeltmeleri — temada renk sabit kodlanmış yerler         */
/* ------------------------------------------------------------------ */

/* --- Butonlar --- */
html:root .btn-primary,
html:root[data-bs-theme][data-color-theme] .btn-primary {
    --bs-btn-bg: #c97f67; --bs-btn-border-color: #c97f67;
    --bs-btn-hover-bg: #b56a52; --bs-btn-hover-border-color: #b56a52;
    --bs-btn-active-bg: #a05941; --bs-btn-active-border-color: #a05941;
    --bs-btn-disabled-bg: #e3b6a6; --bs-btn-disabled-border-color: #e3b6a6;
    --bs-btn-focus-shadow-rgb: 201, 127, 103;
    --ar-btn-bg: #c97f67; --ar-btn-border-color: #c97f67;
    --ar-btn-hover-bg: #b56a52; --ar-btn-hover-border-color: #b56a52;
    --ar-btn-active-bg: #a05941; --ar-btn-active-border-color: #a05941;
}
html:root .btn-secondary,
html:root[data-bs-theme][data-color-theme] .btn-secondary {
    --bs-btn-bg: #2c6e63; --bs-btn-border-color: #2c6e63;
    --bs-btn-hover-bg: #245b52; --bs-btn-hover-border-color: #245b52;
    --bs-btn-active-bg: #1d4942; --bs-btn-active-border-color: #1d4942;
    --bs-btn-disabled-bg: #94c0b7; --bs-btn-disabled-border-color: #94c0b7;
    --bs-btn-focus-shadow-rgb: 44, 110, 99;
}
html:root .btn-success,
html:root[data-bs-theme][data-color-theme] .btn-success {
    --bs-btn-bg: #4e8f68; --bs-btn-border-color: #4e8f68;
    --bs-btn-hover-bg: #3f7856; --bs-btn-hover-border-color: #3f7856;
    --bs-btn-active-bg: #2f5a41; --bs-btn-active-border-color: #2f5a41;
    --bs-btn-disabled-bg: #a8cdb8; --bs-btn-disabled-border-color: #a8cdb8;
    --bs-btn-focus-shadow-rgb: 78, 143, 104;
}
html:root .btn-info,
html:root[data-bs-theme][data-color-theme] .btn-info {
    --bs-btn-bg: #2c6e63; --bs-btn-border-color: #2c6e63;
    --bs-btn-hover-bg: #245b52; --bs-btn-hover-border-color: #245b52;
    --bs-btn-active-bg: #1d4942; --bs-btn-active-border-color: #1d4942;
    --bs-btn-disabled-bg: #94c0b7; --bs-btn-disabled-border-color: #94c0b7;
    --bs-btn-focus-shadow-rgb: 44, 110, 99;
}
html:root .btn-warning,
html:root[data-bs-theme][data-color-theme] .btn-warning {
    --bs-btn-bg: #b9863f; --bs-btn-border-color: #b9863f;
    --bs-btn-hover-bg: #9c6f31; --bs-btn-hover-border-color: #9c6f31;
    --bs-btn-active-bg: #7a5624; --bs-btn-active-border-color: #7a5624;
    --bs-btn-disabled-bg: #e8d5b4; --bs-btn-disabled-border-color: #e8d5b4;
    --bs-btn-focus-shadow-rgb: 185, 134, 63;
}
html:root .btn-danger,
html:root[data-bs-theme][data-color-theme] .btn-danger {
    --bs-btn-bg: #b0453c; --bs-btn-border-color: #b0453c;
    --bs-btn-hover-bg: #973830; --bs-btn-hover-border-color: #973830;
    --bs-btn-active-bg: #7a3029; --bs-btn-active-border-color: #7a3029;
    --bs-btn-disabled-bg: #dda9a3; --bs-btn-disabled-border-color: #dda9a3;
    --bs-btn-focus-shadow-rgb: 176, 69, 60;
}
html:root .btn-dark,
html:root[data-bs-theme][data-color-theme] .btn-dark {
    --bs-btn-bg: #2f2b28; --bs-btn-border-color: #2f2b28;
    --bs-btn-hover-bg: #4a443f; --bs-btn-hover-border-color: #4a443f;
    --bs-btn-active-bg: #241f1d; --bs-btn-active-border-color: #241f1d;
}
html:root .btn-light,
html:root[data-bs-theme][data-color-theme] .btn-light {
    --bs-btn-bg: #f7f4f2; --bs-btn-border-color: #f7f4f2;
    --bs-btn-hover-bg: #ece5e1; --bs-btn-hover-border-color: #ece5e1;
    --bs-btn-active-bg: #e4dcd7; --bs-btn-active-border-color: #e4dcd7;
    --bs-btn-color: #2f2b28; --bs-btn-hover-color: #2f2b28;
}
html:root .btn-muted,
html:root[data-bs-theme][data-color-theme] .btn-muted {
    --bs-btn-bg: #8b8079; --bs-btn-border-color: #8b8079;
    --bs-btn-hover-bg: #74695f; --bs-btn-hover-border-color: #74695f;
}
html:root .btn-outline-primary,
html:root[data-bs-theme][data-color-theme] .btn-outline-primary {
    --bs-btn-color: #a05941; --bs-btn-border-color: #c97f67;
    --bs-btn-hover-bg: #c97f67; --bs-btn-hover-border-color: #c97f67;
    --bs-btn-active-bg: #b56a52; --bs-btn-active-border-color: #b56a52;
    --bs-btn-focus-shadow-rgb: 201, 127, 103;
    --ar-btn-color: #a05941; --ar-btn-border-color: #c97f67;
    --ar-btn-hover-bg: #c97f67; --ar-btn-hover-border-color: #c97f67;
}
html:root .btn-outline-success,
html:root[data-bs-theme][data-color-theme] .btn-outline-success { --bs-btn-color: #2f5a41; --bs-btn-border-color: #4e8f68; --bs-btn-hover-bg: #4e8f68; --bs-btn-hover-border-color: #4e8f68; }
html:root .btn-outline-danger,
html:root[data-bs-theme][data-color-theme] .btn-outline-danger  { --bs-btn-color: #7a3029; --bs-btn-border-color: #b0453c; --bs-btn-hover-bg: #b0453c; --bs-btn-hover-border-color: #b0453c; }
html:root .btn-outline-warning,
html:root[data-bs-theme][data-color-theme] .btn-outline-warning { --bs-btn-color: #7a5624; --bs-btn-border-color: #b9863f; --bs-btn-hover-bg: #b9863f; --bs-btn-hover-border-color: #b9863f; }
html:root .btn-outline-info,
html:root[data-bs-theme][data-color-theme] .btn-outline-info    { --bs-btn-color: #1d4942; --bs-btn-border-color: #2c6e63; --bs-btn-hover-bg: #2c6e63; --bs-btn-hover-border-color: #2c6e63; }
html:root .btn-outline-accent,
html:root[data-bs-theme][data-color-theme] .btn-outline-accent  { --bs-btn-color: #245b52; --bs-btn-border-color: #2c6e63; --bs-btn-hover-bg: #2c6e63; --bs-btn-hover-border-color: #2c6e63; --bs-btn-hover-color: #fff; }
html:root .btn-light-primary,
html:root[data-bs-theme][data-color-theme] .btn-light-primary {
    --bs-btn-bg: rgba(201, 127, 103, .12); --bs-btn-color: #a05941;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #c97f67; --bs-btn-hover-color: #fff;
}

/* --- Metin ve zemin yardımcıları --- */
.text-primary { color: #a05941 !important; }
.text-success { color: #3f7856 !important; }
.text-info    { color: #245b52 !important; }
.text-warning { color: #9c6f31 !important; }
.text-danger  { color: #973830 !important; }
.text-muted   { color: #8b8079 !important; }
.text-accent, .text-secondary-brand { color: #245b52 !important; }
[data-bs-theme="dark"] .text-primary { color: #d69a84 !important; }
[data-bs-theme="dark"] .text-success { color: #6aab84 !important; }
[data-bs-theme="dark"] .text-info    { color: #5d9c90 !important; }
[data-bs-theme="dark"] .text-warning { color: #c99a58 !important; }
[data-bs-theme="dark"] .text-danger  { color: #cf6a60 !important; }
[data-bs-theme="dark"] .text-muted   { color: #8b8079 !important; }
[data-bs-theme="dark"] .text-accent  { color: #94c0b7 !important; }

.bg-primary { background-color: #c97f67 !important; }
.bg-success { background-color: #4e8f68 !important; }
.bg-info    { background-color: #2c6e63 !important; }
.bg-warning { background-color: #b9863f !important; }
.bg-danger  { background-color: #b0453c !important; }
.bg-accent  { background-color: #2c6e63 !important; }
.bg-accent-subtle  { background-color: rgba(44, 110, 99, .10) !important; }
.bg-brand-gradient { background: var(--brand-gradient) !important; }
.bg-accent-gradient{ background: var(--accent-gradient) !important; }

.border-primary { border-color: #c97f67 !important; }
.border-success { border-color: #4e8f68 !important; }
.border-info    { border-color: #2c6e63 !important; }
.border-warning { border-color: #b9863f !important; }
.border-danger  { border-color: #b0453c !important; }
.border-accent  { border-color: #2c6e63 !important; }

/* --- Rozetler --- */
.badge.bg-primary, .badge.text-bg-primary { background-color: #c97f67 !important; color: #fff !important; }
.badge.bg-success, .badge.text-bg-success { background-color: #4e8f68 !important; color: #fff !important; }
.badge.bg-info,    .badge.text-bg-info    { background-color: #2c6e63 !important; color: #fff !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: #b9863f !important; color: #fff !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background-color: #b0453c !important; color: #fff !important; }

/* --- Form odak halkası --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #d69a84;
    box-shadow: 0 0 0 .2rem rgba(201, 127, 103, .18);
}
.form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: #c97f67;
    border-color: #c97f67;
}
.form-control, .form-select { border-color: var(--neutral-line-2); }

/* --- Sekmeler / sayfalama / liste --- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: #c97f67; }
.page-item.active .page-link { background-color: #c97f67; border-color: #c97f67; }
.page-link { color: #a05941; }
.list-group-item.active { background-color: #c97f67 !important; border-color: #c97f67 !important; }

/* --- İlerleme / yükleniyor --- */
.progress-bar { background-color: #c97f67; }
.spinner-border.text-primary, .spinner-grow.text-primary { color: #c97f67 !important; }

/* --- Tablolar --- */
.table { --bs-table-border-color: var(--neutral-line); }
.table > tbody > tr.table-primary > * { --bs-table-bg-state: rgba(201, 127, 103, .12); }
.table > tbody > tr.table-success > * { --bs-table-bg-state: #e6f1eb; }
.table > tbody > tr.table-danger  > * { --bs-table-bg-state: #f9eae8; }
.table > tbody > tr.table-warning > * { --bs-table-bg-state: #f8f0e2; }
.table > tbody > tr.table-info    > * { --bs-table-bg-state: #e3efec; }

::selection { background: rgba(201, 127, 103, .25); }


/* ------------------------------------------------------------------ */
/* 6. Logo ölçekleri — yatay yazı markası (oran ~4.6:1)                */
/* ------------------------------------------------------------------ */

/* Preloader: tema .lds-ripple genişliğini 40px'e sabitliyor */
.preloader .lds-ripple {
    width: auto;
    max-width: 200px;
    height: auto;
}
.preloader { background: var(--neutral-bg) !important; }
[data-bs-theme="dark"] .preloader { background: var(--neutral-bg) !important; }

/* Sol menü marka alanı */
.left-sidebar .brand-logo .logo-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Kısaltılmış menüde yalnızca amblem görünsün (yazı taşmasın).
   Yalnızca masaüstünde: 1300px altında sol menü zaten kayan çekmece olur
   ve tam genişlikte açılır, orada logo kırpılmamalı. */
@media (min-width: 1300px) {
    [data-sidebartype="mini-sidebar"] .left-sidebar:not(:hover) .brand-logo .logo-img img {
        width: 42px;
        height: 34px;      /* object-fit calisabilmesi icin acik yukseklik sart */
        max-width: none;
        object-fit: cover;
        object-position: left center;
    }
}

/* Giriş sayfalarındaki logo */
.login-header .logo,
.auth-logo img { height: auto; }

/* ------------------------------------------------------------------ */
/* 7. Sayfa başlığı + kırıntı yolu                                     */
/*    Eski kalın "kart + maskot" bloğunun yerine ince bir başlık.      */
/* ------------------------------------------------------------------ */
.page-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--neutral-line);
}

/* --- kırıntı yolu --- */
.page-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11.5px;
    line-height: 18px;
    letter-spacing: .01em;
}
.page-trail__item {
    display: inline-flex;
    align-items: center;
    color: var(--neutral-muted);
    min-width: 0;
}
/* ince chevron ayraç */
.page-trail__item + .page-trail__item::before {
    content: "";
    width: 5px;
    height: 5px;
    margin: 0 9px;
    flex-shrink: 0;
    border-right: 1.5px solid var(--neutral-line-2);
    border-bottom: 1.5px solid var(--neutral-line-2);
    transform: rotate(-45deg);
}
.page-trail__item a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--neutral-muted);
    text-decoration: none;
    border-radius: 5px;
    transition: color .16s ease;
}
.page-trail__item a:hover,
.page-trail__item a:focus-visible { color: var(--brand-ink); }
.page-trail__item a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.page-trail__item i { font-size: 14px; line-height: 1; }
.page-trail__item--current {
    color: var(--brand-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- başlık --- */
.page-heading__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--neutral-ink);
    text-wrap: balance;
}

[data-bs-theme="dark"] .page-heading { border-bottom-color: var(--neutral-line); }

@media (max-width: 767.98px) {
    .page-heading {
        padding-bottom: 12px;
        margin-bottom: 18px;
        gap: 4px;
    }
    .page-heading__title { font-size: 18px; }
    /* dar ekranda uzun yollar taşmasın: ara adımlar gizlenir */
    .page-trail__item:not(:first-child):not(:last-child),
    .page-trail__item:not(:first-child):not(:last-child) + .page-trail__item::before {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* 8. Temada sabit kodlanmış (değişken kullanmayan) son renkler        */
/*    Bunlar CSS degiskeniyle degil dogrudan hex ile yazildigi icin    */
/*    ayrica ezilmeleri gerekiyor.                                     */
/* ------------------------------------------------------------------ */

/* Form alanlarının yazı ve kenar rengi (Modernize: #5a6a85 / #dfe5ef) */
html:root .form-control,
html:root .form-select,
html:root .form-control:focus,
html:root .form-select:focus,
html:root .form-control::file-selector-button {
    color: var(--neutral-body);
}
html:root .form-control,
html:root .form-select { border-color: var(--neutral-line-2); }
html:root .form-control::placeholder { color: var(--neutral-muted); opacity: 1; }

/* İkincil kontur buton (Modernize: #49beff) */
html:root .btn-outline-secondary,
html:root[data-bs-theme][data-color-theme] .btn-outline-secondary {
    --bs-btn-color: #245b52;
    --bs-btn-border-color: #2c6e63;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2c6e63;
    --bs-btn-hover-border-color: #2c6e63;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #245b52;
    --bs-btn-active-border-color: #245b52;
    --bs-btn-disabled-color: #94c0b7;
    --bs-btn-disabled-border-color: #94c0b7;
    --bs-btn-focus-shadow-rgb: 44, 110, 99;
}

/* Around: bağlantı rengi (#448c74) ve kontur bilgi butonu (#3f7fca) */
html:root,
html:root[data-bs-theme] {
    --ar-link-color: #a05941;
    --ar-link-hover-color: #b56a52;
}
html:root[data-bs-theme="dark"] {
    --ar-link-color: #e3b6a6;
    --ar-link-hover-color: #d69a84;
}
html:root .btn-outline-info {
    --ar-btn-color: #1d4942;
    --ar-btn-border-color: #2c6e63;
    --ar-btn-hover-color: #fff;
    --ar-btn-hover-bg: #2c6e63;
    --ar-btn-hover-border-color: #2c6e63;
    --ar-btn-active-color: #fff;
    --ar-btn-active-bg: #245b52;
    --ar-btn-active-border-color: #245b52;
    --ar-btn-focus-shadow-rgb: 44, 110, 99;
}
html:root .btn-outline-success {
    --ar-btn-color: #2f5a41; --ar-btn-border-color: #4e8f68;
    --ar-btn-hover-bg: #4e8f68; --ar-btn-hover-border-color: #4e8f68; --ar-btn-hover-color: #fff;
}
html:root .btn-outline-danger {
    --ar-btn-color: #7a3029; --ar-btn-border-color: #b0453c;
    --ar-btn-hover-bg: #b0453c; --ar-btn-hover-border-color: #b0453c; --ar-btn-hover-color: #fff;
}
html:root .btn-outline-warning {
    --ar-btn-color: #7a5624; --ar-btn-border-color: #b9863f;
    --ar-btn-hover-bg: #b9863f; --ar-btn-hover-border-color: #b9863f; --ar-btn-hover-color: #fff;
}
html:root .btn-outline-primary {
    --ar-btn-active-color: #fff; --ar-btn-active-bg: #b56a52; --ar-btn-active-border-color: #b56a52;
}

/* Grafik (ApexCharts) ipucu kutuları */
html:root .apexcharts-tooltip,
html:root .apexcharts-xaxistooltip,
html:root .apexcharts-yaxistooltip {
    border-color: var(--neutral-line-2) !important;
    background: var(--neutral-surface) !important;
    color: var(--neutral-ink) !important;
    box-shadow: 0 8px 24px rgba(47, 43, 40, .12) !important;
}
html:root .apexcharts-tooltip-title {
    background: var(--neutral-soft) !important;
    border-bottom-color: var(--neutral-line) !important;
}
html:root .apexcharts-xaxistooltip::after,
html:root .apexcharts-xaxistooltip::before { border-bottom-color: var(--neutral-line-2) !important; }

/* ------------------------------------------------------------------ */
/* 9. Bilgi kutusu ve içerik etiketi — tek tip                         */
/*    Genisletilmis satirlardaki "renkli renkli" kutucuklarin yerine   */
/*    tek, sabit bir gorunum. Durum rozetleri (Aktif/Pasif) haric.     */
/* ------------------------------------------------------------------ */

/* Bilgi kutusu: eskiden bg-primary/success/info/warning + bg-opacity-10 */
html:root .info-card {
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 12px;
    padding: 14px;
}
/* Yan yana dizildiğinde eşit boy; tek başınayken içeriği kadar.
   Koşulsuz height:100% tek başına duran bilgi kutusunu sütun boyuna
   esnetip altında büyük beyaz boşluk bırakıyordu. */
html:root [class*="col"] > .info-card:only-child { height: 100%; }
html:root .info-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--neutral-muted);
}
html:root .info-card-title i { font-size: 15px; color: var(--brand); }
html:root .info-card .info-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--neutral-body);
    padding: 2px 0;
}
html:root .info-card .info-item i { color: var(--neutral-muted); font-size: 15px; flex-shrink: 0; }

/* Genisletilmis satirin zemini kartlardan ayrissin */
html:root tr.detail-row > td { background: var(--neutral-bg); }

/* İçerik etiketi (sınıf adı, ders adı, okul adı, sayaç…) — tek renk */
html:root .chip,
html:root .badge.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--neutral-soft);
    border: 1px solid var(--neutral-line);
    color: var(--neutral-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
html:root .chip i { font-size: 13px; color: var(--neutral-muted); flex-shrink: 0; }
html:root a.chip { text-decoration: none; transition: background-color .16s ease, color .16s ease; }
html:root a.chip:hover {
    background: rgba(var(--brand-rgb), .10);
    border-color: rgba(var(--brand-rgb), .28);
    color: var(--brand-ink);
}
html:root a.chip:hover i { color: var(--brand); }

/* "+3" gibi taşma etiketi biraz daha sessiz */
html:root .chip--more {
    background: transparent;
    border-style: dashed;
    color: var(--neutral-muted);
}

/* Sayaç pili (tablo sütunlarındaki ikon + adet) — etiketle aynı dil, yuvarlak */
html:root .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--neutral-soft);
    border: 1px solid var(--neutral-line);
    color: var(--neutral-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}
html:root .stat-badge i { font-size: 14px; color: var(--neutral-muted); }

/* ------------------------------------------------------------------ */
/* 10. Giriş ekranları — tüm paneller için ortak                       */
/* ------------------------------------------------------------------ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--neutral-bg);
}

.auth-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    width: 100%;
    max-width: 980px;
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(47, 43, 40, .07);
}

/* --- Tanıtım paneli --- */
.auth-aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 40px 36px;
    background: var(--brand-100);
    border-right: 1px solid var(--neutral-line);
}
.auth-aside__logo img { display: block; height: auto; max-width: 100%; }
.auth-aside__body { display: flex; flex-direction: column; gap: 10px; margin: auto 0; }
.auth-aside__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--brand-900);
    text-wrap: balance;
}
.auth-aside__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--brand-800);
    opacity: .82;
    max-width: 34ch;
}
.auth-features {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-features__item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--brand-900);
}
.auth-features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--neutral-surface);
    color: var(--brand);
}
.auth-features__icon i { font-size: 17px; }

/* --- Form paneli --- */
.auth-main { padding: 44px 44px 36px; display: flex; flex-direction: column; }
.auth-main__logo { display: none; margin-bottom: 22px; }
.auth-main__logo img { height: auto; max-width: 100%; }
.auth-main__head { margin-bottom: 24px; }
.auth-main__head h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--neutral-ink);
}
.auth-main__head p { margin: 0; font-size: 14px; color: var(--neutral-muted); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--neutral-body);
}
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > i:first-child {
    position: absolute;
    left: 13px;
    font-size: 18px;
    color: var(--neutral-muted);
    pointer-events: none;
}
.auth-input input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--neutral-line-2);
    border-radius: 11px;
    background: var(--neutral-surface);
    color: var(--neutral-ink);
    font-size: 14.5px;
    line-height: 22px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-input input::placeholder { color: var(--neutral-muted); opacity: .7; }
.auth-input input:focus {
    outline: 0;
    border-color: var(--brand-300);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16);
}
.auth-input:has(input:focus) > i:first-child { color: var(--brand); }
.auth-reveal {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--neutral-muted);
    cursor: pointer;
}
.auth-reveal:hover { background: var(--neutral-soft); color: var(--brand-ink); }
.auth-reveal i { font-size: 17px; }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--neutral-body);
    cursor: pointer;
    margin: 0;
}
.auth-check input {
    width: 17px; height: 17px;
    accent-color: var(--brand);
    cursor: pointer;
}
.auth-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--brand-ink);
    text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

.auth-submit {
    width: 100%;
    margin-top: 6px;
    padding: 12px 18px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-submit i { font-size: 18px; }

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 20px;
}
.auth-alert i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.auth-alert--error {
    background: var(--state-danger-wash);
    border: 1px solid var(--state-danger-line);
    color: var(--state-danger-ink);
}
.auth-alert--ok {
    background: var(--state-success-wash);
    border: 1px solid var(--state-success-line);
    color: var(--state-success-ink);
}
.auth-error { font-size: 12.5px; color: var(--state-danger-ink); }

.auth-foot {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--neutral-line);
    text-align: center;
}
.auth-foot p { margin: 0 0 10px; font-size: 12.5px; color: var(--neutral-muted); }
.auth-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auth-foot a:not(.chip) { color: var(--brand-ink); font-weight: 500; text-decoration: none; }
.auth-foot a:not(.chip):hover { text-decoration: underline; }

/* --- Dar ekran: tanıtım paneli kalkar, logo formun üstüne geçer --- */
@media (max-width: 991.98px) {
    .auth-page { padding: 16px; align-items: flex-start; }
    .auth-card { grid-template-columns: 1fr; max-width: 460px; margin: 24px auto; }
    .auth-aside { display: none; }
    .auth-main { padding: 32px 24px 28px; }
    .auth-main__logo { display: block; }
    .auth-main__head h1 { font-size: 20px; }
}

/* --- Karanlık tema --- */
[data-bs-theme="dark"] .auth-aside { background: rgba(214, 154, 132, .10); }
[data-bs-theme="dark"] .auth-aside__title,
[data-bs-theme="dark"] .auth-features__item { color: var(--neutral-ink); }
[data-bs-theme="dark"] .auth-aside__desc { color: var(--neutral-body); }
[data-bs-theme="dark"] .auth-features__icon { background: var(--neutral-surface); }

/* Bilgi kutusu içindeki sayı üçlüsü (derslik / akıllı tahta / lisans gibi) */
html:root .info-stat__num {
    font-size: 18px;
    line-height: 1.2;
    color: var(--neutral-ink);
    font-variant-numeric: tabular-nums;
}

/* Açık/kapalı durumu taşıyan etiket (ör. yetki var/yok).
   Biçim diğer etiketlerle aynı; yalnızca ince bir durum ipucu taşır. */
html:root .chip--on {
    background: var(--state-success-wash);
    border-color: var(--state-success-line);
    color: var(--state-success-ink);
}
html:root .chip--on i { color: var(--state-success); }
html:root .chip--off {
    background: transparent;
    border-color: var(--neutral-line);
    color: var(--neutral-muted);
}
html:root .chip--off i { color: var(--neutral-muted); opacity: .7; }

/* Kart başlığı — tek tip; renk yerine ince ayraç taşır */
html:root .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--neutral-line);
}
html:root .card-header__icon {
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
}

/* ------------------------------------------------------------------ */
/* 11. Kimlik taklidi bandı (yönetici olarak panele giriş)             */
/* ------------------------------------------------------------------ */
html:root .impersonate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 11px 16px;
    border: 1px solid var(--state-warning-line);
    border-radius: 12px;
    background: var(--state-warning-wash);
    color: var(--state-warning-ink);
    font-size: 13.5px;
}
html:root .impersonate-bar__text { display: inline-flex; align-items: center; gap: 8px; }
html:root .impersonate-bar__text i { font-size: 17px; color: var(--state-warning); }
html:root .impersonate-bar form { margin: 0; }

/* Test ortamı uyarısı (giriş bilgileri ön dolu geldiğinde) */
html:root .auth-alert--test {
    background: var(--state-warning-wash);
    border: 1px dashed var(--state-warning-line);
    color: var(--state-warning-ink);
}
html:root .auth-alert--test i { color: var(--state-warning); }

/* ------------------------------------------------------------------ */
/* 12. Ana panel bileşenleri                                           */
/*     Tüm kutular satır içinde eşit yükseklikte, boşluklar tek ölçüde. */
/* ------------------------------------------------------------------ */

/* Uyarı şeridi */
html:root .alert-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--state-warning-line);
    border-radius: 14px;
    background: var(--state-warning-wash);
    color: var(--state-warning-ink);
    font-size: 14px;
}
html:root .alert-strip__icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    background: var(--neutral-surface);
    color: var(--state-warning);
}
html:root .alert-strip__icon i { font-size: 19px; }
html:root .alert-strip__text { flex: 1; min-width: 200px; }

/* Özet kartı (KPI) */
html:root .kpi {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 20px;
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 14px;
}
html:root .kpi__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
}
html:root .kpi__icon i { font-size: 22px; }
html:root .kpi__body { display: flex; flex-direction: column; min-width: 0; }
html:root .kpi__label {
    font-size: 12.5px; font-weight: 600; color: var(--neutral-muted);
    letter-spacing: .01em;
}
html:root .kpi__value {
    font-size: 28px; font-weight: 700; line-height: 1.2;
    color: var(--neutral-ink); font-variant-numeric: tabular-nums;
    margin: 2px 0 4px;
}
html:root .kpi__delta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--neutral-muted);
}
html:root .kpi__delta i { font-size: 14px; color: var(--state-success); }

/* Gösterge kartı */
html:root .metric {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 14px;
}
html:root .metric__label {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--neutral-muted); margin-bottom: 8px;
}
html:root .metric__value {
    font-size: 26px; font-weight: 700; line-height: 1.15;
    color: var(--neutral-ink); font-variant-numeric: tabular-nums;
}
html:root .metric__value--warn { color: var(--state-warning-ink); }
html:root .metric__bar {
    height: 6px; border-radius: 99px; margin: 10px 0 8px;
    background: var(--neutral-soft); overflow: hidden;
}
html:root .metric__bar > span {
    display: block; height: 100%; border-radius: 99px;
    background: var(--brand);
}
html:root .metric__note {
    margin-top: auto; padding-top: 8px;
    font-size: 12px; line-height: 1.5; color: var(--neutral-muted);
}

/* Kart başlığı: başlık + sağda not/aksiyon */
html:root .card > .card-header {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px;
    padding: 16px 20px;
}
html:root .card-header__note { font-size: 12.5px; color: var(--neutral-muted); }
html:root .card > .card-body { padding: 20px; }

/* Liste (hareketlilik, veri kalitesi, son hareketler) */
html:root .feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
html:root .feed__row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0; border-top: 1px solid var(--neutral-line);
    font-size: 13.5px;
}
html:root .feed__row:first-child { border-top: none; padding-top: 0; }
html:root .feed--tight .feed__row { padding: 8px 0; }
html:root .feed__icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    background: var(--neutral-soft);
    color: var(--neutral-muted);
}
html:root .feed__icon i { font-size: 17px; }
html:root .feed__icon--warn { background: var(--state-warning-wash); color: var(--state-warning); }
html:root .feed__icon--ok   { background: var(--state-success-wash); color: var(--state-success); }
html:root .feed__name {
    flex: 1; min-width: 0; color: var(--neutral-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:root a.feed__name:hover { color: var(--brand-ink); }
html:root .feed__count {
    font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--neutral-muted); min-width: 34px; text-align: right;
}
html:root .feed__count--on   { color: var(--brand-ink); }
html:root .feed__count--warn { color: var(--state-warning-ink); }
html:root .feed__time { font-size: 12px; color: var(--neutral-muted); white-space: nowrap; }

@media (max-width: 575.98px) {
    html:root .kpi, html:root .metric { padding: 16px; }
    html:root .kpi__value { font-size: 24px; }
    html:root .feed__row { flex-wrap: wrap; }
    html:root .feed__time { width: 100%; padding-left: 43px; }
}

/* Sayfa sonu nefes payı — tema yalnızca padding-top tanımlıyor,
   içerik alt kenara yapışıyordu. Tüm panelleri kapsar. */
html:root .body-wrapper { padding-bottom: 48px; }
@media (max-width: 767.98px) {
    html:root .body-wrapper { padding-bottom: 32px; }
}

/* Ders başarı kutusu (katılım/başarı analizi) */
html:root .ders-kutu {
    display: flex; flex-direction: column; height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--neutral-line);
    border-radius: 12px;
    background: var(--neutral-surface);
}
html:root .ders-kutu__ad {
    font-size: 12.5px; font-weight: 600; color: var(--neutral-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:root .ders-kutu__ort {
    font-size: 22px; font-weight: 700; line-height: 1.2;
    color: var(--neutral-ink); font-variant-numeric: tabular-nums; margin: 4px 0 0;
}
html:root .ders-kutu__adet {
    margin-top: auto; padding-top: 4px;
    font-size: 11.5px; color: var(--neutral-muted);
}

/* Kart altı özet satırları (liste ile kart tabanı arasını dolduran gerçek veri) */
html:root .kart-alt {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--neutral-line);
}
html:root .kart-alt__satir {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 5px 0;
    font-size: 13px; color: var(--neutral-muted);
}
html:root .kart-alt__satir b {
    color: var(--neutral-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* kart gövdesi dikeyde yayılsın ki kart-alt tabana insin */
html:root .card > .card-body:has(> .kart-alt) { display: flex; flex-direction: column; }

/* ==================================================================== */
/* 13. KANONİK BİLEŞENLER — tüm panellerde birebir aynı görünüm         */
/*     Blade'deki sınıf kombinasyonu ne olursa olsun (table-sm,          */
/*     table-compact, thead.bg-light, thead.table-light, sınıfsız…)      */
/*     tek bir tanım geçerli olur. Ölçüm: 10 farklı tablo başlığı,       */
/*     8 hücre, 10 kart, 5 kart başlığı varyantı vardı.                  */
/* ==================================================================== */

/* --- Kart --- */
html:root .body-wrapper .card {
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 14px;
    box-shadow: none;
}
html:root .body-wrapper .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--neutral-line);
    border-radius: 14px 14px 0 0;
    padding: 16px 20px;
}
html:root .body-wrapper .card > .card-body { padding: 20px; }
html:root .body-wrapper .card > .card-footer {
    background: transparent;
    border-top: 1px solid var(--neutral-line);
    padding: 14px 20px;
}

/* Kart başlığı: hangi etiket/sınıf kullanılırsa kullanılsın aynı */
html:root .body-wrapper .card-header h1,
html:root .body-wrapper .card-header h2,
html:root .body-wrapper .card-header h3,
html:root .body-wrapper .card-header h4,
html:root .body-wrapper .card-header h5,
html:root .body-wrapper .card-header h6,
html:root .body-wrapper .card-header .card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: var(--neutral-ink);
    margin-bottom: 0;
}
/* Kart gövdesinin ilk başlığı da (header'sız kartlar) aynı ölçüde */
html:root .body-wrapper .card-body > .card-title:first-child,
html:root .body-wrapper .card-body > h5.card-title,
html:root .body-wrapper .card-body > h6.card-title {
    font-size: 15px; font-weight: 600; color: var(--neutral-ink);
}

/* --- Tablo: tek tanım --- */
html:root .body-wrapper table {
    width: 100%;
    margin-bottom: 0;
    border-color: var(--neutral-line);
    font-size: 13.5px;
    color: var(--neutral-body);
    vertical-align: middle;
}
html:root .body-wrapper table > thead > tr > th,
html:root .body-wrapper table > tr > th {
    padding: 11px 16px;
    background: var(--neutral-soft);
    border-bottom: 1px solid var(--neutral-line);
    border-top: 0;
    font-size: 11px !important;
    /* Tema .fw-bold'u 500 olarak tanimliyor (fw-semibold'dan ince);
       hucreye elle eklenmis agirlik siniflari tablo basligini bozmasin. */
    font-weight: 700 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--neutral-muted) !important;
    white-space: nowrap;
    vertical-align: middle;
}
html:root .body-wrapper table > tbody > tr > td,
html:root .body-wrapper table > tbody > tr > th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-line);
    border-top: 0;
    vertical-align: middle;
    color: var(--neutral-body);
}
html:root .body-wrapper table > tbody > tr:last-child > td,
html:root .body-wrapper table > tbody > tr:last-child > th { border-bottom: 0; }
html:root .body-wrapper table > tbody > tr:hover > td { background-color: var(--neutral-soft); }
html:root .body-wrapper table th > a,
html:root .body-wrapper table td > a:not(.btn):not(.chip) { color: var(--neutral-ink); }

/* Detay satırı tablo hover'ından etkilenmesin */
html:root .body-wrapper table > tbody > tr.detail-row:hover > td { background-color: var(--neutral-bg); }

/* Boyut varyantları da aynı ölçüde olsun (table-sm / table-compact) */
html:root .body-wrapper .table-sm > thead > tr > th,
html:root .body-wrapper .table-compact > thead > tr > th,
html:root .body-wrapper .program-table > thead > tr > th,
html:root .body-wrapper .modern-table > thead > tr > th { padding: 11px 16px; }
html:root .body-wrapper .table-sm > tbody > tr > td,
html:root .body-wrapper .table-compact > tbody > tr > td,
html:root .body-wrapper .program-table > tbody > tr > td,
html:root .body-wrapper .modern-table > tbody > tr > td { padding: 12px 16px; }

/* Hücrelere elle eklenmiş dolgu yardımcıları (ps-4, pe-3, py-2 …) tabloda
   satır hizasını bozuyordu; kanonik dolgu her zaman geçerli olsun. */
html:root .body-wrapper table > thead > tr > th[class*="ps-"],
html:root .body-wrapper table > thead > tr > th[class*="pe-"],
html:root .body-wrapper table > thead > tr > th[class*="px-"],
html:root .body-wrapper table > thead > tr > th[class*="py-"],
html:root .body-wrapper table > thead > tr > th[class*="p-"] { padding: 11px 16px !important; }
html:root .body-wrapper table > tbody > tr > td[class*="ps-"],
html:root .body-wrapper table > tbody > tr > td[class*="pe-"],
html:root .body-wrapper table > tbody > tr > td[class*="px-"],
html:root .body-wrapper table > tbody > tr > td[class*="py-"],
html:root .body-wrapper table > tbody > tr > td[class*="p-"] { padding: 12px 16px !important; }

/* Kart başlığı rengi/kalınlığı: text-dark, text-muted gibi yardımcılar ezmesin */
html:root .body-wrapper .card-header h1,
html:root .body-wrapper .card-header h2,
html:root .body-wrapper .card-header h3,
html:root .body-wrapper .card-header h4,
html:root .body-wrapper .card-header h5,
html:root .body-wrapper .card-header h6,
html:root .body-wrapper .card-header .card-title {
    color: var(--neutral-ink) !important;
    font-weight: 600 !important;
}

/* Kart köşe yarıçapı: rounded-* yardımcıları tekliği bozmasın */
html:root .body-wrapper .card[class*="rounded"] { border-radius: 14px !important; }

/* --- Satırdaki kutular eşit yükseklikte ---
   Yalnizca kartin kendisi h-100 istediginde. Her karti kosulsuz germek
   form sayfalarinda ters tepiyordu: uzun formun yanindaki kisa kart
   yuzlerce piksel bos alanla uzuyordu. Ozet satirlarinda h-100 kullanilir. */
html:root .body-wrapper .row > [class*="col"]:has(> .card.h-100) { display: flex; }
html:root .body-wrapper .row > [class*="col"] > .card.h-100 { flex: 1 1 auto; margin-bottom: 0; }

/* --- Sayfa başlığı: breadcrumb partial'ı kullanmayan sayfalarda da aynı --- */
html:root .body-wrapper > .container-fluid > .row:first-child h1:not(.page-heading__title),
html:root .body-wrapper > .container-fluid > .row:first-child h2,
html:root .body-wrapper > .container-fluid > .row:first-child h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--neutral-ink);
}

/* ------------------------------------------------------------------ */
/* 14. Sekmeler — ajandadan çıkan kağıt sekmeler                       */
/*                                                                     */
/*     Sekmeler kartın beyaz zemini üzerinde duruyordu; aktif sekmenin */
/*     10px köşesi kartın 14px köşesiyle uyuşmadığı için sol üstte     */
/*     beyaz bir hilal kalıyordu. Çözüm sekmeyi kartın İÇİNDEN         */
/*     çıkarmak: kart kabuğu şeffaflaşır, içerik "sayfa" olur ve       */
/*     sekmeler bu sayfanın üstünden çıkan kağıt diller gibi durur.    */
/* ------------------------------------------------------------------ */

/* Sekme + içerik barındıran kartın kabuğunu kaldır: artık zemin
   görevini alttaki .tab-content sayfası üstleniyor. */
html:root .body-wrapper .card:has(> .card-header .nav-tabs),
html:root .body-wrapper .card:has(> .card-header .nav-pills),
html:root .body-wrapper .card:has(> .card-header .nav-tabs-custom),
html:root .body-wrapper .card:has(> .nav-tabs),
html:root .body-wrapper .card:has(> .nav-pills),
html:root .body-wrapper .card:has(> .card-body > .nav-tabs),
html:root .body-wrapper .card:has(> .card-body > .nav-pills) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
html:root .body-wrapper .card:has(> .card-header .nav-tabs) > .card-header,
html:root .body-wrapper .card:has(> .card-header .nav-pills) > .card-header,
html:root .body-wrapper .card:has(> .card-header .nav-tabs-custom) > .card-header {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    overflow: visible;
}
html:root .body-wrapper .card:has(> .card-header .nav-tabs) > .card-body,
html:root .body-wrapper .card:has(> .card-header .nav-pills) > .card-body,
html:root .body-wrapper .card:has(> .card-header .nav-tabs-custom) > .card-body,
html:root .body-wrapper .card:has(> .nav-tabs) > .card-body,
html:root .body-wrapper .card:has(> .nav-pills) > .card-body {
    padding: 0 !important;
}

/* Sekme şeridi: sekmeler alta hizalanır, sayfanın üst kenarına oturur */
html:root .body-wrapper .nav-tabs,
html:root .body-wrapper .nav-pills,
html:root .body-wrapper .nav-tabs-custom {
    position: relative;
    /* z-index VERİLMEZ: yığılma bağlamı oluşturmasın ki sayfa (.tab-content)
       pasif dillerin gömülen alt kenarını örtsün; aktif dil kendi z-index'i
       ile yine en üstte kalır. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 3px;
    width: 100%;
    padding: 0;
    margin: 0 !important;      /* sayfadaki mb-3 dili sayfadan koparıyordu */
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Kağıt dil: üstü yuvarlak, altı sayfaya karışır */
html:root .body-wrapper .nav-tabs .nav-link,
html:root .body-wrapper .nav-pills .nav-link,
html:root .body-wrapper .nav-tabs-custom .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1px;               /* alt kenar sayfayla birleşsin */
    padding: 9px 18px 10px;
    background: var(--neutral-soft);
    border: 1px solid var(--neutral-line);
    border-bottom-color: transparent;
    border-radius: 11px 11px 0 0;
    color: var(--neutral-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    transform: translateY(3px);        /* pasif diller sayfaya gömülü */
    transition: background-color .16s ease, color .16s ease,
                transform .16s ease, box-shadow .16s ease;
}
html:root .body-wrapper .nav-tabs .nav-link i,
html:root .body-wrapper .nav-pills .nav-link i,
html:root .body-wrapper .nav-tabs-custom .nav-link i {
    font-size: 17px;
    color: var(--neutral-muted);
    transition: color .16s ease;
}

html:root .body-wrapper .nav-tabs .nav-link:hover,
html:root .body-wrapper .nav-pills .nav-link:hover,
html:root .body-wrapper .nav-tabs-custom .nav-link:hover {
    background: var(--brand-50);
    border-color: var(--neutral-line);
    border-bottom-color: transparent;
    color: var(--brand-ink);
    transform: translateY(1px);
}
html:root .body-wrapper .nav-tabs .nav-link:hover i,
html:root .body-wrapper .nav-pills .nav-link:hover i,
html:root .body-wrapper .nav-tabs-custom .nav-link:hover i { color: var(--brand); }

/* Aktif dil: sayfayla aynı beyaz, hafifçe öne çıkmış ve sayfaya bağlı */
html:root .body-wrapper .nav-tabs .nav-link.active,
html:root .body-wrapper .nav-tabs .nav-item.show .nav-link,
html:root .body-wrapper .nav-pills .nav-link.active,
html:root .body-wrapper .nav-pills .show > .nav-link,
html:root .body-wrapper .nav-tabs-custom .nav-link.active {
    z-index: 2;
    background: var(--neutral-surface) !important;
    border-color: var(--neutral-line) !important;
    border-bottom-color: var(--neutral-surface) !important;
    color: var(--brand-ink) !important;
    font-weight: 600;
    transform: translateY(0);
    box-shadow: 0 -3px 10px rgba(47, 43, 40, .05);
}
html:root .body-wrapper .nav-tabs .nav-link.active i,
html:root .body-wrapper .nav-pills .nav-link.active i,
html:root .body-wrapper .nav-tabs-custom .nav-link.active i { color: var(--brand); }

/* Aktif dilin altındaki ince marka çizgisi — ajanda ayracı hissi */
html:root .body-wrapper .nav-tabs .nav-link.active::before,
html:root .body-wrapper .nav-pills .nav-link.active::before,
html:root .body-wrapper .nav-tabs-custom .nav-link.active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 11px;
    right: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

/* Sayfa: sekmelerin oturduğu kağıt yaprak */
html:root .body-wrapper .tab-content {
    position: relative;
    padding: 22px;
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 0 12px 12px 12px;   /* üst kenar düz: sekmeler oraya oturuyor */
    box-shadow: 0 1px 2px rgba(47, 43, 40, .03);
}
html:root .body-wrapper .tab-content > .tab-pane { padding-top: 0; }

/* Bağlantı tabanlı sekmeler (?tab=… ile gezinen) .tab-content kullanmıyor;
   hemen altındaki kart sayfa görevi görür, üst-sol köşesi düzleşir. */
html:root .body-wrapper .nav-tabs + .card,
html:root .body-wrapper .nav-pills + .card {
    border-top-left-radius: 0;
    margin-top: 0;
}

/* Sayfanın içindeki kartlar ikinci bir çerçeve kurmasın */
html:root .body-wrapper .tab-content > .tab-pane > .row:first-child { margin-top: 0; }

@media (max-width: 575.98px) {
    html:root .body-wrapper .nav-tabs,
    html:root .body-wrapper .nav-pills,
    html:root .body-wrapper .nav-tabs-custom { gap: 2px; }
    html:root .body-wrapper .nav-tabs .nav-link,
    html:root .body-wrapper .nav-pills .nav-link,
    html:root .body-wrapper .nav-tabs-custom .nav-link {
        padding: 8px 13px 9px;
        font-size: 13px;
    }
    html:root .body-wrapper .tab-content { padding: 16px; border-radius: 0 10px 10px 10px; }
}

/* ------------------------------------------------------------------ */
/* 15. Tablo boş durumu — hiçbir tablo yalnızca başlıkla kalmasın      */
/* ------------------------------------------------------------------ */
html:root .body-wrapper table > tbody > tr > td.tablo-bos {
    padding: 34px 16px !important;
    text-align: center;
    border-bottom: 0;
    color: var(--neutral-muted);
}
html:root .body-wrapper td.tablo-bos i {
    display: block;
    margin: 0 auto 8px;
    font-size: 26px;
    opacity: .45;
}
html:root .body-wrapper td.tablo-bos span {
    font-size: 13px;
    font-weight: 500;
}


/* ------------------------------------------------------------------ */
/* 16. Eski Bootstrap KPI kartları → kanonik .kpi görünümü             */
/* Rapor sayfaları KPI'ı "card > card-body > .d-flex > .round-40"      */
/* kalıbıyla kuruyor. Markup'a dokunmadan ana panel/katılım            */
/* sayfalarındaki .kpi bileşeniyle birebir aynı görünüme çekiyoruz.    */
/* ------------------------------------------------------------------ */

/* Kart kabuğu: .kpi ile aynı yüzey, kenarlık, köşe ve iç boşluk */
html:root .body-wrapper .card:has(> .card-body > .d-flex > .round-40) {
    height: 100%;
    margin-bottom: 0;
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-line);
    border-radius: 14px;
    box-shadow: none;
}
html:root .body-wrapper .card:has(> .card-body > .d-flex > .round-40) > .card-body {
    padding: 20px;
}

/* İkon kutusu: yuvarlak rozet yerine .kpi__icon'un 44px kare kutusu,
   ve renk her zaman marka tonunda — dekoratif mavi/altın/yeşil yok. */
html:root .body-wrapper .card-body > .d-flex > .round-40[class*="bg-"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 12px !important;
    background: rgba(var(--brand-rgb), .12) !important;
    color: var(--brand) !important;
    margin-right: 14px !important;
}
html:root .body-wrapper .card-body > .d-flex > .round-40[class*="bg-"] > i {
    font-size: 22px !important;
}

/* Değer + etiket tipografisi .kpi__value / .kpi__label ile aynı */
html:root .body-wrapper .card-body > .d-flex > .round-40 ~ div > h5 {
    order: 2;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--neutral-ink);
    font-variant-numeric: tabular-nums;
    margin: 2px 0 0 !important;
}
html:root .body-wrapper .card-body > .d-flex > .round-40 ~ div > p.text-muted {
    order: 1;
    font-size: 12.5px !important;
    font-weight: 600;
    color: var(--neutral-muted) !important;
    line-height: 1.35;
}
html:root .body-wrapper .card-body > .d-flex:has(> .round-40) > div:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
html:root .body-wrapper .card-body > .d-flex:has(> .round-40) {
    align-items: flex-start !important;
}

/* Alt satırdaki rozet: .kpi__delta gibi sade metin */
html:root .body-wrapper .card-body > .d-flex:has(> .round-40) ~ [class*="mt-"] > .badge {
    padding: 0 !important;
    background: transparent !important;
    color: var(--neutral-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
html:root .body-wrapper .card-body > .d-flex:has(> .round-40) ~ [class*="mt-"] {
    margin-top: 6px !important;
}

/* Liste/kart boş durumu (tablo dışı) */
html:root .body-wrapper .bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--neutral-muted);
    font-size: 13px;
}
html:root .body-wrapper .bos-durum i { font-size: 26px; opacity: .45; }

/* ------------------------------------------------------------------ */
/* 17. Dekoratif ikon kutuları tek marka renginde                      */
/* Panel gösterge kartlarındaki ikon rozetleri bg-info / bg-warning /  */
/* bg-success ile rastgele renkleniyordu. Anlam taşımayan bu renkler   */
/* marka tonuna indirgenir; semantik rozetler (badge, alert) korunur.  */
/* ------------------------------------------------------------------ */
html:root .body-wrapper .stat-icon[class*="bg-"],
html:root .body-wrapper .card-body .rounded-circle[class*="bg-"][class*="bg-opacity"],
html:root .body-wrapper .card-body > .d-flex .round-40[class*="bg-"] {
    background: rgba(var(--brand-rgb), .12) !important;
    color: var(--brand) !important;
}
html:root .body-wrapper .stat-icon[class*="bg-"] > i,
html:root .body-wrapper .card-body .rounded-circle[class*="bg-opacity"] > i {
    color: var(--brand) !important;
}
/* Gösterge kartı ilerleme çubukları da tek renk */
html:root .body-wrapper .card .progress-bar[class*="bg-"] {
    background-color: var(--brand) !important;
}

/* ------------------------------------------------------------------ */
/* 18. Okul paneli gösterge kartı → kanonik .kpi ölçüsü                */
/* İkon kimi kartta sağda kimi kartta solda ve 50-60px idi. Hepsi      */
/* diğer panellerdeki 44px sol-ikon düzenine çekiliyor ki beş panelde  */
/* de gösterge kartları birebir aynı görünsün.                        */
/* ------------------------------------------------------------------ */
html:root .body-wrapper .card-body > .d-flex:has(> .stat-icon) {
    align-items: flex-start !important;
    gap: 14px;
}
/* Yalnızca ikonu SONDA olan kartları çevir; ikonu zaten solda olanlara dokunma */
html:root .body-wrapper .card-body > .d-flex:has(> .stat-icon:last-child) {
    flex-direction: row-reverse;
    justify-content: flex-end !important;
}
html:root .body-wrapper .stat-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
    font-size: 22px !important;
}
html:root .body-wrapper .stat-icon > i { font-size: 22px !important; }
html:root .body-wrapper .card-body > .d-flex:has(> .stat-icon) > div:not(.stat-icon) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
html:root .body-wrapper .card-body > .d-flex:has(> .stat-icon) p.text-muted {
    order: 1;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0 !important;
}
html:root .body-wrapper .card-body > .d-flex:has(> .stat-icon) h3,
html:root .body-wrapper .card-body > .d-flex:has(> .stat-icon) h4 {
    order: 2;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    color: var(--neutral-ink);
    font-variant-numeric: tabular-nums;
    margin: 2px 0 0 !important;
}

/* ------------------------------------------------------------------ */
/* 19. Kart ızgarası: eşit yükseklik + her yerde eşit dikey boşluk     */
/*                                                                     */
/* Kartlar satır içinde eşit boyda olsun diye alt boşlukları           */
/* sıfırlanmıştı; gutter sınıfı olmayan satırlarda (rapor sayfaları)   */
/* bu, kartların birbirine yapışmasına yol açtı.                       */
/*                                                                     */
/* Doğru mekanizma: boşluğu kartın kendi alt marjı taşısın ve          */
/* esnetilen yükseklikten aynı miktar düşülsün — böylece kart+marj     */
/* tam sütun boyuna oturur, ne taşma ne yapışma olur. Bootstrap'in     */
/* gutter'ı devre dışı bırakılır ki iki mekanizma üst üste binmesin;   */
/* sonuçta bütün panellerde dikey aralık birebir aynı olur.            */
/* ------------------------------------------------------------------ */
html:root {
    --izgara-bosluk: 24px;
}

/* NOT: Bu temanın derlenmiş CSS'inde Bootstrap'in `.row > *` gutter
   kuralı YOK — sütunlar hiç padding-top almıyor, dolayısıyla
   `--bs-gutter-y` burada işe yaramıyor. Bu yüzden dikey boşluk
   sütunun alt marjıyla verilir; hem satır içinde alta kayan kartları
   hem de ardışık satırları aynı ölçüde ayırır. */
html:root .body-wrapper .row:has(> [class*="col"] > .card),
html:root .body-wrapper .row:has(> [class*="col"] > .kpi) {
    --bs-gutter-x: var(--izgara-bosluk);
    --bs-gutter-y: 0;
    /* !important: satırdaki mt-*/mb-* yardımcıları da !important ile
       geliyor; sütun marjının üstüne binince aralık 48px'e çıkıyordu. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html:root .body-wrapper .row:has(> [class*="col"] > .card) > [class*="col"],
html:root .body-wrapper .row:has(> [class*="col"] > .kpi) > [class*="col"] {
    margin-bottom: var(--izgara-bosluk) !important;
}

/* Sütunda tek kart varsa sütunu doldursun ki aynı satırdakiler eşit
   boyda olsun. Yükseklik hiç kısıtlanmadığından içerik kırpılmaz. */
html:root .body-wrapper .row > [class*="col"] > .card:only-child,
html:root .body-wrapper .row > [class*="col"] > .kpi:only-child {
    height: 100%;
}

/* Sütun içindeki dikey ritim: aynı sütunda alt alta dizilen kartlar da
   (öğrenci detayı, ödev listesi) aynı boşluğu alır. Son kartın marjı
   sıfırlanır, çünkü satır sonrası boşluğu sütunun marjı taşıyor —
   yoksa aralık iki katına çıkıyor. */
html:root .body-wrapper .row > [class*="col"] > .card:not(:last-child),
html:root .body-wrapper .row > [class*="col"] > .kpi:not(:last-child) {
    margin-bottom: var(--izgara-bosluk) !important;
}
html:root .body-wrapper .row > [class*="col"] > .card:last-child,
html:root .body-wrapper .row > [class*="col"] > .kpi:last-child {
    margin-bottom: 0 !important;
}

/* Kart içi alta yaslanan alanlar (buton satırı, ilerleme çubuğu) */
html:root .body-wrapper .row > [class*="col"] > .card:only-child > .card-body {
    display: flex;
    flex-direction: column;
}
html:root .body-wrapper .row > [class*="col"] > .card:only-child > .card-body > .mt-auto {
    margin-top: auto !important;
}

@media (max-width: 575.98px) {
    html:root { --izgara-bosluk: 16px; }
}

/* ------------------------------------------------------------------ */
/* 20. Durum bildiren pasif düğmeler okunabilir olsun                  */
/* "Süre Doldu" / "Teslim Edildi" gibi bilgiler disabled outline       */
/* düğme olarak basılıyor; Bootstrap'in .65 opaklığı bunları beyaz     */
/* zeminde neredeyse görünmez yapıyordu. Rozet gibi tonlanır.          */
/* ------------------------------------------------------------------ */
html:root .body-wrapper .btn[disabled][class*="btn-outline-"],
html:root .body-wrapper .btn.disabled[class*="btn-outline-"] {
    opacity: 1;
    font-weight: 600;
}
html:root .body-wrapper .btn[disabled].btn-outline-danger,
html:root .body-wrapper .btn.disabled.btn-outline-danger {
    background: var(--state-danger-wash);
    border-color: var(--state-danger-line);
    color: var(--state-danger-ink);
}
html:root .body-wrapper .btn[disabled].btn-outline-success,
html:root .body-wrapper .btn.disabled.btn-outline-success {
    background: var(--state-success-wash);
    border-color: var(--state-success-line);
    color: var(--state-success-ink);
}
html:root .body-wrapper .btn[disabled].btn-outline-warning,
html:root .body-wrapper .btn.disabled.btn-outline-warning {
    background: var(--state-warning-wash);
    border-color: var(--state-warning-line);
    color: var(--state-warning-ink);
}
html:root .body-wrapper .btn[disabled].btn-outline-primary,
html:root .body-wrapper .btn.disabled.btn-outline-primary,
html:root .body-wrapper .btn[disabled].btn-outline-secondary,
html:root .body-wrapper .btn.disabled.btn-outline-secondary {
    background: var(--neutral-soft);
    border-color: var(--neutral-line);
    color: var(--neutral-muted);
}

/* ------------------------------------------------------------------ */
/* 21. Filtre düğme grupları sekmelerle aynı dilde                     */
/* Liste sayfalarında .btn-group ile kurulan filtreler ayrı bir görsel */
/* dil oluşturuyordu; kanonik sekme görünümüne (bölüm 14) hizalanır.   */
/* ------------------------------------------------------------------ */
html:root .body-wrapper .btn-group:has(> .btn-check) {
    gap: 6px;
    border-radius: 0;
}
html:root .body-wrapper .btn-group:has(> .btn-check) > .btn {
    border-radius: 10px !important;
    border: 1px solid transparent;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--neutral-muted);
    background: transparent;
}
html:root .body-wrapper .btn-group:has(> .btn-check) > .btn:hover {
    background: var(--neutral-soft);
    color: var(--neutral-ink);
}
html:root .body-wrapper .btn-group:has(> .btn-check) > .btn-check:checked + .btn {
    background: rgba(var(--brand-rgb), .13);
    border-color: transparent;
    color: var(--brand-ink);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* 22. Ölçülen son sapmaların kapatılması                              */
/* Stil denetimi 174 sayfada kart başlığında 8, tablo hücresinde 5     */
/* varyant buldu. Kaynak: sayfa içi bg-white/bg-transparent yardımcı   */
/* sınıfları ve tema tablolarının kenarlık sıfırlaması. Tek yerden     */
/* sabitleniyor ki beş panelde de birebir aynı olsun.                  */
/* ------------------------------------------------------------------ */

/* Kart başlığı: her zaman şeffaf zemin + tek çizgi */
html:root .body-wrapper .card > .card-header,
html:root .body-wrapper .card > .card-header.bg-white,
html:root .body-wrapper .card > .card-header.bg-transparent,
html:root .body-wrapper .card > .card-header[class*="bg-"] {
    padding: 16px 20px;
    background: transparent !important;
    border-bottom: 1px solid var(--neutral-line) !important;
    border-radius: 0;
}

/* Tablo satır ayracı: tema bazı sayfalarda border-width'i sıfırlıyor */
html:root .body-wrapper table > thead > tr > th {
    border-bottom: 1px solid var(--neutral-line) !important;
}
html:root .body-wrapper table > tbody > tr > td {
    border-bottom: 1px solid var(--neutral-line) !important;
}
html:root .body-wrapper table > tbody > tr:last-child > td,
html:root .body-wrapper table > tbody > tr > td.tablo-bos {
    border-bottom: 0 !important;
}
/* Zebra/vurgu zeminleri hücre zeminini bozmasın */
html:root .body-wrapper table:not(.table-striped) > tbody > tr:not([class*="table-"]) > td {
    background-color: transparent;
}

/* ------------------------------------------------------------------ */
/* 23. Kart gövdesi dolgusu her yerde 20px                             */
/* `.card > .card-body` zaten 20px'e çekiliyordu ama iki kalıp dışarıda */
/* kalıyordu: `.card.card-body` (tek elemanda birleşik, filtre         */
/* çubuklarında kullanılıyor) ve sekme paneli içindeki kartlar.        */
/* Ölçümde 5 örnek 30px'te takılı kalmıştı.                            */
/* ------------------------------------------------------------------ */
html:root .body-wrapper .card.card-body,
html:root .body-wrapper .card .card-body:not([class*="p-"]) {
    padding: 20px;
}
/* Tabloyu kenara dayayan bilinçli p-0 korunur */
html:root .body-wrapper .card > .card-body.p-0 { padding: 0 !important; }


/* =====================================================================
   22) Site dipnotu — sistem ayarlarındaki footer metni
   ===================================================================== */
html:root .site-dipnot {
    margin: 28px 0 4px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-line, #ece5e1);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--neutral-muted, #8b8079);
    text-align: center;
}