/* ============================================================
   DROPDOWN HEADER (akun & bahasa) + penyesuaian arah kanan-ke-kiri
   ============================================================

   Dipisah dari site.css supaya bagian kanan-ke-kiri (bahasa Arab) bisa
   dibaca sebagai satu blok utuh, bukan terselip di antara ratusan aturan
   lain. Aturan rtl di bawah TIDAK mengubah apa pun selama situs memakai
   bahasa yang ditulis kiri-ke-kanan — semuanya dikunci di balik
   html[dir="rtl"].                                                     */

/* ============================================================
   HEADER MENEMPEL DI PERAMBAN PONSEL
   ============================================================

   Header situs memakai position:fixed BERSAMA backdrop-filter:blur(10px).
   Gabungan itu adalah penyebab klasik header "nyangkut" di peramban ponsel:
   lapisan buram harus digambar ulang tiap piksel guliran, dan saat peramban
   tidak sanggup mengejar, yang tertinggal di layar adalah potret lama isi
   halaman — header tampak membeku atau menyisakan bekas garis di atas.
   Paling sering terlihat di Safari iOS dan Chrome Android kelas menengah,
   dan makin parah di halaman panjang seperti beranda.

   Perbaikannya dua lapis, hanya untuk layar kecil:
     1. buang backdrop-filter dan pakai warna pekat. Alas header sudah 92%
        pekat, jadi burammya hampir tidak terlihat di layar ponsel — yang
        hilang tidak sebanding dengan masalah yang ditimbulkannya;
     2. dorong header ke lapisan komposit sendiri (translateZ) supaya
        peramban tidak perlu menggambar ulang isi halaman di belakangnya.

   Ditulis di berkas ini, bukan di site.css, supaya tetap berupa tambahan
   yang bisa dicabut tanpa menyentuh gaya aslinya. */
@media (max-width:900px){
  header#siteHeader{
    background:#12241a;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    will-change:transform;
  }
  /* Gelembung pencarian juga fixed dan berada tepat di bawah header; kalau
     tidak ikut dinaikkan ke lapisan komposit, ia yang gantian membekas. */
  .mkt-searchbar{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }
}

/* ---------------- Dropdown ---------------- */
.hd-drop{ position:relative; }

.hd-drop-tombol{
  display:inline-flex; align-items:center; gap:.42rem;
  background:none; border:0; padding:.35rem 0; cursor:pointer;
  font-family:inherit; font-size:.88rem; font-weight:500;
  color:var(--parchment-100); opacity:.85; transition:opacity .15s;
}
.hd-drop-tombol:hover,
.hd-drop[data-buka] .hd-drop-tombol{ opacity:1; }
.hd-drop-tombol:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px; border-radius:2px; }

.hd-ikon{ width:17px; height:17px; flex:none; }
.hd-panah{ width:13px; height:13px; flex:none; transition:transform .18s; }
.hd-drop[data-buka] .hd-panah{ transform:rotate(180deg); }

.hd-menu{
  position:absolute; top:calc(100% + 12px); inset-inline-end:0;
  min-width:286px; z-index:220;
  background:var(--parchment-50, #fff);
  border:1px solid var(--parchment-200, #e5dac0);
  border-radius:4px; box-shadow:0 18px 44px rgba(18,36,26,.22);
  padding:.45rem; overflow:hidden;
  /* Ditutup dengan visibility, bukan display:none, supaya bisa dianimasikan
     dan supaya pembaca layar tetap melewatinya saat tertutup. */
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.hd-drop[data-buka] .hd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.hd-menu-sempit{ min-width:212px; }

/* Segitiga kecil penunjuk tombolnya */
.hd-menu::before{
  content:""; position:absolute; top:-6px; inset-inline-end:18px;
  width:11px; height:11px; background:var(--parchment-50, #fff);
  border-inline-start:1px solid var(--parchment-200, #e5dac0);
  border-block-start:1px solid var(--parchment-200, #e5dac0);
  transform:rotate(45deg);
}

.hd-judul{
  margin:.5rem .65rem .3rem; font-family:var(--font-mono, monospace);
  font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--char-500, #786e5f);
}

.hd-menu a,
.hd-keluar{
  display:flex; flex-direction:column; gap:1px;
  padding:.6rem .65rem; border-radius:3px; text-decoration:none;
  color:var(--char-900, #211c16); font-size:.9rem; line-height:1.35;
  transition:background .13s;
}
.hd-menu a:hover,
.hd-menu a:focus-visible,
.hd-keluar:hover,
.hd-keluar:focus-visible{ background:var(--parchment-100, #f0e9d8); outline:none; }

.hd-utama{ font-weight:600; }
.hd-bantu{ font-size:.76rem; color:var(--char-500, #786e5f); font-weight:400; }

.hd-garis{ height:1px; background:var(--parchment-200, #e5dac0); margin:.45rem .3rem; }

.hd-form{ margin:0; }
.hd-keluar{
  width:100%; background:none; border:0; cursor:pointer;
  font-family:inherit; font-weight:600; text-align:start;
  color:var(--soil-600, #833f28);
}

/* ---- baris bahasa ---- */
.hd-bahasa{ flex-direction:row !important; align-items:center; gap:.6rem; }
.hd-bendera{ font-size:1.05rem; line-height:1; flex:none; }
/* Nama bahasa menempel pada benderanya (tidak melebar), centangnya didorong
   ke ujung baris. Kalau namanya yang dibuat melebar, teks Arab di dalamnya —
   yang arahnya kanan-ke-kiri — akan terlempar ke ujung dan terpisah dari
   benderanya. */
.hd-bahasa .hd-utama{ flex:0 1 auto; }
.hd-centang{
  width:15px; height:15px; flex:none; margin-inline-start:auto;
  color:var(--forest-700, #2c4f36);
}
.hd-pilih{ background:var(--parchment-100, #f0e9d8); }

/* ---- versi di dalam laci ponsel ---- */
/* Di layar sempit dropdown tidak masuk akal: lacinya sendiri sudah menu.
   Jadi isinya dibuka langsung sebagai kelompok bertajuk. */
.mobile-menu .hd-kelompok{ margin-top:.4rem; }
.mobile-menu .hd-kelompok-judul{
  font-family:var(--font-mono, monospace); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-400, #cf9f52); margin:0 0 .9rem;
}
.mobile-menu .hd-kelompok ul{ gap:1.15rem; }
.mobile-menu .hd-kelompok a,
.mobile-menu .hd-kelompok button{ font-size:1.25rem; }
.mobile-menu .hd-keluar-hp{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-display, serif);
  font-size:1.25rem; font-weight:500; color:var(--gold-400, #cf9f52); text-align:start;
}
.mobile-menu .hd-bahasa-hp{
  display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.2rem;
}
.mobile-menu .hd-bahasa-hp a{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.95rem !important; font-family:var(--font-body, sans-serif);
  padding:.5rem .8rem; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  color:var(--parchment-50, #fff); text-decoration:none;
}
.mobile-menu .hd-bahasa-hp a.hd-pilih{
  background:var(--gold-500, #b8873b); border-color:var(--gold-500, #b8873b); color:#201a10;
}

/* ---- pemilih bahasa di bilah atas panel member & mitra ----
   Alasnya terang di panel, jadi warna tombolnya dibalik dari versi header
   situs yang beralas hijau tua. */
.vz-bahasa-panel{ list-style:none; margin:0; padding:0; display:flex; align-items:center }
.vz-bahasa-panel .hd-drop-tombol{ color:#4a4238; opacity:1 }
.vz-bahasa-panel .hd-drop-tombol:hover{ color:#211c16 }

/* ============================================================
   ARAH KANAN-KE-KIRI (bahasa Arab)
   ============================================================
   Hampir semua tata letak situs ini memakai flexbox, dan flexbox sudah
   membalik sendiri begitu <html dir="rtl"> dipasang. Yang TIDAK ikut
   membalik hanya tiga hal: posisi mutlak yang ditulis kiri/kanan, geseran
   translateX, dan text-align kiri/kanan yang eksplisit. Hanya itu yang
   diperbaiki di sini — dan hanya saat arahnya rtl, jadi tampilan bahasa
   lain tidak tersentuh sama sekali.                                      */

html[dir="rtl"] body{ text-align:right; }

/* Laci menu ponsel & keranjang: masuk dari kiri, bukan dari kanan. */
html[dir="rtl"] .mobile-menu{ transform:translateX(-100%); }
html[dir="rtl"] .mobile-menu.open{ transform:translateX(0); }

html[dir="rtl"] .cart-drawer{
  right:auto; left:0; transform:translateX(-100%);
  box-shadow:12px 0 32px rgba(0,0,0,.18);
}
html[dir="rtl"] .cart-drawer.open{ transform:translateX(0); }

/* Sidebar panel member & mitra: masuk dari kiri di LTR, jadi harus dari kanan
   di RTL. Keduanya memakai inset dan translateX yang ditulis tangan, dan
   keduanya tidak ikut membalik sendiri. */
html[dir="rtl"] #partnerSidebar,
html[dir="rtl"] #memberSidebar{ inset:0 0 0 auto; transform:translateX(100%) }
html[dir="rtl"] #partnerSidebar.open,
html[dir="rtl"] #memberSidebar.open{ transform:translateX(0) }

/* Dua tombol yang teksnya dipaksa rata kiri di site.css. */
html[dir="rtl"] .faq-q,
html[dir="rtl"] .vgal-card{ text-align:right; }

/* Jarak radio pada pilihan ongkir. */
html[dir="rtl"] .shipping-option input[type="radio"]{ margin-right:0; margin-left:.6rem; }

/* Angka, harga, kode pesanan dan nomor telepon tetap kiri-ke-kanan walau
   kalimat di sekitarnya kanan-ke-kiri — kalau tidak, "Rp 125.000" bisa
   tampil terbalik. */
html[dir="rtl"] .cart-count,
html[dir="rtl"] .harga,
html[dir="rtl"] .price,
html[dir="rtl"] time,
html[dir="rtl"] .mono,
html[dir="rtl"] code{ direction:ltr; unicode-bidi:isolate; }

/* Bahasa Arab butuh tinggi baris sedikit lebih longgar: hurufnya punya
   tanda di atas dan di bawah garis yang akan bersinggungan pada 1.6. */
html[lang="ar"] body{ line-height:1.85; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3{ line-height:1.45; }

/* Huruf Han tidak punya spasi antar kata; pemenggalan barisnya berbeda. */
html[lang="zh"] body{ line-height:1.8; letter-spacing:.01em; }
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3{ letter-spacing:.02em; }

/* ── Menu HP: gulungan vertikal ──────────────────────────────────────────
   Isi menunya lebih tinggi daripada layar (1.306px pada layar 844px), jadi
   bagian bawahnya hanya bisa dicapai dengan menggulung. Tiga tambahan:

   overscroll-behavior:contain  menghentikan "scroll chaining" — tanpa ini,
                                begitu menu mentok di bawah, gulungannya
                                diteruskan ke halaman di belakang dan menu
                                terasa lepas kendali.
   touch-action:pan-y           menyatakan tegas bahwa gerakan tegak di sini
                                memang untuk menggulung.
   -webkit-overflow-scrolling   peninggalan untuk iOS lama; tidak merugikan
                                di peramban baru. */
.mobile-menu{
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
/* Anak flex yang isinya bisa memanjang harus boleh menyusut, kalau tidak
   ia memaksa tinggi induknya dan gulungannya tidak pernah aktif. */
.mobile-menu > *{ flex-shrink: 0; }
.mobile-menu ul{ min-height: 0; }