/* Dil seçici — navbar hapının dışında, "Giriş Yap"ın sağında duran ayrı bir anahtar.
   Bayraklar emoji değil satır içi SVG: emoji bayraklar Windows'ta "TR"/"GB"
   harflerine düşüyor ve düğme bozuk görünüyor. */
.dil{
  position:relative;flex:none;align-self:center;pointer-events:auto;
  display:inline-flex;align-items:center;
  height:52px;padding:4px;margin-left:12px;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px -14px rgba(4,8,20,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .35s ease, box-shadow .35s ease;
  animation:headDrop .8s cubic-bezier(.2,.7,.2,1) .18s both;
}
.sitehead.scrolled .dil{
  background:rgba(255,255,255,.85);
  box-shadow:0 18px 48px -18px rgba(31,20,74,.5), inset 0 1px 0 rgba(255,255,255,.95);
}

/* kayan başlık — seçili tarafın altında durur */
.dil-kaydir{
  position:absolute;top:4px;left:4px;z-index:0;
  width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;
  background:linear-gradient(135deg,#2E86C8,#45A4DE 55%,#5FC0EA);
  box-shadow:0 8px 18px -7px rgba(46,134,200,.9), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .42s cubic-bezier(.34,1.56,.64,1);
}
.dil[data-dil="en"] .dil-kaydir{transform:translateX(100%)}
/* geçişte hafif esneme — plastik anahtar hissi */
.dil.oynuyor .dil-kaydir{animation:dilEsne .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes dilEsne{
  0%  {transform:var(--dilT,translateX(0)) scaleX(1)}
  45% {transform:var(--dilT,translateX(0)) scaleX(1.14)}
  100%{transform:var(--dilT,translateX(0)) scaleX(1)}
}
.dil[data-dil="en"].oynuyor{--dilT:translateX(100%)}

/* seçenek: bayrak + kod */
.dil-o{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  padding:0 13px;height:44px;border-radius:999px;
  font-family:var(--font-display,'Inter',system-ui,sans-serif);
  font-weight:700;font-size:12px;letter-spacing:.08em;
  color:#5C6B85;line-height:1;user-select:none;white-space:nowrap;
  transition:color .3s ease;
}
.dil-o svg{
  width:22px;height:22px;flex:none;border-radius:50%;
  box-shadow:0 2px 6px -1px rgba(14,10,42,.35), 0 0 0 1.5px rgba(255,255,255,.75);
  filter:saturate(.75);opacity:.65;
  transition:filter .3s ease, opacity .3s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}
/* seçili taraf: yazı beyaz, bayrak tam renkli ve bir tık büyük */
.dil[data-dil="tr"] .dil-o[data-l="tr"],
.dil[data-dil="en"] .dil-o[data-l="en"]{color:#fff}
.dil[data-dil="tr"] .dil-o[data-l="tr"] svg,
.dil[data-dil="en"] .dil-o[data-l="en"] svg{filter:saturate(1.1);opacity:1;transform:scale(1.09)}
.dil:hover .dil-o svg{opacity:.85}
.dil:hover .dil-o[data-l="tr"] svg,
.dil:hover .dil-o[data-l="en"] svg{opacity:1}
.dil:focus-visible{outline:2px solid #45A4DE;outline-offset:3px}

/* 900-1080 arasi: navbar linkleri hala acik, ikisi birden ekrana sigmiyordu.
   Bu bantta yalnizca bayraklar kalsin. */
@media (min-width:901px) and (max-width:1080px){
  .dil-o span{display:none}
  .dil-o{padding:0 11px}
}
/* En dar bant (901-960): navbar linkleri hala acik ve yer milimetrik — anahtar da kuculur. */
@media (min-width:901px) and (max-width:960px){
  .dil{height:46px;margin-left:8px}
  .dil-o{height:38px;padding:0 9px}
  .dil-o svg{width:19px;height:19px}
}
/* 901-935: navbar linklerinin gizlendigi esigin hemen ustu, son birkac piksel */
@media (min-width:901px) and (max-width:935px){
  .dil{margin-left:5px;padding:3px}
  .dil-o{padding:0 5px}
  .dil-o svg{width:18px;height:18px}
}
@media (max-width:900px){
  .dil{height:46px;margin-left:8px}
  .dil-o{height:38px;padding:0 10px;gap:6px;font-size:11px}
  .dil-o svg{width:19px;height:19px}
}
@media (max-width:560px){
  .dil-o span{display:none}          /* dar ekranda yalnizca bayraklar */
  .dil-o{padding:0 9px}
}

/* --- Eski ust bar (header.topbar) icin daha kompakt varyant.
       O sayfalar koyu/acik tema arasinda gecebiliyor; renkleri
       .icon-btn ile ayni kaynaktan aliyoruz ki iki temada da otursun. --- */
.topbar .dil{
  height:36px;padding:3px;margin-left:0;align-self:auto;
  background:rgba(11,11,59,.6);border:1px solid var(--line,rgba(255,255,255,.18));
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;
}
html[data-theme="light"] .topbar .dil{
  background:rgba(255,255,255,.85);border-color:rgba(74,43,184,.25);
}
.topbar .dil .dil-kaydir{top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px)}
.topbar .dil .dil-o{height:30px;padding:0 10px;gap:6px;font-size:11px;color:#C9C4E8}
html[data-theme="light"] .topbar .dil .dil-o{color:#5A5478}
.topbar .dil[data-dil="tr"] .dil-o[data-l="tr"],
.topbar .dil[data-dil="en"] .dil-o[data-l="en"]{color:#fff}
html[data-theme="light"] .topbar .dil[data-dil="tr"] .dil-o[data-l="tr"],
html[data-theme="light"] .topbar .dil[data-dil="en"] .dil-o[data-l="en"]{color:#fff}
.topbar .dil .dil-o svg{width:18px;height:18px;box-shadow:0 2px 5px -1px rgba(0,0,0,.4), 0 0 0 1.5px rgba(255,255,255,.6)}
@media (max-width:900px){
  .topbar .dil .dil-o span{display:none}
  .topbar .dil .dil-o{padding:0 8px}
}

/* İngilizce secili acilislarda: sozluk yuklenip metinler degistirilene kadar
   govdeyi gizle. Aksi halde once Turkce metin gorunup sonra degisiyor. */
html.dil-bekle body{visibility:hidden}