/* ============================================================
   TERMINAL SHELL — kerangka halaman marketing.
   Konsep: setiap halaman hidup di dalam satu jendela terminal, dan
   saat dibuka menampilkan baris boot yang muncul bertahap sebelum
   isinya terlihat. Sekarang hanya dipakai landing dan whitepaper;
   login/register/topup/swap/account sudah pindah ke app.css.
   Animasi murni CSS (CSP: script-src 'self' melarang skrip inline).
   ============================================================ */
:root{
  --t-bg:#03070a; --t-green:#4dff8c; --t-green2:#b7ffd4; --t-amber:#ffd54f; --t-red:#ff9a9a;
  --t-dim:#3f7a58; --t-mut:#8fbfa4; --t-text:#d7f7e3; --t-strong:#eafff2;
  --t-line:rgba(90,255,150,.2); --t-line2:rgba(90,255,150,.42);
  --t-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;overflow-x:hidden}
body{
  min-height:100vh;min-height:100dvh;background:var(--t-bg);color:var(--t-text);
  font-family:var(--t-mono);font-size:13px;line-height:1.65;
  /* Clean flat background — the matrix grid + CRT scanline were removed so the
     terminal window itself is the only "chrome" on the page. */
  padding:14px;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---- JENDELA TERMINAL ---- */
.win{
  border:1px solid var(--t-line2);border-radius:0;overflow:hidden;
  background:rgba(3,10,7,.74);box-shadow:0 0 44px rgba(77,255,140,.08);
  min-height:calc(100dvh - 28px);display:flex;flex-direction:column;
}
.winbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:10px 15px;border-bottom:1px solid var(--t-line);
  background:rgba(6,18,12,.9);backdrop-filter:blur(8px);
}
.winbar .dots{display:flex;gap:6px;flex:0 0 auto}
.winbar .dots i{width:10px;height:10px;border-radius:50%;background:var(--t-dim);display:block}
.winbar .dots i:last-child{background:var(--t-green)}
.winbar .path{color:var(--t-mut);font-size:12px}
.winbar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.winbar .right a,.winbar .right button{
  color:var(--t-mut);font-family:inherit;font-size:11.5px;background:none;border:0;cursor:pointer}
.winbar .right a:hover,.winbar .right button:hover{color:var(--t-green)}
/* icon nav in the winbar (used by the app pages via ui-shell.js). Scoped to
   .nav-icons so the landing page's TEXT links keep their wider 14px gap. */
.winbar .right.nav-icons{gap:4px}
/* 44px touch targets: after the shortcut row was removed this bar is the only global
   nav on a phone, and two of its neighbours are money in (/topup) and money out (/swap).
   An 18px icon in 5px of padding gave 28px targets 2px apart. */
.winbar .right a.nav,.winbar .right .nav{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;border-radius:0;color:var(--t-dim)}
/* …but 44px is a TOUCH rule, and applying it everywhere made the app pages' title bar
   65px tall against the landing page's 41px — the same window wearing two different
   heights. With a mouse, precision comes from the pointer, not the target, so match the
   landing bar's own link metrics exactly and let the bar stay one height across the site. */
@media (hover:hover) and (pointer:fine){
  .winbar .right a.nav,.winbar .right .nav{min-width:30px;min-height:20px}
}
/* Current page. An underline was too heavy for a 41px bar — it sat almost against the
   icon. Instead the active glyph is brighter AND drawn with a thicker stroke, so the
   cue survives without hue (CSS beats the sprite's stroke-width presentation attribute),
   and aria-current carries it for assistive tech. */
.winbar .right a.nav.on,.winbar .right .nav.on{color:var(--t-green)}
.winbar .right .nav.on svg{stroke-width:2.6}
.winbar .right a.nav:hover{color:var(--t-green);background:rgba(90,255,150,.08)}
/* The sprite leaves stroke-width to CSS so it can be varied per state (see .nav.on). */
.ico{display:inline-block;vertical-align:middle;flex:0 0 auto;stroke-width:2}

.winbody{flex:1;padding:20px 18px 26px;display:flex;flex-direction:column;gap:14px}
.winbody > .inner{width:min(720px,100%);display:flex;flex-direction:column;gap:14px}

/* ---- BARIS BOOT (muncul bertahap) ---- */
.boot{color:var(--t-mut);font-size:12px;line-height:1.9;margin-bottom:2px}
.boot div{opacity:0;animation:bootIn .01s linear forwards}
.boot .p{color:var(--t-green)}
.boot .ok{color:var(--t-green)}
.boot .warn{color:var(--t-amber)}
.boot b{color:var(--t-green2);font-weight:500}
@keyframes bootIn{to{opacity:1}}
.boot div:nth-child(1){animation-delay:.10s}
.boot div:nth-child(2){animation-delay:.38s}
.boot div:nth-child(3){animation-delay:.62s}
.boot div:nth-child(4){animation-delay:.84s}
.cur{display:inline-block;width:8px;height:14px;background:var(--t-green);
  vertical-align:-2px;margin-left:4px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* isi halaman muncul setelah boot selesai */
.after-boot{opacity:0;animation:bootIn .01s linear forwards;animation-delay:1.02s}

/* ---- KOMPONEN UMUM ---- */
h1.t-h1{font-size:19px;font-weight:700;color:var(--t-strong);text-transform:uppercase;letter-spacing:0}
h1.t-h1::before{content:"$ ";color:var(--t-green);font-weight:400}
.t-sub{color:var(--t-mut);font-size:12px}
.t-sub::before{content:"> ";color:var(--t-dim)}
.t-sec{display:flex;align-items:center;gap:9px;color:var(--t-green);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:0 2px}
.t-sec .cmd{margin-left:auto;color:var(--t-dim);text-transform:none;letter-spacing:0;font-size:11px}
.t-note{color:var(--t-dim);font-size:11px;line-height:1.6;padding:0 2px}
.t-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--t-line);
  color:var(--t-dim);font-size:11px}
.t-foot a{color:var(--t-mut);text-decoration:underline;text-underline-offset:3px;margin:0 5px}

@media (max-width:520px){
  body{padding:8px}
  .win{min-height:calc(100dvh - 16px);border-radius:0}
  .winbody{padding:16px 14px 22px}
  /* 44px nav targets already set the bar's height — trim the padding so it doesn't grow. */
  .winbar{padding:4px 12px}
  .winbar .path{display:none}
}

/* ============================================================
   KOLOM KELUARAN — mengisi lebar di layar besar
   Isi terkunci di satu kolom sempit membuat sisi kanan menganga.
   Terminal sungguhan pun menata keluaran `ls` menjadi beberapa kolom,
   jadi di layar lebar blok perintah dibagi 2–3 kolom.
   ============================================================ */
.winbody > .inner{width:100%;max-width:none}
.cols{display:grid;grid-template-columns:1fr;gap:18px 40px}
.cols .blk{min-width:0}

@media (min-width:1000px){
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 56px}
}
@media (min-width:1560px){
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 56px}
}
/* halaman berbentuk formulir tetap satu kolom agar tidak aneh */
.winbody > .inner.form-only{max-width:60ch}

/* ============================================================
   SPLASH TERMINAL — dipakai juga oleh halaman bergaya terminal
   (landing & help) supaya perpindahan halaman seragam.
   ============================================================ */
.splash{
  visibility:visible;
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  justify-content:center;padding:26px 22px;background:#03070a;
  background-image:
    radial-gradient(90% 50% at 50% 30%,rgba(77,255,142,.08),transparent 62%),
    linear-gradient(rgba(90,255,150,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,255,150,.035) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  font-family:var(--t-mono);font-size:13px;line-height:1.9;color:var(--t-mut);
  transition:opacity .3s ease, visibility .3s ease;
}
.splash::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.4}
.splash.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-in{width:min(620px,100%);margin:0 auto;position:relative;z-index:1}
.splash-brand{color:var(--t-green);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.splash-row{color:var(--t-green);white-space:pre-wrap;word-break:break-word}
.splash-row .p{color:var(--t-dim)}
.splash-line::after{content:"";display:inline-block;width:8px;height:14px;background:var(--t-green);
  vertical-align:-2px;margin-left:3px;animation:splashBlink 1s steps(1) infinite}
@keyframes splashBlink{50%{opacity:0}}
.splash-log{margin-top:6px}
.splash-log div{color:var(--t-mut);opacity:0;animation:splashFade .18s ease forwards}
.splash-log .ok{color:var(--t-green)}
@keyframes splashFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .splash-line::after{animation:none}
  .splash-log div{animation:none;opacity:1}
}

/* Tanpa sudut membulat, selaras dengan halaman aplikasi. */
.win,.winbar,.back-btn,.run-btn,.ui-input,.ui-btn,.ui-qr-img,.sw-max,.picker{border-radius:0}
.winbar .dots i{border-radius:50% !important}