/* Token warna & dasar bersama landing + terminal QUADLUX */
:root{
  --bg:#000; --bg-1:#060607; --panel:#0b0b0d; --panel-2:#111114;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.22);
  --ink:#f5f5f6; --ink-2:#a3a3ab; --ink-3:#6c6c75; --ink-4:#45454c;
  --up:#2fd39a; --up-bg:rgba(47,211,154,.1); --down:#ff5c6c; --down-bg:rgba(255,92,108,.1);
  --amber:#f2b453; --amber-bg:rgba(242,180,83,.1);
  --r:10px; --r-sm:7px;
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
::selection{background:rgba(255,255,255,.18)}

/* tombol */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-weight:550;font-size:14px;letter-spacing:-.005em;transition:background .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn-primary{background:#fff;color:#000}
.btn-primary:hover{background:#e6e6e8}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.03)}
.btn-sm{height:32px;padding:0 13px;font-size:13px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500;font-size:14px;transition:color .2s}
.link-arrow:hover{color:var(--ink)}
.link-arrow svg{transition:transform .2s}.link-arrow:hover svg{transform:translateX(2px)}

/* logo */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{width:22px;height:22px}
.brand b{font-weight:600;font-size:13px;letter-spacing:.2em}

/* pil status */
.pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;color:var(--ink-2);background:rgba(255,255,255,.02)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.dot.live{background:var(--up);box-shadow:0 0 0 0 rgba(47,211,154,.5);animation:ping 2s infinite}
.dot.warn{background:var(--amber)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,211,154,.45)}70%{box-shadow:0 0 0 7px rgba(47,211,154,0)}100%{box-shadow:0 0 0 0 rgba(47,211,154,0)}}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11px;font-weight:550;letter-spacing:.02em;background:rgba(255,255,255,.06);color:var(--ink-2);white-space:nowrap}
.tag.up{background:var(--up-bg);color:var(--up)} .tag.down{background:var(--down-bg);color:var(--down)} .tag.amber{background:var(--amber-bg);color:var(--amber)}

/* angka berkedip saat berubah */
.flash-up{animation:fu .6s ease-out}.flash-down{animation:fd .6s ease-out}
@keyframes fu{0%{color:var(--up)}100%{}}@keyframes fd{0%{color:var(--down)}100%{}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}