/* ============================================================================
   KATALOG — gaya halaman.

   Dipindah keluar dari <style> di dalam catalog.php (build 905). Alasannya
   sama seperti beranda dulu: 68 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/beranda.css:
   1. Dimuat SESUDAH mtk.css, jadi selalu menang lewat urutan.
   2. Semua pemilih dilingkupi `.kt` (kelas di <body>), jadi menang lewat
      kekhususan tanpa perlu !important.
   3. catalog.php NOL <style>.
   4. Token warna diwarisi mtk.css — tidak mendefinisikan warna baru.
   ========================================================================= */

/* =========================================================
     KATALOG — CSS halaman.
     Ditulis ulang bersih: sebelumnya blok CSS-nya sempat tertulis dua kali
     dan saling menabrak, dan beberapa nama kelas (.seg, .cat-bar) ternyata
     SUDAH DIPAKAI TEMA dengan margin bawaan — margin siluman itulah yang
     bikin saringan naik-turun tidak sejajar.

     Sekarang: nama kelas sendiri semua (.fseg, .sgi), margin dinolkan, tinggi dikunci. Tidak bisa ditabrak lagi dari mana pun.
     ========================================================= */

  /* ---------- Baris alat ---------- */
  /* BATAS ISI DIRAPATKAN (build 1163).

     .wrap memakai --gutter dan --max sendiri, ditumpuk DI ATAS padding
     .app-body — jadi ada dua lapis batas: 24px dari app-body, plus gutter
     dari wrap, plus pemusatan di --max.

     Di layar lebar hasilnya bidang kosong tebal di kiri-kanan; di HP isinya
     terdorong sempit tanpa alasan.

     Untuk PENGGUNA (di dalam .app-body) pembatas .wrap dilepas seluruhnya —
     app-body sudah mengurus lebar dan padding untuk semua halaman.

     Untuk TAMU pembatasnya tetap: halaman publik tidak punya .app-body, dan
     .wrap satu-satunya yang menahan lebar teksnya. */
  .kt .app-body .wrap{padding:0;max-width:none;width:100%}

  /* Jarak atas dirapatkan: .app-head memberi 32px di atas judul, padahal
     topbar tepat di atasnya sudah memberi jarak visual sendiri. */
  .kt .app-body .app-head{padding-top:var(--s3)}
  /* section.block memberi 96px atas-bawah — ukuran untuk halaman pemasaran
     yang bagiannya berjauhan, bukan untuk daftar produk yang dibaca sebagai
     satu blok. */
  .kt .app-body section.block{padding-top:0;padding-bottom:var(--s6)}
  .kt .tool-wrap{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2b)}

  .kt .search2{display:flex;align-items:center;gap:var(--s2);width:100%;height:46px;box-sizing:border-box;margin:0;
           background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:0 var(--s1) 0 var(--s3b);
           transition:border-color .18s}
  .kt .search2:focus-within{border-color:var(--green)}
  .kt .search2 .s-ico{flex:none;color:var(--muted-2)}
  /* 16px, BUKAN 14px.

   Safari iOS memperbesar layar otomatis begitu kolom isian yang difokuskan
   berukuran di bawah 16px — dan setelah diperbesar ia tidak mengecil lagi
   sendiri. Ini perilaku peramban, bukan bug halaman, dan satu-satunya cara
   mencegahnya adalah tidak turun di bawah 16px.

   Meta viewport `maximum-scale=1` juga bisa mencegahnya, tapi itu MELARANG
   pengguna memperbesar layar sama sekali — merugikan orang yang memang perlu
   memperbesar untuk membaca. */
.kt .search2 input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;
                 color:var(--paper);font-size:var(--t-l6);font-family:var(--body)}
  .kt .search2 input::placeholder{color:var(--muted-2)}
  /* Tombol "Cari" diganti tombol HAPUS (build 1162). Pencariannya sudah
     berjalan saat mengetik, jadi tombol kirim cuma menjalankan ulang hal yang
     sudah terjadi.

     Bentuknya sengaja TIDAK menonjol: ia membatalkan, bukan menjalankan.
     Tombol hijau di ujung kotak pencarian akan terbaca sebagai tindakan
     utama, padahal tindakan utamanya mengetik. */
  .kt .s-clear{flex:none;width:var(--s7);height:var(--s7);margin-right:var(--s1);
    display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.05);color:var(--muted);
    border:1px solid var(--line);border-radius:8px;
    font-size:var(--t-l5);line-height:1;padding:0;
    transition:color .15s,border-color .15s,background .15s}
  .kt .s-clear:hover{color:var(--paper);background:rgba(255,255,255,.09);
    border-color:rgba(135,170,145,.34)}
  .kt .s-clear[hidden]{display:none}

  .kt .filter-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
  .kt .filter-row > *{margin:0}   /* kunci: tidak ada margin siluman dari tema */

  /* Sakelar tersambung — dipakai kategori DAN platform, bentuknya sama */
  .kt .fseg{display:inline-flex;align-items:center;flex:none;height:42px;box-sizing:border-box;margin:0;
        background:var(--ink-2);border:1px solid var(--line);border-radius:11px;padding:0 var(--s1);gap:var(--s0)}
  .kt .fseg .sgi{display:inline-flex;align-items:center;height:32px;padding:0 var(--s3);margin:0;
             border:0;background:none;border-radius:7px;
             color:var(--muted);font-family:var(--disp);font-size:var(--t-l8);font-weight:600;
             text-decoration:none;white-space:nowrap;cursor:pointer;transition:.16s}
  .kt .fseg .sgi:hover{color:var(--paper)}
  .kt .fseg .sgi.on{background:rgba(31,227,116,.14);color:var(--green)}

  .kt .pmeta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
            margin-top:var(--s4);color:var(--muted);font-size:var(--t-l8)}
  .kt .pmeta b{color:var(--paper)}
  .kt .reset-f{color:var(--green);font-size:var(--t-l8);font-weight:600;text-decoration:none}
  .kt .reset-f:hover{text-decoration:underline}

  /* ---------- Kartu produk ---------- */
  .kt .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3b)}

  .kt .pcard{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);
         border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
         transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s,box-shadow .18s}
  .kt .pcard:hover{transform:translateY(-3px);border-color:rgba(31,227,116,.45);box-shadow:0 14px 30px rgba(0,0,0,.4)}
  .kt .pcard:focus-visible{outline:2px solid var(--green);outline-offset:2px}

  .kt .pc-img{position:relative;aspect-ratio:16/10;overflow:hidden;
          background:linear-gradient(150deg,var(--ink-3),#081410);border-bottom:1px solid var(--line)}
  .kt .pc-img .card-visual{margin:0;height:100%;border:0;border-radius:0}
  .kt .pc-img img{width:100%;height:100%;object-fit:cover;display:block}

  .kt .pc-body{display:flex;flex-direction:column;flex:1;padding:var(--s3) var(--s3b) var(--s3b)}
  .kt .pc-name{font-family:var(--disp);font-size:var(--t-l7);font-weight:600;color:var(--paper);margin:0;line-height:1.25}
  .kt .pc-rate{display:flex;align-items:center;gap:var(--s1);font-size:var(--t-l8);color:var(--muted);margin:var(--s1) 0 0}
  .kt .pc-rate span{color:var(--gold)}.kt .pc-rate b{color:var(--paper);font-weight:700}.kt .pc-rate i{color:var(--muted-2);font-style:normal}
  .kt .pc-desc{color:var(--muted);font-size:var(--t-l8);line-height:1.5;margin:var(--s1b) 0 0;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kt .pc-plat{display:flex;gap:var(--s1);margin-top:var(--s2b)}
  .kt .pc-plat .plat{font-size:var(--t-l10);padding:var(--s0) var(--s1b);border-radius:5px}

  .kt .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
           margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
  .kt .pc-foot .price-row{margin:0}
  .kt .pc-foot .price{font-size:var(--t-l6)}
  .kt .pc-foot .price small, .kt .pc-foot .price .p-lead{font-size:var(--t-l10)}
  .kt .pc-foot .price-was{font-size:var(--t-l9)}


  /* Tombol konsultasi melayang: gayanya DIPINDAH ke mtk.css (build 1005).

     Ia dilingkupi `.kt` di sini, padahal testimonials.php juga memasang
     <a class="help-fab"> — dan halaman itu tidak memuat katalog.css. Di
     testimoni tombolnya tampil sebagai ikon polos di tengah teks, bukan
     tombol bulat melayang. Berlangsung sejak halaman itu dibuat.

     Sama seperti .kembali-apung: kalau dua halaman memakainya, ia bukan
     milik satu halaman. */

  @media(max-width:700px){
    /* Di HP: saringan dapat barisnya sendiri, urutan barisnya sendiri.
       Dipaksa sebaris malah bikin dua kotak sempit yang isinya terpotong. */
    .fseg{flex:1 1 100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
    .kt .fseg::-webkit-scrollbar{display:none}
    .kt .fseg .sgi{flex:1;justify-content:center;padding:0 var(--s2b)}
    }

  @media(max-width:560px){
  /* DUA KOLOM, bukan satu baris mendatar.

     Diukur di 390px: baris mendatar ~137px/kartu → 12 produk = 1763px.
     Dua kolom ~204px/kartu tapi 6 baris → 1276px. Hemat ~487px (~1, 2 layar).

     Gambarnya justru jadi lebih besar: dari 130px di sisi kiri menjadi
     selebar penuh kartu (170px) di atasnya. */
  .kt .pgrid{grid-template-columns:1fr 1fr;gap:var(--s2b)}
  .kt .pcard{flex-direction:column}
  .kt .pc-img{width:auto;max-width:none;aspect-ratio:16/10;flex:none;border-right:0}
  .kt .pc-body{flex:1;min-width:0;padding:var(--s2b) var(--s2b) var(--s3)}
  .kt .pc-name{font-size:var(--t-l8)}
  /* Keterangan disembunyikan: di kartu selebar 170px ia cuma jadi potongan
     kalimat yang tidak membantu memilih. */
  .kt .pc-desc{display:none}
  .kt .pc-rate{font-size:var(--t-l9)}
  .kt .pc-plat{margin-top:var(--s2)}
  .kt .pc-foot{padding-top:var(--s2b)}
  .kt .pc-foot .price{font-size:var(--t-l7)} }

/* ============================================================================
   SARINGAN & URUTAN — build 905
   ========================================================================= */

/* Baris saringan: dua kotak segmen di kiri, sakelar Gratis didorong ke kanan
   dengan margin-left:auto — tetap satu baris. */
/* LAPISAN: baris saringan harus berada DI ATAS kartu produk.

   `.urut-menu` sudah punya `z-index:40`, tapi itu tidak berguna: induknya
   (.urut-dd → .filter-row → .tool-wrap) tidak punya lapisan sendiri, jadi
   menunya ikut lapisan induknya. Kartu produk datang SESUDAHNYA di markup, sehingga ia menang tanpa perlu z-index sama sekali — menu terbuka pun
   tertutup kartu dan tidak bisa diklik.

   Memberi z-index pada .urut-menu saja tidak menyelesaikannya. Yang harus
   naik adalah INDUK terluarnya. */
/* Kartu produk dipaksa ke lapisan BAWAH lewat `z-index:0`, bukan sekadar
   dibiarkan default. `z-index:0` membuat lapisan sendiri yang seluruhnya
   berada di bawah .tool-wrap — jadi kartu, bayangannya, maupun kartu yang
   sedang di-hover (yang membuat lapisan sendiri lewat transform) tidak
   mungkin naik melewatinya. Dibiarkan default, tiap kartu ikut mengambang di
   lapisan akar dan urutan markup yang menentukan. */
.kt .pgrid, .kt .pmeta, .kt .empty{position:relative;z-index:0}

/* Empat kelompok dalam SATU baris: kategori · platform · gratis · urutan.
   Sebelumnya urutan berada di baris cari, jadi saringannya memakan dua baris. */
.kt .filter-row{display:flex;gap:var(--s2b);align-items:center;flex-wrap:wrap}

/* SAKELAR GRATIS — kotak centang, BUKAN kotak segmen ketiga.

   Di dalam segmen, memilih satu membatalkan yang lain. "Gratis" harus bisa
   menyala BERSAMAAN dengan MT5, dan bentuk kotak centang menyampaikan itu
   tanpa perlu dijelaskan. Warnanya emas: ia saringan HARGA, bukan kategori
   atau platform. */
.kt .tog-gratis{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;
  padding:0 var(--s3b);border-radius:12px;border:1px solid var(--line);
  background:var(--ink-2);color:var(--muted);font-size:var(--t-l8);font-weight:600;
  white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
/* Gratis + urutan didorong bersama ke ujung kanan: keduanya bukan saringan
   "isi", jadi memisahkannya dari dua kotak segmen membuat barisnya terbaca
   sebagai dua kelompok, bukan empat benda berjajar. */
.kt .tog-gratis{margin-left:auto}
.kt .tog-gratis:hover{color:var(--paper);border-color:var(--line-2)}
.kt .tog-gratis .kotak{width:16px;height:16px;border-radius:5px;flex:none;
  border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:var(--t-l10);color:transparent}
.kt .tog-gratis.on{color:var(--gold-2);border-color:rgba(212,178,92,.4);background:rgba(212,178,92,.08)}
.kt .tog-gratis.on .kotak{background:var(--gold);border-color:var(--gold);color:#241A06}

/* URUTAN — dropdown sendiri.

   `display:inline-block` WAJIB: <details> bawaannya elemen BLOK, jadi di
   dalam baris flex ia meregang selebar sisa ruang dan mendorong tombol lain
   keluar. Ini pernah merusak tata letak saat dicoba di mockup. */
.kt .urut-dd{position:relative;display:inline-block;flex:none;z-index:41}
.kt .urut-dd > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s3b);border:1px solid var(--line-2);border-radius:999px;
  background:var(--ink-2);color:var(--paper);font-size:var(--t-l8);font-weight:600;white-space:nowrap}
.kt .urut-dd > summary::-webkit-details-marker{display:none}
.kt .urut-dd > summary .cev{color:var(--muted-2);font-size:var(--t-l7);line-height:1}
.kt .urut-dd[open] > summary{border-color:rgba(31,227,116,.4)}
/* position:FIXED, bukan absolute.

   Sudah dua kali gagal dengan pendekatan lapisan: menaikkan z-index menu
   (build 908), lalu menaikkan induknya dan menekan kartu (build 909). Selama
   menunya berada DI DALAM rantai induk, hasilnya selalu bergantung pada
   properti induk mana pun yang membentuk lapisan — dan cukup satu yang
   terlewat untuk membuatnya tertutup lagi.

   `fixed` melepaskannya dari rantai itu sepenuhnya: ia diposisikan terhadap
   layar, bukan terhadap induknya. Letaknya dihitung JS saat dibuka (lihat
   catalog.php). Satu-satunya yang masih bisa mengalahkannya adalah induk
   ber-`transform` — dan tidak ada satu pun di rantai ini. */
/* Z-INDEX DITURUNKAN DI BAWAH RANGKA (build 1163).

   9000 membuat menu urutan menembus topbar (50), dropdown lonceng dan
   dropdown profil (200). Menu halaman yang menutupi kendali aplikasi terbaca
   sebagai kerusakan — orang menekan lonceng dan yang muncul menu urutan.

   Angka besar dipilih dulu untuk "menang dari semuanya", tapi yang perlu
   dimenangkan cuma isi halaman. Rangka aplikasi harus SELALU di atas isi
   halaman: ia jalan keluar, dan jalan keluar tidak boleh tertutup.

   45 — di bawah topbar (50), di atas kartu produk dan tool-wrap (60 turun ke
   40 di bawah). */
.kt .urut-menu{position:fixed;z-index:45;min-width:212px;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#0C1913;
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.kt .urut-menu a{display:block;min-height:44px;line-height:44px;padding:0 var(--s3b);
  font-size:var(--t-l8);color:var(--muted);border-bottom:1px solid var(--line)}
.kt .urut-menu a:last-child{border-bottom:0}
.kt .urut-menu a:hover{color:var(--paper);background:rgba(255,255,255,.03)}
.kt .urut-menu a.on{color:var(--green);background:rgba(31,227,116,.07)}

@media (max-width:640px){
  /* Dua kotak segmen DITUMPUK: sebaris butuh ~432px dari 318px yang ada.
     Tiap butir dapat 78px; "Indikator" pada 12, 5px butuh 85px, jadi huruf
     12px + padding disempitkan = 76px, muat. */
  .kt .filter-row{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .kt .fseg{display:flex;width:100%}
  .kt .fseg .sgi{flex:1;justify-content:center;min-width:0;padding:0 var(--s2);font-size:var(--t-l8)}

  /* Gratis + urutan SEBARIS: keduanya kecil, menumpuknya jadi dua baris
     sendiri membuat empat baris beruntun sebelum produk pertama. */
  .kt .filter-row{position:relative}
  /* Gratis & urutan BERSEBELAHAN, bukan bertumpuk: keduanya kecil, dan
     menumpuknya membuat empat baris beruntun sebelum produk pertama.
     Diukur di 390px: 118px + 8px celah + sisanya untuk urutan. */
  .kt .tog-gratis{margin-left:0;flex:none;justify-content:center;min-height:42px;padding:0 var(--s3)}
  .kt .urut-dd{flex:1;min-width:0}
  .kt .urut-dd > summary{width:100%;justify-content:space-between;min-height:42px}
  .kt .urut-menu{left:0;right:0;min-width:0}
  /* Dua kotak segmen tetap selebar penuh; baris terakhir dibiarkan
     membungkus sendiri lewat flex-wrap. */
  .kt .filter-row{flex-direction:row;flex-wrap:wrap}
  .kt .fseg{flex:1 1 100%} }

/* Pita ajakan untuk TAMU — hanya muncul kalau belum masuk. */
.kt .ajak-tamu{display:flex;align-items:center;gap:var(--s3b);margin-top:var(--s5);padding:var(--s4) var(--s4);
  border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(158deg,#152C21,#0B1812)}
.kt .ajak-tamu .at-teks{flex:1;min-width:0}
.kt .ajak-tamu b{display:block;font-family:var(--disp);font-size:var(--t-l7);margin-bottom:var(--s0)}
.kt .ajak-tamu p{color:var(--muted);font-size:var(--t-l8);line-height:1.6;margin:0}
@media (max-width:640px){
  .kt .ajak-tamu{flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s3b)} }

/* Jarak atas halaman. Untuk TAMU dulu 80px — ruang untuk tombol melayang yang
   sudah tidak ada. Sekarang cukup jarak biasa dari navbar. */
.kt .app-head{padding-top:var(--s8)}
/* Batas atas = L2 (30px), batas bawah = L3 (25px). clamp() boleh
   menghasilkan nilai pecahan di antaranya — ia menyesuaikan lebar layar —
   tapi kedua batasnya harus dari level. */
  .kt .page-title{font-size:clamp(var(--t-l3),2.6vw,var(--t-l2));line-height:1.1}
.kt .page-sub{font-size:var(--t-l7);margin-top:var(--s1b)}
/* Baris cari langsung di bawah judul: jarak var(--s8) di antara keduanya sudah
   cukup, tidak perlu ditambah lagi oleh .tool-wrap. */
/* Turun dari 60 ke 40 (build 1163): tetap di atas kartu produk, tapi di bawah
   topbar. */
.kt .tool-wrap{margin-top:var(--s5);position:relative;z-index:40}
@media (max-width:640px){
  .kt .app-head{padding-top:var(--s5)}
  .kt .page-title{font-size:var(--t-l4)}
  .kt .page-sub{font-size:var(--t-l8)}
  .kt .tool-wrap{margin-top:var(--s4)} }

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

/* PENANDA KARTU di pojok kanan atas — gembok (tamu) atau panah (sudah masuk).

   Sejajar dengan label kategori di pojok kiri, jadi kedua penanda kartu
   berada di satu garis. Sebelumnya ia duduk di baris harga: di kartu HP
   170px, harga + "/bln" + harga coret + gembok = 196px, dan gemboknya
   terdorong keluar kartu. */
.kt .pc-tanda{position:absolute;top:8px;right:8px;z-index:2;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,17,13,.86);border:1px solid rgba(31,227,116,.28);
  color:var(--green);transition:background .18s,border-color .18s}
.kt .pc-tanda .icon{width:13px;height:13px}
.kt .pcard:hover .pc-tanda{background:rgba(31,227,116,.2);border-color:rgba(31,227,116,.5)}

/* Baris harga kini hanya berisi harga — tidak perlu lagi menyisakan tempat
   untuk tombol di kanannya. */
.kt .pc-foot{justify-content:flex-start}

/* ============================================================================
   KARTU PRODUK — pita unggulan, kategori, gradasi, label pemasangan (build 917)
   ========================================================================= */

/* GRADASI di tepi bawah gambar — disalin dari kartu beranda
   (.bd .kartu-gbr::after), bukan dikarang ulang.

   Titik akhirnya #102119 sama dengan warna isi kartu, jadi gambar MENYATU ke
   badan tanpa garis batas. Kalau titik akhirnya transparan atau warna lain,
   muncul garis samar di pertemuan gambar dan badan — dan itu terlihat seperti
   cacat, bukan pilihan. */
.kt .pc-img::before{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(16,33,25,.5) 40%,rgba(16,33,25,.88) 74%,#102119)}
/* `position:relative` WAJIB — ini penyebab pita salah tempat di build 917.

   Tanpa itu, `.pita-w` yang position:absolute menempel ke induk berposisi
   TERDEKAT, yaitu `.pgrid` (yang diberi position:relative di build 909 untuk
   urusan lapisan). Pitanya mendarat di pojok kiri atas SELURUH KISI, bukan di
   kartunya.

   Dan saat kursor diarahkan, `.pcard:hover{transform}` membuat kartu jadi
   induk berposisi — pitanya tiba-tiba MELOMPAT masuk ke kartu. Satu penyebab,
   dua gejala yang terlihat tidak berhubungan. */
.kt .pcard{position:relative;background:linear-gradient(158deg,#152C21 0%,#0B1812 100%)}

/* PITA UNGGULAN.

   Dibungkus kotak ber-`overflow:hidden` seukuran sudut: tanpa pembungkus,
   pita yang diputar 45° menjulur keluar kartu dan menutupi kartu sebelahnya. */
.kt .pita-w{position:absolute;top:0;left:0;width:96px;height:96px;overflow:hidden;
  z-index:4;pointer-events:none;border-top-left-radius:14px}
.kt .pita{position:absolute;top:20px;left:-30px;width:140px;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(--s1) 0;
  box-shadow:0 3px 12px rgba(0,0,0,.5)}

/* KATEGORI — kini teks biasa di dalam kartu, bukan lencana di atas gambar.
   Sebagai teks ia tidak pernah bertabrakan berapa pun panjangnya. */
.kt .pc-kat{display:block;font-size:var(--t-l10);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--green);margin-bottom:var(--s1)}

/* POSISI TETAP untuk baris platform + label pemasangan.

   Kisi dua kolom: platform selalu kiri, label selalu menempel kanan. Dengan
   flex biasa, label bergeser mengikuti berapa lencana platform yang ada —
   produk MT5 saja dan MT4+MT5 labelnya berhenti di tempat berbeda.

   `min-height` mengunci tingginya: kartu TANPA label tetap menyisakan ruang
   yang sama, jadi harga di bawahnya sejajar di semua kartu. */
.kt .pc-meta{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--s2);margin-top:var(--s2b);min-height:22px}
.kt .pc-plat{display:flex;gap:var(--s1);min-width:0;margin-top:0}

/* LABEL PEMASANGAN — emas, beda dari lencana platform.
   MT4/MT5 fakta teknis; ini janji layanan. Warna berbeda supaya tidak terbaca
   sebagai "platform ketiga". */
.kt .pc-pasang{justify-self:end;white-space:nowrap;font-size:var(--t-l10);font-weight:700;
  letter-spacing:.03em;padding:var(--s0) var(--s2);border-radius:5px;
  border:1px solid rgba(212,178,92,.34);background:rgba(212,178,92,.1);color:var(--gold-2)}

@media (max-width:560px){
  .kt .pita-w{width:78px;height:78px}
  .kt .pita{top:15px;left:-28px;width:120px;font-size:var(--t-l10);letter-spacing:.06em;padding:var(--s0) 0}
  /* Label dapat BARISNYA SENDIRI: MT4+MT5 (73px) + label (90px) = 171px dari
     148px yang ada — meluber 23px. Sebaris sendiri, posisinya makin tetap. */
  .kt .pc-meta{grid-template-columns:1fr;gap:var(--s1b);min-height:0}
  .kt .pc-pasang{justify-self:start}
}

/* TINGGI DIKUNCI supaya label pemasangan sejajar di semua kartu — build 919.

   `min-height` pada .pc-meta saja tidak cukup: yang menggeser posisinya adalah
   dua hal DI ATASNYA yang tingginya berubah-ubah.

   1. RINGKASAN dipotong maks 2 baris, tapi teks pendek cuma memakai 1 baris
      (selisih 19px).
   2. Baris RATING hanya digambar kalau produknya punya ulasan (selisih 23px).

   Selisih terburuk antar kartu 42px — itu yang membuat labelnya terlihat
   "mengikuti ringkasan".

   Dikunci dengan min-height, bukan height: kalau suatu saat ukuran hurufnya
   berubah, teksnya masih boleh tumbuh daripada terpotong diam-diam. */
.kt .pc-desc{min-height:calc(12.5px * 1.5 * 2)}
/* Slot rating tetap ada meski produknya belum punya ulasan. */
.kt .pc-rate{min-height:23px}
.kt .pc-rate-kosong{min-height:23px;margin:var(--s1) 0 0}


/* ============ KAKI PENGGUNA DI DALAM RANGKA (build 1165) ============

   Penyelaras .foot-app dibuang: kakinya sekarang berada DI DALAM .app-main,
   jadi ia sudah mulai setelah sidebar dengan sendirinya. Penyelaras yang
   menambal posisi elemen yang sudah benar tempatnya cuma menggeser ia dua
   kali.

   Yang tersisa: memberi ruang di bawah supaya teksnya tidak tertutup
   bottombar di HP. */
.kt .app-main > footer{border-top:1px solid var(--line);margin-top:var(--s6)}
@media (max-width:1024px){
  /* Bottombar ~72px + garis gestur iPhone. Angka yang sama dipakai laci di
     app.css sejak build 1044. */
  .kt .app-main > footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}