/*
 * Dil seçicinin ve dil bloklarının ortak biçimi.
 *
 * Dört sayfa da kendi paletini `:root` içinde tanımlıyor; burada yalnızca o değişkenler
 * kullanılıyor, yani sayfa renklerini değiştirse seçici onunla birlikte değişir.
 */

/* Yalnızca seçili dilin bloğu görünür. */
[data-l] { display: none; }
html[data-lang="tr"] [data-l="tr"],
html[data-lang="en"] [data-l="en"],
html[data-lang="ar"] [data-l="ar"],
html[data-lang="id"] [data-l="id"] { display: block; }

/* Başlık ve altlık içinde satır arasında duranlar blok olmamalı. */
html[data-lang="tr"] span[data-l="tr"],
html[data-lang="en"] span[data-l="en"],
html[data-lang="ar"] span[data-l="ar"],
html[data-lang="id"] span[data-l="id"] { display: inline; }

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 14px;
  margin-bottom: 18px;
  font-size: 13px;
}

.lang-switch a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: pointer;
}

.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* Arapça gövde metni biraz büyük: aynı puntoda Latin harflerinden küçük okunuyor.
 *
 * Hedef **yön değil blok**: `html[dir="rtl"]` yazıldığında Arapça seçiliyken sayfadaki gizli
 * Latin blokları da büyüyordu. Ana sayfada dört paragraf aynı grid gözünde üst üste durduğu
 * ve kartın boyunu en uzunu belirlediği için, kart Arapçaya geçince 145px'ten 164px'e sıçrıyordu.
 * Zaten gerekçe de yön değil yazı: büyütülmesi gereken Arap harfleri.
 *
 * Hedef yalnızca **gövde metni**. Bloğun kendisi hedeflenirse `line-height` başlıklara da miras
 * kalıyor ve Arapça h2'ler 35.2px yerine 39.6px satır yüksekliğine çıkıyordu — istenmeyen bir
 * fark, çünkü gerekçe gövde metninin küçük okunması. Ana sayfada dil bloğu paragrafın kendisi
 * olduğu için oradaki punto `index.html` içinde ayrıca yazılı. */
html [data-l="ar"] p, html [data-l="ar"] li { font-size: 16px; line-height: 1.8; }

/* Yön duyarlı boşluk: listeler Arapçada sağdan girintilenmeli. */
.summary ul, ul { padding-inline-start: 22px; padding-left: 0; }