/* Harita sayfası — bölünmüş görünüm (sol liste, sağ harita).
   Tema (site-theme/style.css) kart ve form sınıflarını sağlıyor; burada yalnız
   haritaya özgü düzen ve yol durumu renkleri var. */

.harita-sayfa {
    padding: 24px 0 40px;
}

/* ── Harita paneli ─────────────────────────────────────────────────────────── */
.harita-sarmal {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f1f1f1;
    box-shadow: 0 4.4px 12px -1px rgba(19, 16, 34, .06);
}

#tatilHarita {
    width: 100%;
    /* Masaüstünde ekranı dolduran ama başlık/breadcrumb'a yer bırakan yükseklik */
    height: calc(100vh - 220px);
    min-height: 460px;
}

.harita-lejant {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(255, 255, 255, .94);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    z-index: 2;
}

.harita-lejant strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
}

.harita-lejant span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
    color: #4b5563;
}

.harita-lejant-nokta {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* ── Yol durumu renkleri — JS'teki YOL_RENK ile aynı olmalı ────────────────── */
.harita-yol-0 { background: #9ca3af; }
.harita-yol-1 { background: #10b981; }
.harita-yol-2 { background: #f59e0b; }
.harita-yol-3 { background: #ef4444; }

/* Etiket biçimi (lejant noktası dışındakiler) */
span.harita-yol {
    color: #fff;
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

.harita-rozet {
    background: #0ea5e9;
    color: #fff;
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-left: 4px;
}

.harita-puan {
    color: #f59e0b;
    font-weight: 700;
    font-size: 12px;
    margin-left: 4px;
}

/* ── Sol liste ─────────────────────────────────────────────────────────────── */
.harita-liste {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 4px;
}

.harita-kart {
    margin-bottom: 10px;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}

.harita-kart:hover,
.harita-kart.vurgulu {
    box-shadow: 0 6px 18px rgba(19, 16, 34, .12);
    transform: translateY(-1px);
}

.harita-kart .card-body { padding: 12px; }

.harita-kart-govde {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.harita-kart-gorsel {
    flex: 0 0 96px;
    width: 96px;
}

.harita-kart-gorsel img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.harita-kart-bilgi { min-width: 0; }

.harita-kart-bilgi h3 {
    font-size: 15px;
    margin: 0 0 4px;
    line-height: 1.3;
}

.harita-kart-bilgi h3 a { color: #0d233e; }

.harita-kart-bilgi .location-info {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 6px;
}

.harita-kart-etiketler { margin: 0; }

/* ── Filtre paneli ─────────────────────────────────────────────────────────── */
.harita-karavan {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 10px 12px 10px 34px;
}

.harita-olanaklar summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 0;
}

.harita-olanak-grup {
    margin: 8px 0 12px;
}

.harita-olanak-grup h6 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin: 0 0 4px;
}

.harita-olanak-grup .form-check-label { font-size: 13px; }

/* ── Popup ─────────────────────────────────────────────────────────────────── */
.harita-popup { width: 230px; }

.harita-popup img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}

.harita-popup-nofoto {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: #f3f4f6;
    border-radius: 6px;
    margin-bottom: 8px;
}

.harita-popup h4 {
    font-size: 14px;
    margin: 0 0 4px;
    line-height: 1.3;
}

.harita-popup .meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.harita-popup .etiketler { margin-bottom: 8px; }

.harita-popup-link {
    font-size: 13px;
    font-weight: 600;
}

/* ── Mobil: harita üstte sabit yükseklik, liste altta ──────────────────────── */
@media (max-width: 991.98px) {
    .harita-sayfa .row { flex-direction: column-reverse; }

    #tatilHarita {
        height: 58vh;
        min-height: 320px;
    }

    .harita-liste {
        max-height: none;
        overflow: visible;
    }
}

/* Anasayfa önizlemesi: tam sayfa haritadan daha kısa, sticky değil. */
.harita-onizleme-section { padding: 30px 0; }

.harita-onizleme #tatilHarita {
    height: 420px;
    min-height: 320px;
}

@media (max-width: 991.98px) {
    .harita-onizleme #tatilHarita { height: 320px; }
}

/* ── Aktif filtre etiketleri ───────────────────────────────────────────────── */
.filtre-etiketler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f1f1;
}

.filtre-etiketler-baslik {
    font-size: 12px;
    color: #6b7280;
    margin-right: 2px;
}

.filtre-etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    transition: background .15s, border-color .15s;
}

.filtre-etiket:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.filtre-etiket i {
    font-size: 13px;
    opacity: .7;
}

.filtre-etiket:hover i { opacity: 1; }

/* Karavan filtresi haritanın ana ayırt edici özelliği; etiketi de öne çıkar. */
.filtre-etiket-karavan {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #075985;
}

.filtre-temizle {
    font-size: 12px;
    color: #6b7280;
    text-decoration: underline;
    margin-left: 4px;
}

.filtre-temizle:hover { color: #991b1b; }

/* Filtre değişince form kendiliğinden gönderiliyor; "Filtrele" düğmesi
   JS kapalı kullanıcı için yedek kalıyor, ikincil görünsün. */
.harita-olanaklar[open] summary { color: #0d233e; }

/* ── Rota üzerinde arama paneli ────────────────────────────────────────────── */
.rota-panel {
    border: 1px solid #bfdbfe;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%);
}

.rota-baslik {
    font-size: 16px;
    margin: 0 0 4px;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rota-aciklama {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 12px;
}

.rota-butonlar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.rota-durum {
    font-size: 12px;
    color: #1e40af;
    margin: 10px 0 0;
    min-height: 1em;
}

.rota-durum.hata { color: #b91c1c; }

.harita-uzaklik {
    background: #dbeafe;
    color: #1e40af;
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-left: 4px;
}

#rotaMesafe { width: 100%; }