body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('back.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: brightness(0.9) contrast(1.2);
    z-index: -1;
    will-change: transform;
}

.star {
      transition: background-color 1s ease-in-out; /* Renk geçişini yumuşatma */
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 
        68% 57%, 79% 91%, 50% 70%, 
        21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
    opacity: 0.7;
    z-index: 1;
    animation: twinkle 3s infinite ease-in-out; /* Sürekli soluma efekti */
}

.star.small { width: 3px; height: 3px; }
.star.medium { width: 5px; height: 5px; }
.star.large { width: 6px; height: 6px; }

@keyframes moveStar {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    50% { transform: translate(80px, 0) scale(1); opacity: 0.9; } /* Yatay düz ilerleme */
    100% { 
        transform: translate(400px, 20px) scale(0.6); 
        opacity: 0; 
    } /* Eğimli düşüş ve kaybolma */
}
@keyframes twinkle {
    0%, 100% { opacity: 0.6; } /* Başlangıç ve bitişte %60 opaklık */
    50% { opacity: 1; } /* Ortada %100 parlaklık */
}
.comet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, white, rgba(255, 255, 255, 0.5));
    border-radius: 50%;
    filter: blur(2px);
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
    animation: comet-trail 4s linear;
}

@keyframes comet-trail {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

html, body {
    min-height: 100vh;
    min-width: 100vw;
}