/* Pita DEMO bersama (R28). Gaya CISA (gelap + oranye bata), terpisah dari desain usaha contoh di bawahnya. */
.demo-bar { position: sticky; top: 0; z-index: 1000; background: #1C1917; color: #FAFAF9; font: 500 13px/1.4 "Inter", "Segoe UI", system-ui, sans-serif; }
.demo-bar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; max-width: 1200px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-left, 0px)); }
.demo-bar__txt { margin: 0; }
.demo-bar__txt b { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 99px; background: #B85428; font: 600 11px/1.6 "JetBrains Mono", Consolas, monospace; letter-spacing: .08em; }
.demo-bar__sub { color: #D6D3D1; }
.demo-bar__act { display: flex; gap: 8px; }
.demo-bar a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; color: #FAFAF9; text-decoration: none; font-weight: 600; }
.demo-bar__back, .demo-bar__feat { border: 1px solid #57534E; }
.demo-bar__feat { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 6px; background: transparent; color: #FAFAF9; font: 600 13px/1 "Inter", "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.demo-bar__feat::after { content: "▾"; font-size: 10px; }
.demo-bar__feat[aria-expanded="true"] { background: #292524; }
.demo-bar__feat[aria-expanded="true"]::after { content: "▴"; }
.demo-feats { border-top: 1px solid #44403C; background: #292524; }
.demo-feats[hidden] { display: none; }
.demo-feats ul { display: grid; gap: 10px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); max-width: 1200px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-left, 0px)); list-style: none; }
.demo-feats li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.demo-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #E07C53; font-weight: 700; }
.demo-feats b { font-weight: 600; } .demo-feats span { color: #D6D3D1; font-weight: 400; font-size: 12.5px; }
.demo-bar__wa { background: #B85428; }
.demo-bar a:focus-visible, .demo-tip button:focus-visible, .demo-tip a:focus-visible { outline: 2px solid #E07C53; outline-offset: 2px; }
.demo-bar a, .demo-bar__feat { white-space: nowrap; }
.demo-s { display: none; }
@media (max-width: 640px) {
  .demo-bar__sub { display: none; }
  .demo-l { display: none; } .demo-s { display: inline; }
  .demo-bar__in { gap: 6px 10px; padding-block: 6px; }
  .demo-bar a, .demo-bar__feat { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
}

.demo-tip { position: fixed; z-index: 1001; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(92vw, 440px);
  padding: 16px 18px; border-radius: 12px; background: #1C1917; color: #FAFAF9; box-shadow: 0 20px 40px -12px rgba(0,0,0,.5); font: 400 14px/1.55 "Inter", "Segoe UI", system-ui, sans-serif; }
.demo-tip[hidden] { display: none; }
.demo-tip__txt { margin: 0 0 12px; }
.demo-tip__act { display: flex; gap: 8px; }
.demo-tip__wa, .demo-tip__close { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 8px; font: 600 14px "Inter", system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.demo-tip__wa { background: #B85428; color: #fff; border: 0; }
.demo-tip__close { background: transparent; color: #FAFAF9; border: 1px solid #57534E; }