Mükemmellik
Detaylardadır.

<!-- HTML -->
<h1 class="hero-title">
  <span class="char">M</span><span class="char">ü</span><span class="char">k</span><span class="char">e</span><span class="char">m</span><span class="char">m</span><span class="char">e</span><span class="char">l</span><span class="char">l</span><span class="char">i</span><span class="char">k</span>
</h1>

<!-- CSS -->
<style>
.char { 
  display: inline-block; 
  opacity: 0; 
  transform: translateY(50px) rotateX(-90deg);
}
</style>

<!-- JS (GSAP + ScrollTrigger) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".char", {
  opacity: 1,
  y: 0,
  rotateX: 0,
  duration: 0.8,
  stagger: 0.05,  // Her harf 50ms gecikmeli
  ease: "back.out(1.7)",
  scrollTrigger: {
    trigger: ".hero-title",
    start: "top 80%",
    toggleActions: "play none none reverse"
  }
});
</script>

<!-- HTML -->
<canvas id="particles" class="fixed inset-0 -z-10"></canvas>

<!-- JS (Three.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
const canvas = document.getElementById('particles');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// Parçacık geometrisi
const particlesGeometry = new THREE.BufferGeometry();
const count = 2000;
const positions = new Float32Array(count * 3);

for (let i = 0; i < count * 3; i++) {
  positions[i] = (Math.random() - 0.5) * 10;
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// Malzeme
const particlesMaterial = new THREE.PointsMaterial({
  size: 0.02,
  color: 0x7c3aed,
  transparent: true,
  opacity: 0.8
});

const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);
camera.position.z = 3;

// Mouse takibi
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', (e) => {
  mouseX = (e.clientX / window.innerWidth) * 2 - 1;
  mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
});

// Animasyon döngüsü
function animate() {
  requestAnimationFrame(animate);
  particles.rotation.y += 0.001;
  particles.rotation.x += 0.0005;
  
  // Mouse takibi (smooth)
  particles.rotation.y += mouseX * 0.0005;
  particles.rotation.x += mouseY * 0.0005;
  
  renderer.render(scene, camera);
}
animate();

// Resize
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>

<!-- HTML -->
<button id="magic-btn" class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold rounded-2xl">
  Satın Al
</button>

<!-- JS (Anime.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
const btn = document.getElementById('magic-btn');

btn.addEventListener('mouseenter', () => {
  anime({
    targets: btn,
    scale: [1, 1.1, 0.95, 1.05, 1],
    duration: 600,
    easing: 'easeOutElastic(1, .5)'
  });
});

btn.addEventListener('mouseleave', () => {
  anime({
    targets: btn,
    scale: 1,
    duration: 300,
    easing: 'easeOutQuad'
  });
});

// Tıklama efekti
btn.addEventListener('click', () => {
  anime({
    targets: btn,
    scale: [1, 0.9, 1],
    duration: 200,
    easing: 'easeInOutQuad'
  });
});
</script>