/* =====================================================================
   MetaTraderKit — Halaman Testimoni (testimoni.css)

   Dipakai HANYA oleh testimonials.php. Dipasang lewat:
     <body class="ts">
     <link rel="stylesheet" href="/assets/testimoni.css?v=1">

   SEMUA aturan dilingkupi ".ts" — pola yang sama dengan .kt (katalog),
   .kb (kabar), .pd (produk). Alasannya nyata: sebelum dipisahkan, halaman
   ini memakai .chip dan .compose yang JUGA didefinisikan di mtk.css.
   Dua definisi untuk nama yang sama, menang-menangan urutan berkas.

   Dilingkupi dengan postcss (parser sungguhan), BUKAN tempel teks.
   Menempelkan ".ts " ke tiap baris yang diawali titik akan mengenai juga
   kurung penutup @media — persis yang membuat katalog.css tidak bisa
   diurai (6 tempat berisi ".kt }").
   ===================================================================== */

  /* =========================================================
     Halaman bukti — dibuat TENANG.
     Prinsip: satu kolom, satu alur baca, jarak lega.
     Yang dibuang karena bikin ramai: masonry naik-turun, kotak angka,
     dropdown urutan, dan overlay yang muncul-hilang saat disorot.
     Tema gelap-hijau tetap.
     ========================================================= */
  .ts .t-page{padding:var(--s20) 0 var(--s20)}
  .ts .app .t-page{padding-top:var(--s6)}   /* di dalam layout user (sidebar), tak perlu ruang untuk float-nav */

  /* BATAS ISI GANDA DILEPAS UNTUK PENGGUNA (build 1166).

     .wrap memakai --gutter dan --max sendiri, ditumpuk DI ATAS padding
     .app-body — dua lapis batas untuk satu isi. Di layar lebar hasilnya
     bidang kosong tebal di kiri-kanan; di HP isinya terdorong sempit tanpa
     alasan.

     Pola yang sama sudah diperbaiki di katalog (build 1163).

     Untuk TAMU pembatasnya tetap: halaman publik tidak punya .app-body, dan
     .wrap satu-satunya yang menahan lebar teksnya. */
  .ts .app-body .wrap{padding:0;max-width:none;width:100%}
  /* Jarak bawah juga dirapatkan: 80px di ujung halaman cuma menghasilkan
     gulir kosong sebelum kaki. */
  .ts .app-body .t-page{padding-bottom:var(--s6)}

  /* Kaki pengguna: garis pemisah + ruang untuk bottombar di HP. Sama dengan
     katalog di build 1165. */
  .ts .app-main > footer{border-top:1px solid var(--line);margin-top:var(--s6)}
  @media (max-width:1024px){
    .ts .app-main > footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  }
  /* Halaman memakai lebar penuh seperti beranda (1160px). Yang tetap dibatasi
     cuma teks judul — kalimat selebar 1160px capek dibaca. */
  .ts .t-inner{max-width:none}

  /* ---------- Kepala halaman ---------- */
  .ts .t-head{text-align:center;padding-bottom:var(--s8);border-bottom:1px solid var(--line)}
  .ts .t-title{font-family:var(--disp);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:14px 0 0}
  /* Subjudul: SATU BARIS di desktop. Dulu dibatasi 48 karakter, jadi kalimatnya
     dipaksa pecah dan kata terakhir menggantung sendirian — terlihat seperti salah. */
  .ts .t-sub{color:var(--muted);font-size:var(--t-l7);line-height:1.65;margin:12px auto 0;max-width:none;white-space:nowrap}
  .ts .t-head{max-width:820px;margin:0 auto}
  @media(max-width:820px){ .ts .t-sub{white-space:normal;max-width:44ch} }
  /* Statistik sebagai satu baris teks biasa — bukan kotak. Tenang, tidak berebut perhatian. */
  .ts .t-stat{margin-top:var(--s5);color:var(--muted);font-size:var(--t-l8);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
  .ts .t-stat b{color:var(--paper);font-family:var(--disp);font-weight:600}
  .ts .t-stat i{color:var(--gold);font-style:normal;letter-spacing:1px}
  .ts .t-stat s{width:3px;height:3px;border-radius:50%;background:var(--line-2);text-decoration:none}

  /* ---------- Judul bagian ---------- */
  .ts .t-sec{margin-top:var(--s16)}
  .ts .t-sec > h2{font-family:var(--disp);font-size:var(--t-l4);font-weight:600;margin:0 0 6px;display:flex;align-items:center;gap:8px}
  .ts .t-sec > h2 .icon{width:16px;height:16px;color:var(--green)}
  .ts .t-sec > p{color:var(--muted);font-size:var(--t-l7);margin:0 0 var(--s6)}

  /* ---------- Dokumentasi: kotak seragam, tidak naik-turun ---------- */
  /* Galeri digeser ke samping: 3 kartu + intipan kartu ke-4 (HP: 2 + intipan ke-3) */
  .ts .doc-car{position:relative}
  /* BATANG GULIR SENGAJA TIDAK DIATUR DI SINI (build 1010).

     Aturan lama menyebut scrollbar-width:thin BERSAMA ::-webkit-scrollbar.
     mtk.css sudah memperingatkannya: kalau keduanya disebut pada elemen
     yang sama, Chrome/Safari MENGABAIKAN seluruh ::-webkit-scrollbar dan
     memakai batang gulir bawaannya. Tidak ada galat — yang tampil batang
     putih tebal, persis yang dilaporkan Yanz.

     Selain itu `.docs` SUDAH terdaftar di aturan bersama mtk.css yang
     menyembunyikan batang gulir untuk geseran mendatar: area ini punya
     panah kiri-kanan DAN tulisan "Geser ke samping", jadi batangnya cuma
     menambah benda. Aturan lokal ini menimpanya karena kekhususannya lebih
     tinggi (.ts .docs = 0,2,0 lawan html .docs = 0,1,1).

     Dibuang seluruhnya. Yang berlaku sekarang aturan bersama. */
  .ts .docs{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:10px}
  .ts .docs > *{flex:0 0 29.5%;scroll-snap-align:start}   /* 3 kartu + intipan kartu ke-4 */
  /* kalau dokumentasinya sedikit, posisinya rata tengah (bukan nempel kiri) */
  .ts .docs > *:first-child{margin-left:auto}
  .ts .docs > *:last-child{margin-right:auto}
  .ts .doc-nav{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(8,17,13,.92);border:1px solid var(--line-2);color:var(--paper);display:grid;place-items:center;cursor:pointer;z-index:6;font-size:var(--t-l5);line-height:1;padding:0;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:opacity .18s,border-color .18s,color .18s}
  .ts .doc-nav:hover{border-color:var(--green);color:var(--green)}
  .ts .doc-nav.prev{left:-14px}
  .ts .doc-nav.next{right:-14px}
  .ts .doc-nav[hidden]{display:none}
  .ts .doc-nav.off{opacity:.25;pointer-events:none}
  .ts .doc{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--ink-3);aspect-ratio:4/5;margin:0;transition:border-color .2s}
  .ts .doc:hover{border-color:rgba(31,227,116,.45)}
  .ts .doc.off{opacity:.55;border-style:dashed}
  .ts .doc-open{position:absolute;inset:0;padding:0;border:0;background:none;cursor:zoom-in;width:100%;height:100%}
  .ts .doc-open:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .ts .doc img{width:100%;height:100%;object-fit:cover;display:block}
  .ts .doc-hid{position:absolute;top:8px;left:8px;background:rgba(240,122,122,.9);color:#2a0b0b;font-size:var(--t-l10);font-weight:700;padding:2px 7px;border-radius:99px}
  /* Tombol admin: muncul di atas foto, tidak mengganggu saat dibaca pengunjung */
  .ts .doc-act{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:6px;padding:8px;background:linear-gradient(to top,rgba(4,12,8,.95),transparent);opacity:0;transition:opacity .18s}
  .ts .doc:hover .doc-act, .ts .doc:focus-within .doc-act{opacity:1}
  .ts .doc-act .act{width:28px;height:28px;background:rgba(10,20,14,.9);border-color:var(--line-2)}
  .ts .doc-act .act .icon{width:12px;height:12px}
  @media(hover:none){ .ts .doc-act{opacity:1} }   /* di HP tidak ada "disorot" */
  .ts .doc-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 11px 10px;text-align:left;pointer-events:none;background:linear-gradient(to top,rgba(4,12,8,.9),transparent)}
  .ts .doc:hover .doc-cap{opacity:0;transition:opacity .18s}
  .ts .doc-cap b{display:block;font-family:var(--disp);font-size:var(--t-l8);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ts .doc-pin{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(227,192,107,.2)}
  @media(max-width:560px){
    .ts .docs{gap:9px}
    .ts .docs > *{flex:0 0 42%}          /* HP: 2 kartu + intipan kartu ke-3 */
    .ts .doc-nav{display:none}            /* di HP cukup digeser pakai jari */
  }

  /* ---------- Ulasan: satu kolom, mengalir ---------- */
  /* Di layar lebar, ulasan disusun 2 kolom sebagai kartu — kalau tetap 1 kolom,
     barisnya jadi selebar 1100px dan mata capek mengikutinya. */
  .ts #revList{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
  .ts .rev{background:linear-gradient(160deg,var(--panel2),var(--ink-2));border:1px solid var(--line);border-radius:16px;padding:18px}
  @media(max-width:820px){
    .ts #revList{grid-template-columns:1fr;gap:12px}
    .ts .rev{padding:15px}
  }
  .ts .rev-head{display:flex;align-items:center;gap:11px}
  .ts .rev-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#04140b;font-family:var(--disp);font-weight:700;font-size:var(--t-l7);overflow:hidden}
  .ts .rev-av img{width:100%;height:100%;object-fit:cover}
  .ts .rev-who{flex:1;min-width:0}
  .ts .rev-who b{display:block;font-family:var(--disp);font-size:var(--t-l7);font-weight:600;color:var(--paper)}
  /* ">" penting: hanya mengenai tanggal (anak langsung), BUKAN label status
     yang ada di dalam <b>. Tanpa ini, label "Sedang ditinjau" ikut dipaksa
     jadi blok dan melar selebar baris. */
  .ts .rev-who > span{display:block;color:var(--muted);font-size:var(--t-l8);margin-top:1px}
  .ts .rev-star{flex:none;color:var(--gold);font-size:var(--t-l8);letter-spacing:1.5px}
  .ts .rev-star i{color:var(--line-2);font-style:normal}
  .ts .rev-txt{color:var(--paper);font-size:var(--t-l7);line-height:1.7;margin:14px 0 0;word-break:break-word}
  .ts .rev-img{margin-top:14px;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;display:block;max-width:280px;padding:0;background:none}
  .ts .rev-img img{width:100%;display:block}
  .ts .rev-reply{margin-top:14px;padding:12px 14px;background:rgba(31,227,116,.05);border-left:2px solid var(--green);border-radius:0 10px 10px 0}
  .ts .rev-reply b{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:var(--t-l9);font-weight:700}
  .ts .rev-reply p{color:var(--muted);font-size:var(--t-l7);line-height:1.6;margin:5px 0 0}

  /* Ulasan digulir ke bawah di dalam kotaknya sendiri, supaya halaman tidak
     terus memanjang setiap kali ada ulasan baru. */
  /* .rev-scroll: sama seperti .docs — menyebut scrollbar-width bersama
     ::-webkit-scrollbar membuat Chrome memakai batang bawaannya.

     Kotak gulirnya sendiri sudah dinetralkan sejak build 1002 (daftar
     ulasan memakai kolom mengalir, bukan area bergulir), jadi seluruh
     aturan ini memang tidak punya pekerjaan lagi. */
  .ts .rev-scroll{max-height:min(78vh, 980px);overflow-y:auto;padding-right:12px}
  .ts .rev-more{color:var(--muted);font-size:var(--t-l8);text-align:center;margin:var(--s5) 0 0}

  /* Tombol melayang: balik ke kotak tulis ulasan */
  /* TOMBOL NAIK: dipindah ke KANAN (build 1168).

     `left:24px` dipatok saat halaman ini masih tampilan tamu — tamu tidak
     punya sidebar, jadi sudut kiri bawah kosong.

     Untuk pengguna, sudut itu ditempati sidebar selebar 236px: tombolnya
     mendarat tepat di atasnya.

     Dipindah ke kanan, sisi yang kosong di kedua tampilan. Di sana ia juga
     lebih dekat ke jempol pada HP.

     z-index turun 60 -> 45: rangka aplikasi harus selalu di atas isi halaman
     (topbar 50, dropdown 200). Pelajaran yang sama dengan katalog di build
     1163. */
  .ts .up-fab{position:fixed;right:24px;bottom:24px;z-index:45;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:var(--ink-2);color:var(--muted);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,color .18s,border-color .18s}
  .ts .up-fab.show{opacity:1;pointer-events:auto;transform:none}
  .ts .up-fab:hover{color:var(--green);border-color:var(--green)}
  .ts .up-fab .icon{width:19px;height:19px;transform:rotate(-90deg)}
  @media(max-width:820px){ .ts .up-fab{left:16px;bottom:16px;width:44px;height:44px} }

  /* ---------- Baris alat: seringkas mungkin ---------- */
  .ts .bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--s6)}
  .ts .chip{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:var(--t-l8);padding:6px 13px;border-radius:99px;cursor:pointer;transition:.16s}
  .ts .chip:hover{color:var(--paper)}
  .ts .chip.on{background:rgba(31,227,116,.1);border-color:rgba(31,227,116,.45);color:var(--green)}
  /* ---------- Kotak tulis ulasan (gaya kolom komentar) ---------- */
  .ts .cbox{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 14px;margin-bottom:var(--s6);background:var(--ink-2);border:1px solid var(--line);border-radius:99px;cursor:pointer;text-decoration:none;transition:border-color .18s,background .18s}
  .ts .cbox:hover{border-color:rgba(31,227,116,.45);background:var(--ink-3)}
  .ts .cbox .icon{flex:none;color:var(--muted)}
  .ts .cbox:hover .icon{color:var(--green)}
  .ts .cbox-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#04140b;font-family:var(--disp);font-weight:700;font-size:var(--t-l8)}
  .ts .cbox-av .icon{color:#04140b}
  .ts .cbox-ph{flex:1;min-width:0;color:var(--muted);font-size:var(--t-l7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ts .cbox.off{cursor:default;opacity:.65}
  .ts .cbox.off:hover{border-color:var(--line);background:var(--ink-2)}
  .ts .cbox.off:hover .icon{color:var(--muted)}
  .ts .cbox.off .cbox-av{background:var(--line-2);color:var(--muted)}
  .ts .w-note{color:var(--muted);font-size:var(--t-l8);margin:-12px 0 var(--s6);padding-left:14px}
  .ts .w-note a{color:var(--green)}

  /* ---------- Form ---------- */
  .ts .compose{display:none;background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:var(--s8)}
  .ts .compose.open{display:flex;flex-direction:column;gap:11px}
  .ts .cc-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:0}
  .ts .cc-row select{background:var(--ink-3);border:1px solid var(--line);color:var(--paper);border-radius:10px;padding:8px 11px;font-size:var(--t-l8);outline:none}
  .ts .photo-pick{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:var(--t-l8);cursor:pointer}
  .ts .photo-pick:hover{border-color:var(--green);color:var(--green)}
  .ts #cPhotoPrev{margin-top:10px;max-width:150px;border-radius:10px;border:1px solid var(--line);display:none}

  /* ---------- Ulasan saya ---------- */
  .ts .mine{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:var(--s8)}
  .ts .mine-h{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-size:var(--t-l7);font-weight:600;margin-bottom:10px}
  .ts .mine-i{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
  .ts .mine-t{font-size:var(--t-l7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ts .mine-m{color:var(--muted);font-size:var(--t-l9);margin-top:2px}
  .ts .mine-n{color:var(--muted);font-size:var(--t-l9);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

  /* ---------- Form admin ---------- */
  .ts .cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ts .cc-f{display:block}
  .ts .cc-f > span{display:block;color:var(--muted);font-size:var(--t-l8);margin-bottom:5px}
  @media(max-width:560px){ .ts .cc-grid{grid-template-columns:1fr} }

  /* ---------- Tombol aksi pada ulasan ---------- */
  /* Tombol aksi: IKON saja. Teks dibuang karena 3 tombol bertulisan di tiap
     ulasan bikin daftar terasa penuh. Maksudnya tetap jelas lewat tooltip
     (kursor didiamkan) dan tetap terbaca oleh pembaca layar. */
  .ts .rev-act{display:flex;gap:7px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
  .ts .act{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:50%;cursor:pointer;transition:.16s;padding:0}
  .ts .act .icon{width:14px;height:14px}
  .ts .act:hover{color:var(--paper);border-color:var(--line-2);background:var(--ink-3)}
  .ts .act.on{color:var(--paper);border-color:var(--line-2);background:var(--ink-3)}
  .ts .act.gold:hover{color:var(--gold);border-color:rgba(227,192,107,.5);background:rgba(227,192,107,.08)}
  .ts .act.gold.on{color:var(--gold);border-color:rgba(227,192,107,.5);background:rgba(227,192,107,.12)}
  .ts .act.bad:hover{color:var(--bad);border-color:rgba(240,122,122,.5);background:rgba(240,122,122,.08)}
  .ts .rev-st{display:inline-flex;width:fit-content;flex:none;align-items:center;gap:5px;white-space:nowrap;font-size:var(--t-l9);font-weight:600;padding:3px 9px;border-radius:99px;margin-left:8px;vertical-align:middle}
  .ts .rev-st.wait{background:rgba(227,192,107,.12);border:1px solid rgba(227,192,107,.35);color:var(--gold)}
  .ts .rev-st.hide{background:rgba(240,122,122,.1);border:1px solid rgba(240,122,122,.3);color:var(--bad)}

  .ts .t-empty{border:1px dashed var(--line);border-radius:16px;padding:var(--s10);text-align:center}
  .ts .t-empty h4{font-family:var(--disp);font-size:var(--t-l7);margin:0 0 4px}
  .ts .t-empty p{color:var(--muted);font-size:var(--t-l7);margin:0}

  /* Susunan tombol melayang di kanan bawah (dari bawah ke atas):
       1. Konsultasi (hijau)   — semua orang
       2. Panel Admin (emas)   — admin saja
       3. Beranda (netral)     — admin saja
     Warnanya sengaja beda-beda supaya tidak salah pencet. */

  /* Tombol panel admin — melayang di atas tombol konsultasi, hanya untuk admin */

  /* Ulasan yang disembunyikan (terlihat oleh admin saja) */
  .ts .rev.off{opacity:.55}
  .ts .rev-hid{display:inline-flex;align-items:center;background:rgba(240,122,122,.12);border:1px solid rgba(240,122,122,.35);color:var(--bad);font-size:var(--t-l9);font-weight:600;padding:2px 8px;border-radius:99px;margin-top:10px}

  /* Pesan kilat — pengganti "halaman dimuat ulang" sebagai tanda aksi berhasil */
  /* Di HP tombol naik dinaikkan di atas bottombar — kalau tidak, ia tertutup
     dan tidak bisa ditekan sama sekali. */
  @media(max-width:1024px){
    .ts .up-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
  }

  .ts .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;background:var(--ink-2);border:1px solid rgba(31,227,116,.45);color:var(--paper);font-size:var(--t-l7);padding:11px 18px;border-radius:99px;box-shadow:0 14px 34px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .ts .toast.show{opacity:1;transform:translate(-50%,0)}
  .ts .toast.bad{border-color:rgba(240,122,122,.5);color:var(--bad)}

  /* ---------- Popup foto ---------- */
  .ts .lb{position:fixed;inset:0;z-index:200;background:rgba(4,10,7,.95);display:none;align-items:center;justify-content:center;padding:24px}
  .ts .lb.open{display:flex}
  .ts .lb-box{margin:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
  .ts .lb img{max-width:100%;max-height:78vh;border-radius:12px;border:1px solid var(--line-2);display:block}
  /* Keterangan foto — muncul hanya kalau memang ada isinya */
  .ts .lb-cap{display:none;max-width:520px;text-align:center;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
  .ts .lb-cap.show{display:block}
  .ts .lb-cap b{display:block;font-family:var(--disp);font-size:var(--t-l7);font-weight:600;color:var(--paper);line-height:1.5}
  .ts .lb-cap span{display:block;color:var(--muted);font-size:var(--t-l8);margin-top:4px}
  .ts .lb-cap span:empty{display:none}
  .ts .lb-cap b:empty{display:none}
  .ts .ed-card{width:100%;max-width:520px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:18px;padding:22px;max-height:88vh;overflow-y:auto}
  .ts .ed-card h3{font-family:var(--disp);font-size:var(--t-l6);font-weight:600;margin:0 0 16px}
  .ts .lb-x{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--ink-2);color:var(--paper);font-size:var(--t-l4);cursor:pointer}
  .ts .lb-x:hover{border-color:var(--green);color:var(--green)}

  @media(max-width:820px){ .ts .t-page{padding-top:var(--s16)} }
/* =====================================================================
   TAMPILAN BARU (build 1001) — ditulis DI BAWAH aturan lama supaya
   menimpanya. Semuanya dilingkupi .ts, sama seperti .kt di katalog.

   URUTAN PENTING: aturan yang MENYEMBUNYIKAN harus ditulis sesudah
   aturan yang menampilkan kalau kekhususannya sama. Kalau dibalik,
   yang tersembunyi malah muncul.
   ===================================================================== */

/* ---------- Kepala halaman: rata kiri + panel penilaian ---------- */
/* Dulu rata tengah dengan sebaris statistik tipis. Baris itu elemen
   paling lemah di halaman yang tugasnya membuktikan. */
.ts .t-head{max-width:none;margin:0;text-align:left;padding-bottom:0;border-bottom:0}
.ts .t-hero-in{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s16);align-items:end}
.ts .t-title{font-size:var(--t-l2);line-height:1.18;margin:var(--s4) 0 0}
.ts .t-sub{white-space:normal;max-width:54ch;margin:var(--s3b) 0 0;font-size:var(--t-l5)}

/* Panel penilaian — satu-satunya elemen "berani" di halaman ini. */
.ts .nilai{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--panel2),var(--ink-2));
  padding:var(--s5) var(--s5) var(--s4);position:relative;overflow:hidden}
.ts .nilai::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,227,116,.55),transparent)}
.ts .nilai-atas{display:flex;align-items:flex-start;gap:var(--s4)}
.ts .nilai-ang{font-family:var(--disp);font-size:var(--t-l1);font-weight:800;letter-spacing:-.04em;
  line-height:.92;font-variant-numeric:tabular-nums}
.ts .nilai-ang sup{font-size:var(--t-l6);font-weight:600;color:var(--muted-2);letter-spacing:0;top:-.9em}
.ts .nilai-kanan{padding-top:4px}
.ts .nilai-bintang{color:var(--gold);font-size:var(--t-l7);letter-spacing:2px;line-height:1}
.ts .nilai-bintang i{color:var(--muted-2);font-style:normal}
.ts .nilai-ket{color:var(--muted);font-size:var(--t-l8);margin-top:var(--s2)}
.ts .nilai-bar{display:grid;gap:var(--s1b);margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line)}
.ts .nb{display:grid;grid-template-columns:26px minmax(0,1fr) 30px;align-items:center;gap:var(--s2b)}
.ts .nb-l{font-size:var(--t-l9);color:var(--muted-2);font-variant-numeric:tabular-nums;text-align:right}
.ts .nb-t{height:5px;border-radius:99px;background:rgba(135,170,145,.13);overflow:hidden}
.ts .nb-t span{display:block;height:100%;border-radius:99px;background:var(--gold);opacity:.75}
.ts .nb-n{font-size:var(--t-l9);color:var(--muted-2);font-variant-numeric:tabular-nums}
.ts .nilai-kaki{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  padding-top:var(--s3b);border-top:1px solid var(--line);font-size:var(--t-l8);color:var(--muted)}
.ts .nilai-kaki .icon{width:14px;height:14px;color:var(--green)}
.ts .nilai-kaki b{color:var(--paper);font-weight:600}

@media(max-width:920px){
  .ts .t-hero-in{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .ts .t-title{font-size:var(--t-l3)}
  .ts .t-sub{font-size:var(--t-l6)}
}

/* ---------- Judul bagian: dinaikkan ke tangga huruf yang benar ---------- */
.ts .t-sec > h2{font-size:var(--t-l4);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--s1)}
.ts .t-sec > h2 .icon{width:18px;height:18px}
.ts .t-sec > p{font-size:var(--t-l8);margin:0 0 var(--s6)}

/* ---------- Bar saring: menempel, tiap chip membawa angkanya ---------- */
/* Dengan 128 ulasan, saringan yang hilang saat digulir praktis tak terpakai. */
.ts .bar{position:sticky;top:0;z-index:30;padding:var(--s3) 0;margin-bottom:var(--s5);
  background:linear-gradient(var(--ink) 74%,transparent)}
.ts .app .bar{top:var(--s16)}
.ts .chip{font-size:var(--t-l8);padding:7px 14px;display:inline-flex;align-items:center;gap:var(--s1b)}
.ts .chip b{font-variant-numeric:tabular-nums;font-weight:600;opacity:.72}

/* ---------- Kartu ulasan: sebaris sama tinggi, isi dipangkas ---------- */
/* align-items sebelumnya start, jadi tiap baris bergerigi karena panjang
   ulasan berbeda-beda. */
.ts #revList{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
/* Aturan .rev flex + pangkas 5 baris dari build 1001 DIBUANG di 1006,
   bukan ditimpa. Ia sudah dibatalkan sejak 1002 (kolom mengalir), dan
   membiarkannya berarti tiga definisi bertumpuk untuk hal yang sama —
   persis kekacauan yang baru dibersihkan di 1005. */
.ts .rev-lagi{align-self:flex-start;margin-top:var(--s2);padding:0;border:0;background:none;
  color:var(--green);font:inherit;font-size:var(--t-l8);font-weight:600;cursor:pointer}
.ts .rev-lagi:hover{text-decoration:underline}
.ts .rev-lagi[hidden]{display:none}
/* foto, balasan, dan tombol admin didorong ke dasar kartu supaya sejajar */
.ts .rev-img{margin-top:auto;margin-bottom:0}
.ts .rev-reply{margin-top:auto}
.ts .rev-img + .rev-reply,.ts .rev-txt + .rev-reply{margin-top:var(--s3b)}
.ts .rev-act{margin-top:var(--s3b)}

/* Ulasan pilihan: MELEBAR, bukan diberi warna lain.
   Sebelumnya cuma dapat bintang emas kecil dan tenggelam di antara kartu
   lain. Memakai kolom is_featured yang sudah ada — tanpa kolom baru. */
.ts .rev.utama{grid-column:1 / -1;padding:var(--s7);
  background:linear-gradient(150deg,rgba(212,178,92,.07),var(--ink-2) 58%);
  border-color:rgba(212,178,92,.3)}
.ts .rev.utama .rev-txt{font-size:var(--t-l5);line-height:1.72;max-width:62ch;-webkit-line-clamp:4}
.ts .rev-pilih{display:inline-flex;align-items:center;gap:var(--s1b);align-self:flex-start;
  font-size:var(--t-l9);color:var(--gold);letter-spacing:.06em;margin-bottom:var(--s3)}
.ts .rev-pilih .icon{width:12px;height:12px}

@media(max-width:820px){
  .ts #revList{grid-template-columns:minmax(0,1fr)}
  .ts .rev{padding:var(--s4)}
  .ts .rev.utama{padding:var(--s5)}
  .ts .rev.utama .rev-txt{font-size:var(--t-l6)}
}

/* ---------- Kartu dokumentasi: tanggal pindah ke pop-up ---------- */
/* Di kartu 230px tanggal cuma jadi angka yang tak terbaca sekilas; di
   pop-up ia justru yang bikin bukti terasa nyata. */
.ts .doc-cap s{display:block;text-decoration:none;font-family:var(--body);font-weight:500;
  font-size:var(--t-l9);color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   BUILD 1002 — pita sorot, saringan berlapis, dan lapis tekstur.

   Ditulis DI BAWAH blok 1001 supaya menimpanya. Yang dibatalkan dari
   1001 dicatat di tempatnya masing-masing, bukan dihapus diam-diam.
   ===================================================================== */

/* ---------------------------------------------------------------------
   GRAIN — dua varian, dan bedanya menentukan kelihatan atau tidak.

   Build 1001 memasang grain di kartu dengan mix-blend-mode:overlay.
   Overlay MEMPERTAHANKAN nada gelap: di permukaan #152A20 butirannya
   lenyap sama sekali. Grain-nya ada di kode, nol di layar.

   Yang benar untuk permukaan gelap adalah screen — ia MENERANGKAN.
   Karena itu dibutuhkan grain kedua yang lebih pekat (rect .55): pada
   screen, sumber yang terlalu redup tidak menghasilkan apa-apa juga.

   --grain-gelap tetap dipakai body (mtk.css), jangan diubah.
   --------------------------------------------------------------------- */
.ts{
  --grain-terang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   JANGKAR CAHAYA PER BAGIAN.

   Halaman ini panjang dan seluruhnya gelap; tanpa penanda, ia terbaca
   sebagai satu bidang hitam datar. Tiap bagian diberi satu sumber cahaya
   lemah supaya mata tahu "bagian baru" sebelum membaca judulnya.

   z-index -1 dan pointer-events:none: ia murni latar, tidak pernah
   menghalangi klik. Melebar keluar .wrap sejauh setengah gutter supaya
   cahayanya tidak berhenti tepat di tepi isi.
   --------------------------------------------------------------------- */
.ts .t-head,.ts .t-sec{position:relative}
.ts .t-head::before,.ts .t-sec::before{content:'';position:absolute;pointer-events:none;z-index:-1;
  left:calc(var(--gutter) / -2);right:calc(var(--gutter) / -2);top:calc(var(--s16) * -1);height:420px}
.ts .t-head::before{background:radial-gradient(660px 300px at 12% 40%,rgba(212,178,92,.07),transparent 68%)}
.ts .t-sec.sec-doc::before{background:radial-gradient(720px 320px at 82% 30%,rgba(31,227,116,.055),transparent 68%)}
.ts .t-sec.sec-rev::before{background:radial-gradient(760px 340px at 20% 24%,rgba(31,227,116,.045),transparent 70%)}

/* Pemisah antar bagian: memudar di kedua ujung. Garis lurus solid
   memotong halaman jadi kotak-kotak; yang memudar memisahkan tanpa
   memotong. */
.ts .pisah-grad{height:1px;margin:var(--s16) 0 0;border:0;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}

/* ---------------------------------------------------------------------
   PERMUKAAN KARTU — tingkat "sedang".

   Gradasi lama var(--panel2) -> var(--ink-2) itu #152A20 -> #10241C:
   selisih lima langkah. Bukan gradasi, melainkan warna rata dengan
   langkah tambahan.

   Sekarang tiga henti + dua sapuan radial: cahaya dari kiri atas, sudut
   kanan bawah menggelap. Arahnya sengaja sama dengan glow latar halaman,
   jadi kartunya terasa berada di dalam ruangan yang sama.

   inset 0 1px 0 putih .055 = cahaya tepi atas. Satu piksel, tapi itu
   yang membuat kartu terbaca sebagai benda bertepi, bukan lubang
   berwarna.
   --------------------------------------------------------------------- */
.ts .rev{position:relative;overflow:hidden;
  background:
    radial-gradient(115% 82% at 0% 0%,rgba(31,227,116,.085),transparent 56%),
    radial-gradient(100% 80% at 100% 100%,rgba(0,0,0,.32),transparent 62%),
    linear-gradient(152deg,#1B3327 0%,#132720 46%,#0C1A13 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.ts .rev::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain-terang);background-size:150px 150px;opacity:.1;mix-blend-mode:screen}
.ts .rev:hover{border-color:rgba(31,227,116,.3);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.44)}
/* Isi kartu harus di ATAS lapis grain. */
.ts .rev-head,.ts .rev-txt,.ts .rev-img,.ts .rev-reply,.ts .rev-act,.ts .rev-hid{position:relative;z-index:2}

/* Panel penilaian dapat perlakuan yang sama supaya permukaannya satu bahasa. */
.ts .nilai::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain-terang);background-size:150px 150px;opacity:.08;mix-blend-mode:screen}
.ts .nilai > *{position:relative;z-index:2}
.ts .nilai::before{z-index:3}
/* Batang sebaran: gradasi menguat ke kanan, jadi arah bacanya jelas. */
.ts .nb-t span{background:linear-gradient(90deg,rgba(212,178,92,.45),var(--gold-2));opacity:1}

/* ---------------------------------------------------------------------
   FEED — kolom mengalir, bukan grid.

   MEMBATALKAN keputusan build 1001. Di sana kartu sebaris dipaksa sama
   tinggi dan isinya dipangkas 5 baris. Hasilnya memang rapi — dan justru
   itu yang membuat halamannya terasa mati: semua kartu seragam, sama
   tinggi, sama panjang.

   Dengan kolom mengalir, tinggi kartu ikut isinya. Ulasan pendek jadi
   pendek, yang berfoto jadi tinggi. Karena tidak ada lagi yang dipangkas,
   tombol "Selengkapnya" ikut dibuang.
   --------------------------------------------------------------------- */
.ts .rev-scroll{max-height:none;overflow:visible;padding-right:0}
.ts #revList{display:block;columns:3;column-gap:var(--s4)}
.ts .rev{display:block;break-inside:avoid;margin:0 0 var(--s4);padding:var(--s5)}
.ts .rev-lagi{display:none}
/* Dorong-ke-dasar dari 1001 tidak berlaku lagi: kartunya bukan flex. */
.ts .rev-img,.ts .rev-reply,.ts .rev-tag{margin-top:var(--s3b)}
.ts .rev-img{max-width:none}
.ts .rev-reply{background:linear-gradient(100deg,rgba(31,227,116,.1),rgba(31,227,116,.02))}
@media(max-width:1100px){ .ts #revList{columns:2} }
@media(max-width:820px){ .ts #revList{columns:1} }

/* Warna avatar dari huruf depan nama. Bukan hiasan: dengan 30 kartu
   berderet, warna adalah yang paling cepat dikenali mata saat menggulir. */
.ts .rev-av.av-1{background:linear-gradient(150deg,#1FE374,#16C96B)}
.ts .rev-av.av-2{background:linear-gradient(150deg,#E2C179,#D4B25C)}
.ts .rev-av.av-3{background:linear-gradient(150deg,#7FA7FF,#5B87E8)}
.ts .rev-av.av-4{background:linear-gradient(150deg,#7FE3D0,#4FC9B4)}
.ts .rev-av.av-5{background:linear-gradient(150deg,#C79BE8,#A87BD0)}

/* ---------------------------------------------------------------------
   PITA SOROT — pengganti kartu unggulan melebar dari build 1001.

   Kartu penuh dua kolom itu boros: satu ulasan memakan ruang empat kartu
   biasa, dan isinya cuma teks — tidak ada yang mengisi ruang selebar itu.

   Pita ini tetap selebar halaman TAPI pendek. Lebarnya dipakai untuk
   satu-satunya hal yang memang butuh lebar: kalimatnya, dua baris penuh.
   --------------------------------------------------------------------- */
.ts .rev.utama{all:unset}
/* Di desktop nama & meta tetap satu kalimat: "Nama · Produk · Tanggal". */
.ts .pg{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:var(--t-l7);padding:0}
.ts .pg:hover{border-color:var(--gold);color:var(--gold)}
.ts .pg[disabled]{opacity:.3;pointer-events:none}

/* ---------------------------------------------------------------------
   SARINGAN BERLAPIS.

   Build 1001 memakai chip berserakan. Sekarang: saringan POKOK (yang
   saling meniadakan) masuk satu kotak segmented; yang sifatnya TAMBAHAN
   dan bisa digabung tetap chip terpisah. Bentuknya memberi tahu
   perilakunya sebelum diklik.
   --------------------------------------------------------------------- */
.ts .bar{display:block;position:sticky;top:0;z-index:30;margin-bottom:var(--s5);
  background:linear-gradient(var(--ink) 78%,transparent);padding:var(--s3) 0 var(--s4)}
.ts .app .bar{top:var(--s16)}
.ts .bar-baris + .bar-baris{margin-top:var(--s2b)}

.ts .seg{display:inline-flex;padding:3px;border-radius:99px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-2),#0B1811)}
.ts .seg button{font:inherit;font-size:var(--t-l8);font-weight:600;color:var(--muted);padding:7px 15px;
  border-radius:99px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1b)}
.ts .seg button:hover{color:var(--paper)}
.ts .seg button.on{background:linear-gradient(160deg,rgba(31,227,116,.2),rgba(31,227,116,.08));
  color:var(--green);box-shadow:inset 0 1px 0 rgba(31,227,116,.25)}
.ts .seg button b{opacity:.6;font-weight:600}

.ts .chip.on{background:linear-gradient(160deg,rgba(31,227,116,.16),rgba(31,227,116,.06))}
.ts .chip .icon{width:13px;height:13px}

/* Dropdown produk & urutan — pola <details> yang sama dengan katalog.
   <details> default display:block, itu merusak baris flex; harus
   inline-block. (Pola kesalahan nomor 10.) */
.ts .pilih{position:relative;display:inline-block}
.ts .pilih > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:var(--t-l8);color:var(--muted)}
.ts .pilih > summary::-webkit-details-marker{display:none}
.ts .pilih > summary:hover{color:var(--paper);border-color:var(--line-2)}
.ts .pilih[open] > summary{color:var(--green);border-color:rgba(31,227,116,.45);background:rgba(31,227,116,.1)}
.ts .pilih > summary .icon{width:12px;height:12px;transition:transform .18s}
.ts .pilih[open] > summary .icon{transform:rotate(180deg)}
.ts .pilih-isi{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:225px;max-height:280px;
  overflow-y:auto;background:linear-gradient(180deg,#0E1D16,#0A150F);border:1px solid var(--line-2);
  border-radius:var(--r);padding:var(--s1b);box-shadow:0 22px 48px rgba(0,0,0,.6)}
.ts .pilih-isi button{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;font:inherit;
  font-size:var(--t-l8);color:var(--muted);background:none;border:0;cursor:pointer;padding:9px var(--s3);
  border-radius:9px}
.ts .pilih-isi button:hover{background:rgba(31,227,116,.08);color:var(--paper)}
.ts .pilih-isi button.on{color:var(--green)}
.ts .pilih-isi button b{margin-left:auto;opacity:.55;font-weight:600}
.ts .bar-hasil{margin-left:auto;font-size:var(--t-l8);color:var(--muted-2)}
@media(max-width:820px){ .ts .bar-hasil{margin-left:0;flex-basis:100%} }

/* Kotak tulis & tepi carousel — gradasi kecil supaya sebahasa. */
.ts .cbox{background:linear-gradient(160deg,var(--ink-2),#0B1811)}
.ts .docs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%)}

/* Kaki halaman tidak jatuh mendadak jadi hitam. */
.ts footer{position:relative}
.ts footer::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 260px at 50% 0,rgba(31,227,116,.045),transparent 70%)}
.ts footer > *{position:relative;z-index:1}

/* =====================================================================
   BUILD 1003 — saringan satu baris, tombol geser di tepi, tombol kembali
   untuk pengguna yang sudah masuk.
   ===================================================================== */

/* Tombol kembali di dalam rangka aplikasi: pergeserannya ada di mtk.css
   bersama aturan .kembali-apung yang lain. Rangka .app itu milik bersama,
   bukan milik halaman ini. */

/* ---------------------------------------------------------------------
   SARINGAN SATU BARIS.

   Build 1002 memakai dua baris. Selain memakan tinggi dua kali, "Bintang 5"
   PECAH JADI DUA BARIS di dalam kotak segmented — tidak ada nowrap, dan
   kata itu memang panjang. Terlihat rusak, bukan padat.

   Perbaikannya dua arah: teksnya dipendekkan (Bintang 5 -> ★5, Dibalas
   admin -> Dibalas), dan semua tombol dikunci setinggi 34px dengan radius
   sama supaya barisnya terbaca sebagai satu alat.
   --------------------------------------------------------------------- */

/* Tinggi seragam untuk SEMUA penghuni baris. Tanpa ini tiap bentuk punya
   tinggi sendiri dan barisnya terlihat bergerigi. */
.ts .bar .pilih > summary .pilih-nama{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Angka di dalam tombol: rata angka, tidak ikut memaksa baris baru. */

/* Dropdown yang SEDANG menyaring diberi warna aktif — tanpa ini, saringan
   produk yang menyala tidak terlihat sebagai saringan, dan orang bingung
   kenapa daftarnya cuma sedikit. */
.ts .bar .pilih.aktif > summary{color:var(--green);border-color:rgba(31,227,116,.45);
  background:linear-gradient(160deg,rgba(31,227,116,.16),rgba(31,227,116,.06))}

.ts .bar-reset{height:34px;padding:0 var(--s3);border:0;background:none;cursor:pointer;font:inherit;
  font-size:var(--t-l8);color:var(--gold);white-space:nowrap}
.ts .bar-reset:hover{text-decoration:underline}
.ts .bar-reset[hidden]{display:none}
.ts .bar-hasil{margin-left:auto;white-space:nowrap}

@media(max-width:700px){
  /* Di HP barisnya boleh melipat, tapi tetap SATU kelompok: hasil hitungan
     pindah ke bawah supaya tombolnya tidak terdorong sempit. */
  .ts .bar-hasil{margin-left:0;flex-basis:100%;order:9}
  .ts .bar .pilih > summary .pilih-nama{max-width:92px}
}

/* Titik penunjuk menggantikan pasangan panah di pojok — ia memberi tahu
   ADA BERAPA, yang tidak pernah diberitahu oleh panah. */

/* Blok HP build 1003 DIBUANG di 1004, bukan ditimpa.

   Isinya: .pg dijadikan position:static lalu diberi order:8/9. Itu tidak
   pernah bisa bekerja — panahnya anak langsung .pita, sedangkan bintang
   dan titik ada di dalam .pita-kanan. Dua wadah flex yang berbeda; order
   tidak melintasi wadah. Hasilnya panah menclok jadi baris sendiri di
   tengah tumpukan.

   Penggantinya ada di blok 1004 di bawah: di HP panahnya dibuang. */

/* =====================================================================
   BUILD 1004 — tata letak saringan, pita di HP, tombol kembali.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SARINGAN — diberi STRUKTUR, bukan cuma dirapatkan.

   Build 1003 sudah sebaris, tapi isinya enam pil berderet tanpa kelompok:
   mata tidak tahu mana yang menyaring dan mana yang mengurutkan.

   Sekarang dua kelompok dipisah garis tipis:
     kiri  = APA yang ditampilkan  (segmented + chip)
     kanan = BAGAIMANA disusun     (produk + urutan)

   Jarak di dalam kelompok 6px, antar kelompok 16px. Selisih itu yang
   membuat kelompoknya terbaca tanpa perlu label.
   --------------------------------------------------------------------- */
.ts .bar-pisah{width:1px;height:20px;flex:none;margin:0 var(--s2b);
  background:linear-gradient(var(--line),var(--line-2),var(--line))}

/* Aturan tinggi 34px (1003) dan 36px (1004) DIBUANG di 1005, bukan
   ditimpa. Tiga definisi bertumpuk untuk hal yang sama membuat siapa pun
   yang membacanya harus menghitung sendiri mana yang menang — dan membuat
   penjaga yang mencari salah satunya selalu hijau meski yang berlaku
   sudah lain. Yang tersisa cuma blok kotak kontrol di bawah. */

/* Kotak segmented dibuat lebih ringan supaya tidak menindih pil lain.
   Di tangkapan layar build 1003 ia terbaca sebagai satu-satunya benda
   berat di baris, dan itu membuat baris terlihat berat sebelah. */
.ts .seg{background:rgba(11,24,17,.6);border-color:var(--line)}
.ts .seg button.on{box-shadow:inset 0 1px 0 rgba(31,227,116,.2)}

/* Ukuran panah dropdown ikut pindah ke blok kotak kontrol 1005. */

/* ---------------------------------------------------------------------
   SARINGAN DI HP — satu baris yang digeser, bukan melipat.

   Melipat membuat tingginya berubah-ubah mengikuti jumlah pil yang
   kebetulan tampil, dan barisnya terlihat berantakan. Digeser menyamping
   menjaga tingginya tetap dan urutannya utuh.

   Tepi kanan memudar sebagai isyarat masih ada lanjutannya — pola yang
   sama dengan carousel dokumentasi.
   --------------------------------------------------------------------- */
/* Blok "saringan digeser menyamping" dari build 1004 DIBUANG.

   Yanz menolaknya: "harus digeser-geser". Ia benar — saringan adalah alat
   navigasi; menyembunyikan separuh pilihannya di luar layar membuat orang
   tidak tahu pilihan itu ada. Penggantinya ada di blok 1005 di bawah. */

/* ---------------------------------------------------------------------
   PITA DI HP — dirapikan.

   Build 1003 mengubah panah tepi jadi position:static lalu memberinya
   order:8/9. Itu tidak pernah bisa bekerja: panahnya anak langsung .pita,
   sedangkan bintang dan titik ada di dalam .pita-kanan — dua wadah flex
   yang berbeda. Hasilnya panah menclok jadi dua baris sendiri di tengah
   tumpukan. Itu yang Yanz lihat sebagai "acak-acakan".

   Diperbaiki dengan MEMBUANG panahnya di HP. Titik penunjuk sudah bisa
   diketuk langsung dan sasaran sentuhnya diperbesar; dua panah tambahan
   di layar sempit cuma menambah benda.
   --------------------------------------------------------------------- */

/* =====================================================================
   BUILD 1005 — tinggi kontrol yang benar-benar sama, dan saringan HP
   yang tidak perlu digeser.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SATU KOTAK UNTUK SEMUA KONTROL.

   Build 1003-1004 menyetel `height` pada tiga selektor berbeda dan
   berharap hasilnya sama. Tidak sama: .seg punya padding 3px dan bingkai
   sendiri, sedangkan .chip dan summary punya padding-inline berbeda —
   tinggi yang sama tidak menghasilkan kotak yang sama, dan barisnya
   terlihat bergerigi.

   Sekarang SATU aturan mengunci kotaknya untuk semua: tinggi 38, bingkai
   1px, radius 999, dan isi ditengahkan lewat inline-flex. Yang boleh
   berbeda cuma latar dan warna teksnya.

   38 = 32 (tombol dalam .seg) + 3 + 3 (padding .seg). Angka itu yang
   membuat .seg dan tetangganya persis sama tinggi tanpa perhitungan
   terpisah.
   --------------------------------------------------------------------- */
.ts .bar-baris{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);row-gap:var(--s2)}
.ts .seg,
.ts .bar .chip,
.ts .bar .pilih > summary,
.ts .bar-reset{
  box-sizing:border-box;height:38px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:var(--t-l8);font-weight:600;
  line-height:1;white-space:nowrap;margin:0;
  border:1px solid var(--line);background:var(--ink-2);color:var(--muted)}
.ts .bar .chip,
.ts .bar .pilih > summary{padding:0 var(--s3b);gap:var(--s1b)}
.ts .seg{padding:3px;gap:2px;justify-content:flex-start}
.ts .seg button{height:30px;padding:0 var(--s3);border-radius:999px;
  display:inline-flex;align-items:center;gap:var(--s1b);white-space:nowrap;
  border:0;background:none;font:inherit;color:var(--muted);cursor:pointer}
.ts .bar-reset{padding:0 var(--s3b);border-color:transparent;background:none;color:var(--gold)}

.ts .bar .chip:hover,.ts .bar .pilih > summary:hover,.ts .seg button:hover{color:var(--paper)}
.ts .seg button.on{color:var(--green);
  background:linear-gradient(160deg,rgba(31,227,116,.2),rgba(31,227,116,.08));
  box-shadow:inset 0 1px 0 rgba(31,227,116,.2)}
.ts .bar .chip.on,.ts .bar .pilih.aktif > summary,.ts .bar .pilih[open] > summary{
  color:var(--green);border-color:rgba(31,227,116,.45);
  background:linear-gradient(160deg,rgba(31,227,116,.16),rgba(31,227,116,.06))}
.ts .seg button b,.ts .bar .chip b{opacity:.6;font-weight:600;font-variant-numeric:tabular-nums}
.ts .bar .pilih > summary .icon{width:12px;height:12px;color:var(--muted-2);margin-left:var(--s0)}
.ts .bar .pilih[open] > summary .icon,.ts .bar .pilih.aktif > summary .icon{color:inherit}
.ts .bar-pisah{height:22px;align-self:center}

/* ---------------------------------------------------------------------
   SARINGAN DI HP — MELIPAT RAPI, bukan digeser.

   Build 1004 membuatnya bisa digeser menyamping. Yanz menolaknya, dan ia
   benar: saringan itu alat navigasi. Menyembunyikan separuh pilihannya di
   luar layar membuat orang tidak tahu pilihan itu ada — persis kesalahan
   yang sama dengan menu HP yang hilang di build 876.

   Yang membuat lipatan terlihat berantakan bukan lipatannya, melainkan
   lebar tiap pil yang berbeda-beda sehingga barisnya bergerigi.
   Perbaikannya: dua kolom sama lebar lewat grid. Kotak segmented dan
   pemisah melintang penuh; empat kontrol sisanya berpasangan.
   --------------------------------------------------------------------- */
@media(max-width:820px){
  .ts .bar{padding-top:var(--s3)}
  .ts .bar-baris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s2);align-items:stretch}
  /* Segmented melintang penuh: ia saringan pokok, dan isinya 2-3 tombol
     yang harus tetap sebaris. */
  .ts .seg{grid-column:1 / -1;width:100%}
  .ts .seg button{flex:1;justify-content:center;padding:0 var(--s2)}
  /* Pemisah vertikal tidak masuk akal di susunan dua kolom. */
  .ts .bar-pisah{grid-column:1 / -1;width:100%;height:1px;margin:var(--s1) 0;
    background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
  .ts .bar .chip,.ts .bar .pilih,.ts .bar .pilih > summary{width:100%}
  .ts .bar .chip,.ts .bar .pilih > summary{justify-content:space-between;padding:0 var(--s3)}
  .ts .bar .pilih > summary .pilih-nama{overflow:hidden;text-overflow:ellipsis}
  /* Bersihkan dan hitungan hasil: satu baris terakhir, melintang penuh. */
  .ts .bar-reset{grid-column:1;justify-content:flex-start;padding-left:0}
  .ts .bar-hasil{grid-column:2;margin-left:0;text-align:right;align-self:center;
    font-size:var(--t-l9)}
  .ts .bar .pilih-isi{width:100%;min-width:0;max-height:240px}
}

/* =====================================================================
   BUILD 1006 — ulasan terpotong, ukuran teks, dan angka saringan rancu.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ULASAN TERPOTONG — penyebabnya overflow:hidden, bukan pemangkasan.

   Build 1002 memberi .rev `overflow:hidden` supaya lapis grain (::after)
   terpotong rapi mengikuti sudut membulat kartu. Wajar di tata letak
   biasa.

   Tapi kartunya hidup di dalam `columns:3`. Di konteks multikolom, elemen
   ber-overflow:hidden menjadi BATAS PEMENGGALAN: ketika isinya lebih
   tinggi daripada sisa kolom, ia tidak mengalir ke kolom berikutnya —
   ia DIPOTONG. Itu ulasan yang hilang.

   Pangkas 5 baris sudah dibuang sejak 1002, jadi terpotongnya bukan dari
   sana. Gejalanya mirip; sebabnya lain sama sekali.

   Diperbaiki dengan membuang overflow:hidden dan membuat lapis grain
   mewarisi radius kartunya sendiri — ia tidak perlu dipotong induknya
   kalau bentuknya sudah sama.
   --------------------------------------------------------------------- */
.ts .rev{overflow:visible}
.ts .rev::after{border-radius:inherit}
/* break-inside:avoid tetap dipertahankan: ia MENCEGAH kartu terbelah dua
   kolom. Yang dibuang cuma pemotongannya. */

/* ---------------------------------------------------------------------
   UKURAN TEKS ULASAN.

   Turun dari L7 (14px) ke L8 (12px). Menurut tangga huruf, isi kartu
   memang L8 — "ringkasan kartu"; L7 adalah level ANTARMUKA (tombol, tab,
   judul kartu). Selama ini isi kartu duduk setingkat dengan judulnya
   sendiri, dan itu yang membuat kartu terasa penuh.

   Jarak baris dinaikkan 1.72 -> 1.8: huruf yang lebih kecil butuh
   ruang antarbaris lebih lega untuk tetap enak dibaca.
   --------------------------------------------------------------------- */
.ts .rev-txt{font-size:var(--t-l8);line-height:1.8;margin-top:var(--s3);
  color:#CFDCD5;word-break:break-word}
/* Nama tetap L7 supaya hierarkinya benar: judul kartu di atas isinya. */
.ts .rev-who b{font-size:var(--t-l7)}
.ts .rev-reply p{font-size:var(--t-l9);line-height:1.75}

/* Kartu diberi napas lebih: isi yang lebih kecil butuh tepi yang lebih
   lega, kalau tidak ia terlihat mengambang di tengah kotak besar. */
.ts .rev{padding:var(--s4) var(--s5) var(--s5)}

/* =====================================================================
   BUILD 1007 — HP lebih ringkas, dan tombol geser hadir di HP.
   ===================================================================== */

/* ---------------------------------------------------------------------
   "11 ulasan" tidak lagi memakan barisnya sendiri di HP.

   Di layar 393px ia duduk sendirian di satu baris, rata kanan — satu baris
   penuh untuk tiga kata. Yanz benar, itu boros.

   TIDAK dibuang seluruhnya: angka itu satu-satunya umpan balik bahwa
   saringan sedang bekerja. Dibuang total, orang menyaring lalu tidak tahu
   apakah daftarnya memang tinggal segitu atau halamannya rusak.

   Jalan tengahnya: sembunyi selama tidak ada saringan aktif, muncul begitu
   ada. Kelas .ada-saring dipasang JS di elemen .bar yang sama dengan yang
   memunculkan tombol Bersihkan.
   --------------------------------------------------------------------- */
@media(max-width:820px){
  .ts .bar-hasil{display:none}
  .ts .bar.ada-saring .bar-hasil{display:block;grid-column:2;margin-left:0;
    text-align:right;align-self:center;font-size:var(--t-l9)}
}

/* ---------------------------------------------------------------------
   TOMBOL GESER DI HP.

   Sebelumnya disembunyikan di kedua tempat, dengan alasan "jari bisa
   menggeser sendiri". Alasan itu keliru: geser hanya diketahui oleh yang
   sudah tahu ada yang bisa digeser. Panah adalah tandanya.

   Ukuran 34px, bukan 38px seperti desktop: di layar sempit ia menumpang di
   atas foto, dan yang lebih besar menutupi terlalu banyak.
   --------------------------------------------------------------------- */
@media(max-width:560px){
  /* Dokumentasi: aturan lama menyembunyikannya di bawah 560px. Dikembalikan,
     tapi ditarik MASUK ke dalam tepi rel — di luar tepi (-14px) ia terpotong
     oleh tepi layar di HP. */
  .ts .doc-nav{display:grid;width:34px;height:34px;font-size:var(--t-l6)}
  .ts .doc-nav.prev{left:2px}
  .ts .doc-nav.next{right:2px}
}
/* display:contents DIBUANG di build 1009 bersama pembungkusnya.

   Ia dipakai agar .pita-geser tidak menambah kotak di desktop. Safari
   menangani display:contents dengan buruk, dan panahnya pindah tempat di
   sana. Panah kini anak langsung .pita, jadi tidak ada yang perlu
   dinetralkan. */

/* =====================================================================
   BUILD 1009 — glitch hover kartu, dan panah pita di HP tanpa pembungkus.
   ===================================================================== */

/* ---------------------------------------------------------------------
   GLITCH SAAT KURSOR MELEWATI KARTU.

   Penyebabnya gabungan dua hal yang masing-masing tidak bermasalah:

     1. .rev hidup di dalam `columns:3`
     2. .rev:hover memakai transform:translateY(-2px)
     3. .rev::after memakai mix-blend-mode:screen

   Transform pada anak multikolom membuat containing block baru dan
   memaksa kolomnya digambar ulang. Lapis blend di atasnya harus ikut
   dihitung ulang setiap frame. Hasilnya kedipan tepat saat kursor masuk
   dan keluar.

   Angkatnya dibuang. Yang tersisa perubahan bingkai dan bayangan —
   keduanya digambar tanpa menyentuh tata letak, jadi kolomnya tidak perlu
   dihitung ulang sama sekali.

   `translateZ(0)` sengaja TIDAK dipakai sebagai penambal: ia memindahkan
   kartu ke lapis komposit sendiri, dan dengan puluhan kartu itu memakan
   memori grafis tanpa alasan.
   --------------------------------------------------------------------- */
.ts .rev{transition:border-color .2s,box-shadow .2s}
.ts .rev:hover{transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.42)}

/* Kartu dokumentasi TIDAK ikut: ia berada di rel flex biasa, bukan
   multikolom, jadi angkatnya aman dan memang membantu menandai sasaran. */

/* ---------------------------------------------------------------------
   PANAH PITA DI HP — tetap di baris kaki, tanpa pembungkus.

   Aturan build 1007 menyandarkan diri pada .pita-geser yang kini sudah
   tidak ada. Ditulis ulang langsung ke .pg.

   `order` dipakai di sini, dan KALI INI ia bekerja: sejak panahnya jadi
   anak langsung .pita, ia bersaudara dengan .pita-kanan dalam satu wadah
   yang sama. Kegagalan build 1004 justru karena ia berada di wadah lain.
   --------------------------------------------------------------------- */

/* =====================================================================
   BUILD 1011 — tata letak kartu ulasan pilihan di HP.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DESKTOP: tidak berubah sedikit pun.

   .pita-siapa kini ditulis SEBELUM teks di DOM, karena di HP ia harus
   sebaris dengan foto — dan urutan itu tidak bisa dibuat dengan CSS saja.
   Di sini ia dikembalikan ke bawah teks lewat `order`.

   `order` bekerja di sini (dan gagal di build 1004) karena ketiganya
   bersaudara dalam SATU wadah flex: .pita-isi.
   --------------------------------------------------------------------- */
/* Label sudut milik HP saja. */


/* ===== CHIP BINTANG (build 1320) =====

   Bintangnya tetap EMAS walau chip tidak aktif — itu yang membuat baris
   saringan tidak monoton: sisanya abu-abu, yang bintang berwarna.

   Angka di sebelahnya tetap redup supaya labelnya yang dibaca duluan. */
/* Dilingkupi `.ts` seperti seluruh berkas ini — ada penjaga di suite yang
   menolak selektor tanpa lingkup, supaya gaya halaman ini tidak bocor ke
   halaman lain yang kebetulan memakai nama kelas sama. */
.ts .seg button.seg-btg{color:var(--gold)}
.ts .seg button.seg-btg:hover{color:var(--gold);filter:brightness(1.18)}
.ts .seg button.seg-btg b{opacity:.55;color:var(--paper);font-weight:700}
.ts .seg button.seg-btg.on{color:var(--gold);
  background:linear-gradient(160deg,rgba(227,192,107,.2),rgba(227,192,107,.08));
  box-shadow:inset 0 1px 0 rgba(227,192,107,.22)}
.ts .seg button.seg-btg.on b{opacity:.85;color:var(--gold)}


/* ============================================================
   DAFTAR PADAT (build 1321)

   Menggantikan kartu bertumpuk-kolom dengan baris bergaris.

   Kenapa: dengan kolom, ulasan yang punya foto jauh lebih tinggi daripada
   yang tidak — dan berapa pun cara menyusunnya, ruang kosongnya cuma
   berpindah tempat. Baris bergaris tidak punya tetangga di kanan-kiri, jadi
   masalah itu hilang dengan sendirinya.

   TANPA display:contents. Versi pertama memakainya untuk mengeluarkan avatar
   dari .rev-head — lalu penjaga di suite menolak, dan alasannya tercatat:
   Safari menangani display:contents dengan buruk, dan Yanz memakai Safari.

   Gantinya cara yang lebih sederhana: .rev tetap blok biasa, .rev-head tetap
   satu baris seperti aslinya, dan isi di bawahnya diberi jarak kiri supaya
   sejajar dengan nama. Tidak ada yang perlu dikeluarkan dari alirannya.

   Ditulis PALING AKHIR di berkas karena menimpa aturan kartu di atasnya —
   `columns:3`, latar panel, bayangan, padding besar. Urutan menentukan.
   ============================================================ */

.ts #revList{
  display:block !important;
  columns:auto !important;
  column-gap:0 !important;
  grid-template-columns:none !important;
  gap:0 !important;
}

/* Jarak kiri = lebar avatar + jaraknya. Satu variabel supaya kalau avatarnya
   diubah, seluruh isi ikut bergeser bersamaan. */
.ts #revList{--rev-kiri:52px}

.ts #revList .rev{
  display:block;
  margin:0;
  padding:18px 2px;
  border:0;
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:var(--line);
  border-radius:0;
  background:none;
  box-shadow:none;
  break-inside:auto;
  overflow:visible;
}
.ts #revList .rev:last-child{border-bottom:0}
.ts #revList .rev::after{display:none}
.ts #revList .rev:hover{
  border-bottom-color:var(--line);
  transform:none;
  box-shadow:none;
  background:none;
}

/* Kepala tetap seperti aslinya — avatar, nama, bintang dalam satu baris. */
.ts #revList .rev-head{gap:14px;align-items:flex-start}
.ts #revList .rev-av{width:38px;height:38px;margin-top:1px}
.ts #revList .rev-who b{font-size:var(--t-l7)}
.ts #revList .rev-who > span{font-size:var(--t-l9)}
.ts #revList .rev-star{margin-top:3px}

/* Isi di bawah kepala digeser sejajar dengan nama. */
.ts #revList .rev-st,
.ts #revList .rev-txt,
.ts #revList .rev-img,
.ts #revList .rev-reply,
.ts #revList .rev-act,
.ts #revList .rev-lagi,
.ts #revList .rev-tag{margin-left:var(--rev-kiri)}

.ts #revList .rev-txt{margin-top:7px;font-size:var(--t-l7);line-height:1.68}

/* Foto dibatasi lebarnya: di baris yang melebar penuh, foto selebar kolom
   membuat satu ulasan setinggi tiga ulasan lain. */
.ts #revList .rev-img{
  margin-top:10px;
  width:180px;
  max-width:calc(100% - var(--rev-kiri));
}
.ts #revList .rev-reply{margin-top:11px;padding:11px 13px}
.ts #revList .rev-act{margin-top:11px;padding-top:11px}

@media(max-width:820px){
  .ts #revList{--rev-kiri:45px}
  .ts #revList .rev{padding:16px 0}
  .ts #revList .rev-head{gap:11px}
  .ts #revList .rev-av{width:34px;height:34px}
  /* Di layar sempit foto boleh melebar penuh — tidak ada kolom lain yang
     ikut memanjang karenanya. */
  .ts #revList .rev-img{width:calc(100% - var(--rev-kiri))}
  .ts #revList .rev-act{flex-wrap:wrap}
  .ts #revList .rev-act .act{flex:1;min-width:0}
}


/* ===== ULASAN PILIHAN: PENANDA BARIS (build 1324) =====

   Menggantikan pita sorot. Tiga penanda yang saling menguatkan, semuanya
   di dalam baris — tidak ada kotak terpisah dan tidak ada tinggi tambahan:

     garis emas di kiri   terlihat saat menggulir cepat
     avatar emas          terlihat saat memindai daftar
     lencana "Pilihan"    terbaca saat berhenti membaca

   Latar sengaja TIDAK diberi warna: dengan daftar padat, satu baris berlatar
   di antara baris tanpa latar terlihat seperti sedang disorot kursor, bukan
   seperti ditandai. */
.ts #revList .rev.pilih{
  position:relative;
  padding-left:15px;
}
.ts #revList .rev.pilih::before{
  content:'';
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:2px;
  border-radius:9px;
  background:linear-gradient(180deg,var(--gold),rgba(227,192,107,.22));
}
.ts #revList .rev.pilih .rev-av{
  background:linear-gradient(150deg,#E2C179,#D4B25C);
  color:#3a2f10;
}

.ts .rev-pil{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:4px;
  padding:2px 8px;
  border-radius:6px;
  font-family:var(--disp);
  /* Memakai variabel tangga (--t-l10 = 9px), bukan angka lepas.

     Versi pertama menulis 9.5px — penjaga tipografi menolaknya, dan
     alasannya tercatat: pemeriksaan pernah menemukan 28 ukuran berbeda di
     seluruh CSS, 23 di antaranya pecahan. Tanpa penjaga, tangganya
     pelan-pelan ditinggalkan lagi. */
  font-size:var(--t-l10);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(227,192,107,.14);
}
.ts .rev-pil .icon{width:11px;height:11px}

@media(max-width:820px){
  .ts #revList .rev.pilih{padding-left:12px}
  .ts #revList .rev.pilih::before{top:16px;bottom:16px}
}


/* ============================================================
   BOBOT DAFTAR (build 1325)

   Daftar padat versi pertama membuang terlalu banyak sekaligus: latar,
   sudut, DAN bayangan. Yang sebenarnya jadi masalah cuma tinggi kartu yang
   tidak seragam — bukan bentuknya.

   Tiga bahan dikembalikan tanpa membawa masalah lama, karena semuanya
   berada DI DALAM baris dan tidak menambah tinggi:

     garis aksen kiri   batas tiap ulasan terlihat
     avatar besar       jangkar visual tiap baris
     foto berbobot      terasa bisa diklik

   Ditambah hierarki: nama lebih tegas, produk jadi chip hijau, tanggal
   tetap redup. Sebelumnya produk dan tanggal ditulis dalam satu warna yang
   sama, dan nama produk tenggelam.
   ============================================================ */

/* ----- garis aksen kiri ----- */
.ts #revList .rev{padding-left:15px}
.ts #revList .rev::after{
  content:'';
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:2px;
  border-radius:9px;
  background:var(--line-2);
  transition:background .16s;
  display:block;
}
.ts #revList .rev:hover::after{background:rgba(31,227,116,.5)}
/* Baris pilihan memakai garis yang sama, warna emas — jadi penanda dan
   batas dikerjakan satu elemen, bukan dua yang bisa bertumpuk. */
.ts #revList .rev.pilih::before{display:none}
.ts #revList .rev.pilih::after{
  background:linear-gradient(180deg,var(--gold),rgba(227,192,107,.22));
}

/* ----- avatar besar + cincin ----- */
.ts #revList .rev-av{
  position:relative;
  width:46px;
  height:46px;
  font-size:var(--t-l5);
}
.ts #revList .rev-av::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1px solid var(--line-2);
}
.ts #revList .rev.pilih .rev-av::after{border-color:rgba(227,192,107,.4)}

/* Jarak kiri isi menyesuaikan avatar yang membesar. */
.ts #revList{--rev-kiri:60px}

/* ----- foto berbobot ----- */
.ts #revList .rev-img{
  border-color:var(--line-2);
  box-shadow:0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .16s, transform .16s;
}
.ts #revList .rev-img:hover{
  border-color:rgba(31,227,116,.35);
  transform:translateY(-2px);
}

/* ----- hierarki kepala ----- */
.ts #revList .rev-who b{font-size:var(--t-l6);font-weight:800;letter-spacing:-.25px}
.ts .rev-meta{display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s1)}
.ts .rev-prod{
  padding:2px 8px;
  border-radius:6px;
  font-family:var(--disp);
  font-size:var(--t-l10);
  font-weight:700;
  color:var(--green);
  background:rgba(31,227,116,.1);
  border:1px solid rgba(31,227,116,.22);
  white-space:nowrap;
}
.ts .rev-tgl{font-size:var(--t-l9);color:var(--muted-2)}

@media(max-width:820px){
  .ts #revList{--rev-kiri:52px}
  .ts #revList .rev{padding-left:12px}
  .ts #revList .rev::after{top:18px;bottom:18px}
  .ts #revList .rev-av{width:40px;height:40px;font-size:var(--t-l6)}
}


/* ============================================================
   SARINGAN HP: DUA BARIS PADAT (build 1327)

   Percobaan sebelumnya membuat saringan jadi satu baris yang digeser ke
   samping. Itu memindahkan masalah, bukan menyelesaikannya: saringan yang
   berada di luar layar sama saja dengan tidak ada, karena tidak ada
   petunjuk bahwa ia masih berlanjut — dan chip yang sedang MENYALA di luar
   layar tidak memberi tahu apa pun.

   Sekarang dua baris, tanpa gulir, semuanya terlihat sekaligus:

       [ Semua 25 | ★5 24 | ★4 1 ]  [🖼3]  [👤]
       [ Semua produk  ▾ ]  [ Terbaru  ▾ ]

   Yang menghemat tingginya: label teks pada chip Foto / Dibalas / Saya
   disembunyikan di HP, disisakan ikon dan angkanya. Tiga chip berlabel
   penuh tidak muat sebaris dengan kotak segmented; tiga ikon muat.

   Labelnya tetap ADA di markup (di dalam .chip-l) — bukan dihapus — jadi
   pembaca layar tetap membacakannya, dan di desktop tetap tampil.
   ============================================================ */

@media(max-width:820px){
  .ts .bar-baris{
    display:grid !important;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:var(--s2);
    overflow:visible;
    -webkit-mask-image:none;
            mask-image:none;
  }

  /* Baris 1: kotak segmented melebar, dua chip ikon di kanannya. */
  .ts .bar-baris .seg{
    grid-column:1;
    width:auto;
    min-width:0;
  }
  .ts .bar-baris .seg button{
    flex:1;
    justify-content:center;
    padding:0 var(--s2);
    min-width:0;
  }

  /* Chip jadi ikon + angka saja. */
  .ts .bar-baris .chip{
    flex:none;
    padding:0 var(--s2b);
    gap:var(--s1);
  }
  .ts .bar-baris .chip .chip-l{display:none}

  /* Pemisah tidak perlu: baris kedua sudah memisahkan secara alami. */
  .ts .bar-pisah{display:none}

  /* Baris 2: dua dropdown berbagi lebar sama rata. */
  .ts .bar-baris .pilih{grid-row:2;width:100%}
  .ts .bar-baris .pilih:nth-of-type(1){grid-column:1 / 3}
  .ts .bar-baris .pilih:nth-of-type(2){grid-column:3 / -1}
  .ts .bar .pilih > summary{
    width:100%;
    justify-content:space-between;
    padding:0 var(--s3);
  }
  .ts .bar .pilih > summary .pilih-n{max-width:none;overflow:hidden;text-overflow:ellipsis}

  /* Hitungan dan reset turun ke baris ketiga HANYA kalau ada saringan aktif
     — saat tidak ada, keduanya tidak memakan tinggi sama sekali. */
  .ts .bar-reset{grid-row:3;grid-column:1;justify-content:flex-start;padding-left:0}
  .ts .bar.ada-saring .bar-hasil{grid-row:3;grid-column:2 / -1;text-align:right}
}