/* Ana sayfadaki harita. Leaflet'in kendi stilinin üstüne biner. */

/*
 * Hero harita: kurum şeridinin hemen altında, açılış ekranını dolduracak kadar.
 * Ekranın tamamı değil — altında bir şey olduğu görünsün (brief › Ana sayfa).
 */
.harita {
    height: 85vh;
    min-height: 26rem;
    /*
     * Kara yedek katmanda çizilir; kutunun kendi zemini denizdir. Aynı token
     * sunucudaki önizleme çiziminde de geçiyor ve orada CSS yok
     * (src/Preview/PreviewMap.php).
     */
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    overflow: hidden;
}

/*
 * Kurum sayfasının küçük haritası: 240px, tek pin, gezinmesiz (brief › Kurum
 * sayfası). Hero'nun tam genişlikten kenardan kenara halinin aksine, sayfanın
 * içinde bir kart gibi durur — bu yüzden kendi çerçevesini ve köşesini yazar.
 */
.harita.mini-harita {
    height: 240px;
    margin-top: 1.5rem;
    border: 1px solid var(--cizgi);
    border-radius: 10px;
}

/* Harita kurulmadan önce ziyaretçinin okuduğu satır. */
.harita-durum {
    margin: 0;
    padding: 1.25rem;
    color: var(--metin-soluk);
}

/* Pin bir üniversiteyi temsil eder; içindeki bağlantı o üniversitenin sayfası. */
.harita-pin-govde {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--mavi);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
    color: #fff;
    font: 600 0.8125rem/1 var(--yazi);
    text-decoration: none;
}

.harita-pin-govde:hover,
.harita-pin-govde:focus-visible {
    background: var(--mavi-koyu);
}

.harita-pin-govde:focus-visible {
    outline: 3px solid var(--mavi);
    outline-offset: 2px;
}

/*
 * Hareketliliğin başladığı yer: koordinatörlüğün kendi kurumu. Pin değildir —
 * oraya kimse gitmedi — bu yüzden ne tıklanır ne de sayı taşır.
 */
.harita-koken-govde {
    display: block;
    width: 14px;
    height: 14px;
    margin: 2px;
    background: var(--metin);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

/*
 * Tek kurumu gösteren haritanın pini. Aynı pin, daha büyük: sayfada başka pin
 * yok, ve gösterdiği yer sayfanın konusu.
 */
.harita-pin-buyuk {
    width: 44px;
    height: 44px;
}

/*
 * Küme: uzak zoom'da üst üste düşecek pinlerin yerine geçen tek işaret
 * (brief › Ana sayfa — Pin; harita.js › place). Rozetin üstündeki sayı kaç
 * kurum değil kaç deneyim olduğunu söyler. Yakınlaşınca küme dağılır ve yerini
 * pinlere bırakır; o yüzden aynı mavi, aynı beyaz kenar — büyümüş bir pindir.
 */
.harita-kume-govde {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--mavi);
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgb(20 33 61 / 35%);
    color: #fff;
    font: 700 0.9375rem/1 var(--yazi);
    font-variant-numeric: tabular-nums;
}

.harita-kume {
    cursor: pointer;
}

.harita-kume:hover .harita-kume-govde {
    background: var(--mavi-koyu);
}

.harita-kume:focus-visible {
    outline: 3px solid var(--mavi);
    outline-offset: 2px;
}

/* Yerinden kaydırılmış pini gerçek konumuna bağlayan ince çizgi. */
.harita-bag {
    pointer-events: none;
}

/*
 * Tek parmağın sayfaya ait olduğu ekranlarda haritanın söylediği satır
 * (harita.js › fingers). Yalnızca doğruyken durur: geniş ekranda harita sürülür
 * ve bu satır belgeden kalkar.
 */
.harita-ipucu {
    margin: 0 0 0.75rem 0.75rem;
    padding: 0.35rem 0.7rem;
    background: rgb(255 255 255 / 92%);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    color: var(--metin-soluk);
    font-size: 0.75rem;
    box-shadow: 0 1px 4px rgb(20 33 61 / 20%);
}

.harita-ipucu[hidden] {
    display: none;
}

/* Yakınlaştırma ve "Avrupa'ya dön" — haritanın sağ altında. */
.harita-denetimler {
    display: flex;
    gap: 0.35rem;
    margin: 0 0.75rem 0.75rem 0;
}

.harita-dugme {
    padding: 0.4rem 0.7rem;
    background: rgb(255 255 255 / 92%);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    color: var(--mavi-koyu);
    font: 600 0.875rem/1.2 var(--yazi);
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(20 33 61 / 20%);
}

.harita-dugme:hover {
    border-color: var(--mavi);
}

.harita-dugme:focus-visible {
    outline: 3px solid var(--mavi);
    outline-offset: 2px;
}

/* Haritanın köşesindeki kaynak bilgisi sayfanın geri kalanıyla aynı tonda dursun. */
.harita .leaflet-control-attribution {
    background: rgb(255 255 255 / 85%);
    color: var(--metin-soluk);
    font-size: 0.6875rem;
}

.harita .leaflet-control-attribution a {
    color: var(--metin-soluk);
}

/*
 * Telefon (brief › Mobil). Sitenin dar ekran sınırı 40rem'dir ve harita da onu
 * kullanır: harita 60vh'ye iner — akış bozulmadan ön planda kalacak kadar —
 * ve dokunmayla kullanılan her şey en az 44px olur.
 */
@media (max-width: 40rem) {
    .harita {
        height: 60vh;
    }

    /*
     * Pinin çizimi 32px kalır; büyüyen şey parmağın bulması gereken alan.
     * Görünen daire büyütülseydi yan yana iki kurum birbirinin üstüne binerdi —
     * bunun yerine harita.js pinleri dar ekranda biraz daha seyrek yerleştirir
     * (TOUCH_PIN_DISTANCE).
     */
    .harita-pin-govde::before {
        content: "";
        position: absolute;
        /*
         * Kenarlığın içinden ölçülür: mutlak konumlanan bir kutunun sıfırı,
         * kapsayanın dolgu kutusudur. 28px'lik dolgu kutusu her yandan 8px
         * genişleyince parmağın bulduğu alan 44px olur.
         */
        inset: -8px;
        border-radius: 999px;
    }

    .harita-dugme {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}