/* Harita üst şeritleri. Sol üst: tek ince şerit (marka, bağlantı noktası, Hesap, Odalar). Sağ
   üst: "Harita: Normal ▾" ve "Görünüm ▾" menü düğmeleri (menü kutuları css/harita/mod.css) ve
   küçük TR | EN seçici. Düğmelerin ortak biçimi burada: sıcak yüzey, 1 px kenar, 4 px köşe,
   parlama yok. Eşikler haritanın kendi genişliğine bakar: < 900 px düğme etiketleri ve Hesap /
   Odalar yazıları ekran okuyucuya kalır (yalnız simge), < 760 px marka yalnız logo, < 700 px
   sağ şerit ikinci satıra iner (menüler tam genişlik, denetimler 40 px). Panel düğmesi:
   css/harita/kontrol.css. */

/* ortak düğme biçimi (üst şerit, denetimler, tarih çubuğu, yardım) */
.hud-dugme, .hud-simge-dugme, .harita-kontrol button, .panel-ac, .tarih-cubuk button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--hud-dokun);
  min-width: var(--hud-dokun);
  padding: 0 10px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: var(--hud-golge);
  color: var(--yazi-1);
  font: 600 13px/1 var(--hud-yazi-sans);
  transform: none;
}
.hud-dugme:hover, .hud-simge-dugme:hover, .harita-kontrol button:hover, .panel-ac:hover,
.tarih-cubuk button:hover { background: var(--zemin-2); border-color: var(--yazi-3); }
.hud-dugme:focus-visible, .hud-simge-dugme:focus-visible, .harita-kontrol button:focus-visible,
.panel-ac:focus-visible, .tarih-cubuk button:focus-visible, .mod-secici button:focus-visible,
.menu-liste button:focus-visible, .mn-satir:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 2px;
}
.hud-dugme[aria-expanded='true'], .harita-kontrol button[aria-pressed='true'],
.hud-simge-dugme[aria-expanded='true'] { background: var(--zemin-2); border-color: var(--vurgu);
  color: var(--vurgu); }
.hud-dugme .simge-kap, .hud-baglanti .simge-kap { color: var(--yazi-2); }
.hud-etiket { color: var(--yazi-3); font-weight: 500; }
.hud-dugme b { font: 600 14.5px/1 var(--hud-yazi-serif); color: var(--yazi-1); }

/* sol üst şerit */
.hud-sol {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  height: var(--hud-dokun);
  padding: 0 0 0 10px;
  border: 0;                       /* kenar iç gölgeyle: içindeki düğmeler tam 40 px */
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: inset 0 0 0 1px var(--cizgi), var(--hud-golge);
}
/* marka bağlantısı şeridin tam boyunda (dokunma hedefi 36 / 40 px; yalnız logoyken de geniş) */
.hud-marka { display: inline-flex; align-items: center; align-self: stretch; gap: 8px;
  min-width: var(--hud-dokun); color: var(--yazi-1); padding-right: 6px; white-space: nowrap; }
.hud-marka b { font: 600 15.5px/1 var(--hud-yazi-serif); }
.hud-marka span { font: italic 400 13.5px/1 var(--hud-yazi-serif); color: var(--yazi-3); }
.hud-marka:focus-visible, .hud-baglanti:focus-visible { outline: 2px solid var(--odak);
  outline-offset: 2px; border-radius: var(--yaricap-1); }
.hud-baglanti {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 6px;
  padding: 0 12px;
  border-left: 1px solid var(--cizgi);
  color: var(--yazi-2);
  font: 500 13px/1 var(--hud-yazi-sans);
  white-space: nowrap;
}
.hud-baglanti:hover { color: var(--yazi-1); background: var(--zemin-2); }
.hud-baglanti:last-child { border-radius: 0 var(--yaricap-2) var(--yaricap-2) 0; }
.hud-baglanti:hover .simge-kap { color: var(--yazi-1); }

/* bağlantı noktası: panel/panel.js metni ve sınıfı (bagli, bekliyor, koptu) yazar */
#baglanti.rozet {
  display: inline-block;
  align-self: stretch;
  width: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0;
  position: relative;
}
#baglanti.rozet::before {
  left: 50%;
  margin: -4px 0 0 -4px;
  width: 8px;
  height: 8px;
  box-shadow: none;
  animation: none;
  background: var(--yazi-3);
}
#baglanti.bagli::before { background: var(--iyi); }
#baglanti.bekliyor::before { background: var(--uyari); }
#baglanti.koptu::before { background: var(--kotu); }
#baglanti.koptu {            /* kopunca durum sözle de görünür */
  width: auto;
  padding: 0 8px 0 20px;
  font: 600 12.5px var(--hud-yazi-sans);
  line-height: calc(var(--hud-dokun) - 2px);
  color: var(--kotu);
}
#baglanti.koptu::before { left: 8px; margin-left: 0; }

/* canlı izleyici sayısı (panel/panel.js; bağlı değilken gizli): genişte şeridin altında, logo
   hizasında "● 3 kişi izliyor"; < 900 px'te üst ortadaki manşet sütunuyla çakışmasın diye
   şeridin içinde yalnız "● 3" (cümle ekran okuyucuya ve ipucuna kalır) */
.hud-izleyici {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: inset 0 0 0 1px var(--cizgi), var(--hud-golge);
  color: var(--yazi-2);
  font: 500 12.5px/1 var(--hud-yazi-sans);
  white-space: nowrap;
}
.hud-izleyici[hidden] { display: none; }
.hud-izleyici b { display: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-izleyici i { width: 7px; height: 7px; border-radius: 50%; background: var(--iyi);
  animation: izleyici-nabiz 2.4s ease-out infinite; }
@keyframes izleyici-nabiz {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iyi) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .hud-izleyici i { animation: none; } }

/* sağ üst */
.hud-sag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-sag .dil-secici {
  position: static;
  gap: 0;
  height: var(--hud-dokun);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: inset 0 0 0 1px var(--cizgi), var(--hud-golge);
  backdrop-filter: none;
}
.hud-sag .dil-dugme {
  min-width: var(--hud-dokun);
  height: var(--hud-dokun);
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--yazi-2);
  font: 600 12.5px/1 var(--hud-yazi-sans);
  letter-spacing: .03em;
}
.hud-sag .dil-dugme:hover { background: var(--zemin-2); color: var(--yazi-1); }
.hud-sag .dil-dugme.secili { background: var(--zemin-2); color: var(--yazi-1);
  box-shadow: inset 0 -2px 0 var(--vurgu); }
.hud-sag .dil-dugme:focus-visible { outline: 2px solid var(--odak); outline-offset: 1px; }
/* ses kutusu (ses/dugme.js): dil seçicinin eşi; kapalı düğme soluk ve üstü çizili (çizgi
   ::before'da; ::after ipucu balonunun, css/bilesen/ipucu.css). Kutu taşırmaz: ipucu görünür. */
.ses-secici {
  display: flex;
  height: var(--hud-dokun);
  border-radius: var(--yaricap-2);
  background: var(--hud-yuzey);
  box-shadow: inset 0 0 0 1px var(--cizgi), var(--hud-golge);
}
.ses-secici button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hud-dokun);
  height: var(--hud-dokun);
  padding: 0;
  border: 0;
  background: none;
  color: var(--yazi-2);
}
.ses-secici button:first-child { border-radius: var(--yaricap-2) 0 0 var(--yaricap-2); }
.ses-secici button:last-child { border-radius: 0 var(--yaricap-2) var(--yaricap-2) 0; }
.ses-secici button + button { border-left: 1px solid var(--cizgi); }
.ses-secici button:hover { background: var(--zemin-2); color: var(--yazi-1); }
.ses-secici button:focus-visible { outline: 2px solid var(--odak); outline-offset: -2px; }
.ses-secici button[aria-pressed='false'] { color: var(--yazi-3); }
.ses-secici button[aria-pressed='false']::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 880px) {
  .hud-sag { right: calc(var(--hud-dokun) + 20px); }     /* panel düğmesinin soluna */
}
@container harita (max-width: 899px) {
  .hud-etiket, .hud-baglanti span, .hud-marka span { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hud-baglanti { padding: 0 10px; }
  .hud-izleyici { position: static; align-self: stretch; height: auto; gap: 6px; padding: 0 10px;
    border-left: 1px solid var(--cizgi); border-radius: 0; background: none; box-shadow: none; }
  .hud-izleyici b { display: inline; }
  .hud-izleyici span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
}
@container harita (max-width: 699px) {
  .hud-sag { top: calc(var(--hud-dokun) + 20px); left: 12px; right: 12px; }
}
@container harita (max-width: 759px) {
  .hud-marka b { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
}