<style>
  /* Kar tanesi temel stili */
  .snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999;
    color: #FFF; /* Kar rengi */
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000; /* Beyaz zeminde görünmesi için hafif gölge */
    user-select: none; /* Seçilemez yapar */
    pointer-events: none; /* Tıklamaları engellemez (ÖNEMLİ) */
    animation-name: fall-sway;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  /* Düşme ve sallanma animasyonu */
  @keyframes fall-sway {
    0% {
      transform: translateY(0) translateX(0);
    }
    25% {
      transform: translateY(25vh) translateX(15px);
    }
    50% {
      transform: translateY(50vh) translateX(-15px);
    }
    75% {
      transform: translateY(75vh) translateX(15px);
    }
    100% {
      transform: translateY(110vh) translateX(0);
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Ayarlar
    const snowSymbol = "❄"; // Kar tanesi sembolü (• veya * da kullanabilirsiniz)
    const snowCount = 50; // Aynı anda ekranda olacak maksimum kar tanesi (Performans için artırmayın)
    const creationInterval = 200; // Yeni kar tanesi oluşturma sıklığı (ms cinsinden)

    function createSnowflake() {
      const flake = document.createElement("div");
      flake.innerHTML = snowSymbol;
      flake.classList.add("snowflake");

      const startLeft = Math.random() * 100; // Başlangıç yatay konumu (% olarak)
      const duration = Math.random() * 5 + 5; // Düşme süresi (5 ile 10 saniye arası)
      const size = Math.random() * 10 + 10; // Boyut (10px ile 20px arası)
      const opacity = Math.random() * 0.5 + 0.3; // Şeffaflık

      flake.style.left = startLeft + "vw";
      flake.style.animationDuration = duration + "s";
      flake.style.fontSize = size + "px";
      flake.style.opacity = opacity;

      document.body.appendChild(flake);
      setTimeout(() => {
        flake.remove();
      }, duration * 1000);
    }
    setInterval(createSnowflake, creationInterval);
  });
</script>