/* Harita alanı: tuvalin kabı (kapsayıcı sorgusu adı `harita`; kaplamaların eşikleri haritanın
   kendi genişliğine bakar, sağ panel açıkken de doğru), tuvalin imleçleri ve bütün kaplamaların
   ortak yüzey değişkenleri (docs/diyar/gorsel/HUD.md). Kaplamalar yalnız bu değişkenleri ve
   tema.css belirteçlerini kullanır; renk sabiti yazılmaz. */

.harita-alani {
  --hud-yuzey: var(--kaplama);
  --hud-golge: var(--golge-2);
  --hud-yazi-serif: var(--aile-serif);
  --hud-yazi-sans: var(--aile-sans);
  --hud-dokun: 36px;                        /* denetim boyu; dokunmatikte --dokunma-mobil */
  position: relative;
  overflow: hidden;
  background: var(--zemin-0);
  min-width: 0;
  container: harita / inline-size;
}
#harita { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none;
  background: var(--zemin-1); }
#harita.suruklen { cursor: grabbing; }
#harita.ustunde { cursor: pointer; }

/* simge kabı: satır içi SVG'yi metnin ortasına oturtur */
.simge-kap { display: inline-flex; flex: none; font-style: normal; line-height: 0; }

/* yalnız ekran okuyucu için (görsel olarak gizli) */
.gizli-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

@media (pointer: coarse) { .harita-alani { --hud-dokun: var(--dokunma-mobil); } }
@container harita (max-width: 699px) { .harita-alani { --hud-dokun: var(--dokunma-mobil); } }
@media (prefers-reduced-motion: reduce) {
  .harita-alani *, .harita-alani *::before { animation-duration: .01ms !important;
    transition-duration: .01ms !important; }
}