/* =====================================================================
   Pasar-RUMPI — gaya antarmuka (satu berkas, tanpa CDN, tanpa kerangka)
   Bahasa visual disalin dari mockup/index.html supaya tampilan sama persis.
   Tema RUMPI: navy #08651C · merah #D50000 (HANYA peringatan & penekanan)
   Latar #F4F8F0 · teks lembut #5F6B57 · mobile-first
   Prinsip: papan pajang + jembatan percakapan. TANPA aliran dana.
   ===================================================================== */

:root{
  --navy:#08651C;
  --navy-700:#06450F;
  --navy-50:#EAF1E4;
  --merah:#D50000;
  --merah-50:#FDECEC;
  --latar:#F4F8F0;
  --putih:#FFFFFF;
  --lembut:#5F6B57;
  --garis:#E4EBDE;
  --hijau:#0F7A55;
  --hijau-50:#E8F5F0;
  --kuning:#9A6A10;
  --kuning-50:#FBF3E2;
  --biru:#0E7C24;
  --biru-50:#E8F1E1;
  --bintang:#C8891A;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:30px;
  --bayang:0 1px 2px rgba(11,47,107,.05), 0 8px 24px rgba(11,47,107,.07);
  --bayang-kartu:0 1px 2px rgba(11,47,107,.06);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* atribut hidden harus selalu menang atas display di bawah ini */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--latar); color:var(--navy);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul{padding-left:1.1em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--navy)}

/* ---------- Kerangka aplikasi (pengganti bingkai ponsel di mockup) ---------- */
.aplikasi{
  max-width:420px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--latar);display:flex;flex-direction:column;
}
.app-kepala{
  position:sticky;top:0;z-index:20;background:var(--putih);
  padding:12px 18px 12px;border-bottom:1px solid var(--garis);
  display:flex;align-items:center;gap:10px;
}
.app-kepala .judul{font-size:16px;font-weight:700;letter-spacing:-.2px;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-kepala .kembali{font-size:22px;color:var(--lembut);line-height:1;padding:0 4px}
.layar{padding:16px 18px 24px;display:flex;flex-direction:column;gap:14px;background:var(--latar);flex:1}
.layar.putih{background:var(--putih)}

@media (min-width:460px){
  .aplikasi{border-left:1px solid var(--garis);border-right:1px solid var(--garis);box-shadow:var(--bayang)}
}

/* ---------- Komponen umum ---------- */
.kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-md);
  padding:14px;box-shadow:var(--bayang-kartu);
}
.kartu.rapat{padding:12px}
.judul-blok{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--lembut)}
.mini{font-size:12px;color:var(--lembut);line-height:1.5}
.mini-tebal{font-size:12px;font-weight:700}
.tengah{text-align:center}
.baris{display:flex;justify-content:space-between;align-items:center;gap:10px}
.baris + .baris{margin-top:8px}
.pisah{height:1px;background:var(--garis);margin:12px 0}
.angka{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.2px}
.tumpuk{display:flex;flex-direction:column;gap:9px}
.tumpuk.rapat{gap:6px}
.baris-lencana{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.tautan{text-decoration:underline;cursor:pointer}

.lencana{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.l-hijau{background:var(--hijau-50);color:var(--hijau)}
.l-biru{background:var(--biru-50);color:var(--biru)}
.l-navy{background:var(--navy-50);color:var(--navy)}
.l-kuning{background:var(--kuning-50);color:var(--kuning)}
.l-merah{background:var(--merah-50);color:var(--merah)}
.l-abu{background:#EDF2E8;color:var(--lembut)}

.tombol{
  display:block;width:100%;text-align:center;
  background:var(--navy);color:#fff;font-weight:700;font-size:14px;
  padding:13px 16px;border-radius:var(--r-sm);
}
.tombol:active{background:var(--navy-700)}
.tombol.garis{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.tombol.lembut{background:var(--navy-50);color:var(--navy)}
.tombol.kecil{padding:9px 12px;font-size:12.5px}
.tombol:disabled,.tombol[aria-disabled="true"]{background:#D8E3D2;color:#8E9A84;cursor:not-allowed;border-color:#D8E3D2}

.peringatan{
  background:var(--merah-50);border:1px solid #F3C9C9;border-radius:var(--r-sm);
  padding:11px 12px;font-size:12px;color:#B00000;line-height:1.5;
}
.peringatan b{color:var(--merah)}
.catatan{
  background:var(--navy-50);border-radius:var(--r-sm);padding:11px 12px;
  font-size:12px;color:var(--navy);line-height:1.5;
}
.catatan-kuning{
  background:var(--kuning-50);border:1px solid #EEDDB6;border-radius:var(--r-sm);
  padding:11px 12px;font-size:12px;color:#7A5408;line-height:1.5;
}

/* ---------- Pita demo di dalam layar ---------- */
.pita-demo{
  display:flex;align-items:center;gap:6px;
  background:var(--merah-50);border:1px solid #F3C9C9;color:var(--merah);
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  padding:5px 10px;border-radius:999px;align-self:flex-start;
}

/* ---------- Cip saringan ---------- */
.cip{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.cip::-webkit-scrollbar{display:none}
.cip button{
  font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;
  background:var(--putih);border:1px solid var(--garis);color:var(--lembut);white-space:nowrap;
}
.cip button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
/* daftar cip yang membungkus ke bawah (halaman kaidah) */
.cip-bungkus{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Bilah cari ---------- */
.cari{
  display:flex;align-items:center;gap:8px;background:var(--putih);
  border:1px solid var(--garis);border-radius:var(--r-sm);padding:10px 12px;
  font-size:13px;color:var(--lembut);
}
.cari span:first-child{opacity:.6}
.cari input{flex:1;border:0;outline:0;font:inherit;font-size:13px;color:var(--navy);background:transparent;min-width:0}
.cari input::placeholder{color:var(--lembut)}

/* ---------- Saringan ganda ---------- */
.saring2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.saring2 .s{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-sm);
  padding:8px 11px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:6px;
}
.saring2 .s span{color:var(--lembut);flex:0 0 auto}
.saring2 .s select{
  border:0;outline:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--navy);text-align:right;flex:1;min-width:0;
}

/* ---------- Kartu barang ---------- */
.brg{display:block;width:100%;text-align:left;padding:0;overflow:hidden}
/* Rasio dipatok 4:3 supaya tinggi kartu tetap sama, berfoto atau tidak — kalau
   tingginya ikut foto, papan jelajah jadi bergerigi. */
.brg .foto{
  aspect-ratio:4/3;display:grid;place-items:center;font-size:36px;position:relative;
  background:var(--navy-50);overflow:hidden;
}
.brg .foto .tag{position:absolute;left:9px;top:9px}
.brg .foto .tag2{position:absolute;right:9px;top:9px}
.brg .isi{padding:11px 13px 13px}
.brg h3{font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:1.35}
.brg .harga{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;margin-top:5px}
.brg .tempat{font-size:11.5px;color:var(--lembut);margin-top:3px}
.brg .kaki-kartu{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--garis);
}

/* Foto sungguhan. object-fit:cover supaya foto tegak maupun mendatar sama-sama
   mengisi bingkai 4:3 tanpa gepeng — yang terpotong hanya pinggirnya. */
.foto.ada-foto,
.foto-besar.ada-foto{background:var(--navy-50);padding:0}
.foto.ada-foto>img,
.foto-besar.ada-foto>img{width:100%;height:100%;display:block;object-fit:cover}
.foto-besar.ada-foto{overflow:hidden}

/* penanda warna per kategori — dipakai kartu yang belum berfoto */
.f-hobi{background:#E9F1E1}
.f-rumahtangga{background:#EAF6F1}
.f-elektronik{background:#EFF3EA}
.f-kendaraan{background:#FBF1E6}
.f-jasa{background:#EDF3E8}
.f-bayi{background:#FBEEF3}
.f-rumah{background:#E9F1E3}
.f-fashion{background:#F7EDF3}
.f-buku{background:#E9EFF4}
.f-lainnya{background:#EDF2E8}

/* ---------- Bintang ---------- */
.bintang{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  color:var(--navy);white-space:nowrap;
}
.bintang i{font-style:normal;color:var(--bintang);font-size:12px}
.bintang .jml{color:var(--lembut);font-weight:600}
.bintang .padam{color:#DAE5D4}
.bintang.besar{font-size:14px}
.bintang.besar i{font-size:15px}
.belum-nilai{
  font-size:11.5px;font-weight:600;color:var(--lembut);
  display:inline-flex;align-items:center;gap:4px;
}
.belum-nilai::before{content:"☆";color:#BCC9B4;font-size:12px}
.baru{font-size:10px;font-weight:700;color:var(--kuning);background:var(--kuning-50);
      padding:2px 6px;border-radius:999px;white-space:nowrap}
.nilai-besar{font-size:28px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.nilai-besar .btg{color:var(--bintang);font-size:22px}

/* ---------- Foto besar (detail) ---------- */
.foto-besar{
  height:186px;border-radius:var(--r-md);display:grid;place-items:center;font-size:62px;
  position:relative;border:1px solid var(--garis);
}
.foto-besar .hitung{
  position:absolute;right:10px;bottom:10px;background:rgba(11,47,107,.82);color:#fff;
  font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;
}
.foto-besar .catatan-foto{
  position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--lembut);
  font-size:10px;font-weight:600;padding:4px 8px;border-radius:999px;
}
/* Deret jempol di bawah foto besar — hanya muncul kalau fotonya lebih dari satu. */
.deret-foto{display:flex;gap:7px;margin-top:8px;overflow-x:auto;padding-bottom:2px}
.jempol{
  flex:0 0 auto;width:56px;height:56px;padding:0;border:2px solid var(--garis);
  border-radius:10px;overflow:hidden;background:var(--navy-50);cursor:pointer;
}
.jempol>img{width:100%;height:100%;display:block;object-fit:cover}
.jempol[aria-pressed="true"]{border-color:var(--navy)}

/* ---------- Pilih foto (layar "Pasang iklan") ---------- */
.petak-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.petak-foto:empty{display:none}
.petak{
  position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--navy-50);display:grid;place-items:center;
}
.petak>img{width:100%;height:100%;display:block;object-fit:cover}
.petak.rusak{background:var(--merah-50)}
.petak .tanda{font-size:10.5px;font-weight:700;color:var(--lembut);text-align:center;padding:0 4px}
.petak .tanda.gagal{color:var(--merah)}
.petak .utama{
  position:absolute;left:5px;bottom:5px;background:rgba(11,47,107,.82);color:#fff;
  font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:999px;
}
.petak .buang{
  position:absolute;right:4px;top:4px;width:24px;height:24px;padding:0;border:0;
  border-radius:999px;background:rgba(11,47,107,.82);color:#fff;font-size:15px;
  line-height:1;cursor:pointer;display:grid;place-items:center;
}

.harga-besar{font-size:24px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.judul-barang{font-size:16px;font-weight:700;margin-top:4px;line-height:1.35}
.isi-teks{font-size:12.5px;line-height:1.55;color:#06450F;white-space:pre-wrap}

/* ---------- Orang (avatar huruf) ---------- */
.orang{display:flex;gap:10px;align-items:center}
.wajah{
  width:40px;height:40px;border-radius:12px;background:var(--navy-50);
  display:grid;place-items:center;font-size:17px;font-weight:800;color:var(--navy);flex:0 0 auto;
}
.wajah.besar{width:52px;height:52px;border-radius:15px;font-size:22px}
.wajah.kecil{width:36px;height:36px;border-radius:10px;font-size:16px;font-weight:400}
.nama-orang{font-size:14px;font-weight:700}

/* ---------- Ulasan ---------- */
.ulasan + .ulasan{margin-top:12px;padding-top:12px;border-top:1px solid var(--garis)}
.ulasan .atas{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ulasan .nama{font-size:12.5px;font-weight:700}
.ulasan .teks{font-size:12.5px;line-height:1.5;margin-top:6px;color:#06450F}
.ulasan .balasan{
  margin-top:9px;background:var(--navy-50);border-radius:var(--r-sm);padding:9px 11px;
  font-size:12px;line-height:1.5;color:var(--navy);
}
.ulasan .balasan b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}

/* ---------- Rincian bintang ---------- */
.rincian .b{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--lembut)}
.rincian .b + .b{margin-top:5px}
.rincian .b .lbl{width:24px;font-weight:700;color:var(--navy)}
.rincian .b .g{flex:1;height:6px;border-radius:99px;background:#EDF2E8;overflow:hidden}
.rincian .b .g i{display:block;height:100%;background:var(--bintang);border-radius:99px}
.rincian .b .n{width:18px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)}

/* ---------- Penanda langkah transaksi ---------- */
.alur .l{display:flex;gap:11px;align-items:flex-start}
.alur .kiri{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:20px}
.alur .bulat{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;background:var(--hijau)}
.alur .bulat.kini{background:var(--navy)}
.alur .bulat.nanti{background:#DEE7D7;color:#86927C}
.alur .garis{width:2px;flex:1;min-height:18px;background:#E4EBDE;margin:2px 0}
.alur .kanan{padding-bottom:12px;flex:1}
.alur .kanan b{font-size:13px}
.alur .kanan span{display:block;font-size:11.5px;color:var(--lembut);line-height:1.45}
.alur .l:last-child .kanan{padding-bottom:0}

.langkah{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.langkah div{flex:1;height:4px;border-radius:99px;background:#E4EBDE}
.langkah div.isi{background:var(--navy)}

/* ---------- Formulir ---------- */
.isian label{display:block;font-size:11.5px;font-weight:600;color:var(--lembut);margin-bottom:4px}
.isian + .isian{margin-top:10px}
.isian input[type=text],.isian input[type=tel],.isian input[type=email],
.isian input[type=password],.isian textarea,.isian select{
  width:100%;font:inherit;font-size:13.5px;color:var(--navy);
  border:1px solid var(--garis);border-radius:var(--r-sm);padding:10px 11px;background:var(--putih);
}
.isian textarea{resize:none;line-height:1.5}
.isian input:focus,.isian textarea:focus,.isian select:focus{outline:2px solid var(--navy-50);border-color:var(--navy)}
.isian .bantu{font-size:11px;color:var(--lembut);margin-top:4px;line-height:1.45}
.isian .salah{font-size:11px;color:var(--merah);font-weight:600;margin-top:4px;line-height:1.45}
.isian input.salah-kolom,.isian textarea.salah-kolom{border-color:var(--merah)}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sakelar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--garis);border-radius:var(--r-sm);padding:10px 11px;background:var(--putih);
  width:100%;text-align:left}
.sakelar .knop{width:38px;height:22px;border-radius:99px;background:#D8E3D2;position:relative;flex:0 0 auto;transition:background .15s}
.sakelar .knop::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sakelar[aria-pressed="true"] .knop{background:var(--navy)}
.sakelar[aria-pressed="true"] .knop::after{left:19px}
.pernyataan{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;margin-top:10px;cursor:pointer}
.pernyataan input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--navy)}

.pilih-hasil{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pilih-hasil.tiga{grid-template-columns:repeat(3,1fr)}
.pilih-hasil button{
  border:1.5px solid var(--garis);border-radius:var(--r-sm);padding:9px 6px;font-size:12px;font-weight:700;color:var(--lembut);
}
.pilih-hasil button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-50);color:var(--navy)}

/* ---------- Kotak kode verifikasi ---------- */
.kode-bungkus{position:relative}
.kode{display:flex;gap:7px;justify-content:space-between}
.kode span{
  flex:1;aspect-ratio:1/1.15;border:1.5px solid var(--garis);border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:19px;font-weight:800;background:var(--putih);
  font-variant-numeric:tabular-nums;
}
.kode span.isi{border-color:var(--navy);background:var(--navy-50)}
/* kolom sungguhan di atas enam kotak, dibuat tembus pandang supaya papan tik tetap muncul */
.kode-isian{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;
  font-size:19px;letter-spacing:2em;background:transparent;
}
.kotak-demo{
  background:var(--merah-50);border:1.5px dashed var(--merah);border-radius:var(--r-sm);padding:11px 12px;
}
.kotak-demo .lbl{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--merah);text-transform:uppercase}
.kotak-demo .nilai{font-size:26px;font-weight:800;letter-spacing:4px;font-variant-numeric:tabular-nums;margin-top:3px;color:#B00000}
.kotak-demo .ket{font-size:11px;color:#B00000;line-height:1.45;margin-top:5px}

/* ---------- Pemilih bintang ---------- */
.pilih-bintang{display:flex;justify-content:center;gap:9px;padding:6px 0 2px}
.pilih-bintang button{font-size:34px;line-height:1;color:#DAE5D4}
.pilih-bintang button.nyala{color:var(--bintang)}
.label-bintang{text-align:center;font-size:13px;font-weight:700;min-height:20px}

/* ---------- Tab ---------- */
.tab{display:flex;gap:4px;background:#E7ECF4;padding:3px;border-radius:var(--r-sm)}
.tab button{flex:1;font-size:11.5px;font-weight:700;padding:8px 4px;border-radius:8px;color:var(--lembut)}
.tab button[aria-selected="true"]{background:var(--putih);color:var(--navy);box-shadow:var(--bayang-kartu)}
.panel{display:flex;flex-direction:column;gap:12px}

/* ---------- Laporan (panitia) ---------- */
.lapor .atas{display:flex;justify-content:space-between;align-items:flex-start;gap:9px}
.lapor h4{font-size:13.5px;font-weight:700;line-height:1.3}
.lapor .meta{font-size:11px;color:var(--lembut);margin-top:2px}
.lapor .alasan{font-size:12px;margin-top:8px;background:#F7F9FD;border-radius:8px;padding:8px 10px;line-height:1.45}
.lapor .aksi{display:flex;gap:8px;margin-top:10px}
.lapor .aksi > *{flex:1}

/* ---------- Bilah bawah ---------- */
.nav{display:flex;border-top:1px solid var(--garis);background:var(--putih);position:sticky;bottom:0;z-index:20}
.nav a{
  flex:1;text-align:center;padding:9px 4px 11px;font-size:10px;font-weight:600;
  color:var(--lembut);text-decoration:none;
}
.nav a i{display:block;font-size:17px;font-style:normal;margin-bottom:2px;opacity:.65}
.nav a.aktif{color:var(--navy)}
.nav a.aktif i{opacity:1}

/* ---------- Lembar bawah (jalur kontak, laporan, konfirmasi) ---------- */
.tirai{
  position:fixed;inset:0;z-index:40;background:rgba(11,47,107,.34);
  display:flex;align-items:flex-end;justify-content:center;
}
.lembar{
  width:100%;max-width:420px;background:var(--putih);
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:12px 18px 22px;
  max-height:86vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
}
.lembar .tarik{width:38px;height:4px;border-radius:99px;background:var(--garis);align-self:center;flex:0 0 auto}
.lembar h3{font-size:15px;font-weight:700}
.kutip{
  background:var(--latar);border:1px solid var(--garis);border-radius:var(--r-sm);
  padding:10px 11px;font-size:12.5px;line-height:1.5;color:#06450F;
}
.nomor-terbuka{
  font-size:19px;font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums;text-align:center;
}

/* ---------- Kabar sekilas ---------- */
.kabar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:72px;z-index:50;
  width:calc(100% - 36px);max-width:384px;box-shadow:var(--bayang);
}

/* ---------- Layar masuk ---------- */
.masuk-kepala{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.logo{
  width:40px;height:40px;border-radius:12px;background:var(--navy);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;flex:0 0 auto;
}
.masuk-kepala h1{font-size:20px;letter-spacing:-.4px;line-height:1.2}

/* ---------- Mode Fitur — Pasar dibuka dari dalam RUMPI (tersemat di iframe) ----------
   Di dalam RUMPI, satu-satunya bilah judul yang boleh terlihat adalah milik RUMPI.
   Kepala, menu bawah, dan tombol keluar milik Pasar disembunyikan supaya pengguna
   merasa masih berada di RUMPI — bukan berpindah ke aplikasi lain.
   Mode langsung (tanpa iframe) tidak tersentuh aturan-aturan ini. */
.mode-fitur .app-kepala{display:none}
/* Menu bawah TETAP tampil: di situ ada tab "Pasang" — satu-satunya jalan memasang barang.
   Menyembunyikannya (versi pertama) membuat pengguna bisa masuk tapi tidak bisa berjualan. */
.mode-fitur .nav{border-top:1px solid #e2e8f0}

/* Sesi di mode Fitur milik RUMPI, bukan milik Pasar: tidak ada jalan keluar sendiri. */
.mode-fitur [data-aksi="keluar"]{display:none}

/* Isi utama mengisi penuh area yang disediakan RUMPI, tanpa bingkai kolom sendiri. */
.mode-fitur .aplikasi{max-width:none;min-height:100vh;min-height:100dvh}
.mode-fitur .layar{padding-top:14px}

@media (min-width:460px){
  .mode-fitur .aplikasi{border-left:0;border-right:0;box-shadow:none}
}

/* Kabar sekilas tidak lagi perlu menyisakan ruang untuk bilah bawah yang sudah hilang. */
/* Kabar sekilas naik sedikit supaya tidak menutupi menu bawah yang kembali tampil. */
.mode-fitur .kabar{bottom:84px}

/* Penampil foto layar penuh (25 Sep 2026) */
.layar-penuh{position:fixed;inset:0;z-index:9999;background:rgba(8,12,20,.96);display:flex;
  align-items:center;justify-content:center;padding:14px;cursor:zoom-out}
.layar-penuh img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.layar-penuh .tutup-penuh{position:absolute;top:12px;right:14px;width:44px;height:44px;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.layar-penuh .petunjuk-penuh{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.72);font-size:13px}

/* =====================================================================
   WA-2 (26 Sep 2026) — nomor WhatsApp yang diisi sendiri penjual
   Palet tetap: navy #08651C · merah #D50000 · latar #F4F8F0.
   Hijau HANYA dipakai untuk ikon & garis tombol WhatsApp, karena hijau itu
   milik WhatsApp — bukan warna baru untuk pasar ini.
   ===================================================================== */
:root{ --wa-hijau:#1EA855; --wa-hijau-tua:#137C42; }

/* Tanda bulat kecil di judul kartu "WhatsApp saya" */
.tanda-wa{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:#E8F7ED;color:var(--wa-hijau);
  display:inline-grid;place-items:center;
}
.tanda-wa svg{width:15px;height:15px;display:block}
.judul-wa{display:flex;align-items:center;gap:8px}

/* Baris "Nomor tampil" sesudah nomor tersimpan (hanya 4 angka terakhir) */
.nomor-tampil{
  background:var(--navy-50);border:1px solid #D9E7D1;border-radius:var(--r-sm);
  padding:11px 12px;margin-top:10px;
}
.nomor-tampil .nilai{
  display:block;font-size:19px;font-weight:800;color:var(--navy);
  letter-spacing:.2px;font-variant-numeric:tabular-nums;margin-top:2px;
}

/* Dua tombol berjajar di halaman iklan */
.dua-tombol{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dua-tombol .tombol{padding:11px 10px;font-size:13px}

/* Tombol garis WhatsApp — bentuknya sama dengan .tombol.garis, hanya warnanya hijau */
.tombol.wa{
  background:var(--putih);color:var(--wa-hijau-tua);border:1.5px solid #30A964;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.tombol.wa:active{background:#F2FBF6}
.tombol.wa svg{width:17px;height:17px;flex:0 0 17px;display:block}

/* Kotak redup saat penjual tidak menampilkan nomornya */
.tanpa-wa{
  border:1px dashed #CED9C6;border-radius:var(--r-sm);background:#EEF2F7;
  color:#78836F;padding:11px 12px;text-align:center;font-size:12px;line-height:1.45;
}

/* Tautan "Laporkan nomor ini" — sengaja kecil dan tidak mencolok */
.lapor-nomor{
  display:block;width:max-content;margin:8px auto 0;
  color:var(--merah);font-size:11.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}

/* Daftar barang di layar panitia (26 Sep 2026).
   Sebelumnya memakai kelas .baris bersama, dan tombol "Pilih" ikut melar memenuhi baris
   sehingga daftar tampak berantakan di ponsel. Sekarang punya gaya sendiri. */
.baris-barang{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #EDF2E8}
.baris-barang-teks{flex:1 1 auto;min-width:0}
.baris-barang-teks .mini{overflow-wrap:anywhere}
.baris-barang .tombol-pilih-barang{flex:0 0 auto;width:auto;min-width:74px;margin:0;padding:8px 14px;white-space:nowrap}

/* =====================================================================
   LAPISAN POLES TAMPILAN — 3 Okt 2026 (permintaan pemilik: "lebih info grafis,
   jangan terlalu banyak teks yang membingungkan").
   Semuanya MENAMBAH/MENAJAMKAN: tidak ada kelas lama yang diubah artinya, jadi
   tata letak, alur, dan perilaku tetap sama persis.
   ===================================================================== */

/* --- Kartu: lebih tegas, sudut lebih besar, bayangan berlapis --- */
.kartu{
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(11,47,107,.05), 0 10px 28px rgba(11,47,107,.08);
  border:1px solid rgba(226,232,242,.9);
}

/* --- Harga: angka yang menonjol, seperti papan pajang --- */
.harga{font-size:19px; font-weight:800; letter-spacing:-.2px}

/* --- Label kecil: lebih ringkas supaya tidak menumpuk --- */
.mini{font-size:12.5px; line-height:1.45}
.catatan,.peringatan{border-radius:var(--r-md); font-size:12.5px; line-height:1.5; padding:10px 12px}

/* --- Chip kategori: bentuk pil yang lebih rapi & mudah ditekan --- */
.chip,.pil{border-radius:999px; padding:8px 13px; font-weight:600}

/* --- Bilah atas: ringkasan angka supaya informasi cepat ditangkap --- */
.bilah-ringkas{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-md);
  padding:9px 12px; margin:10px 0; box-shadow:var(--bayang-kartu);
}
.bilah-ringkas .angka{font-weight:800; font-size:16px; color:var(--navy)}
.bilah-ringkas .ket{font-size:12px; color:var(--lembut)}

/* --- Tombol: tekan lebih hidup --- */
.tombol{border-radius:var(--r-md); font-weight:700; letter-spacing:.1px}
.tombol:active{transform:translateY(1px)}

/* --- Tanda "wajib": jelas tapi tidak berteriak --- */
.lencana{border-radius:999px; font-weight:700; letter-spacing:.2px}