body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f4f9; text-align: center; }

.map-wrapper { max-width: 100%; margin: 50px auto; padding: 20px; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* SVG İçindeki İlçeler */
/* Harita Konteynırı */
#svg-container svg {
    width: 100%;
    height: auto;
    display: block;
    /* Kenarlardaki taşmaları önlemek için */
    overflow: visible; 
}

/* İlçelerin (Sınırların) Ayarı */
path {
    fill: #f0f0f0; /* İlçelerin varsayılan rengi */
    stroke: #666666; /* Sınır çizgisi rengi (Daha belirgin olması için koyu gri) */
    
    /* KRİTİK AYAR: Harita ne kadar küçülürse küçülsün çizgi kalınlığını sabit tutar */
    vector-effect: non-scaling-stroke; 
    
    /* Çizgi kalınlığı (Çok ince ve net bir görünüm için 0.5 idealdır) */
    stroke-width: 0.5px; 
    
    /* Köşelerin daha yumuşak ve temiz birleşmesi için */
    stroke-linejoin: round;
    stroke-linecap: round;
    
    transition: fill 0.2s ease, stroke 0.2s ease;
    cursor: pointer;
}

/* Üzerine gelince (Hover) Ayarları */
path:hover {
    fill: #3498db !important; /* Vurgu rengi */
    stroke: #000000; /* Üzerine gelince sınır çizgisi siyah olsun */
    stroke-width: 1.5px; /* Sadece seçili olanın sınırı biraz kalınlaşsın */
    z-index: 10; /* Üste çıksın (Bazı SVG yapılarında işe yarar) */
}

/* Harita genelinde karışıklığı önlemek için arka plan rengi */
#svg-container {
    background-color: #ffffff;
    padding: 50px 20px 20px 20px;
    border-radius: 10px;
}

/* Popup (Modal) Tasarımı */
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.modal-content { background-color: #fff; margin: 10% auto; padding: 30px; border-radius: 12px; width: 40%; box-shadow: 0 5px 20px rgba(0,0,0,0.5); position: relative; animation: slideDown 0.4s; }

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-btn { position: absolute; right: 20px; top: 15px; font-size: 28px; font-weight: bold; cursor: pointer; color: #888; }
.close-btn:hover { color: #000; }
#title-ilce { margin-top: 0; color: #2c3e50; }