/* Preloader */
:root,
[data-bs-theme="light"] {
  --preloadertextcolor: oklch(0.5 0.02 61.01);
  --preloaderbg: #d9d8d6;
}
[data-bs-theme="dark"] {
    --preloadertextcolor: #d9d8d6;
    --preloaderbg: oklch(25.914% 0.00947 67.323);
}
.handle-preloader{
        background-color: var(--preloaderbg);
    }

.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}

.preloader-close{
  position: fixed;
  z-index: 99999999;
  font-size: 18px;
  background: var(--preloadertextcolor);
  width: 30px;
  height: 30px;
  color:var(--preloaderbg);
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  right: 15px;
  top: 15px;
  border-radius: 4px;
}
/* Sayfada ortalamak için kapsayıcı stil (İsteğe bağlı) */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SVG Genel Ayarları */
.preloader-icon {
  width: 150px; /* İkon boyutu */
  height: 150px;
}

/* Tüm path'ler için ortak ayarlar */
.preloader-icon path {
  fill: transparent; /* Başlangıçta içi boş */
  stroke: var(--preloadertextcolor); /* Çizgi rengi (Siyah/Gri) */
  stroke-width: 2; /* Çizgi kalınlığı */
  stroke-dasharray: 1000; /* Çizgi uzunluğu (Animasyon için gerekli) */
  stroke-dashoffset: 1000; /* Çizgiyi gizle */
  animation: drawAndFill 3s ease-in-out infinite;
}

/* Parçaların sırayla gelmesi için gecikme (Stagger Effect) */
.path-frame {
  animation-delay: 0s;
}

.path-triangle {
  animation-delay: 0.5s; /* Üçgen yarım saniye sonra başlasın */
}

.path-zigzag {
  animation-delay: 1s; /* Alt parça 1 saniye sonra başlasın */
}

/* Animasyon Tanımı */
@keyframes drawAndFill {
  0% {
    stroke-dashoffset: 1000; /* Çizgi yok */
    fill: transparent;       /* İçi boş */
  }
  40% {
    stroke-dashoffset: 0;    /* Çizgi tamamlandı */
    fill: transparent;       /* Hala içi boş */
  }
  60% {
    stroke-dashoffset: 0;
    fill: var(--preloadertextcolor);              /* İçi doluyor (Rengi buradan değiştirin) */
  }
  80% {
    stroke-dashoffset: 0;
    fill: var(--preloadertextcolor);
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    fill: var(--preloadertextcolor);
    opacity: 0;              /* Kaybolarak döngüyü bitir */
  }
}