* { 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 */
}

/* Tarih seçici ikonu rengi */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Yer değiştirme butonu özel ayarı */
.swap-btn {
    background: #2d2d2d;
    border: 1px solid #333;
    border-radius: 50%;
    width: 40px !important;
    height: 40px;
    padding: 0;
    margin: -20px auto 10px auto;
    z-index: 1001;
}

/* Android ve Mobil için Özel İyileştirmeler */
@media (max-width: 768px) {
    /* Panelin haritayı çok kapatmasını engelle */
    .top-panel {
        padding: 15px !important;
        max-height: 70vh !important; /* Ekranın %70'inden fazlasını kaplamasın */
    }

    /* NEREDEN / NEREYE butonlarını yan yana diz */
    .label-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap !important; /* Yan yana kalmaya zorla */
        margin-bottom: 5px;
    }

    .action-buttons {
        display: flex;
        gap: 4px;
        flex-shrink: 0; /* Butonların küçülmesini engelle */
    }

    /* Mobil buton tasarımları */
    .action-btn {
        background-color: #4caf50 !important; /* Mobilde daha belirgin olsun */
        color: #fff !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
        width: auto !important; /* 100% genişliği iptal et */
        margin: 0 !important;
    }

    /* Input kutularının butonların altında kalmasını sağla */
    input {
        margin-top: 2px !important;
        padding: 10px !important;
    }
}

/* iOS Tarih/Saat Kutusu Düzeltmesi */
input[type="datetime-local"] {
    -webkit-appearance: none; /* Safari varsayılan stilini sıfırla */
    min-height: 45px; /* Kutunun çok daralmasını engelle */
    display: flex;
    align-items: center;
    padding: 10px !important; /* İç boşluğu biraz azalt */
    font-size: 14px !important; /* Yazı tipini sabit tut */
    width: 100%;
}

/* iOS'te tarih metninin dikeyde ortalanması için */
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
    min-height: 20px;
    margin: 0;
}

/* Mobilde tarih seçici ikonunun sığması için */
@media (max-width: 768px) {
    input[type="datetime-local"] {
        font-size: 13px !important; /* Mobilde çok hafif küçült */
    }
}

/* iOS Sağa Kayma ve Yatay Taşma Kesin Çözüm */
html, body {
    width: 100%;
    height: 100%; /* 100vh yerine 100% kullanıyoruz */
    overflow: hidden; /* Her türlü kaymayı engelle */
    background-color: #121212;
    color: #e0e0e0;
    position: fixed; /* Mobilde sayfanın esnemesini/sekmesini KESİN engeller */
    top: 0;
    left: 0;
}

@media (max-width: 768px) {
    .top-panel {
        width: 100% !important; /* Ekranı tam kapla */
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 15px !important; /* Kenarlardan biraz nefes aldır */
        box-sizing: border-box !important; /* Padding'i genişliğe dahil et */
        border-radius: 0 0 16px 16px;
    }

    /* Input ve Select kutularının taşmasını engelle */
    input, select, .input-group {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* iOS Safari'de select kutusunun sağa taşmasını önleyen özel ayar */
    select {
        text-indent: 0.01px;
        text-overflow: '';
        padding-right: 30px !important; /* Ok ikonu için yer bırak */
    }

    /* Butonların yan yana dizilimindeki taşmayı önle */
    .label-row {
        width: 100% !important;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .top-panel {
        top: auto !important;
        bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        padding-top: 12px !important;
        transform: translateY(calc(100% - 85px)) !important;
        transition: transform 0.3s ease-out !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
        
        /* YENİ EKLENEN: Panel kapalıyken içindeki kaydırmayı tamamen kilitle */
        overflow-y: hidden !important; 
        touch-action: none; /* Mobildeki varsayılan kaydırma çakışmasını önle */
    }

    .top-panel.expanded {
        transform: translateY(0) !important;
        
        /* YENİ EKLENEN: Panel tamamen açılınca iç kaydırmayı aktif et */
        overflow-y: auto !important; 
        touch-action: pan-y; /* Sadece dikey kaydırmaya izin ver */
    }

    /* Tutamak ve h2 kodların aynen kalıyor... */
    .panel-handle {
        width: 50px;
        height: 6px;
        background-color: #666;
        border-radius: 10px;
        margin: 0 auto 15px auto;
        cursor: pointer;
    }

    .top-panel h2 {
        text-align: center !important;
        margin-bottom: 15px !important;
        font-size: 20px !important;
    }
}

/* Sağ Alt WhatsApp Yüzer İkon */
.floating-whatsapp {
    position: fixed;
    bottom: 30px; /* Alttan boşluk */
    right: 30px;  /* Sağdan boşluk */
    width: 60px;
    height: 60px;
    background-color: #25D366; /* WhatsApp Yeşili */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    z-index: 10001; /* Panelin bile üstünde dursun */
    transition: transform 0.3s ease-in-out;
}

.floating-whatsapp:hover {
    transform: scale(1.1); /* Üzerine gelince biraz büyüsün */
}

.floating-whatsapp img {
    width: 35px;
    height: 35px;
}

/* Mobilde panel açıldığında ikonun biraz yukarı kayması için (İsteğe Bağlı) */
@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 95px; /* Panelin sadece başlığı varken (calc(100% - 85px)) */
        right: 15px;
        width: 50px;
        height: 50px;
    }
    .floating-whatsapp img {
        width: 28px;
        height: 28px;
    }
}

/* =======================================================
   KARŞILAMA (HOŞGELDİN) EKRANI TASARIMI (GÜNCELLENMİŞ EFSANE VERSİYON)
   ======================================================= */
.welcome-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
    text-align: center;
    pointer-events: none; /* Harita tıklamalarını engellemez */
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
    width: 100%;
    padding: 0 20px;
    background: transparent; /* Siyah kutuyu tamamen kaldırdık */
    box-shadow: none; /* Kutu gölgesini sildik */
    backdrop-filter: none;
}

/* Masaüstünde panelin yanına tam ortala */
@media (min-width: 769px) {
    .welcome-banner {
        left: calc(50% + 180px); 
    }
}

/* Mobilde haritanın üst kısmına al */
@media (max-width: 768px) {
    .welcome-banner {
        top: 25%; 
    }
}

/* Devasa Marka Adı */
.welcome-banner .brand-title {
    color: #4caf50; /* Logodaki yeşil */
    font-size: 6vw; /* Ekrana göre otomatik büyür/küçülür */
    margin-bottom: 5px;
    letter-spacing: 4px;
    font-weight: 900;
    text-shadow: 0 5px 30px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 0.8); /* Harita üstünde jilet gibi okunur */
}

/* Alt Başlık */
.welcome-banner .brand-subtitle {
    color: #ffffff;
    font-size: 1.3vw;
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 1);
}

/* Mobil Cihazlar İçin Özel Yazı Boyutları */
@media (max-width: 768px) {
    .welcome-banner .brand-title { 
        font-size: 45px; 
    }
    .welcome-banner .brand-subtitle { 
        font-size: 14px; 
        margin-top: 10px; 
    }
}

.welcome-banner.hidden {
    opacity: 0;
    visibility: hidden;
}