/* =====================================================================
   SAW v3.1 — Tombol tutup premium + pemilih bahasa (kartu t_86a625f3)
   Dimuat SETELAH menu-kaca.css. Tidak mengubah berkas CSS lain.
   Target sentuh >= 48px, fokus terlihat, hormati prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. Tombol tutup premium ----------
   Bentuk pil, garis emas tipis bergradasi, ikon X di dalam lingkaran
   emas yang berputar 90° saat disorot. Dua varian: gelap & terang. */
.menu-mob .tutup,.chat .tutup,.dialog-foto .tutup,#pop-tutup,.wiz-tutup{
  --tp-bg:rgba(10,23,48,.55); --tp-fg:#F4ECDD; --tp-cincin:#E8BF65; --tp-ikon-bg:rgba(232,191,101,.14);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;min-width:48px;padding:0 18px 0 6px;
  border:0!important;border-radius:999px;
  background:var(--tp-bg);color:var(--tp-fg);
  font-weight:600;font-size:.9375rem;letter-spacing:.02em;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px -10px rgba(4,20,42,.65);
  -webkit-tap-highlight-color:transparent;
  transition:background-color 220ms ease,box-shadow 220ms ease,transform 160ms ease;
}
/* garis emas bergradasi (lapisan ::before, tidak menggeser tata letak) */
.menu-mob .tutup::before,.chat .tutup::before,.dialog-foto .tutup::before,#pop-tutup::before,.wiz-tutup::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#F6DCA0 0%,#C9A45C 45%,#8C6A2A 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* ikon X dalam lingkaran */
.menu-mob .tutup svg,.chat .tutup svg,.dialog-foto .tutup svg,#pop-tutup svg,.wiz-tutup svg{
  flex:none;width:36px;height:36px;padding:9px;box-sizing:border-box;border-radius:50%;
  background:var(--tp-ikon-bg);color:var(--tp-cincin);
  box-shadow:inset 0 0 0 1px rgba(232,191,101,.45);
  transition:transform 320ms cubic-bezier(.2,.8,.2,1),background-color 220ms ease,color 220ms ease;
}
.menu-mob .tutup:hover,.chat .tutup:hover,.dialog-foto .tutup:hover,#pop-tutup:hover,.wiz-tutup:hover{
  box-shadow:0 8px 24px -10px rgba(4,20,42,.75),0 0 0 4px rgba(232,191,101,.14);
}
.menu-mob .tutup:hover svg,.chat .tutup:hover svg,.dialog-foto .tutup:hover svg,#pop-tutup:hover svg,.wiz-tutup:hover svg,
.menu-mob .tutup:focus-visible svg,.chat .tutup:focus-visible svg,.dialog-foto .tutup:focus-visible svg,#pop-tutup:focus-visible svg,.wiz-tutup:focus-visible svg{
  transform:rotate(90deg);background:var(--tp-cincin);color:#0A1730;
}
.menu-mob .tutup:active,.chat .tutup:active,.dialog-foto .tutup:active,#pop-tutup:active,.wiz-tutup:active{transform:scale(.96)}
.menu-mob .tutup:focus-visible,.chat .tutup:focus-visible,.dialog-foto .tutup:focus-visible,#pop-tutup:focus-visible,.wiz-tutup:focus-visible{
  outline:3px solid #E8BF65;outline-offset:3px;box-shadow:none;
}
/* varian terang (wizard & pop-up paket non-megah berlatar pasir) */
.wiz-tutup,.pop:not([data-tier=megah]) #pop-tutup{
  --tp-bg:#FFFDF8; --tp-fg:#0A1730; --tp-cincin:#73571F; --tp-ikon-bg:#F6EBD2;
  box-shadow:0 6px 16px -10px rgba(10,23,48,.45);
}
.wiz-tutup:hover svg,.pop:not([data-tier=megah]) #pop-tutup:hover svg,
.wiz-tutup:focus-visible svg,.pop:not([data-tier=megah]) #pop-tutup:focus-visible svg{background:#0A1730;color:#F6DCA0}
.wiz-tutup:focus-visible,.pop:not([data-tier=megah]) #pop-tutup:focus-visible{outline-color:#0A1730;box-shadow:0 0 0 6px #E3CC94}
/* pop-up megah: tetap gelap, tanpa garis navy lama */
.pop[data-tier=megah] #pop-tutup{--tp-bg:rgba(21,40,74,.85)}
/* HP: pop-up menyembunyikan label "Tutup" -> lingkaran saja, tetap 48px */
@media (max-width:719px){
  .pop-alat #pop-tutup{padding:0 6px;min-width:48px}
}
/* RTL: ikon tetap di awal baris (sisi kanan), jarak simetris */
[dir=rtl] .menu-mob .tutup,[dir=rtl] .chat .tutup,[dir=rtl] .dialog-foto .tutup,[dir=rtl] #pop-tutup,[dir=rtl] .wiz-tutup{padding:0 6px 0 18px}
@media (max-width:719px){ [dir=rtl] .pop-alat #pop-tutup{padding:0 6px} }

/* ---------- 2. Pemilih bahasa ---------- */
.bahasa{position:relative;flex:none}
.bahasa__tombol{
  display:inline-flex;align-items:center;gap:6px;min-height:48px;min-width:48px;padding:0 12px;
  border:1.5px solid rgba(232,191,101,.75);border-radius:var(--r-kontrol,8px);
  background:rgba(244,236,221,.04);color:inherit;font:inherit;font-weight:600;font-size:.875rem;letter-spacing:.04em;cursor:pointer;
  transition:background-color 200ms ease,border-color 200ms ease;
}
.bahasa__tombol svg{width:20px;height:20px;flex:none;color:#E8BF65}
.bahasa__tombol:hover,.bahasa__tombol[aria-expanded=true]{background:rgba(232,191,101,.14);border-color:#E8BF65}
.bahasa__tombol:focus-visible{outline:3px solid #E8BF65;outline-offset:3px;box-shadow:none}
.bahasa__daftar[role=menu]{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80;min-width:208px;padding:6px;
  display:grid;gap:2px;border-radius:14px;
  background:linear-gradient(160deg,rgba(7,30,55,.97),rgba(4,20,42,.98));
  border:1px solid rgba(232,191,101,.45);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.bahasa__daftar[role=menu][hidden]{display:none}
.bahasa__daftar button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 14px;
  border:0;border-radius:10px;background:none;color:#F4ECDD;font:inherit;font-size:.9375rem;text-align:start;cursor:pointer;
}
.bahasa__daftar button:hover,.bahasa__daftar button:focus-visible{background:rgba(232,191,101,.14);outline:none}
.bahasa__daftar button:focus-visible{box-shadow:inset 0 0 0 2px #E8BF65}
.bahasa__daftar button[aria-checked=true],.bahasa__daftar button[aria-pressed=true]{color:#F6DCA0;font-weight:700}
.bahasa__daftar button[aria-checked=true]::after,.bahasa__daftar button[aria-pressed=true]::after{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#E8BF65;box-shadow:0 0 0 3px rgba(232,191,101,.25)}
/* laci HP: daftar sebaris berbentuk chip */
.bahasa[data-bahasa-sebaris]{margin:8px 0 20px}
.bahasa__judul{margin:0 0 10px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E3CC94}
.bahasa[data-bahasa-sebaris] .bahasa__daftar{display:flex;flex-wrap:wrap;gap:8px}
.bahasa[data-bahasa-sebaris] .bahasa__daftar button{
  width:auto;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(232,191,101,.45);font-size:.875rem}
.bahasa[data-bahasa-sebaris] .bahasa__daftar button[aria-pressed=true]{background:#E8BF65;color:#0A1730;border-color:#E8BF65}
.bahasa[data-bahasa-sebaris] .bahasa__daftar button[aria-pressed=true]::after{display:none}
/* header: di HP tombol bahasa tetap tampil (ringkas), sebelum tombol Menu */
.header .bahasa{margin-inline-start:0}
.header .merek{margin-right:0;margin-inline-end:auto}
.header .bahasa + .btn,.header .bahasa ~ .tombol-menu{margin-inline-start:0}
@media (max-width:1023px){ .header .bahasa__tombol{padding:0 10px} }
@media (max-width:379px){ .header .bahasa__tombol [data-bahasa-kini]{display:none} }
/* halaman terang (header padat partner/privasi) tetap memakai kaca gelap dari menu-kaca.css */

/* ---------- 3. Tipografi per bahasa ---------- */
html[lang=ar]{--ff-isi:"Noto Naskh Arabic","Plus Jakarta Sans","Jakarta Fallback",Arial,sans-serif;--ff-judul:"Noto Naskh Arabic","Cormorant Garamond","Cormorant Fallback",Georgia,serif}
html[lang=ar] body{font-family:var(--ff-isi);line-height:1.8}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{font-family:var(--ff-judul);letter-spacing:0}
html[lang=zh-Hans]{--ff-isi:"Plus Jakarta Sans","Noto Sans SC","PingFang SC","Microsoft YaHei","Jakarta Fallback",Arial,sans-serif;--ff-judul:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html[lang=zh-Hans] body{font-family:var(--ff-isi)}
html[lang=zh-Hans] h1,html[lang=zh-Hans] h2,html[lang=zh-Hans] h3{font-family:var(--ff-judul);letter-spacing:0}
html[lang=tr] body{font-family:'Plus Jakarta Sans',var(--ff-isi,system-ui),sans-serif}
html[lang=tr] h1,html[lang=tr] h2,html[lang=tr] h3{font-family:'Cormorant Garamond',var(--ff-judul,serif),serif}
/* RTL: garis aksen & ikon panah dicerminkan seperlunya */
[dir=rtl] .penanda::before{transform-origin:right}
[dir=rtl] .btn svg.panah,[dir=rtl] .ikon-panah{transform:scaleX(-1)}
/* teks Latin/angka di dalam RTL tetap terbaca */
[dir=rtl] [href^="tel:"],[dir=rtl] .harga,[dir=rtl] .tabel-harga td{unicode-bidi:plaintext}

/* ---------- 4. Cegah kedip teks Indonesia saat kamus dimuat ---------- */
html.i18n-muat body{opacity:0}
html.i18n-muat body{transition:none}
body{transition:opacity 180ms ease}

@media (prefers-reduced-motion:reduce){
  .menu-mob .tutup,.chat .tutup,.dialog-foto .tutup,#pop-tutup,.wiz-tutup,
  .menu-mob .tutup svg,.chat .tutup svg,.dialog-foto .tutup svg,#pop-tutup svg,.wiz-tutup svg,body{transition:none!important}
  .menu-mob .tutup:hover svg,.chat .tutup:hover svg,.dialog-foto .tutup:hover svg,#pop-tutup:hover svg,.wiz-tutup:hover svg{transform:none}
}
@media (forced-colors:active){
  .menu-mob .tutup,.chat .tutup,.dialog-foto .tutup,#pop-tutup,.wiz-tutup,.bahasa__tombol{border:2px solid ButtonText!important}
  .menu-mob .tutup::before,.chat .tutup::before,.dialog-foto .tutup::before,#pop-tutup::before,.wiz-tutup::before{display:none}
}

/* ---------- 5. Perbaikan tata letak hasil uji ---------- */
/* laci HP: nama merek tidak boleh menabrak tombol Tutup */
.menu-mob__atas{gap:12px}
.menu-mob__atas .merek{min-width:0;flex:1 1 auto}
.menu-mob__atas .merek > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:479px){ .menu-mob__atas .merek > span{font-size:1.25rem!important} }
@media (max-width:389px){ .menu-mob__atas .merek > span{display:none} }
.menu-mob__atas .tutup{flex:none}
/* nav desktop: label terjemahan yang lebih panjang tidak patah dua baris */
.header .nav a{white-space:nowrap}
html:not([lang=id]) .header .nav ul{gap:clamp(10px,1.4vw,24px)}
html:not([lang=id]) .header .nav a{font-size:.875rem}
/* header desktop padat: label CTA tidak patah, jarak menyusut di 1180–1439px */
.header .btn--kecil{white-space:nowrap;flex:none}
.header .merek{flex:none}
@media (min-width:1180px) and (max-width:1439px){
  .header .wadah{gap:14px}
  .header .btn--kecil{padding:0 14px}
  .header .nav a{padding:0 9px}
  html:not([lang=id]) .header .nav ul{gap:0}
  html:not([lang=id]) .header .nav a{padding:0 7px;font-size:.8125rem}
  html:not([lang=id]) .header .merek span{font-size:1.25rem}
  .header .bahasa__tombol{padding:0 10px}
}
/* nav tidak muat (bahasa berlabel panjang / layar sempit) -> pakai tombol Menu seperti tablet */
html.nav-sempit .header .nav{display:none!important}
html.nav-sempit .header .tombol-menu{display:inline-flex!important}
html.nav-sempit .header .merek{margin-inline-end:auto}
@media (min-width:1180px){
  .header .wadah{gap:16px}
  .header .bahasa__tombol{padding:0 10px;gap:5px}
  .header .nav a{padding:0 10px}
}
.bahasa__daftar button[lang=zh-Hans]{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}
/* chat: judul boleh menyusut, tombol Tutup tidak terpotong */
.chat__kepala h2{min-width:0;flex:1 1 auto}
.chat__kepala .tutup{flex:none;margin:0!important;width:auto!important;max-width:none}
/* header HP sempit: kode bahasa disembunyikan (ikon globe saja), label Menu jadi ikon */
@media (max-width:479px){
  .header .wadah{gap:8px}
  .header .bahasa__tombol{padding:0 12px}
  .header .bahasa__tombol [data-bahasa-kini]{display:none}
  .header .merek span{font-size:1.125rem}
}
@media (max-width:359px){ .header .merek span{display:none} }

/* ---------- 4. Label tombol menu tidak patah baris (zh/ar/ru) ---------- */
.tombol-menu,.tombol-menu *{white-space:nowrap}
.tombol-menu{word-break:keep-all;flex-shrink:0}