/*
 * i18n.css — halaman bantuan berbahasa asing (SGA-12): /en/, /ar/, /zh/, /ja/.
 * Dipasang tools/prerender.mjs pada halaman hasil prerender saja.
 *
 * 1. Fon: Inter tidak punya aksara Arab/CJK. Tanpa fallback eksplisit peramban
 *    memilih fon sistem apa saja, dan di Windows hasilnya sering campur aduk.
 * 2. RTL (bahasa Arab): lembar gaya utama memakai sisi fisik (left/right).
 *    Di sini sisi-sisi itu dicerminkan untuk [dir="rtl"] — hanya aturan yang
 *    benar-benar ada di base/components/layout.css.
 * 3. Pil bahasa berupa <a> (tautan ke versi bahasa lain), bukan <button>.
 */

/* ---- 1. Fon ---- */
:lang(ar) body { font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic Typesetting", var(--font-sans, system-ui), sans-serif; }
:lang(zh) body { font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif; }
:lang(ja) body { font-family: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif; }
:lang(ar) .article-content, :lang(ar) .card-desc { line-height: 1.9; }

/* ---- 2. RTL ---- */
[dir="rtl"] .article-content ul,
[dir="rtl"] .article-content ol { padding-left: 0; padding-right: var(--space-6); }
[dir="rtl"] .article-content blockquote { border-left: 0; border-right: 3px solid var(--color-brand); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .article-content th,
[dir="rtl"] .article-content td { text-align: right; }
[dir="rtl"] .alert-info    { border-left: 0; border-right: 3px solid var(--color-info); }
[dir="rtl"] .alert-warning { border-left: 0; border-right: 3px solid var(--color-warning); }
[dir="rtl"] .alert-success { border-left: 0; border-right: 3px solid var(--color-success); }
[dir="rtl"] .alert-error   { border-left: 0; border-right: 3px solid var(--color-error); }
[dir="rtl"] .faq-question,
[dir="rtl"] .feedback-reason { text-align: right; }
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--color-border); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-4); }
[dir="rtl"] .sidebar-title { padding-left: 0; padding-right: var(--space-3); }
[dir="rtl"] .sidebar-group-items { padding-left: 0; padding-right: var(--space-4); }
[dir="rtl"] .toc-links { border-left: 0; border-right: 1px solid var(--color-border); padding-left: 0; padding-right: var(--space-3); }
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: var(--space-4); }
[dir="rtl"] .breadcrumb-sep { display: inline-block; transform: scaleX(-1); }
@media (max-width: 1024px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
}
/* Kode, URL, dan angka dalam teks Arab tetap dibaca kiri-ke-kanan. */
[dir="rtl"] .article-content code,
[dir="rtl"] .article-content pre { direction: ltr; unicode-bidi: isolate; text-align: left; }

/* ---- 3. Pil bahasa sebagai tautan ---- */
a.lang-pill { text-decoration: none; display: inline-flex; align-items: center; }
a.lang-pill:hover { text-decoration: none; }
.lang-empty { color: var(--color-text-secondary); }
.lang-pill { white-space: nowrap; }
/* Lima pil tidak muat di layar ponsel bersama logo & tombol: dipersempit, dan
 * tulisan "Support" di samping logo dilepas lebih dulu. */
@media (max-width: 480px) {
  .lang-switch .lang-pill { padding: 3px 6px; }
  .header-logo span { display: none; }
  .lang-switch { max-width: 42vw; overflow-x: auto; scrollbar-width: none; flex-shrink: 1; }
  .lang-switch::-webkit-scrollbar { display: none; }
  .header-actions { min-width: 0; }
}