/* ============================================================================
   INFO & MARKET — gaya halaman.

   Dipindah keluar dari <style> di dalam kabar.php (build 953). Alasannya sama
   seperti katalog (905) dan halaman produk (922): 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:
   1. Dimuat SESUDAH mtk.css dan app.css, jadi menang lewat urutan.
   2. Semua pemilih dilingkupi `.kb` (kelas di <body>), jadi menang lewat
      kekhususan tanpa perlu !important.
   3. kabar.php NOL <style>.
   4. Token warna diwarisi mtk.css.

   Lingkup yang sah harus diikuti spasi atau koma: `.kb-tab` BUKAN lingkup,
   ia nama kelas lain yang kebetulan diawali huruf sama — kesalahan yang
   menelan empat pemilih di build 922. */

.kb body{background:var(--ink);color:var(--paper);font-family:var(--disp)}

  .kb .kb-w{max-width:920px;margin:0 auto;padding:var(--s5) var(--s5) var(--s16)}
  /* Di dalam rangka aplikasi, padding luar sudah diurus .app-body — menambah
     padding lagi di sini membuat isinya terdorong dua kali. */
  

  /* PEMBATAS GANDA DILEPAS (build 1170).

     kb-w-app membatasi 1080px lalu memusatkannya, ditumpuk DI ATAS padding
     .app-body (1560px + 24px) — jadi di layar lebar ada bidang kosong tebal
     di kiri-kanan.

     Pola yang sama sudah diperbaiki di Dompet (build 1160), katalog (1163),
     dan testimoni (1166). Yang mengatur lebar cukup .app-body: satu tempat
     untuk semua halaman, supaya berpindah halaman tidak terasa seperti
     berpindah situs.

     Jarak bawah juga dirapatkan dari 64px — di ujung halaman ia cuma
     menghasilkan gulir kosong sebelum kaki. */
  .kb .kb-w.kb-w-app{padding:0 0 var(--s6);max-width:none;width:100%}

  /* Kaki pengguna: garis pemisah + ruang untuk bottombar di HP. Sama dengan
     katalog (1165) dan testimoni (1166). */
  .kb .app-main > footer{border-top:1px solid var(--line);margin-top:var(--s6)}
  @media (max-width:1024px){
    .kb .app-main > footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  }
  .kb .kb-back{display:inline-flex;align-items:center;gap:var(--s1b);color:var(--muted);
    text-decoration:none;font-size:var(--t-l8);margin-bottom:var(--s3b)}
  .kb .kb-back:hover{color:var(--paper)}

  .kb .kb-art{background:var(--panel);border:1px solid var(--line);border-top-color:var(--line-top);
    border-radius:16px;overflow:hidden;box-shadow:0 6px 26px rgba(0,0,0,.4)}
  .kb .kb-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
    border-bottom:1px solid var(--line);background:#08150F;cursor:zoom-in}
  .kb .kb-b{padding:var(--s6) var(--s6) var(--s7)}
  @media(max-width:620px){ .kb .kb-b{padding:var(--s4) var(--s3b) var(--s5)} }

  .kb .kb-top{display:flex;align-items:center;gap:var(--s2b);flex-wrap:wrap;margin-bottom:var(--s2b)}
  .kb .kb-tag{font-size:var(--t-l10);font-weight:800;letter-spacing:.6px;padding:var(--s1) var(--s2b);border-radius:7px}
  .kb .kb-tag.gold{background:rgba(212,178,92,.14);border:1px solid rgba(212,178,92,.38);color:var(--gold)}
  .kb .kb-tag.green{background:rgba(31,227,116,.13);border:1px solid rgba(31,227,116,.36);color:var(--green)}
  .kb .kb-tag.biru{background:rgba(91,155,213,.14);border:1px solid rgba(91,155,213,.4);color:#5B9BD5}
  .kb .kb-tgl{color:var(--muted-2);font-size:var(--t-l8)}

  .kb .kb-h{font-size:var(--t-l3);font-weight:800;line-height:1.25;letter-spacing:-.02em;margin-bottom:var(--s2)}
  @media(max-width:620px){ .kb .kb-h{font-size:var(--t-l4)} }
  .kb .kb-ex{color:var(--muted);font-size:var(--t-l7);line-height:1.6;margin-bottom:var(--s4)}

  /* pre-wrap: isi disimpan sebagai teks polos, jeda barisnya dihormati.
     Bukan HTML — apa pun yang diketik admin tidak boleh jadi markup. */
  


  .kb .kb-teks{white-space:pre-wrap;color:var(--muted);font-size:var(--t-l7);line-height:1.8;
    padding-top:var(--s4);border-top:1px solid var(--line);overflow-wrap:anywhere;margin-bottom:var(--s4)}
  /* Blok teks KEDUA dan seterusnya tidak berpembatas: garis di antara tiap
     paragraf membuat halamannya terbaca seperti daftar, bukan tulisan. */
  

  .kb .kb-teks-lanjut{padding-top:0;border-top:0}
  .kb .kb-teks strong{color:var(--paper);font-weight:700}
  .kb .kb-gal{margin-bottom:var(--s4)}
  .kb .kb-teks:last-child, .kb .kb-gal:last-child{margin-bottom:0}

  .kb .kb-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s2b)}
  .kb .kb-g{border:1px solid var(--line-2);border-radius:11px;overflow:hidden;cursor:zoom-in;
    background:#08150F;transition:.15s;display:block;padding:0}
  .kb .kb-g:hover{border-color:rgba(91,155,213,.55)}
  .kb .kb-g img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
  .kb .kb-g span{display:block;padding:var(--s1b) var(--s2b) var(--s2);color:var(--muted);font-size:var(--t-l8);text-align:left}

  .kb .kb-aksi{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);
    border-top:1px solid var(--line)}
  .kb .kb-nb{color:var(--muted-2);font-size:var(--t-l8);margin-top:var(--s2b)}

  .kb .kb-cta{margin-top:var(--s4);border:1px solid rgba(31,227,116,.28);background:rgba(31,227,116,.05);
    border-radius:14px;padding:var(--s4) var(--s4);display:flex;align-items:center;
    justify-content:space-between;gap:var(--s3b);flex-wrap:wrap}
  .kb .kb-cta b{display:block;font-size:var(--t-l7);margin-bottom:var(--s0)}
  .kb .kb-cta span{color:var(--muted);font-size:var(--t-l8)}
  

  

  /* ---- MUKA DAFTAR ---- */
  /* Kepala halaman dikecilkan: judul 26px di atas kartu berjudul 14px membuat
     kartunya terasa seperti catatan kaki. */
  

  

  

  .kb .kb-daftar-h{font-size:var(--t-l4);font-weight:700;letter-spacing:-.015em;margin-bottom:var(--s1)}
  .kb .kb-daftar-d{color:var(--muted);font-size:var(--t-l8);margin-bottom:var(--s4)}

  .kb .kb-tabs{display:flex;gap:var(--s1b);flex-wrap:wrap;margin-bottom:var(--s4)}
  .kb .kb-tab{display:inline-flex;align-items:center;gap:var(--s1b);padding:var(--s2) var(--s3b);border-radius:10px;
    border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:var(--t-l8);
    font-weight:600;transition:.15s;background:var(--panel)}
  .kb .kb-tab:hover{border-color:var(--line-2);color:var(--paper)}
  .kb .kb-tab.on{border-color:rgba(31,227,116,.5);color:var(--green);background:rgba(31,227,116,.08)}
  .kb .kb-tab span{background:rgba(135,170,145,.16);color:var(--muted-2);border-radius:6px;
    padding:var(--s0) var(--s1b);font-size:var(--t-l10);font-weight:800}
  .kb .kb-tab.on span{background:rgba(31,227,116,.2);color:var(--green)}

  /* auto-fill + minmax: kolomnya menyesuaikan lebar layar sendiri, jadi tidak
     perlu tiga titik putus yang harus dijaga cocok satu sama lain. */
  


  .kb .kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}

  .kb .kb-kartu{background:var(--panel);border:1px solid var(--line);border-top-color:var(--line-top);
    border-radius:14px;overflow:hidden;text-decoration:none;color:var(--paper);
    display:flex;flex-direction:column;transition:.15s}
  .kb .kb-kartu:hover{border-color:rgba(31,227,116,.4);transform:translateY(-2px)}
  .kb .kb-kartu img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
    border-bottom:1px solid var(--line);background:#08150F}
  /* Kabar tanpa gambar tetap punya bidang atas, kalau tidak kartunya jadi
     jauh lebih pendek dan barisnya terlihat bolong. */
  

  .kb .kb-kartu-nogbr{aspect-ratio:16/9;border-bottom:1px solid var(--line);
    background:radial-gradient(ellipse at 30% 30%,rgba(31,227,116,.10),transparent 60%),
               linear-gradient(150deg,#0d2a1e,#061410 70%)}
  .kb .kb-kartu-b{padding:var(--s2b) var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
  .kb .kb-kartu-t{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
  .kb .kb-kartu-tgl{color:var(--muted-2);font-size:var(--t-l9)}

  /* JUDUL & RINGKASAN DIPOTONG DI CSS, bukan di PHP.

     Pemotongan di PHP (mb_strimwidth 110 huruf) memutus di tengah kata —
     "sekar...", "Meta...". line-clamp memotong di batas BARIS, jadi kata
     terakhirnya utuh dan titik-titiknya diletakkan peramban.

     Dan karena tiap kartu kini punya jumlah baris yang SAMA, tingginya
     seragam sendiri — tanpa itu, kartu berisi dua baris ikut setinggi kartu
     terpanjang di barisnya dan menyisakan ruang kosong menganga. */
  


  .kb .kb-kartu-b b{font-size:var(--t-l7);font-weight:600;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:2.7em}
  .kb .kb-kartu-ex{color:var(--muted);font-size:var(--t-l8);line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}

  /* ---- ANALISA OTOMATIS ----
     Label ABU-ABU, bukan warna kelima.

     Situs sudah memakai emas (promo), hijau (update), biru (market), plus
     merah-hijau untuk arah harga. Warna keenam membuatnya terlihat seperti
     mainan, bukan alat trading.

     Abu-abu juga menyampaikan sesuatu yang warna lain tidak bisa: ini
     satu-satunya label yang isinya BUKAN tulisan manusia. Dan karena labelnya
     netral, warna di dalam kartu bebas berarti satu hal saja — arah harga. */
  


  .kb .kb-tag.netral{background:rgba(135,170,145,.1);border:1px solid var(--line-2);color:var(--muted)}

  /* ---- BARIS RINGKAS di tab Semua ----
     Sengaja lebih rapat dan lebih tenang daripada kartu kabar: ini ringkasan,
     bukan daftar kedua. */
  


  .kb .ap-strip{border:1px solid var(--line);background:var(--panel);
    border-radius:14px;padding:var(--s3) var(--s3b) var(--s3b);margin-bottom:var(--s3b)}
  .kb .ap-strip-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2b);flex-wrap:wrap}
  .kb .ap-strip-h b{font-size:var(--t-l8);font-weight:700}
  /* Titik hijau kecil menggantikan label ANALISA yang besar — di baris yang
     tugasnya cuma menunjuk, label sebesar itu tidak menambah apa pun. */
  

  .kb .ap-titik{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
    box-shadow:0 0 0 3px rgba(31,227,116,.14)}
  .kb .ap-kapan{color:var(--muted-2);font-size:var(--t-l9)}
  .kb .ap-strip-h a{margin-left:auto;color:var(--muted);font-size:var(--t-l8);font-weight:600;
    text-decoration:none}
  .kb .ap-strip-h a:hover{color:var(--green)}

  .kb .ap-strip-w{position:relative}
  /* Tepi memudar: tanda ada isi lagi di kanan, bekerja juga di layar sentuh
     yang tidak punya tombol panah. */
  

  .kb .ap-strip-w::after{content:'';position:absolute;top:0;bottom:0;right:0;width:40px;
    pointer-events:none;background:linear-gradient(to left,var(--panel),transparent)}
  .kb .ap-strip-nav{width:30px;height:30px;font-size:var(--t-l7);opacity:0;pointer-events:none;
    transition:opacity .15s}
  .kb .ap-strip-nav.prev{left:-7px} .kb .ap-strip-nav.next{right:-7px}
  .kb .ap-strip-nav.bisa{opacity:.9;pointer-events:auto}
  .kb .ap-strip-nav.mati{opacity:0;pointer-events:none}
  @media(max-width:760px){ .kb .ap-strip-nav{display:none} }

  .kb .ap-pairs{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:var(--s0);scrollbar-width:none;-ms-overflow-style:none}
  .kb .ap-pairs::-webkit-scrollbar{display:none}
  .kb .ap-pair{flex:0 0 128px;scroll-snap-align:start;text-decoration:none;
    border:1px solid var(--line);border-radius:10px;padding:var(--s2) var(--s2b) var(--s2b);
    background:var(--band);color:var(--paper);transition:.15s}
  .kb .ap-pair:hover{border-color:rgba(31,227,116,.45)}
  /* Sinyal lemah: KARTUNYA yang memudar, bukan diberi tulisan tambahan.
     Disorot ia kembali terang — informasinya tidak hilang, cuma tidak
     berteriak. */
  

  .kb .ap-pair.lemah{opacity:.55}
  .kb .ap-pair.lemah:hover{opacity:1}
  .kb .ap-pair b{display:block;font-size:var(--t-l8);font-weight:800;letter-spacing:-.01em}

  /* Bias SATU BARIS, tidak pernah melipat — "SIDEWAYS / NETRAL" yang melipat
     membuat tinggi kartu bergerigi. */
  


  .kb .ap-bias{display:block;font-size:var(--t-l9);font-weight:700;margin-top:var(--s0);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kb .ap-bar{display:block;height:4px;border-radius:3px;background:rgba(135,170,145,.13);
    margin-top:var(--s2);overflow:hidden}
  .kb .ap-bar i{display:block;height:100%;border-radius:3px}
  .kb .ap-bar i.naik{background:var(--green)}
  .kb .ap-bar i.turun{background:#F07A7A}
  .kb .ap-bar i.datar{background:var(--muted-2)}
  .kb .naik{color:var(--green)} .kb .turun{color:#F07A7A} .kb .datar{color:var(--muted)}
  .kb .ap-basi{color:#F07A7A}

  /* ---- KARTU di tab Analisa ---- */
  


  .kb .ap-kartu .kb-kartu-b{gap:0;padding:var(--s3) var(--s3b) var(--s3b)}
  .kb .ap-kartu.lemah{opacity:.62}
  .kb .ap-kartu.lemah:hover{opacity:1}
  .kb .ap-k-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
  .kb .ap-k-jam{margin-left:auto;color:var(--muted-2);font-size:var(--t-l9)}
  .kb .ap-pin{color:var(--gold);font-size:var(--t-l9)}
  /* Nama pair paling besar; bias jadi keterangan di bawahnya. */
  

  .kb .ap-simb{display:block;font-size:var(--t-l5);font-weight:800;letter-spacing:-.01em;line-height:1.15}
  .kb .ap-bs{display:block;font-size:var(--t-l8);font-weight:700;margin-top:var(--s0);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kb .ap-kartu .ap-bar{height:5px;margin-top:var(--s2b)}
  .kb .ap-meta{display:block;color:var(--muted);font-size:var(--t-l8);margin-top:var(--s2)}
  .kb .ap-lemah{display:inline-block;margin-top:var(--s1b);font-size:var(--t-l10);font-weight:700;
    color:var(--gold);border:1px solid rgba(212,178,92,.35);background:rgba(212,178,92,.07);
    border-radius:6px;padding:var(--s0) var(--s1b)}

  .kb .kb-nav{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s6)}

  .kb .kb-kosong{text-align:center;padding:var(--s16) var(--s5)}
  .kb .kb-kosong h1{font-size:var(--t-l4);margin-bottom:var(--s2)}
  .kb .kb-kosong p{color:var(--muted);font-size:var(--t-l7);margin-bottom:var(--s4)}

  /* pembesar gambar */
  


  .kb .kb-zoom{position:fixed;inset:0;background:rgba(4,8,6,.93);display:none;
    align-items:center;justify-content:center;padding:var(--s5);z-index:80;cursor:zoom-out}
  .kb .kb-zoom.on{display:flex}
  .kb .kb-zoom img{max-width:100%;max-height:88vh;border-radius:12px;display:block}
  .kb .kb-zoom-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;
    color:var(--muted);font-size:var(--t-l8);padding:0 var(--s5)}

  /* Gaya kartu rekomendasi pindah ke mtk_kartu_rek_css() di partials/ui.php. */

/* ============================================================================
   INFO & MARKET — tampilan baru (build 954)
   ========================================================================= */

/* KEPALA HALAMAN: judul kiri, Bagikan kanan. */
.kb .kb-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.kb .kb-share{flex:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;
  padding:0 var(--s4);border-radius:999px;border:1px solid var(--line-2);
  background:transparent;color:var(--paper);font:inherit;font-size:var(--t-l8);font-weight:600;
  cursor:pointer;transition:border-color .18s,background .18s}
.kb .kb-share:hover{border-color:rgba(31,227,116,.4);background:var(--ink-2)}
.kb .kb-share .icon{width:16px;height:16px}

/* KISI: 4 kolom, bukan auto-fill 240px.

   `auto-fill minmax(240px,1fr)` menghasilkan 7 kolom di layar 1788px. Tiap
   kartu 244px, dan gambar 16:9-nya cuma 137px tinggi — terlalu kecil untuk
   halaman yang isinya bacaan. Pada 4 kolom gambarnya 243px. */
/* LEBAR ISI mode daftar: 920 → 1440px.

   `.kb-w{max-width:920px}` benar untuk ARTIKEL — itu panjang baris yang
   nyaman dibaca. Untuk daftar kartu ia memaksa kisi jadi 3 kolom @ 295px.

   Kesalahan build 954: kisi 4 kolom dihitung terhadap 1788px, padahal isinya
   920px. Hasilnya kartu justru MENGECIL dari 295px jadi 216px — kebalikan
   dari yang dimaksud. */
.kb .kb-w-lebar{max-width:1440px}

/* 4 kolom @ 346px, gambar 16:9 jadi 195px. Pada 920px yang lama, 4 kolom
   cuma 216px — itu sebabnya lebarnya harus dinaikkan lebih dulu. */
.kb .kb-grid{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media (max-width:1200px){ .kb .kb-grid{grid-template-columns:repeat(3,1fr)} }

/* SOROTAN: satu kartu besar + dua kartu samping. */

/* Kartu utama: teks DI ATAS gambar, bukan di bawahnya.

   Bentuk bertumpuk membuatnya 755px tinggi untuk satu kartu, dan dua kartu
   samping dipaksa membagi tinggi yang sama. Teks yang berdiri pada gradasi
   memakai motif yang SUDAH dipakai kartu produk di beranda. */

/* Kartu samping tetap MENDATAR: bertumpuk butuh 480px sementara ruangnya
   303px. Teksnya ditengahkan karena kartu mendatar menyisakan ruang di atas
   dan bawah. */

@media (max-width:900px){
  .kb .kb-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:560px){
  /* Bagikan jadi IKON di samping judul. Tombol berteks selebar layar membuatnya
     terlihat seperti tindakan UTAMA halaman — padahal yang utama membaca. */
  .kb .kb-hd{gap:var(--s3)}
  .kb .kb-share{width:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%}
  .kb .kb-share span{display:none}

  /* Sorotan: rasio 4:3, bukan 16:9. Pada 350px, 16:9 cuma 197px dan teks yang
     ditumpangkan menutupi hampir seluruh gambarnya. */

  /* Kisi jadi daftar mendatar: lebih cepat dipindai daripada kartu bertumpuk. */
  .kb .kb-grid{grid-template-columns:1fr;gap:var(--s3)}
  .kb .kb-grid .kb-kartu{flex-direction:row}
  .kb .kb-grid img,
  .kb .kb-grid .kb-kartu-nogbr{width:38%;flex:none;height:auto;object-fit:cover;aspect-ratio:1/1}
  .kb .kb-grid .kb-kartu-b{justify-content:center;padding:var(--s3) var(--s3b);gap:var(--s1b)}
  .kb .kb-grid .kb-kartu-ex{display:none}
  .kb .kb-grid b{font-size:var(--t-l7);line-height:1.4}

  /* Tab digulir mendatar, tidak lagi membungkus jadi dua baris. */
  .kb .kb-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--s1b)}
  .kb .kb-tabs::-webkit-scrollbar{display:none}
  .kb .kb-tab{flex:none;white-space:nowrap}
}

/* ============================================================================
   BAGIKAN PER TULISAN & TAB ANALISA DI HP (build 955)
   ========================================================================= */

/* Kartunya <article>, bukan <a>: tombol di dalam tautan itu markup tidak sah,
   dan menekannya ikut memicu tautannya.

   Judulnya yang jadi tautan, ::after-nya menutupi seluruh kartu — pola
   "stretched link". Tombol bagikan sibling dengan z-index lebih tinggi. */
.kb .kb-kartu{position:relative}
.kb .kb-kartu-b b a{color:inherit;text-decoration:none}
.kb .kb-kartu-b b a::after{content:'';position:absolute;inset:0;z-index:1}

/* Sudut kanan atas: sudut kiri sudah dipakai lencana jenis, jadi keduanya
   tidak pernah bertabrakan. */
.kb .kb-kbag{position:absolute;top:10px;right:10px;z-index:3;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(4,10,7,.72);color:var(--paper);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;padding:0;transition:border-color .18s,background .18s,color .18s}
.kb .kb-kbag:hover{border-color:rgba(31,227,116,.45);background:rgba(10,26,18,.9);color:var(--green)}
.kb .kb-kbag .icon{width:15px;height:15px}

@media (max-width:560px){
  /* Di HP kartunya mendatar dan gambarnya cuma 38% lebar — tombol di atas
     gambar akan menutupi hampir seluruhnya. Dipindah ke kanan bawah kartu. */
  .kb .kb-grid .kb-kbag{top:auto;bottom:8px;right:8px;width:28px;height:28px}
  .kb .kb-grid .kb-kbag .icon{width:13px;height:13px}

  /* TAB ANALISA: kartunya cuma 170px lebar, isi 144px. Tiga baris tidak muat
     pada ukuran desktop:

       "5 TF naik · 1 turun · skor 0,84"  191px → pecah dua baris
       "· perlu diperbarui" di baris jam  +100px → pecah juga
       nama pair 19px terasa terlalu besar untuk kartu sesempit itu

     Yang diringkas TEKSNYA juga, bukan cuma ukurannya: menurunkan ukuran
     huruf saja membuat angkanya sulit dibaca tanpa menyelesaikan luapannya. */
  .kb .ap-simb{font-size:var(--t-l6)}
  .kb .ap-bs{font-size:var(--t-l10)}
  .kb .ap-k-top{gap:var(--s1);font-size:var(--t-l10)}
  .kb .ap-k-jam{font-size:var(--t-l10)}
  .kb .ap-meta{font-size:var(--t-l10)}
  .kb .ap-lemah{font-size:var(--t-l10)}
  /* "perlu diperbarui" jadi TITIK: teksnya 100px, tidak akan pernah muat di
     baris 144px. Artinya dijelaskan di keterangan atas kisi. */
  .kb .ap-basi{width:5px;height:5px;border-radius:50%;background:#F0A07A;
    display:inline-block;overflow:hidden;text-indent:-99px;vertical-align:1px}
}

/* ============================================================================
   KARTU UTAMA MEMBENTANG DUA KOLOM (build 957)

   Blok sorotan terpisah memaksa dua kartu samping jadi MENDATAR: gambarnya
   dijejalkan ke 212x243px sementara aslinya 16:9. `object-fit:cover` memotong
   51% lebarnya — dan gambar di halaman ini BANNER BERTEKS, jadi tulisannya
   hilang.

   Sekarang kartu pertama cuma membentang dua kolom di kisi yang sama. Semua
   gambar tetap 16:9 utuh: yang besar 400px tinggi, yang lain 195px. */
.kb .kb-utama{grid-column:span 2}
.kb .kb-utama img,
.kb .kb-utama .kb-kartu-nogbr{aspect-ratio:16/9;width:100%;object-fit:cover}

/* Teks di atas gambar, seperti kartu produk di beranda. Bentuk bertumpuk
   membuat kartu ini 400 + 150 = 550px sementara kartu sebelahnya 285px. */
.kb .kb-utama{position:relative}
.kb .kb-utama::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(4,10,7,.55) 56%,rgba(4,10,7,.9) 83%,#040A07)}
.kb .kb-utama .kb-kartu-b{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--s5) var(--s6) var(--s6)}
.kb .kb-utama b{font-size:var(--t-l3);line-height:1.3;letter-spacing:-.02em}
.kb .kb-utama .kb-kartu-ex{font-size:var(--t-l8);-webkit-line-clamp:2}
/* Tombol bagikan tetap di atas gradasi. */
.kb .kb-utama .kb-kbag{z-index:4}

@media (max-width:1200px){
  /* Tiga kolom: membentang dua masih menyisakan satu kartu di sampingnya. */
  .kb .kb-utama b{font-size:var(--t-l4)}
}
@media (max-width:900px){
  .kb .kb-utama{grid-column:span 2}
}
@media (max-width:560px){
  /* Satu kolom: tidak ada yang dibentangi. Kartu utama tetap bertumpuk
     dengan gambar penuh, sementara kartu lain mendatar. */
  .kb .kb-utama{grid-column:span 1;flex-direction:column}
  .kb .kb-grid .kb-utama img,
  .kb .kb-grid .kb-utama .kb-kartu-nogbr{width:100%;aspect-ratio:16/9}
  .kb .kb-utama .kb-kartu-b{padding:var(--s4) var(--s4) var(--s4)}
  .kb .kb-utama b{font-size:var(--t-l6)}
  .kb .kb-utama .kb-kartu-ex{display:-webkit-box;font-size:var(--t-l8)}
  .kb .kb-grid .kb-utama .kb-kbag{top:10px;bottom:auto;right:10px;width:32px;height:32px}
}

/* ============================================================================
   GRADASI KARTU & PEMISAH "TERBARU" (build 958)
   ========================================================================= */

/* Kartunya `background:var(--panel)` — warna rata. Halaman lain sudah memakai
   gradasi 158° yang sama sejak build 928:

     beranda.css   linear-gradient(158deg,#122519,#080F0B)
     produk.css    linear-gradient(158deg,#152C21,#0B1812)
     katalog.css   linear-gradient(158deg,#152C21,#0B1812)

   Dipakai nilai yang sama, bukan nilai baru: ini menyelaraskan halaman ini
   dengan yang lain, bukan memperkenalkan gaya sendiri. */
.kb .kb-kartu{background:linear-gradient(158deg,#152C21 0%,#0B1812 100%)}

/* Garis cahaya tepi atas — motif yang sama dengan kartu harga di halaman
   produk. Ia memberi kesan permukaan yang terangkat tanpa menambah warna. */
.kb .kb-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,.38),transparent)}

/* TEKSTUR: kisi halus di badan kartu.

   Dibuat dari dua repeating-gradient, bukan berkas gambar — tidak menambah
   permintaan jaringan, dan ikut menyesuaikan diri di layar rapat.

   Kepekatannya sengaja rendah (.028): pada gambar banner yang sudah ramai,
   tekstur yang terlihat jelas justru menambah kepadatan. */
.kb .kb-kartu-b{position:relative}
.kb .kb-kartu-b::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(135,170,145,.028) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(135,170,145,.028) 0 1px,transparent 1px 22px)}
.kb .kb-kartu-b > *{position:relative;z-index:1}

/* Cahaya radial di sudut kiri atas badan — sama seperti kartu harga produk. */
.kb .kb-kartu-b::after{content:'';position:absolute;left:0;top:0;width:60%;height:70%;
  pointer-events:none;
  background:radial-gradient(ellipse at top left,rgba(31,227,116,.06),transparent 70%)}

.kb .kb-kartu:hover{border-color:rgba(31,227,116,.28)}

/* PEMISAH "Terbaru": satu-satunya penanda bagian.

   Pemecahan per jenis dibatalkan — tab saringan sudah melakukannya, dan dua
   alat untuk pekerjaan yang sama membuat orang bertanya bedanya apa. */
.kb .kb-bag-h{display:flex;align-items:baseline;gap:var(--s3);
  margin:0 0 var(--s4);padding-bottom:var(--s2b);border-bottom:1px solid var(--line)}
.kb .kb-bag-h h2{font-size:var(--t-l6);font-weight:800;letter-spacing:-.01em}

@media (max-width:560px){
  .kb .kb-bag-h{margin-bottom:var(--s3);padding-bottom:var(--s2)}
  .kb .kb-bag-h h2{font-size:var(--t-l7)}
  /* Tekstur dimatikan di HP: kartunya mendatar dan badannya sempit, jadi
     kisinya cuma jadi derau tanpa menambah kedalaman. */
  .kb .kb-kartu-b::before{display:none}
}

/* ============================================================================
   BUILD 959 — tombol kembali desktop, pita analisa, saringan, garis pemisah
   ========================================================================= */

  /* 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">. */

/* PITA ANALISA: gradasi dan tekstur yang sama dengan kartu, supaya ia terbaca
   sebagai bagian dari halaman — bukan kotak asing yang ditempel di atas. */
.kb .ap-strip{background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  position:relative;overflow:hidden}
.kb .ap-strip::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,178,92,.42),transparent)}
/* Cahaya emas di sudut: membedakannya dari kartu kabar yang berpendar hijau.
   Warnanya emas karena pita ini soal ANGKA, sekelompok dengan harga. */
.kb .ap-strip::after{content:'';position:absolute;right:0;top:0;width:38%;height:100%;
  pointer-events:none;
  background:radial-gradient(ellipse at top right,rgba(212,178,92,.07),transparent 68%)}
.kb .ap-strip-h,.kb .ap-strip-w{position:relative;z-index:1}

/* Tiap kotak pasangan diberi permukaan sendiri, bukan cuma bingkai. */
.kb .ap-pair{background:linear-gradient(160deg,rgba(21,44,33,.82),rgba(8,21,15,.82));
  transition:border-color .16s,transform .16s}
.kb .ap-pair:hover{border-color:rgba(31,227,116,.3);transform:translateY(-1px)}

/* SARINGAN: bentuk pil yang jelas terpilih, bukan bingkai tipis yang sama
   semua. Yang aktif dapat latar dan bayangan; yang lain tetap datar. */
.kb .kb-tab{background:var(--ink-3);border:1px solid var(--line);
  transition:border-color .16s,background .16s,color .16s}
.kb .kb-tab:hover{border-color:var(--line-2);color:var(--paper)}
.kb .kb-tab.on{background:linear-gradient(160deg,rgba(31,227,116,.16),rgba(31,227,116,.07));
  border-color:rgba(31,227,116,.42);color:var(--green);
  box-shadow:0 4px 14px rgba(31,227,116,.12)}
/* Angka di dalam tab ikut menegas saat terpilih. */
.kb .kb-tab.on span{background:rgba(31,227,116,.18);color:var(--green)}

/* GARIS PEMISAH sesudah tiga kartu teratas — ELEMEN SUNGGUHAN.

   Build 959 memakainya sebagai `::after` kartu ketiga, dan itu TIDAK PERNAH
   TERLIHAT: `.kb-kartu` punya `overflow:hidden`, jadi garis yang digambar di
   luar kotaknya (bottom:-12px, lebar 400%) terpotong habis.

   Kekhawatiran waktu itu — "elemen pemisah akan memakan satu sel dan
   menggeser kartu sesudahnya" — keliru: `grid-column:1/-1` memakan satu
   BARIS, bukan satu sel. Tidak ada kartu yang bergeser, dan posisinya tepat
   karena ia benar-benar ada di aliran kisi. */
.kb .kb-batas{grid-column:1/-1;height:1px;border:0;margin:var(--s1b) 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 10%,var(--line-2) 90%,transparent)}
@media (max-width:560px){ .kb .kb-batas{margin:var(--s0) 0} }

/* ============================================================================
   HALAMAN DETAIL — DUA KOLOM (build 961)

   Satu kolom 920px menyisakan 260px kosong tiap sisi di layar 1440px, DAN
   barisnya sudah terlalu panjang: 872px pada 16,5px = 100 karakter, sementara
   batas nyaman baca 60–75.

   Naskah dipersempit ke 700px dan hurufnya diperbesar jadi 18px → 73 karakter.
   Jadi naskahnya justru LEBIH SEMPIT, bukan lebih lebar: ini memperbaiki
   panjang baris, bukan sekadar mengisi kekosongan.
   ========================================================================= */
/* 65/35, bukan lebar tetap.

   Lebar tetap 700px membuat kolom kanan memakan SISA — dan di layar besar
   sisanya jadi 548px, kelewat lebar. Dengan pecahan, keduanya tumbuh
   sebanding dan tidak ada yang membengkak sendiri.

   Pada isi 1128px: naskah 707px (74 karakter), kanan 381px. */
.kb .kb-duo{display:grid;grid-template-columns:70fr 30fr;gap:var(--s8);align-items:start}
.kb .kb-utama-kol{min-width:0}

/* Isi halaman detail dilebarkan 920 → 1120px. Mode daftar sudah punya
   `kb-w-lebar` (1440px) sejak build 956; detail perlu angkanya sendiri karena
   naskahnya harus tetap sempit. */
.kb .kb-w-artikel{max-width:1120px}

/* Kolom kanan ikut menggulir: pita analisa tetap terlihat selama membaca. */
.kb .kb-sisi{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:20px;min-width:0}

/* Badan artikel: 18px pada 700px = 73 karakter per baris. */
.kb .kb-b{font-size:var(--t-l5);line-height:1.85}
/* Judul artikel = L2. */
.kb .kb-h{font-size:var(--t-l2);line-height:1.22;letter-spacing:-.025em}
.kb .kb-ex{font-size:var(--t-l6);line-height:1.65}

/* Kartu artikel ikut gradasi, sama seperti kartu daftar sejak build 958. */
.kb .kb-art{background:linear-gradient(158deg,#152C21 0%,#0B1812 100%)}

/* Pita analisa dan daftar terkait di kolom sempit: penggambar bersamanya
   dipakai apa adanya, cuma dirapatkan supaya muat. */

@media (max-width:1180px){
  /* Di bawah 1180px, dua kolom membuat naskahnya menyempit di bawah batas
     nyaman. Lebih baik satu kolom penuh. */
  .kb .kb-duo{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .kb .kb-sisi{position:static}
  .kb .kb-w-artikel{max-width:920px}
}

@media (max-width:560px){
  .kb .kb-h{font-size:var(--t-l4);line-height:1.28}
  .kb .kb-ex{font-size:var(--t-l7)}
  .kb .kb-b{font-size:var(--t-l6);line-height:1.8}
  .kb .kb-duo{gap:var(--s6)}
}

/* ============================================================================
   HALAMAN DETAIL — DESAIN (build 962)

   Build 961 memindah kolomnya tapi tidak menyentuh desainnya sama sekali.
   Ini bagian yang tertinggal.
   ========================================================================= */


/* Lama baca, dipisah titik kecil dari tanggalnya. */
.kb .kb-titik{width:3px;height:3px;border-radius:50%;background:var(--muted-2);flex:none}
.kb .kb-baca{font-size:var(--t-l8);color:var(--muted-2)}
.kb .kb-top{display:flex;align-items:center;gap:var(--s2b);flex-wrap:wrap}

/* JUDUL DI BADAN: garis aksen di kiri, warnanya mengikuti jenis.

   Sebelumnya judul badan rata dengan naskahnya, jadi ia cuma terbaca sebagai
   teks yang lebih besar — bukan penanda bagian. */
.kb .kb-b h2,.kb .kb-b h3{padding-left:var(--s3b);border-left:3px solid var(--green);
  margin:var(--s8) 0 var(--s3);letter-spacing:-.015em}
.kb .kb-b h2{font-size:var(--t-l4);font-weight:800}
.kb .kb-b h3{font-size:var(--t-l5);font-weight:700}
.kb .kb-w-biru .kb-b h2,.kb .kb-w-biru .kb-b h3{border-left-color:var(--biru)}
.kb .kb-w-gold .kb-b h2,.kb .kb-w-gold .kb-b h3{border-left-color:var(--gold)}

/* BUTIR DAFTAR bertitik warna aksen, bukan bulatan bawaan peramban. */
.kb .kb-b ul{margin:var(--s3b) 0;list-style:none;padding-left:0}
.kb .kb-b li{position:relative;padding-left:var(--s6);margin-top:var(--s2b)}
.kb .kb-b li::before{content:'';position:absolute;left:4px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--green)}
.kb .kb-w-biru .kb-b li::before{background:var(--biru)}
.kb .kb-w-gold .kb-b li::before{background:var(--gold)}

/* KUTIPAN berkotak: <blockquote> sebelumnya tampil seperti paragraf biasa. */
.kb .kb-b blockquote{margin:var(--s6) 0;padding:var(--s5) var(--s6);border-radius:12px;
  border:1px solid var(--line);background:linear-gradient(158deg,#152C21,#0B1812);
  font-size:var(--t-l6);line-height:1.75;color:var(--muted)}

/* Baris aksi SUDAH punya garis pemisah sejak lama (aturan di blok atas) —
   yang di sini cuma menambah jaraknya, karena naskahnya kini lebih panjang. */
.kb .kb-aksi{margin-top:var(--s7);padding-top:var(--s5)}

@media (max-width:560px){
  .kb .kb-b h2{font-size:var(--t-l5);margin:var(--s6) 0 var(--s2b)}
  .kb .kb-b h3{font-size:var(--t-l6)}
  .kb .kb-b blockquote{font-size:var(--t-l7);padding:var(--s4) var(--s4)}
  .kb .kb-aksi{margin-top:var(--s6);padding-top:var(--s4)}
  .kb .kb-aksi > *{flex:1}
}

/* KARTU TERKAIT di kolom kanan: DAFTAR TEGAK, bukan gulir mendatar.

   `post_baris_rek()` penggambar BERSAMA — halaman analisa memakainya juga,
   jadi markupnya tidak disentuh. Yang disetel cuma tampilannya di kolom
   sempit ini, lewat lingkup `.kb-sisi`.

   Di kolom 380px, gulir mendatar berarti sebagian kartu tersembunyi tanpa
   tanda. Sebagai daftar tegak dengan gambar 96px, enam kartu cuma butuh
   ruang yang di kisi bawah dipakai tiga. */
/* Aturan bentuk-ringkas ini HANYA untuk kolom samping (≥1181px).

   Sebelumnya ditulis tanpa media, jadi HP ikut mewarisi sifat yang dirancang
   untuk kolom 380px: `min-height:0`, `border-bottom`, `background:none`,
   `transform:none`. Blok HP membatalkan sebagiannya, tapi tidak semua — dan
   yang tersisa membuat kartunya berbingkai penuh SEKALIGUS bergaris bawah.

   Membatasi di sumbernya lebih benar daripada membatalkan satu per satu:
   setiap sifat baru yang ditambahkan di sini akan otomatis tidak bocor. */
@media (min-width:1181px){` — padding-nya DI DALAM
     max-width, jadi isi nyatanya cuma 1080px. Di layar 1440px itu menyisakan
     180px kosong tiap sisi, dan terukur 191px di layar sungguhan.
  
     max-width dinaikkan supaya isi BERSIHNYA benar-benar 1120px. */
  .kb .kb-w-artikel{max-width:1240px}
  
  /* Isi TIDAK dilebarkan di layar besar.
  
     Aturan build 963 melebarkannya ke 1328px, dan kolom kanan jadi 548px —
     kelewat lebar untuk daftar pair dan kartu kabar yang isinya ringkas.
  
     1168px sudah memberi 65/35 dengan naskah 707px (74 karakter). Di layar
     lebih lebar, ruang sisanya dibiarkan kosong: melebarkan isi berarti salah
     satu kolomnya melewati ukuran yang pantas. */
  
  /* GAMBAR PINDAH KE DALAM BADAN, sesudah judul.
  
     Gayanya dirancang untuk gambar yang menempel di TEPI ATAS kartu:
     `border-bottom` sebagai pemisah, tanpa sudut membulat. Di tengah badan
     keduanya salah — ia sekarang elemen berdiri sendiri. */
  .kb .kb-b .kb-img{border-bottom:0;border-radius:14px;margin:var(--s4) 0 var(--s1b);
    border:1px solid var(--line)}
  
  @media (max-width:560px){
    .kb .kb-b .kb-img{border-radius:12px;margin:var(--s3b) 0 var(--s1)}
  }
  
  /* ============================================================================
     KEKHUSUSAN & UKURAN HURUF (build 965)
  
     Aturan ringkas build 963 TIDAK PERNAH BERLAKU. Gaya `.rk-pair` hidup di
     `<style>` dalam partials/ui.php — dimuat di BODY, sesudah kabar.css di
     <head>. Kekhususannya sama (0,1,0), jadi yang belakangan menang.
  
     `body.kb` menaikkannya jadi (0,2,1) tanpa !important. Tinggi barisnya
     terukur 180px di layar Yanz, bukan 40px yang saya setel.
     ========================================================================= */
}

/* UKURAN HURUF: judul dan lead dirapatkan, BADAN TIDAK.

   Terukur di layar: judul 42px, lead 27px — untuk kolom 707px itu kebesaran.

   Badan tetap 18px. Sempat dikecilkan ke 16px, lalu diukur ulang: pada 707px
   itu jadi 83 karakter per baris — kembali melewati batas nyaman yang jadi
   alasan seluruh perubahan dua kolom ini. 18px memberi 74 karakter.

   Jadi yang boros bukan ukuran badannya; itu justru satu-satunya yang sudah
   benar. */
.kb .kb-h{font-size:var(--t-l2);line-height:1.25}
.kb .kb-ex{font-size:var(--t-l6);line-height:1.6;margin-top:var(--s2b)}
.kb .kb-b h2{font-size:var(--t-l5);margin:var(--s6) 0 var(--s2b)}
.kb .kb-b h3{font-size:var(--t-l6)}
.kb .kb-b blockquote{font-size:var(--t-l6);padding:var(--s4) var(--s5);margin:var(--s5) 0}
.kb .kb-b p + p{margin-top:var(--s3b)}

/* Padding kartu artikel dirapatkan: 23/25/27px di kolom 707px menyisakan
   terlalu sedikit untuk naskahnya. */
.kb .kb-b{padding:var(--s5) var(--s5) var(--s6)}

@media (max-width:560px){
  .kb .kb-h{font-size:var(--t-l4)}
  .kb .kb-ex{font-size:var(--t-l7)}
  .kb .kb-b{padding:var(--s4) var(--s4) var(--s5)}
  .kb .kb-b h2{font-size:var(--t-l6)}
}

/* ============================================================================
   PROPORSI 70/30, TEPI DIRAPATKAN (build 966)

   Diminta: kolom kiri 70%, tepi lebih rapat, sekat antar kolom lebih kecil.

   Ketiganya bertabrakan dengan batas nyaman baca. Pada isi 1240px, kiri 70%
   memberi naskah 818px = 86 karakter — di atas batas 60–75.

   Keputusannya diambil pemilik: ukuran huruf tetap 18px, isinya yang
   dilebarkan. Dicatat di sini supaya build berikutnya tidak "memperbaiki"
   kembali ke 700px dan mengira itu perbaikan. */
.kb .kb-w-artikel{max-width:1240px}
/* Aturan 70/30 sudah disetel di blok utama (.kb .kb-duo di atas).
   Baris duplikat di sini DIBUANG: ia ditulis SESUDAH @media, jadi ia
   menimpa aturan satu-kolom untuk HP dan halaman detail jadi dua kolom
   di layar 390px — tidak akan pernah muat. */

/* ============================================================================
   BUILD 967 — urutan pair, tepi diperluas, warna & tekstur
   ========================================================================= */

/* URUTAN: pair · KEKUATAN · jenis tren.

   Markup menggambarnya pair · bias · bar. Dibalik lewat `order`, bukan dengan
   mengubah `ap_kartu_pair()` — penggambarnya bersama, halaman analisa
   memakainya juga.

   Kekuatan sebelum jenis karena batangnya bisa dibandingkan sekilas antar
   baris; labelnya harus dibaca satu per satu. Yang dipindai lebih dulu
   sebaiknya yang bisa dilihat, bukan yang harus dieja. */

/* TEPI DIPERLUAS lagi: 1240 → 1340px.

   Pada 1440px itu menyisakan 50px tiap sisi. Sengaja tidak nol: tanpa jarak
   sama sekali, isinya menempel tepi jendela dan terasa terjepit. */
.kb .kb-w-artikel{max-width:1340px}

/* ============================================================================
   HALAMAN DETAIL — WARNA & TEKSTUR (build 967)

   Motifnya sudah ada di halaman lain sejak build 928/958; di sini ia
   diterapkan pada bagian yang terlewat. Nilainya disalin, bukan dibuat baru —
   ini menyelaraskan, bukan memperkenalkan gaya sendiri.
   ========================================================================= */

/* Kartu artikel: cahaya tepi atas + cahaya sudut, warnanya mengikuti jenis. */
.kb .kb-art{position:relative;overflow:hidden}
.kb .kb-art::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.4),transparent)}
.kb .kb-w-biru.kb-art::before{background:linear-gradient(90deg,transparent,rgba(91,155,213,.45),transparent)}
.kb .kb-w-gold.kb-art::before{background:linear-gradient(90deg,transparent,rgba(212,178,92,.45),transparent)}
.kb .kb-art::after{content:'';position:absolute;left:0;top:0;width:46%;height:58%;
  pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at top left,rgba(31,227,116,.05),transparent 70%)}
.kb .kb-w-biru.kb-art::after{background:radial-gradient(ellipse at top left,rgba(91,155,213,.055),transparent 70%)}
.kb .kb-w-gold.kb-art::after{background:radial-gradient(ellipse at top left,rgba(212,178,92,.05),transparent 70%)}
.kb .kb-art > *{position:relative;z-index:1}

/* TEKSTUR kisi halus di badan artikel — sama seperti kartu daftar (build 958).
   Kepekatannya rendah: pada naskah panjang, kisi yang terlihat jelas
   mengganggu keterbacaan. */
.kb .kb-b{position:relative}
.kb .kb-b::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(135,170,145,.022) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(135,170,145,.022) 0 1px,transparent 1px 26px)}
.kb .kb-b > *{position:relative;z-index:1}

/* Kotak ajakan di kaki artikel: gradasi yang sama dengan kartu. */
.kb .kb-cta{background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  position:relative;overflow:hidden}
.kb .kb-cta::before{content:'';position:absolute;top:0;left:16%;right:16%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.4),transparent)}

/* Poster diberi bingkai cahaya tipis supaya tidak terbaca sebagai lubang
   gelap di tengah naskah. */
.kb .kb-b .kb-img{box-shadow:0 0 0 1px rgba(135,170,145,.1),0 18px 40px rgba(0,0,0,.4)}

@media (max-width:560px){
  /* Tekstur dimatikan di HP: badannya sempit, kisinya cuma jadi derau. */
  .kb .kb-b::before{display:none}
}

/* ============================================================================
   HALAMAN DETAIL DI HP — DUA LAPIS BINGKAI DIBUKA (build 969)

   Terukur di layar 390px: naskahnya cuma 318px. Yang memakannya bukan satu
   padding, tapi DUA lapis:

     .kb-w  padding 20px x2 = 40px
     .kb-b  padding 16px x2 = 32px
                             ------
                              72px  = 18% lebar layar

   Di HP kartu artikel tidak perlu berbingkai: layarnya sendiri sudah jadi
   bingkainya. Kartu di dalam kartu cuma menyempitkan bacaan.

   Naskah naik 318 → 358px, dan hurufnya bisa 16px tanpa barisnya jadi terlalu
   pendek. Di bawah ~40 karakter mata terlalu sering pindah baris.
   ========================================================================= */
@media (max-width:560px){
  .kb .kb-w{padding-left:var(--s4);padding-right:var(--s4)}

  /* Kartu artikel dibuka: latar, bingkai, dan sudut membulat dilepas. */
  .kb .kb-art{background:none;border:0;border-radius:0}
  .kb .kb-art::before,
  .kb .kb-art::after{display:none}
  .kb .kb-b{padding:0}


  /* Badan 16px pada 358px = 42 karakter. Naik dari 15px yang cuma 40. */
  .kb .kb-b{font-size:var(--t-l6);line-height:1.8}

  /* Kolom kanan diberi jarak jelas dari badan: tanpa bingkai kartu, batas
     antara bacaan dan penemuan hilang. */
  .kb .kb-sisi{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}

  /* Kotak di kolom kanan TETAP berbingkai — ia daftar, bukan bacaan, dan
     bingkainya yang membuatnya terbaca sebagai kelompok. */

  /* Ajakan dan baris aksi ikut dirapatkan tepinya. */
  .kb .kb-cta{padding:var(--s4) var(--s4);border-radius:12px}
  .kb .kb-aksi{margin-top:var(--s5);padding-top:var(--s4)}
}

/* ============================================================================
   TOMBOL DI HP — dirapatkan (build 971)

   `.btn` bawaan: padding 12px 22px, huruf 15px. Itu ukuran untuk desktop; di
   layar 390px tiga tombol berjajar memakan 352px dari 358px — muat, tapi
   mepet, dan tiap tombolnya terasa lebih besar dari isinya.

   Yang dikecilkan padding dan hurufnya, BUKAN tingginya: 44px sasaran sentuh
   minimum, dan menurunkannya demi tampilan membuat tombolnya sulit ditekan.
   ========================================================================= */
@media (max-width:560px){
  .kb .btn{padding:var(--s2b) var(--s4);font-size:var(--t-l8);border-radius:10px;min-height:44px}
  .kb .btn-sm{padding:var(--s2) var(--s3);font-size:var(--t-l8);min-height:40px}

  /* Baris aksi: `flex:1` SUDAH disetel di blok build 962 (baris 670) —
     tidak diulang. Yang ditambah di sini cuma yang belum ada. */
  .kb .kb-aksi{gap:var(--s2)}
  .kb .kb-aksi > *{min-width:0}
  .kb .kb-aksi .btn{padding-inline:var(--s2b)}

  /* Ajakan di kaki artikel: tombolnya selebar kotak — di sana ia memang
     tindakan utama, bukan satu dari tiga. */
  .kb .kb-cta .btn{width:100%}
}

/* ============================================================================
   KARTU PAIR DI HP — dipersempit (build 978)

   Kartunya 178px, jadi di layar 390px cuma 1,9 kartu terlihat: satu utuh dan
   sepotong. Tiap geser hampir tidak menambah apa-apa.

   Dipersempit ke 120px → 2,7 kartu. Batas bawahnya 99px, dihitung dari isi
   terpanjang: label "Bullish kuat" pada 11px = 73px, plus padding 26px.
   120px memberi ruang lega di atas batas itu.

   Kotak timeframe dan jam TIDAK dibuang: di kartu penuh keduanya justru yang
   membedakannya dari baris ringkas di kolom samping. Yang dirapatkan cuma
   padding dan tingginya.
   ========================================================================= */


/* ============================================================================
   KARTU PAIR & KABAR DI KOLOM KANAN — DITULIS ULANG (build 979)

   Versi sebelumnya menumpuk 61 aturan `.rk-*` yang saling menimpa: `order:1`
   di luar media berlaku juga di HP, padahal kartunya `display:block` di sana
   dan `order` tidak berpengaruh pada block. Dua aturan `> b` menimpa ukuran
   satu sama lain. Hasilnya acak.

   Ditulis ulang dari nol dengan SATU aturan per keadaan:

     ≥1181px  kolom samping   → baris ringkas tegak
     ≤1180px  satu kolom      → kartu penuh, gulir mendatar

   Tidak ada aturan `.rk-*` di luar media: apa pun yang ditulis di sana akan
   bocor ke salah satu keadaan.
   ========================================================================= */

/* ---------- ≥1181px: kolom samping, baris ringkas ---------- */
@media (min-width:1181px){
  body.kb .kb-sisi .rk-row{display:flex;flex-direction:column;gap:0;overflow:visible}
  body.kb .kb-sisi .rk-nav,
  body.kb .kb-sisi .geser-bar{display:none}

  /* Satu baris: simbol · batang · bias. Tujuh kotak timeframe disembunyikan —
     di kolom 350px ia jadi deretan warna tanpa keterangan, dan batang skornya
     sudah menyampaikan hal yang sama. */
  body.kb .kb-sisi .rk-pair{flex:0 0 auto;display:flex;align-items:center;
    gap:var(--s2b);padding:var(--s2) 0;border:0;
    border-bottom:1px solid var(--line);border-radius:0;background:none;
    min-height:0;transform:none;box-shadow:none}
  body.kb .kb-sisi .rk-pair::before,
  body.kb .kb-sisi .rk-pair::after{display:none}
  body.kb .kb-sisi .rk-row > .rk-pair:first-child{padding-top:0}
  body.kb .kb-sisi .rk-row > .rk-pair:last-child{border-bottom:0;padding-bottom:0}
  body.kb .kb-sisi .rk-pair:hover{transform:none;box-shadow:none;
    border-color:transparent;border-bottom-color:var(--line-2)}
  body.kb .kb-sisi .rk-pair:hover > b{color:var(--green)}

  /* Urutan: pair → KEKUATAN → jenis tren. Kekuatan lebih dulu karena itu yang
     dibandingkan antar pair; jenis trennya keterangan atas angka itu. */
  body.kb .kb-sisi .rk-pair > b{order:1;flex:none;width:74px;
    font-size:var(--t-l8);font-weight:700;margin:0}
  body.kb .kb-sisi .rk-bar{order:2;flex:1;min-width:0;height:5px;margin:0;
    border-radius:999px}
  body.kb .kb-sisi .rk-bias{order:3;flex:none;width:82px;text-align:right;
    font-size:var(--t-l9);font-weight:700;padding:0;background:none;border:0;margin:0}
  body.kb .kb-sisi .rk-lalu,
  body.kb .kb-sisi .rk-tf{display:none}

  /* Kartu kabar: daftar tegak dengan gambar kecil. Di kolom 350px, gulir
     mendatar berarti sebagian kartu tersembunyi tanpa tanda. */
  body.kb .kb-sisi .rk-kabar{flex:none;width:auto;flex-direction:row;
    gap:var(--s3);padding:var(--s3) 0;border:0;
    border-bottom:1px solid var(--line);border-radius:0;background:none}
  body.kb .kb-sisi .rk-row > .rk-kabar:first-child{padding-top:0}
  body.kb .kb-sisi .rk-row > .rk-kabar:last-child{border-bottom:0;padding-bottom:0}
  body.kb .kb-sisi .rk-gbr,
  body.kb .kb-sisi .rk-nogbr{width:96px;flex:none;aspect-ratio:16/10;
    border-radius:8px;height:auto;object-fit:cover}
  body.kb .kb-sisi .rk-kabar-b{flex:1;min-width:0;padding:0;
    justify-content:center;gap:var(--s1)}
}

/* ---------- ≤1180px: satu kolom, kartu penuh ----------

   Kartu aslinya 178px, jadi di layar 390px cuma 1,9 kartu terlihat: satu utuh
   dan sepotong. Tiap geser hampir tidak menambah apa-apa.

   120px memberi 2,8 kartu. Batas bawahnya 99px, dihitung dari isi terpanjang:
   label "Bullish kuat" pada 11px = 73px, plus padding 26px.

   Kotak timeframe TIDAK dibuang di sini: di kartu penuh justru itu yang
   membedakannya dari baris ringkas di kolom samping. */
@media (max-width:1180px){
  body.kb .kb-sisi .rk-row{display:flex;flex-direction:row;gap:var(--s2b);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  body.kb .kb-sisi .rk-row::-webkit-scrollbar{display:none}

  body.kb .kb-sisi .rk-pair{flex:0 0 120px;display:block;
    padding:var(--s2b) var(--s3) var(--s3);
    border:1px solid var(--line);border-radius:12px;
    background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
    scroll-snap-align:start;min-height:0}
  /* `order` sengaja TIDAK dipakai di sini: kartunya block, dan order tidak
     berpengaruh pada block — menuliskannya cuma membingungkan pembaca kode. */
  body.kb .kb-sisi .rk-pair > b{display:block;width:auto;
    font-size:var(--t-l8);font-weight:700;margin:0}
  body.kb .kb-sisi .rk-lalu{display:block;font-size:var(--t-l10);
    margin-top:var(--s0)}
  /* Tujuh kotak dalam 96px isi: 7x10 + 6x2 celah = 82px. Muat. */
  body.kb .kb-sisi .rk-tf{display:flex;height:18px;gap:var(--s0);
    margin-top:var(--s1b)}
  body.kb .kb-sisi .rk-bias{display:block;width:auto;text-align:left;
    font-size:var(--t-l10);font-weight:700;margin-top:var(--s1);
    padding:0;background:none;border:0}
  body.kb .kb-sisi .rk-bar{display:block;height:3px;margin-top:var(--s1);
    border-radius:999px}

  body.kb .kb-sisi .rk-kabar{flex:0 0 220px;flex-direction:column;
    gap:0;padding:0;border:1px solid var(--line);border-radius:12px;
    background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
    scroll-snap-align:start}
  body.kb .kb-sisi .rk-gbr,
  body.kb .kb-sisi .rk-nogbr{width:100%;aspect-ratio:16/9;
    border-radius:12px 12px 0 0;height:auto;object-fit:cover}
  body.kb .kb-sisi .rk-kabar-b{padding:var(--s3) var(--s3b) var(--s3b)}
}

/* ============================================================================
   TOMBOL GESER — dipindah KE DALAM wadah (build 979)

   `.pc-nav.prev{left:-17px}` menaruh tombol setengah di luar wadahnya. Di
   desktop itu benar: ada ruang kosong di kiri-kanan.

   Di HP tidak: kolom 358px + tombol keluar 17px tiap sisi = 392px, sementara
   layarnya 390px. Tombolnya terpotong 2px tiap sisi — dan yang kiri jatuh di
   luar layar sama sekali kalau ada padding.

   Dipindah ke DALAM, menempel tepi wadah, dengan latar buram supaya kartu di
   bawahnya masih terbaca sebagai "ada lanjutannya".
   ========================================================================= */
@media (max-width:1180px){

  /* Tombol yang tidak bisa dipakai disembunyikan, bukan diredupkan: di layar
     sempit ia menutupi kartu, dan tombol mati yang menutupi isi lebih
     mengganggu daripada tidak ada tombol. */

  /* Batang kemajuan di bawah baris: petunjuk kedua bahwa daftarnya bisa
     digeser, untuk yang tidak menyadari tombolnya. */
  body.kb .kb-sisi .geser-bar{display:block;margin-top:var(--s3)}

  /* TOMBOL GESER DIKEMBALIKAN (build 993).

     Build 992 membuangnya di HP dengan alasan jempol bisa menggeser langsung
     dan tombolnya menutupi kartu. Alasannya masuk akal di atas kertas, tapi
     Yanz memakainya di layar nyata: tanpa tombol, tidak ada tanda bahwa
     daftarnya bisa digeser sama sekali — batang kemajuan saja terlalu halus.

     Dikembalikan dengan bentuk build 979: di DALAM wadah supaya tidak
     terpotong tepi layar, latar buram supaya kartu di bawahnya masih terbaca,
     dan yang tidak bisa dipakai disembunyikan supaya tidak menghalangi. */
  body.kb .kb-sisi .pc-nav{position:absolute;top:50%;
    transform:translateY(-50%);z-index:3;display:grid;place-items:center;
    width:32px;height:32px;border-radius:50%;
    background:rgba(10,26,18,.92);border:1px solid var(--line-2);
    color:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:0 var(--s1) var(--s3) rgba(0,0,0,.45)}
  body.kb .kb-sisi .pc-nav.prev{left:var(--s1);right:auto}
  body.kb .kb-sisi .pc-nav.next{right:var(--s1);left:auto}
  /* Yang tidak bisa dipakai DISEMBUNYIKAN, bukan diredupkan: di layar sempit
     ia menutupi kartu, dan tombol mati yang menghalangi isi lebih mengganggu
     daripada tidak ada tombol. JS memakai kelas `.mati` dan `.sembunyi`. */
  body.kb .kb-sisi .pc-nav.mati,
  body.kb .kb-sisi .pc-nav.sembunyi{display:none}
  body.kb .kb-sisi .geser-bar{display:block;margin-top:var(--s3)}
}

/* ============================================================================
   WARNA & TEKSTUR kolom kanan — berlaku di KEDUA keadaan.

   Ini satu-satunya aturan `.rk-*` yang boleh di luar media: ia cuma menyetel
   warna dan bayangan, tidak menyentuh tata letak. Yang bocor dan merusak di
   versi lama adalah `order`, `flex`, dan `display` — bukan warna.
   ========================================================================= */
body.kb .kb-sisi .rk-panel{position:relative;overflow:hidden;
  background:linear-gradient(158deg,#152C21 0%,#0B1812 100%);
  border:1px solid var(--line);border-top-color:var(--line-2);border-radius:14px}
body.kb .kb-sisi .rk-panel::before{content:'';position:absolute;top:0;left:12%;right:12%;
  height:1px;background:linear-gradient(90deg,transparent,rgba(212,178,92,.42),transparent)}
body.kb .kb-sisi .rk-panel::after{content:'';position:absolute;right:0;top:0;
  width:40%;height:60%;pointer-events:none;
  background:radial-gradient(ellipse at top right,rgba(212,178,92,.07),transparent 68%)}
body.kb .kb-sisi .rk-kepala,
body.kb .kb-sisi .rk-w{position:relative;z-index:1}

/* Batang kekuatan diberi kedalaman: cekungan di baliknya, kilau di isinya. */
body.kb .kb-sisi .rk-bar{background:rgba(4,10,7,.5);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
body.kb .kb-sisi .rk-bar i{box-shadow:0 0 8px rgba(31,227,116,.28)}
body.kb .kb-sisi .rk-bar i.turun,
body.kb .kb-sisi .rk-bar i.bearish{box-shadow:0 0 8px rgba(240,160,122,.28)}

/* ============================================================================
   TOMBOL "LIHAT SEMUA" — MENYATU dengan panel rekomendasi (build 987)

   Versi pertama berdiri sendiri di bawah panel: kotak terpisah dengan bingkai
   sendiri, jadi terbaca sebagai bagian ketiga — bukan penutup daftar di
   atasnya.

   Sekarang ia menempel: sudut atas dipersegi supaya menyambung dengan panel,
   bingkai atas dibuang supaya tidak ada garis ganda, dan latar belakangnya
   melanjutkan gradasi yang sama.
   ========================================================================= */
body.kb .kb-sisi .kb-lanjut{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  margin:-1px 0 0;padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 14px 14px;
  background:linear-gradient(158deg,rgba(21,44,33,.55),rgba(11,24,18,.75));
  color:var(--muted);font-size:var(--t-l8);font-weight:600;
  text-decoration:none;transition:background .18s,color .18s}
body.kb .kb-sisi .kb-lanjut:hover{background:linear-gradient(158deg,rgba(24,52,38,.8),rgba(14,30,22,.9));
  color:var(--paper)}
body.kb .kb-sisi .kb-lanjut svg{width:14px;height:14px;flex:none;transition:transform .18s}
body.kb .kb-sisi .kb-lanjut:hover svg{transform:translateX(2px)}

/* Panel di atasnya kehilangan sudut bawahnya, supaya sambungannya rapat.

   Dipakai `:has()`? TIDAK — dukungan peramban belum merata, dan kalau ia
   tidak jalan sudut panelnya tetap membulat sementara tombolnya persegi:
   sambungan yang terlihat patah, lebih buruk daripada tidak disambung.

   Semua panel di kolom ini memang diikuti tombol, jadi aturannya berlaku
   tanpa syarat. */
body.kb .kb-sisi .rk-panel{border-bottom-left-radius:0;border-bottom-right-radius:0}

/* ============================================================================
   KOLOM KANAN DIRAPATKAN KE ATAS (build 989)

   Di halaman kabar, kolom kiri dibungkus kartu `.kb-art` yang isinya diberi
   padding 20px (`.kb-b`). Kolom kanan tidak punya pembungkus itu, jadi panel
   rekomendasinya mulai sejajar dengan TEPI kartu — bukan dengan judul di
   dalamnya.

   Akibatnya panel terlihat menggantung: ada jeda lebar ke topbar, sementara
   judul artikel di sebelahnya sudah mulai.

   Halaman analisa tidak punya kartu pembungkus, jadi kolom kanannya sudah
   rapat. Itu yang dijadikan acuan.

   -20px menaikkan panel sebanyak padding kartu di sebelahnya, jadi tepi atas
   panel sejajar dengan JUDUL, bukan dengan tepi kartu.
   ========================================================================= */
@media (min-width:1181px){
  body.kb .kb-sisi{margin-top:calc(var(--s5) * -1)}
}

/* ============================================================================
   SELURUH KARTU KABAR BISA DIKLIK (build 998)

   Kartunya <article>, bukan <a>, karena tombol bagikan tidak boleh bersarang
   di dalam tautan — HTML melarangnya.

   TIGA build saya coba memasang lapisan sebagai `::after` pada tautan judul,
   dan tiga kali gagal karena `inset:0` mengacu ke elemen `position` TERDEKAT,
   bukan ke kartu. Tiap perbaikan menemukan satu tingkat lagi yang relative:

     995 → `.kb-kartu-b` relative
     996 → `<b>` pembungkus judul relative (dari `.kb-kartu-b > *`)
     997 → `.kb-utama .kb-kartu-b` ABSOLUTE, tidak bisa dibuat static

   Yang ketiga tidak punya jalan keluar dalam pendekatan itu.

   Lapisan kini elemen SENDIRI — anak langsung `.kb-kartu`, jadi tidak
   bergantung pada rantai apa pun. Satu aturan untuk kartu biasa dan kartu
   sorotan.
   ========================================================================= */
.kb .kb-kartu{position:relative}
.kb .kb-kartu-lap{position:absolute;inset:0;z-index:1}

/* Tombol bagikan diangkat DI ATAS lapisan. `position` tidak disentuh: ia
   sudah absolute, dan menulis ulang position di sini yang merusak build 995. */
.kb .kb-kartu .kb-kbag{z-index:3}

/* Tautan judul di atas lapisan, supaya teksnya tetap bisa disalin dan
   ditelusuri pembaca layar. */
.kb .kb-kartu-jud{position:relative;z-index:2}

/* KARTU SOROTAN: bloknya absolute menutupi dasar gambar dengan z-index 2 —
   di atas lapisan. Klik di area itu akan mati lagi.

   Blok dibuat tembus klik, dan anak-anaknya dikembalikan: yang perlu ditekan
   cuma judul dan tombol bagikan, keduanya sudah punya z-index sendiri. */
.kb .kb-utama .kb-kartu-b{pointer-events:none}
.kb .kb-utama .kb-kartu-jud,
.kb .kb-utama .kb-kbag{pointer-events:auto}

/* ============================================================================
   KARTU ANALISA DI HP — DUA KOLOM (build 995)

   `.kb-grid` memakai `minmax(240px,1fr)`, jadi di layar 358px cuma muat SATU
   kolom. Untuk kartu kabar itu benar — ia punya gambar dan ringkasan.

   Kartu ANALISA isinya cuma tag, jam, pair, bias, dan batang. Satu kolom penuh
   untuk itu boros, dan dua belas pair jadi gulir panjang tanpa alasan.

   Dua kolom memberi 174px per kartu — cukup untuk pair tujuh huruf dan bias
   singkat.
   ========================================================================= */
@media (max-width:760px){
  /* Hanya kisi bertanda `.kb-grid-ap`. Kisi kabar biasa tidak disentuh:
     kartunya punya gambar, dan 174px membuat gambarnya jadi perangko.

     Kelas penanda, bukan `:has()` — dukungan perambannya belum merata, dan
     kalau tidak jalan kartunya kembali satu kolom tanpa ada yang tahu. */
  .kb .kb-grid-ap{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s2)}
  .kb .ap-kartu .kb-kartu-b{padding:var(--s2b) var(--s3)}
  /* Tag "ANALISA" dibuang di dua kolom: seluruh kisi ini isinya analisa, jadi
     label yang sama di dua belas kartu tidak membedakan apa pun — ia cuma
     memakan baris pertama yang bisa dipakai jam. */
  .kb .ap-kartu .kb-tag{display:none}
}

/* ============================================================================
   BAGIKAN DI KEPALA ARTIKEL (build 999)

   Sebelumnya tombol lebar di KAKI artikel, dan di sana ia baru terlihat
   sesudah seluruh naskah dibaca — padahal orang memutuskan membagikan sesuatu
   justru saat pertama melihatnya.

   Bentuknya mengikuti halaman detail analisa: kecil, di ujung kanan baris tag
   dan tanggal.
   ========================================================================= */
.kb .kb-bagi-kecil{margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:var(--s1b);
  padding:var(--s1) var(--s2b);border-radius:9px;
  border:1px solid var(--line-2);background:transparent;
  color:var(--muted);font:inherit;font-size:var(--t-l9);font-weight:600;
  cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.kb .kb-bagi-kecil:hover{border-color:rgba(31,227,116,.45);
  background:rgba(31,227,116,.08);color:var(--paper)}
.kb .kb-bagi-kecil .icon{width:13px;height:13px;flex:none}

/* Tulisan "Bagikan" dibuang di layar sempit: ikonnya sudah dikenal, dan di
   358px baris tag-tanggal-tombol sudah penuh tanpa itu.

   `aria-label` pada tombolnya memastikan pembaca layar tetap menyebutnya —
   menyembunyikan teks dari mata bukan berarti menyembunyikannya dari semua. */
@media (max-width:560px){
  .kb .kb-bagi-kecil .kb-bagi-teks{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .kb .kb-bagi-kecil{padding:var(--s1) var(--s1b)}
}