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

.harita {
    height: clamp(20rem, 60vh, 34rem);
    /* Kara yedek katmanda çizilir; kutunun kendi zemini denizdir. */
    background: #d7e3ee;
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    overflow: hidden;
}

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

/* Pin bir üniversiteyi temsil eder; içindeki bağlantı o üniversitenin sayfası. */
.harita-pin-govde {
    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 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    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;
}

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

/* 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(--soluk);
    font-size: 0.6875rem;
}

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

@media (max-width: 30rem) {
    .harita {
        height: 20rem;
    }
}