/* dev.css — programming/terminal aesthetic, scoped to body.dev (homepage only).
   themebox/ pages are untouched: they don't use the .dev class. */
body.dev{
  --bg:#0d1117;
  --surface:#161b22;
  --surface-soft:#1c2128;
  --ink:#f0f6fc;
  --text:#c9d1d9;
  --muted:#8b949e;
  --faint:#6e7681;
  --border:#30363d;
  --border-soft:#21262d;
  --green:#00ff88;
  --green-dim:#3fb950;
  --cyan:#00d4ff;
  --yellow:#d29922;
  --red:#f85149;
  --purple:#bc8cff;
  --mono:ui-monospace,'Cascadia Code','SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  background:var(--bg);
  color:var(--text);
}
body.dev ::selection{background:rgba(0,255,136,.25)}
body.dev h1,body.dev h2,body.dev h3{color:var(--ink)}
body.dev .label{
  font-family:var(--mono);
  color:var(--faint);
  letter-spacing:1.5px;
  text-transform:none;
  font-size:.82rem;
}
body.dev .section-sub{color:var(--muted)}
body.dev a{color:var(--ink)}

/* header */
body.dev header.site{
  background:rgba(13,17,23,.92);
  border-bottom:1px solid var(--border-soft);
}
body.dev .logo{color:var(--ink)}
body.dev .logo .tp{color:var(--green);font-family:var(--mono);letter-spacing:0}
body.dev nav.links a{color:var(--muted);font-family:var(--mono);font-size:.82rem}
body.dev nav.links a:hover{color:var(--green)}
body.dev .burger{border-color:var(--border);color:var(--ink);background:transparent}
@media(max-width:720px){
  body.dev nav.links{background:#0d1117;border-bottom:1px solid var(--border-soft)}
}

/* buttons */
body.dev .btn-dark{
  background:rgba(0,255,136,.08);
  border:1px solid var(--green);
  color:var(--green);
  font-family:var(--mono);
  font-weight:700;
  border-radius:8px;
  padding:.85rem 1.8rem;
  transition:all .25s ease;
}
body.dev .btn-dark:hover{background:rgba(0,255,136,.16);color:#4dffab;border-color:#4dffab;box-shadow:0 0 18px rgba(0,255,136,.25);transform:translateY(-2px)}
body.dev .btn-outline{
  background:rgba(255,255,255,.02);
  color:var(--muted);
  border:1px solid var(--border-soft);
  font-family:var(--mono);
  border-radius:8px;
  padding:.85rem 1.8rem;
  transition:all .25s ease;
}
body.dev .btn-outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* sections */
body.dev section.alt{
  background:#010409;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

/* ---------- terminal window ---------- */
.term-window{
  background:#010409;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  max-width:640px;
  margin:0 auto;
  text-align:left;
}
.term-bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem .9rem;
  background:#161b22;
  border-bottom:1px solid var(--border-soft);
}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:#f85149}
.term-bar i:nth-child(2){background:#d29922}
.term-bar i:nth-child(3){background:#3fb950}
.term-bar span{
  margin-left:.5rem;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--faint);
}
.term-body{
  padding:1.1rem 1.2rem 1.3rem;
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.8;
  min-height:220px;
}
.t-line{white-space:pre-wrap;word-break:break-word}
.t-prompt{color:var(--green);font-weight:700;margin-right:.55rem}
.t-cmd{color:var(--ink)}
.t-out{color:var(--muted);padding-left:0}
.t-out .ok{color:var(--green);font-weight:700}
.t-out .cy{color:var(--cyan)}
.t-comment{color:var(--faint);font-style:italic}
.t-cursor{
  display:inline-block;
  width:.58em;height:1.1em;
  background:var(--green);
  vertical-align:-.15em;
  margin-left:2px;
  animation:tblink 1s steps(1) infinite;
}
@keyframes tblink{50%{opacity:0}}
.term-body.typing .t-line[data-type]{opacity:0}
.term-body.typing .t-line[data-type].typed{opacity:1;transition:opacity .3s ease}
.term-body.typing .t-out{opacity:0;transform:translateY(4px)}
.term-body.typing .t-out.shown{opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease}
.term-body.typing .t-out.t-boot{opacity:0}
.term-body.typing .t-out.t-boot.shown{opacity:1;transform:none;transition:opacity .2s ease}
.term-body.typing .t-out.t-greet{opacity:0}
.term-body.typing .t-out.t-greet.shown{opacity:1;transform:none;transition:opacity .8s ease;color:var(--green);text-align:center;letter-spacing:1px}

/* hero-dev */
.hero-dev{padding:4.5rem 0 4rem;background:
  radial-gradient(600px 300px at 50% -60px,rgba(0,255,136,.07),transparent),
  var(--bg);}
body.dev .btn-hack-green,body.dev .btn-hack-cyan,body.dev .btn-hack-purple{
  font-family:var(--mono);font-weight:700;
  border-radius:8px;padding:.85rem 1.6rem;
  transition:all .25s ease;position:relative;overflow:hidden;
}
body.dev .btn-hack-green{
  background:rgba(0,255,136,.08);border:1px solid #00ff88;color:#00ff88;
  box-shadow:inset 0 0 12px rgba(0,255,136,.06);
}
body.dev .btn-hack-green:hover{
  background:rgba(0,255,136,.18);box-shadow:0 0 22px rgba(0,255,136,.35),inset 0 0 12px rgba(0,255,136,.1);
  transform:translateY(-2px);color:#4dffab;
}
body.dev .btn-hack-cyan{
  background:rgba(0,212,255,.07);border:1px solid #00d4ff;color:#00d4ff;
  box-shadow:inset 0 0 12px rgba(0,212,255,.06);
}
body.dev .btn-hack-cyan:hover{
  background:rgba(0,212,255,.16);box-shadow:0 0 22px rgba(0,212,255,.35),inset 0 0 12px rgba(0,212,255,.1);
  transform:translateY(-2px);color:#5ee6ff;
}
body.dev .btn-hack-purple{
  background:rgba(168,85,247,.07);border:1px solid #a855f7;color:#a855f7;
  box-shadow:inset 0 0 12px rgba(168,85,247,.06);cursor:pointer;
}
body.dev .btn-hack-purple:hover{
  background:rgba(168,85,247,.16);box-shadow:0 0 22px rgba(168,85,247,.35),inset 0 0 12px rgba(168,85,247,.1);
  transform:translateY(-2px);color:#c084fc;
}
.hero-dev .hero-cta{display:flex;gap:.8rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.hero-dev .hero-cta .btn{white-space:nowrap;text-align:center}
@media(max-width:600px){
  .hero-dev .hero-cta{flex-direction:column;align-items:stretch;max-width:320px;margin:2rem auto 0}
}
#term-sub-canvas{display:block;margin:1.6rem auto 0}
.tagline-box{
  max-width:420px;margin:1.2rem auto 0;padding:.6rem .9rem;
  border:1px solid var(--border-soft);border-radius:8px;
  background:rgba(13,17,23,.7);
  box-shadow:inset 0 0 20px rgba(0,255,136,.04);
  font-family:var(--mono);font-size:.72rem;color:var(--faint);
  text-align:center;letter-spacing:.4px;min-height:2.2em;
  display:flex;align-items:center;justify-content:center;gap:2px;
}
.tagline-text{color:var(--muted)}
.tagline-cursor{
  display:inline-block;width:.55em;height:1em;flex:none;
  background:var(--green);vertical-align:-.15em;
  animation:tblink 1s steps(1) infinite;
}
.tagline-box.done .tagline-cursor{animation:none;opacity:0;transition:opacity .5s}

/* bio modal gantung */
.bio-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(2,6,10,.75);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:4rem 1rem 1rem;overflow-y:auto;
}
.bio-backdrop[hidden]{display:none}
.bio-hang{display:flex;flex-direction:column;align-items:center}
.bio-string{width:2px;height:3.5rem;background:linear-gradient(var(--green),transparent);opacity:.7}
.bio-card{
  position:relative;max-width:560px;width:100%;
  background:#0d1117;border:1px solid var(--green);border-radius:12px;
  padding:1.6rem 1.4rem 1.4rem;text-align:center;
  box-shadow:0 0 40px rgba(0,255,136,.12);
  transform-origin:top center;
}
.bio-card.swing{animation:bioswing 2.4s ease-in-out}
@keyframes bioswing{
  0%{transform:rotate(4deg)}
  20%{transform:rotate(-3deg)}
  40%{transform:rotate(2deg)}
  60%{transform:rotate(-1.2deg)}
  80%{transform:rotate(.6deg)}
  100%{transform:rotate(0)}
}
.bio-close{
  position:absolute;top:.6rem;right:.8rem;
  background:none;border:none;color:var(--faint);
  font-size:1.4rem;cursor:pointer;line-height:1;
}
.bio-close:hover{color:var(--green)}
.bio-photo{
  width:120px;height:120px;object-fit:cover;
  border:2px solid var(--green);border-radius:8px;margin-bottom:.8rem;
}
.bio-card h3{margin:0 0 .4rem;color:var(--ink);font-family:var(--mono)}
.bio-pagehead{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.72rem;color:var(--green);
  border-bottom:1px solid var(--border-soft);
  padding-bottom:.5rem;margin-bottom:.8rem;letter-spacing:1px;
}
.bio-text{
  text-align:left;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:.92rem;line-height:1.75;
  color:#c9d4dc;min-height:9em;
}
.bio-hl{color:var(--green);font-weight:600}
.bio-cursor{color:var(--green)}
.bio-nav{display:flex;justify-content:center;gap:1rem;margin-top:1rem}
.bio-arrow{
  width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid var(--green);background:rgba(0,255,136,.06);
  color:var(--green);font-size:.9rem;cursor:pointer;
  transition:background .2s,transform .15s;
}
.bio-arrow:hover:not(:disabled){background:rgba(0,255,136,.16);transform:scale(1.08)}
.bio-arrow:disabled{opacity:.25;cursor:default}
.hero-dev .term-sub b{color:var(--green);font-weight:600}

/* ---------- running projects ---------- */
.run-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;max-width:900px;
}
@media(max-width:700px){
  .run-list{grid-template-columns:1fr;max-width:680px}
}
.run-row{
  display:flex;align-items:center;gap:1rem;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:8px;
  padding:.95rem 1.2rem;
  font-family:var(--mono);
}
.run-row .st{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.run-row .st.on{background:var(--green);box-shadow:0 0 8px rgba(0,255,136,.8)}
.run-row .st.maint{background:var(--yellow);box-shadow:0 0 8px rgba(210,153,34,.7)}
.run-row .st.dev{background:var(--cyan);box-shadow:0 0 8px rgba(0,212,255,.7)}
.run-row>div{flex:1;min-width:0}
.run-row b{display:block;color:var(--ink);font-size:.92rem}
.run-row small{color:var(--muted);font-size:.76rem}
.run-tag{
  font-size:.7rem;color:var(--faint);
  border:1px solid var(--border);
  border-radius:99px;padding:.2rem .7rem;white-space:nowrap;
}
.run-tag.hot{color:var(--green);border-color:rgba(0,255,136,.4)}
@media(max-width:560px){
  .run-row{padding:.85rem .95rem;gap:.8rem}
  .run-tag{display:none}
}

/* ---------- stats terminal ---------- */
.stats-term{max-width:640px}
.stats-term .t-out{font-size:.92rem;padding:.15rem 0}
.stats-term .t-out .ok{font-size:1.05rem;margin-right:.6rem}

/* ---------- portfolio (dark) ---------- */
body.dev .filter-btn{
  background:transparent;border-color:var(--border);color:var(--muted);
  font-family:var(--mono);font-size:.78rem;
}
body.dev .filter-btn:hover{border-color:var(--green);color:var(--green)}
body.dev .filter-btn.active{background:var(--green);border-color:var(--green);color:#04120a;font-weight:700}
body.dev .pf-card{background:var(--surface);border-color:var(--border-soft);box-shadow:none}
body.dev .pf-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,255,136,.35);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
body.dev .pf-card:focus-visible{outline:2px solid var(--green)}
body.dev .pf-visual{background:#010409;border-bottom:1px solid var(--border-soft)}
body.dev .pf-body .desc{color:var(--muted)}
body.dev .chip{background:#0d1117;border-color:var(--border-soft);color:var(--muted);font-family:var(--mono);font-size:.68rem}
body.dev .chip.gold{color:var(--muted);border-color:var(--border);background:transparent}
body.dev .link-arrow{color:var(--muted);font-family:var(--mono);font-size:.8rem;transition:color .18s ease}
body.dev .link-arrow:hover{color:var(--green)}
body.dev .badge-soon{border-color:var(--border);color:var(--faint)}

/* mockups -> dark terminal */
body.dev .mk{background:#0d1117;border-color:var(--border);box-shadow:0 4px 16px rgba(0,0,0,.5)}
body.dev .mk-bar{background:#161b22;border-bottom:1px solid var(--border-soft)}
body.dev .mk-bar i{background:#3a424c}
body.dev .mk-bar span{color:var(--faint)}
body.dev .mk-termbody{color:#c9d1d9}
body.dev .mk-prompt{color:var(--green)}
body.dev .mk-ok{color:var(--green)}
body.dev .mk-dim{color:#6e7681}
body.dev .mk-phone{background:#0d1117;border-color:var(--border)}
body.dev .mk-notch{background:#30363d}
body.dev .mk-screen{color:#c9d1d9}
body.dev .mk-appbar{color:var(--ink);border-bottom:1px solid var(--border-soft)}
body.dev .mk-prof{background:#161b22;border-color:var(--border-soft);color:#8b949e}
body.dev .mk-prof.on{background:var(--green);border-color:var(--green);color:#04120a}
body.dev .mk-rowline{color:var(--muted);border-bottom:1px dashed var(--border-soft)}
body.dev .mk-rowline b{color:var(--ink)}
body.dev .mk-green{color:var(--green)!important}
body.dev .mk-bar{background:#21262d}
body.dev .mk-bar i{background:var(--green)}
body.dev .mk-tiles span{background:#161b22;border-color:var(--border-soft)}
body.dev .mk-trip,body.dev .mk-clip{background:#161b22;border-color:var(--border-soft)}
body.dev .mk-trip b,body.dev .mk-clip b{color:var(--ink)}
body.dev .mk-trip small,body.dev .mk-clip small{color:var(--muted)}
body.dev .mk-timeline{background:#161b22;border-color:var(--border-soft)}
body.dev .mk-timeline::before{background:linear-gradient(90deg,rgba(0,255,136,.25),rgba(0,255,136,.05))}
body.dev .mk-timeline i{background:var(--green)}
body.dev .mk-bigbtn{background:var(--green);color:#04120a}
body.dev .mk-invite{background:#0d1117;border-color:var(--border)}
body.dev .mk-invite-names{color:var(--ink)}
body.dev .mk-invite-date{color:var(--muted)}
body.dev .mk-invite-btn{border-color:var(--green);color:var(--green)}
body.dev .mk-pre{background:#0d1117;color:#c9d1d9}
body.dev .mk-k{color:#79c0ff}
body.dev .mk-s{color:#a5d6ff}
body.dev .mk-n{color:#ffa657}
body.dev .mk-docbody{background:#0d1117}
body.dev .mk-doctitle{color:var(--ink)}
body.dev .mk-line{background:#21262d}
body.dev .mk-rel{background:#161b22;border-color:var(--border-soft)}
body.dev .mk-rel b{color:var(--ink)}
body.dev .mk-rel small{color:var(--muted)}
body.dev .mk-ver{background:rgba(63,185,80,.12);color:var(--green);border-color:rgba(63,185,80,.4)}
body.dev .mk-ver.new{background:rgba(0,255,136,.12);color:var(--green);border-color:rgba(0,255,136,.4)}

/* modal dark */
body.dev .pf-backdrop{background:rgba(1,4,9,.7)}
body.dev .pf-modal{background:#0d1117;border-color:var(--border);box-shadow:0 24px 70px rgba(0,0,0,.6)}
body.dev .pf-close{background:#161b22;border-color:var(--border);color:var(--ink)}
body.dev .pf-close:hover{border-color:var(--green);color:var(--green)}
body.dev .pf-modal-visual{background:#010409;border-right:1px solid var(--border-soft)}
body.dev .pf-modal-desc{color:var(--muted)}
body.dev .pf-feats li{color:var(--text);border-bottom:1px solid var(--border-soft)}
body.dev .pf-feats li::before{color:var(--green)}
@media(max-width:640px){
  body.dev .pf-modal-visual{border-right:none;border-bottom:1px solid var(--border-soft)}
}

/* ---------- themebox CTA (dark) ---------- */
body.dev .themebox-cta{
  background:linear-gradient(160deg,#161b22,#0d1117);
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
body.dev .themebox-cta p{color:var(--muted)}
body.dev .price-line b{color:var(--green);font-family:var(--mono);font-weight:700}
body.dev .price-line span{color:var(--faint)}

/* ---------- testimonials (dark, code-review style) ---------- */
body.dev .testi{background:var(--surface);border-color:var(--border-soft);box-shadow:none}
body.dev .testi:hover{border-color:rgba(0,255,136,.3)}
body.dev .testi .t-comment{
  font-family:var(--mono);font-size:.72rem;color:var(--faint);font-style:italic;margin-bottom:.7rem;
}
body.dev .testi .stars{color:var(--green);letter-spacing:3px}
body.dev .testi p{color:var(--text)}
body.dev .testi .who{color:var(--muted)}
body.dev .testi .who b{color:var(--ink)}

/* ---------- footer (dark) ---------- */
body.dev footer.site{background:#010409;border-top:1px solid var(--border-soft)}
body.dev .foot-grid p{color:var(--muted)}
body.dev .foot-grid p b{color:var(--ink)}
body.dev .foot-grid a{color:var(--muted);font-family:var(--mono);font-size:.82rem}
body.dev .foot-grid a:hover{color:var(--green)}
body.dev .foot-bottom{border-top:1px solid var(--border-soft);color:var(--faint)}
body.dev .foot-bottom .prompt{color:var(--green);font-family:var(--mono)}

/* about strip (dark) */
body.dev .about-strip{align-items:flex-start}
body.dev .about-photo{
  background:#010409;
  border:2px solid rgba(0,255,136,.55);
  box-shadow:0 0 22px rgba(0,255,136,.22),0 0 0 5px rgba(0,255,136,.06);
  border-radius:12px;
  overflow:hidden;
  padding:0;
}
body.dev .about-photo img{
  display:block;
  border-radius:10px;
  filter:grayscale(35%) contrast(1.06) brightness(.94);
}
body.dev .about-text p{color:var(--muted)}
body.dev .facts{background:transparent;border:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
body.dev .fact{
  background:linear-gradient(160deg,rgba(0,255,136,.06),rgba(13,17,23,.9));
  border:1px solid var(--border-soft);border-radius:12px;
  padding:1.4rem 1rem;text-align:center;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
body.dev .fact::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.6;
}
body.dev .fact:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,255,136,.08)}
body.dev .fact b{
  color:var(--green);font-family:var(--mono);font-weight:700;
  font-size:1.9rem;display:block;margin-bottom:.4rem;
  text-shadow:0 0 20px rgba(0,255,136,.3);
  transition:transform .3s;
}
body.dev .fact b.tick{animation:facttick .4s ease}
@keyframes facttick{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
body.dev .fact span{color:var(--muted);font-size:.8rem;line-height:1.5}
@media(max-width:600px){
  body.dev .facts{grid-template-columns:1fr;gap:.8rem}
  body.dev .fact{padding:1.1rem}
}

/* ---------- social icons row (logo kecil saja) ---------- */
body.dev .social-row{
  display:flex;gap:.8rem;margin-top:1.2rem;align-items:center;
}
body.dev .soc{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:none;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
body.dev .soc svg{width:17px;height:17px;display:block}
body.dev .soc:hover{transform:translateY(-3px) scale(1.05)}
body.dev .soc-wa{background:#25D366}
body.dev .soc-wa:hover{box-shadow:0 8px 24px rgba(37,211,102,.5)}
body.dev .soc-mail{background:#EA4335}
body.dev .soc-mail:hover{box-shadow:0 8px 24px rgba(234,67,53,.5)}
body.dev .soc-tg{background:#229ED9}
body.dev .soc-tg:hover{box-shadow:0 8px 24px rgba(34,158,217,.5)}
body.dev footer.site{
  background:#010409;border-top:1px solid var(--border-soft);padding:1.5rem 0;
}
body.dev .foot-single{
  text-align:center;color:var(--muted);font-family:var(--mono);
  font-size:.82rem;letter-spacing:1.5px;margin:0;
}
body.dev .foot-single i{color:var(--faint);font-style:normal;margin:0 .7rem}
@media(max-width:480px){
  body.dev .foot-single{font-size:.72rem;letter-spacing:.8px}
  body.dev .foot-single i{margin:0 .4rem}
}
@media(max-width:768px){
  body.dev .contact-row{grid-template-columns:repeat(2,1fr)}
}

/* ---------- live stats indicator ---------- */
body.dev .live-dot{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:2px;
  color:var(--green);vertical-align:middle;margin-left:.7rem;font-weight:700;
}
body.dev .live-dot i{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.5);opacity:1}
  50%{box-shadow:0 0 0 7px rgba(0,255,136,0);opacity:.55}
}