/* ═══════════════════════════════════════════════════════════
   Herta — kontrol chip'leri (ses + dil)
   İki denetim de kendi zeminine oturur: içerikten ayrışan,
   ölçülü bir "arayüz" katmanı. Zemin, bulunduğu yüzeye göre
   koyudan açığa döner (header açık, mobil menü/footer koyu).
   ═══════════════════════════════════════════════════════════ */

.util {
  display: flex;
  align-items: center;
  gap: 8px;
  --chip-bg: rgba(0, 0, 0, 0.045);
  --chip-bg-hover: rgba(0, 0, 0, 0.08);
}
.menu .util,
.footer .util,
.dock .util {
  --chip-bg: rgba(255, 255, 255, 0.09);
  --chip-bg-hover: rgba(255, 255, 255, 0.15);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: clamp(26px, 1.95vw, 31px);
  padding: 0 clamp(9px, 0.78vw, 12px);
  background: var(--chip-bg);
  border: 0;
  color: currentColor;
  font: inherit;
  cursor: pointer;
  transition: background 0.45s var(--ease-out);
}
.chip:hover { background: var(--chip-bg-hover); }
.chip:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.chip--lang { cursor: default; }

/* ── ikonlar ─────────────────────────────────────────────── */
.ico {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.5;
  transition: opacity 0.4s var(--ease-out);
}
.chip:hover .ico { opacity: 0.85; }
.ico circle,
.ico ellipse,
.ico path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ses chip'i: hoparlör ikonu + durum göstergesi olarak dalga */
.chip--sound { gap: 8px; padding-inline: clamp(8px, 0.7vw, 11px); }
.chip--sound .wave { width: clamp(22px, 1.75vw, 28px); }
.chip--sound.is-on .ico { opacity: 1; }

@media (max-width: 860px) {
  .util { gap: 7px; }
  .chip { height: 28px; }
}

/* ── dock içindeki denetimler: daha kompakt, koyu zemin ──── */
.util--dock { gap: 6px; margin-left: clamp(10px, 1vw, 16px); position: relative; }
.util--dock::before {
  content: "";
  position: absolute;
  left: calc(clamp(10px, 1vw, 16px) * -0.5);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.2;
}
.util--dock .chip { height: 26px; padding-inline: 8px; gap: 7px; }
.util--dock .chip--sound .wave { width: 22px; }
.util--dock .ico { width: 12px; height: 12px; }
.util--dock .lang__btn { font-size: 10.5px; }