/* Sayfayı Ortala */
body {
    display: flex;
    justify-content: center; /* Yatayda ortala */
    align-items: center;    /* Dikeyde ortala */
    min-height: 100vh;      /* Tam ekran yüksekliğini kullan */
    margin: 0;
    background-color: #f0f0f0; /* Hafif gri arka plan */
    overflow: hidden; /* Topun dışarı taşmasını engeller */
}

/* Topun Stili */
.top {
    width: 50px;
    height: 50px;
    background-color: #e74c3c; /* Kırmızı top */
    border-radius: 50%; /* Tam daire şekli */
    
    /* Animasyonu Uygula */
    /* 'bounce' keyframe setini kullan, 1.2 saniyede bir tur at, sonsuz tekrar et */
    /* 'ease-in-out' ile yavaş başla, hızlan, yavaşla (daha doğal sekme) */
    animation: bounce 0.2s infinite ease-in-out; 
}

/* Animasyon Keyframes: Sekme Hareketi */
@keyframes bounce {
    0% {
        transform: translateY(0); /* Başlangıçta normal konumda */
    }
    50% {
        transform: translateY(-50px); /* Yarı yolda 50 piksel yukarı zıpla */
    }
    100% {
        transform: translateY(0); /* Sona ulaştığında tekrar normal konuma dön */
    }
}