.language-switcher {
  position: relative;
  flex: 0 0 auto;
}

.language-switcher > summary {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: inherit;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

.language-switcher > summary::-webkit-details-marker { display: none; }
.language-switcher > summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.language-switcher[open] > summary { background: #fff; color: #071a31; }

.language-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 8px;
  border: 1px solid #dce3e9;
  border-radius: 12px;
  background: #fff;
  color: #11253a;
  box-shadow: 0 18px 42px rgba(6, 21, 40, .18);
}

[dir="rtl"] .language-menu { right: auto; left: 0; }
.language-menu > a,
.language-menu > span {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.language-menu > a:hover,
.language-menu > a.is-active { background: #eef5f8; color: #075d77; }
.language-menu > span.is-coming { color: #8a98a7; cursor: not-allowed; }
.language-menu small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 820px) {
  .language-switcher > summary { width: 38px; height: 38px; border-radius: 9px; }
  .language-menu { position: fixed; top: 68px; right: 12px; left: auto; width: min(240px, calc(100vw - 24px)); }
  [dir="rtl"] .language-menu { right: auto; left: 12px; }
}

/* Koyu baslikta (ana sayfa) dil kutusu, yanindaki sepet/favori/menu
   butonlariyla ayni gorunumu almali; beyaz dolgu orada siritiyordu. */
.hero-header .language-switcher > summary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.52);
  background: transparent;
}
.hero-header .language-switcher > summary:hover {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
}
.hero-header .language-switcher[open] > summary {
  background: #fff;
  color: #071a31;
  border-color: #fff;
}