/* ============================================================================
   ZekiKod PDKS — Metronic 9 görünümü: TASARIM TOKEN'LARI (mt-tokens.css)
   ----------------------------------------------------------------------------
   Kaynak: kullanıcının lisanslı Metronic v9.5.0 (Tailwind) paketi, demo1.
   Değerler paketin derlenmiş CSS'inden ve demo sayfalarındaki elemanların
   hesaplanmış stillerinden (getComputedStyle) ölçülerek alındı; Tailwind v4
   oklch renkleri sRGB hex'e çevrildi.

   Katmanlar:
     1) --mt-*   : Metronic token'ları. Diğer bütün mt-*.css dosyaları YALNIZ
                   bunları kullanır; renk/ölçü sabiti yazmaz.
     2) --bs-*   : Bootstrap 5.3 değişkenleri. DevExpress "bootstrap-external"
                   köprü teması bileşen renklerini bunlardan okur (--bs-primary
                   tek başına ~224 yerde geçiyor), bu yüzden Metronic'e
                   eşlenmeleri DevExpress bileşenlerini de Metronic'e çeker.
     3) Eski token'lar (--zk-*): önceki marka katmanını kullanan dosyalar
                   (zk-demo-giris.css vb.) Metronic paletine yönlendirilir.

   Ana rengi değiştirmek için yalnız --mt-primary* satırlarını değiştirmek
   yeter (ör. kurumsal lacivert için #004891 / #003A75).
   ============================================================================ */

:root {
    /* --- Yazı --- */
    --mt-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --mt-text-2xs: 0.6875rem;  /* 11px — küçük rozet */
    --mt-text-xs: 0.75rem;     /* 12px — rozet, menü başlığı, yardımcı metin */
    --mt-text-2sm: 0.8125rem;  /* 13px — düğme, girdi, alt menü */
    --mt-text-sm: 0.875rem;    /* 14px — gövde metni, tablo, menü */
    --mt-text-base: 1rem;      /* 16px */
    --mt-text-lg: 1.125rem;    /* 18px */
    --mt-text-xl: 1.25rem;     /* 20px — sayfa başlığı (h1) */
    --mt-text-2xl: 1.5rem;     /* 24px — KPI değerleri */
    --mt-fw-normal: 400;
    --mt-fw-medium: 500;
    --mt-fw-semibold: 600;
    --mt-fw-bold: 700;

    /* --- Nötr skala (Tailwind v3 gray, ZekiKodOkul) --- */
    --mt-zinc-50: #F9FAFB;
    --mt-zinc-100: #F3F4F6;
    --mt-zinc-200: #E5E7EB;
    --mt-zinc-300: #D1D5DB;
    --mt-zinc-400: #9CA3AF;
    --mt-zinc-500: #6B7280;
    --mt-zinc-600: #4B5563;
    --mt-zinc-700: #374151;
    --mt-zinc-800: #1F2937;
    --mt-zinc-900: #111827;
    --mt-zinc-950: #030712;

    /* --- Anlamsal yüzey / metin (Metronic --background, --foreground ...) --- */
    --mt-bg: #FFFFFF;                 /* sayfa ve kart zemini */
    --mt-bg-subtle: #F9FAFB;          /* çok hafif ayrışan alan (zinc-50) */
    --mt-fg: #111827;                 /* ana metin, başlık (foreground / mono) */
    --mt-fg-secondary: #374151;       /* düğme metni, tablo başlığı (secondary-foreground) */
    --mt-fg-muted: #4B5563;           /* ikincil metin, ikon (muted-foreground) */
    --mt-fg-faint: #6B7280;           /* yer tutucu, küçük yardımcı metin — ZekiKodOkul gray-500.
                                         gray-400 (#9CA3AF) burada daha az kontrast veriyor; okunurluk için 500 seçildi */
    --mt-border: #E5E7EB;             /* kart, ayırıcı, tablo çizgisi (--border) */
    --mt-input: #D1D5DB;              /* girdi / outline düğme kenarı (--input) */
    --mt-ring: #3B82F6;               /* girdi odak kenarı (--ring) */
    --mt-ring-shadow: 0 0 0 1px #3B82F6; /* girdi odak halkası: 1px kenarlık + 1px gölge = 2px mavi halka */
    --mt-accent: #F3F4F6;             /* hover / seçili zemin (--accent, --muted) */
    --mt-accent-60: rgba(243, 244, 246, .60); /* menü seçili zemini (accent/60) */
    --mt-accent-40: #F9FAFB; /* tablo başlık zemini (thead bg-gray-50) */

    /* --- Ana renk (blue-500) --- */
    --mt-primary: #2563EB;
    --mt-primary-rgb: 37, 99, 235;
    --mt-primary-hover: #1D4ED8;      /* blue-700 */
    --mt-primary-active: #1E40AF;     /* blue-800 */
    --mt-primary-fg: #FFFFFF;
    --mt-primary-light: #EFF6FF;      /* blue-50  — açık rozet / açık düğme zemini */
    --mt-primary-light-border: #BFDBFE; /* blue-200 */
    --mt-primary-soft: rgba(37, 99, 235, .08); /* "outline primary" düğme zemini (primary/8) */
    --mt-primary-text: #1D4ED8;       /* açık zemin üstünde metin (blue-700) */
    --mt-primary-ring: 0 0 0 2px var(--mt-bg), 0 0 0 4px #3B82F6;

    /* --- Durum renkleri (Metronic: success=green, destructive=red, warning=yellow, info=violet) --- */
    --mt-success: #16A34A;
    --mt-success-rgb: 22, 163, 74;
    --mt-success-hover: #15803D;
    --mt-success-light: #F0FDF4;
    --mt-success-light-border: #BBF7D0;
    --mt-success-text: #15803D;
    --mt-success-solid: #15803D;      /* beyaz yazılı dolu yeşil düğme zemini (iki temada sabit; beyazda 5.02) */

    --mt-danger: #DC2626;
    --mt-danger-rgb: 220, 38, 38;
    --mt-danger-hover: #B91C1C;
    --mt-danger-light: #FEF2F2;
    --mt-danger-light-border: #FECACA;
    --mt-danger-text: #B91C1C;

    --mt-warning: #EAB308;
    --mt-warning-rgb: 234, 179, 8;
    --mt-warning-hover: #CA8A04;
    --mt-warning-light: #FEFCE8;
    --mt-warning-light-border: #FEF08A;
    --mt-warning-text: #A16207;

    --mt-info: #9333EA;
    --mt-info-rgb: 147, 51, 234;
    --mt-info-hover: #7E22CE;
    --mt-info-light: #FAF5FF;
    --mt-info-light-border: #E9D5FF;
    --mt-info-text: #7E22CE;

    /* --- Köşe --- */
    --mt-radius-xs: 4px;              /* küçük rozet, onay kutusu */
    --mt-radius-sm: 6px;              /* düğme, girdi, sayfalama (radius-md) */
    --mt-radius: 8px;                 /* menü öğesi, açılır menü (radius-lg) */
    --mt-radius-lg: 8px;              /* kart, pencere rounded-lg (ZekiKodOkul) */
    --mt-radius-pill: 30px;           /* durum rozeti */

    /* --- Gölge --- */
    --mt-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --mt-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --mt-shadow-dropdown: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --mt-shadow-modal: 0 20px 50px -12px rgba(0, 0, 0, .25);

    /* --- Denetim ölçüleri --- */
    --mt-control-h: 34px;             /* kt-btn / kt-input */
    --mt-control-h-sm: 28px;          /* kt-btn-sm */
    --mt-control-h-lg: 40px;          /* kt-btn-lg */
    --mt-control-px: 12px;
    --mt-gap: 6px;                    /* düğme içi ikon-metin aralığı */

    /* --- Yerleşim --- */
    --mt-header-h: 70px;
    --mt-sidebar-w: 280px;
    --mt-content-px: 30px;            /* içerik yatay boşluğu (kt-container) */
    --mt-card-px: 20px;               /* kart yatay iç boşluğu */
    --mt-card-header-h: 56px;
    --mt-table-th-h: 40px;

    /* --- Kenar menü (varsayılan: açık — Metronic demo1) --- */
    --mt-sidebar-bg: #FFFFFF;
    --mt-sidebar-border: var(--mt-border);
    --mt-sidebar-fg: #374151;
    --mt-sidebar-muted: #6B7280;
    --mt-sidebar-hover-fg: #0369A1;
    --mt-sidebar-active-bg: #F0F9FF;
    --mt-sidebar-active-fg: #0284C7;
    --mt-sidebar-line: #E5E7EB; /* alt menü dikey çizgisi */

    --mt-transition: .15s ease;

    /* Temaya göre DEĞİŞMEYEN koyu yüzeyler: bilerek koyu tasarlanmış şerit/kartlar
       (Hızlı POS, mobil kimlik kartı) için. --mt-zinc-7..950 koyu temada ters
       çevrildiğinden (açık olur) bu amaçla kullanılmamalı. */
    --mt-dark-700: #374151;
    --mt-dark-800: #1F2937;
    --mt-dark-900: #111827;
    --mt-dark-950: #030712;

    /* "mono": ipucu/tooltip zemini (Metronic --mono). Koyu temada açık gri + siyah yazı. */
    --mt-mono: #111827;
    --mt-mono-fg: #FFFFFF;

    /* --- İkon renklendirme ---
       XAF ikonları çok renkli DevExpress SVG'leri ve <img> olarak geliyor
       (currentColor almıyorlar). Metronic'in tek renkli (keenicons) görünümüne
       CSS filtresiyle yaklaşılır; değerler canlı ekranda denenerek seçildi.
       Ayrıntı korunur: gri tonlama + kontrast (varsayılan), gri -> sepya ->
       mavi tonlama (aktif; iki tonlu "duotone" etkisi verir). */
    --mt-icon-filter: grayscale(1) brightness(.8) contrast(1.2) opacity(.72);      /* muted-foreground */
    --mt-icon-filter-strong: grayscale(1) brightness(.55) contrast(1.3);          /* foreground */
    --mt-icon-filter-primary: grayscale(1) brightness(.6) sepia(1) hue-rotate(188deg) saturate(10) brightness(1.1); /* primary */
    --mt-icon-filter-white: brightness(0) invert(1);                              /* ana renk düğme üstünde */
    /* Anlamsal renkli ikonlar (menü grupları, eylem vurguları) — canlı denendi */
    --mt-icon-filter-success: grayscale(1) brightness(.6) sepia(1) hue-rotate(95deg) saturate(8) brightness(1.15);
    --mt-icon-filter-warning: grayscale(1) brightness(.75) sepia(1) hue-rotate(5deg) saturate(9) brightness(1.2);
    --mt-icon-filter-danger: grayscale(1) brightness(.6) sepia(1) hue-rotate(-40deg) saturate(12) brightness(1.2);
    --mt-icon-filter-info: grayscale(1) brightness(.6) sepia(1) hue-rotate(232deg) saturate(9) brightness(1.3);

    /* --- ZekiKodOkul canlı karo / ikon kutusu renkleri (Tailwind v3 500 / hover 600) ---
       Yalnız DOLU yüzeylerde kullanılır. */
    --mt-c-blue: #3B82F6;   --mt-c-blue-h: #2563EB;
    --mt-c-green: #22C55E;  --mt-c-green-h: #16A34A;
    --mt-c-purple: #A855F7; --mt-c-purple-h: #9333EA;
    --mt-c-indigo: #6366F1; --mt-c-indigo-h: #4F46E5;
    --mt-c-teal: #14B8A6;   --mt-c-teal-h: #0D9488;
    --mt-c-orange: #F97316; --mt-c-orange-h: #EA580C;
    --mt-c-pink: #EC4899;   --mt-c-pink-h: #DB2777;
    --mt-c-amber: #F59E0B;  --mt-c-amber-h: #D97706;
    --mt-c-yellow: #EAB308; --mt-c-yellow-h: #CA8A04; /* yalnız YAZISIZ ikon kutusu */
    --mt-c-red: #EF4444;    --mt-c-red-h: #DC2626;
    --mt-tile-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);       /* shadow-md */
    --mt-tile-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); /* shadow-lg */

    /* --- Sayfa / yüzey ayrımı ve diğer yeni anlamlar --- */
    --mt-page-bg: #F9FAFB;
    --mt-input-bg: #FFFFFF;
    --mt-card-border: transparent;   /* ZekiKodOkul kartında kenarlık yok */
    --mt-fg-strong: #111827;         /* KPI değeri, kart başlığı */
    --mt-link: #2563EB;       --mt-link-rgb: 37, 99, 235;       /* text-blue-600 */
    --mt-link-hover: #1D4ED8; --mt-link-hover-rgb: 29, 78, 216; /* hover:text-blue-700 */
    --mt-sidebar-active-bar: #0284C7; /* aktif alt öğe: sol çizgi */

    color-scheme: light;
}

/* ============================================================================
   KOYU MOD (Metronic 9 ".dark" paleti)
   <html> üzerine "dark" sınıfı (ve data-bs-theme="dark") konunca etkinleşir;
   js/mt-theme.js ve _Host.cshtml'deki ön-boyama betiği yönetir.
   Bütün mt-*.css dosyaları yalnız --mt-* token'larını kullandığı için
   bileşenler ayrıca yazılmadan koyu temaya geçer; Bootstrap/DevExpress
   değişkenleri de aşağıdaki eşleme (bölüm 2) üzerinden bu değerleri okur.
   ============================================================================ */
:root.dark {
    color-scheme: dark;

    --mt-bg: #1F2937;                 /* kart zemini (koyu) */
    --mt-bg-subtle: #374151;          /* satır hover, hafif alan */
    --mt-fg: #F3F4F6;                 /* gray-100 */
    --mt-fg-secondary: #D1D5DB;       /* gray-300 */
    --mt-fg-muted: #9CA3AF;           /* gray-400 — koyu zeminde okunurluk için bir ton açık */
    --mt-fg-faint: #9CA3AF;           /* gray-400 */
    --mt-border: #374151;             /* gray-700 */
    --mt-input: #4B5563;
    --mt-ring: #3B82F6;               /* odak halkası mavisi */
    --mt-ring-shadow: 0 0 0 1px #3B82F6;
    --mt-accent: #374151;             /* gray-700 */
    --mt-accent-60: rgba(55, 65, 81, .60);
    --mt-accent-40: #374151;

    --mt-primary: #2563EB;            /* blue-600 (iki temada aynı) */
    --mt-primary-rgb: 37, 99, 235;
    --mt-primary-hover: #1D4ED8;
    --mt-primary-active: #1E40AF;
    --mt-primary-light: #1F2E50;      /* primary %30 gray-800 üstünde */
    --mt-primary-light-border: #1E40AF;
    --mt-primary-soft: rgba(59, 130, 246, .20);
    --mt-primary-text: #60A5FA;       /* blue-400 */
    --mt-primary-ring: 0 0 0 2px var(--mt-bg), 0 0 0 4px #3B82F6;

    --mt-success-light: #1C3634;  --mt-success-light-border: #166534;  --mt-success-text: #4ADE80;
    --mt-danger: #DC2626; --mt-danger-rgb: 220, 38, 38; --mt-danger-hover: #B91C1C;
    --mt-danger-light: #3C252F;   --mt-danger-light-border: #991B1B;   --mt-danger-text: #F87171;
    --mt-warning-light: #38302C;  --mt-warning-light-border: #854D0E;  --mt-warning-text: #FACC15;
    --mt-info-light: #30254F;     --mt-info-light-border: #6B21A8;     --mt-info-text: #C084FC;

    --mt-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .40);
    --mt-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .50);
    --mt-shadow-dropdown: 0 8px 24px 0 rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02);
    --mt-shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, .80);

    --mt-mono: #030712;
    --mt-mono-fg: #FFFFFF;

    --mt-sidebar-bg: #1F2937;
    --mt-sidebar-border: #374151;
    --mt-sidebar-fg: #D1D5DB;
    --mt-sidebar-muted: #9CA3AF;
    --mt-sidebar-hover-fg: #38BDF8;
    --mt-sidebar-active-bg: #18354B;
    --mt-sidebar-active-fg: #38BDF8;
    --mt-sidebar-line: #374151;

    --mt-page-bg: #030712;
    --mt-input-bg: #374151;
    --mt-fg-strong: #FFFFFF;
    --mt-link: #60A5FA;       --mt-link-rgb: 96, 165, 250;
    --mt-link-hover: #93C5FD; --mt-link-hover-rgb: 147, 197, 253;
    --mt-sidebar-active-bar: #0EA5E9;

    /* Koyu zeminde ikonlar: gri ton açılır, renkli tonlar parlatılır */
    --mt-icon-filter: grayscale(1) brightness(1.55) contrast(.95) opacity(.78);
    --mt-icon-filter-strong: grayscale(1) brightness(2.3);
    --mt-icon-filter-primary: grayscale(1) brightness(.6) sepia(1) hue-rotate(188deg) saturate(10) brightness(1.45);
    --mt-icon-filter-success: grayscale(1) brightness(.6) sepia(1) hue-rotate(95deg) saturate(8) brightness(1.4);
    --mt-icon-filter-warning: grayscale(1) brightness(.75) sepia(1) hue-rotate(5deg) saturate(9) brightness(1.35);
    --mt-icon-filter-danger: grayscale(1) brightness(.6) sepia(1) hue-rotate(-40deg) saturate(12) brightness(1.45);
    --mt-icon-filter-info: grayscale(1) brightness(.6) sepia(1) hue-rotate(232deg) saturate(9) brightness(1.55);

    /* Bootstrap'in rgb üçlüleri (bölüm 2'deki eşleme sabit açık değerler taşıyor) */
    --bs-body-color-rgb: 243, 244, 246;
    --bs-body-bg-rgb: 31, 41, 55;
    --bs-emphasis-color-rgb: 249, 250, 251;
    --bs-secondary-color-rgb: 156, 163, 175;
    --bs-secondary-bg-rgb: 55, 65, 81;
    --bs-tertiary-color-rgb: 156, 163, 175;
    --bs-tertiary-bg-rgb: 55, 65, 81;
    --bs-light-rgb: 55, 65, 81;
    --bs-dark-rgb: 243, 244, 246;
    --bs-border-color-translucent: rgba(255, 255, 255, .10);
    --bs-highlight-bg: var(--mt-warning-light);
}
/* Koyu temada zinc skalası ters çevrilir: bileşenler --mt-zinc-100/200'ü
   "açık zemin / ayırıcı", --mt-zinc-700/900'ü "koyu metin" anlamında
   kullanıyor; ters skala bu anlamları koyu zeminde de korur. */
:root.dark {
    --mt-zinc-50: #2B3544;
    --mt-zinc-100: #374151;
    --mt-zinc-200: #4B5563;
    --mt-zinc-300: #6B7280;
    --mt-zinc-400: #6B7280;
    --mt-zinc-500: #9CA3AF;
    --mt-zinc-600: #9CA3AF;
    --mt-zinc-700: #D1D5DB;
    --mt-zinc-800: #E5E7EB;
    --mt-zinc-900: #F3F4F6;
    --mt-zinc-950: #F9FAFB;
}

/* Koyu kenar menü (Metronic "Dark Sidebar"): <body> ya da <html> üzerine
   mt-sidebar-dark sınıfı eklenirse etkinleşir. */
.mt-sidebar-dark {
    --mt-sidebar-bg: #09090B;
    --mt-sidebar-border: #27272A;
    --mt-sidebar-fg: #FAFAFA;
    --mt-sidebar-muted: #71717B;
    --mt-sidebar-hover-fg: #FFFFFF;
    --mt-sidebar-active-bg: rgba(24, 24, 27, .60);
    --mt-sidebar-active-fg: #155DFC;
    --mt-sidebar-line: #27272A;
}

/* ============================================================================
   2) BOOTSTRAP 5.3 DEĞİŞKEN EŞLEMESİ
   Bootstrap :root,[data-bs-theme=light] içinde tanımlıyor; aynı özgüllükte
   ve SONRA yüklendiğimiz için bu blok kazanır.
   ============================================================================ */
:root,
[data-bs-theme=light] {
    --bs-font-sans-serif: var(--mt-font);
    --bs-font-monospace: var(--mt-font-mono);
    --bs-body-font-family: var(--mt-font);
    --bs-body-font-size: var(--mt-text-sm);
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--mt-fg);
    --bs-body-color-rgb: 17, 24, 39;
    --bs-body-bg: var(--mt-bg);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: var(--mt-zinc-950);
    --bs-emphasis-color-rgb: 3, 7, 18;
    --bs-secondary-color: var(--mt-fg-muted);
    --bs-secondary-color-rgb: 75, 85, 99;
    --bs-secondary-bg: var(--mt-accent);
    --bs-secondary-bg-rgb: 243, 244, 246;
    --bs-tertiary-color: var(--mt-fg-faint);
    --bs-tertiary-color-rgb: 107, 114, 128;
    --bs-tertiary-bg: var(--mt-bg-subtle);
    --bs-tertiary-bg-rgb: 249, 250, 251;
    --bs-heading-color: var(--mt-fg);

    --bs-primary: var(--mt-primary);
    --bs-primary-rgb: var(--mt-primary-rgb);
    --bs-secondary: var(--mt-zinc-500);
    --bs-secondary-rgb: 107, 114, 128;
    --bs-success: var(--mt-success);
    --bs-success-rgb: var(--mt-success-rgb);
    --bs-info: var(--mt-info);
    --bs-info-rgb: var(--mt-info-rgb);
    --bs-warning: var(--mt-warning);
    --bs-warning-rgb: var(--mt-warning-rgb);
    --bs-danger: var(--mt-danger);
    --bs-danger-rgb: var(--mt-danger-rgb);
    --bs-light: var(--mt-zinc-100);
    --bs-light-rgb: 243, 244, 246;
    --bs-dark: var(--mt-zinc-900);
    --bs-dark-rgb: 17, 24, 39;
    --bs-white: #FFFFFF;
    --bs-black: #000000;

    --bs-primary-text-emphasis: var(--mt-primary-text);
    --bs-success-text-emphasis: var(--mt-success-text);
    --bs-info-text-emphasis: var(--mt-info-text);
    --bs-warning-text-emphasis: var(--mt-warning-text);
    --bs-danger-text-emphasis: var(--mt-danger-text);
    --bs-primary-bg-subtle: var(--mt-primary-light);
    --bs-success-bg-subtle: var(--mt-success-light);
    --bs-info-bg-subtle: var(--mt-info-light);
    --bs-warning-bg-subtle: var(--mt-warning-light);
    --bs-danger-bg-subtle: var(--mt-danger-light);
    --bs-light-bg-subtle: var(--mt-zinc-50);
    --bs-primary-border-subtle: var(--mt-primary-light-border);
    --bs-success-border-subtle: var(--mt-success-light-border);
    --bs-info-border-subtle: var(--mt-info-light-border);
    --bs-warning-border-subtle: var(--mt-warning-light-border);
    --bs-danger-border-subtle: var(--mt-danger-light-border);
    --bs-light-border-subtle: var(--mt-border);

    --bs-gray: var(--mt-zinc-500);
    --bs-gray-dark: var(--mt-zinc-800);
    --bs-gray-100: var(--mt-zinc-100);
    --bs-gray-200: var(--mt-zinc-200);
    --bs-gray-300: var(--mt-zinc-300);
    --bs-gray-400: var(--mt-zinc-400);
    --bs-gray-500: var(--mt-zinc-500);
    --bs-gray-600: var(--mt-zinc-600);
    --bs-gray-700: var(--mt-zinc-700);
    --bs-gray-800: var(--mt-zinc-800);
    --bs-gray-900: var(--mt-zinc-900);

    --bs-border-color: var(--mt-border);
    --bs-border-color-translucent: rgba(17, 24, 39, .08);
    --bs-border-radius: var(--mt-radius-sm);
    --bs-border-radius-sm: var(--mt-radius-xs);
    --bs-border-radius-lg: var(--mt-radius);
    --bs-border-radius-xl: var(--mt-radius-lg);
    --bs-border-radius-xxl: 16px;
    --bs-border-radius-pill: 50rem;

    --bs-link-color: var(--mt-link);
    --bs-link-color-rgb: var(--mt-link-rgb);
    --bs-link-hover-color: var(--mt-link-hover);
    --bs-link-hover-color-rgb: var(--mt-link-hover-rgb);
    --bs-link-decoration: none;

    --bs-box-shadow: var(--mt-shadow-dropdown);
    --bs-box-shadow-sm: var(--mt-shadow-xs);
    --bs-box-shadow-lg: var(--mt-shadow-modal);
    --bs-focus-ring-width: 2px;
    --bs-focus-ring-opacity: 1;
    --bs-focus-ring-color: #3B82F6;
    --bs-form-valid-color: var(--mt-success-text);
    --bs-form-valid-border-color: var(--mt-success);
    --bs-form-invalid-color: var(--mt-danger);
    --bs-form-invalid-border-color: var(--mt-danger);
    --bs-highlight-bg: var(--mt-warning-light);
    --bs-code-color: var(--mt-info-text);

    /* Bootstrap 4 adlarıyla okuyan eski kodlar için (DevExpress köprüsü
       var(--bs-primary, var(--primary)) biçiminde her ikisine de bakıyor). */
    --primary: var(--mt-primary);
    --success: var(--mt-success);
    --info: var(--mt-info);
    --warning: var(--mt-warning);
    --danger: var(--mt-danger);

    /* DevExpress istemci bileşenleri (grafik, rapor görüntüleyici) paleti */
    --dxbl-client-component-palette-primary: var(--mt-primary);
    --dxbl-client-component-tooltip-color: #FFFFFF;
    --dxbl-client-component-tooltip-font-color: var(--mt-fg);
}

/* ============================================================================
   3) ESKİ MARKA TOKEN'LARI -> Metronic
   site.css'in eski "zk" katmanını okuyan dosyalar (zk-demo-giris.css,
   zk-mobil-indir.css ...) Metronic paletine bağlanır.
   ============================================================================ */
:root {
    --zk-lacivert-900: var(--mt-zinc-950);
    --zk-lacivert-700: var(--mt-zinc-800);
    --zk-marka: var(--mt-primary);
    --zk-marka-koyu: var(--mt-primary-hover);
    --zk-marka-vurgu: var(--mt-primary);
    --zk-azur: var(--mt-primary);
    --zk-yuzey: var(--mt-bg);
    --zk-yuzey-2: var(--mt-bg-subtle);
    --zk-yuzey-3: var(--mt-accent);
    --zk-murekkep: var(--mt-fg);
    --zk-murekkep-2: var(--mt-fg-muted);
    --zk-kenarlik: var(--mt-border);
    --zk-kenarlik-guclu: var(--mt-input);
    --zk-odak: var(--mt-primary);
    --zk-r: var(--mt-radius-lg);
    --zk-r-kucuk: var(--mt-radius);
    --zk-genislik: 400px;
    --zk-golge-2: var(--mt-shadow-xs);
    --zk-golge-3: var(--mt-shadow-sm);
    --zk-golge-4: var(--mt-shadow-dropdown);
}

/* ============================================================================
   4) TEMEL TİPOGRAFİ VE YÜZEY
   ============================================================================ */
html {
    -webkit-text-size-adjust: 100%;
}

html body {
    font-family: var(--mt-font);
    font-size: var(--mt-text-sm);
    line-height: 1.5;
    color: var(--mt-fg);
    background: var(--mt-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* DevExpress bileşenleri kendi font-family değişkenini "inherit" tutuyor;
   bazı açılır pencereler body dışında (portal) çizildiği için yazıtipini
   doğrudan da veriyoruz. */
.dxbl-popup-portal,
.dxbl-modal,
.dxbl-dropdown,
.dxbl-flyout,
.dxbl-toast-portal,
.xaf-alerts-stack {
    font-family: var(--mt-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mt-fg);
    font-weight: var(--mt-fw-semibold);
    letter-spacing: -0.01em;
}

a {
    color: var(--mt-link);
    text-decoration: none;
}
a:hover {
    color: var(--mt-link-hover);
}

::selection {
    background: rgba(37, 99, 235, .18);
}

/* Metronic ince kaydırma çubuğu */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mt-zinc-200) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--mt-zinc-200);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--mt-zinc-300);
}

/* Tema değişirken (js/mt-theme.js "mt-tema-geciyor" sınıfını bir kare için
   ekler) renk geçişleri kapalı: "transition: all" kullanan öğeler yarım
   renkte kalıp koyu zeminde koyu yazı gibi okunmaz görünmesin. */
:root.mt-tema-geciyor *,
:root.mt-tema-geciyor *::before,
:root.mt-tema-geciyor *::after {
    transition: none !important;
}