/* Afganistan haritası (harita.js). Coğrafya SVG'de, noktalar/etiketler HTML'de:
   --k = SVG birimi / piksel (JS, ResizeObserver) — çizgi, kesik ve doku her
   genişlikte piksel boyunda kalır. Sahne hep LTR (coğrafya aynalanmaz); Dari'de
   yalnız metin kutuları sağdan sola: konumlanan dış kutu LTR kalır, iç kutu döner.
   Başlık sınıfları (.pusula-baslik, .derece, .serif-baslik, .kose) pusula.css'te. */

.harita {
  --h-isik: var(--altin-isik, #fff1bd);
  --h-cizgi: var(--altin-cizgi, rgb(236 208 120 / 0.35));
  --h-cizgi-soluk: var(--altin-cizgi-soluk, rgb(236 208 120 / 0.14));
  --h-doku: var(--nokta-doku, rgb(236 208 120 / 0.22));
  --h-zemin: var(--zemin-derin, #050403);
  --h-dolgu: rgb(236 208 120 / 0.045);
  --h-parilti: rgb(236 208 120 / 0.16);
  --h-nabiz: rgb(255 241 189 / 0.5);
  --k: 1;
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 8px 16px 14px; border: 1px solid var(--h-cizgi-soluk); border-radius: 6px;
  background: var(--h-zemin); color: var(--metin);
}
:root[data-tema="gunduz"] .harita {
  --h-isik: var(--altin-isik, #7a5c0f);
  --h-cizgi: var(--altin-cizgi, rgb(122 92 15 / 0.4));
  --h-cizgi-soluk: var(--altin-cizgi-soluk, rgb(122 92 15 / 0.16));
  --h-doku: var(--nokta-doku, rgb(122 92 15 / 0.22));
  --h-zemin: var(--zemin-derin, #f1ebdc);
  --h-dolgu: rgb(122 92 15 / 0.07);
  --h-parilti: rgb(122 92 15 / 0.12);
  --h-nabiz: rgb(122 92 15 / 0.35);
}

/* --- sahne ---------------------------------------------------------------- */
.harita-sahne {
  position: relative; direction: ltr; inline-size: 100%; max-inline-size: var(--harita-boy, none); margin-inline: auto;
  aspect-ratio: 1000 / 766; min-block-size: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--h-doku) 45%, transparent) 0.8px, transparent 1.4px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.harita-svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; direction: ltr; }
/* Rota katmanı: statik haritanın üstünde, kendi bileşik katmanında (akış animasyonu yalnız bunu boyar). */
.harita-ust { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.harita-doku-nokta { fill: var(--h-doku); }
.harita-dolgu { fill: var(--h-dolgu); }
.harita-isik-ic { stop-color: var(--h-parilti); }
.harita-isik-dis { stop-color: var(--h-parilti); stop-opacity: 0; }
.harita-iller path {
  fill: none; stroke: var(--h-cizgi-soluk); stroke-width: calc(1px * var(--k)); stroke-linejoin: round;
  stroke-dasharray: calc(3px * var(--k)) calc(4px * var(--k));
  animation: harita-belir 1.2s ease .5s both;
}
.harita-sinir-isik { fill: none; stroke: var(--h-cizgi-soluk); stroke-width: calc(6px * var(--k)); stroke-linejoin: round; animation: harita-belir 1.4s ease .6s both; }
.harita-sinir {
  fill: none; stroke: var(--altin-2, #ecd078); stroke-width: calc(1.5px * var(--k)); stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: harita-ciz 1.8s var(--egri) .1s forwards;
}
:root[data-tema="gunduz"] .harita-sinir { stroke: var(--h-isik); }

/* Rotalar: Kabil'den şehre kesikli kavis; kesikler şehre doğru akar, üstünde ışık noktası. */
.harita-rota {
  fill: none; stroke: var(--h-cizgi); stroke-width: calc(1px * var(--k)); stroke-linecap: round;
  stroke-dasharray: calc(4px * var(--k)) calc(5px * var(--k));
  animation: harita-belir .8s ease both, harita-akis 1.3s linear infinite;
  animation-delay: calc(1.3s + var(--i, 0) * 70ms), 0s;
  transition: opacity .3s, stroke .3s;
}
.harita-rota.secili { stroke: var(--h-isik); }
.harita-sahne.vurgu .harita-rota:not(.secili) { opacity: .3; }
.harita-akan { fill: var(--h-isik); stroke: var(--h-nabiz); stroke-width: calc(2.5px * var(--k)); pointer-events: none; opacity: 0; /* ilk kareye dek görünmez; JS her karede yazar */ }

/* --- şehirler (HTML katmanı) --------------------------------------------- */
.harita-katman { position: absolute; inset: 0; }
.harita-sehir {
  position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y);
  inline-size: 0; block-size: 0; overflow: visible; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: harita-belir .5s ease both; animation-delay: calc(1s + min(var(--i, 0), 24) * 45ms);
}
.harita-sehir.bos { pointer-events: none; }
.harita-sehir::after { content: ""; position: absolute; inline-size: 44px; block-size: 44px; translate: -50% -50%; border-radius: 50%; }
.harita-sehir.bos::after { display: none; }
.harita-sehir:focus-visible { outline: none; }
.harita-sehir:focus-visible .harita-nokta { outline: 2px solid var(--altin-2, #ecd078); outline-offset: 6px; }
:root[data-tema="gunduz"] .harita-sehir:focus-visible .harita-nokta { outline-color: var(--altin-5, #6e5510); }

.harita-nokta {
  position: absolute; inline-size: calc(var(--r) * 2); block-size: calc(var(--r) * 2); translate: -50% -50%;
  border-radius: 50%; background: var(--h-isik);
  box-shadow: 0 0 0 2px var(--h-zemin), 0 0 12px 1px var(--h-nabiz);
  animation: harita-cik .7s var(--yay) both; animation-delay: inherit;
  transition: scale .25s var(--yay);
}
.harita-sehir.secili .harita-nokta, .harita-sehir:hover .harita-nokta { scale: 1.25; }
.harita-sehir.bos .harita-nokta { background: var(--h-cizgi); box-shadow: none; }
/* Aktif lisanslı şehir: dışa yayılan nabız halkası (yalnız transform/opacity). */
.harita-sehir.aktif .harita-nokta::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--h-isik); opacity: 0;
  animation: harita-nabiz 2.8s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(1.8s + var(--i, 0) * .4s);
}
/* Kabil «merkez»: çift halka, dışta ağır ağır dönen kesikli halka, daha güçlü ışık. */
.harita-sehir.merkez .harita-nokta { box-shadow: 0 0 0 2px var(--h-zemin), 0 0 0 3.5px var(--h-isik), 0 0 22px 5px var(--h-nabiz); }
.harita-sehir.merkez .harita-nokta::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed var(--h-cizgi);
  animation: harita-don 48s linear infinite;
}
.harita-sehir.merkez.bos .harita-nokta { background: var(--h-cizgi); box-shadow: 0 0 0 2px var(--h-zemin), 0 0 0 3px var(--h-cizgi); }

/* Etiketler: mono, noktaya göre elle verilmiş yönde (dış kutu LTR konumlanır; iç kutu dilin yönünde). */
.harita-etiket {
  position: absolute; display: flex; white-space: nowrap; pointer-events: none;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: .02em;
  color: var(--metin); text-shadow: 0 0 6px var(--h-zemin), 0 0 3px var(--h-zemin), 0 0 1px var(--h-zemin);
  animation: harita-belir .6s ease both; animation-delay: calc(1.25s + min(var(--i, 0), 24) * 45ms);
  transition: visibility 0s;
}
:root[lang="fa-AF"] .harita-etiket { font-family: "Vazirmatn", var(--mono, monospace); font-size: 11.5px; letter-spacing: 0; }
.harita-etiket.gizli { visibility: hidden; }
.harita-sehir:hover .harita-etiket, .harita-sehir:focus-visible .harita-etiket, .harita-sehir.secili .harita-etiket { visibility: visible; }
.harita-etiket-ic { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; unicode-bidi: isolate; }
[dir="rtl"] .harita-etiket-ic { direction: rtl; }
.harita-satir { display: inline-flex; align-items: baseline; gap: .45em; }
.harita-sehir.bos .harita-etiket { color: var(--soluk); font-weight: 400; }
.harita-say { font-weight: 700; color: var(--altin-metin); font-variant-numeric: tabular-nums; }
.harita-sehir.merkez .harita-ad { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
/* «merkez» alt etiketi yalnız geniş ekranda (telefonda Kabil çevresi sıkışık). */
.harita-merkez-etiket { display: none; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--altin-metin); font-weight: 600; }
:root[lang="fa-AF"] .harita-merkez-etiket { text-transform: none; letter-spacing: 0; font-size: 10px; }
.yon-d { inset-inline-start: calc(var(--r) + 6px); inset-block-start: 0; translate: 0 -50%; }
.yon-b { inset-inline-end: calc(var(--r) + 6px); inset-block-start: 0; translate: 0 -50%; }
.yon-k { inset-block-end: calc(var(--r) + 5px); inset-inline-start: 0; translate: -50% 0; }
.yon-g { inset-block-start: calc(var(--r) + 5px); inset-inline-start: 0; translate: -50% 0; }
.yon-kd { inset-block-end: calc(var(--r) + 1px); inset-inline-start: calc(var(--r) + 3px); }
.yon-kb { inset-block-end: calc(var(--r) + 1px); inset-inline-end: calc(var(--r) + 3px); }
.yon-gd { inset-block-start: calc(var(--r) + 1px); inset-inline-start: calc(var(--r) + 3px); }
.yon-gb { inset-block-start: calc(var(--r) + 1px); inset-inline-end: calc(var(--r) + 3px); }
/* Dari'de sağ yönlü etiketin sayısı noktaya bitişik düşer: biraz daha boşluk. */
[dir="rtl"] .yon-d { inset-inline-start: calc(var(--r) + 9px); }
[dir="rtl"] :is(.yon-kd, .yon-gd) { inset-inline-start: calc(var(--r) + 6px); }
/* Nokta solunda kalan etiketler sağa yaslı (iki satırlı Kabil etiketi için). */
:is(.yon-b, .yon-kb, .yon-gb) .harita-etiket-ic { align-items: flex-end; }
[dir="rtl"] :is(.yon-b, .yon-kb, .yon-gb) .harita-etiket-ic { align-items: flex-start; }
[dir="rtl"] :is(.yon-d, .yon-kd, .yon-gd) .harita-etiket-ic { align-items: flex-end; }

/* --- balon ---------------------------------------------------------------- */
.harita-balon {
  position: absolute; z-index: 2; inset-inline-start: clamp(76px, var(--x), calc(100% - 76px)); inset-block-start: var(--y);
  translate: -50% calc(-100% - var(--r, 4px) - 12px); pointer-events: none;
  padding: 6px 11px; border-radius: 8px;
  background: var(--metin); color: var(--zemin); white-space: nowrap; box-shadow: 0 8px 20px rgb(0 0 0 / 0.3);
  font-size: .8rem; font-weight: 800; animation: harita-balon-ac .2s var(--egri) both;
}
.harita-balon-ic { display: flex; flex-direction: column; align-items: center; gap: 1px; }
[dir="rtl"] .harita-balon-ic { direction: rtl; }
.harita-balon-alt { font-family: var(--mono, ui-monospace, monospace); font-size: .66rem; font-weight: 600; letter-spacing: .04em; opacity: .8; }
:root[lang="fa-AF"] .harita-balon-alt { font-family: inherit; letter-spacing: 0; font-size: .74rem; }

/* --- lejant ve sayaç: mono mini etiketler --------------------------------- */
.harita-lejant, .harita-sayac {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  color: var(--soluk);
}
:root[lang="fa-AF"] :is(.harita-lejant, .harita-sayac) { font-family: "Vazirmatn", sans-serif; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Lejant: telefonda haritanın üstünde satır; genişte haritanın boş kuzeybatı köşesine biner. */
.harita-lejant { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px 16px; }
.harita-lejant li { display: flex; align-items: center; gap: 7px; }
.harita-lejant i { position: relative; flex: none; display: block; inline-size: 14px; block-size: 14px; }
.harita-lejant i::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--h-isik); }
.harita-lejant .lejant-merkez::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--h-isik); }
.harita-lejant .lejant-musteri::before { inset: 5px; }
.harita-lejant .lejant-aktif::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 1px solid var(--h-isik); opacity: .6; animation: harita-nabiz-kucuk 2.8s ease-out infinite; }
.harita-lejant .lejant-rota::before { inset: 6px 0; border-radius: 0; background: none; border-block-start: 1px dashed var(--h-isik); }

/* Sayaç: telefonda haritanın altında ince şerit; genişte sağ alt boş köşede kart. Dış kutu konumlanır, iç kutu dilin yönünde. */
.harita-sayac { border-block-start: 1px solid var(--h-cizgi-soluk); padding-block-start: 10px; }
.harita-sayac-ic { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.harita-sayac-satir { display: flex; align-items: baseline; gap: 10px; }
.harita-sayac-hucre { display: flex; align-items: baseline; gap: 4px; }
.harita-sayac-hucre + .harita-sayac-hucre::before { content: "·"; margin-inline-end: 6px; color: var(--cok-soluk); }
.harita-sayac-hucre b { font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--metin); font-variant-numeric: tabular-nums; }
.harita-diger, .harita-bos { margin: 0; white-space: normal; text-transform: none; letter-spacing: .02em; font-weight: 500; font-size: 10.5px; line-height: 1.4; }
.harita-diger { margin-inline-start: auto; }
.harita-bos { color: var(--soluk); }

@media (min-width: 600px) {
  .harita { padding: 10px 22px 20px; gap: 18px; }
  .harita-lejant, .harita-sayac { font-size: 10.5px; }
  .harita-etiket { font-size: 11px; }
  :root[lang="fa-AF"] .harita-etiket { font-size: 12.5px; }
  .harita-sehir.merkez .harita-ad { font-size: 13.5px; }
  .harita-merkez-etiket { display: block; }
  /* Lejant haritanın kuzeybatı boş köşesine (Dari'de de: coğrafya aynı). */
  .harita-lejant { position: relative; z-index: 1; flex-direction: column; gap: 7px; align-self: flex-start; margin-block-end: -90px; padding-inline-start: 2px; pointer-events: none; }
  [dir="rtl"] .harita-lejant { align-self: flex-end; }
  /* Sayaç kartı güneydoğu boş köşesine (fiziksel sağ alt; Dari'de de aynı köşe). */
  .harita-sayac {
    position: absolute; z-index: 1; inset-block-end: 20px; inset-inline-end: 22px; max-inline-size: min(46%, 320px);
    padding: 11px 14px 10px; border: 1px solid var(--h-cizgi); border-radius: 4px;
    background: color-mix(in srgb, var(--h-zemin) 86%, transparent);
  }
  [dir="rtl"] .harita-sayac { inset-inline-end: auto; inset-inline-start: 22px; }
  .harita-sayac-ic { flex-direction: column; align-items: stretch; gap: 7px; }
  .harita-sayac-satir { gap: 20px; }
  .harita-sayac-hucre { flex-direction: column; gap: 2px; }
  .harita-sayac-hucre + .harita-sayac-hucre::before { display: none; }
  .harita-sayac-hucre b { font-size: 24px; }
  .harita-diger { margin-inline-start: 0; border-block-start: 1px solid var(--h-cizgi-soluk); padding-block-start: 6px; font-size: 10px; }
  .harita-sayac.bos { max-inline-size: min(52%, 260px); }
}

/* --- hareket -------------------------------------------------------------- */
@keyframes harita-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes harita-ciz { to { stroke-dashoffset: 0; } }
@keyframes harita-cik { from { scale: .2; } to { scale: 1; } }
@keyframes harita-akis { to { stroke-dashoffset: calc(-9px * var(--k)); } }
@keyframes harita-nabiz { 0% { transform: scale(1); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes harita-nabiz-kucuk { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes harita-don { to { transform: rotate(360deg); } }
@keyframes harita-balon-ac { from { opacity: 0; translate: -50% calc(-100% - var(--r, 4px) - 6px); } }
@media (prefers-reduced-motion: reduce) {
  .harita-sehir.aktif .harita-nokta::before, .harita-akan, .harita-lejant .lejant-aktif::after { display: none; }
  .harita-rota, .harita-sehir, .harita-nokta, .harita-etiket, .harita-iller path, .harita-sinir-isik, .harita-balon { animation: none; opacity: 1; }
  .harita-sinir { animation: none; stroke-dashoffset: 0; }
  .harita-sehir.merkez .harita-nokta::after { animation: none; }
}