.konum-section {
    background-color: white;
    padding: 20px;
    text-align: center;
}

.konum-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: black; /* Başlık rengi siyah */
}

.konum-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Mobil uyum için alt alta gelmesini sağlar */
}

.map-container {
    flex: 1 1 40%; /* Geniş ekranlarda %40 genişlik */
    margin: 10px;
}

.distance-info {
    flex: 1 1 50%; /* Geniş ekranlarda %50 genişlik */
    margin: 10px;
    text-align: left; /* Metin sola hizalı */
}

.distance-info h3 {
    margin-bottom: 10px;
    color: black; /* Alt başlık rengi siyah */
}

.distance-grid {
    display: grid; /* 6'şar 6'lı dizilim için grid yapısı */
    grid-template-columns: repeat(2, 1fr); /* 2 sütunlu yapı */
    gap: 10px; /* Öğeler arasında boşluk */
}

.distance-item {
    background-color: white; /* İç kısım beyaz */
    border: 2px solid #E0E0E0; /* Dış kenar açık gri */
    display: flex;
    align-items: center;
    justify-content: center; /* Metni ortalamak için */
    padding: 15px; /* İç alan */
    border-radius: 8px; /* Kenarları yuvarlatmak için */
    height: 50px; /* Sütun yüksekliği */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
    color: #333; /* Yazı rengi koyu gri (#333) */
    font-size: 18px; /* Yazı boyutu 18px */
    font-weight: normal; /* Yazı kalınlığını normal yap */
}

.travel-times {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Seyahat bilgileri ile diğer alanlar arasında boşluk */
}

.travel-item {
    display: flex;
    align-items: center; /* İkon ve metin hizalaması */
    color: #333; /* Yazı rengi koyu gri */
    font-size: 18px; /* Yazı boyutu */
}

.travel-item i {
    margin-right: 8px; /* İkon ile metin arasında boşluk */
}

/* Mobil görünüm için ayarlamalar */
@media (max-width: 768px) {
    .konum-content {
        flex-direction: column; /* Mobilde dikey hizalama */
    }

    .map-container {
        flex: 1 1 100%; /* Harita tam genişlikte */
        margin: 0 0 20px; /* Harita ile bilgi arasında boşluk bırakır */
    }

    .distance-info {
        flex: 1 1 100%; /* Bilgi alanı tam genişlikte */
    }

    .distance-grid {
        grid-template-columns: repeat(1, 1fr); /* Mobilde 1 sütunlu yapı */
    }
}