.bodrum-map-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: var(--space-l) 0;
    margin-bottom: var(--space-2xl);

    img {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: block;
    }

    .map-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
        justify-items: center;
        justify-content: center;
        align-content: center;
        align-items: center;
        max-width: 1400px;
        width: 100%;
    }

    .map {
        position: relative;
        width: 100%;
        max-width: var(--container);
    }

    .marker {
        position: absolute;
        left: 27%;
        bottom: 45%;
        transform: translate(-50%, 50%);
        z-index: 2;

        span {
            display: flex;
            width: 12px;
            height: 12px;
            background-color: var(--color-primary-light);
            border-radius: 50%;
            position: relative;
            box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.9);

            &:after {
                content: " ";
                position: absolute;
                left: -6px;
                top: -6px;
                width: 24px;
                height: 24px;
                border: 2px solid var(--color-primary-light);
                background: none;
                border-radius: 100%;
                animation: markerPulse 2s ease-out infinite;
            }
        }
    }

    .map-connector-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: visible;

        .line-bg {
            fill: none;
            stroke: var(--color-primary-light);
            stroke-width: 2px;
            stroke-linecap: square;
            stroke-linejoin: miter;
            opacity: 0.75;
        }

        .line-trail {
            fill: none;
            stroke: #ffffff;
            stroke-width: 2.5px;
            stroke-linecap: round;
            stroke-linejoin: miter;
            filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px rgba(var(--color-primary-light-rgb), 0.95)) drop-shadow(0 0 16px rgba(var(--color-primary-rgb), 0.8));
            opacity: 0;
        }

        .electric-spark {
            pointer-events: none;

            .spark-halo {
                animation: sparkPulse 0.5s infinite alternate ease-in-out;
            }

            .spark-core {
                filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px rgba(var(--color-primary-light-rgb), 1));
            }
        }
    }
}

@keyframes markerPulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

@keyframes sparkPulse {
    from {
        transform: scale(0.8);
        opacity: 0.4;
    }

    to {
        transform: scale(1.5);
        opacity: 0.9;
    }
}