/* ==================================== */
/* 1. HARİTA BÖLÜMÜ KAPSAYICISI (.section container) */
/* ==================================== */
.section.container {
    /* Ana içerikten ayırmak için üst ve alttan boşluk */
    padding: 60px 15px; 
    /* Dış kapsayıcının ortalanmasını sağlar (varsa) */

    max-width: 1200px; 
    box-sizing: border-box;
}

/* ==================================== */
/* 2. BAŞLIK PANELİ (#map-title-panel) */
/* ==================================== */
#map-title-panel {
    text-align: center;
    margin-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

#map-title-panel h1 {
    /* H1 etiketiniz için daha büyük ve çarpıcı bir font boyutu */
    font-size: 1.8rem; 
    font-weight: 600;
    color: #2e7d32; /* Ana renginiz */
    line-height: 1.2;
    margin: 0;
}
/* ==========================================================
  Leaflet Kontrol Kutusu CSS'i (Genişletildi ve Animasyon Eklendi)
  ========================================================== */

/* Sağ üst köşedeki tüm kontrol öğelerinin kapsayıcısı - KRİTİK DEĞİŞİKLİKLER */
.leaflet-top.leaflet-right {
    top: 27%; /* Dikey ortalamayı koru */
    transform: translateY(-50%); 
    
    /* KRİTİK 1: Kutunun genişliğini artırın (5 kontrol için en az 250px önerilir) */
    width: 180px; 
    max-width: 90%; 
    
    /* KRİTİK 2: Dikey düzen ve boşluklar */
    display: flex;
    flex-direction: column;
    gap: 6px; /* Kontroller arası boşluğu artır */
    padding: 10px; /* İç boşluğu artır */
    
    /* Estetik */
    background-color: #388e3c; /* Kutu rengi */
    border-radius: 8px;
    box-shadow: 0 0px 15px rgba(0,0,0,0.15);
    margin-right: 15px; 
    margin-top: 0; 
    
    /* ----------------------------------------------------------------- */
    /* ✅ KUTU ANIMASYON BAŞLANGIÇ STİLİ */
    /* ----------------------------------------------------------------- */
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(-50%) translateX(50px); /* Sağdan dışarı kaymış başla */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Animasyon süresi */
    /* ----------------------------------------------------------------- */
}

/* ✅ KUTU ANIMASYON BİTİŞ STİLİ (JS ile eklenen sınıf) */
.leaflet-top.leaflet-right.box-visible {
    opacity: 1; /* Tamamen görünür */
    transform: translateY(-50%) translateX(0); /* Normal konumuna kay */
}

/* Dropdown filtre kontrolleri (Tüm input ve select'ler) */
.leaflet-control-select {
    width: 100%; 
    padding: 7px 8px;
    /* Diğer filtre ve butonlarla tutarlılık için beyaz arka plan */
    border: 1px solid #66bb6a; /* Hafif kenarlık */
    border-radius: 5px;
    font-size: 12px; /* Font boyutunu biraz artır */
    cursor: pointer;
    background-color: #fff; 
    color: #333; 
    /* Düğme stilleri için eklenen geçiş */
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* YENİ: Arama inputu (filtreler ile aynı görünümde) */
#custom-search-input {
    /* Özel ayar gerekmez, .leaflet-control-select'ten alır */
    font-size: 12px;
}

/* YENİ: Sıfırla Düğmesi için renk (Uyarı/Aksiyon Rengi) */
.reset-control button,
.gps-locator-control button {
    /* Buttonlar için temel stilleri override et */
    background-color: #0d47a1; /* Koyu Mavi (Aksiyon) */
    color: white;
    border: none;
    font-weight: 400;
}
.reset-control button:hover,
.gps-locator-control button:hover {
    background-color: #1565c0; /* Hover rengi */
}
/* GPS Locator, Reset Button ve diğer filtre kontrolleri */
.city-filter-control, 
.category-filter-control,
.reset-control,
.gps-locator-control,
.custom-search-control {
    width: 100%; 
    border: none !important; 
    box-shadow: none !important;
    background: none !important;
    height: auto;
    /* Düğmelerin dış Leaflet gölgesini ve kenarını kaldırır */
}
/* Marker'ın dış kapsayıcısı (L.divIcon tarafından oluşturulan) */
.custom-marker {
    background: none !important; /* Varsayılan arka planı kaldır */
    border: none !important;
}

/* Marker'ın yuvarlak arka planı (html: içine eklenen marker-bg div'i) */
.marker-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    color: white; 
    font-size: 14px; 
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
    border: 3px solid white;
    
    
    /* Dinamik geçiş */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Kategori Rengi: KAMP ALANI */
.camp-bg {
    background-color: #388E3C; /* Koyu Yeşil */
}

/* Kategori Rengi: GEZİLECEK YER */
.visit-bg {
    background-color: #1976D2; /* Canlı Mavi */
}

/* Hover Efekti: Fare üzerine geldiğinde veya tıklandığında */
.leaflet-marker-icon:hover .marker-bg,
.leaflet-marker-icon.leaflet-interactive:focus .marker-bg {
    transform: scale(1.1); /* Hafif büyütme */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Daha belirgin gölge */
}
/* -------------------------------------------------------------
  MOBİL UYUMLULUK VE KOMPAKT BOYUTLANDIRMA (max-width: 768px)
------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    
    /* Ana Kapsayıcıyı (Box) Mobil Ekrana Ayarlama */
    .leaflet-top.leaflet-right {
        /* Pozisyonu yukarı taşı */
        top: 10px !important; 
        transform: none !important; /* Dikey ortalamayı kaldır */
        margin-right: 10px !important; /* Sağdan boşluk azalt */
        
        /* Boyutları küçült */
        width: 150px !important; /* Daha dar bir genişlik */
        max-width: 95% !important; 
        padding: 6px !important; /* İç boşluğu azalt */
        
        /* Animasyonu kaldır */
        opacity: 1 !important;
        
        /* Box-visible animasyonunu da kaldır */
        transition: none !important;
    }
    
    /* Box-visible sınıfı gelirse bile mobil pozisyonu koru */
    .leaflet-top.leaflet-right.box-visible {
        transform: none !important;
    }
    
    /* TÜM İÇ KONTROL ÖĞELERİ */
    .city-filter-control, 
    .category-filter-control,
    .reset-control,
    .gps-locator-control,
    .custom-search-control {
        margin-bottom: 2px !important; /* Kontroller arası boşluğu azalt */
    }

    /* INPUT VE BUTON YÜKSEKLİKLERİNİ AZALTMA */
    .leaflet-control-select,
    #custom-search-input {
        padding: 6px 7px !important; /* Yüksekliği düşür */
        font-size: 11px !important; /* Yazı boyutunu küçült */
    }
    
    .reset-control button,
    .gps-locator-control button {
        padding: 5px 0 !important; /* Buton yüksekliğini düşür */
        font-size: 11px !important; 
    }
}
/* -------------------------------------------------------------
  Z-INDEX DÜZELTMESİ: Arama Sonuçlarının Üstte Kalması
------------------------------------------------------------- */

/* Arama kutusunu kapsayan kontrol div'i */
.custom-search-control {
    /* Leaflet'in varsayılan z-index'leri 1000 civarındadır.
       Bunu 9999 gibi bir değere ayarlayarak her zaman üstte kalmasını sağlarız. */
    z-index: 9999 !important; 
    position: relative; /* z-index'in çalışması için gereklidir */
}

/* Tüm Kontrol Kutusuna da yüksek z-index verelim (Eğer mobil modda açıldığında sorun yaşanırsa) */
.leaflet-top.leaflet-right {
    z-index: 9900; 
}

/* Arama sonuçları açılır menüsü */
#search-results-dropdown {
    /* Pozisyonlar JS'de zaten ayarlanmış, sadece emin olmak için */
    position: absolute; 
    z-index: 10000; 
}
/* ==========================================================
  LEAFLET LAYER CONTROL BOYUT KÜÇÜLTME
  ========================================================== */

/* 1. Kontrol Düğmesi Boyutu (Küçük kare ikon) */
.leaflet-control-layers-toggle {
    /* Varsayılan 36px'dir. 30px'e düşürüyoruz. */
    width: 30px !important;
    height: 30px !important;
    /* Kontrolü biraz daha kompakt yapmak için iç dolguyu (padding) ayarlayabilirsiniz */
    /* background-size: 20px 20px; /* İkonun boyutunu küçültmek için (gerekirse) */
}

/* 2. Açılan Menüdeki Yazı Boyutu */
.leaflet-control-layers-list label {
    /* Menü içindeki metin boyutunu küçült */
    font-size: 13px; 
    line-height: 1.2;
    padding: 3px 0; /* Satırlar arası boşluğu azalt */
}

/* 3. Açılan Menünün Genel Genişliği */
/* Menünün çok genişlemesini engeller */
.leaflet-control-layers-expanded {
    padding: 6px;
}

/* Konum Sayacı Kontrolü */
.leaflet-control.location-counter-control {
    background-color: white;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    font-weight: bold;
    font-size: 14px;
    color: #333;
    cursor: default;
    /* Kontrolü alt-sol köşeye konumlandırmak için */
    margin-left: 10px; 
    margin-bottom: 10px;
}

.leaflet-control.location-counter-control i {
    margin-right: 5px;
    color: #4CAF50; /* Yeşil ikon */
}