/* FRAI-PWA-V1 · pages.css — komponen khas halaman (hero, flyer, chat, match, detail, form) */

/* ============ boot ============ */
.boot{ min-height:100dvh; display:grid; place-items:center; gap:18px; background:var(--bg); }
.boot-mark{ display:flex; gap:7px; }
.boot-mark span{ width:11px; height:11px; border-radius:50%; background:var(--primary); animation:bootPulse 1.1s var(--ease) infinite; }
.boot-mark span:nth-child(2){ background:#22D3EE; animation-delay:.16s; }
.boot-mark span:nth-child(3){ background:var(--ai); animation-delay:.32s; }
.boot-text{ font-size:13px; color:var(--muted); letter-spacing:.01em; }
@keyframes bootPulse{ 0%,100%{ transform:translateY(0); opacity:.45 } 50%{ transform:translateY(-7px); opacity:1 } }
.spin{ width:30px; height:30px; margin:0 auto; border-radius:50%; border:3px solid var(--line); border-top-color:var(--primary); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ============ hero beranda ============ */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:26px 22px 24px; margin-bottom:8px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.hero-glow{
  position:absolute; inset:-40% -20% auto auto; width:520px; height:520px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(16,185,129,.22), rgba(99,102,241,.14) 45%, transparent 68%);
  filter:blur(6px);
}
.hero-body{ position:relative; z-index:2; max-width:640px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary-600); background:var(--primary-soft);
  padding:6px 11px; border-radius:var(--r-pill);
}
.hero-title{ font-size:clamp(25px,4.6vw,40px); line-height:1.14; margin:12px 0 0; letter-spacing:-.022em; }
.hero-sub{ color:var(--text-2); font-size:14.5px; line-height:1.62; margin:10px 0 0; max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
/* dua CTA sejajar sama lebar di ponsel agar tidak terlihat pincang */
@media (max-width:520px){
  .hero-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .hero-actions .btn{ justify-content:center; padding-left:10px; padding-right:10px; white-space:nowrap; }
}
.hero-meta{ display:flex; align-items:flex-start; gap:7px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--muted); }
.hero-meta svg{ flex:0 0 auto; margin-top:2px; }
.hero-meta .meta-txt{ min-width:0; }
.hero-art{ position:absolute; right:-30px; bottom:-24px; width:280px; height:230px; pointer-events:none; opacity:.9; }
.art-card{
  position:absolute; width:118px; height:150px; border-radius:16px;
  background:var(--surface-2); border:1px solid var(--line);
  box-shadow:var(--shadow); transform-origin:bottom center;
}
.art-card.a1{ right:96px; bottom:34px; transform:rotate(-13deg); background:linear-gradient(150deg,#D1FAE5,#A7F3D0); }
.art-card.a2{ right:52px; bottom:20px; transform:rotate(-2deg); background:linear-gradient(150deg,#E0E7FF,#C7D2FE); }
.art-card.a3{ right:6px; bottom:36px; transform:rotate(10deg); background:linear-gradient(150deg,#CFFAFE,#A5F3FC); }
@media (max-width:820px){ .hero-art{ display:none; } .hero{ padding:22px 18px; } }

/* ============ aksi cepat ============ */
.quick-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:720px){ .quick-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.quick-card{
  display:flex; flex-direction:column; gap:3px; padding:15px 14px;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  text-decoration:none; color:inherit; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quick-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.quick-card b{ font-size:14px; }
.quick-card small{ font-size:11.5px; color:var(--muted); }
.quick-ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  margin-bottom:8px; color:var(--primary-600); background:var(--primary-soft);
}
.quick-ico.ai{ color:var(--ai-600); background:var(--ai-soft); }

/* ============ pill event ============ */
.event-pill{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); color:inherit;
  cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  min-width:196px;
}
.event-pill b{ display:block; font-size:13.5px; }
.event-pill small{ display:block; font-size:11px; color:var(--muted); }
.event-pill.is-on{ border-color:var(--primary); background:var(--primary-soft); }
.event-pill .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

/* ============ kartu brand ============ */
.brand-card{
  display:flex; flex-direction:column; gap:9px;
  padding:14px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brand-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.brand-card-top{ display:flex; align-items:flex-start; gap:10px; }
/* Badge "Terverifikasi" selebar 116px tidak muat di kartu 2 kolom (174px);
   di layar sempit tampilkan ikon centang saja agar tidak terpotong. */
.brand-card-top .badge-ok{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:560px){
  .brand-card-top .badge-ok{ padding:5px; font-size:0; gap:0; border-radius:50%; }
  .brand-card-top .badge-ok svg{ width:13px; height:13px; }
}
.brand-card-top b{ display:block; font-size:14px; line-height:1.3; }
.brand-card-top small{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.brand-logo{
  width:42px; height:42px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center; overflow:hidden;
  background:var(--grad-ai-soft); color:var(--primary-600);
}
.brand-logo.lg{ width:64px; height:64px; border-radius:18px; }
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.brand-desc{ font-size:12.5px; color:var(--text-2); line-height:1.55; margin:0; }
.brand-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line); }
.brand-card-foot .inv{ font-size:12.5px; font-weight:700; color:var(--primary-600); font-family:var(--font-num); }
.brand-card-foot .inv b{ font-weight:850; }
.brand-card-foot .inv small{ font-family:var(--font); font-weight:600; }
.brand-card-foot .inv-kosong{ color:var(--muted); font-family:var(--font); font-weight:600; }

.badge-ok{ background:var(--primary-soft); color:var(--primary-600); }
.badge-promo{ background:var(--promo); color:var(--promo-ink); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); display:inline-block; }

/* ============ flyer ============ */
.flyer-rail{ padding-bottom:4px; }
.flyer-mini{
  flex:0 0 auto; width:156px; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flyer-mini:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.flyer-mini-img{
  aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden;
  background:var(--surface-2); color:var(--muted);
}
.flyer-mini-img img{ width:100%; height:100%; object-fit:cover; }
.flyer-mini-body{ padding:9px 10px 11px; }
.flyer-mini-body b{ font-size:12.5px; display:block; }
.flyer-mini-body small{ font-size:11px; color:var(--muted); }
/* chip event di bawah hero detail brand — pengganti section "Hadir di event"
   yang sebelumnya memakan satu blok penuh hanya untuk satu-dua event. */
.event-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.event-chip{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:7px 12px 7px 10px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:border-color var(--dur), box-shadow var(--dur);
}
.event-chip:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); }
.event-chip .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.event-chip b{ font-size:12.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.event-chip small{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:360px){ .event-chip small{ display:none; } }

/* placeholder flyer: rasio 3/4 supaya tidak jadi kotak gepeng 41px */
.flyer-big{
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
  aspect-ratio:3/4; display:grid; place-items:center; align-content:center; gap:8px;
  color:var(--muted); text-align:center; padding:20px;
}
.flyer-big img{ width:100%; height:100%; object-fit:cover; display:block; }
.flyer-big span{ font-size:12px; font-weight:650; }
@media (min-width:560px){ .flyer-big{ aspect-ratio:4/3; } }
.flyer-img{ width:100%; display:block; border-radius:var(--r-md); }
.flyer-preview{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); }
.flyer-view{ display:grid; place-items:center; min-height:280px; padding:18px; }
.flyer-view-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-top:1px solid var(--line); }
.flyer-cap{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:8px; }
.flyer-card{ display:block; }

/* ============ filter katalog ============ */
.filter-row{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar{ display:none; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip-ghost{ background:transparent; border:1px dashed var(--line-strong); color:var(--text-2); }

/* Drag bar biaya investasi: dua input range bertumpuk, jalurnya digambar sendiri
   karena <input type=range> bawaan tak punya dua pegangan. */
.dragbar-wrap{ margin:2px 0 10px; padding:10px 12px 8px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); }
.dragbar-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:700; color:var(--text-2); }
.dragbar-head b{ font-size:12.5px; color:var(--text); }
.dragbar-judul{ display:inline-flex; align-items:center; gap:6px; }
.dragbar-judul svg{ color:var(--primary-600); }
.dragbar{ position:relative; height:32px; }
.dragbar-jalur{ position:absolute; left:0; right:0; top:14px; height:4px; border-radius:var(--r-pill); background:var(--surface-3); }
.dragbar-isi{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill); background:var(--primary); }
.dragbar input[type=range]{ position:absolute; left:0; top:0; width:100%; height:32px; margin:0; background:none; -webkit-appearance:none; appearance:none; pointer-events:none; }
.dragbar input[type=range]:focus{ outline:none; }
.dragbar input[type=range]::-webkit-slider-runnable-track{ height:32px; background:none; border:none; }
.dragbar input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:20px; height:20px; margin-top:6px; border-radius:50%; background:var(--surface); border:3px solid var(--primary); box-shadow:var(--shadow); cursor:grab; }
.dragbar input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; }
.dragbar input[type=range]::-moz-range-track{ height:32px; background:none; border:none; }
.dragbar input[type=range]::-moz-range-thumb{ pointer-events:auto; width:20px; height:20px; border-radius:50%; background:var(--surface); border:3px solid var(--primary); box-shadow:var(--shadow); cursor:grab; }
.dragbar-catatan{ margin:0; font-size:11.5px; color:var(--muted); }

/* ---- tata letak filter katalog (arahan pemilik): baris 1 = cari nama +
   biaya investasi (drag bar) berdampingan; baris 2 = semua kategori & semua
   skema. Sebelumnya ketiganya satu strip yang harus digeser ke samping dan
   kotak <select>-nya melar jadi ~93px tinggi. ---- */
.kat-filterbar{ display:grid; grid-template-columns:1fr; gap:8px; overflow:visible; padding:2px 0 10px; }
.kat-filterbar .filter-atas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:8px; align-items:start; }
.kat-filterbar .searchbar{ margin-bottom:0; }
.kat-filterbar .dragbar-wrap{ margin:0; padding:8px 10px 6px; }
.kat-filterbar .dragbar-head{ font-size:11.5px; flex-wrap:wrap; row-gap:2px; }
.kat-filterbar .dragbar-judul svg{ display:none; }
.kat-filterbar .dragbar-catatan{ margin:0; }
.kat-filterbar .filter-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:0; overflow:visible; }
.kat-filterbar .filter-row .input{ width:100%; min-width:0; height:48px; min-height:48px; align-self:start; }
/* Urutkan dapat baris sendiri di layar sempit supaya teks pilihannya tidak
   terpotong jadi "Paling re…"; baru ikut sebaris kalau layarnya cukup. */
.kat-filterbar #kat-urut{ grid-column:1 / -1; }
@media (min-width:440px){
  .kat-filterbar .filter-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr); }
  .kat-filterbar #kat-urut{ grid-column:auto; }
}
.filterbar-ringkas .filter-atas{ grid-template-columns:1fr; }
.filterbar-ringkas .dragbar-catatan{ display:none; }
@media (max-width:370px){
  .kat-filterbar .filter-atas{ grid-template-columns:1fr; }
}
.link-more{ font-size:12.5px; font-weight:700; color:var(--primary-600); text-decoration:none; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }

/* ============ detail brand ============ */
.detail-hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:20px 18px; margin-bottom:6px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.detail-hero::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--aksen, var(--primary));
}
.dh-top{ display:flex; align-items:flex-start; gap:13px; }
.dh-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.dh-desc{ font-size:13.5px; line-height:1.66; color:var(--text-2); margin:12px 0 0; }
.dh-actions{ display:flex; gap:9px; margin-top:16px; }
.kv-list{ display:flex; flex-direction:column; }
/* Baris label–nilai: label di kiri (muted), nilai di kanan (tebal).
   Tanpa ini .kv mewarisi grid auto-fit 132px sehingga label dan nilai
   tampil sebagai dua kotak sejajar yang terlihat seperti kartu terpisah. */
.kv-list .kv{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.kv-list .kv:last-child{ border-bottom:0; }
.kv-list .kv > span{ font-size:12.5px; color:var(--muted); }
.kv-list .kv > b{ font-size:13px; font-weight:750; text-align:right; font-family:var(--font); letter-spacing:0; }
/* satu baris info di dalam kartu (mis. PIC) */
.kv-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.kv-row:last-of-type{ border-bottom:0; }
.kv-row > span{ font-size:12.5px; color:var(--muted); }
.kv-row > b{ font-size:13px; font-weight:750; text-align:right; }
.check-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.check-list li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--text-2); line-height:1.55; }
.check-list li svg{ flex:0 0 auto; margin-top:2px; color:var(--primary); }
.paket-grid{ display:grid; grid-template-columns:1fr; gap:11px; }
@media (min-width:700px){ .paket-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
.paket-inv{ font-family:var(--font-num); font-weight:800; color:var(--primary-600); font-size:15px; }
.doc-list{ display:flex; flex-direction:column; gap:8px; }

/* ============ gerbang / form ============ */
.gate-form{ display:flex; flex-direction:column; gap:12px; }
.otp-digit{
  width:100%; aspect-ratio:1/1.15; text-align:center;
  font-family:var(--font-num); font-size:20px; font-weight:700;
  border-radius:var(--r-md); border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.otp-digit:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.steps{ margin:0; padding-left:20px; font-size:13px; line-height:1.75; color:var(--text-2); }
.code-inline{
  font-family:var(--font-num); font-size:11.5px; line-height:1.7;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 11px; margin:8px 0 10px; word-break:break-word; color:var(--text-2);
}
.acc-body{ font-size:13px; line-height:1.68; color:var(--text-2); padding:2px 2px 12px; }

/* ============ chat ============ */
.page-chat{ display:flex; flex-direction:column; min-height:calc(100dvh - var(--topbar-h) - var(--bottombar-h) - 24px); }
.bubble p{ margin:0 0 8px; }
.bubble p:last-child{ margin-bottom:0; }
.bubble ul{ margin:6px 0; padding-left:18px; }
.msg-tools{ display:flex; align-items:center; gap:6px; margin-top:4px; padding-left:4px; }
.src{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; padding-top:8px; border-top:1px dashed var(--line); }
.src-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; text-decoration:none;
  padding:4px 9px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--line);
}
.btn-icon{ width:44px; height:44px; padding:0; display:grid; place-items:center; flex:0 0 auto; border-radius:var(--r-md); }

/* ============ match ============ */
.match-nav{ display:flex; gap:10px; margin-top:14px; }
.q-dim{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ai-600); background:var(--ai-soft);
  padding:5px 10px; border-radius:var(--r-pill); margin-bottom:9px;
}
.q-teks{ font-size:19px; line-height:1.4; margin:0 0 4px; letter-spacing:-.012em; }
.opts{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.tick{
  width:22px; height:22px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--line-strong); color:#fff; background:transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opt.sel .tick{ background:var(--primary); border-color:var(--primary); }
.bebas{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.seg-group{ display:inline-flex; gap:4px; padding:4px; border-radius:var(--r-pill); background:var(--surface-2); }
.seg-group .seg{ border:0; background:transparent; }
.seg-group .seg.on{ background:var(--surface); box-shadow:var(--shadow); }
.rh-ico{
  width:54px; height:54px; margin:0 auto 12px; border-radius:18px;
  display:grid; place-items:center; color:#fff; background:var(--grad-ai);
  box-shadow:0 10px 26px rgba(16,185,129,.28);
}
.rank-list{ display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.rank-body{ flex:1 1 auto; min-width:0; }
.rank-no{
  width:34px; height:34px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center; font-family:var(--font-num); font-weight:800; font-size:14px;
  background:var(--surface-2); color:var(--text-2);
}
.rank-card.top .rank-no{ background:var(--grad-ai); color:#fff; }
.rank-skor{ font-family:var(--font-num); font-weight:800; font-size:19px; color:var(--primary-600); flex:0 0 auto; }
.rank-skor span{ font-size:11px; font-weight:700; color:var(--muted); }
.why{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.why li{ display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--text-2); line-height:1.5; }
.why li svg{ flex:0 0 auto; margin-top:2px; color:var(--primary); }
.hasil-head{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; margin-bottom:14px; }

/* ============ lain-lain ============ */
.foot-note{
  margin-top:22px; padding:16px 2px 8px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-2);
}
.foot-note a{ color:var(--primary-600); text-decoration:none; }
.foot-space{ height:calc(var(--bottombar-h) + 18px); }
@media (min-width:1024px){ .foot-space{ height:24px; } }
.list-card{ display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.list-card .list-row{ border-radius:0; border:0; border-bottom:1px solid var(--line); }
.list-card .list-row:last-child{ border-bottom:0; }

.clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* ukuran ikon tombol */
.icon-btn.xs{ width:26px; height:26px; border-radius:8px; }
.icon-btn.sm{ width:34px; height:34px; border-radius:10px; }
.icon-btn.is-fav{ color:var(--fav); background:rgba(251,113,133,.14); }
.btn.btn-icon{ width:44px; }
.sm-only{ display:inline; }
.lg-only{ display:none; }
@media (min-width:1024px){ .sm-only{ display:none; } .lg-only{ display:inline; } }

/* ---------- Direktori peserta (logo grid) ---------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.logo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, border-color .16s ease;
}
.logo-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.logo-box {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.logo-nama { font-size: 13px; font-weight: 650; line-height: 1.25; }
.logo-kat { font-size: 11px; color: var(--muted); }

[data-theme="dark"] .logo-box { background: #f7f7f8; }

@media (max-width: 400px) {
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .logo-card { padding: 8px; border-radius: 14px; }
  .logo-nama { font-size: 12px; }
}

/* ---------- Catatan kecil di bawah konten ---------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.note svg { flex: 0 0 auto; margin-top: 2px; opacity: .8; }
.note a { color: var(--brand); text-decoration: none; font-weight: 600; }
.note a:hover { text-decoration: underline; }
.logo-link {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--brand); font-weight: 600; opacity: .9;
}
.logo-link svg { flex: 0 0 auto; }
.logo-inv {
  font-size: 10.5px; font-weight: 700; color: var(--ink);
  background: var(--brand-soft, rgba(0,0,0,.05));
  border-radius: 8px; padding: 3px 6px; margin-top: 2px;
}
.logo-card-kosong { opacity: .92; }
.logo-card-kosong .logo-box { background: var(--surface-2, rgba(0,0,0,.04)); border-style: dashed; }
.logo-inisial {
  font-size: 30px; font-weight: 800; color: var(--muted);
  letter-spacing: -1px; text-transform: uppercase;
}

/* ---------- event fokus (katalog) ---------- */
.ev-hero{
  position:relative; overflow:hidden;
  border-radius:22px; padding:22px 20px;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--aksen,#2563EB) 26%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--aksen,#2563EB) 14%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--aksen,#2563EB) 28%, var(--line));
  margin-bottom:18px;
}
.ev-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--aksen,#2563EB); background:color-mix(in srgb, var(--aksen,#2563EB) 14%, transparent);
  border-radius:999px; padding:4px 10px;
}
.ev-title{
  font-size:30px; line-height:1.05; font-weight:900; letter-spacing:-1px;
  margin:10px 0 2px;
}
.ev-full{ font-size:13px; color:var(--text-2); margin-bottom:10px; }
.ev-facts{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--text-2); }
.ev-facts span{ display:inline-flex; align-items:center; gap:5px; }
.ev-tagline{ font-size:13.5px; margin:10px 0 0; color:var(--text); font-weight:600; }
.ev-stats{ display:flex; gap:10px; margin:14px 0 12px; }
.ev-stat{
  flex:1; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:9px 12px; text-align:center;
}
.ev-stat b{ display:block; font-size:19px; font-weight:900; letter-spacing:-.5px; color:var(--aksen,#2563EB); }
.ev-stat small{ font-size:11px; color:var(--muted); }

/* event-tile: sorotan gelaran yang sedang dibuka */
.event-tile.is-fokus{ border-color:var(--primary); box-shadow:0 8px 22px -14px color-mix(in srgb,var(--primary) 60%,transparent); }
.event-tile .badge-ok{ align-self:flex-start; }
.event-pill .lock-ico{ color:var(--muted); flex:0 0 auto; }


/* ============ kartu gabungan peserta + katalog ============ */
.kartu{ position:relative; }
.kartu .kartu-nama{
  display:block; font-size:13.5px; font-weight:750; color:var(--text);
  text-decoration:none; line-height:1.3;
}
.kartu .kartu-nama:hover{ color:var(--primary-600); }
.kartu-kaki{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

.sosmed{ display:flex; align-items:center; gap:6px; }
.sos{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-2); text-decoration:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sos:hover{ background:var(--primary-soft); color:var(--primary-600); }
.sosmed.ringkas .sos{ width:26px; height:26px; border-radius:8px; }

.btn-mini{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  padding:5px 9px; border-radius:var(--r-pill); cursor:pointer;
  font-size:11.5px; font-weight:700; font-family:inherit;
  background:var(--ai-soft); color:var(--ai-600); border:1px solid transparent;
}
.btn-mini:hover{ filter:brightness(.97); }

/* centang pilih-banding di pojok kartu */
.banding-cek{ flex:0 0 auto; cursor:pointer; display:grid; place-items:center; }
.banding-cek input{ position:absolute; opacity:0; width:0; height:0; }
.banding-cek .kotak{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  border:1.5px solid var(--line-strong); background:var(--surface); color:transparent;
  transition:all var(--dur) var(--ease);
}
.banding-cek input:checked + .kotak{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.banding-cek input:focus-visible + .kotak{ outline:2px solid var(--primary); outline-offset:2px; }

/* bilah melayang pembanding */
.banding-bar{
  position:fixed; left:12px; right:12px; bottom:calc(var(--bottombar-h) + 12px);
  z-index:calc(var(--z-bottombar) - 1);
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:var(--shadow-lg); backdrop-filter:blur(12px);
}
.banding-bar .bb-jml{ font-size:12.5px; font-weight:800; color:var(--primary-600); white-space:nowrap; }
.banding-bar .bb-nama{ flex:1; min-width:0; }
@media (min-width:900px){
  .banding-bar{ left:calc(var(--sidebar-w) + 24px); right:24px; bottom:20px; }
}

/* popup flyer */
.flyer-pop img{
  display:block; width:100%; height:auto; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2);
}

/* tabel pembanding */
.banding-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px; }
.banding-tabel{ border-collapse:separate; border-spacing:0; width:100%; min-width:520px; font-size:12.5px; }
.banding-tabel thead th{
  position:sticky; top:0; z-index:1; vertical-align:top; text-align:center;
  padding:8px 8px 10px; background:var(--surface); border-bottom:1px solid var(--line);
  min-width:120px;
}
.banding-tabel thead th.aspek{
  text-align:left; min-width:104px; font-size:11.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; font-weight:700;
}
.banding-nama{ font-size:12.5px; font-weight:750; line-height:1.3; margin-bottom:6px; }
.banding-tabel tbody th{
  text-align:left; font-weight:650; color:var(--muted); font-size:12px;
  padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap;
}
.banding-tabel tbody td{
  padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top;
  color:var(--text); text-align:center;
}
.banding-tabel tbody td.lebar{ text-align:left; font-size:11.5px; color:var(--text-2); line-height:1.5; min-width:200px; }
.banding-tabel tbody td a{ color:var(--primary-600); font-weight:650; text-decoration:none; word-break:break-all; }
.banding-tabel tbody tr:last-child th,
.banding-tabel tbody tr:last-child td{ border-bottom:0; }
.banding-tabel thead th .brand-logo{ display:grid; }

/* toggle jumlah peserta ↔ semua brand di kepala hasil */
.chip-toggle{
  display:inline-flex; align-items:center; gap:5px; margin-left:auto;
  padding:5px 11px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  font-size:11.5px; font-weight:700; font-family:inherit; line-height:1.2;
}
.chip-toggle.is-on{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary-600); }
.chip-toggle:hover{ border-color:var(--primary); }

/* di layar HP: kolom aspek menempel kiri + lebar dikecilkan agar 2–3 brand muat */
@media (max-width:639px){
  .banding-tabel{ min-width:0; font-size:12px; }
  .banding-tabel thead th{ min-width:0; padding:6px 6px 8px; }
  .banding-tabel thead th.aspek{ min-width:78px; width:78px; font-size:10.5px; }
  .banding-tabel tbody th{ min-width:78px; width:78px; padding:8px 6px; font-size:11px; white-space:normal; }
  .banding-tabel tbody td{ padding:8px 6px; font-size:12px; }
  .banding-tabel tbody td.lebar{ min-width:0; font-size:11px; }
  .banding-tabel thead th.aspek,
  .banding-tabel tbody th{ position:sticky; left:0; background:var(--surface); z-index:2; }
  .banding-tabel thead th.aspek{ z-index:3; }
  .banding-tabel thead th .brand-logo{ width:26px; height:26px; }
  .banding-tabel thead th b{ font-size:11px; line-height:1.25; display:block; }
}

/* kartu brand butuh lebih banyak isi (logo, nama, kategori, deskripsi,
   sosmed, flyer, investasi) — dua kolom di 390px membuat semuanya terpotong,
   jadi satu kolom di HP lalu melebar bertahap. */
.grid-cards.grid-kartu{ grid-template-columns:1fr; gap:10px; }
@media (min-width:560px){ .grid-cards.grid-kartu{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:900px){ .grid-cards.grid-kartu{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1280px){ .grid-cards.grid-kartu{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* kartu versi satu kolom: logo & teks sejajar, kaki kartu tidak berdesakan */
.grid-kartu .kartu .brand-card-top{ gap:10px; }
.grid-kartu .kartu .kartu-nama{ font-size:14.5px; }
.grid-kartu .kartu .brand-desc{ font-size:12.5px; line-height:1.5; }

/* ruang bawah supaya bilah "Bandingkan" tidak menutupi kartu terakhir */
.page:has(.banding-bar) .foot-space{ height:calc(var(--bottombar-h) + 84px); }


/* ===== FRAI · label skema (waralaba/kemitraan), radius, flyer wall, uji ketahanan ===== */
.kartu-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; }
.kartu-tags > span{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:999px; font-size:11px; font-weight:750; letter-spacing:.01em; white-space:nowrap; }
.badge-waralaba{ background:var(--primary-soft); color:var(--primary-600); border:1px solid var(--primary); }
.badge-kemitraan{ background:rgba(245,158,11,.14); color:#B45309; border:1px solid rgba(245,158,11,.45); }
.badge-netral{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.badge-radius{ background:rgba(16,185,129,.13); color:#047857; border:1px solid rgba(16,185,129,.4); }
.badge-basi{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; }
@media (prefers-color-scheme:dark){
  .badge-kemitraan{ color:#FCD34D; } .badge-radius{ color:#6EE7B7; }
}

/* flyer wall: flyer tampil langsung di dalam kartu, bisa diketuk untuk memperbesar */
.kartu-flyer{ display:block; width:100%; padding:0; margin:0 0 8px; cursor:zoom-in;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); aspect-ratio:2/1; }
.kartu-flyer img{ width:100%; height:100%; object-fit:cover; display:block; }
.kartu-flyer-kosong{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; height:100%; color:var(--muted); font-size:11.5px; }
.kartu-flyer-kosong b{ font-size:12.5px; font-weight:750; }
.kartu-flyer-kosong small{ font-size:10.5px; }

/* ringkasan uji ketahanan di kartu */
  padding:7px 9px; margin:0 0 8px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line); line-height:1.45; }

/* panel uji ketahanan di halaman brand */
  padding:7px 9px; border-radius:var(--r-md); border:1px solid transparent; }

/* daftar pertanyaan wajib */
.ask-list{ padding:11px 13px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); }
.ask-title{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; margin-bottom:6px; }
.ask-list ol{ margin:0; padding-left:18px; display:grid; gap:5px; }
.ask-list li{ font-size:12px; line-height:1.5; }

  grid-template-columns:1fr; text-align:left; }
  background:var(--surface); color:var(--text); font-family:var(--font-num); font-size:13px; }
.badge-warn{ background:rgba(245,158,11,.16); color:#B45309; border:1px solid rgba(245,158,11,.5); }
@media (prefers-color-scheme:dark){ .badge-warn{ color:#FCD34D; } }

/* ================= denah pameran (modules/denah) ================= */
.dhn-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dhn-cari{ flex:1 1 200px; display:flex; align-items:center; gap:8px; padding:0 12px; height:42px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); color:var(--muted); }
.dhn-cari input{ flex:1; min-width:0; border:0; background:transparent; color:var(--text);
  font:inherit; font-size:14px; height:100%; outline:none; }
.dhn-zoom{ display:flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:2px 4px; }
.dhn-zoom span{ font-size:11.5px; font-weight:700; color:var(--muted); min-width:40px; text-align:center;
  font-family:var(--font-num); }
.dhn-wrap{ position:relative; overflow:auto; max-height:74vh; border:1px solid var(--line);
  border-radius:var(--r-lg); background:#fff; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.dhn-stage{ position:relative; width:100%; line-height:0; }
.dhn-stage img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.dhn-pin{ position:absolute; width:calc(8px * var(--z,1)); height:calc(8px * var(--z,1));
  margin:calc(-4px * var(--z,1)) 0 0 calc(-4px * var(--z,1)); border-radius:50%;
  background:rgba(255,255,255,.75); border:1.5px solid rgba(15,23,42,.5); pointer-events:none; }
/* Pin booth. Yang punya data tenant memakai logo brand sebagai penanda peta —
   ukurannya ikut zoom (--z) supaya tetap terbaca saat diperbesar. */
.dhn-pin.is-tenant{ width:calc(11px * var(--z,1)); height:calc(11px * var(--z,1));
  margin:calc(-5.5px * var(--z,1)) 0 0 calc(-5.5px * var(--z,1));
  background:rgba(16,185,129,.85); border-color:#065F46; }
/* Ukuran pin brand mengikuti kerapatan setempat: --ps dihitung di JS (jarak
   tetangga terdekat), lalu dikali zoom. Klaster rapat mengecil, area lega besar. */
.dhn-pin.is-brand{ width:calc(var(--ps,16px) * var(--z,1)); height:calc(var(--ps,16px) * var(--z,1));
  margin-top:calc(-0.5 * var(--ps,16px) * var(--z,1));
  margin-left:calc(-0.5 * var(--ps,16px) * var(--z,1));
  display:grid; place-items:center; padding:calc(1.5px * var(--z,1));
  background:#fff; border:1px solid rgba(15,23,42,.4); border-radius:50%;
  box-shadow:0 0 0 calc(1.6px * var(--z,1)) rgba(255,255,255,.95), 0 1px 3px rgba(15,23,42,.35); }
.dhn-pin.is-brand img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.dhn-pin.is-sel{ background:#F97316; border-color:#9A3412; z-index:4;
  box-shadow:0 0 0 calc(4px * var(--z,1)) rgba(249,115,22,.35); }
.dhn-pin.is-brand.is-sel{ background:#fff; border-color:#C2410C; z-index:4;
  box-shadow:0 0 0 calc(3.5px * var(--z,1)) rgba(249,115,22,.5), 0 1px 3px rgba(15,23,42,.35); }
.dhn-pin i{ display:none; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:3px; font-style:normal; font-size:10px; font-weight:800; line-height:1.25;
  color:#0F172A; background:rgba(255,255,255,.9); border-radius:3px; padding:0 3px;
  white-space:nowrap; box-shadow:0 1px 2px rgba(15,23,42,.2); }
.dhn-stage.zn .dhn-pin i{ display:block; }
.dhn-legenda{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:8px 0 2px; }
.dhn-legenda .dot{ width:10px; height:10px; border-radius:3px; display:inline-block;
  vertical-align:-1px; margin-right:4px; }
.dhn-legenda .dot-tenant{ background:#10B981; border:1px solid #065F46; border-radius:50%; }
.dhn-legenda .dot-brand{ background:#fff; border:1px solid rgba(15,23,42,.4); border-radius:50%; }
.dhn-legenda .dot-kosong{ background:#fff; border:1px solid rgba(15,23,42,.55); border-radius:50%; }
.dhn-hit{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; margin-bottom:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--text); font:inherit; cursor:pointer; }
.dhn-hit:hover{ border-color:var(--primary); }
.dhn-sheet-head{ display:flex; gap:12px; align-items:center; }
.dhn-nama{ margin:0; font-size:16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dhn-tags{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.dhn-fakta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 0; padding:0; }
.dhn-fakta div{ background:var(--surface-2); border-radius:var(--r-md); padding:8px 10px; }
.dhn-fakta dt{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.dhn-fakta dd{ margin:3px 0 0; font-size:13px; font-weight:700; }
.dhn-aksi{ display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; }
@media (max-width:520px){ .dhn-wrap{ max-height:64vh; } .dhn-fakta{ grid-template-columns:1fr; } }

/* ================= popup iklan (lib/ads.js) ================= */
.ads-box{ display:grid; gap:10px; }
.ads-img{ width:100%; max-height:190px; object-fit:contain; background:var(--surface-2);
  border-radius:var(--r-md); padding:10px; }
.ads-judul{ margin:0; font-size:17px; }
.ads-isi{ margin:0; font-size:13.5px; color:var(--text-2); }
.ads-poin{ margin:0; padding-left:18px; font-size:13px; color:var(--text-2); display:grid; gap:4px; list-style:disc; }
.ads-aksi{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.ads-catatan{ margin:2px 0 0; font-size:11px; color:var(--muted); }
.ads-img--potret{ max-height:min(42vh, 360px); }
/* Tablet/desktop: popup iklan harus memuat gambar + teks + tombol tanpa perlu
   digeser — kalau gambarnya terlalu tinggi, sisa isi tenggelam di bawah lipatan. */
@media (min-width:640px){
  .ads-img--potret{ max-height:min(34vh, 320px); }
  .sheet-body .ads-box{ max-height:calc(92vh - 120px); overflow:auto; }
}

/* ================= mode denah di dalam halaman event ================= */
/* Halaman event (#/katalog/<slug>) punya dua mode: katalog brand atau denah
   booth. Saat mode denah aktif, peta tampil di atas dan katalog brand tetap
   ada di bawahnya — jadi pengunjung bisa lihat peta lalu lanjut baca brand. */
.kat-mode{ display:flex; gap:6px; margin:0 0 12px; width:100%; }
.kat-mode .seg{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:700; padding:8px 10px; }
.kat-mode .seg svg{ width:15px; height:15px; }
#dhn-host{ margin:0 0 14px; padding:12px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); }
#dhn-host .dhn-wrap{ max-height:62vh; }
#dhn-host .foot-space{ display:none; }
@media (max-width:520px){ #dhn-host{ padding:10px; } #dhn-host .dhn-wrap{ max-height:58vh; } }
/* Sembunyikan filter berat saat mode denah supaya peta langsung terlihat. */
.filterbar-ringkas .filter-row{ display:none; }
.filterbar-ringkas .dragbar-wrap{ display:none; }
.badge-denah{ background:rgba(16,185,129,.14); color:#065F46; border:1px solid rgba(16,185,129,.4); }
.kartu.is-sorot{ outline:2px solid var(--primary); outline-offset:3px;
  box-shadow:0 14px 34px rgba(37,99,235,.26); }

/* ================= Tanya AI: kompak, input selalu terlihat ================= */
/* Keluhan: begitu halaman dibuka, kotak chat ada di bawah lipatan layar dan
   harus di-scroll. Sekarang tinggi halaman dipatok ke viewport, head+scope
   dipadatkan, dan log chat yang menggulung sendiri — input selalu kelihatan. */
.page-chat{
  height:calc(100dvh - var(--topbar-h) - var(--bottombar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px);
  min-height:0; overflow:hidden; padding-top:12px;
}
.page-chat .page-head{ margin:0 0 8px; }
.page-chat .page-head h1{ font-size:21px; }
.page-chat .page-head .sub{ display:none; }
.page-chat .chat-scope{ margin-bottom:8px; }
.page-chat .chat-wrap{ height:auto; flex:1; min-height:0; }
.page-chat .chat-log{ padding-bottom:6px; }
.page-chat .suggests{ padding-bottom:6px; }
.page-chat .foot-space{ display:none; }
@media (min-width:1024px){
  .page-chat{ height:calc(100dvh - var(--topbar-h) - 46px); }
  .page-chat .page-head .sub{ display:block; }
}

/* ---------- katalog brand (satu brosur, banyak halaman) ---------- */
.kat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:560px){ .kat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.kat-kartu{
  position:relative; padding:0; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--surface-2); aspect-ratio:905/1280; cursor:zoom-in;
}
.kat-kartu img{ display:block; width:100%; height:100%; object-fit:cover; }
.kat-kartu-no{
  position:absolute; left:7px; bottom:7px; padding:2px 8px; border-radius:999px;
  background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700;
}
.kat-cover{
  display:block; width:100%; max-width:340px; margin:0 auto; padding:0; cursor:zoom-in;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); overflow:hidden;
}
.kat-cover img{ display:block; width:100%; height:auto; }
.kat-pop{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); }
.kat-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.kat-track::-webkit-scrollbar{ display:none; }
.kat-page{ flex:0 0 100%; scroll-snap-align:center; margin:0; padding:8px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.kat-page img{
  display:block; width:auto; max-width:100%; max-height:64vh; object-fit:contain;
  border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow);
}
.kat-page figcaption{ font-size:11px; color:var(--muted); text-align:center; }
.kat-bar{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 8px; }