/* ═══════════════════════════════════════════════════════════
   Herta — dil değiştirici (i18n)
   Sahiplik: .util (ortak sarmalayıcı), .lang, .lang__btn ve
   i18n-pending flash koruması. Ses düğmesinin barları
   assets/css/sound.css içinde stillenir.
   style.css'e dokunulmaz; buradaki her kural eklemedir.
   ═══════════════════════════════════════════════════════════ */

/* Flash koruması: TR dışında bir dil seçmiş ziyaretçi, çeviri
   yerleşene kadar Türkçe kaynağı görmez. Sınıfı head'deki erken
   script koyar (ve 1200 ms sonra güvenlik amaçlı kaldırır),
   i18n.js çeviriyi uygular uygulamaz kaldırır. */
html.i18n-pending body { visibility: hidden; }


/* Yalnızca aktif dil durur; diğerleri hover/odakta yandan açılır. */
.lang {
  display: flex;
  align-items: baseline;
  overflow: hidden;
  direction: ltr; /* dil sırası Arapça arayüzde de TR · EN · FR · KU · AR */
}

.lang__btn {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.78vw, 12px);
  line-height: 1;
  letter-spacing: 0.1em;
  color: currentColor; /* açık header'da da siyah menüde de doğru renk */
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  transition:
    opacity 0.4s var(--ease-out),
    max-width 0.55s var(--ease-out),
    margin-left 0.55s var(--ease-out);
}
.lang__btn.is-active { opacity: 1; max-width: 4em; }

.chip--lang:hover .lang__btn,
.chip--lang:focus-within .lang__btn {
  opacity: 0.35;
  max-width: 4em;
  margin-left: 9px;
}
.chip--lang:hover .lang__btn:first-child,
.chip--lang:focus-within .lang__btn:first-child { margin-left: 0; }
.chip--lang:hover .lang__btn.is-active,
.chip--lang:focus-within .lang__btn.is-active { opacity: 1; }
.chip--lang:hover .lang__btn:hover { opacity: 0.75; }
.lang__btn:nth-child(2) { transition-delay: 0.03s; }
.lang__btn:nth-child(3) { transition-delay: 0.06s; }
.lang__btn:nth-child(4) { transition-delay: 0.09s; }
.lang__btn:nth-child(5) { transition-delay: 0.12s; }
.lang__btn:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; opacity: 1; }

/* Dokunmatik cihazda masaüstündeki yatay açılma korunur. Yalnız
   :focus-within kullanılmaz: iOS parmak aşağı indiği anda odağı verip
   ölçüyü değiştirdiğinde click'i iptal edebiliyor. Açılmayı i18n.js'in
   .is-open sınıfı yönetir; görünüm bulunduğu chip'in içinde kalır. */
@media (hover: none) {
  .chip--lang { touch-action: manipulation; }
  .chip--lang .lang__btn { pointer-events: none; }
  .chip--lang .lang__btn.is-active { pointer-events: auto; }
  /* Dokunma sonrası tarayıcı odağı chip'in üzerinde kalsa bile kapalı
     durum masaüstü :focus-within kuralıyla sahte biçimde açık görünmez. */
  .chip--lang:not(.is-open):focus-within .lang__btn {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    pointer-events: none;
  }
  .chip--lang:not(.is-open):focus-within .lang__btn.is-active {
    max-width: 4em;
    opacity: 1;
    pointer-events: auto;
  }
  .chip--lang.is-open .lang__btn {
    max-width: 4em;
    margin-left: 7px;
    opacity: .35;
    pointer-events: auto;
  }
  .chip--lang.is-open .lang__btn:first-child { margin-left: 0; }
  .chip--lang.is-open .lang__btn.is-active { opacity: 1; }
}

/* iOS'un hover:none bilgisini yanlış verdiği durumlarda da seçimden
   sonra alan kesin kapanır. .is-touch ilk gerçek dokunmada JS tarafından
   eklenir; masaüstü hover ve klavye davranışına dokunmaz. */
.chip--lang.is-touch:not(.is-open):hover .lang__btn,
.chip--lang.is-touch:not(.is-open):focus-within .lang__btn {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  pointer-events: none;
}
.chip--lang.is-touch:not(.is-open):hover .lang__btn.is-active,
.chip--lang.is-touch:not(.is-open):focus-within .lang__btn.is-active {
  max-width: 4em;
  opacity: 1;
  pointer-events: auto;
}
.chip--lang.is-touch.is-open .lang__btn {
  max-width: 4em;
  margin-left: 7px;
  opacity: .35;
  pointer-events: auto;
}
.chip--lang.is-touch.is-open .lang__btn:first-child { margin-left: 0; }
.chip--lang.is-touch.is-open .lang__btn.is-active { opacity: 1; }

@media (max-width: 860px) {
  /* Görünen chip aynı kalır; şeffaf dokunma alanı çevresinde büyür. */
  .header .chip--lang { position: relative; }
  .header .chip--lang::before {
    content: "";
    position: absolute;
    inset: -7px -5px;
  }
}

/* ── Dil geçişi: içerik ince bir perdeyle tazelenir ──────── */
/* Yalnızca içerik sarmalayıcısı: dock, mobil menü ve geçiş
   katmanları dokunulmadan yerinde kalır. */
html.lang-swap .page {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.26s ease, transform 0.26s var(--ease-io);
}
html.lang-swap--in .page {
  opacity: 1;
  transform: none;
  transition: opacity 0.44s ease, transform 0.5s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html.lang-swap .page,
  html.lang-swap--in .page { opacity: 1; transform: none; transition: none; }
}

/* ── Header yerleşimi ──────────────────────────────────────
   .header space-between; util eklenince menü ortada kalmasın
   diye menü ile util birlikte sağ kenara yaslanır. */
.header__nav { margin-left: auto; }
.header > .util { margin-left: clamp(18px, 1.6vw, 26px); }

@media (max-width: 860px) {
  /* menü gizli, hamburger görünür: util sağa yaslanıp toggle'ın
     soluna yerleşir */
  .header > .util {
    margin-left: auto;
    margin-right: clamp(14px, 4vw, 20px);
    gap: 14px;
  }
}

/* ── Mobil menü yerleşimi ──────────────────────────────────
   .menu__foot iki sütunlu (e-posta | sosyal); util kendi tam
   genişlikte satırında, bunların üstünde durur. */
.menu__foot { flex-wrap: wrap; }
.menu__foot .util { order: -1; flex: 0 0 100%; }
.menu__foot .lang__btn { font-size: 12px; }