/* Pita demo + toast, diselaraskan ke palet Panel Taupe. Tiap demo tetap memakai gaya merek fiktifnya di bawah pita. */
.demo-bar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  min-height: 48px; padding: 6px 16px; background: #5E5148; color: #F4EFE8;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.3;
}
.demo-bar a { color: #F4EFE8; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.demo-bar .demo-back { gap: .3em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.demo-bar .demo-label { flex: 1; min-width: 180px; }
.demo-bar .demo-label b { white-space: nowrap; background: #F4EFE8; color: #2B2019; padding: 2px 10px; border-radius: 999px; margin-right: 8px; }
.demo-bar .demo-cta { background: #E6DCCF; color: #2B2019; padding: 0 18px; border-radius: 999px; white-space: nowrap; }
.demo-bar .demo-cta:hover { background: #F4EFE8; }
.demo-bar a:focus-visible { outline: 3px solid #F4EFE8; outline-offset: 2px; }

.demo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 1100;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px;
  background: #2B2019; color: #F4EFE8; font: 700 16px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(43, 32, 25, .3); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Font pita demo (sebelumnya tidak termuat di demo mandiri, jadi tampil font cadangan) */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-700.woff2") format("woff2"); }
@media (max-width: 599px) {
  .demo-bar { gap: 0 12px; min-height: 52px; }
  .demo-bar .demo-by, .demo-bar .demo-cta { display: none; }
  .demo-bar .demo-bk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .demo-bar .demo-label b { margin-right: 0; }
  .demo-bar .demo-label { min-width: 0; flex: 1 1 0; }
}