body.load {
    overflow: hidden;
}

/* Proje geneli loading katmanı. Zemin rengi emlak-theme token'ından (--sd-bg) türetilir;
   token yoksa fallback kullanılır. Göstergenin kendisi aşağıdaki ::before kuralındadır.
   loading.css'i yükleyen tüm sayfalarda (panel + login + websites) geçerli. */
body.load .loading-overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    background: color-mix(in srgb, var(--sd-bg, #f5f7fb) 60%, transparent);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

/* Loading göstergesi = şeffaf animasyonlu WebP spinner (240x240 kaynak, 120px gösterilir).
   Tema data-theme attribute'u ile değişir (emlak-theme-switcher.js html üzerine yazar);
   prefers-color-scheme KULLANILMAZ çünkü tema manuel toggle ile seçiliyor. */
body.load .loading-overlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    background: url(../img/loading/loading-spinner.webp) center/contain no-repeat;
}

[data-theme="dark"] body.load .loading-overlay::before {
    background-image: url(../img/loading/loading-spinner-dark.webp);
}

@keyframes eyGlobalSpin { to { transform: rotate(360deg); } }

/* DEVEXTREME LOAD PANEL — markalı spinner.
   Markalı katman (yukarıdaki .loading-overlay) jQuery'nin GLOBAL ajaxStart/ajaxStop
   kancasına bağlı (base.html:481-507 → body.load). DevExtreme kendi XHR'ını kullandığı
   için bu kanca hiç tetiklenmiyor; onun yerine DevExtreme kendi dxLoadPanel'ini açıyor
   ve plugins.js:446'daki DevExpress.localization.locale("tr-TR") yüzünden düz
   "Yükleniyor..." METNİ çıkıyor. Bu yüzden bazı sayfalarda spinner, bazılarında yazı
   görünüyordu. Panelin içeriğini aynı spinner ile değiştirip görsel dili birleştiriyoruz.

   Sınıflar dx.common.css:1402-1428'den doğrulandı (.dx-loadpanel-content,
   .dx-loadpanel-content-wrapper, .dx-loadpanel-message).
   Kapsam .dx-loadpanel-content ile sınırlı: .dx-loadindicator tek başına buton içi
   göstergelerde de kullanılıyor, onlara dokunulmuyor.
   Ölçü 64px: dxLoadPanel varsayılan kutusu 222x90 ve bu ölçü ELEMENT ÜZERİNDE satır içi
   stil olarak duruyor, yani CSS'ten büyütülemez; 10px padding sonrası 64px rahat sığar. */
.dx-loadpanel-content .dx-loadindicator,
.dx-loadpanel-content .dx-loadpanel-message {
    display: none !important;
}

.dx-loadpanel-content .dx-loadpanel-content-wrapper::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    background: url(../img/loading/loading-spinner.webp) center/contain no-repeat;
}

[data-theme="dark"] .dx-loadpanel-content .dx-loadpanel-content-wrapper::before {
    background-image: url(../img/loading/loading-spinner-dark.webp);
}

/* ÇİFT GÖSTERGE ÖNLEME.
   Bazı grid'ler veriyi jQuery ile çekiyor (ör. firm_list.html:90 `$.getJSON`). O zaman
   base.html'deki global ajaxStart kancası `body.load` ekliyor ve markalı katman açılıyor;
   DevExtreme de kendi loadPanel'ini açıyor → ekranda AYNI ANDA İKİ spinner.
   Global katman açıkken DX panelini gizle. DX kendi XHR'ıyla veri çekiyorsa `body.load`
   zaten eklenmez, dolayısıyla o durumda DX paneli normal şekilde görünmeye devam eder.
   Sınıf adı dx.all.js'ten doğrulandı. */
body.load .dx-loadpanel-wrapper {
    display: none !important;
}

/* dx.common.css:1405 panel zeminini sabit #fefefe basıyor → koyu temada beyaz kutu */
[data-theme="dark"] .dx-loadpanel-content {
    background: var(--sd-surface) !important;
    border-color: var(--sd-border) !important;
}

/* Loading göstergesi = Emlak Yönetim logosu, opacity artıp-azalan (pulse). Metin yok. */
body.load .loading-overlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    background: url(../img/loading/loading-spinner.webp) center/contain no-repeat;
}

[data-theme="dark"] body.load .loading-overlay::before {
    background-image: url(../img/loading/loading-spinner-dark.webp);
}

@keyframes eyGlobalSpin { to { transform: rotate(360deg); } }

.popover-overlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0);
}

.popover-overlay.on {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}


.loading-dot {
  color: white;
  font-size: 20px;
  text-align: center;
  padding-right: 10px;
  line-height:6px;
}

.loading-dot:after {
  content: '. ';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}
}


.loading-dot-black {
  color: blue;
  font-size: 20px;
  text-align: center;
  padding-right: 3px;
  line-height:6px;
}

.loading-dot-black:after {
  content: '. ';
  animation: dots-black 1s steps(5, end) infinite;}

/* dark modda .loading-dot-black noktaları siyah olduğu için kayboluyordu → açık-ton override */
[data-theme="dark"] .loading-dot-black{ color: var(--sd-text3); }
[data-theme="dark"] .loading-dot-black:after{ animation: dots-black-dark 1s steps(5, end) infinite; }
@keyframes dots-black-dark {
  0%, 20% { color: var(--sd-muted); text-shadow: .25em 0 0 var(--sd-muted), .5em 0 0 var(--sd-muted); }
  40% { color: var(--sd-text3); text-shadow: .25em 0 0 var(--sd-text3), .5em 0 0 var(--sd-muted); }
  60% { text-shadow: .25em 0 0 var(--sd-text3), .5em 0 0 var(--sd-text3); }
  80%, 100% { text-shadow: .25em 0 0 var(--sd-text3), .5em 0 0 var(--sd-text3); }
}

@keyframes dots-black {
  0%, 20% {
    color: #dcdcdc;
    text-shadow:
      .25em 0 0 #dcdcdc,
      .5em 0 0 #dcdcdc;}

  40% {
    color: #000;
    text-shadow:
      .25em 0 0 #565656,
      .5em 0 0 #dcdcdc;}
  60% {
    text-shadow:
      .25em 0 0 #000,
      .5em 0 0 #000;}
  80%, 100% {
    color: #000;
    text-shadow:
      .25em 0 0 #000,
      .5em 0 0 #000;}

}

.loader {
    border: 0.40em solid var(--sd-surface6, #eef1f4);
    border-top: 0.40em solid var(--sd-accent, #2563eb);
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    animation: spin 0.9s linear infinite;
    margin: 24px auto;
    webkit-animation: spin 0.9s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}