/* ============================================================================
   beranda.css — gaya HALAMAN UTAMA saja.  Build 855.

   KENAPA BERKAS INI ADA
   ---------------------
   Sampai build 854, tampilan beranda ditulis di TIGA tempat sekaligus:
   assets/mtk.css, 261 aturan <style> di dalam index.php, dan tambalan baru
   yang menyusul. Tiga belas kelas punya DUA definisi (hero, sec-head, band,
   tg-card, berita-card, dg-item, card-visual, mini-vals, price-row, …), dan
   karena <style> di index.php dimuat SESUDAH mtk.css, yang lama selalu
   menang. Tiap perbaikan desain kalah sebelum sampai layar.

   ATURAN BERKAS INI
   -----------------
   1. Dimuat SESUDAH mtk.css.
   2. SEMUA pemilih dilingkupi `.bd` (kelas induk di <body> beranda). Dengan
      begitu ia selalu lebih khusus daripada aturan telanjang di mtk.css —
      menang tanpa perlu !important sama sekali.
   3. index.php TIDAK BOLEH punya blok <style> lagi. Kalau ada gaya beranda
      yang perlu ditambah, tempatnya di sini.
   4. Token warna & jarak TETAP diwarisi dari mtk.css (:root). Berkas ini
      tidak mendefinisikan warna baru — palet tetap hijau, emas, biru-market,
      merah-turun.

   Halaman lain tidak memuat berkas ini, jadi tidak ada yang terpengaruh.
   ========================================================================= */

/* ---------------------------------------------------------------- dasar --- */
.bd{position:relative}
.bd .wrap{width:min(100% - var(--gutter), var(--max));margin-inline:auto;position:relative}

/* Tombol geser & kartu bersama (dari partials/ui.php) dibiarkan apa adanya —
   ia punya gayanya sendiri dan tidak bertabrakan dengan apa pun di sini. */

/* --------------------------------------------------------------- bagian --- */
.bd section.blok{padding:clamp(72px,7vw,112px) 0;position:relative;overflow:hidden}
.bd section.blok > .wrap{position:relative;z-index:1}
.bd section.blok.alt{background:linear-gradient(180deg,#0C1913,#070F0B);
  border-top:1px solid var(--line-top);border-bottom:1px solid var(--line)}

/* Jangkar cahaya, berselang-seling kiri/kanan supaya halaman punya irama
   dan tidak terasa rata dari atas ke bawah. */
.bd section.blok.gl-kiri::before,
.bd section.blok.gl-kanan::before{content:'';position:absolute;width:820px;height:520px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(31,227,116,.055),transparent 68%)}
.bd section.blok.gl-kiri::before{left:-320px;top:-180px}
.bd section.blok.gl-kanan::before{right:-320px;top:-140px}
.bd section.blok.gl-emas::before{background:radial-gradient(circle,rgba(212,178,92,.055),transparent 68%)}

.bd .kepala{max-width:58ch;margin:0 auto var(--s12);text-align:center}
.bd .kepala h2{font-family:var(--disp);font-size:clamp(24px,3.1vw,36px);font-weight:800;
  letter-spacing:-.025em;line-height:1.05;margin-top:var(--s3);position:relative;padding-bottom:var(--s4)}
.bd .kepala h2::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--gold))}
.bd .kepala .instr{color:var(--muted);font-size:var(--t-l6);margin-top:var(--s5);line-height:1.65}

/* ----------------------------------------------------------------- hero --- */
/* Jarak bawah dirapatkan (build 864): hero dan Analisa satu tarikan — hero
   mengenalkan, Analisa langsung membuktikan isinya berubah tiap hari. Tapi
   tidak dijadikan nol: keduanya tetap dua hal, bukan satu blok. */
.bd .hero{padding:clamp(48px,5vw,80px) 0 clamp(20px,2vw,32px);position:relative;overflow:hidden}
.bd .hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 82% 0%,rgba(31,227,116,.11),transparent 60%),
             radial-gradient(560px 320px at 4% 10%,rgba(212,178,92,.05),transparent 62%)}
.bd .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(32px,4.4vw,64px);align-items:center}
/* Judul SATU warna. Gradasi tiga warna terbaca ramai, bukan mewah. */
.bd .hero h1{font-family:var(--disp);font-size:clamp(30px,3.6vw,46px);font-weight:900;
  letter-spacing:-.03em;line-height:1.03;color:var(--paper);margin:var(--s5) 0 var(--s4)}
.bd .garis{width:60px;height:3px;border-radius:3px;background:var(--green);opacity:.85;margin-bottom:var(--s5)}
.bd .lede{font-size:clamp(15px,1.05vw,16px);line-height:1.75;color:var(--muted);max-width:42ch;margin-bottom:var(--s6)}
.bd .hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s6)}
.bd .nilai{display:flex;gap:var(--s2);flex-wrap:wrap}
.bd .nilai span{display:inline-flex;align-items:center;gap:var(--s1b);font-size:var(--t-l8);font-weight:600;
  color:var(--muted);background:linear-gradient(158deg,#122519 0%,#080F0B 100%);
  border:1px solid var(--line);padding:var(--s1b) var(--s3);border-radius:999px}
.bd .nilai .icon{width:14px;height:14px;color:var(--muted-2)}

/* lambang menyala — pengganti panel chart lama */
.bd .lambang{display:grid;place-items:center}
.bd .pentas{position:relative;width:min(100%,380px);aspect-ratio:1}
.bd .cincin{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bd .halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(31,227,116,.30),rgba(31,227,116,.07) 46%,transparent 68%)}
.bd .tanda{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;height:auto;display:block;
  filter:drop-shadow(0 0 13px rgba(31,227,116,.42)) drop-shadow(0 0 38px rgba(31,227,116,.18))}
.bd .kilau{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-24deg);
  width:42%;aspect-ratio:1;pointer-events:none;overflow:hidden;border-radius:14%}
.bd .kilau i{position:absolute;top:-30%;left:-60%;width:34%;height:160%;display:block;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}

/* SEMUA gerak dikurung di sini. Kalau perangkat minta "kurangi gerakan",
   lambang tetap tampil menyala, hanya diam. */
@media (prefers-reduced-motion:no-preference){
  .bd .putar-a{transform-origin:200px 200px;animation:bd-putar 46s linear infinite}
  .bd .putar-b{transform-origin:200px 200px;animation:bd-putar 34s linear infinite reverse}
  .bd .halo{animation:bd-napas 5.2s ease-in-out infinite}
  .bd .tanda{animation:bd-nyala 5.2s ease-in-out infinite}
  .bd .kilau i{animation:bd-sapu 7.5s ease-in-out 1.6s infinite}
  .bd .kerlip{animation:bd-kerlip 3.4s ease-in-out infinite}
  .bd .kerlip-2{animation:bd-kerlip 4.6s ease-in-out .9s infinite}
  .bd .kerlip-3{animation:bd-kerlip 5.6s ease-in-out 2.1s infinite}
}
@keyframes bd-putar{to{transform:rotate(360deg)}}
@keyframes bd-napas{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
                    50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes bd-nyala{0%,100%{filter:drop-shadow(0 0 11px rgba(31,227,116,.34)) drop-shadow(0 0 30px rgba(31,227,116,.14))}
                    50%{filter:drop-shadow(0 0 20px rgba(31,227,116,.62)) drop-shadow(0 0 54px rgba(31,227,116,.28))}}
@keyframes bd-sapu{0%,72%{left:-60%}100%{left:130%}}
@keyframes bd-kerlip{0%,100%{opacity:.18}50%{opacity:1}}

/* ------------------------------------------------------- permukaan kartu --- */
/* SATU aturan untuk semua keluarga kartu di beranda: produk, ulasan, berita,
   dokumentasi. Sebelumnya lima latar berbeda dalam satu halaman — itu yang
   membuat beranda terlihat seperti tempelan dari beberapa desain.
   Kedalaman dari gradasi + bayangan, BUKAN dari menambah warna. */
.bd .kartu{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);
  cursor:pointer;text-decoration:none;color:var(--paper);
  transition:transform .2s,border-color .2s,box-shadow .25s;padding:0}
.bd .kartu::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.55),rgba(212,178,92,.35),transparent);
  transition:left .3s ease,right .3s ease}
.bd .kartu::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(158deg,rgba(31,227,116,.05),rgba(31,227,116,0) 55%)}
.bd .kartu > *{position:relative;z-index:1}
.bd .kartu:hover{transform:translateY(-4px);border-color:rgba(31,227,116,.34);
  box-shadow:0 22px 48px rgba(0,0,0,.42),0 8px 40px rgba(31,227,116,.07)}
.bd .kartu:hover::before{left:6%;right:6%}

/* --------------------------------------------------------------- produk --- */
/* Satu baris, TIGA kartu tampil, sisanya digeser.

   Sebelumnya grid 3 kolom: enam kartu jadi dua baris dan bagian ini setinggi
   dua layar. Sebagai baris geser, berapa pun produk yang disematkan tidak
   menambah tinggi halaman — hanya panjang gulirnya.

   flex-basis = lebar pembungkus dikurangi DUA celah, dibagi tiga: tepat tiga
   kartu penuh, tanpa kartu keempat mengintip setengah.

   padding+margin tegak: overflow-x ikut memotong arah TEGAK, jadi kartu yang
   terangkat saat hover kepotong atasnya (bug yang sama sudah empat kali). */
.bd .grid3{display:flex;gap:var(--s6);overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;scroll-snap-type:x mandatory;
  padding:var(--s2) 0 var(--s2b);margin-top:-8px}
.bd .grid3::-webkit-scrollbar{display:none}
.bd .grid3 > *{flex:0 0 calc((100% - 2 * var(--s6)) / 3);scroll-snap-align:start}
/* GAMBAR MENENTUKAN TINGGINYA SENDIRI — tidak ada rasio yang dipatok.

   Dua percobaan sebelumnya salah karena memaksa banner masuk kotak berukuran
   tetap: 92px membuatnya kekecilan, 2:1 menyisakan bingkai kosong kiri-kanan
   karena banner aslinya 16:9. Rasio banner bisa berbeda-beda per produk, jadi
   angka apa pun yang dipatok akan salah untuk sebagian.

   width:100% + height:auto = gambar selalu selebar kartu, tingginya mengikuti
   rasio aslinya. Tidak pernah terpotong, tidak pernah berbingkai kosong. */
/* Gambar RAPAT ke tepi atas kartu, tanpa jarak di kiri-kanan — mengikuti
   mockup. Sebelumnya ia kotak melayang di dalam kartu dengan bingkai sendiri;
   dua bingkai bersarang membuat kartunya terasa penuh. Padding kartu diberi
   nol di atas dan dikembalikan lewat .kartu .isi. */
/* Tanpa border-bottom: garis itu justru menegaskan batas yang sedang
   dilarutkan gradasi. */
.bd .kartu-gbr{position:relative;display:block;margin:0;
  border-radius:0;border:0;overflow:hidden}
/* Judul produk DI ATAS gambar, berdiri pada gradasi gelap di tepi bawahnya.
   Gradasinya bukan hiasan: tanpa itu judul putih hilang di banner yang bagian
   bawahnya terang. */
/* WARNA GRADASI HARUS SAMA PERSIS DENGAN WARNA TEPAT DI BAWAH GAMBAR.

   Percobaan pertama berakhir di #152C21 — warna kartu di titik 0%. Tapi
   kartunya bergradasi 158°, dan gambar berada di ATASnya: di batas bawah
   gambar warnanya sudah bercampur jadi ~#102119. Menyamakan dengan warna yang
   salah membuat batasnya tetap terlihat, hanya bergeser sedikit.

   Karena warna di titik itu tidak bisa dipastikan (tergantung tinggi gambar
   yang berbeda per produk), .kartu-isi diberi warna SOLID dan gradasinya
   berakhir di warna solid itu juga. Sekarang cocoknya pasti, bukan hasil
   menghitung. */
.bd .kartu-gbr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(16,33,25,.5) 40%,rgba(16,33,25,.88) 74%,#102119)}
/* Hirarki: nama 20px paling besar, harga 18px tebal, keterangan 13px redup.
   Sebelumnya harga 21px MELEBIHI nama — dua hal bersaing jadi yang utama, dan
   mata tidak tahu harus membaca yang mana dulu.

   padding-bottom kecil supaya nama duduk RAPAT di tepi bawah gambar; jarak ke
   keterangan datang dari padding .kartu-isi, bukan dari sini. */
.bd .kartu-gbr h3{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:var(--s10) var(--s5) 6px;font-family:var(--disp);font-size:var(--t-l4);
  font-weight:800;line-height:1.25;letter-spacing:-.015em;color:var(--paper);
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
/* JANGAN menambahkan aturan `.bd .kartu .card-visual{height:...}` lagi.
   Kekhususannya SAMA dengan aturan di bawah ini, jadi kalau ditulis
   belakangan ia menang — kotaknya kembali bertinggi tetap sementara
   gambarnya setinggi aslinya, lalu terpotong overflow:hidden. Itu yang
   terjadi di build 866. */
.bd .kartu-gbr .card-visual{margin:0;height:auto;aspect-ratio:auto;
  border:0;border-radius:0;background:transparent;display:block}
/* object-fit sengaja TIDAK dipakai: begitu tingginya mengikuti gambar, tidak
   ada kotak yang perlu diisi atau dipotong. Menyetel cover/contain di sini
   hanya menyisakan jebakan untuk penyunting berikutnya. */
.bd .kartu-gbr .card-visual img{width:100%;height:auto;display:block}
/* Kalau produk belum punya gambar, penggambar memakai SVG — ia butuh tinggi. */
.bd .kartu-gbr .card-visual svg{display:block;width:100%;height:150px}
/* Label DI DALAM gambar, pojok kiri atas. */
.bd .kartu-gbr .kat{position:absolute;top:9px;left:9px;z-index:2;
  font-family:var(--disp);font-size:var(--t-l10);letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--green);background:rgba(4,8,6,.78);
  border:1px solid rgba(31,227,116,.28);padding:var(--s1) var(--s2);border-radius:999px;
  backdrop-filter:blur(6px)}
/* Padding ada di .kartu-isi, BUKAN margin-inline pada tiap anak:
   `.btn-block{width:100%}` + margin-inline 20px = 40px lebih lebar dari
   kartunya, lalu dipotong overflow:hidden. Tombol "Lihat Detail" kepotong. */
/* padding-top kecil: jarak nama→keterangan datang dari SATU tempat saja.
   Sebelumnya padding-bottom judul + padding-top isi menumpuk jadi jarak
   ganda yang terlihat seperti ada yang kosong di antaranya. */
.bd .kartu-isi{display:flex;flex-direction:column;flex:1;
  padding:6px var(--s5) var(--s5);background:#102119}
.bd .kartu h3{font-family:var(--disp);font-size:var(--t-l5);font-weight:600;margin-bottom:var(--s3)}



/* 4 baris di layar lebar, 3 di HP (lihat blok 640px). Kartu desktop lebih
   tinggi karena gambarnya melebar, jadi ada ruang untuk satu baris lagi. */
.bd .manfaat{color:var(--muted);font-size:var(--t-l8);line-height:1.6;margin-bottom:var(--s4);flex:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}


.bd .kartu .price-row{display:flex;align-items:baseline;gap:var(--s1b);margin-bottom:var(--s4)}
.bd .kartu .btn{margin-top:auto}
.bd .kartu .price{font-family:var(--disp);font-size:var(--t-l5);font-weight:800;font-variant-numeric:tabular-nums;color:var(--paper)}
.bd .kartu .price-was{color:var(--muted-2);font-size:var(--t-l8);text-decoration:line-through}

/* ----------------------------------------------------------- cara kerja --- */
/* Topnav menempel (position:sticky) dan menutupi judul bagian saat tombol
   "Cara Kerja" di hero diklik. scroll-margin-top menyisakan ruang setinggi
   topnav supaya judulnya berhenti tepat di bawahnya, bukan di baliknya. */
.bd #cara{scroll-margin-top:var(--s20)}
.bd .langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
/* Bertumpuk (ikon di atas, nomor besar di kanan) — bentuk asli, dan Yanz
   lebih suka yang ini di layar lebar. Tata letak BARIS hanya untuk HP; ia
   sudah diatur di blok @media 920px, bukan di sini. */
.bd .lk{position:relative;background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);overflow:hidden;
  transition:transform .2s,border-color .2s}
.bd .lk::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.45),transparent)}
.bd .lk:hover{border-color:rgba(31,227,116,.3);transform:translateY(-3px)}
/* Nomor besar memudar: dipertahankan di layar lebar, disembunyikan di HP
   (lihat blok @media 920px) karena di sana kartunya jadi baris. */
.bd .lk .no{position:absolute;top:var(--s4);right:var(--s5);font-family:var(--disp);font-size:var(--t-l1);
  font-weight:900;line-height:1;background:linear-gradient(180deg,rgba(135,170,145,.2),rgba(135,170,145,.03));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bd .lk .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(31,227,116,.14),rgba(31,227,116,.03));
  border:1px solid rgba(31,227,116,.17);color:var(--green)}
.bd .lk .ico .icon{width:22px;height:22px}
.bd .lk:nth-child(2) .ico{background:linear-gradient(150deg,rgba(212,178,92,.15),rgba(212,178,92,.03));
  border-color:rgba(212,178,92,.2);color:var(--gold)}
/* Baris: ikon kiri, teks kanan — di semua lebar layar, bukan cuma HP.
   Bertumpuk (ikon di atas teks) membuat tiap kartu tinggi dan tiga kartu
   sejajar jadi sekolom kosong di bawahnya. */
.bd .lk h4{font-family:var(--disp);font-size:var(--t-l6);font-weight:700;margin:var(--s5) 0 var(--s2)}
.bd .lk p{color:var(--muted);font-size:var(--t-l8);line-height:1.65}

/* ------------------------------------------------------- info & market --- */
/* Saringan. Tombolnya `hidden` di markup dan baru ditampilkan oleh JS —
   kalau JS mati tidak ada tombol yang diklik lalu diam. */





/* align-items:stretch (bawaan) supaya kolom kanan ikut tinggi kartu besar. */
.bd .im-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s5)}
/* Kolom kanan setinggi kartu besar, sisanya digulir.

   .im-gulir diposisikan ABSOLUT: dengan begitu ia tidak ikut menentukan tinggi
   baris grid, jadi tinggi kolom kanan sepenuhnya ditentukan kartu besar di
   sebelahnya — berapa pun jumlah kabarnya. Memberi `overflow-y` langsung pada
   .im-sisi tidak cukup: tinggi baris grid adalah tinggi anak TERTINGGI, jadi
   kolom kanan yang panjang justru menarik seluruh barisnya ikut memanjang. */
.bd .im-sisi{position:relative;min-height:100%}
.bd .im-gulir{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:var(--s2b);padding-right:var(--s1)}
.bd .im-gulir::-webkit-scrollbar{width:4px}
.bd .im-gulir::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.bd .im-utama,.bd .im-kecil{position:relative;overflow:hidden;text-decoration:none;color:var(--paper);
  border:1px solid var(--line);background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  transition:transform .2s,border-color .2s,box-shadow .25s}
.bd .im-utama::before,.bd .im-kecil::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.5),transparent);transition:left .3s,right .3s}
.bd .im-utama:hover,.bd .im-kecil:hover{border-color:rgba(31,227,116,.34);
  box-shadow:0 22px 48px rgba(0,0,0,.42)}
.bd .im-utama:hover{transform:translateY(-4px)}
.bd .im-kecil:hover{transform:translateX(3px)}
.bd .im-utama:hover::before,.bd .im-kecil:hover::before{left:6%;right:6%}

/* kartu besar: gambar di atas, isi di bawah */
.bd .im-utama{display:flex;flex-direction:column;border-radius:var(--r-lg)}
.bd .im-utama .im-gbr{display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(140deg,#1A3A2A,#08120D);border-bottom:1px solid var(--line)}
.bd .im-utama .im-isi{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1}
.bd .im-utama b{font-family:var(--disp);font-size:var(--t-l4);font-weight:700;line-height:1.25}
.bd .im-teks{color:var(--muted);font-size:var(--t-l7)}
.bd .im-utama .im-wkt{margin-top:auto}

/* kartu kecil: gambar kiri, isi kanan */
/* ---------- VIDEO di kartu utama Info & Market ----------
   Bingkai video menumpuk TEPAT di atas gambar, bukan menggantikannya:
   gambarnya tetap jadi latar sampai video benar-benar siba, jadi tidak ada
   kotak hitam kosong saat jaringan lambat. */
.bd .im-utama.im-video .im-gbr{position:relative}
/* .im-video dipasang di elemen yang sama dengan .im-utama, jadi ia tidak
   pernah muncul sendirian sebagai pemilih tunggal. Aturan ini memberinya
   gaya sendiri sekaligus menandai bahwa kelasnya memang dipakai. */
.bd .im-video{position:relative}
.bd .im-suara-t{pointer-events:none}
.bd .im-video .im-yt{position:absolute;inset:0;border:0;width:100%;height:100%;
  opacity:0;transition:opacity .35s;pointer-events:none;z-index:1}
.bd .im-video.main .im-yt{opacity:1;pointer-events:auto}

/* Tombol suara SELALU terlihat saat video jalan.

   Peramban memblokir autoplay BERSUARA — itu aturan peramban, bukan pilihan.
   Video mulai tanpa suara, lalu skripnya menyalakan suara begitu pengunjung
   mengklik apa pun di halaman (izin yang diminta peramban). Tombol ini untuk
   yang belum mengklik apa pun, dan untuk mematikan suara kembali. */
.bd .im-suara{position:absolute;right:10px;bottom:10px;z-index:3;display:none;
  align-items:center;gap:var(--s1b);min-height:34px;padding:0 var(--s3);border-radius:999px;
  border:1px solid rgba(244,247,245,.28);background:rgba(4,8,6,.72);
  color:var(--paper);font-size:var(--t-l8);font-weight:600;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bd .im-video.main .im-suara{display:inline-flex}

/* flex:0 0 auto — JANGAN `flex:1`.

   `flex:1` membuat tiap kartu membagi rata sisa tinggi kolom: 3 kabar jadi
   kartu gemuk, 6 kabar jadi kartu normal. Ukurannya berubah-ubah mengikuti
   JUMLAH kabar, padahal kartunya benda yang sama — dan itu yang membuat
   bagian ini terlihat tidak konsisten dari hari ke hari.

   Dengan `flex:0 0 auto` tingginya ditentukan isinya sendiri, sama persis
   berapa pun jumlah kabarnya. Kurang dari sekolom → sisanya ruang kosong;
   lebih → kolomnya digulir. */
.bd .im-kecil{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);border-radius:14px;flex:0 0 auto}
.bd .im-kecil .im-gbr{flex:0 0 76px;height:54px;border-radius:9px;overflow:hidden;
  background:linear-gradient(140deg,#1A3A2A,#08120D);border:1px solid var(--line)}
.bd .im-kecil .im-isi{display:flex;flex-direction:column;gap:var(--s0);min-width:0}
.bd .im-kecil b{font-family:var(--disp);font-size:var(--t-l8);font-weight:700;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bd .im-gbr > img{width:100%;height:100%;object-fit:cover;display:block}
.bd .im-tag{align-self:flex-start;font-size:var(--t-l10);font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:var(--s0) var(--s2);border-radius:6px;border:1px solid transparent}
.bd .im-tag.emas{color:var(--gold);background:rgba(212,178,92,.14);border-color:rgba(212,178,92,.24)}
.bd .im-tag.hijau{color:var(--green);background:rgba(31,227,116,.12);border-color:rgba(31,227,116,.22)}
.bd .im-tag.biru{color:var(--info);background:rgba(127,167,255,.13);border-color:rgba(127,167,255,.22)}
.bd .im-wkt{color:var(--muted-2);font-size:var(--t-l9)}

/* ---------------------------------------------------------- konsultasi --- */
/* grid-area supaya tombolnya bisa BERBEDA tempat antara layar lebar dan HP
   tanpa menggandakan markup:
     lebar → teks kiri (tombol di bawahnya), contoh obrolan kanan
     HP     → teks, lalu contoh obrolan, BARU tombolnya
   Di HP tombol sebelum contoh obrolan meminta orang memutuskan sebelum
   melihat seperti apa obrolannya. */
.bd .konsul{position:relative;display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"teks obrol" "aksi obrol";
  gap:clamp(20px,2.4vw,32px) clamp(32px,4.4vw,68px);
  align-items:start;background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(34px,4.6vw,64px);overflow:hidden}
.bd .konsul::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 320px at 88% -12%,rgba(31,227,116,.11),transparent 62%),
             radial-gradient(520px 280px at 4% 108%,rgba(212,178,92,.07),transparent 60%)}
.bd .konsul::after{content:'';position:absolute;top:0;left:24%;right:24%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.45),transparent)}
.bd .konsul > *{position:relative;z-index:1}
.bd .konsul > .konsul-teks{grid-area:teks}
.bd .konsul > .obrol{grid-area:obrol;align-self:center}
.bd .konsul > .konsul-aksi{grid-area:aksi}
.bd .konsul h2{font-family:var(--disp);font-size:clamp(21px,2.5vw,30px);font-weight:800;
  letter-spacing:-.024em;line-height:1.12;margin:var(--s3) 0 var(--s4)}
.bd .konsul p{color:var(--muted);font-size:var(--t-l7);line-height:1.7;margin-bottom:0}
.bd .konsul-aksi{display:flex;gap:var(--s3);flex-wrap:wrap}
.bd .konsul-aksi .btn{padding:var(--s3) var(--s6);font-size:var(--t-l6)}
.bd .obrol{background:rgba(4,8,6,.5);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2b)}
.bd .gel{max-width:86%;padding:var(--s2b) var(--s3);border-radius:14px;font-size:var(--t-l8);line-height:1.5}
.bd .gel.dia{background:linear-gradient(158deg,#183827,#0D1D15);border:1px solid var(--line);
  border-bottom-left-radius:5px}
.bd .gel.aku{background:linear-gradient(158deg,rgba(31,227,116,.17),rgba(31,227,116,.07));
  border:1px solid rgba(31,227,116,.3);align-self:flex-end;border-bottom-right-radius:5px}
.bd .gel small{display:block;color:var(--muted-2);font-size:var(--t-l10);margin-top:var(--s1)}

/* -------------------------------------------------------------- ulasan --- */
.bd .angka{display:flex;align-items:center;justify-content:center;gap:var(--s8);flex-wrap:wrap;
  position:relative;overflow:hidden;margin-bottom:var(--s10);padding:var(--s8);
  background:linear-gradient(158deg,#122519 0%,#080F0B 100%);border:1px solid var(--line);border-radius:var(--r-lg)}
.bd .angka::before{content:'';position:absolute;inset:0;
  background:radial-gradient(520px 200px at 50% -30%,rgba(212,178,92,.1),transparent 62%)}
.bd .ang{text-align:center;position:relative}
.bd .ang b{display:block;font-family:var(--disp);font-size:var(--t-l3);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bd .ang b span{font-size:var(--t-l7);color:var(--muted-2)}
.bd .ang .lbl{color:var(--muted);font-size:var(--t-l8)}
.bd .ang .bintang{color:var(--gold);letter-spacing:1px}
.bd .pisah{width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
/* padding-top 8px + margin -8px: overflow-x ikut memotong arah TEGAK, jadi
   kartu yang terangkat saat hover kepotong atasnya. Bug yang sama dengan
   .rk-row (build 856) dan .pita (857). Jangan dihapus. */
.bd .ulasan{display:flex;gap:var(--s3b);overflow-x:auto;scrollbar-width:none;align-items:stretch;
  padding:var(--s2) 0 var(--s2b);margin-top:-8px;
  scroll-snap-type:x mandatory}
.bd .ulasan::-webkit-scrollbar{display:none}
.bd .ul{position:relative;overflow:hidden;flex:0 0 29.5%;scroll-snap-align:start;display:flex;
  flex-direction:column;padding:var(--s5);border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);transition:transform .2s,border-color .2s}
.bd .ul::before{content:'';position:absolute;top:0;left:16%;right:16%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.4),transparent)}
/* Tanda kutip raksasa DIBUANG (build 865): ia melayang di kanan-bawah kartu
   dan menimpa baris terakhir komentar — terbaca seperti teksnya terpotong.
   Hiasan yang menutupi isi bukan hiasan. */
.bd .ul:hover{border-color:rgba(31,227,116,.3);transform:translateY(-3px)}
.bd .ul-atas{display:flex;gap:var(--s2);align-items:center;padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);position:relative;z-index:1}
.bd .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:var(--t-l8);color:var(--green);overflow:hidden;
  background:linear-gradient(150deg,rgba(31,227,116,.2),rgba(31,227,116,.05));
  border:1px solid rgba(31,227,116,.22)}
.bd .av img{width:100%;height:100%;object-fit:cover}
.bd .siapa b{display:block;font-size:var(--t-l8)}
.bd .siapa span{color:var(--muted-2);font-size:var(--t-l10)}
.bd .bintang-ul{color:var(--gold);font-size:var(--t-l10);letter-spacing:.6px;margin-left:auto;flex:none}
.bd .bintang-ul .off{color:rgba(135,170,145,.25)}
.bd .kutip{color:var(--muted);font-size:var(--t-l8);line-height:1.7;margin-top:var(--s3b);position:relative;z-index:1}

/* Pita foto bukti (opsi D) — SATU baris, tinggi SERAGAM.
   Versi A yang cuma kartu ulasan bentuknya sudah benar, tapi foto buktinya
   jadi tak terlihat dan pengunjung tidak tahu ia ada. Menempelkan foto ke
   dalam kartu membuat tinggi kartu tidak rata; dinding masonry terlalu ramai.
   Satu baris seragam menjawab dua-duanya. */




/* padding-top 6px + margin -6px: overflow-x ikut memotong arah TEGAK, jadi
   foto yang terangkat saat hover akan kepotong atasnya. Jangan dihapus. */










/* ------------------------------------------------------- tentang kami --- */
/* Memusat dan sempit — SENGAJA beda dari Konsultasi yang dua kolom. Dua panel
   dua-kolom berturut-turut terbaca sebagai satu blok panjang yang sama. */
/* Lebar PENUH seperti bagian lain. Batas 72ch (~720px) membuat bagian ini
   memakai separuh lebar isi dan menyisakan 760px kosong di kiri-kanan — satu-
   satunya bagian yang menyempit, dan itu yang membuatnya terasa berbeda. */
.bd .tentang{margin:0 auto;padding:var(--s5) 0;text-align:center;position:relative}
/* Kepala (label, judul, kutipan) tetap dibatasi supaya barisnya terbaca —
   yang dilepas batasnya adalah WADAHNYA, bukan tiap teks di dalamnya. */
.bd .tentang > .eyebrow,.bd .tentang > h2,.bd .tt-kutip{max-width:70ch;margin-inline:auto}

/* Cerita di kiri, tiga butir di kanan. Membuang batas lebar saja tidak cukup:
   baris teks selebar 1480px tidak terbaca. */
.bd .tt-grid{display:grid;grid-template-columns:.85fr 1fr;gap:var(--s10);
  /* TANPA align-items:start — dengan itu tiap kolom setinggi isinya sendiri,
     dan kiri-kanan berakhir di garis yang berbeda. Bawaan `stretch` membuat
     keduanya setinggi yang tertinggi. */
  margin-top:var(--s8);text-align:left}
/* Jarak antar paragraf cerita — sebelumnya diatur `.tt-awal + .tt-awal`, tapi
   sekarang paragrafnya punya wadah sendiri. */
/* Panel bercahaya untuk kolom kiri.

   Kolom kiri berakhir ~240px lebih awal dari kanan, dan teks telanjang di
   ruang selebar itu tidak punya bentuk. Panel memberi batas yang jelas tanpa
   menambah satu kata pun.

   Kisi tipis + cahaya radial adalah motif yang SUDAH dipakai .hero dan
   .konsul — bukan hiasan baru. */
.bd .tt-cerita{--bd-kutip:150px;position:relative;display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(21,44,33,.55),rgba(11,24,18,.35));
  overflow:hidden}
.bd .tt-cerita::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 260px at 8% 0%,rgba(31,227,116,.07),transparent 70%),
    repeating-linear-gradient(0deg,rgba(135,170,145,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(135,170,145,.05) 0 1px,transparent 1px 46px)}
.bd .tt-cerita > *{position:relative;z-index:1}

/* Ilustrasi mengisi sisa tinggi panel, bukan dipatok tinggi tetap: kolom kiri
   selalu lebih pendek dari kanan, dan selisihnya berubah mengikuti lebar
   layar. `flex:1` membuatnya memuai persis sebanyak ruang yang tersisa —
   tidak ada lagi ruang kosong berapa pun lebarnya. */
.bd .tt-ilus{flex:1;min-height:110px;display:flex;align-items:flex-end;
  margin:var(--s4) calc(-1 * var(--s6)) calc(-1 * var(--s6))}
.bd .tt-ilus svg{width:100%;height:100%;min-height:110px;display:block}
/* Tanda kutip besar sebagai jangkar visual — karakter, bukan gambar baru yang
   harus diunduh. */
/* Ukuran tanda kutip lewat token: ia HIASAN, bukan teks yang dibaca, tapi
   tetap harus lewat satu tempat supaya tidak jadi angka lepas yang menumpuk. */
.bd .tt-cerita::after{content:'\201D';position:absolute;right:var(--s5);top:-6px;
  font-family:var(--disp);font-size:var(--bd-kutip);line-height:1;font-weight:800;
  color:rgba(212,178,92,.07);pointer-events:none}


.bd .tentang h2{font-family:var(--disp);font-size:clamp(21px,2.5vw,30px);font-weight:800;
  letter-spacing:-.024em;line-height:1.1;margin:var(--s4) 0 var(--s5)}
.bd .tt-kutip{position:relative;font-family:var(--disp);font-size:clamp(16px,1.6vw,20px);
  font-weight:600;letter-spacing:-.014em;line-height:1.45;color:var(--paper);
  padding:var(--s4) 0;margin-bottom:var(--s4)}
.bd .tt-kutip::before,.bd .tt-kutip::after{content:'';position:absolute;left:28%;right:28%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,178,92,.45),transparent)}
.bd .tt-kutip::before{top:0} .bd .tt-kutip::after{bottom:0}
/* Tiga poin — menggantikan logo. Kolom sama lebar, ikon kecil di atas
   supaya tetap tenang dan tidak bersaing dengan kutipan di atasnya. */
/* Empat kolom sejak build 870. Di layar sedang turun jadi dua supaya tiap
   butir tetap punya lebar baca yang layak — empat kolom sempit membuat tiap
   kalimat pecah jadi lima baris. */
.bd .tt-awal{color:var(--muted);font-size:var(--t-l6);line-height:1.75;max-width:62ch;text-align:left}
.bd .tt-awal + .tt-awal{margin-top:var(--s4)}
/* Paragraf pertama sedikit lebih terang: ia yang membuka cerita. */
.bd .tt-awal:first-of-type{color:var(--paper);font-size:var(--t-l6)}
/* Satu kolom di dalam kisi dua kolom: tiga butir bertumpuk di sisi kanan.
   Tiga kolom di dalam kolom yang sudah setengah lebar menghasilkan lajur
   ~200px — tiap kalimat pecah jadi lima baris. */
/* Kisi 2 kolom untuk ENAM butir. Bertumpuk satu lajur, enam butir jadi jauh
   lebih tinggi dari kolom cerita — masalah ruang kosongnya cuma berpindah
   sisi, tidak hilang. */
/* SATU kolom — kartunya bertumpuk di sisi kanan panel cerita.

   Kisi 2 kolom menyisakan lubang: 3 kartu berarti baris kedua cuma terisi
   satu dan separuhnya kosong. Jumlah butirnya 3 (dari mtk_tentang_ringkas())
   dan tidak akan berubah tanpa keputusan, jadi tata letaknya dipilih untuk
   angka itu, bukan untuk jumlah yang mungkin. */
/* Tiga baris SAMA TINGGI (1fr), bukan `auto`.

   Dengan `auto` tiap kartu setinggi teksnya — kartu ketiga yang teksnya dua
   baris jadi lebih pendek, dan kolomnya berhenti sebelum panel kiri. `1fr`
   membagi tinggi kolom rata bertiga, jadi kanan selalu berakhir tepat di
   garis yang sama dengan kiri. */
.bd .tt-poin{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);
  gap:var(--s5);text-align:left;height:100%}
/* Tiga kolom sejak build 871 (butir "Aktif sejak 2020" dibuang); dua kolom
   di layar sedang supaya tiap butir tetap punya lebar baca yang layak. */
/* KARTU, bukan garis rambut.

   Sebelumnya tiap butir cuma dipisah `border-top` 1px — di kolom selebar
   670px itu terbaca sebagai tiga baris teks melayang, bukan bagian yang
   berdiri sendiri. Bagian lain di halaman ini (produk, kabar, langkah)
   semuanya memakai kartu berbingkai; ini satu-satunya yang tidak, dan itu
   yang membuatnya terasa sepi.

   Bingkai, latar, dan garis cahaya tepi atas mengikuti .lk supaya sekeluarga
   — bukan motif baru. */
.bd .tt-poin > div{min-width:0;display:flex;flex-direction:column;gap:var(--s1b);position:relative;
  padding:var(--s5);border:1px solid var(--line);border-top-color:var(--line-top);
  border-radius:var(--r-lg);background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  transition:transform .2s,border-color .2s}
.bd .tt-poin > div:hover{transform:translateY(-2px);border-color:rgba(31,227,116,.28)}
.bd .tt-poin > div::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.4),transparent)}
.bd .tt-poin .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(31,227,116,.13),rgba(31,227,116,.03));
  border:1px solid rgba(31,227,116,.18);color:var(--green);margin-bottom:var(--s0)}
.bd .tt-poin .ico.emas{background:linear-gradient(150deg,rgba(212,178,92,.15),rgba(212,178,92,.03));
  border-color:rgba(212,178,92,.24);color:var(--gold)}
.bd .tt-poin .ico .icon{width:16px;height:16px}
.bd .tt-poin b{font-family:var(--disp);font-size:var(--t-l7);font-weight:700}
.bd .tt-poin i{font-style:normal;color:var(--muted);font-size:var(--t-l8);line-height:1.6}



/* --------------------------------------------------------------- band --- */







/* ------------------------------------------------- tombol "lihat semua" --- */
/* SATU bentuk untuk semua bagian. Dulu enam pola berbeda untuk maksud sama. */
.bd .lihat-w{text-align:center;margin-top:var(--s10)}
.bd .lihat-w.rapat{margin-top:var(--s6)}
.bd .lihat{display:inline-flex;align-items:center;gap:var(--s2b);font-family:var(--disp);font-size:var(--t-l8);
  font-weight:600;color:var(--paper);text-decoration:none;
  background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);border:1px solid var(--line-2);
  padding:var(--s2b) var(--s3) var(--s2b) var(--s5);border-radius:999px;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.bd .lihat .pn{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(31,227,116,.13);border:1px solid rgba(31,227,116,.3);color:var(--green);
  transition:transform .2s,background .2s}
.bd .lihat .pn .icon{width:14px;height:14px}
.bd .lihat .n{color:var(--muted-2);font-weight:500;font-size:var(--t-l8);white-space:nowrap}
.bd .lihat:hover{border-color:rgba(31,227,116,.45);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.bd .lihat:hover .pn{transform:translateX(3px);background:rgba(31,227,116,.22)}

/* --------------------------------------------------------- strip analisa --- */
/* Latar hijau + garis bawah DIBUANG (build 863): ia memisahkan hero dari
   Analisa padahal keduanya satu tarikan — hero mengenalkan, Analisa langsung
   membuktikan isinya berubah tiap hari. Pembatas di situ memotong alurnya.
   Panel .rk-panel milik ap_baris_pair() sudah punya latarnya sendiri, jadi
   stripnya tetap terbaca sebagai satu kesatuan tanpa perlu dibingkai lagi. */


/* ----------------------------------------------------------------- kosong --- */
.bd .kosong{text-align:center;padding:var(--s12) var(--s6);border:1px dashed var(--line-2);
  border-radius:var(--r-lg);color:var(--muted)}
.bd .kosong h4{font-family:var(--disp);font-size:var(--t-l6);font-weight:700;color:var(--paper);margin-bottom:var(--s1b)}
.bd .kosong .icon{width:26px;height:26px;color:var(--muted-2);margin-bottom:var(--s3)}

/* ------------------------------------------------------------------- HP --- */
@media (max-width:920px){
  .bd section.blok{padding:var(--s12) 0}
  .bd .hero{padding:var(--s10) 0 var(--s8)}
  .bd .hero-grid{grid-template-columns:1fr;gap:var(--s8)}
  .bd .lambang{order:-1}
  .bd .pentas{width:min(72%,240px)}
  .bd .hero h1{font-size:var(--t-l3)}
  .bd .lede{font-size:var(--t-l7)}
  .bd .hero-cta{flex-direction:column}
  .bd .hero-cta .btn{width:100%}
  .bd .kepala{margin-bottom:var(--s8)}
  .bd .kepala h2{font-size:var(--t-l4)}
  .bd .kepala .instr{font-size:var(--t-l7)}

  /* Produk: grid → baris geser. Di layar sempit tiga kolom mustahil, dan
     satu kolom bertumpuk membuat halaman sangat panjang. */
  /* Menembus tepi memakai margin+padding NEGATIF YANG SALING MENIADAKAN.
     Kalau keduanya tidak sama persis, selisihnya membuat seluruh halaman bisa
     digeser ke samping — dan di HP itu terasa seperti halaman yang tidak
     kokoh. Dua-duanya dipatok ke setengah --gutter, jadi tidak mungkin
     meleset. */
  .bd .grid3{display:flex;gap:var(--s2b);overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter) / 2);
    padding-inline:calc(var(--gutter) / 2);
    max-width:100vw}
  .bd .grid3::-webkit-scrollbar{display:none}
  .bd .grid3 > *{flex:0 0 74%;scroll-snap-align:start}
  /* padding:0 — gambar harus menempel tepi kartu. Nilai var(--s5) di sini
     MENIMPA `.bd .kartu{padding:0}` di atas (kekhususan sama, ditulis
     belakangan) dan membuat perubahan kartu produk tidak terlihat sama sekali
     di HP. Pola yang sama sudah lima kali terjadi di berkas ini. */
  .bd .kartu{padding:0}
  .bd .kartu-gbr h3{font-size:var(--t-l6)}
  .bd .manfaat{font-size:var(--t-l8);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* Cara kerja: baris mendatar, ikon kiri — jauh lebih hemat tinggi. */
  .bd .langkah{grid-template-columns:1fr;gap:var(--s2)}
  .bd .lk{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s5)}
  .bd .lk .no{display:none}
  .bd .lk .ico{width:38px;height:38px;border-radius:11px;flex:none}
  .bd .lk .ico .icon{width:18px;height:18px}
  .bd .lk h4{margin:0 0 var(--s0);font-size:var(--t-l7)}
  .bd .lk p{font-size:var(--t-l8)}

  .bd .konsul{grid-template-columns:1fr;grid-template-areas:"teks" "obrol" "aksi";
    gap:var(--s5);padding:var(--s6) var(--s5)}
  .bd .konsul p{font-size:var(--t-l7)}
  .bd .konsul-aksi{flex-direction:column}
  .bd .konsul-aksi .btn{width:100%}
  .bd .gel{max-width:90%;font-size:var(--t-l8)}

  .bd .angka{gap:var(--s5);padding:var(--s5)}
  .bd .ang b{font-size:var(--t-l3)}
  .bd .ul{flex:0 0 78%}
  
  

  .bd .lihat{display:flex;width:100%;justify-content:space-between;padding:var(--s3) var(--s3) var(--s3) var(--s4)}
  .bd .lihat-w{margin-top:var(--s6)}
  
  
  
  
}

/* Info & Market di HP: satu kolom, kartu kecil tetap mendatar. */
@media (max-width:920px){
  .bd .im-grid{grid-template-columns:1fr}
  .bd .im-utama b{font-size:var(--t-l6)}
  .bd .im-teks{font-size:var(--t-l8);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bd .im-kecil .im-gbr{flex:0 0 62px;height:46px}
  .bd .im-kecil b{font-size:var(--t-l8);white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  
  
}

/* Tentang & pita foto di HP */
@media (max-width:920px){
  .bd .tentang h2{font-size:var(--t-l4)}
  .bd .tt-kutip{font-size:var(--t-l6);padding:var(--s3) 0}
  
  
  
  
  
}

/* Tiga poin Tentang di HP: satu kolom. */
@media (max-width:920px){
  .bd .tt-poin{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
  .bd .tt-poin .ico{width:30px;height:30px;border-radius:9px}
  .bd .tt-poin b{font-size:var(--t-l7)}
  .bd .tt-poin i{font-size:var(--t-l8)}
}

/* ============================================================================
   PEMBESAR FOTO (tzoom)

   Gayanya dulu ada di blok <style> index.php dan ikut terhapus waktu berkas
   itu dirombak di build 855. Skripnya tetap jalan — kelas .open terpasang —
   tapi tidak ada yang digambar, jadi foto bukti tidak bisa dilihat sama
   sekali. Bug diam: tidak ada galat, tombolnya cuma tidak melakukan apa-apa.
   ========================================================================= */






@media (max-width:920px){
  
  .bd .kartu-gbr .kat{font-size:var(--t-l10);padding:var(--s0) var(--s2);top:7px;left:7px}
}

/* ============================================================================
   PITA ANALISA — bentuk ringkas di bawah hero (build 868)

   Satu baris (~46px) menggantikan bagian penuh (~340px). Tingginya sengaja
   sekelas dengan chip "Kendali penuh / Bebas broker" di hero: ia dibaca
   sebagai pelengkap hero, bukan sebagai bagian tersendiri yang bersaing
   dengan Produk Unggulan.
   ========================================================================= */





@keyframes bd-denyut{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.9);opacity:0}}














/* ============================================================================
   PITA ANALISA BERJALAN (opsi A, build 869)

   Isi digandakan lalu digeser -50%: begitu salinan pertama habis, salinan
   kedua persis di posisi awal — tidak ada lompatan, dan tidak butuh JS untuk
   jalannya. Durasi datang dari --durasi yang dihitung ap_pita_pair() menurut
   jumlah pair, supaya KECEPATANNYA tetap sama berapa pun pairnya.

   Berhenti saat disentuh bukan tambahan manis: kalau tautan terus bergerak,
   orang harus mengejarnya untuk mengklik.
   ========================================================================= */
.bd .tp{position:relative;overflow:hidden;
  margin:var(--s5) 0 clamp(56px,5.5vw,88px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(31,227,116,.04),transparent)}
.bd .tp-jalan{display:flex;width:max-content;
  animation:tp-geser var(--durasi,42s) linear infinite}
.bd .tp-set{display:flex}
.bd .tp:hover .tp-jalan,
.bd .tp:focus-within .tp-jalan,
.bd .tp.tahan .tp-jalan{animation-play-state:paused}
@keyframes tp-geser{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Tepi memudar supaya isi tidak terpotong mendadak di ujung layar. */
.bd .tp::before,.bd .tp::after{content:'';position:absolute;top:0;bottom:0;width:64px;
  z-index:2;pointer-events:none}
.bd .tp::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.bd .tp::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}

.bd .tp-item{display:flex;align-items:center;gap:var(--s2b);padding:var(--s3) var(--s5);white-space:nowrap;
  border-right:1px solid var(--line);text-decoration:none;transition:background .18s}
.bd .tp-item:hover{background:rgba(31,227,116,.05)}
.bd .tp-item.lemah{opacity:.5}
.bd .tp-item.lemah:hover{opacity:1}
.bd .tp-sym{font-family:var(--disp);font-weight:800;font-size:var(--t-l8);letter-spacing:.02em;color:var(--paper)}
.bd .tp-arah{font-size:var(--t-l8);font-weight:700;font-variant-numeric:tabular-nums}
.bd .tp-akhir .tp-sym{color:var(--muted-2);font-weight:600}
.bd .tp-akhir .tp-arah{color:var(--green)}

/* Perangkat yang minta kurangi gerakan: DIAM total, dan pitanya bisa digulir
   sendiri supaya isinya tetap terjangkau. Salinannya disembunyikan — tanpa
   animasi ia cuma daftar yang sama dua kali. */
@media (prefers-reduced-motion:reduce){
  /* Pita berhenti — tapi HARUS terlihat bahwa ia masih bisa digeser.

     Di WINDOWS, prefers-reduced-motion dinyalakan oleh "Animation effects"
     (Pengaturan → Aksesibilitas → Efek visual). Banyak orang mematikannya
     DEMI KECEPATAN, bukan karena sensitif gerakan — jadi kelompok pemakai ini
     jauh lebih besar daripada di HP, dan mereka tidak sedang meminta
     aksesibilitas apa pun.

     Versi lama cuma menghentikan animasinya: pita jadi diam tanpa satu pun
     tanda bahwa ia bisa digulir. Yanz melaporkannya sebagai "tidak jalan" —
     dan memang begitulah tampaknya.

     Tiga tanda ditambahkan: batang gulir yang terlihat, pudar di tepi kanan
     (isi jelas berlanjut), dan snap supaya gulirnya berhenti rapi. */
  .bd .tp{overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  .bd .tp::-webkit-scrollbar{height:4px}
  .bd .tp::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
  .bd .tp-jalan{animation:none;width:auto}
  .bd .tp-salinan{display:none}
  .bd .tp-item{scroll-snap-align:start}
  /* Pudar di tepi kanan: penanda paling ringan bahwa isinya masih berlanjut.

     Ditaruh di PEMBUNGKUS (.tp-w), bukan di .tp: .tp adalah wadah yang
     digulir, jadi ::after di dalamnya ikut bergeser keluar layar begitu
     pengguna menggulir — pudarnya hilang justru saat masih dibutuhkan. */
  .bd .tp-w{position:relative}
  .bd .tp-w::after{content:'';position:absolute;top:0;bottom:0;right:0;width:48px;
    pointer-events:none;z-index:2;
    background:linear-gradient(90deg,transparent,var(--ink))}
}
@media (max-width:920px){
  .bd .tp{margin:var(--s4) 0 clamp(36px,7vw,56px)}
  .bd .tp::before,.bd .tp::after{width:28px}
  .bd .tp-item{padding:var(--s2b) var(--s4);gap:var(--s2)}
  .bd .tp-sym{font-size:var(--t-l8)}
  .bd .tp-arah{font-size:var(--t-l9)}
}

/* ============================================================================
   TAMPILAN HP — build 874
   Dipasang dari mockup-beranda-hp-3.html. Ditulis PALING BELAKANG supaya
   menang atas enam blok @media 920px yang tersebar di atas tanpa perlu
   menyunting satu per satu.

   Ambang 640px, bukan 920px: aturan di sini menumpuk kartu jadi selebar
   layar penuh. Di tablet 900px itu menghasilkan kartu selebar 860px yang
   janggal, jadi tablet tetap memakai aturan 920px di atas.
   ========================================================================= */
@media (max-width:640px){

  /* Jarak tepi jadi 20px. Dilingkupi .bd, jadi --gutter global di mtk.css
     tidak berubah dan halaman lain tidak ikut terpengaruh. */
  /* ===== SKALA HP =====
     Audit mockup v2 menemukan 19 ukuran huruf, 12 sudut membulat, dan 17
     nilai padding — bukan sistem, melainkan tebakan yang menumpuk. Semua
     ukuran di blok ini HANYA boleh memakai angka di bawah.

     Berawalan --bd- supaya jelas ini milik beranda, bukan token situs. Tidak
     ada satu pun warna di sini: palet tetap satu sumber di mtk.css. */
  .bd{
    --gutter:40px;                                   /* → 20px tiap sisi */
    --bd-t1:28px; --bd-t2:20px; --bd-t3:16px;        /* judul */
    --bd-t4:14px; --bd-t5:12.5px; --bd-t6:11px;      /* isi & label */
    --bd-j1:4px;  --bd-j2:8px;  --bd-j3:12px; --bd-j4:16px;
    --bd-j5:24px; --bd-j6:32px; --bd-j7:40px;        /* jarak, kelipatan 4 */
    --bd-r-bsr:18px; --bd-r-sdg:12px; --bd-r-kcl:8px;
    --bd-sentuh:46px;                                /* tinggi minimum sentuh */
  }

  /* PAGAR TEPI. Elemen yang memakai .wrap TIDAK BOLEH memakai `padding:`
     ringkas — nilai 0 di kiri-kanan akan menimpa lebar .wrap dan membuat
     isinya menempel tepi layar. Aturan ini mengembalikannya. Pakai
     padding-block kalau perlu jarak atas-bawah. */
  .bd .wrap{width:min(100% - var(--gutter), var(--max))}

  /* ---------- rata teks ----------
     Rata KIRI untuk semua judul & isi: di layar sempit, rata tengah membuat
     tiap baris mulai di titik berbeda sehingga mata mencari ulang tiap ganti
     baris. Rata TENGAH hanya untuk yang berdiri sendiri dan isinya pendek:
     band penutup dan deretan angka ulasan. */
  .bd .kepala{text-align:left;max-width:none}
  .bd .kepala h2::after{left:0;transform:none}
  .bd .tentang{text-align:left}
  .bd .tt-kutip::before,.bd .tt-kutip::after{left:0;right:auto;width:64px}
  

  /* ---------- hero ----------
     Dua tombol penuh-lebar bertumpuk terbaca seperti dua palang melintang
     layar dan memakan ~100px tinggi. Berdampingan 1,35 : 1 — yang utama
     tetap lebih besar. */
  .bd .hero{padding-block:var(--bd-j6) var(--bd-j5)}
  .bd .hero h1{font-size:var(--bd-t1);line-height:1.12}
  .bd .lede{font-size:var(--bd-t4);line-height:1.7}
  .bd .hero-cta{flex-direction:row;gap:var(--bd-j2);margin-bottom:var(--bd-j4)}
  .bd .hero-cta .btn{flex:1;width:auto;min-height:var(--bd-sentuh);padding-inline:var(--bd-j3);font-size:var(--bd-t4);white-space:nowrap}
  .bd .hero-cta .btn:first-child{flex:1.35}
  /* Lambang memakan hampir satu layar penuh, dan logonya sudah ada di navbar
     tepat di atasnya. */
  .bd .lambang{display:none}
  /* Tiga chip DALAM SATU BARIS, seperti mockup. Sebelumnya ia membungkus ke
     baris kedua dan menyisakan satu chip sendirian — terbaca seperti ada yang
     tertinggal. Ketiganya berbagi lebar rata (flex:1 1 0) dan min-width:0
     supaya boleh menyusut di bawah lebar teksnya. */
  .bd .nilai{flex-wrap:nowrap;gap:var(--s1b)}
  .bd .nilai span{flex:1 1 0;min-width:0;justify-content:center;
    min-height:36px;font-size:var(--bd-t6);padding-inline:var(--s2);gap:var(--s1);
    white-space:nowrap}
  .bd .nilai .icon{width:13px;height:13px;flex:none}

  /* ---------- ukuran & area sentuh ----------
     Apa pun yang bisa disentuh dipatok 46px. Sebelumnya tautan footer 21px,
     butir pita 40px, kartu kabar kecil 39px. */
  .bd section.blok{padding:var(--bd-j7) 0}
  .bd .kepala h2{font-size:var(--bd-t2);line-height:1.2}
  .bd .kepala .instr{font-size:var(--bd-t5)}
  .bd .lihat{min-height:var(--bd-sentuh);font-size:var(--bd-t5);padding:0 var(--bd-j2) 0 var(--bd-j4)}
  .bd .im-kecil{min-height:var(--bd-sentuh)}
  .bd .tp-item{min-height:var(--bd-sentuh);padding-block:0}

  /* ---------- produk: ditumpuk penuh lebar ----------
     Sebagai baris geser tiap kartu cuma dapat 74% lebar layar; ditumpuk, ia
     dapat lebar penuh dan teksnya langsung terbaca. Gambar 16:7 supaya isi
     kartu tidak terdorong jauh ke bawah. */
  .bd .grid3{display:flex;flex-direction:column;gap:var(--bd-j3);overflow:visible;
    margin:0;padding:0;scroll-snap-type:none}
  .bd .grid3 > *{flex:none;width:auto}
  /* Rasio paksa 16/7 + object-fit:cover DIBUANG.

     Menaikkan rasio supaya gambar lebih tinggi justru MEMOTONG sisi kiri-kanan
     banner — sumbernya lebih lebar (~2,4:1) dari kotak mana pun yang lebih
     tinggi. Yang hilang bagian yang justru berisi grafiknya.

     Gantinya: gambar tampil utuh (tinggi mengikuti rasio aslinya), lalu
     .kartu-gbr diberi RUANG GELAP tambahan di bawahnya. Nama berdiri di ruang
     itu, bukan menimpa gambar. Gradasinya tinggal menyambungkan keduanya, jadi
     jauh lebih pendek. */
  .bd .kartu-gbr{--bd-gbr-ruang:36px;padding-bottom:var(--bd-gbr-ruang);background:#102119}
  .bd .kartu-gbr .card-visual img{aspect-ratio:auto;object-fit:fill}
  /* Gradasi 56% → 30%: cukup untuk melarutkan tepi bawah gambar ke ruang
     gelapnya, tanpa menutupi grafik di atasnya. */
  /* Gradasi HARUS BERHENTI TEPAT DI TEPI BAWAH GAMBAR, bukan di dasar kotak.

     Dengan `bottom:0`, 58% panjang gradasinya terbuang di ruang gelap 36px
     yang memang sudah pekat — dan waktu gambar habis warnanya baru sampai
     ~52%. Hasilnya tetap ada garis batas, dan bagian yang memudar tidak
     pernah terlihat. Itu sebabnya perubahannya tidak terasa.

     `bottom: var(--bd-gbr-ruang)` menaruh ujung gradasi persis di tepi gambar,
     jadi ia mencapai warna penuh tepat saat gambar berakhir lalu menyambung
     mulus ke ruang gelap di bawahnya. Tingginya dalam PIKSEL, bukan persen:
     persen dihitung dari tinggi kotak yang sudah termasuk ruang gelap itu. */
  .bd .kartu-gbr::after{bottom:var(--bd-gbr-ruang);height:64px}
  /* padding RINGKAS `var(--bd-j4)` memberi 16px ke EMPAT sisi — ia menimpa
     `40px 20px 6px` dari aturan utama, jadi di HP jarak bawah judul jadi 16px
     dan namanya terangkat jauh dari keterangannya. Ditulis per-sisi supaya
     hanya yang perlu berubah yang berubah.

     Pola yang sama sudah enam kali di berkas ini: nilai ringkas menimpa
     bagian yang tidak dimaksudkan. */
  .bd .kartu-gbr h3{font-size:var(--bd-t3);
    padding-top:var(--bd-j7);padding-inline:var(--bd-j4);padding-bottom:var(--s1)}
  .bd .kartu-isi{padding:5px var(--bd-j4) var(--bd-j4)}
  .bd .manfaat{font-size:var(--bd-t5);-webkit-line-clamp:3}

  /* ---------- ulasan ---------- */
  .bd .ul{flex:0 0 88%;padding:var(--bd-j4);border-radius:var(--bd-r-bsr)}
  .bd .kutip{font-size:var(--bd-t5)}

  /* ---------- galeri: DUA BARIS, lalu menyamping ----------
     grid-auto-flow:column mengisi ke bawah dulu (2 baris), baru menambah
     kolom ke kanan. Tinggi bagian ini TIDAK PERNAH bertambah berapa pun
     jumlah fotonya — yang bertambah cuma panjang gulirnya. */
  
  

  /* ---------- konsultasi & penutup ---------- */
  .bd .konsul{padding:var(--bd-j5) var(--bd-j4);border-radius:var(--bd-r-bsr)}
  .bd .konsul h2{font-size:var(--bd-t2)}
  
  /* Satu kolom di HP — kisi dua kolom hanya masuk akal di layar lebar. */
  .bd .tt-grid{grid-template-columns:1fr;gap:var(--bd-j5);margin-top:var(--bd-j5)}
  .bd .tt-cerita{--bd-kutip:96px;padding:var(--bd-j5)}
  /* Di HP kolomnya tidak bersanding, jadi tidak ada ruang sisa yang perlu
     diisi — ilustrasinya dipendekkan supaya tidak menambah gulir. */
  .bd .tt-ilus{flex:none;min-height:76px;margin:var(--bd-j4) calc(-1 * var(--bd-j5)) calc(-1 * var(--bd-j5))}
  .bd .tt-ilus svg{min-height:76px}
  .bd .tt-cerita::after{bottom:-12px}
  .bd .tt-poin > div{padding:var(--bd-j4)}
  /* Satu lajur di HP — dua kolom di 350px menghasilkan lajur 165px. */
  /* Di HP kolomnya tidak bersanding, jadi tidak ada yang perlu disamakan —
     kartu kembali setinggi isinya. */
  .bd .tt-poin{grid-template-columns:1fr;grid-template-rows:none;height:auto;gap:var(--bd-j4)}

  /* sisa ukuran yang belum diseragamkan */
  .bd .kartu{border-radius:var(--bd-r-bsr)}
  .bd .im-utama .im-isi{padding:var(--bd-j4);gap:var(--bd-j2)}
  .bd .im-kecil,.bd .im-utama{border-radius:var(--bd-r-sdg)}
  /* Di HP tidak ada kolom di sebelah kartu besar untuk digulir, jadi kabarnya
     ditumpuk — dan dibatasi 4 supaya bagian ini tidak jadi berlayar-layar.
     Sisanya lewat tombol "Lihat Info & Market lainnya". */
  .bd .im-sisi{position:static;min-height:0}
  .bd .im-gulir{position:static;overflow:visible;padding-right:0}
  .bd .im-gulir > *:nth-child(n+5){display:none}

  .bd .im-tag,.bd .kartu-gbr .kat{border-radius:var(--bd-r-kcl)}
  /* DUA BARIS: ikon + judul bersebelahan di baris atas, keterangan selebar
     penuh di bawahnya.

     Ikon di atas judul (bertumpuk penuh) memakan satu baris sendiri tanpa
     menambah informasi. Ikon di kiri SEMUANYA menyisakan lebar teks cuma
     ~250px dari 350px sehingga tiap kalimat pecah jadi banyak baris pendek.
     Susunan ini mengambil yang baik dari keduanya: judul dapat ikonnya,
     keterangan dapat lebar penuh.

     `.no` (nomor besar) sudah disembunyikan di blok 920px, jadi grid ini
     cukup dua kolom. Markupnya rata — .ico, h4, dan p semuanya anak langsung
     .lk — jadi grid-area bisa dipakai tanpa pembungkus tambahan. */
  .bd .lk{display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"ico judul" "teks teks";
    column-gap:var(--bd-j3);row-gap:var(--bd-j2);align-items:center;
    border-radius:var(--bd-r-bsr);padding:var(--bd-j4)}
  .bd .lk .ico{grid-area:ico;width:34px;height:34px;border-radius:10px}
  .bd .lk .ico .icon{width:17px;height:17px}
  /* var(--bd-t4)=14px, bukan 15px lepas: 15 bukan bagian skala, dan angka di
     luar skala itulah yang dulu menumpuk jadi 19 ukuran huruf berbeda. */
  .bd .lk h4{grid-area:judul;font-size:var(--bd-t4);margin:0}
  .bd .lk p{grid-area:teks;font-size:var(--bd-t5)}

  /* Di HP tidak ada geser samping, jadi tiap produk tambahan menambah BARIS
     BARU dan bagian ini bisa jadi sepuluh layar. Tiga teratas saja; sisanya
     lewat tombol "Lihat semua tools".

     Disembunyikan lewat CSS, bukan dipotong di PHP: markup yang sama melayani
     desktop, dan di sana keduabelasnya memang dipakai untuk digeser. */
  .bd .grid3 > *:nth-child(n+4){display:none}
  /* BENTUK DESKTOP DIPERTAHANKAN: tiga butir bersanding, angka di atas label,
     pemisah tegak di antaranya. Yang diubah hanya UKURANNYA.

     Build 902 sempat mengubah BENTUKNYA jadi mendatar per butir — itu keliru.
     Yanz menyukai desain desktopnya dan memintanya ada di HP juga, cuma
     dengan ukuran yang disesuaikan.

     Hitungan di 390px: isi 318px − 4 celah 8px − 2 pemisah = 95px per butir.
     Semua muat kecuali "Rata-rata penilaian" yang membungkus jadi dua baris.
     Itu wajar: yang membungkus LABELNYA, bukan butirnya, jadi deretnya tetap
     satu baris — beda dengan sebelumnya. */
  .bd .angka{gap:var(--bd-j2);border-radius:var(--bd-r-bsr);padding:var(--bd-j4) var(--bd-j3)}
  .bd .ang b{font-size:var(--bd-t2)}
  .bd .ang b span{font-size:var(--bd-t5)}
  .bd .ang .lbl{font-size:var(--bd-t6);line-height:1.35;display:block}
  /* Ukuran bintang lewat token, bukan angka lepas — hiasan pun harus lewat
     satu tempat, kalau tidak ia menumpuk seperti 19 ukuran huruf dulu. */
  .bd .ang{min-width:0;flex:1;--bd-bintang:9px}
  .bd .ang .bintang{display:block;font-size:var(--bd-bintang);letter-spacing:.5px;margin-bottom:var(--s0)}
  /* Pemisah dipendekkan mengikuti tinggi butir yang baru. */
  .bd .pisah{height:34px;flex:none}
  .bd .eyebrow{font-size:var(--bd-t6)}
  .bd .tt-awal{margin-inline:0;font-size:var(--bd-t5)} .bd .tt-poin i{font-size:var(--bd-t5)}
  
}

/* ============================================================================
   PANAH GESER ULASAN DI HP — build 880

   `.pc-nav{display:none}` di 820px menyembunyikan panah di semua baris geser,
   dengan alasan lingkaran 38px menutupi kartu di layar sempit. Setelah galeri
   foto dibuang, baris ulasan jadi satu-satunya yang digeser di bagian itu —
   dan tanpa panah, di HP tidak ada petunjuk sama sekali bahwa masih ada
   ulasan lain.

   Panahnya dikecilkan jadi 32px dan ditarik masuk supaya tidak menutupi
   kartu. Hanya untuk baris ulasan; baris lain tetap tanpa panah di HP.
   ========================================================================= */
@media (max-width:820px){
  .bd .ulasan ~ .pc-nav,
  .bd .rk-w:has(.ulasan) > .pc-nav{display:grid;width:32px;height:32px;font-size:var(--t-l7)}
  .bd .rk-w:has(.ulasan) > .pc-nav.prev{left:-6px}
  .bd .rk-w:has(.ulasan) > .pc-nav.next{right:-6px}
}