/* Açılır menü kutuları (üst sağ şeridin altında): harita modu menüsü (#mod-secici: her mod bir
   satır; simge, ad, tek cümle açıklama) ve görünüm menüsü (#kip-secici, #ayrinti-secici:
   iki bölüm, her seçenek açıklamalı). Açma / kapatma hud/acilir.js'te. Kutu sağ şeride göre
   konumlanır; < 700 px'te şerit ikinci satıra indiğinden kutu tam genişliktir. */

.hud-menu-kutu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  width: min(340px, calc(100cqw - 24px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-2);
  background: var(--zemin-0);
  box-shadow: var(--hud-golge);
  scrollbar-width: thin;
}
.mod-secici, .menu-liste { display: flex; flex-direction: column; gap: 1px; }
.mod-secici button, .menu-liste button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--yaricap-1);
  background: none;
  box-shadow: none;
  color: var(--yazi-1);
  text-align: left;
}
.mod-secici button:hover, .menu-liste button:hover { background: var(--zemin-1); }
.mod-secici button.acik, .menu-liste button[aria-pressed='true'] {
  background: var(--zemin-2);
  box-shadow: inset 3px 0 0 var(--vurgu);
}
.mod-secici .simge-kap, .menu-liste .simge-kap { margin-top: 1px; color: var(--yazi-2); }
.mod-secici .acik .simge-kap, .menu-liste [aria-pressed='true'] .simge-kap {
  color: var(--vurgu); }
.mod-secici span, .menu-liste span { display: flex; flex-direction: column; gap: 2px;
  min-width: 0; }
.mod-secici b, .menu-liste b { font: 600 14.5px/1.25 var(--hud-yazi-serif); }
.mod-secici small, .menu-liste small { font: 400 12px/1.35 var(--hud-yazi-sans);
  color: var(--yazi-2); }
.menu-baslik { margin: 8px 10px 4px; font: 600 12px/1.2 var(--hud-yazi-serif);
  font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--yazi-3); }
.menu-baslik:first-child { margin-top: 4px; }
.menu-not { margin: 4px 10px 6px; padding-top: 6px; border-top: 1px solid var(--cizgi);
  font: 400 12px/1.3 var(--hud-yazi-sans); color: var(--yazi-3); }

@container harita (max-width: 699px) {
  .hud-menu-kutu { left: 0; right: 0; width: auto; max-height: calc(100vh - 130px); }
}