/* Haritalar paketi: ön yüz. Renkler haritanın ayarlarından (--harita-*) ya da bölgeye özel (--hf, --hh). */
.harita { position: relative; margin: 1.5rem 0; }
.harita__baslik { font-weight: 700; margin-bottom: .5rem; }
.harita__svg { display: block; width: 100%; height: auto; }
.harita__b { fill: var(--hf, var(--harita-dolgu)); stroke: var(--harita-cizgi); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .2s ease; }
.harita a { cursor: pointer; outline: none; }
.harita a:hover .harita__b, .harita a:focus-visible .harita__b, .harita .harita__b.is-vurgu { fill: var(--hh, var(--harita-vurgu)); }
.harita a:focus-visible .harita__b { stroke: currentColor; stroke-width: 3; }
.harita__ipucu { position: absolute; z-index: 5; pointer-events: none; padding: .35em .7em; border-radius: .5em; background: rgba(15, 20, 25, .9); color: #fff; font-size: .875rem; line-height: 1.3; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.harita__liste { display: flex; flex-wrap: wrap; gap: .4rem .6rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.harita__liste a { display: inline-block; padding: .3em .75em; border-radius: 999px; border: 1px solid currentColor; text-decoration: none; font-size: .9rem; }
.harita__liste a:hover, .harita__liste a:focus-visible { background: var(--harita-vurgu); }
@media (prefers-reduced-motion: reduce) { .harita__b { transition: none; } }

/* İçerikteki açılır kutu (<details>, ör. WordPress'ten gelen "İlçe Seçiniz" akordeonu). Harita sayfalarında yüklenir;
   :where() önceliği sıfırdır, tema kendi stilini kolayca ezer. Bağlantısız öğeler (sayfası olmayan ilçe) soluk görünür. */
:where(details) { margin: 1rem 0; border: 1px solid rgba(0, 0, 0, .14); border-radius: 10px; background: #fff; overflow: hidden; }
:where(details) > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
:where(details) > summary::-webkit-details-marker { display: none; }
:where(details) > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .2s ease; }
:where(details[open]) > summary::after { transform: translateY(25%) rotate(-135deg); }
:where(details) > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
:where(details) > :not(summary) { margin: 0; padding: 0 1rem 1rem; }
:where(details) > ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .15rem .75rem; max-height: 22rem; overflow: auto; }
:where(details) > ul > li { padding: .35rem 0; border-bottom: 1px solid rgba(0, 0, 0, .06); color: rgba(0, 0, 0, .45); }
:where(details) > ul > li:has(a) { color: inherit; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { :where(details) > summary::after { transition: none; } }