/* frontend/css/sysinfo.css
 * Section "Informasi Sistem" (live) di landing page. Mengikuti token & gaya theme.css
 * (kartu 2.5px + shadow keras, aksen kuning, tanpa emoji; ikon dari icons.js).
 */
.sys-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sys-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--success); animation: sys-pulse 1.4s ease-in-out infinite; }
.sys-live.is-off .sys-dot { background: var(--red); animation: none; }
.sys-live.is-wait .sys-dot { background: var(--chip-bg); animation: none; }
@keyframes sys-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

.sys-grid { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sys-grid { grid-template-columns: 1fr 1fr; } }

.sys-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--card-bg); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 22px; min-width: 0; }
.sys-head { display: flex; align-items: center; gap: 12px; }
.sys-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; }
.sys-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(26px, 5vw, 32px); line-height: 1.1; overflow-wrap: anywhere; }
.sys-value small { font-size: 0.55em; font-weight: 600; opacity: 0.6; }
.sys-sub { font-size: 13px; opacity: 0.62; line-height: 1.4; }

.sys-bar { height: 16px; border: 2.25px solid var(--ink); border-radius: 999px; background: var(--field-bg); overflow: hidden; }
.sys-fill { height: 100%; width: 0; background: var(--accent); border-right: 2.25px solid var(--ink); transition: width 0.9s linear, background-color 0.3s ease; }
.sys-fill.is-warn { background: var(--pink); }
.sys-fill.is-crit { background: var(--red); }
.sys-fill[style*="width: 0%"], .sys-fill[style*="width:0%"] { border-right-width: 0; }

.sys-mini { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: 1fr 1fr; }
.sys-mini .sys-card.wide { grid-column: 1 / -1; }
.sys-mini .sys-value { font-size: clamp(22px, 4.6vw, 28px); margin-top: auto; }
@media (min-width: 760px) { .sys-mini { grid-template-columns: repeat(3, 1fr); } .sys-mini .sys-card.wide { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) { .sys-dot { animation: none; } .sys-fill { transition: none; } }