/* Modal "Lihat Demo": pratinjau tema di dalam bingkai perangkat (mobile / tablet / desktop) */
.demo-modal .modal-content { background: #0b0b0d; border: 1px solid rgba(212, 175, 55, .35); height: 100%; }
.demo-modal .modal-header { gap: 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.demo-modal .modal-title { font-size: 1rem; margin-right: auto; }
.demo-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.demo-modes button { border: 0; background: transparent; color: inherit; border-radius: 999px; padding: 6px 14px; font-size: .85rem; opacity: .7; }
.demo-modes button.active { background: #d4af37; color: #1a1205; opacity: 1; font-weight: 600; }
.demo-modal .modal-body { display: grid; place-items: center; padding: 16px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #1b1b20, #0b0b0d); }
.demo-stage { position: relative; }
.demo-frame { position: absolute; top: 0; left: 0; border: 0; background: #000; transform-origin: top left; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.demo-stage[data-mode="mobile"] .demo-frame, .demo-stage[data-mode="tablet"] .demo-frame { border: 8px solid #26262b; border-radius: 28px; box-sizing: content-box; }
.demo-stage[data-mode="desktop"] .demo-frame { border-radius: 6px; }
.demo-size { font-size: .75rem; opacity: .6; }