/* assets/css/map.css */

/* .earthquake-marker-container stilini kaldırıyoruz çünkü Leaflet kendi konteynerini yönetiyor. */

.earthquake-marker {
    /* Bu, ::before pseudo-elementinin buna göre konumlandırılması için kritik öneme sahiptir. */
    position: relative; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.earthquake-marker::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    
    /* Genişlik ve yükseklik, ana elementle aynı boyutta başlar */
    width: 100%;
    height: 100%;
    
    background-color: inherit; /* Ana rengi miras alır */
    border-radius: 50%;
    
    /* Animasyonun ana dairenin arkasında kalmasını sağlar */
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.latest-earthquake-marker::before {
    animation: pulse 2s infinite;
}