/* ════════════════════════════════════════════════════════════════════════════
   Lapisan responsif — desain aslinya desktop-first dengan style inline, jadi
   penyesuaian layar kecil ditaruh di sini (butuh !important untuk menimpa
   inline). Tampilan desktop TIDAK disentuh sama sekali: semua aturan hanya
   hidup di bawah 900px.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── Kolom teks yang dibatasi persen (mis. max-width:min(460px,44%)) memakai
     lebar penuh di ponsel; kalau tidak, kalimat patah tiap 2–3 kata. ── */
  [style*="max-width:min("] { max-width: 100% !important; }
  [style*="width:50%"] { width: 100% !important; }

  /* Ukuran huruf clamp memakai vw: di layar 375px hasilnya mentok ke batas
     bawah (11px) — dinaikkan agar tetap nyaman dibaca. */
  [style*="font-size:clamp(11px"] { font-size: 13px !important; }
  [style*="font-size:clamp(17px"] { font-size: 16px !important; line-height: 1.6 !important; }
  [style*="font-size:clamp(24px"] { font-size: 21px !important; }
  [style*="font-size:clamp(30px"] { font-size: 24px !important; }
  [style*="font-size:clamp(34px"] { font-size: 27px !important; line-height: 1.2 !important; }

  /* Kartu di dalam deretan mendatar: lebar penuh, tidak lagi separuh layar */
  [style*="flex:0 0"], [style*="min-width:3"], [style*="min-width:4"] {
    flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important;
  }

  /* Huruf terkecil dinaikkan supaya nyaman dibaca di layar kecil */
  [style*="font-size:9"], [style*="font-size:10"], [style*="font-size:11"] { font-size: 12.5px !important; }
  [style*="font-size:12px"] { font-size: 12.8px !important; }

  /* Logo di header: area sentuh dinaikkan ke 44px (tinggi gambarnya 34px) */
  header a:has(img) { min-height: 44px; display: inline-flex !important; align-items: center; }

  /* Sasaran ketuk: tautan & tombol utama minimal nyaman disentuh */
  a[style*="border-radius:999px"], button[style*="border-radius:999px"] {
    min-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }

  /* grid berkolom banyak → satu kolom, KECUALI tabel harga: isinya pendek
     (karat, cap, angka) dan justru lebih terbaca kalau tetap sebaris */
  [style*="grid-template-columns"]:not([data-tabel]) { grid-template-columns: 1fr !important; }
  [data-tabel="karat"] { grid-template-columns: 62px 46px 1fr !important; gap: 8px !important; padding-left: 4px !important; padding-right: 4px !important; }
  [data-tabel="lm"] { grid-template-columns: 1.3fr 1fr !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* deretan mendatar boleh turun baris — KECUALI header (logo + menu harus
     tetap sebaris; kalau dibungkus, logo melar dan menu menimpa hero) */
  [style*="display:flex"]:not(header):not(header *), [style*="display: flex"]:not(header):not(header *) { flex-wrap: wrap !important; }

  /* header tetap satu baris, logo dikunci tingginya, menu digeser mendatar */
  header, header > * { flex-wrap: nowrap !important; }
  header img { height: 34px !important; width: auto !important; max-width: 40vw !important; }
  header { padding-left: 14px !important; padding-right: 14px !important; gap: 10px !important; }

  /* judul raksasa dikecilkan proporsional */
  [style*="font-size:64px"], [style*="font-size: 64px"] { font-size: 34px !important; line-height: 1.15 !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 29px !important; line-height: 1.2 !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 28px !important; line-height: 1.2 !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 26px !important; line-height: 1.25 !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 24px !important; line-height: 1.3 !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 22px !important; line-height: 1.3 !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 21px !important; line-height: 1.32 !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 20px !important; line-height: 1.35 !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 19px !important; line-height: 1.4 !important; }

  /* padding besar dikurangi supaya isi tidak sempit */
  [style*="padding:80px"], [style*="padding: 80px"] { padding: 40px 20px !important; }
  [style*="padding:96px"], [style*="padding: 96px"] { padding: 44px 20px !important; }
  [style*="padding:120px"], [style*="padding: 120px"] { padding: 48px 20px !important; }

  /* menu utama: bisa digeser mendatar, tidak memaksa lebar halaman */
  header nav, header [style*="border-radius:999px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }
  header nav::-webkit-scrollbar { display: none; }

  /* Judul & paragraf yang dipaksa satu baris (white-space:nowrap) harus boleh
     turun baris di ponsel — kalau tidak, teksnya meluber menimpa gambar. */
  h1[style*="nowrap"], h2[style*="nowrap"], h3[style*="nowrap"], p[style*="nowrap"] {
    white-space: normal !important;
  }

  /* Lapisan gradasi mendatar (teks kiri di atas foto kanan) berubah menegak
     supaya tulisan tetap terbaca saat lebar layar tinggal sepertiganya. */
  [style*="linear-gradient(90deg"] {
    background: linear-gradient(180deg, rgba(243,225,193,.96) 0%, rgba(243,225,193,.9) 58%, rgba(243,225,193,.55) 100%) !important;
  }

  /* Foto hero berhenti "bernafas" di ponsel: pembesaran 4,5% memotong tepi
     gambar pada layar sempit dan tak memberi nilai tambah di sana. */
  .gerak [data-hero-foto] { animation: none !important; }

  /* Gambar tidak melebihi layar. height:auto SENGAJA tidak dipaksa: logo
     footer & ikon store tingginya dikunci inline (38px / 20px) — dipaksa auto
     membuat PNG logo tampil sebesar berkas aslinya, memenuhi separuh layar. */
  img { max-width: 100% !important; }

  /* jarak antar kartu dirapatkan */
  [style*="gap:48px"], [style*="gap: 48px"] { gap: 22px !important; }
  [style*="gap:40px"], [style*="gap: 40px"] { gap: 20px !important; }
  [style*="gap:32px"], [style*="gap: 32px"] { gap: 18px !important; }

  /* ── Strip fakta berjalan: WAJIB tetap satu baris ──────────────────────────
     Dua aturan umum di atas (semua flex boleh wrap + width:50% jadi 100%)
     ikut mengenai jalur ticker — paruhnya menumpuk ke bawah dan pil
     border-radius:999px membengkak jadi bulatan raksasa berisi teks
     bertumpuk. Ticker memang dirancang meluber ke samping lalu berjalan. */
  [data-sec="strip"] [style*="display:flex"] { flex-wrap: nowrap !important; }
  [data-sec="strip"] { margin: 12px 12px 0 !important; }

  /* ── Banner aplikasi: teks keluar dari mode tempel-absolut ─────────────────
     Di desktop teks + tombol store MENEMPEL di atas gambar banner
     (position:absolute). Di ponsel gambarnya memendek sementara tumpukan
     teks + dua tombol store makin tinggi — tumpah keluar banner dan
     menimpa footer. Overlay dikembalikan ke aliran normal DI BAWAH gambar,
     dan teks putihnya digelapkan karena latarnya kini putih halaman. */
  [data-sec="aplikasi"] [style*="position:absolute"] { position: static !important; }
  [data-sec="aplikasi"] [style*="max-width:50%"] {
    max-width: 100% !important; transform: none !important; padding: 18px 2px 0 !important;
  }
  [data-sec="aplikasi"] h2, [data-sec="aplikasi"] p { color: #3A2A16 !important; }
  [data-sec="aplikasi"] { padding-bottom: 40px !important; }

  /* Judul 50/42px belum tercakup tangga ukuran di atas — di layar 390px
     "Harga Jual Emas" tampil segede poster. */
  [style*="font-size:50px"], [style*="font-size: 50px"] { font-size: 28px !important; line-height: 1.2 !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 27px !important; line-height: 1.2 !important; }

  /* Kartu fitur di bawah hero: jarak antar kartu & jarak ke banner dirapatkan
     supaya empat kartunya terasa satu kelompok, bukan empat pulau. */
  [data-cms="kartu-hero"] { gap: 10px !important; margin-top: 30px !important; }

  /* Hero tidak perlu memaksa tinggi 560px di ponsel — konten yang menentukan;
     sisanya cuma bidang kosong sebelum strip harga. */
  [data-sec="hero"] { min-height: 0 !important; padding-bottom: 26px !important; }

  /* Napas antar section desktop (88–96px) terasa seperti jurang di layar
     sempit — dirapatkan supaya kartunya terasa nyambung, keluhan owner
     "jarak antar card biar lebih fit". */
  [data-sec="grafik"], [data-sec="faq"] { padding-top: 44px !important; padding-bottom: 36px !important; }
  [data-sec="testimoni"] { padding-top: 44px !important; padding-bottom: 48px !important; }
  [data-sec="harga"] { padding-top: 36px !important; padding-bottom: 52px !important; }
  [data-sec="aplikasi"] { padding-top: 32px !important; }
  [data-sec="kontak"] { margin-bottom: 48px !important; }
}

@media (max-width: 560px) {
  [style*="padding:64px"], [style*="padding: 64px"] { padding: 32px 16px !important; }
  [style*="font-size:64px"], [style*="font-size: 64px"] { font-size: 28px !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 26px !important; }
}


/* ── Tautan kolom footer ──────────────────────────────────────────────────
   Tinggi aslinya 21px — di bawah ambang nyaman-sentuh 40px, dan berdempetan
   satu sama lain sehingga gampang salah ketuk. Ikon sosial (punya aria-label)
   sudah 40x40, jadi dikecualikan. */
@media (max-width: 900px) {
  footer a:not([aria-label]) { display: inline-block; padding-block: 10px; }
  footer img[alt="Bumi Emas"] { height: 38px !important; width: auto !important; }
}


/* ── Baris header ────────────────────────────────────────────────────────
   Padding desktop 34px/44px bikin kepala halaman setinggi 112px di HP —
   seperlima layar habis sebelum isi mulai, dan logo terdorong jauh dari tepi. */
@media (max-width: 900px) {
  header > div[style] { padding: 16px 20px !important; gap: 14px !important; }
}


/* ── Strip fakta berjalan: paruh ticker selebar ISINYA, bukan 50% ─────────────
   Berlaku di SEMUA ukuran layar, bukan hanya ponsel. Desain mengunci jalur
   200% dan tiap paruh 50% (= selebar pil). Itu hanya benar selama isi paruh
   muat di satu layar; begitu strip fakta dari Admin Situs memanjang (16 item),
   isinya meluber melewati 50% dan paruh kedua mulai DI TENGAH teks paruh
   pertama — tumpang tindih yang terlihat di desktop. max-content membiarkan
   tiap paruh selebar isinya; kedua paruh identik, jadi animasi
   translateX(-50%) tetap menyambung mulus berapa pun panjang isinya. */
[data-cms="strip-jalur"] { width: max-content !important; }
[data-cms="strip-jalur"] > div { width: max-content !important; flex: none !important; padding-right: 40px; }