/* Pemilih bahasa: tombol kecil, daftarnya baru muncul saat diklik */
#tb-bahasa{ position:relative; margin-right:4px; }

#tb-bahasa-buka{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(56,189,248,.30); background:rgba(15,22,33,.62);
  backdrop-filter:blur(6px);
  font-family:"Chakra Petch","Archivo",system-ui,sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.10em; color:#EAF2FB;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
#tb-bahasa-buka:hover{ border-color:rgba(56,189,248,.7); background:rgba(34,211,238,.12); }
#tb-bahasa-buka:focus-visible{ outline:2px solid rgba(56,189,248,.8); outline-offset:3px; }
#tb-bahasa-buka svg{ width:15px; height:15px; fill:none; stroke:#22D3EE; stroke-width:1.6; }
#tb-bahasa-buka .tb-panah{ font-size:10px; color:#8FA3B8; transition:transform .22s ease; }
#tb-bahasa.terbuka #tb-bahasa-buka{ border-color:rgba(56,189,248,.8); background:rgba(34,211,238,.14); }
#tb-bahasa.terbuka .tb-panah{ transform:rotate(180deg); }

#tb-bahasa-daftar{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  min-width:190px; padding:6px; max-height:min(70vh,440px); overflow-y:auto;
  border:1px solid rgba(56,189,248,.24); border-radius:12px;
  background:rgba(12,17,26,.97); backdrop-filter:blur(14px);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
#tb-bahasa.terbuka #tb-bahasa-daftar{ opacity:1; visibility:visible; transform:none; }

#tb-bahasa-daftar button{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  appearance:none; border:0; background:transparent; text-align:left;
  padding:9px 11px; border-radius:8px; color:#8FA3B8;
  font-family:"Archivo",system-ui,sans-serif; font-size:13.5px;
  transition:background .18s ease, color .18s ease;
}
#tb-bahasa-daftar button b{
  display:inline-flex; flex:none; width:24px; height:16px; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.4); line-height:0;
}
#tb-bahasa-daftar button b svg{ width:100%; height:100%; display:block; }
#tb-bahasa-buka .tb-kini{ display:inline-flex; width:22px; height:15px; border-radius:2.5px; overflow:hidden; line-height:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.2); }
#tb-bahasa-buka .tb-kini svg{ width:100%; height:100%; display:block; }
/* ===== saat kursor di atas pilihan: bendera berkibar, tulisan berkilau, kolom warna-warni tembus pandang ===== */
#tb-bahasa-daftar button{ position:relative; overflow:hidden; isolation:isolate; }
#tb-bahasa-daftar button::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:8px; opacity:0;
  background:linear-gradient(100deg, rgba(56,189,248,.22), rgba(168,85,247,.20), rgba(244,114,182,.20), rgba(251,191,36,.20), rgba(34,197,94,.20), rgba(56,189,248,.22));
  background-size:300% 100%; transition:opacity .25s ease;
}
#tb-bahasa-daftar button:hover{ color:#EAF2FB; background:transparent; }
#tb-bahasa-daftar button:hover::before{ opacity:1; animation:tbWarna 2.4s linear infinite; }
#tb-bahasa-daftar button b{ transform-origin:left center; transition:transform .2s ease; }
#tb-bahasa-daftar button:hover b{ animation:tbKibar .75s ease-in-out infinite; box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.5); }
#tb-bahasa-daftar button:hover b svg{ animation:tbGelombang .75s ease-in-out infinite; }
#tb-bahasa-daftar button span{ transition:letter-spacing .25s ease; }
#tb-bahasa-daftar button:hover span{
  letter-spacing:.04em; font-weight:600;
  background:linear-gradient(90deg,#EAF2FB 0%,#38BDF8 25%,#F472B6 50%,#FBBF24 75%,#EAF2FB 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:tbKilau 1.8s linear infinite;
}
@keyframes tbWarna{ from{ background-position:0% 50% } to{ background-position:300% 50% } }
@keyframes tbKilau{ from{ background-position:0% 50% } to{ background-position:250% 50% } }
@keyframes tbKibar{
  0%,100%{ transform:perspective(60px) rotateY(0deg) skewY(0deg); }
  25%{ transform:perspective(60px) rotateY(-14deg) skewY(-3deg) translateY(-.5px); }
  50%{ transform:perspective(60px) rotateY(0deg) skewY(2deg); }
  75%{ transform:perspective(60px) rotateY(12deg) skewY(-2deg) translateY(.5px); }
}
@keyframes tbGelombang{
  0%,100%{ transform:scaleX(1) translateX(0); filter:brightness(1); }
  50%{ transform:scaleX(1.06) translateX(-.5px); filter:brightness(1.12); }
}
@media (prefers-reduced-motion:reduce){
  #tb-bahasa-daftar button:hover b, #tb-bahasa-daftar button:hover b svg, #tb-bahasa-daftar button:hover span, #tb-bahasa-daftar button:hover::before{ animation:none; }
}
#tb-bahasa-daftar button.aktif{ color:#EAF2FB; background:rgba(34,211,238,.14); }
#tb-bahasa-daftar button.aktif b{ box-shadow:0 0 0 2px #22D3EE, 0 2px 6px rgba(0,0,0,.4); }

@media (max-width:900px){
  #tb-bahasa-buka{ padding:7px 10px; font-size:11.5px; }
  #tb-bahasa-daftar{ min-width:170px; }
}

/* ===== tata tulis kanan-ke-kiri untuk bahasa Arab ===== */
html[dir="rtl"] body{ text-align:right }
html[dir="rtl"] .wrap, html[dir="rtl"] .sec-head, html[dir="rtl"] .hero .wrap{ direction:rtl }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] p,
html[dir="rtl"] li, html[dir="rtl"] .lead, html[dir="rtl"] .sub{ letter-spacing:0 }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .tagpill{ flex-direction:row-reverse; letter-spacing:.06em }
html[dir="rtl"] nav.links{ flex-direction:row-reverse }
html[dir="rtl"] header .wrap.nav{ flex-direction:row-reverse }
html[dir="rtl"] .cta{ flex-direction:row-reverse }
html[dir="rtl"] .vm-kartu::before{ left:auto; right:0 }
html[dir="rtl"] .vm-kartu ol li{ padding:11px 42px 11px 0 }
html[dir="rtl"] .vm-kartu ol li::before{ left:auto; right:0 }
html[dir="rtl"] .svc .rinci li{ padding:8px 22px 8px 0 }
html[dir="rtl"] .svc .rinci li::before{ left:auto; right:2px }
html[dir="rtl"] .svc .rinci summary::after{ margin-left:0; margin-right:auto }
html[dir="rtl"] #tb-bahasa-daftar{ right:auto; left:0; text-align:right }
html[dir="rtl"] #tb-tanya-buka{ right:auto; left:22px; flex-direction:row-reverse }
html[dir="rtl"] #tb-tanya-buka .kotak{ text-align:right }
html[dir="rtl"] #tb-tanya{ right:auto; left:22px }
html[dir="rtl"] .tb-pesan.saya{ align-self:flex-start }
html[dir="rtl"] .tb-pesan.ai{ align-self:flex-end }
html[dir="rtl"] .pgl-tabel th, html[dir="rtl"] .pgl-tabel td{ text-align:right }
html[dir="rtl"] .pgl-tabel .nilai{ text-align:left }
html[dir="rtl"] .pgl-tabel a.lpse svg{ transform:scaleX(-1) }
html[dir="rtl"] .pgl-alat .cari svg{ left:auto; right:14px }
html[dir="rtl"] .pgl-alat input{ padding:13px 42px 13px 16px }
@media(max-width:520px){ html[dir="rtl"] #tb-tanya-buka{ left:12px; right:auto } }