/* ==========================================================================
   STMACH Robotics - header.css
   .topbar + .header (sticky) + .mega (mega menu) + .drawer (mobil)
   Mega menu panelleri categories.json'dan TEK SEFER render edilir; mobil
   drawer AYNI DOM'u tasir - liste ikinci kez basilmaz.
   ========================================================================== */

/* ---------------------------------------------------------------- TOPBAR */
.topbar {
  background: linear-gradient(90deg, var(--st-orange) 0%, var(--st-orange-2) 100%);
  color: var(--st-white);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 40px;
  flex-wrap: wrap;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--st-white);
  font-weight: 500;
  white-space: nowrap;
}
.topbar__link:hover { color: var(--st-white); text-decoration: underline; }
.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.topbar__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-pill);
  color: var(--st-white);
  transition: background var(--dur) var(--ease);
}
.topbar__social-link:hover {
  background: color-mix(in srgb, var(--st-white) 22%, transparent);
  color: var(--st-white);
}

@media (max-width: 767px) {
  .topbar__inner { justify-content: center; }
  .topbar__list--contact .topbar__link--mail { display: none; }
}

/* ---------------------------------------------------------------- HEADER */
/* SAYFA AKISINDA YER KAPLAMAZ (fixed): ana sayfada slider'in uzerinde
   seffaf durabilmesi icin. Icerik basligin altindan baslasin diye <main>
   basliga esit ust bosluk alir; hero ise ayni kadar negatif ust bosluk ile
   yukari cekilip basligin ALTINA girer (bkz. hero.css .hero).
   Boylece :has() gibi yeni bir secicilere bagimlilik olmadan hem ic
   sayfalar dogru hizalanir hem slider tam ekran kalir. */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);

  /* VARSAYILAN DOLU. Seffaflik yalnizca slider'i olan sayfada acilir
     (asagi bak): ic sayfalarda ustte acik zemin var, seffaf baslikta
     beyaz yazi beyaz zemine dusup okunmaz oluyordu. */
  background: var(--st-white);
  border-block-end: 1px solid var(--st-line);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Baslik sayfa akisinda yer kaplamadigi icin icerik kendi bosluguyla
   basliyor; --header-h'i main.js gercek yukseklikten yaziyor. */
main { padding-block-start: var(--header-h); }

.header.is-stuck { box-shadow: var(--shadow-md); }

/* ------------------------------------------- SEFFAF DURUM (slider uzeri) */
/* SADECE hero'lu sayfada ve yalnizca sayfa tepedeyken.
   .is-mega-open da disarida: mega panel beyaz, arkasindaki serit seffaf
   kalirsa panel havada duruyormus gibi gorunuyor. */
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) {
  background: transparent;
  border-block-end-color: transparent;
  box-shadow: none;
}

body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .nav__link,
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .langpick__toggle,
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .burger {
  color: var(--st-white);
}

/* Acilir liste HER ZAMAN beyaz kart; yalnizca tetikleyici seffaf zemine
   uyar. Menu de seffaf olsaydi slider uzerinde okunmazdi. */
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .langpick__toggle {
  border-color: color-mix(in srgb, var(--st-white) 35%, transparent);
}
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .langpick__toggle:hover,
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .langpick__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--st-white) 16%, transparent);
  border-color: color-mix(in srgb, var(--st-white) 55%, transparent);
}

/* Logo koyu renkli; seffaf zeminde okunmasi icin beyaza cevrilir.
   brightness(0) once tamamen siyaha indirir, invert(1) beyaza cevirir -
   SVG'nin ic renklerinden bagimsiz calisir. */
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .header__logo {
  filter: brightness(0) invert(1);
}

body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .nav__link:hover,
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .nav__toggle[aria-expanded="true"] {
  color: var(--st-white);
  background: color-mix(in srgb, var(--st-white) 16%, transparent);
}

body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .nav__link[aria-current="page"],
body:has(.hero) .header:not(.is-stuck):not(.is-mega-open) .nav__link[data-section="active"] {
  color: var(--st-white);
}

/* TEK SERIT, TAM GENISLIK.
   Sayfa kapsayicisi (container-st) 1280 px'de sabit ve 1216 px icerik
   veriyordu; dokuz menu ogesi + logo + dil + CTA Turkce'de 1398 px,
   Rusca'da 1655 px istiyor, yani ekran ne kadar genis olursa olsun
   sigmiyordu. Baslik bu yuzden kapsayiciya degil EKRANA yaslanir.

   Mega panelin konumlandirma baglami da burasi: panel menu ogesinin dar
   kutusunda degil serit genisliginde tam bant olarak acilir. */
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  /* 1440 px'te Turkce baslik iki piksel farkla ikinci satira dusuyordu;
     bosluk bu yuzden 1.6vw'den 1.2vw'ye cekildi. */
  gap: clamp(12px, 1.2vw, var(--space-6));
  min-block-size: var(--header-h);
  padding-inline: clamp(var(--space-4), 2.2vw, var(--space-7));
}

/* IKI SATIR - yalnizca gerektiginde.
   Tek satir her zaman mumkun degil: Rusca'da logo + dokuz oge + dil +
   "Запросить предложение" 1607 px istiyor, 1440 px ekranda 1362 px yer var
   ve fazlasi sessizce kirpiliyordu (baslik fixed oldugu icin sayfa
   tasmiyor, CTA sadece gorunmez oluyordu).
   Kirilma noktasini genislige gore TAHMIN ETMEK yanlis olurdu - ihtiyac
   dile gore degisiyor. main.js gercek genislikleri olcup bu sinifi
   ekliyor (bkz. initHeaderSatir). */
.header--iki-satir .header__inner { flex-wrap: wrap; }
.header--iki-satir .nav {
  order: 3;
  flex-basis: 100%;
  border-block-start: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.header--iki-satir .nav__list { justify-content: center; }

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  margin-inline-end: auto;
}
.header__logo {
  inline-size: auto;
  block-size: 34px;
}
/* "ROBOTICS" logonun parcasi degil - ayri tipografik oge */
.header__wordmark {
  display: none;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--st-line);
  color: var(--st-slate-60);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (min-width: 480px) { .header__wordmark { display: block; } }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* -------------------------------------------------------------- ANA MENU */
.nav { display: none; }
@media (min-width: 1100px) { .nav { display: block; } }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0;                    /* boslugu link'in kendi dolgusu veriyor */
}
/* Konumlandirma baglami .header__inner - mega panel header genisliginde
   aciliyor. Burada position:relative olsaydi panel menu ogesinin dar
   kutusuna hapsolurdu (olculdu: 103px genislik). */
.nav__item { position: static; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Yatay dolgu ekranla birlikte daralir: dokuz oge + logo + dil + CTA
     dar masaustunde ancak boyle tek satirda kaliyor. */
  padding: var(--space-3) clamp(8px, 0.85vw, 14px);
  border-radius: var(--radius);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--st-orange-text); background: var(--st-orange-soft); }
/* Aktif sayfa (aria-current) VE aktif bolum (data-section) ayni gorunur.
   Urun/kategori detay sayfalarinda ust menude ilgili bolum isaretli kalir. */
.nav__link[aria-current="page"],
.nav__link[data-section="active"] { color: var(--st-orange-text); }

/* aktif menu alt cizgisi */
.nav__link[aria-current="page"]::after,
.nav__link[data-section="active"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: 6px;
  block-size: 2px;
  background: var(--st-orange);
}

.nav__chevron {
  inline-size: 12px;
  block-size: 12px;
  transition: transform var(--dur) var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.nav__toggle[aria-expanded="true"] { color: var(--st-orange-text); background: var(--st-orange-soft); }

/* ------------------------------------------------------------- MEGA MENU */
/* Sadece :hover ile acilmaz - JS click/klavye ile aria-expanded yonetir. */
.mega {
  position: absolute;
  /* Buton ile panel arasinda BOSLUK BIRAKMA: 8px'lik aralik fare oradan
     gecerken mouseleave tetikleyip paneli kapatiyordu. Gorsel aralik
     panelin kendi ust bosluguyla veriliyor. */
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 2;
  margin-block-start: 8px;
  padding: var(--space-6);
  background: var(--st-white);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Guvenlik agi: kategori sayisi artarsa panel ekrani tasirmasin. */
  max-block-size: min(72vh, 620px);
  overflow-y: auto;
}
.mega[hidden] { display: none; }

/* Cocuklu duz ogeler (Kurumsal) hizmet paneliyle ayni .mega--2col bicimini
   kullanir; ayri bir stil yok (bkz. _Layout.cshtml). */

/* Urun paneli tek cocuk (.mega2) tasir; izgara yalnizca hizmetler
   panelinde gerekiyor. */
.mega__cols { display: block; }

/* Hizmetler paneli: iki sutun, her linkin altinda kisa ozet. */
.mega--2col .mega__cols {
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega__col { min-inline-size: 0; }

.mega__links { display: grid; gap: 2px; }

.mega__link {
  display: block;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mega__link:hover { color: var(--st-orange-text); background: var(--st-orange-soft); }

/* Hizmetler panelinde baslik altindaki tek cumlelik ozet */
.mega__link-sum {
  display: block;
  margin-block-start: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.mega--2col .mega__link { padding-block: var(--space-2); }
.mega--2col .mega__link strong { display: block; color: var(--text-strong); font-weight: 600; }
.mega--2col .mega__link:hover strong { color: var(--st-orange-text); }
.mega--2col .mega__links { gap: var(--space-1); }

/* ------------------------------------------------- URUN PANELI (2 BOLME) */
/* Solda kategoriler, sagda yalnizca secili kategorinin urunleri. Panelin
   yuksekligi kategori sayisindan degil EN KALABALIK kategoriden gelir;
   yeni kategori eklemek duzeni bozmaz. */
.mega2 {
  display: grid;
  /* Ucuncu sutun onizleme fotografi. Urun listesi (1fr) daralmasin diye
     fotograf sutunu sabit araliktadir. */
  grid-template-columns: minmax(200px, 260px) 1fr minmax(220px, 300px);
  gap: var(--space-6);
  align-items: start;
}
/* Grupta hic fotograf yoksa sutun cizilmez (bkz. main.js renderPanel). */
.mega2--gorselsiz { grid-template-columns: minmax(200px, 260px) 1fr; }

.mega2__cats {
  display: grid;
  align-content: start;
  gap: 2px;
  /* Kategori sayisi artarsa panel buyumez, bu sutun kayar. */
  max-block-size: min(48vh, 400px);
  overflow-y: auto;
  padding-inline-end: var(--space-3);
  border-inline-end: 1px solid var(--st-line);
}

.mega2__cat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mega2__cat:hover,
.mega2__cat.is-active { color: var(--st-orange-text); background: var(--st-orange-soft); }

.mega2__cat-name { min-inline-size: 0; }

/* Kategorideki makine adedi - veri zaten elde, ek istek yok. */
.mega2__count {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mega2__cat.is-active .mega2__count { color: currentColor; }

.mega2__pane { min-inline-size: 0; }

.mega2__pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--st-line);
}
.mega2__pane-title { color: var(--text-strong); font-size: var(--fs-sm); font-weight: 700; }
.mega2__pane-title:hover { color: var(--st-orange-text); }

.mega2__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--st-orange-text);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.mega2__all .icon { inline-size: 14px; block-size: 14px; }

.mega2__links {
  display: grid;
  align-content: start;
  gap: 2px;
  max-block-size: min(48vh, 400px);
  overflow-y: auto;
}
/* Sekiz urunden uzun listeler iki sutuna bolunur; tek sutunda panel
   gereksiz uzuyordu. */
.mega2__pane--wide .mega2__links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}

.mega2__link {
  display: block;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mega2__link:hover { color: var(--st-orange-text); background: var(--st-orange-soft); }

.mega2__empty { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* --- onizleme fotografi ---
   Sutunu bastan sona dolduran kapak kart. Onceki hali 4:3'luk kucuk bir
   cerceveydi: urun listesi kadar uzun sutunda yukarida asili kaliyor,
   altinda bos alan biriyordu; ustelik contain yuzunden dikey
   fotograflarin iki yaninda beyaz bant vardi. */
.mega2__media {
  position: relative;
  display: block;
  /* .mega2 uzerindeki align-items: start bunu tepeye yapistirirdi. */
  align-self: stretch;
  /* Tek urunlu kategoride satir kisalinca kart ezilmesin. */
  min-block-size: 260px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--st-white);
  box-shadow: inset 0 0 0 1px var(--st-line);
}
.mega2__media-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* Kirpmali: kart tamamen dolar, beyaz bant kalmaz. */
  object-fit: cover;
  transition: transform 480ms var(--ease);
}
.mega2__media:hover .mega2__media-img { transform: scale(1.04); }
/* src bos oldugu ilk an kirik gorsel simgesi cizilmesin. */
.mega2__media-img:not([src]), .mega2__media-img[src=""] { visibility: hidden; }

.mega2__media-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: 4px;
  padding: var(--space-7) var(--space-4) var(--space-4);
  /* Fotograf acik da olsa yazi okunsun diye asagi dogru koyulasan perde. */
  background: linear-gradient(to top,
              color-mix(in srgb, var(--st-slate-dark) 92%, transparent) 0%,
              color-mix(in srgb, var(--st-slate-dark) 55%, transparent) 55%,
              transparent 100%);
  color: var(--st-white);
}
.mega2__media-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  /* Uzun makine adlari dort satira cikip perdeyi kartin %44'une buyutuyordu
     (olculdu); uc satirdan sonrasi kisaltilir. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.mega2__media-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--st-orange-ink);   /* koyu zeminde okunur turuncu */
  font-size: var(--fs-xs);
  font-weight: 600;
}
.mega2__media-cta .icon { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .mega2__media-cta .icon { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .mega2__media-img { transition: none; }
  .mega2__media:hover .mega2__media-img { transform: none; }
}

/* Dar ekranda mega menu zaten cizilmiyor (mobilde cekmece var); yine de
   izgara tek sutuna dusurulur ki ara genisliklerde tasma olmasin. */
@media (max-width: 1023px) {
  .mega2 { grid-template-columns: 1fr; }
  .mega2__cats { border-inline-end: 0; padding-inline-end: 0; }
  /* Tek sutuna dusen panelde fotograf listenin altinda kalirdi. */
  .mega2__media { display: none; }
}
/* Ara genislikte uc sutun sikisiyor: fotograf once dusen sutun olsun. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mega2 { grid-template-columns: minmax(180px, 230px) 1fr; }
  .mega2__media { display: none; }
}

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--st-line);
}
.mega__foot-note { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------- MOBIL MENU BUTONU */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--st-line);
  border-radius: var(--radius);
  color: var(--text-strong);
}
@media (min-width: 1100px) { .burger { display: none; } }
.burger:hover { border-color: var(--st-orange); color: var(--st-orange-text); }

.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }

/* ---------------------------------------------------------- MOBIL DRAWER */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-columns: 1fr min(380px, 88vw);
  pointer-events: none;
}
.drawer[hidden] { display: none; }

.drawer__backdrop {
  grid-column: 1;
  background: color-mix(in srgb, var(--st-slate-dark) 55%, transparent);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--dur) var(--ease);
}
.drawer__panel {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  background: var(--st-white);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }

.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--st-white);
  border-block-end: 1px solid var(--st-line);
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--st-line);
  border-radius: var(--radius);
  color: var(--text-strong);
}
.drawer__close:hover { border-color: var(--st-orange); color: var(--st-orange-text); }

.drawer__body { padding: var(--space-4) var(--space-5) var(--space-8); }

.drawer__foot {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-block-start: 1px solid var(--st-line);
  background: var(--bg-page);
}

/* akordeon - 3 kademeye kadar */
.acc__item { border-block-end: 1px solid var(--st-line); }

.acc__row { display: flex; align-items: stretch; }

.acc__link {
  flex: 1 1 auto;
  padding: var(--space-4) 0;
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}
/* Cekmecede baglanti olmayan baslik (acilir grup): metin dugmesi, baglanti
   gibi gorunur; tiklaninca acc__toggle ile ayni paneli acar. */
.acc__link--btn { background: none; border: 0; text-align: start; font: inherit; cursor: pointer; }
.acc__link--btn[aria-expanded="true"] { color: var(--st-orange-text); }

.acc__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  color: var(--text-muted);
}
.acc__toggle .icon { transition: transform var(--dur) var(--ease); }
.acc__toggle[aria-expanded="true"] { color: var(--st-orange-text); }
.acc__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.acc__panel { padding-block-end: var(--space-3); }
.acc__panel[hidden] { display: none; }

.acc__panel .acc__item { border-block-end: 0; }
.acc__panel .acc__link {
  padding-block: var(--space-2);
  padding-inline-start: var(--space-4);
  color: var(--text-muted);
  font-weight: 500;
}
.acc__panel .acc__link:hover { color: var(--st-orange-text); }
.acc__panel .acc__panel .acc__link { padding-inline-start: var(--space-6); }

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ DIL SECICI */
/* Temanin ozgun paketinde dil secici yoktu; cok dilli sitelerde gerekli.
   Mevcut baslik olculeriyle (44px dokunma alani, --st-line cerceve)
   ayni dilde tasarlandi. */
/* ------------------------------------------------------- DIL SECICI (baslik) */
/* Kisaltma seridi degil acilir liste: diller kendi adlariyla yazilir,
   secili olanin yaninda onay isareti durur ve baslik dil sayisindan
   BAGIMSIZ genislikte kalir (serit her yeni dilde ~38 px buyuyordu). */
.langpick {
  position: relative;
  display: none;
}
@media (min-width: 640px) { .langpick { display: block; } }

.langpick__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  block-size: 38px;
  padding-inline: var(--space-3);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.langpick__toggle:hover,
.langpick__toggle[aria-expanded="true"] {
  color: var(--st-orange-text);
  background: var(--st-orange-soft);
  border-color: var(--st-orange-soft);
}

.langpick__globe { inline-size: 16px; block-size: 16px; }
.langpick__chevron {
  inline-size: 12px;
  block-size: 12px;
  transition: transform var(--dur) var(--ease);
}
.langpick__toggle[aria-expanded="true"] .langpick__chevron { transform: rotate(180deg); }

/* Menu tetikleyicinin SAG kenarina hizali (RTL'de sol): baslik ekranin
   sagina yaslandigi icin sola hizali menu disari tasardi. */
.langpick__menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 3;
  min-inline-size: 190px;
  padding: var(--space-2);
  background: var(--st-white);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.langpick__menu[hidden] { display: none; }

.langpick__list { display: grid; gap: 2px; }

.langpick__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px var(--space-3);
  border-radius: var(--radius);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.langpick__item:hover { color: var(--st-orange-text); background: var(--st-orange-soft); }
.langpick__item.is-current { font-weight: 600; }
.langpick__check {
  inline-size: 16px;
  block-size: 16px;
  color: var(--st-orange-text);
}

/* -------------------------------------------------- DIL SERIDI (cekmece) */
.langs {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--st-line);
  border-radius: var(--radius);
}
@media (min-width: 640px) { .langs { display: inline-flex; } }

.langs__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 34px;
  block-size: 30px;
  padding-inline: var(--space-2);
  border-radius: calc(var(--radius) - 3px);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.langs__item:hover { color: var(--st-orange-text); }

.langs__item.is-current {
  background: var(--st-orange-cta);
  color: #fff;
}
.langs__item.is-current:hover { color: #fff; }

/* Cekmecede tam ad yazilir ve blok halinde dizilir. */
.langs--drawer {
  display: flex;
  flex-wrap: wrap;
  margin-block-end: var(--space-3);
}
@media (min-width: 640px) { .langs--drawer { display: flex; } }
.langs--drawer .langs__item {
  min-inline-size: 0;
  block-size: 34px;
  padding-inline: var(--space-3);
  letter-spacing: 0;
}