/* ============================================================================
   ZekiKod PDKS — Metronic 9 görünümü: UYGULAMA KABUĞU (mt-shell.css)
   ----------------------------------------------------------------------------
   Kapsam: ana pencere şablonu (#main-window-template-component / .app) —
   üst çubuk (header), sol menü (kenar çubuğu + kt-menu görünümlü gezinme
   ağacı), hesap açılır menüsü ve ana içerik kapsayıcısının zemin/boşlukları.
   Araç çubuğu DÜĞMELERİ (mt-controls), tablo/form (mt-data), açılır
   pencere/menü (mt-overlays), giriş sayfası (mt-auth) ve panolar (mt-pages)
   BURADA stillenmez.

   Yükleme sırası: mt-tokens < mt-shell (BURASI, ilk yüklenir) < mt-controls
   < mt-data < mt-overlays < mt-auth < mt-pages. mt-controls her `.dxbl-btn`
   / `.dxbl-text-edit` öğesini (0,3,0) özgüllüğüne kadar genel olarak
   stiliyor; biz ONDAN ÖNCE yüklendiğimiz için, üst çubuk/kenar çubuğu
   içindeki DevExpress denetimlerine dokunan HER kural
   `#main-window-template-component` ID'siyle başlar (ID tek başına her
   zaman (0,3,0)'ı yener) — hem mt-controls'ü yenmek için, hem de kuralın
   açılır pencerelere ve giriş sayfasına sızmasını önlemek için (o sayfalarda
   bu ID yok).

   Yalnız --mt-* token'ları kullanılır (bkz. mt-tokens.css). Satır-içi
   stilleri veya XAF'in kendi !important kurallarını yenmek gereken her
   yerde !important kullanılmıştır ve nedeni yorum olarak belirtilmiştir.
   ============================================================================ */

/* ============================================================================
   0) ORTAK KIRILMA NOKTASI
   Görev tarifi "992px altı" için ayrı değerler veriyor (header 60px,
   yatay boşluk 16px). Bunlar mt-tokens.css'te ayrı bir token olarak yok
   (token'lar yalnız >=992px masaüstü değerlerini taşıyor); görev tarifinin
   kendisinde literal verildiği için burada da literal kullanılıyor ve
   her kullanıldığı yerde yorumla işaretleniyor. Bootstrap'ın kendi "lg"
   kırılımıyla (992px) tutarlı olsun diye XAF'in .98px kuralına uyulmuştur.
   ============================================================================ */

/* ============================================================================
   1) YERLEŞİM ÖLÇÜLERİ — XAF birçok kuralda sabit 270px kullanıyor
      (.header-left-side, .sidebar, .collapse-toggle .sidebar-sm-shadow).
      Hepsini var(--mt-sidebar-w) (280px) ile hizalıyoruz; XAF'in JS ile
      açtığı/kapattığı .collapse-toggle ve mobil overlay davranışı aynen
      kalıyor, yalnız sayısal ölçü değişiyor.
   ============================================================================ */
#main-window-template-component .header-left-side {
    width: var(--mt-sidebar-w);
    min-width: var(--mt-sidebar-w);
}

/* Kenar çubuğu daraltıldığında (masaüstü) XAF header-left-side'ı
   max-width:270px; width:auto yapıyor — yeni genişliğe göre üst sınırı
   güncelliyoruz (içerik zaten hamburger'in genişliği kadar daralıyor). */
#main-window-template-component.collapse-toggle .header-left-side {
    max-width: var(--mt-sidebar-w);
}

#main-window-template-component .xaf-sidebar.sidebar {
    width: var(--mt-sidebar-w);
    min-width: var(--mt-sidebar-w);
}

/* Mobilde (<576px) kenar çubuğu overlay olduğunda XAF gölge/perdeyi
   270px'ten başlatıyordu (.collapse-toggle .sidebar-sm-shadow{left:270px}
   — bu kural yalnız @media(max-width:575.98px) içinde tanımlı). */
#main-window-template-component.collapse-toggle .sidebar-sm-shadow {
    left: var(--mt-sidebar-w);
}

/* Header yüksekliği: >=992px'de var(--mt-header-h) (70px), altında 60px. */
#main-window-template-component .header {
    min-height: var(--mt-header-h);
}
@media (max-width: 991.98px) {
    #main-window-template-component .header {
        min-height: 60px; /* mt-tokens.css'te küçük ekran için ayrı token yok; değer görev tarifinden literal alındı */
    }
}

/* ============================================================================
   2) .header — beyaz zemin, alt çizgi, ince gölge; navbar-dark sınıfının
      getirdiği açık-renk-koyu-zemin metin/ikon değişkenlerini nötrlüyoruz.
   ============================================================================ */
#main-window-template-component .header.navbar-dark {
    background-color: var(--mt-bg);
    border-bottom: 1px solid var(--mt-border);
    box-shadow: var(--mt-shadow-xs); /* ZekiKodOkul: üst çubukta ince gölge (shadow-sm) */
    color: var(--mt-fg);
    /* Bootstrap navbar-dark bu değişkenleri okuyarak açık renk metin/link üretir;
       ZekiKodOkul'a göre koyu (fg) metne çekiyoruz. */
    --bs-navbar-color: var(--mt-fg-muted);
    --bs-navbar-hover-color: var(--mt-link);
    --bs-navbar-active-color: var(--mt-link);
    --bs-navbar-disabled-color: var(--mt-fg-faint);
    --bs-navbar-brand-color: var(--mt-fg);
    --bs-navbar-brand-hover-color: var(--mt-link);
}

/* ============================================================================
   3) .header-left-side = Metronic kenar çubuğu başlığı
   ============================================================================ */
#main-window-template-component .header-left-side {
    position: relative; /* hamburger düğmesini kenarın üstüne mutlak konumlamak için */
    background: var(--mt-sidebar-bg);
    border-right: 1px solid var(--mt-sidebar-border);
    padding: 0 24px;
}

#main-window-template-component .header-logo {
    background-image: url('../../images/sentez-yatay.svg');
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 150px;
    height: 32px;
    margin: 0; /* DOM'da .mx-3 (Bootstrap mx-3 = 1rem yatay margin) taşıyor, sıfırlıyoruz */
    box-shadow: none;
    border-radius: 0;
}
/* Koyu kenar çubuğu varyantında beyaz logo. */
.mt-sidebar-dark #main-window-template-component .header-logo {
    background-image: url('../../images/sentez-yatay-beyaz.svg');
}

/* --- Hamburger = Metronic kenar çubuğu daraltma düğmesi ---
   30x30, beyaz zemin, ince kenarlık, kenar çubuğunun sağ sınırının TAM
   ÜSTÜNE mutlak konumlanır (yarısı kenar çubuğunda, yarısı header'da). */
#main-window-template-component .btn-hamburger {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2; /* header-right-side içeriğinin üstünde kalsın */
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mt-bg);
    border: 1px solid var(--mt-input);
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-shadow-xs);
    color: var(--mt-fg-muted); /* içindeki mask-icon currentColor kullanıyor */
    transition: background-color var(--mt-transition);
}
#main-window-template-component .btn-hamburger:hover {
    background-color: var(--mt-accent);
}

/* İçindeki ikon: DevExpress satır-içi stil ile 24px hamburger mask'i
   veriyor (style="...mask-image:url(IImageService/Hamburger...);
   width/height/mask-size:24px"). Satır-içi stili yenmek için !important
   şart; Metronic'teki "collapse" (sola bakan ok + dikey çizgi) glif'ine
   kendi SVG mask'imizi veriyoruz. */
#main-window-template-component .btn-hamburger .xaf-image {
    width: 16px !important; /* satır-içi 24px'i yeniyor */
    height: 16px !important;
    mask-size: 16px !important;
    -webkit-mask-size: 16px !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6L8 12L14 18'/%3E%3Cline x1='17' y1='4' x2='17' y2='20'/%3E%3C/svg%3E") !important; /* satır-içi mask-image'ı yeniyor */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6L8 12L14 18'/%3E%3Cline x1='17' y1='4' x2='17' y2='20'/%3E%3C/svg%3E") !important;
    transition: transform var(--mt-transition);
}

/* Daraltılmış durum (.app.collapse-toggle): XAF sol tarafı ~44px'e
   küçültüyor ve logoyu !important ile gizliyor (dokunmuyoruz). Burada
   iç boşluğu/kenarlığı düzeltip düğmeyi normal akışa (statik) alıyor ve
   glif'i 180° döndürüyoruz. */
#main-window-template-component.collapse-toggle .header-left-side {
    width: auto;
    min-width: 0; /* bölüm 1'deki 280px alt sınırı daraltılmış durumda geçersiz */
    padding: 0 12px;
    border-right: 0;
}
#main-window-template-component.collapse-toggle .btn-hamburger {
    position: static;
    transform: none;
}
#main-window-template-component.collapse-toggle .btn-hamburger .xaf-image {
    transform: rotate(180deg);
}

/* Küçük ekranlar (<576px): kenar çubuğu overlay'e dönüşüyor; sol taraf
   otomatik genişlik, düğme statik "ghost" görünüm, logo XAF'in kendi
   kurallarına göre (gizli) kalıyor. */
@media (max-width: 575.98px) {
    #main-window-template-component .header-left-side {
        width: auto;
        min-width: 0; /* mobilde kenar çubuğu overlay: başlık + hesap alanına yer kalsın */
        border-right: 0;
        padding: 0 12px;
    }
    #main-window-template-component .btn-hamburger {
        position: static;
        transform: none;
    }
}

/* ============================================================================
   4) .header-right-side — kalan alanı doldurur; görünüm başlığı + geri
      düğmesi + bildirim araç çubuğu + hesap alanı burada.
   ============================================================================ */
#main-window-template-component .header-right-side {
    padding: 0 var(--mt-content-px); /* >=992px */
    align-items: center;
    gap: 12px;
}
@media (max-width: 991.98px) {
    #main-window-template-component .header-right-side {
        padding: 0 16px; /* görev tarifi: 992px altı literal 16px */
    }
}

/* Görünüm başlığının süs ikonu (Metronic başlıklarında ikon yok). */
#main-window-template-component .header .xaf-caption-icon-container {
    display: none;
}

/* Liste / pano başlığı. */
#main-window-template-component .xaf-view-caption-lg {
    font-size: var(--mt-text-xl);
    font-weight: var(--mt-fw-medium);
    line-height: 1.2;
    color: var(--mt-fg);
    letter-spacing: -0.01em;
    padding-bottom: 0; /* XAF'in logo hizalama boşluğunu kaldırıyoruz */
}

/* Detay görünümü: üstte nesne tipi (küçük/soluk), altta nesne başlığı. */
#main-window-template-component .xaf-view-caption-sm {
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-normal);
    line-height: 1.2;
    color: var(--mt-fg-muted);
}
#main-window-template-component .xaf-object-caption {
    font-size: var(--mt-text-lg);
    font-weight: var(--mt-fw-semibold);
    line-height: 1.25;
    color: var(--mt-fg);
}

/* --- Geri düğmesi (yalnız listeden açılan detay görünümlerinde,
   .xaf-show-navigate-back-action ile görünür olur — XAF'in kendi
   göster/gizle ve küçük-ekran kuralları korunuyor, yalnız görünümü
   değişiyor). --- */
#main-window-template-component button.navigate-back-icon-container {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    border-radius: var(--mt-radius-sm);
    color: var(--mt-fg-muted);
}
#main-window-template-component .header-right-side .navigate-back-icon-container.dxbl-btn:hover {
    background-color: var(--mt-accent); /* XAF'in kendi hover kuralını (dxds değişkeni) ID özgüllüğüyle eziyoruz */
}
#main-window-template-component button.navigate-back-icon-container .xaf-image {
    width: 18px !important; /* satır-içi Arrow_Left mask'inin 24px ölçüsünü yeniyor */
    height: 18px !important;
    mask-size: 18px !important;
    -webkit-mask-size: 18px !important;
}

/* ============================================================================
   5) Header araç çubuğu (bildirim düğmesi) — ghost ikon düğmeleri + rozet.
      Aynı sınıflar hem görünen hem __virtual ölçüm ikizinde geçtiği için
      ikisi de otomatik olarak aynı şekilde stillenir.
   ============================================================================ */
#main-window-template-component .header-right-side dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-border-width: 0px;
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-active-bg: var(--mt-accent);
    --dxbl-btn-border-radius: var(--mt-radius-sm);
    min-height: 34px;
    min-width: 34px;
    padding: 0 8px;
}
#main-window-template-component .header-right-side dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn img.xaf-toolbar-item-icon {
    filter: var(--mt-icon-filter);
}
/* Bildirim yokken XAF zili devre dışı bırakıyor: düğme .5 x ikon .4 x filtre
   .72 opaklık çarpılınca zil neredeyse kayboluyordu. Metronic başlığında zil
   her zaman okunur bir ghost ikondur; devre dışılık imleç ve hover'sızlıkla belli. */
#main-window-template-component .header-right-side dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn.dxbl-disabled {
    opacity: 1;
}
#main-window-template-component .header-right-side dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn.dxbl-disabled img.xaf-toolbar-item-icon {
    opacity: .9;
}
/* Bildirim sayısı: küçük yuvarlak rozet. */
#main-window-template-component .header-right-side dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mt-accent);
    color: var(--mt-fg-secondary);
    font-size: var(--mt-text-2xs);
    font-weight: var(--mt-fw-medium);
    line-height: 18px;
}

/* ============================================================================
   6) Hesap düğmesi + açılır menü
   ============================================================================ */
#main-window-template-component .account-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--mt-accent);
    border: 2px solid var(--mt-success);
    color: var(--mt-fg-muted); /* mask ikonu currentColor kullanıyor */
    transition: box-shadow var(--mt-transition);
}
#main-window-template-component .account-button:hover {
    box-shadow: 0 0 0 3px var(--mt-accent); /* hover halkası */
}
#main-window-template-component .account-button .xaf-image {
    width: 18px !important; /* satır-içi 24px mask ölçüsünü yeniyor */
    height: 18px !important;
    mask-size: 18px !important;
    -webkit-mask-size: 18px !important;
}

/* Açılır menü: yalnız >=576px'de yeniden konumlandırıyoruz — XAF'in
   mobilde (<576px) ekranı ortalayan modal-benzeri düzenine (top/left:50%,
   transform:translate(-50%,-50%), min-width:80%) dokunmuyoruz. */
@media (min-width: 576px) {
    #main-window-template-component .account-main.dropdown-menu {
        width: 250px;
        min-width: 250px;
        background-color: var(--mt-bg);
        border: 1px solid var(--mt-border);
        border-radius: var(--mt-radius);
        box-shadow: var(--mt-shadow-dropdown);
        padding: 6px;
        top: var(--mt-header-h);
        right: 0;
        left: auto;
    }
    @media (max-width: 991.98px) {
        #main-window-template-component .account-main.dropdown-menu {
            top: 60px; /* header'ın 992px altı yüksekliğiyle tutarlı (bkz. bölüm 1) */
        }
    }
}

#main-window-template-component .user-info-container {
    padding: 8px 10px 10px;
    gap: 10px;
}
#main-window-template-component .logo-container {
    width: 36px;
    height: 36px;
    border: 0;
    background-color: var(--mt-primary-light);
    color: var(--mt-primary); /* mask ikonu currentColor kullanıyor */
}
#main-window-template-component .logo-container .xaf-image {
    width: 18px !important;
    height: 18px !important;
    mask-size: 18px !important;
    -webkit-mask-size: 18px !important;
}
#main-window-template-component .user-name-container {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-fw-semibold);
    color: var(--mt-fg);
}
#main-window-template-component .my-details.xaf-btn {
    font-size: var(--mt-text-xs);
    color: var(--mt-primary);
    text-decoration: none;
    border: 0;
    padding: 0;
    background: transparent;
    min-height: auto;
}
#main-window-template-component .account-separator {
    border-top: 1px solid var(--mt-border);
    margin: 4px 0;
}
#main-window-template-component .log-off.xaf-btn {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    justify-content: flex-start;
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-medium);
    color: var(--mt-fg);
    border-radius: var(--mt-radius-sm);
    background-color: transparent;
}
#main-window-template-component .log-off.xaf-btn:hover {
    background-color: var(--mt-accent);
}
/* Tıkla-kapat davranışı korunuyor; yalnız saydamlaştırıyoruz. */
#main-window-template-component .account-modal-backdrop {
    background-color: transparent;
}

/* ============================================================================
   7) .xaf-sidebar — kenar çubuğu gövdesi
   ============================================================================ */
#main-window-template-component .xaf-sidebar.sidebar {
    background-color: var(--mt-sidebar-bg);
    border-right: 1px solid var(--mt-sidebar-border);
    box-shadow: none; /* XAF: body:not(.dxbl-theme-fluent) .sidebar{box-shadow:0 2px 8px...} kaldırılıyor */
}
#main-window-template-component .xaf-sidebar .dxbl-scroll-viewer-content {
    padding: 12px 10px 16px;
}

/* ============================================================================
   8) Gezinme akordeonu → Metronic kt-menu görünümü
   ============================================================================ */

/* DevExpress'in kendi odak halkasını (zaten :focus-visible ile aynı
   mantıkta, width .125rem = 2px ve offset -2px hazır geliyor) yalnız
   rengini ZekiKodOkul'un %50 saydam mavisine çekerek kullanıyoruz — kendi
   :focus-visible kuralımızı yazmak çifte anahat oluştururdu. */
#main-window-template-component .xaf-navmenu.dxbl-accordion {
    --dxbl-accordion-focus-outline-color: rgba(59, 130, 246, .5); /* ZekiKodOkul odak rengi; görev tarifinde literal verildi, token yok */
}
/* DevExpress akordeonu grupları kutu gibi çiziyor (açık grupta sol/sağ kenar,
   gruplar arasında alt çizgi; canlı ölçüm: 1px #EBEBEE). Metronic demo1 kenar
   menüsünde çerçeve ya da ayırıcı yok; gruplar yalnız boşlukla ayrılır. */
#main-window-template-component .xaf-navmenu .dxbl-accordion-group,
#main-window-template-component .xaf-navmenu .dxbl-accordion-item {
    border: 0;
    box-shadow: none;
}

/* XAF'in tıklanabilir öğelerde alt çizgi + kalın font vermesini kaldırıyoruz. */
#main-window-template-component .clickable-xaf-nav-item > a .xaf-nav-link,
#main-window-template-component .clickable-xaf-nav-item > div > a .xaf-nav-link,
#main-window-template-component .dxbl-accordion-group-header .xaf-nav-link {
    text-decoration: none;
    font-weight: inherit; /* asıl ağırlığı aşağıdaki durum bazlı kurallar belirler */
}

/* --- 8a) Süzgeç kutusu --- */
#main-window-template-component .dxbl-accordion-filter {
    margin: 0 0 8px;
}
#main-window-template-component .dxbl-accordion-filter > .dxbl-group-header {
    padding: 0;
    border: 0;
    background: transparent;
}
#main-window-template-component .dxbl-navigation-filter.dxbl-text-edit {
    --dxbl-text-edit-bg: var(--mt-bg-subtle);
    --dxbl-text-edit-color: var(--mt-fg);
    --dxbl-text-edit-border-color: var(--mt-input);
    --dxbl-text-edit-border-radius: var(--mt-radius-sm);
    --dxbl-text-edit-font-size: var(--mt-text-2sm);
    --dxbl-text-edit-padding-x: 10px;
    --dxbl-text-edit-padding-y: 8px;
    --dxbl-text-edit-btn-bg: transparent;
    --dxbl-text-edit-btn-color: var(--mt-fg-muted);
    --dxbl-text-edit-btn-hover-color: var(--mt-fg-muted);
    min-height: var(--mt-control-h);
    background-color: var(--dxbl-text-edit-bg);   /* DX: .dxbl-accordion-filter>.dxbl-accordion-group-header .dxbl-navigation-filter{background:0 0;border:none} (0,4,0) değişkenleri boşa çıkarıyordu */
    border: var(--dxbl-text-edit-border-width) var(--dxbl-text-edit-border-style) var(--dxbl-text-edit-border-color);
}
#main-window-template-component .dxbl-navigation-filter.dxbl-text-edit:focus-within {
    --dxbl-text-edit-border-color: var(--mt-ring); /* ZekiKodOkul odağı: mavi halka */
    box-shadow: var(--mt-ring-shadow);
}
#main-window-template-component .dxbl-navigation-filter .dxbl-text-edit-input::placeholder {
    color: var(--mt-fg-faint);
}
#main-window-template-component .dxbl-navigation-filter .dxbl-btn-icon {
    background-color: transparent;
    border: 0;
    color: var(--mt-fg-muted);
}

/* --- 8b) Kök gruplar (alt öğesi olan menüler) --- */
#main-window-template-component .xaf-nav-item.has-children > .dxbl-accordion-group-header {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    gap: 10px;
    border-radius: var(--mt-radius);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}
#main-window-template-component .xaf-nav-item.has-children > .dxbl-accordion-group-header img.xaf-nav-menu-item-icon {
    width: 18px;
    height: 18px;
    filter: var(--mt-icon-filter);
}
#main-window-template-component .xaf-nav-item.has-children > .dxbl-accordion-group-header .xaf-nav-link {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-fw-medium);
    color: var(--mt-sidebar-fg);
}
#main-window-template-component .xaf-nav-item.has-children > .dxbl-accordion-group-header:hover .xaf-nav-link {
    color: var(--mt-sidebar-hover-fg);
}
#main-window-template-component .xaf-nav-item.has-children > .dxbl-accordion-group-header:hover img.xaf-nav-menu-item-icon {
    filter: var(--mt-icon-filter-primary);
}

/* Genişletme düğmesi ("+"/"−"): sağ uca taşı, DevExpress ok simgesini
   gizleyip kendi çizgilerimizi çiziyoruz — tıklanabilirliği (fonksiyonu)
   değişmiyor, yalnız görünümü. */
#main-window-template-component .dxbl-group-expand-btn {
    order: 3;
    margin-left: auto;
    position: relative;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#main-window-template-component .dxbl-group-expand-btn:hover {
    background: transparent;
}
#main-window-template-component .dxbl-group-expand-btn svg {
    display: none; /* DevExpress ok ikonu gizleniyor; buton işlevi (tıklama) etkilenmiyor */
}
#main-window-template-component .dxbl-group-expand-btn::before,
#main-window-template-component .dxbl-group-expand-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: var(--mt-fg-muted);
    transition: transform var(--mt-transition);
}
#main-window-template-component .dxbl-group-expand-btn::before {
    width: 10px;
    height: 1px;
    transform: translate(-50%, -50%);
}
#main-window-template-component .dxbl-group-expand-btn::after {
    width: 1px;
    height: 10px;
    transform: translate(-50%, -50%);
}
/* .expanded, dxbl-group-control (grubun kendisi) üzerinde — dikey çizgiyi
   sıfıra indirip yalnız yatay çizgiyi ("−") bırakıyoruz. */
#main-window-template-component .dxbl-accordion-group.expanded > .dxbl-accordion-group-header .dxbl-group-expand-btn::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* --- 8c) Alt öğe kapsayıcısı: girinti + dikey çizgi --- */
#main-window-template-component .dxbl-accordion-group-body .dxbl-accordion-items-container {
    position: relative;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#main-window-template-component .dxbl-accordion-group-body .dxbl-accordion-items-container::before {
    content: "";
    position: absolute;
    left: 19px; /* kök ikon merkeziyle aynı hizada (10px dolgu + 18px ikon/2) */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--mt-sidebar-line);
}
/* Bu kapsayıcı içindeki tüm ikonlar (yaprak öğe VEYA iç içe grup başlığı
   fark etmeksizin) süs sayılır ve gizlenir — Metronic alt menülerde ikon
   göstermez. */
#main-window-template-component .dxbl-accordion-group-body img.xaf-nav-menu-item-icon {
    display: none;
}
/* Yaprak öğelerin (alt öğesi olmayan) yer tutucu genişletme düğmesi ve
   girinti kutusu: yer kaplamasınlar (alt öğesi OLAN iç içe gruplar bu
   sınıfları taşımıyor, gerçek .dxbl-group-expand-btn'leri yukarıdaki 8b
   kuralıyla zaten görünür kalıyor). */
#main-window-template-component .dxbl-accordion-group-body .dxbl-accordion-group-expand-btn-container,
#main-window-template-component .dxbl-accordion-group-body .dxbl-accordion-item-indent {
    width: 0;
    min-width: 0;
    flex: 0 0 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#main-window-template-component .xaf-nav-item > a.dxbl-accordion-item-content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 10px 8px 14px;
    border-radius: var(--mt-radius);
    background: transparent;
}
#main-window-template-component .xaf-nav-item > a.dxbl-accordion-item-content .xaf-nav-link {
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-normal);
    color: var(--mt-sidebar-fg);
}
#main-window-template-component .xaf-nav-item > a.dxbl-accordion-item-content:hover .xaf-nav-link {
    color: var(--mt-sidebar-hover-fg);
}

/* AKTİF alt öğe: zemin + kalın/renkli başlık + solda 4px'lik vurgu çizgisi (ZekiKodOkul). */
#main-window-template-component .xaf-nav-item.dxbl-active > a.dxbl-accordion-item-content,
#main-window-template-component a.dxbl-accordion-item-content.dxbl-active {
    background-color: var(--mt-sidebar-active-bg);
    box-shadow: inset 4px 0 0 var(--mt-sidebar-active-bar);
}
#main-window-template-component .xaf-nav-item.dxbl-active > a.dxbl-accordion-item-content .xaf-nav-link,
#main-window-template-component a.dxbl-accordion-item-content.dxbl-active .xaf-nav-link {
    font-weight: var(--mt-fw-semibold);
    color: var(--mt-sidebar-active-fg);
}
/* AKTİF olmayan alt öğe üstünde gezinme zemini (ZekiKodOkul hover). */
#main-window-template-component .xaf-nav-item:not(.dxbl-active) > a.dxbl-accordion-item-content:not(.dxbl-active):hover {
    background-color: var(--mt-accent);
}
#main-window-template-component .xaf-nav-item.dxbl-active > a.dxbl-accordion-item-content::before,
#main-window-template-component a.dxbl-accordion-item-content.dxbl-active::before {
    content: none; /* ZekiKodOkul'da aktif noktası yok; vurgu solda 4px çizgiyle veriliyor */
}

/* --- 8d) Kök seviyede alt öğesi olmayan öğeler (ör. "Bayi Paneli"):
   kök gruplarla aynı görünüm (ikon görünür kalır — yukarıdaki "ikonu
   gizle" kuralı yalnız .dxbl-accordion-group-body içine uygulanıyor). --- */
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content {
    min-height: 34px;
    padding: 6px 10px;
    gap: 10px;
    border-radius: var(--mt-radius);
}
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content img.xaf-nav-menu-item-icon {
    display: block; /* üstteki genel "group-body içindeyse gizle" kuralı burada geçerli değil, netlik için açıkça belirtiliyor */
    width: 18px;
    height: 18px;
    filter: var(--mt-icon-filter);
}
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content .xaf-nav-link {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-fw-medium);
    color: var(--mt-sidebar-fg);
}
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content:hover .xaf-nav-link {
    color: var(--mt-sidebar-hover-fg);
}
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content:hover img.xaf-nav-menu-item-icon {
    filter: var(--mt-icon-filter-primary);
}
/* Kök seviye AKTİF yaprak: kök grup aktif rengiyle (nokta yok — kök
   grupların aktifken noktası olmuyor, yalnız zemin + primary başlık/ikon). */
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item.dxbl-active > a.dxbl-accordion-item-content,
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content.dxbl-active {
    background-color: var(--mt-sidebar-active-bg);
    box-shadow: inset 4px 0 0 var(--mt-sidebar-active-bar);
}
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item.dxbl-active > a.dxbl-accordion-item-content .xaf-nav-link,
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content.dxbl-active .xaf-nav-link {
    color: var(--mt-sidebar-active-fg);
    font-weight: var(--mt-fw-semibold);
}
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item.dxbl-active > a.dxbl-accordion-item-content img.xaf-nav-menu-item-icon,
#main-window-template-component .dxbl-accordion-container > .dxbl-accordion-items-container > .xaf-nav-item.clickable-xaf-nav-item > a.dxbl-accordion-item-content.dxbl-active img.xaf-nav-menu-item-icon {
    filter: var(--mt-icon-filter-primary);
}

/* --- 8e) Koyu kenar çubuğu (.mt-sidebar-dark, <body>/<html> üzerinde) ---
   Renk token'ları mt-tokens.css'te zaten otomatik değişiyor; yalnız
   muted ikon filtresini koyu zemine göre okunur kılıyoruz. */
.mt-sidebar-dark #main-window-template-component .xaf-nav-menu-item-icon {
    filter: grayscale(1) brightness(1.7) opacity(.6); /* koyu zeminde muted ikon okunurluğu; görev tarifinde literal örnek verildi */
}

/* --- 8f) Canlı doğrulamada bulunan DevExpress katmanları ---
   DevExpress akordeonu grup başlığına ve öğe içeriğine ::before ile
   currentColor + opaklık katmanı çiziyor (açık gri kutular buradan
   geliyordu). Menüde zemini kendimiz verdiğimiz için bu katmanlar
   kapatılır; aktif öğede de ::before kapalı, vurgu solda 4px çizgiyle
   veriliyor (ZekiKodOkul, bkz. 8c). */
#main-window-template-component .xaf-navmenu .dxbl-accordion-group-header::before,
#main-window-template-component .xaf-navmenu .dxbl-accordion-item-content::before {
    content: none;
}
/* Öğe kutusu overflow:hidden geliyordu; aktif nokta kutunun 6px solunda
   (dikey çizginin üstünde) durduğu için kırpılıyordu. */
#main-window-template-component .dxbl-accordion-group-body .xaf-nav-item {
    overflow: visible;
}
/* .dxbl-text 4px dikey dolgu taşıyor: alt öğeler 34px yerine 44px'e,
   kök başlıklar 42px'e çıkıyordu. */
#main-window-template-component .xaf-navmenu .dxbl-accordion-item-text-container > .dxbl-text {
    padding-top: 0;
    padding-bottom: 0;
}
/* Kök başlıkta içerik, eski (solda duran) genişletme düğmesine göre 6px
   sol boşluk alıyordu; düğme artık sağda. */
#main-window-template-component .xaf-nav-item.has-children > .dxbl-accordion-group-header > .dxbl-accordion-item-content {
    margin-left: 0;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Başlık: XAF kap genişliğini (gizlediğimiz) ikon için calc(100% - 42px)
   ile sınırlıyor; başlık gereksiz yere "..." ile kesiliyordu. */
#main-window-template-component .header .xaf-caption-container {
    max-width: 100%;
}
#main-window-template-component .header-right-side > div[role="heading"] {
    flex: 0 1 auto;
    min-width: 0;
}

/* ============================================================================
   9) .about-info — kenar çubuğu altbilgisi
   ============================================================================ */
#main-window-template-component .about-info {
    padding: 12px 24px;
    margin: 0;
    border-top: 1px solid var(--mt-sidebar-border);
    font-size: var(--mt-text-2xs);
    line-height: 1.4;
    color: var(--mt-fg-muted);
    opacity: 1;
}

/* ============================================================================
   10) Ana alan (#main-view-content) — yalnız ana pencereninki, popup'lar
       içindeki .main değil (bu yüzden çocuklar `>` ile bağlanıyor).
   ============================================================================ */
#main-view-content {
    background-color: var(--mt-page-bg);
}
#main-view-content > .main-toolbar {
    padding: 16px var(--mt-content-px) 12px; /* >=992px */
    background-color: var(--mt-page-bg);
    border: 0;
}
#main-view-content > .main-content {
    padding: 0 var(--mt-content-px) var(--mt-content-px); /* >=992px */
}
@media (max-width: 991.98px) {
    #main-view-content > .main-toolbar {
        padding: 12px 16px 8px;
    }
    #main-view-content > .main-content {
        padding: 0 16px 16px;
    }
}
/* Boşken (panolarda main-toolbar boş render edilir): XAF
   .main-toolbar:empty{padding:0 !important} veriyor. Bu durumda pano
   içeriği üst çubuğa 0-3px ile yapışıyordu; içerik üstten Metronic sayfa
   boşluğu kadar açılır. */
#main-view-content:has(> .main-toolbar:empty) > .main-content {
    padding-top: 20px;
}

/* ============================================================================
   11) Mobil overlay perdesi (.sidebar-sm-shadow)
   ============================================================================ */
#main-window-template-component .sidebar-sm-shadow {
    /* XAF aynı kuralda background-color:black + opacity:.3 veriyor; rgba
       kullanıp opacity'i sıfırlıyoruz, yoksa iki saydamlık çarpılıp perde
       gereğinden açık çıkar. */
    background-color: rgba(0, 0, 0, .3);
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================================
   12) #skip-navigation-link — küçük primary hap; XAF'in odakta-göster
       davranışına (opacity/top/transition) dokunulmuyor.
   ============================================================================ */
#skip-navigation-link {
    background: var(--mt-primary);
    color: #fff;
    border: none;
    border-radius: var(--mt-radius-sm);
    padding: 6px 12px;
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-medium);
    text-decoration: none;
}
#skip-navigation-link:focus {
    background: var(--mt-primary);
    color: #fff;
}