/*
  Dozze'ye ozel duzeltmeler.

  Metronic'in kendi degiskenleri ve siniflari OLDUGU GIBI kullaniliyor; burasi
  yalnizca marka renkleri ve sablonda karsiligi olmayan kucuk seyler icin.

  NOT: Renkleri sabit deger olarak yazmak kalici cozum degil. Dogru yer
  src/sass/_init.scss uzerinden yeniden derlemek; asagidaki bloklar o gun
  silinecek. Su an derleme zinciri (Node/gulp) kurulu olmadigi icin bundle'in
  ustune yaziliyor.
*/

:root {
    /* Sol menu: siyah. */
    --dz-aside-bg: #000000;

    /* Ust bar: menuden birkac ton acik. */
    --dz-header-bg: #1f1f1f;
    --dz-header-border: #2c2c2c;
    --dz-header-icon: #b5b5b5;

    /*
      Vurgu rengi: istemcideki hardal (colors.bonusVivid = #FFC02E).
      Sablonun mavisi (#009ef7) yerine gecer.

      Siyah zeminde ham hardal cok parlak kaliyor; ikonlarda yumusatilmis
      tonlari kullaniliyor. METIN hardal DEGIL beyaz: menu adi okunabilirligi
      once gelen sey, vurguyu ikon ve zemin tasiyor.

      Zemin saydam: siyahin uzerinde ince bir sicaklik birakiyor, blok renk
      gibi durmuyor.
    */
    --dz-accent: #ffc02e;
    --dz-accent-active: #f0c462;
    --dz-accent-hover: #dcba74;
    --dz-accent-bg-active: rgba(255, 192, 46, 0.10);

    /* Hover ile aktif AYNI zemini paylasiyor; ayrimi ikon rengi tasiyor. */
    --dz-accent-bg-hover: var(--dz-accent-bg-active);

    /* Menunun normal (secili olmayan) tonlari. */
    --dz-menu-icon: #8b8b8b;
    --dz-menu-text: #a9a9a9;
    --dz-menu-section: #7a7a7a;
}

/* ------------------------------------------------------------------ */
/* Sol menu                                                             */
/* ------------------------------------------------------------------ */

.aside.aside-dark,
.aside.aside-dark .aside-logo {
    background-color: var(--dz-aside-bg);
}

/*
  Menunun normal tonlari.

  Sablonun degerleri (#494b74 ikon, #9899ac metin, #4c4e6f baslik) lacivert
  #1e1e2d zemine gore secilmis; siyah zeminde kontrastini kaybediyor.
*/
.aside.aside-dark .menu .menu-item .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--dz-menu-icon);
}

.aside.aside-dark .menu .menu-item .menu-link,
.aside.aside-dark .menu .menu-item .menu-link .menu-title {
    color: var(--dz-menu-text);
}

.aside.aside-dark .menu .menu-item .menu-section {
    color: var(--dz-menu-section) !important;
}

/*
  UZERINE GELINEN oge.

  Iki ayri secici gerekiyor ve ikisi de sart:
    :hover -> saf CSS, fareyle uzerine gelindiginde
    .hover -> Metronic'in JS ile ekledigi sinif (dokunmatik, klavye)
  Sablonun mavisi menu-state-title-primary / menu-state-icon-primary
  siniflarindan geliyor ve yalnizca birini ezmek maviyi acikta birakiyor.
*/
.aside.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active),
.aside.aside-dark .menu .menu-item.hover > .menu-link:not(.disabled):not(.active) {
    background-color: var(--dz-accent-bg-hover);
    color: #ffffff;
}

.aside.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
.aside.aside-dark .menu .menu-item.hover > .menu-link:not(.disabled):not(.active) .menu-title {
    color: #ffffff;
}

.aside.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .menu .menu-item.hover > .menu-link:not(.disabled):not(.active) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--dz-accent-hover);
}

/* SECILI oge. Acik akordiyon (here / show) de ayni vurguyu paylasiyor. */
.aside.aside-dark .menu .menu-item .menu-link.active,
.aside.aside-dark .menu .menu-item.here > .menu-link,
.aside.aside-dark .menu .menu-item.show > .menu-link {
    background-color: var(--dz-accent-bg-active);
    color: #ffffff;
}

.aside.aside-dark .menu .menu-item .menu-link.active .menu-title,
.aside.aside-dark .menu .menu-item.here > .menu-link .menu-title,
.aside.aside-dark .menu .menu-item.show > .menu-link .menu-title {
    color: #ffffff;
}

.aside.aside-dark .menu .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .menu .menu-item.here > .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .menu .menu-item.show > .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--dz-accent-active);
}

/* Kaydirma cubugu siyah zeminde daha az goze batsin. */
.aside.aside-dark .hover-scroll-overlay-y::-webkit-scrollbar-thumb {
    background-color: #2e2e2e;
}

.aside.aside-dark .hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb {
    background-color: #3d3d3d;
}

/* Menuyu daraltma dugmesi. */
.aside.aside-dark .aside-toggle svg [fill]:not(.permanent):not(g) {
    fill: #6b6b6b;
}

/*
  Daraltma dugmesi de mavi yakiyordu; btn-active-color-primary sinifindan
  geliyor. Iki durum var ve ikisi de kapatilmali:
    :hover / :focus / :active -> uzerine gelindiginde
    .active / .show           -> menu DARALTILMIS halde kaldigi surece
  Ikincisi kalici oldugu icin gozden kaciyor.
*/
.aside.aside-dark .aside-toggle:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .aside-toggle:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .aside-toggle:active:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .aside-toggle.active .svg-icon svg [fill]:not(.permanent):not(g),
.aside.aside-dark .aside-toggle.show .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--dz-accent-active);
}

/* ------------------------------------------------------------------ */
/* Ust bar                                                              */
/* ------------------------------------------------------------------ */

.header-fixed .header,
.header-tablet-and-mobile-fixed .header {
    background-color: var(--dz-header-bg);

    /* Golge acik zemin icin tasarlanmis; koyu barda kirli gorunuyor. */
    box-shadow: none;
    border-bottom: 1px solid var(--dz-header-border);
}

/*
  Ikonlarin fill degeri SVG icinde sabit (#000000) yaziyor; koyu barda
  gorunmez oluyorlar. Sablonun kendi kurali da ayni yoldan eziyor.
*/
.header .btn .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--dz-header-icon);
}

.header .btn:hover .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #ffffff;
}

.header .btn.btn-active-light-primary:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/*
  Yalnizca bardaki kullanici rozeti. Dogrudan cocuk secici sart: acilan
  menunun icinde de bir symbol-label var ve o BEYAZ zeminde duruyor.
*/
#kt_header_user_menu_toggle > .symbol > .symbol-label {
    background-color: #2e2e2e;
    color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Kucuk duzeltmeler                                                    */
/* ------------------------------------------------------------------ */

/* Menu icindeki cikis dugmesi bir form gonderiyor; baglanti gibi gorunmeli. */
.menu .menu-item .menu-link.btn-link {
    border: 0;
    text-decoration: none;
}