/* KON TEL — tel örgü; çıkışta çizgiler merkezden kenarlara çekilir
   Eski kare parçalanma: kontel-preloader.legacy.css + kontel-preloader.legacy.js */

#preloader.preloader {
  --pm-wire: clamp(3px, 0.42vmin, 5px);
  --pm-pitch: clamp(34px, 5.2vmin, 62px);
  --pm-wire-dark: #252525;
  --pm-wire-light: #666;
  --pm-hole: #f5f5f5;
  background: #ffffff;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
  position: fixed;
  inset: 0;
}

.preloader-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
  isolation: isolate;
}

.preloader-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: clamp(64px, 13vmin, 110px);
  max-width: min(72vw, 320px);
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 28px rgba(255, 255, 255, 1))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 72px rgba(255, 255, 255, 0.7));
}

.preloader-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 220%;
  height: 240%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    #ffffff 0%,
    #ffffff 28%,
    rgba(255, 255, 255, 0.92) 48%,
    rgba(255, 255, 255, 0.45) 68%,
    rgba(255, 255, 255, 0) 88%
  );
  pointer-events: none;
}

.preloader-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -2;
  width: 280%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0) 80%
  );
  pointer-events: none;
}

.preloader .loader,
.preloader .loader-2 {
  display: none !important;
}

.preloader-mesh {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: var(--pm-hole);
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--pm-wire-dark) 0,
      var(--pm-wire-dark) var(--pm-wire),
      var(--pm-wire-light) var(--pm-wire),
      var(--pm-wire-light) calc(var(--pm-wire) + 0.6px),
      transparent calc(var(--pm-wire) + 0.6px),
      transparent var(--pm-pitch)
    ),
    repeating-linear-gradient(
      -45deg,
      var(--pm-wire-dark) 0,
      var(--pm-wire-dark) var(--pm-wire),
      var(--pm-wire-light) var(--pm-wire),
      var(--pm-wire-light) calc(var(--pm-wire) + 0.6px),
      transparent calc(var(--pm-wire) + 0.6px),
      transparent var(--pm-pitch)
    );
  transform-origin: center center;
  will-change: transform, opacity, filter;
  animation: preloader-tel-shimmer 1.35s ease-in-out infinite;
}

@keyframes preloader-tel-shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.06);
  }
}

.preloader.loaded .preloader-mesh {
  animation: preloader-pull-to-edges 0.95s cubic-bezier(0.35, 0, 0.15, 1) forwards;
}

.preloader.loaded .preloader-logo {
  animation: preloader-logo-recede 0.95s cubic-bezier(0.35, 0, 0.15, 1) forwards;
}

@keyframes preloader-pull-to-edges {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  35% {
    opacity: 1;
    filter: brightness(1.05);
  }
  100% {
    /* Ölçek büyür → teller görsel olarak kenarlara doğru gerilir */
    transform: scale(3.2);
    opacity: 0;
    filter: brightness(1.12);
  }
}

@keyframes preloader-logo-recede {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0;
  }
}

.preloader.loaded {
  pointer-events: none;
  background: #ffffff;
  transition: background 0.4s ease 0.5s;
}