/* Temel Kapsayıcı ve SVG Ayarları */
.gezenle-wrapper { font-family: 'Open Sans', sans-serif; max-width: 1140px; margin: 0 auto; }
.svg-turkiye-haritasi { position: relative; width: 100%; text-align: center; }
.svg-turkiye-haritasi svg { width: 100%; height: auto; display: block; } 

/* Fareyle Üzerine Gelince Çıkan Kutu (Tooltip) */
.il-isimleri { position: absolute; z-index: 99; display: none; pointer-events: none; }
.il-isimleri div { background: #222; color: #fff; padding: 6px 14px; border-radius: 4px; font-size: 14px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }

/* Harita İlleri - Tıklama ve Üzerine Gelme Efektleri */
#svg-turkiye-haritasi path { cursor: pointer; transition: filter 0.3s ease; }
#svg-turkiye-haritasi path:hover { filter: brightness(0.85); }

/* SEÇİLEN İLİN KOYULAŞMASI (Kesin Çalışması için Webkit eklendi) */
#svg-turkiye-haritasi g.gezilen-il path { 
    -webkit-filter: brightness(0.4) !important;
    filter: brightness(0.4) !important; 
    stroke: #ffffff;
    stroke-width: 1px;
}

/* Harita Üzerine Kalıcı Yazılan İl İsmi */
.il-harita-isim {
    fill: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    pointer-events: none; /* Tıklamayı engellememesi için kilit nokta */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

/* Ziyaretçinin Orijinal Bölge Renkleri */
#bolge-1 g path { fill: #87cdde; }
#bolge-2 g path { fill: #ac93a7; }
#bolge-3 g path { fill: #ffb380; }
#bolge-4 g path { fill: #cccccc; }
#bolge-5 g path { fill: #decd87; }
#bolge-6 g path { fill: #de8787; }
#bolge-7 g path { fill: #aade87; }

/* Üst Kontrol Paneli: Sayaç ve İlerleme Çubuğu */
.gezenle-kontroller { background: #f8f9fa; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; }
.gezenle-istatistik { display: flex; align-items: center; gap: 15px; width: 100%; }
.gezenle-sayac { font-size: 18px; color: #333; font-weight: 600; white-space: nowrap; }
.gezenle-progress-bar { flex-grow: 1; height: 16px; background-color: #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.gezenle-progress-fill { height: 100%; background-color: #4CAF50; width: 0%; transition: width 0.5s ease-out; }

/* İndirilecek (Export) Alan */
#gezenle-export-alani { background: #fff; padding: 25px; border-radius: 8px; border: 1px solid #eee; position: relative; }
#gezenle-kullanici-basligi { text-align: center; color: #333; margin-top: 0; margin-bottom: 10px; font-size: 26px; font-weight: 700; }

/* Gezenlediğim Şehirler Çerçevesi (Kompakt Tasarım) */
#gezilen-sehirler-kapsayici { 
    margin-top: 15px; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    padding: 10px 15px; /* Dış çerçeve boşluğunu daralttık */
    background-color: #fafafa; 
}
.sehirler-baslik { 
    margin-top: 0; 
    margin-bottom: 10px; /* Başlık altı boşluğu daralttık */
    font-size: 16px; 
    color: #333; 
    text-align: center; 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 5px; 
}
.sehirler-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 2px 10px; /* Dikey aralığı (gap) neredeyse sıfırladık */
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.sehirler-grid li { 
    font-size: 13px; /* Yazı boyutunu tek sayfaya sığacak şekilde 1 tık kıstık */
    color: #444; 
    font-weight: 600; 
    padding: 1px 0; /* Altlı üstlü iç boşluğu minimuma indirdik */
    border-bottom: 1px dashed #ddd; 
}
.sehirler-grid li::before { 
    content: "📍 "; 
    font-size: 11px; 
}

/* Alt Bilgi (Footer) */
.gezenle-footer { display: flex; justify-content: space-between; border-top: 2px dashed #ddd; padding-top: 15px; margin-top: 20px; color: #555; font-size: 16px; }
.gezenle-footer-sag strong { color: #E91E63; font-size: 18px; }

/* Butonlar */
.gezenle-butonlar { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.gezenle-action-btn { background: #2196F3; color: white; border: none; padding: 12px 24px; font-size: 16px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.3s; }
.gezenle-action-btn:hover { background: #1976D2; }
#btn-indir-png { background: #E91E63; }
#btn-indir-png:hover { background: #C2185B; }

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .sehirler-grid { grid-template-columns: repeat(2, 1fr); }
    .gezenle-istatistik { flex-direction: column; align-items: flex-start; gap: 10px; }
}