:root{--red:#d6001c;--bg:#fff;--text:#111;}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;background:#fafafa;color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{background:var(--red);color:#fff;position:sticky;top:0;z-index:50}
.topbar .row{display:flex;gap:12px;align-items:center;padding:12px 16px}
.brand{font-weight:800;letter-spacing:.2px}
.search{flex:1}
.search input{width:100%;padding:10px 12px;border-radius:10px;border:none}
.btn{display:inline-block;padding:10px 12px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.card img{width:100%;height:160px;object-fit:cover;background:#f3f3f3}
.card .p{padding:10px}
.price{color:var(--red);font-weight:800}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#ffe5e8;color:var(--red);font-size:12px;font-weight:700}
.banner{border-radius:14px;overflow:hidden;border:1px solid #eee;background:#fff}
.banner img{width:100%;height:180px;object-fit:cover}
.flash{padding:10px 12px;border-radius:12px;margin:12px 0}
.flash.ok{background:#e8fff1;border:1px solid #b8f3cf}
.flash.err{background:#ffeef0;border:1px solid #ffd0d6}
.form{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px}
.form input,.form textarea,.form select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #ddd;margin:6px 0}
.form textarea{min-height:120px}
.nav{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.small{font-size:12px;color:#666}
.footer{padding:30px 0;color:#777}
.chat-widget{position:fixed;right:16px;bottom:16px;width:320px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);display:none;z-index:60}
.chat-header{background:var(--red);color:#fff;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}
.chat-body{height:260px;overflow:auto;padding:10px}
.chat-msg{margin:6px 0;padding:8px 10px;border-radius:12px;max-width:85%}
.chat-msg.me{background:#ffe5e8;margin-left:auto}
.chat-msg.other{background:#f3f3f3}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid #eee}
.chat-input input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid #ddd}
/* =========================
   TOPBAR PATCH (Beranda)
   Tempelkan ke paling bawah /assets/css/app.css
   ========================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--red);
  padding: 12px 0;
}
.topbar .row{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 0 14px;
}
.topbar .brand{
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;              /* ← ganti jadi putih */
  text-decoration:none;
  white-space:nowrap;
  font-size: 22px;
}
.topbar form.search{
  flex:1;
  min-width: 0;
 
}
.topbar form.search input{
  width:100%;
  height: 44px;
  border-radius: 14px;
  border: 0;
  padding: 0 14px;
  outline: none;
  box-sizing: border-box;
  
}
.topbar .btn{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;              /* ← ganti jadi putih */
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
}
.topbar .btn:hover{ background: rgba(255,255,255,.16); }
.topbar .btn.red{ background: #fff; color: var(--brand-red, #d6001c); border-color:#fff; }

@media (max-width: 420px){
  .topbar .btn.hide-xs{ display:none; }
  .topbar .brand{ font-size: 20px; }
}

/* ===== mobile lock patch ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{
  touch-action:pan-y manipulation;
  -webkit-text-size-adjust:100%;
}
.site, .mobile-site, .container, .mobile-container,
.topbar, .mobile-topbar, .mobile-search,
.chat-widget, .mobile-bottom-nav{
  max-width:100%;
}
img, video, canvas, svg, iframe{
  max-width:100%;
  height:auto;
}


/* ===== CSPLUS mobile anti-geser fix ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{
  position:relative;
  -webkit-text-size-adjust:100%;
  touch-action:pan-y manipulation;
}
.site, .mobile-site, .container, .mobile-container{
  max-width:100%;
  overflow-x:hidden;
}
img, video, canvas, svg, iframe{
  max-width:100%;
  height:auto;
}
.chat-widget{
  left:16px;
  right:16px;
  width:auto;
  max-width:none;
  box-sizing:border-box;
}