3D Tilt & Glare Glass Card

<div class="tilt-card" id="tiltCard">
  <div class="icon">💎</div>
  <h3>3D Eğim Efekti</h3>
  <p>Fareyi kart üzerinde hareket ettirerek 3D derinliği deneyimleyin.</p>
  <span class="badge">HOVER AKTİF</span>
</div>

.tilt-card {
  width: 320px;
  padding: 36px 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transform-style: preserve-3d;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.25s, border-color 0.25s;
}

.tilt-card:hover {
  box-shadow: 0 35px 80px rgba(0, 240, 255, 0.3), 0 0 30px rgba(147, 51, 234, 0.35);
  border-color: rgba(0, 240, 255, 0.5);
}

const card = document.getElementById('tiltCard');
let maxTilt = 18;
let scaleVal = 1.05;

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  
  const rotateX = -(y / (rect.height / 2)) * maxTilt;
  const rotateY = (x / (rect.width / 2)) * maxTilt;
  
  card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scaleVal})`;
});

card.addEventListener('mouseleave', () => {
  card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)';
});