* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }

body { 
    background-color: #121212; 
    color: #e0e0e0; 
    height: 100vh; 
    width: 100vw;
    overflow: hidden;
    position: relative; /* Panel ve haritanın üst üste binmesi için önemli */
}

/* Harita artık tüm ekranı kaplıyor */
#map { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: 1; /* En altta kalacak */
}

/* Kontrol Paneli Genel Ayarları */
.top-panel { 
    position: absolute; /* Haritanın üzerinde süzülmesi için */
    padding: 24px; 
    background-color: #1e1e1e; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.8); 
    z-index: 1000; /* Haritanın üstünde kalacak */
    display: flex;
    flex-direction: column;
}

/* MOBİL GÖRÜNÜM (Varsayılan) */
@media (max-width: 768px) {
    .top-panel {
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 0 0 16px 16px;
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* MASAÜSTÜ GÖRÜNÜM */
@media (min-width: 769px) {
    .top-panel {
        top: 50%; /* Yukarıdan ekranın ortasına it */
        transform: translateY(-50%); /* Kendi yüksekliğinin yarısı kadar geri çek (Tam ortalar) */
        left: 30px;
        width: 380px;
        border-radius: 16px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

h2 { font-size: 22px; margin-bottom: 20px; color: #4caf50; text-align: left; }

.input-group { margin-bottom: 16px; position: relative; }

/* Yeni eklediğimiz küçük etiketler */
label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

input { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #333; 
    border-radius: 8px; 
    background-color: #2d2d2d; 
    color: #fff; 
    font-size: 14px; 
    outline: none; 
    transition: 0.2s;
}
input:focus { border-color: #4caf50; background-color: #333; }

button { 
    width: 100%; 
    padding: 14px; 
    background-color: #4caf50; 
    color: #121212; 
    border: none; 
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
    margin-top: 5px;
}
button:hover { background-color: #45a049; }

/* Uyarı Yazısı */
.warning-text {
    color: #ff4d4d; 
    font-size: 12px; 
    font-weight: 600; 
    margin-top: 12px; 
    letter-spacing: 0.5px; 
    text-transform: uppercase;
    text-align: center;
}

/* Sonuç Kutusu */
#results { 
    margin-top: 20px; 
    padding: 15px; 
    background-color: #2a2a2a; 
    border-radius: 8px; 
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#results.hidden { display: none; }

.result-item { display: flex; justify-content: space-between; font-size: 14px; }
.result-item.highlight { font-size: 18px; color: #4caf50; font-weight: bold; margin-top: 5px; padding-top: 5px; border-top: 1px solid #444; }

/* Leaflet varsayılan yol tarifi panelini gizle */
.leaflet-routing-container { display: none !important; }

/* Otomatik Tamamlama Kutusu */
.suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #2a2a2a;
    border: 1px solid #4caf50;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.suggestions-box.hidden { display: none; }
.suggestion-item {
    padding: 12px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    font-size: 13px;
    color: #ccc;
    transition: background 0.2s;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background-color: #3d3d3d; color: #fff; }

/* Zoom butonlarını en üste al ve kesinlikle tıklanabilir yap */
.leaflet-bottom.leaflet-right {
    z-index: 9999 !important;
    pointer-events: none; /* Kutu tıklamayı engellemesin */
}
.leaflet-bottom.leaflet-right .leaflet-control {
    pointer-events: auto !important; /* Sadece butonlar tıklanabilsin */
}

/* Seçim Kutuları (Dropdown) Tasarımı */
select { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #333; 
    border-radius: 8px; 
    background-color: #2d2d2d; 
    color: #fff; 
    font-size: 14px; 
    outline: none; 
    transition: 0.2s;
    appearance: none; /* Tarayıcının varsayılan okunu gizler */
    /* Özel aşağı doğru ok ikonu */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23888" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

select:focus { 
    border-color: #4caf50; 
    background-color: #333; 
}

/* Seçeneklerin (options) arka planı karanlık kalsın diye */
select option {
    background-color: #2d2d2d;
    color: #fff;
}

/* Seçilemeyen (Kapasitesi Yetmeyen) Araçların Tasarımı */
select option:disabled {
    color: #666;
    font-style: italic;
}

/* WhatsApp Butonu Tasarımı */
#whatsapp-btn {
    background-color: #25D366; /* Orijinal WhatsApp Yeşili */
    color: #ffffff;
    margin-top: 15px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

#whatsapp-btn:hover {
    background-color: #1ebe5d;
}

/* YENİ: Alternatif Rotalar Paneli Tasarımı */
.leaflet-routing-container {
    background-color: transparent !important;
    color: #e0e0e0 !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Adım adım (sağa dön sola dön) tarifini gizle, sadece rotalar kalsın */
.leaflet-routing-alt table { display: none !important; } 

.leaflet-routing-alt {
    background-color: #2a2a2a;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #333;
    cursor: pointer;
    transition: 0.2s;
}
.leaflet-routing-alt:hover { border-color: #4caf50; }
.leaflet-routing-alt h2 { font-size: 13px; color: #4caf50; margin-bottom: 5px; text-transform: none; text-align: left; }
.leaflet-routing-alt h3 { font-size: 12px; color: #aaa; font-weight: normal; margin:0; }

/* Tıklanmayan (diğer) rotalar soluk ve gri görünsün */
.leaflet-routing-alt-minimized { 
    opacity: 0.5; 
    background-color: #1e1e1e; 
    border-color: transparent; 
}

/* Konum ve Haritadan Seç Butonları */
.action-btn {
    background: none;
    border: none;
    color: #4caf50;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    margin: 0;
    width: auto;
    transition: 0.2s;
}
.action-btn:hover {
    color: #fff;
}

/* Haritadan Seçim Modunda İmleç Değişimi */
.leaflet-container.map-selection-mode {
    cursor: crosshair !important;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.action-buttons {
    display: flex;
    gap: 5px;
}
.action-btn {
    background-color: transparent;
    color: #4caf50;
    border: none;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 5px;
    width: auto !important; /* Genişliği zorla otomatiğe al */
}