Satranç SanatıThe Art of Chess

/*
 * TheChess.Art — Bilingual content switcher
 *
 * Her metin bloğunun iki versiyonu HTML'de gömülü:
 *   <h1><span data-lang="tr">Satranç Sanatı</span><span data-lang="en">The Art of Chess</span></h1>
 *
 * <html lang="tr"> → sadece data-lang="tr" görünür, data-lang="en" gizli.
 * CSS tek başına çalışır — JS kapalı olsa bile bir dil hâlâ görünür (varsayılan tr).
 * SEO: her iki dil de DOM'da, arama motoru hreflang ile çözer.
 */

/* Her iki dili de default gizle ki yanıp sönme olmasın */
[data-lang] {
  display: none;
}

/* Aktif dile göre aç */
html[lang^="tr"] [data-lang="tr"],
html[lang^="en"] [data-lang="en"] {
  display: inline;
}

/* Block-level elementler için */
html[lang^="tr"] p[data-lang="tr"],
html[lang^="en"] p[data-lang="en"],
html[lang^="tr"] div[data-lang="tr"],
html[lang^="en"] div[data-lang="en"],
html[lang^="tr"] li[data-lang="tr"],
html[lang^="en"] li[data-lang="en"],
html[lang^="tr"] section[data-lang="tr"],
html[lang^="en"] section[data-lang="en"] {
  display: block;
}

html[lang^="tr"] h1[data-lang="tr"],
html[lang^="en"] h1[data-lang="en"],
html[lang^="tr"] h2[data-lang="tr"],
html[lang^="en"] h2[data-lang="en"],
html[lang^="tr"] h3[data-lang="tr"],
html[lang^="en"] h3[data-lang="en"],
html[lang^="tr"] h4[data-lang="tr"],
html[lang^="en"] h4[data-lang="en"] {
  display: block;
}

html[lang^="tr"] span[data-lang="tr"],
html[lang^="en"] span[data-lang="en"] {
  display: inline;
}

html[lang^="tr"] br[data-lang="tr"],
html[lang^="en"] br[data-lang="en"] {
  display: inline;
}

/* <small> block-level bilingual support (hero-stage__title small gibi) */
html[lang^="tr"] small[data-lang="tr"],
html[lang^="en"] small[data-lang="en"] {
  display: block;
}
/* <em> inline bilingual */
html[lang^="tr"] em[data-lang="tr"],
html[lang^="en"] em[data-lang="en"] {
  display: inline;
}

/* Dil seçici toggle — topbar'a */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-right: 16px;
  font-family: var(--font-sans);
}
.lang-toggle button {
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.lang-toggle button:hover { color: var(--primary); background: rgba(237, 227, 206, 0.08); }
/* Aktif dil butonu gizlenir — sadece switch target (diğer dil) görünür */
.lang-toggle button.is-active {
  display: none;
}
.lang-toggle button:not(.is-active) {
  color: var(--primary);
  font-weight: 700;
}

/* Topbar'ı üçlü grid'e uyarla */
.site-topbar {
  gap: 16px;
}
.site-topbar__tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}