/* ============================================================================
   HALAMAN PRODUK — gaya halaman.

   Dipindah keluar dari <style> di dalam product.php (build 922). Alasannya
   sama seperti katalog di build 905: aturan yang hidup di dalam berkas
   halaman tidak bisa ditelusuri, gampang ditulis dua kali, dan tiap
   perbaikan saling menimpa tanpa ada yang menyadarinya.

   ATURAN BERKAS INI — sama dengan assets/katalog.css:
   1. Dimuat SESUDAH mtk.css, jadi selalu menang lewat urutan.
   2. Semua pemilih dilingkupi `.pd` (kelas di <body>), jadi menang lewat
      kekhususan tanpa perlu !important.
   3. product.php NOL <style>.
   4. Token warna diwarisi mtk.css — tidak mendefinisikan warna baru.

   JANGAN menaruh `.pd` menggantung tepat sebelum komentar: pemilih
   SESUDAHNYA akan kehilangan lingkup, dan penjaganya lolos karena membaca
   `.pd` menggantung itu sebagai awal pemilih. Enam aturan lolos begitu di
   katalog (build 915). */

/* Upgrade tampilan detail produk — tab Ringkasan/Fitur (Tahap 1) */
  
.pd .pd-tabs{display:flex;gap:var(--s1);margin-top:var(--s6);border-bottom:1px solid var(--line)}
  .pd .pd-tab{padding:var(--s2b) var(--s4);font-weight:600;font-size:var(--t-l7);color:var(--muted);cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
  .pd .pd-tab:hover{color:var(--paper)}
  .pd .pd-tab.on{color:var(--green);border-bottom-color:var(--green)}
  .pd .pd-panel{display:none;padding-top:var(--s5)}
  .pd .pd-panel.on{display:block}
  .pd .pd-prose{color:var(--muted);font-size:var(--t-l7);line-height:1.8}
  .pd .pd-prose p{margin-bottom:var(--s3)}
  .pd .pd-prose.clamp{max-height:196px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent);mask-image:linear-gradient(to bottom,#000 66%,transparent)}
  .pd .pd-readmore{margin-top:var(--s2);background:none;border:0;color:var(--green);font-weight:600;font-size:var(--t-l7);cursor:pointer;padding:0}
  .pd .pd-readmore:hover{text-decoration:underline}
  .pd .pd-feats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
  @media(max-width:720px){ .pd .pd-feats{grid-template-columns:1fr} }
  /* JUDUL + TOMBOL BAGIKAN.

     align-items:flex-start, bukan center: judul produk bisa jadi dua baris,
     dan tombol yang ditengahkan terhadap judul dua baris terlihat melayang di
     tengah-tengah tanpa berpegangan pada apa pun. */
  .pd .pd-judul{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3b)}
  .pd .pd-judul .page-title{min-width:0}

  .pd .pd-share{flex:none;display:inline-flex;align-items:center;gap:var(--s1b);cursor:pointer;
    background:transparent;border:1px solid var(--line-2);border-radius:10px;
    padding:var(--s2) var(--s3);color:var(--muted);font-family:var(--disp);font-size:var(--t-l8);
    font-weight:600;transition:.15s;margin-top:var(--s3)}
  .pd .pd-share:hover{border-color:var(--green);color:var(--green)}
  .pd .pd-share:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .pd .pd-share.ok{border-color:var(--green);color:var(--green)}
  .pd .pd-share .icon{width:15px;height:15px}
  .pd .pd-share-nb{color:var(--muted-2);font-size:var(--t-l8);margin-top:var(--s1b)}

  /* Di layar sempit tombolnya turun ke bawah judul dan melebar penuh —
     dijejalkan di sebelah judul, judulnya tinggal beberapa huruf per baris. */
  @media(max-width:520px){
    .pd .pd-judul{flex-direction:column;gap:0}
    .pd .pd-share{width:100%;justify-content:center;margin-top:var(--s3)}
  }

  .pd .pd-rate{display:flex;align-items:center;gap:var(--s2b);margin-top:var(--s3);color:var(--muted);font-size:var(--t-l8);flex-wrap:wrap}
  .pd .pd-stars{color:var(--gold);letter-spacing:2px;font-size:var(--t-l7)}
  .pd .pd-rate b{color:var(--paper);font-weight:700}
  .pd .pd-dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
  .pd .pd-rlink{color:var(--green);font-weight:600;text-decoration:none}
  .pd .pd-rlink:hover{text-decoration:underline}
  /* Tombol link (YouTube/dsb) */
  /* Galeri */
  
.pd .pd-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
  @media(max-width:720px){ .pd .pd-gal{grid-template-columns:1fr 1fr} }
  .pd .pd-gal-i{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);display:block;background:var(--ink-3)}
  .pd .pd-gal-i img{width:100%;height:100%;object-fit:cover;display:block;transition:.2s}
  .pd .pd-gal-i:hover img{transform:scale(1.04)}
  .pd .pd-gal-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s3) var(--s2);font-size:var(--t-l8);font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78))}
  .pd button.pd-gal-i{padding:0;margin:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:zoom-in}
  /* Lightbox galeri */
  
.pd .pd-lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(2,6,4,.93);backdrop-filter:blur(4px);padding:var(--s6)}
  .pd .pd-lb.on{display:flex}
  .pd .pd-lb-stage{position:relative;max-width:min(1100px,92vw);display:flex;flex-direction:column;align-items:center}
  .pd .pd-lb-stage img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#0a1610;touch-action:pan-y}
  .pd .pd-lb-cap{margin-top:var(--s3);color:var(--paper);font-size:var(--t-l7);font-weight:500;text-align:center;max-width:760px;line-height:1.5}
  .pd .pd-lb-count{margin-top:var(--s1b);color:var(--muted-2);font-size:var(--t-l8);font-weight:600;letter-spacing:.05em}
  .pd .pd-lb-x{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(20,34,26,.72);color:var(--paper);font-size:var(--t-l5);cursor:pointer;display:grid;place-items:center;z-index:3;transition:.15s}
  .pd .pd-lb-x:hover{border-color:var(--green);color:var(--green)}
  .pd .pd-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(20,34,26,.74);color:var(--paper);font-size:var(--t-l2);line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3;transition:.15s}
  .pd .pd-lb-nav:hover{border-color:var(--green);color:var(--green);background:rgba(31,227,116,.16)}
  .pd .pd-lb-nav.prev{left:16px}.pd .pd-lb-nav.next{right:16px}
  @media(max-width:560px){ .pd .pd-lb{padding:var(--s3)} .pd .pd-lb-nav{width:44px;height:44px;font-size:var(--t-l4)} .pd .pd-lb-nav.prev{left:6px}.pd .pd-lb-nav.next{right:6px} .pd .pd-lb-x{top:10px;right:10px;width:40px;height:40px} .pd .pd-lb-stage img{max-height:70vh} }
  /* Changelog */
  .pd .pd-log{position:relative;padding-left:var(--s6)}
  .pd .pd-log::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
  .pd .pd-log-i{position:relative;padding-bottom:var(--s5)}
  .pd .pd-log-i::before{content:'';position:absolute;left:-23px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--ink);border:2px solid var(--green)}
  .pd .pd-log-i.old::before{border-color:var(--muted-2)}
  .pd .pd-log-h{display:flex;align-items:center;gap:var(--s2b);flex-wrap:wrap}
  .pd .pd-log-v{font-weight:700;font-size:var(--t-l8);color:var(--green);background:rgba(31,227,116,.1);border:1px solid rgba(31,227,116,.3);border-radius:99px;padding:var(--s0) var(--s2b)}
  .pd .pd-log-i.old .pd-log-v{color:var(--muted);background:rgba(255,255,255,.05);border-color:var(--line)}
  .pd .pd-log-h small{color:var(--muted-2);font-size:var(--t-l8)}
  .pd .pd-log-i p{color:var(--muted);font-size:var(--t-l8);margin-top:var(--s2);line-height:1.7}
  /* Kartu investor */
  
.pd .pd-inv{margin-top:var(--s4)}
  .pd .pd-inv-h{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--t-l7);margin-bottom:var(--s3);color:var(--paper)}
  .pd .pd-inv-h .icon{color:var(--green)}
  .pd .pd-inv-a{background:var(--ink-3);border:1px solid var(--line);border-radius:11px;margin-bottom:var(--s2);overflow:hidden}
  .pd .pd-inv-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s2b);padding:var(--s3) var(--s3b);background:none;border:0;cursor:pointer;color:var(--paper);text-align:left;font:inherit}
  .pd .pd-inv-top:hover{background:rgba(31,227,116,.05)}
  .pd .pd-inv-name{display:flex;align-items:center;gap:var(--s2);min-width:0}
  .pd .pd-inv-name b{font-size:var(--t-l8)}
  .pd .pd-inv-plat{font-size:var(--t-l10);font-weight:700;letter-spacing:.03em;color:var(--green);border:1px solid rgba(31,227,116,.4);background:rgba(31,227,116,.1);border-radius:6px;padding:var(--s0) var(--s1b);flex:none}
  .pd .pd-inv-toggle{display:flex;align-items:center;gap:var(--s2);flex:none}
  .pd .pd-inv-toggle small{color:var(--muted-2);font-size:var(--t-l10)}
  .pd .pd-inv-chev{color:var(--muted-2);transition:transform .2s}
  .pd .pd-inv-a.open .pd-inv-chev{transform:rotate(180deg)}
  .pd .pd-inv-rows{display:none;grid-template-columns:auto 1fr;gap:var(--s1b) var(--s3);font-size:var(--t-l8);padding:0 var(--s3b) var(--s3)}
  .pd .pd-inv-a.open .pd-inv-rows{display:grid}
  .pd .pd-inv-rows>span:nth-child(odd){color:var(--muted)}
  .pd .pd-inv-rows .v{font-family:monospace;color:var(--paper);text-align:right;word-break:break-all}
  /* Urutan di HP biar sesuai prototype: hero -> info (judul/rating/tab/deskripsi) -> harga/CTA -> investor */
  @media(max-width:820px){
    .pd .detail{display:flex;flex-direction:column;gap:var(--s5)}
    .pd .detail>div:first-child{display:contents}
    .pd .detail-media{order:1;margin-bottom:0}
    .pd .detail>div:last-child{order:2}
    .pd .buybox:not(.pd-inv){order:3}
    .pd .buybox.pd-inv{order:4}
  }
  @media(max-width:560px){
.pd .buybox .p{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s2b);row-gap:var(--s0)}
.pd .buybox .price.num{font-size:var(--t-l3);white-space:nowrap}
.pd .buybox .price.num small{font-size:var(--t-l8)}
.pd .buybox .price-was.num{font-size:var(--t-l7);white-space:nowrap}
  }

/* ============================================================================
   TATA LETAK — build 922 (dari mockup v6)
   ========================================================================= */

/* LEBAR ISI: batas 1480px dilepas, tepi tetap dijaga aturan yang sama.

   Di layar 1920px batas itu menyisakan 440px terbuang di kiri-kanan. Dengan
   `100% − gutter`, isi jadi 1788px dan tepinya 66px tiap sisi — masih
   menuruti `clamp(56px,8vw,132px)`, cuma tidak dipotong lebih jauh.

   Hanya halaman ini: beranda dan katalog tetap 1480px, di sana batas itu
   yang menjaga panjang baris. */
/* RUANG KOSONG DI ATAS DIBUANG.

   `.app-head{padding:var(--s8) 0 0}` menyisakan 32px di bawah topbar. Ruang
   itu dulu menahan tombol "← Kembali" yang duduk di dalam isi halaman —
   tombolnya sekarang MENGAMBANG (position:fixed), jadi ruangnya tidak
   menahan apa pun lagi. */
/* .app-body juga dilebarkan: aturan app.css memberinya max-width:1560px,
   dan halaman ini butuh 1788px penuh. */
.pd .app-body{max-width:none;width:100%;margin:0}
.pd .app-head{padding-top:0}
.pd .app-head > .wrap,.pd section.block > .wrap{width:calc(100% - clamp(56px,8vw,132px))}

/* KOLOM 700px : sisa.

   Riwayat: 1000px (gambar 16:9 jadi 562px — terlalu besar dan mendorong isi
   kiri melewati tinggi layar) → 820px → 700px (gambar 394px).

   Dipatok piksel, bukan fr: yang menentukan adalah kebutuhan gambar 16:9,
   dan itu angka tetap. Perbandingan lentur meleset begitu lebar berubah. */
/* Kolom kiri 620px, kanan MENTOK ke tepi kanan.

   Akun Pantau kembali ke kolom kiri (permintaan Yanz), jadi kolom kiri berisi
   gambar 349px + kartu harga 330px + Akun Pantau 280px = ~959px.

   620px dipilih supaya gambar 16:9 jadi 349px — cukup ringkas untuk kolom
   yang isinya tiga blok. Kanan dapat 1124px, terpakai penuh sampai tepi. */
.pd .detail{grid-template-columns:520px minmax(0,1fr);gap:var(--s10)}

/* Gambar 16:9 lewat aspect-ratio, bukan tinggi tetap — rasionya benar di
   lebar berapa pun. Sebelumnya height:340px, yang menyisakan ruang kosong. */
.pd .detail-media{height:auto;aspect-ratio:16/9}

/* KOLOM KIRI MENEMPEL, tanpa gulir sendiri.

   Isi kiri kini gambar 394px + kartu harga 330px = 724px — muat di layar,
   jadi tidak perlu `max-height` + `overflow-y` yang membuatnya terasa seperti
   dua halaman terpisah. Itu sebabnya Akun Pantau dipindah ke kanan. */
/* MENEMPEL DILEPAS — konsekuensi Akun Pantau kembali ke kiri.

   Tinggi kolom kiri ~959px, lebih tinggi dari layar. Kolom menempel yang
   lebih tinggi dari layar punya bagian bawah yang TIDAK AKAN PERNAH
   terjangkau; itu bug, bukan pilihan tata letak.

   Pertukarannya: kalau ringkasan jauh lebih panjang, bagian bawah kiri akan
   kosong. Dipilih sadar. */
.pd .detail > .kol-kiri{align-self:start}

/* Naskah dibatasi 90 karakter: kolom kanan 1044px membuat baris jadi 107
   karakter — mata melompat terlalu jauh tiap ganti baris. */
/* BATAS LEBAR DILEPAS — naskah memakai kolom kanan sepenuhnya.

   Batas 95ch menyisakan 192px kosong di kanan paragraf, dan naskahnya jadi
   22 baris (673px). Tanpa batas: 115 karakter per baris, 18 baris, 551px —
   lebih pendek 122px dan tepi kanannya terpakai.

   115 karakter memang di atas ambang nyaman (60–80). Yang mengimbanginya
   JARAK ANTAR BARIS dinaikkan 1.8 → 1.9: setelah melompat jauh ke kanan,
   mata butuh jarak lebih lega untuk menemukan awal baris berikutnya. Merapatkan
   baris pada teks lebar justru membuatnya lebih sulit diikuti.

   Hasil akhirnya 581px — tetap lebih pendek dari 673px yang sekarang. */
/* 18px, bukan 16px. Pergeseran otomatis ke tangga (build 972) memilih 16
   sebagai yang terdekat dari 17 — tapi pada kolom 700px itu 83 karakter per
   baris, melewati batas nyaman 60-75. 18px memberi 74.

   Sekaligus menyeragamkannya dengan badan artikel di halaman kabar: perannya
   sama, bacaan panjang di desktop. */
.pd .pd-prose{font-size:var(--t-l5);line-height:1.9;max-width:none}

/* Ukuran naik mengikuti kolom yang melebar. Yang pas di 720px belum tentu
   pas di lebar berbeda. */
/* Nama produk = L2, sama dengan judul artikel dan judul katalog.
     Sebelumnya 38px; perbedaannya muncul karena halaman ini dirancang di
     build berbeda, bukan karena keputusan. */
.pd .page-title{font-size:var(--t-l2);letter-spacing:-.03em;line-height:1.1}
.pd .buybox .price.num{font-size:var(--t-l2)}
.pd .buybox .btn-block{min-height:58px;font-size:var(--t-l6)}

/* Kotak fitur TIGA kolom: pada dua kolom ia jadi 516px per kotak — terlalu
   lebar untuk satu baris teks pendek. */
.pd .pd-feats{grid-template-columns:repeat(3,1fr)}

  /* TOMBOL KEMBALI MENGAMBANG — gayanya DIPINDAH ke mtk.css (build 1001).

     Aturannya dulu disalin di sini dan di tiga berkas lain, dan keempatnya
     sudah melenceng: z-index 70 vs 95, hanya katalog yang punya :active dan
     bayangan hover, dan analisa memakai .b alih-alih .icon. Satu perubahan
     warna berarti empat suntingan, dan yang terlupa baru ketahuan berbulan
     kemudian.

     Sekarang satu sumber di mtk.css, tidak dilingkupi kelas halaman — ia
     milik topbar bersama, sama seperti .nav-kembali. Halaman tinggal
     memasang <a class="kembali-apung">. */

/* AMBANG 1500px — kolom tetap 700px cuma aman di layar lebar.
   Pada 1280px isi tinggal 1178px; kolom kanan akan tersisa 434px. */
@media (max-width:1500px){
  /* 0.8fr : 1fr — KANAN lebih lebar, bukan kiri.

     Sebelumnya 1.15fr:1fr, yang membuat kolom KIRI justru lebih lebar (53%
     berbanding 47%). Itu kebalikan dari yang dimaksud: kolom kiri berisi
     gambar dan kartu harga yang ukurannya tidak perlu besar, sementara
     ringkasan di kanan yang butuh lebar.

     Diukur pada 1440/1366/1280px, kanan selalu lebih lebar dan kiri tidak
     pernah turun di bawah 500px — cukup untuk kartu harga dengan harga coret
     di sampingnya. */
  .pd .detail{grid-template-columns:0.65fr minmax(0,1fr);gap:var(--s8)}
  .pd .pd-feats{grid-template-columns:1fr 1fr}
  .pd .page-title{font-size:var(--t-l2)}
  .pd .buybox .price.num{font-size:var(--t-l2)}
  .pd .pd-prose{font-size:var(--t-l6)}
}

/* POTONGAN "Selengkapnya" DILEPAS di layar lebar.

   `.pd-prose.clamp{max-height:196px}` memotong naskah jadi ~6 baris dari 18 —
   dua pertiganya tersembunyi, padahal ruang di bawahnya kosong.

   Angka 196px masuk akal waktu kolom kanan 720px dan naskahnya dibatasi.
   Setelah kolomnya 1124px dan batasnya dilepas, naskah penuh cuma 581px —
   sementara kolom KIRI di sebelahnya 959px. Memotongnya tidak menghemat apa
   pun; ia cuma menambah satu klik.

   Skripnya sudah menangani ini sendiri: kalau isinya muat, kelas `clamp`
   dilepas dan tombolnya disembunyikan. Menaikkan max-height membuat
   pemeriksaan itu lulus tanpa perlu mengubah JS-nya.

   Di HP potongannya TETAP: di sana kolomnya sempit dan naskah 18 baris jadi
   jauh lebih tinggi. */
@media (min-width:1101px){
  /* DILIPAT LAGI, tapi pada 600px — bukan 196px seperti versi lama.

     196px cuma menampilkan 6 baris dari 18: dua pertiga naskah tersembunyi
     padahal ruang di bawahnya kosong. Build 924 melepasnya sama sekali, dan
     itu ekstrem yang berlawanan — naskah yang benar-benar panjang jadi tidak
     ada remnya.

     600px = 19 baris. Diuji terhadap panjang naskah nyata:
       Doremi ~2000 karakter (581px) → TIDAK dilipat, tampil utuh
       naskah 3000 karakter (871px)  → dilipat, hemat 271px
       naskah 4500 karakter (1307px) → dilipat, hemat 707px

     Jadi lipatannya cuma muncul kalau naskahnya memang panjang. Skripnya
     sudah menangani sisanya: kalau isi muat, kelas `clamp` dilepas dan
     tombolnya disembunyikan — tidak ada tombol yang menganggur. */
  .pd .pd-prose.clamp{max-height:600px}
}

/* AMBANG KEDUA 1330px — batas bawah kolom kiri.

   Baris harga butuh 372px sebaris: "Rp 525.000" (36px) 210 + "/bln" 34 +
   harga coret 108 + celah 20. Ditambah napas, isi kartu minimal ~402px.

   Pada 0.65fr di layar 1280px, isi kartu tinggal 394px — SESAK, harga
   coretnya akan turun baris. Di bawah ambang ini kolomnya jadi satu, dan
   kartu harga memakai lebar penuh.

   Angka 1330px dipilih dari pengukuran, bukan dari ukuran perangkat populer:
   di situlah isi kartu menyentuh 402px. */
@media (max-width:1330px){
  .pd .detail{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .pd .pd-feats{grid-template-columns:1fr 1fr}
}

/* ============================================================================
   KARTU HARGA & AKUN PANTAU — build 928

   Keduanya sebelumnya datar: `background:var(--ink-2)` polos dengan bingkai
   rata. Kartu di beranda dan katalog sudah punya bahasa visualnya sendiri —
   gradasi 158°, bingkai atas lebih terang, dan garis cahaya hijau di tepi
   atas. Halaman ini satu-satunya yang tidak ikut.

   Yang dipakai motif yang SUDAH ADA, bukan gaya baru. Itu bedanya antara
   "menyatu" dan "tempelan".
   ========================================================================= */
.pd .buybox{position:relative;overflow:hidden;
  background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  border-color:var(--line);border-top-color:var(--line-top)}

/* Garis cahaya tepi atas — motif yang sama dengan kartu produk, kartu kabar,
   dan tiga butir Tentang di beranda. */
.pd .buybox::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.4),transparent)}

/* Cahaya radial samar dari sudut kiri atas: motif .hero dan .konsul di
   beranda. Memberi kedalaman tanpa menambah benda baru di kartu. */
.pd .buybox::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at 6% 0%,rgba(31,227,116,.06),transparent 70%)}
.pd .buybox > *{position:relative;z-index:1}

/* KARTU HARGA diberi aksen EMAS, bukan hijau.

   Emas adalah warna harga di situs ini (angka harga, bintang rating). Kartu
   ini isinya harga, jadi aksennya mengikuti isinya — sementara Akun Pantau
   tetap hijau karena ia soal bukti, bukan uang. */
.pd .buybox:not(.pd-inv)::before{
  background:linear-gradient(90deg,transparent,rgba(212,178,92,.45),transparent)}
.pd .buybox:not(.pd-inv)::after{
  background:radial-gradient(420px 260px at 6% 0%,rgba(212,178,92,.07),transparent 70%)}

/* Baris Akun Pantau: latar sedikit lebih gelap dari kartunya supaya terbaca
   sebagai daftar di DALAM kartu, bukan kartu-kartu kecil yang berdiri sendiri. */
.pd .pd-inv-a{background:rgba(4,10,7,.5);border-color:var(--line);
  transition:border-color .18s,background .18s}
.pd .pd-inv-a:hover{border-color:rgba(31,227,116,.3);background:rgba(4,10,7,.72)}

/* ============================================================================
   LABEL — build 929
   ========================================================================= */

/* PITA UNGGULAN — disalin dari kartu katalog, bukan dikarang ulang.

   Dibungkus kotak ber-`overflow:hidden` seukuran sudut: tanpa pembungkus,
   pita yang diputar 45° menjulur keluar gambar. */
.pd .detail-media{position:relative}
.pd .pita-w{position:absolute;top:0;left:0;width:118px;height:118px;overflow:hidden;
  z-index:3;pointer-events:none;border-top-left-radius:var(--r-lg)}
.pd .pita{position:absolute;top:26px;left:-34px;width:168px;transform:rotate(-45deg);
  text-align:center;background:linear-gradient(135deg,#EBD08A,var(--gold) 55%,#B8933F);
  color:#241A06;font-size:var(--t-l10);font-weight:800;letter-spacing:.1em;padding:var(--s1b) 0;
  box-shadow:0 3px 12px rgba(0,0,0,.5)}

/* LABEL PEMASANGAN — bentuknya DIBEDAKAN dari lencana platform.

   MT5 adalah fakta teknis; "Pasang Dibantu" janji layanan. Kalau bentuknya
   sama, ia terbaca sebagai "platform ketiga". Warna emas, sama dengan label
   di kartu katalog. */
.pd .pd-pasang{display:flex;gap:var(--s1b);flex-wrap:wrap}
.pd .tg-pasang{display:inline-flex;align-items:center;gap:var(--s1b);
  font-size:var(--t-l9);font-weight:600;padding:var(--s1) var(--s3);border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted)}
/* Yang DIBANTU diberi aksen emas; "Pasang Sendiri" dibiarkan tenang — ia
   keadaan bawaan hampir semua produk, jadi menonjolkannya cuma menambah
   keramaian. */
.pd .tg-pasang.bantu{border-color:rgba(212,178,92,.34);background:rgba(212,178,92,.1);
  color:var(--gold-2);font-weight:700}
.pd .tg-pasang.bantu::before{content:'✓';font-size:var(--t-l10);opacity:.8}

/* LENCANA KATEGORI di kartu harga: dibuat sepadan dengan label lain, tidak
   lagi lebih besar dari yang lain di kartu yang sama. */
.pd .buybox .card-cat{font-size:var(--t-l10);letter-spacing:.09em;padding:var(--s1) var(--s3)}

/* ============================================================================
   HP — susunan mengikuti mockup v6 (build 937)

   Sebelumnya: gambar → [lencana · judul · Bagikan · rating · tab · naskah]
   → kartu harga → Akun Pantau.

   Masalahnya kolom kanan masih SATU blok (`order:2`), jadi isinya tidak bisa
   diurutkan sendiri-sendiri. Nama produk terkunci di bawah gambar, dan orang
   melihat gambar sebelum tahu itu produk apa.
   ========================================================================= */
@media (max-width:820px){
  /* Kolom kanan ikut `display:contents` supaya anaknya jadi anak .detail
     langsung dan bisa diberi urutan masing-masing. Kolom kiri sudah begitu. */
  .pd .detail > div:last-child{display:contents}

  /* IDENTITAS DULU: lencana → nama → rating.

     `order` hanya berlaku untuk ANAK LANGSUNG. Percobaan pertama memberi
     urutan pada `.card-cat` (anak .buybox) dan `.eyebrow` (cucu) — keduanya
     diam saja. Yang bisa diurutkan cuma anak langsung `.detail` sesudah kedua
     kolomnya `display:contents`.

     Kategori tetap ikut kartu harga: memindahkannya butuh ubah markup, dan
     di kartu harga ia memang menerangkan harga di bawahnya. */
  .pd .eyebrow{order:1;align-self:flex-start}
  .pd .pd-judul{order:2;display:block}
  .pd .pd-rate{order:3;margin-top:var(--s2)}

  .pd .detail-media{order:4;margin-top:var(--s4)}

  /* Harga & penanda. Tombol beli DIBUANG dari sini — ia sudah ada di bilah
     bawah yang selalu terlihat. Dua tombol beli di satu layar membuat orang
     ragu mana yang benar. */
  .pd .buybox:not(.pd-inv){order:5}
  .pd .buybox:not(.pd-inv) .btn-block{display:none}

  /* Naskah, lalu bukti pendukung. */
  .pd .pd-tabs{order:6}
  .pd .pd-panel{order:7}
  .pd .buybox.pd-inv{order:8}

  /* BAGIKAN tetap di dalam .pd-judul (bukan anak .detail, jadi tidak bisa
     diurutkan). Yang bisa dilakukan: membuatnya TENANG, tidak lagi sejajar
     judul dan menyaingi nama produk. */
  .pd .pd-judul .pd-share{margin-top:var(--s3);width:auto;font-size:var(--t-l8)}
  .pd .pd-share-nb{order:9}
}

/* BILAH BELI MENEMPEL — hanya HP.

   Naskah produk panjang; tombol beli di kartu harga hilang jauh di atas
   begitu orang mulai membaca. Bilah ini membuatnya selalu terjangkau tanpa
   memakan ruang baca.

   Di desktop TIDAK dipakai: kartu harganya sudah terlihat sejak awal di kolom
   kiri, jadi bilah cuma akan menutupi isi. */
.pd .pd-bilah{display:none}
@media (max-width:820px){
  .pd .pd-bilah{position:sticky;bottom:0;z-index:60;
    display:flex;align-items:center;gap:var(--s3);
    margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-2);background:rgba(6,13,10,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  /* DIANGKAT DI ATAS BOTTOMBAR untuk pengguna yang masuk (build 1190).

     Bilah ini menempel di dasar layar (`bottom:0`, z-index 60). Bottombar
     aplikasi juga menempel di dasar (`position:fixed;bottom:0`) dengan
     z-index 80 — jadi bilah belinya TERTUTUP PENUH: harga dan tombol Beli
     tidak terlihat sama sekali di HP. Yanz menemukannya saat menelusuri
     jalur checkout.

     Menaikkan z-index bilah BUKAN jawabannya: itu justru menutupi
     bottombar, dan rangka aplikasi harus selalu di atas isi halaman — ia
     jalan keluar, dan jalan keluar tidak boleh tertutup.

     Jadi bilahnya yang digeser naik setinggi bottombar — DIUKUR, bukan
     ditulis tangan.

     Build 1190 sempat memakai `calc(76px + safe-area)`. Tinggi sebenarnya
     sekitar 55px + safe-area, dan selisih ~21px itu muncul di layar sebagai
     CELAH BOLONG antara bilah dan bottombar, dengan isi halaman terlihat
     lewat di sana. Mengganti angkanya jadi 55px cuma memindahkan masalah:
     bottombar isinya bisa berubah, dan angka tangan akan meleset lagi.

     `--botnav-h` ditulis app_shell_js() dari offsetHeight bottombar yang
     sungguhan. Nilai cadangan 0px: kalau JS mati atau bottombar memang
     tidak ada, bilah kembali menempel di dasar seperti semula — bukan
     melayang di tempat yang salah.

     safe-area TIDAK ditambahkan lagi di sini: ia sudah termasuk di dalam
     tinggi bottombar yang diukur, dan menghitungnya dua kali membuat
     bilahnya melayang terlalu tinggi di iPhone.

     Tamu TIDAK punya bottombar, jadi untuknya bilah tetap di dasar —
     karena itu ini dilingkupi `.punya-botnav`, bukan berlaku ke semua. */
  .pd .pd-bilah.punya-botnav{bottom:var(--botnav-h,0px);padding-bottom:var(--s2b)}
  .pd .pd-bilah-h{flex:none;line-height:1.1}
  .pd .pd-bilah-h b{display:block;font-size:var(--t-l6);font-weight:800;color:var(--gold-2);
    line-height:1.15;white-space:nowrap}
  .pd .pd-bilah-h b small{font-size:.6em;font-weight:600;color:var(--muted-2)}
  /* Harga coret di bawah harga utama, bukan di sampingnya: bilah sempit dan
     menyandingkannya membuat tombol terdesak. */
  .pd .pd-bilah-h s{display:block;font-size:var(--t-l9);color:var(--muted-2);line-height:1.2}
  .pd .pd-bilah-h small{font-size:var(--t-l10);color:var(--muted-2)}
  /* Tombolnya memenuhi sisa lebar: sasaran sentuh sebesar mungkin. */
  /* Lebar MENGIKUTI ISI, bukan memenuhi sisa ruang.

     Dengan flex:1 tombolnya 268px dari 358px — jauh melebihi kebutuhan dan
     membuat bilahnya terasa berat. "Masuk untuk Beli" butuh ~154px.

     Tingginya tetap 46px: itu di atas sasaran sentuh minimum 44px, dan tidak
     boleh dikecilkan sekadar supaya terlihat ringan. */
  .pd .pd-bilah .btn{flex:0 1 auto;margin-left:auto;min-height:46px;
    padding:0 var(--s5);font-size:var(--t-l8);justify-content:center;white-space:nowrap}
}

/* ============================================================================
   BARIS HARGA — tahan terhadap panjang digit yang berbeda (build 938)

   Penyebab layout "acak-acakan" di HP: gaya SEBARIS `style="font-size:32px"`
   di markup, yang mengalahkan `.price.num{font-size:26px}` betapa pun
   kekhususannya. Pola yang sama persis dengan build 925.

   Dengan 32px, "Rp 1.250.000" + harga coret butuh 358px dari 326px yang ada.
   `flex-wrap:wrap` membuat harga coretnya TURUN BARIS sendirian — itu yang
   terlihat berantakan, dan hanya pada produk berharga panjang.

   Gaya sebarisnya dibuang; ukurannya kini MENYESUAIKAN lebar layar lewat
   clamp(), jadi digit sepanjang apa pun tetap satu baris. */
/* 6.4vw dipilih dari pengukuran kasus TERPANJANG: "Rp 1.250.000" bersama
   harga coret "Rp 2.500.000" = 308px dari 326px yang ada. Pada 7.4vw ia
   masih 341px dan tetap turun baris. */
.pd .buybox .price.num{font-size:clamp(21px,6.4vw,36px);white-space:nowrap}
.pd .buybox .price.num small{font-size:.42em;font-weight:600}
.pd .buybox .price-was.num{font-size:clamp(13px,3.6vw,15px)}

/* Baris harga tidak boleh membungkus di HP: harga dan harga coret harus tetap
   sebaris. `min-width:0` mengizinkan keduanya menyusut daripada meluber. */
@media (max-width:560px){
  .pd .buybox .p{flex-wrap:nowrap;column-gap:var(--s2);min-width:0}
  .pd .buybox .price.num{min-width:0}
  /* Harga coret boleh MENYUSUT kalau harga utamanya sangat panjang
     ("Rp 12.500.000" bersama coret = 329px dari 326px). Ia keterangan
     tambahan, jadi ia yang mengalah — bukan harga utamanya. */
  .pd .buybox .price-was.num{min-width:0;flex:0 1 auto;overflow:hidden;
    text-overflow:ellipsis}
}

/* ============================================================================
   HP — kartu harga DIBUKA, bukan disembunyikan (build 939, dari mockup HP)

   Harga muncul DUA KALI di HP: di kartu ini dan di bilah bawah yang selalu
   terlihat. Yang di kartu mengulang tanpa menambah apa pun — dan justru ia
   yang membuat "/bln" turun baris saat digitnya panjang.

   Tapi kartunya TIDAK boleh disembunyikan begitu saja: di dalamnya masih ada
   empat hal yang dibutuhkan — lencana kategori, keterangan "Mulai Rp...",
   lencana platform, dan label pemasangan.

   Jadi kotaknya yang dibuka: latar, bingkai, dan padding dilepas, isinya
   mengalir langsung di halaman. Menghemat ~170px tanpa kehilangan apa pun.
   ========================================================================= */
@media (max-width:560px){
  .pd .buybox:not(.pd-inv){background:none;border:0;padding:0;margin-top:var(--s4)}
  .pd .buybox:not(.pd-inv)::before,
  .pd .buybox:not(.pd-inv)::after{display:none}

  /* Baris harga dibuang — ia sudah ada di bilah bawah. */
  .pd .buybox:not(.pd-inv) .p{display:none}

  /* EMPAT LENCANA JADI SATU BARIS: kategori · MT5 · Lisensi · Pasang Dibantu.
     Sebelumnya tiga baris terpisah (kategori sendiri, platform sendiri,
     pemasangan sendiri) = 84px untuk isi yang muat dalam satu baris. */
  .pd .buybox:not(.pd-inv){display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1b)}
  /* `display:contents` HANYA untuk pembungkus (.plats, .pd-pasang) supaya
     lencananya jadi anak langsung dan ikut satu baris.

     TIDAK untuk `.card-cat`: ia lencananya sendiri, bukan pembungkus —
     `display:contents` membuang kotaknya dan teks "EXPERT ADVISOR" tampil
     telanjang tanpa pil. Itu terlihat di layar Yanz. */
  .pd .buybox:not(.pd-inv) .plats,
  .pd .buybox:not(.pd-inv) .pd-pasang{display:contents}
  .pd .buybox:not(.pd-inv) .card-cat{margin:0;align-self:center}
  .pd .buybox:not(.pd-inv) .hint{flex:1 0 100%;margin:var(--s1) 0 0;order:9}

  /* BEST SELLER dibuang di HP: pita UNGGULAN di gambar menandai hal yang
     sama, dan ia tidak memakan baris sendiri. Di desktop keduanya tetap —
     di sana barisnya tidak sesempit ini. */
  .pd .eyebrow{display:none}

  /* AKUN PANTAU tetap menampilkan KETIGA akunnya.

     Mockup sempat mengusulkan menampilkan satu dan melipat sisanya (hemat
     124px). Ditolak: itu menyembunyikan BUKTI — hal yang justru meyakinkan
     pembeli, dan satu-satunya isi halaman ini yang berupa rekam jejak nyata.

     Yang dirapatkan barisnya saja: 62px per akun jadi 52px. */
  .pd .pd-inv-top{min-height:46px;padding-block:var(--s1b)}
  .pd .pd-inv-name{font-size:var(--t-l8)}
}

/* ============================================================================
   HP — perbaikan dari layar sungguhan (build 940)
   ========================================================================= */
@media (max-width:560px){
  /* JUDUL: 40px membuat "Doremi EA Pro MT5" memakan 354px dari 358px —
     nyaris memenuhi lebar, dan nama yang lebih panjang akan pecah tiga baris.
     Ukurannya menyesuaikan lebar layar, sama caranya dengan harga. */
  .pd .page-title{font-size:clamp(21px,6.6vw,32px);line-height:1.2}

  /* BAGIKAN sejajar judul, bukan sebaris sendiri di bawahnya.
     `display:block` (build 937) membuatnya bertumpuk dan memakan 60px untuk
     tombol yang jarang dipakai. Dikembalikan sebaris, tombolnya diringkas
     jadi ikon + teks kecil di kanan judul. */
  .pd .pd-judul{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2b)}
  .pd .pd-judul .page-title{flex:1;min-width:0}
  .pd .pd-judul .pd-share{flex:none;margin:var(--s0) 0 0;padding:var(--s1b) var(--s3);font-size:var(--t-l9)}

  /* TAB: "Pembaruan" terpotong di tepi kanan tanpa tanda bahwa masih ada
     lanjutan. Padding kanan memberi ruang, dan gulirnya dibuat snap supaya
     berhenti rapi di tiap tab. */
  .pd .pd-tabs{padding-right:var(--s4);scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch}

  /* NAMA AKUN PANTAU pecah 2–3 baris karena lencana MT5 dan "read-only"
     memakan lebar tetap. Keduanya diringkas; namanya dapat sisa ruang. */
  .pd .pd-inv-name{flex:1;min-width:0;font-size:var(--t-l8);line-height:1.35}
  .pd .pd-inv-plat{font-size:var(--t-l10);padding:var(--s0) var(--s1b)}
  .pd .pd-inv-toggle small{display:none}
  .pd .pd-inv-top{gap:var(--s2);padding-inline:var(--s3)}

  /* RUANG KOSONG 112px sebelum kaki halaman.

     Penyebabnya dua elemen di urutan 9-10:
       .pd-links     KOSONG di halaman ini, tapi tetap memakan ruang
       .pd-share-nb  keterangan tombol Bagikan, padahal tombolnya kini
                     sejajar judul jauh di atas — keterangannya terpisah dari
                     yang diterangkan

     Yang kosong disembunyikan; keterangan Bagikan menyusul tombolnya. */
  .pd .pd-share-nb{order:2;margin:0;font-size:var(--t-l9);flex:1 0 100%;
    text-align:right;padding-top:var(--s0)}
}

/* ============================================================================
   HP — tiga sisa dari layar sungguhan (build 942)
   ========================================================================= */
@media (max-width:560px){
  /* LENCANA: lima buah butuh 562px dari 358px — pasti dua baris.

     Dua dibuang, dipilih yang paling sedikit membawa informasi BARU:
       EXPERT ADVISOR  kategori; sudah disebut di kartu katalog & judul
       Pasang Sendiri  keadaan BAWAAN hampir semua produk

     Sisa tiga (MT5 · Lisensi Digital · Pasang Dibantu) = 310px → satu baris.
     Di desktop kelimanya tetap: di sana barisnya cukup lebar. */
  .pd .buybox:not(.pd-inv) .card-cat{display:none}
  .pd .tg-pasang:not(.bantu){display:none}

  /* JARAK isi → tab disetel TEGAS.

     Terukur 89px di layar, sementara hitungan dari aturan yang saya temukan
     cuma 44px. Setelah tiga kali menebak sumber selisihnya dan meleset, jarak
     ini dipatok langsung — margin dinolkan lalu diberikan sekali saja. */
  .pd .detail{gap:0}
  .pd .detail > *{margin-top:0}
  .pd .pd-judul{margin-top:var(--s4)}
  .pd .pd-rate{margin-top:var(--s2)}
  .pd .detail-media{margin-top:var(--s4)}
  .pd .buybox:not(.pd-inv){margin-top:var(--s4)}
  .pd .pd-tabs{margin-top:var(--s5)}
  .pd .buybox.pd-inv{margin-top:var(--s5)}

  /* TAB masih terpotong: padding kanan saja tidak cukup karena elemen
     terakhir tetap menempel tepi. Ruang diberikan lewat elemen semu supaya
     ikut tergulir. */
  .pd .pd-tabs::after{content:'';flex:none;width:16px}
}

/* ============================================================================
   TAB & VIDEO — build 943
   ========================================================================= */

/* Ukuran tab di layar lebar. Sebelumnya ditulis sebagai `.pd-tabs a`
   (build 922) dan tidak pernah berlaku — ikut terbuang bersama pemilih
   salahnya, jadi dikembalikan di sini dengan kelas yang benar. */
.pd .pd-tab{font-size:var(--t-l7)}

/* PEMILIH TAB YANG BENAR: `.pd-tab`, bukan `.pd-tabs a`.

   Semua penyetelan tab di build 940 dan 942 menyasar `.pd-tabs a` — pemilih
   yang TIDAK PERNAH cocok, karena markupnya memakai <button class="pd-tab">.
   Aturannya ada, penjaganya hijau, dan tidak satu pun berlaku.

   Ukuran nyatanya 14px + padding 18px: empat tab butuh 387px dari 358px —
   meluber 29px, persis seperti yang terlihat di layar. */
@media (max-width:560px){
  .pd .pd-tab{padding:var(--s2) var(--s3);font-size:var(--t-l8);scroll-snap-align:start}
  /* Tab Video menambah satu lagi, jadi gulirnya tetap diperlukan. Ruang di
     ujung diberikan lewat elemen semu supaya ikut tergulir. */
  .pd .pd-tabs{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .pd .pd-tabs::-webkit-scrollbar{display:none}
}

/* VIDEO PANDUAN — dua kolom di desktop, satu di HP.

   `panduan_videos` sudah ada di tabel products sejak lama dan bisa diisi dari
   admin, tapi halaman produk tidak pernah menampilkannya. */
.pd .pd-vid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3b)}
/* <button>, bukan <a>: ia memicu popup, bukan pindah halaman. Bawaan tombol
   (latar abu, bingkai, padding, teks tengah) harus dinolkan dulu. */
.pd .pd-vid-i{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;
  color:var(--paper);appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;text-align:left;cursor:pointer;width:100%}
.pd .pd-vid-c{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:var(--ink-3)}
.pd .pd-vid-c img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s}
.pd .pd-vid-i:hover .pd-vid-c img{transform:scale(1.04)}

/* TOMBOL PUTAR: lingkaran merah, bentuk yang sudah dikenal semua orang
   sebagai video. Hijau akan tertukar dengan tombol beli, dan emas dengan
   harga — merah satu-satunya yang tidak berebut arti di halaman ini.

   Warnanya rgba, bukan heks baru: palet situs tidak bertambah. */
.pd .pd-vid-p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(214,58,48,.92);color:#fff;font-size:var(--t-l4);
  box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .18s,background .18s}
.pd .pd-vid-p .icon{margin-left:var(--s0)}
.pd .pd-vid-i:hover .pd-vid-p{transform:translate(-50%,-50%) scale(1.08);
  background:rgba(230,64,53,.98)}
.pd .pd-vid-i b{font-size:var(--t-l8);font-weight:600;line-height:1.4}

/* TAUTAN BUKAN-VIDEO: baris ringkas, bentuknya sengaja BERBEDA dari kartu
   video supaya tidak ada yang mengira ia bisa diputar.

   Tanpa ini tautan MQL5 atau Drive hilang diam-diam — lihat
   panduan_produk_semua() di partials/video-tutorial.php. */
.pd .pd-tautan{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2b);
  padding:var(--s3) var(--s3b);border:1px solid var(--line);border-radius:12px;
  background:var(--ink-3);text-decoration:none;color:var(--paper);
  transition:border-color .18s,background .18s}
.pd .pd-tautan:hover{border-color:rgba(31,227,116,.34);background:var(--ink-2)}
.pd .pd-tautan .icon{width:18px;height:18px;flex:none;color:var(--green)}
.pd .pd-tautan b{flex:1;min-width:0;font-size:var(--t-l8);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd .pd-tautan-h{flex:none;font-size:var(--t-l9);color:var(--muted-2)}

@media (max-width:560px){
  .pd .pd-vid{grid-template-columns:1fr;gap:var(--s3)}
  .pd .pd-vid-i b{font-size:var(--t-l8)}
  .pd .pd-vid-p{width:46px;height:46px;font-size:var(--t-l5)}
  .pd .pd-tautan{padding:var(--s3) var(--s3);gap:var(--s2b)}
  .pd .pd-tautan b{font-size:var(--t-l8)}
  /* Nama host dibuang di HP: barisnya sempit dan judulnya lebih penting. */
  .pd .pd-tautan-h{display:none}
}

/* ============================================================================
   HP — tepi, tab, dan letak tautan (build 946)
   ========================================================================= */
@media (max-width:560px){
  /* TEPI: `clamp(56px,8vw,132px)` memberi 28px tiap sisi di layar 390px —
     isi tinggal 334px, 86% lebar layar. Di layar sesempit ini 20px sudah
     cukup memberi napas, dan isinya naik ke 350px.

     Hanya halaman ini: nilai clamp aslinya dipakai seluruh situs. */
  .pd .app-head > .wrap,.pd section.block > .wrap{width:calc(100% - 40px)}

  /* TAB: lima tab pada 12.5px + padding 24px butuh 378px dari 334px. Bahkan
     setelah tepinya dirapatkan, 378 > 350 — masih terpotong.

     Diturunkan ke 12px + padding 20px = 348px dari 350px. MUAT, jadi tidak
     ada lagi yang terpotong dan gulirnya tidak diperlukan. */
  .pd .pd-tab{padding:var(--s2) var(--s2b);font-size:var(--t-l8);letter-spacing:-.01em}
  .pd .pd-tabs{gap:0}
  /* Ruang gulir di ujung tidak lagi perlu karena semuanya muat. */
  .pd .pd-tabs::after{display:none}

  /* TAUTAN PRODUK naik: sebelumnya order 10 — di bawah Akun Pantau DAN
     keterangan Bagikan, hampir tidak akan pernah terlihat.

     Ditaruh tepat sesudah lencana: ia keterangan produk, sekelompok dengan
     MT5 dan Lisensi Digital. Bentuknya chip supaya sebaris dan tidak
     menambah tinggi. */
  .pd .pd-tabs{order:6}
  .pd .pd-panel{order:7}
  .pd .buybox.pd-inv{order:8}
  .pd .pd-share-nb{order:9}
}

/* ============================================================================
   HP — butir fitur, lencana, dan naskah tombol (build 947)
   ========================================================================= */
@media (max-width:560px){
  /* LENCANA TERPOTONG.

     `.plat` dan `.tg-pasang` punya `white-space:nowrap` tapi tidak punya
     `flex:none`. Di dalam baris flex bawaannya `flex-shrink:1`: kotaknya
     menyusut sementara teksnya tidak, jadi teks meluber keluar bingkai dan
     terlihat terpotong.

     Kotaknya dikunci selebar isinya; kalau tidak muat, ia turun baris —
     bukan terpotong. */
  .pd .buybox:not(.pd-inv) .plat,
  .pd .buybox:not(.pd-inv) .tg-pasang{flex:none;white-space:nowrap}

  /* BUTIR FITUR: dua kolom menyisakan 169px per butir, dan sesudah ikon 38px
     + padding tinggal 119px untuk teks. Kalimat 36 karakter butuh 253px —
     pecah dua baris dan berdempetan.

     Satu kolom: teks dapat 282px, cukup untuk satu baris. Ikonnya juga
     dikecilkan 38 → 30px karena di HP ia hanya penanda, bukan isi. */
  .pd .pd-feats{grid-template-columns:1fr;gap:var(--s2)}
  .pd .feat{gap:var(--s2b);align-items:center}
  .pd .feat .fi{width:30px;height:30px;border-radius:9px}
  .pd .feat .fi .icon{width:15px;height:15px}
  .pd .feat b{font-size:var(--t-l8);line-height:1.4;margin-bottom:0}
}

/* Kartu Akun Pantau versi TAMU: ajakan masuk, bukan datanya.

   Isinya bukan cuma angka pertumbuhan — ada nomor akun, server, dan kata
   sandi. Datanya dikunci di sumbernya (lihat product.php), jadi kartu ini
   memang tidak punya apa-apa untuk ditampilkan; ia hanya memberi tahu bahwa
   buktinya ADA. */
.pd .pd-inv-kunci{padding:var(--s4)}
.pd .pd-inv-kunci .pd-inv-h{margin-bottom:var(--s2)}
.pd .pd-inv-kunci .hint{margin:0 0 var(--s3b)}

/* build 1438 — PRATINJAU ADMIN (product.php?pratinjau=1): pita keterangan + tombol beli dimatikan. Hanya tercetak untuk admin.
   Mengikuti aturan berkas ini: dilingkupi .pd, hanya token (--t-l*, --s*, --gold*), tanpa warna baru. */
.pd .pd-pratinjau{margin-top:var(--s5);padding:var(--s2) var(--s3);border-radius:var(--s3);border:1px dashed var(--gold-border);background:var(--gold-bg);font-size:var(--t-l7);line-height:1.5}
.pd .pd-pratinjau b{color:var(--gold-2)}
.pd .pd-beli-mati{opacity:.55;pointer-events:none;cursor:not-allowed}