/* =====================================================================
   DİL SEÇİCİ (#langMenu) · 26.10.2026
   Sorun: telefonda genel .menu kuralı (index.html, ≤ 680 px) alttan sabitlenmiş bir sayfa veriyor (left/right 12 px,
   bottom 92 px + güvenli alan, max-height 62dvh); js/i18n.js menu() satır içi top verdiği için kutu düğmenin altından
   alt çubuğa kadar geriliyordu: 4 satırlık içerik, 528 px boş koyu kutu.
   Karar: her ekranda düğmeye bağlı, içeriği kadar küçük bir açılır kutu (iOS'taki çekme menüsü gibi). Sağ kenarı
   dil düğmesinin sağ kenarına, üstü düğmenin 8 px altına hizalı (js/i18n.js --lm-top / --lm-right). Satır 44 px,
   kısa kod rozeti + dilin kendi adı + seçili dilde onay. Arkasında saydam bir dokunma katmanı (#langMenuScrim):
   dışarı dokunuş yalnız menüyü kapatır, alttaki öğeye geçmez.
   Kapsam: yalnız #langMenu ve #langMenuScrim; öteki .menu öğelerine dokunmaz.
   ===================================================================== */
#langMenu{
  position:fixed;top:var(--lm-top,56px);right:var(--lm-right,12px);left:auto;bottom:auto;z-index:95;
  width:max-content;min-width:208px;max-width:calc(100vw - 24px);
  max-height:calc(100dvh - var(--lm-top,56px) - 12px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:18px;
  background:var(--surface-2);background:color-mix(in srgb,var(--surface-2) 96%,transparent);   /* neredeyse örtücü: alttaki başlık ve arama kutusu satırların arkasından okunmaz */
  -webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
  box-shadow:inset 0 .5px 0 var(--glass-edge),inset 0 0 0 .5px var(--glass-rim),var(--sh-lg);
  transform-origin:top right;animation:lmIn .18s var(--spring) both}
#langMenu.out{animation:lmOut .12s var(--ease) both;pointer-events:none}
@keyframes lmIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lmOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px) scale(.97)}}

#langMenu .mi{min-height:44px;padding:0 12px 0 9px;gap:12px;border-radius:12px;justify-content:flex-start;
  font-size:15px;line-height:1.2;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#langMenu .mi b{flex:none;display:inline-grid;place-items:center;width:32px;height:22px;border-radius:7px;
  background:var(--fill);color:var(--muted);font:600 11px/1 var(--f-mono);letter-spacing:.05em}
#langMenu .mi span{flex:1;min-width:0;white-space:nowrap;text-align:left}
#langMenu .mi i{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px;color:var(--accent)}
#langMenu .mi i svg{width:18px;height:18px}
#langMenu .mi[aria-checked="true"]{font-weight:600}
#langMenu .mi[aria-checked="true"] b{background:var(--accent);color:var(--on-accent)}
@media (hover:hover){#langMenu .mi:hover{background:var(--fill)}}
#langMenu .mi:active{background:var(--fill-2)}
#langMenu .mi:focus{outline:none}
#langMenu .mi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}

#langMenuScrim{position:fixed;inset:0;z-index:94;background:transparent;-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){#langMenu,#langMenu.out{animation:none}}