/* Preloader stilini sitenin ana CSS'ine ekleyin veya ayrı bir dosya yapın */

/* Overlay */
#preloader{
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(8,12,30,0.95) 0%, rgba(5,7,20,0.98) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  pointer-events: auto;
  transition: opacity 400ms ease, visibility 400ms;
  opacity: 1;
  visibility: visible;
}

/* İçerik container */
#preloader .preloader-inner{
  text-align: center;
  transform: translateY(0);
  will-change: opacity, transform;
}

/* Logo boyutu ve hizalama */
.preloader-logo{
  display: block;
  margin: 0 auto 14px;
}

/* Halkayı döndürme ve işaretin hafif yukarı inmesi */
.logo-ring{
  stroke-dasharray: 180;
  stroke-dashoffset: 60;
  transform-origin: 50% 50%;
  animation: ring-rotate 1.6s cubic-bezier(.2,.9,.2,1) infinite;
}
.logo-mark{
  transform-origin: center;
  animation: mark-bounce 1.6s ease-in-out infinite;
}

/* Metin */
.preloader-text{
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Fade-out gizleme sınıfı (JS ile eklenir) */
#preloader.preloader-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Animasyonlar */
@keyframes ring-rotate{
  0% { transform: rotate(0deg); stroke-dashoffset: 60; }
  50% { transform: rotate(180deg); stroke-dashoffset: 0; }
  100% { transform: rotate(360deg); stroke-dashoffset: 60; }
}
@keyframes mark-bounce{
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-6px) scale(1.02); opacity: 0.95; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Erişilebilirlik: Kullanıcı tercihi reduced-motion ise animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .logo-ring, .logo-mark {
    animation: none;
    transition: none;
  }
}