/* ==================== 3D MAGNETIC TILT ANIMATION ==================== */
/* Farenin konumuna göre kartların 3D eğilmesi */

.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Tilt aktif değilken yumuşak dönüş */
.tilt-card:not(:hover) {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Işık efekti overlay */
.tilt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.tilt-card:hover::before {
  opacity: 1;
}

/* Gölge efekti - eğime göre dinamik */
.tilt-card::after {
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  background: rgba(0, 0, 0, 0.1);
  filter: blur(20px);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  transform: translateZ(-20px);
}

.tilt-card:hover::after {
  opacity: 0.3;
}

/* İçerik katmanı - hafif 3D derinlik */
.tilt-card > * {
  position: relative;
  z-index: 2;
}

/* Güçlü tilt efekti (feature kartlar için) */
.tilt-strong {
  --tilt-max: 15deg;
  --tilt-scale: 1.05;
}

/* Orta tilt efekti (varsayılan) */
.tilt-medium {
  --tilt-max: 10deg;
  --tilt-scale: 1.03;
}

/* Hafif tilt efekti (küçük butonlar için) */
.tilt-light {
  --tilt-max: 5deg;
  --tilt-scale: 1.02;
}

/* Hover'da scale büyütme */
.tilt-card:hover {
  transform: scale(var(--tilt-scale, 1.03));
}

/* Mobile için disable (touch event'lerde karışıklık olmasın) */
@media (hover: none) and (pointer: coarse) {
  .tilt-card {
    transform-style: flat !important;
  }

  .tilt-card::before,
  .tilt-card::after {
    display: none !important;
  }
}

/* Accessibility: Reduced motion kullanıcıları için */
@media (prefers-reduced-motion: reduce) {
  .tilt-card {
    transform: none !important;
    transition: none !important;
  }

  .tilt-card::before,
  .tilt-card::after {
    display: none !important;
  }
}

/* Glare efekti (isteğe bağlı parlak yansıma) */
.tilt-card.tilt-glare {
  overflow: hidden;
}

.tilt-card.tilt-glare .tilt-glare-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 3;
}

.tilt-card.tilt-glare:hover .tilt-glare-effect {
  transform: translateX(100%) rotate(45deg);
}

/* Performance optimizasyonu */
.tilt-card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}