/* ═══════════════════════════════════════════════════════
   TERMINAL PORTFOLIO — Caesarico Bayu Sejati
   ═══════════════════════════════════════════════════════ */

:root{
  --bg:#0A0E14;
  --fg:#E5E9F0;
  --green:#7FEEA0;
  --muted:#5C6773;
  --dim:rgba(229,233,240,.55);
  --faint:rgba(229,233,240,.35);
  --line:rgba(127,238,160,.18);
  --line-soft:rgba(229,233,240,.09);
  --surface:rgba(229,233,240,.025);
  --surface-hover:rgba(127,238,160,.05);
  --red:#FF5F56;
  --yellow:#FFBD2E;
  --green-light:#27C93F;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:76rem;
}

*,*::before,*::after{ box-sizing:border-box }
html{ color-scheme:dark; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--green); color:#04170c }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px }

a{ color:inherit; text-decoration:none }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{ position:absolute; left:-9999px }
.skip:focus{
  left:1rem; top:1rem; z-index:50; padding:.5rem .9rem;
  background:var(--green); color:#04170c; font-size:12px;
}

/* ── shared ─────────────────────────────────────────── */
.inner{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto }
.inner.narrow{ max-width:60rem }
.label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin:0 0 .9rem;
}
.h2{
  font-size:clamp(1.9rem,4.6vw,3.25rem); font-weight:500; line-height:1.1;
  letter-spacing:-.03em; margin:0 0 2.6rem; text-wrap:balance;
}
.hash{ color:var(--muted); font-weight:400; margin-right:.35em }
.body{ color:var(--dim); max-width:62ch; margin:0 0 1.15rem; font-size:15px }
.body:last-child{ margin-bottom:0 }
.ok{ color:var(--green) }
.dim{ color:var(--muted) }
.prompt{ color:var(--green) }

/* ── topbar / primary nav ─────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(10,14,20,.86); border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0 }
.brand{ font-size:12px; color:var(--muted); letter-spacing:.04em; white-space:nowrap }
.brand:hover{ color:var(--green) }
.nav ul{ display:flex; flex-wrap:wrap; gap:.35rem 1.35rem; list-style:none; margin:0; padding:0 }
.nav a{
  font-size:12px; color:var(--dim); letter-spacing:.03em;
  padding:.25rem 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav a:hover{ color:var(--green); border-bottom-color:var(--line) }
main{ scroll-margin-top:3.25rem }
section[id]{ scroll-margin-top:3.5rem }

/* ══════════════════════ HERO ══════════════════════ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(4.5rem,11vw,7rem) 0 clamp(4rem,9vw,6rem);
}
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(127,238,160,.06) 0 1px, transparent 1px 28px);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}
.hero-inner{ position:relative; width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto }

.window-bar{ display:flex; align-items:center; gap:.5rem; margin-bottom:2.4rem }
.light{ width:10px; height:10px; border-radius:50%; display:inline-block }
.light.red{ background:var(--red) }
.light.yellow{ background:var(--yellow) }
.light.green{ background:var(--green-light) }
.shell-name{ margin-left:.75rem; font-size:11px; letter-spacing:.06em; color:var(--muted) }

.headline{
  font-size:clamp(2.25rem,6.5vw,4.5rem); font-weight:500;
  line-height:1.05; letter-spacing:-.04em; margin:0;
  text-wrap:balance; word-break:break-word;
}
.dot{ color:var(--green) }
.tagline{
  margin:1.1rem 0 0; font-size:clamp(.9rem,1.7vw,1.05rem);
  color:var(--dim); max-width:56ch;
}

/* terminal window */
.term{
  margin-top:clamp(2.75rem,6vw,3.75rem);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:rgba(229,233,240,.022);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.85);
}
.term-head{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem 1.15rem; font-size:11px; letter-spacing:.05em;
  color:var(--muted); background:rgba(229,233,240,.035);
  border-bottom:1px solid var(--line-soft);
}
.term-status{ color:var(--muted) }
.term-body{ padding:1.5rem 1.15rem 1.7rem }

.line{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.05rem }
.line:first-child{ margin-top:0 }
.cmd{ color:var(--fg) }
.out{ color:var(--dim); font-size:13.5px; margin-top:.2rem; padding-left:1.15rem }

.cursor{
  display:inline-block; width:8px; height:1.05em; margin-left:.15rem;
  background:var(--green); vertical-align:text-bottom;
  animation:blink 1.05s steps(1,end) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ══════════════════════ BANDS ══════════════════════ */
.band{ padding:clamp(4.5rem,10vw,7rem) 0; border-top:1px solid var(--line-soft) }

/* ── about stats ── */
.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; margin:2.75rem 0 0; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:8px; overflow:hidden;
}
.stats > div{ background:var(--bg); padding:1.35rem 1.15rem }
.stats dt{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .5rem;
}
.stats dd{ margin:0; font-size:clamp(1.4rem,3vw,1.85rem); color:var(--green); font-weight:500 }

/* ── project cards ── */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem }
.card{
  display:block; position:relative; padding:1.5rem 1.4rem 1.15rem;
  border:1px solid var(--line-soft); border-radius:8px;
  background:var(--surface); transition:border-color .25s, background .25s, transform .25s;
}
.card:hover{ border-color:var(--line); background:var(--surface-hover); transform:translateY(-3px) }
.card-title{
  font-size:15px; font-weight:500; color:var(--fg);
  margin:.7rem 0 0; letter-spacing:-.01em;
}
.card-cmd{ font-size:13px; display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline }
.kw{ color:var(--fg) }
.stars{ margin-left:auto; font-size:11px; color:var(--yellow) }
.card-desc{ color:var(--dim); font-size:13.5px; margin:.95rem 0 1.15rem; line-height:1.7 }
.tags{ display:flex; flex-wrap:wrap; gap:.45rem }
.tags span{
  font-size:10.5px; letter-spacing:.04em; color:var(--green);
  border:1px solid var(--line); border-radius:4px; padding:.16rem .5rem;
  background:rgba(127,238,160,.05);
}
.card-open{
  margin-top:1.25rem; padding-top:.85rem; border-top:1px dashed var(--line-soft);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  display:flex; gap:.5rem; align-items:baseline;
}
.card-open .arrow{ color:var(--green) }
.card-open .url{ color:var(--fg); text-transform:none; letter-spacing:0 }
.card-open .ok{ text-transform:none; letter-spacing:0 }

/* ── stack columns ── */
.cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem 1.5rem }
.col-head{
  font-size:10.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--line-soft);
}
.col ul{ list-style:none; margin:0; padding:0 }
.col li{
  display:flex; gap:.6rem; font-size:13.5px; color:var(--dim);
  padding:.3rem 0; transition:color .2s;
}
.col li:hover{ color:var(--fg) }
.col li > span{ color:var(--green); flex:none }

/* ── experience log ── */
.log{ list-style:none; margin:0; padding:0 }
.log li{ padding:1.6rem 0 1.6rem 1.5rem; border-left:1px solid var(--line-soft); position:relative }
.log li::before{
  content:""; position:absolute; left:-4px; top:1.95rem;
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(127,238,160,.12);
}
.log li + li{ border-top:1px solid var(--line-soft) }
.log li:first-child{ padding-top:0 }
.log li:first-child::before{ top:.4rem }
.log-head{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:baseline; font-size:15px }
.sha{
  color:var(--yellow); font-size:12px; opacity:.75;
  background:rgba(255,189,46,.07); border-radius:4px; padding:.1rem .4rem;
}
.role{ color:var(--fg); font-weight:500 }
.at{ color:var(--muted) }
.org{ color:var(--green) }
.meta{ font-size:12px; color:var(--muted); margin:.55rem 0 .85rem; letter-spacing:.03em }

/* ── contact ── */
.connect{
  padding:1.35rem 1.4rem; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); margin-bottom:2.5rem;
}
.connect .line{ margin-top:0 }
.connect a{ border-bottom:1px solid var(--line); transition:color .2s }
.connect a:hover{ color:var(--green) }
.socials{ display:flex; flex-wrap:wrap; gap:.6rem 1.9rem; margin-top:1.35rem; font-size:13px }
.socials a{ display:flex; gap:.5rem; align-items:baseline; color:var(--dim); opacity:.85; transition:opacity .2s, color .2s }
.socials a:hover{ opacity:1; color:var(--fg) }
.socials span{ color:var(--green) }

/* interactive shell */
.shell-input{ display:flex; gap:.6rem; align-items:center }
.shell-input input{
  flex:1; min-width:0; background:transparent; border:0; color:var(--fg);
  font:inherit; font-size:14px; padding:.35rem 0; caret-color:var(--green);
}
.shell-input input::placeholder{ color:var(--muted); opacity:.7 }
.shell-input input:focus{ outline:none }
.shell-out{
  margin:.9rem 0 0; font-size:13px; color:var(--dim);
  white-space:pre-wrap; word-break:break-word; min-height:0;
}
.shell-out:empty{ display:none }
.shell-out .err{ color:var(--red) }
.shell-out .tbl{
  margin:.35rem 0 .5rem; padding:.7rem .85rem;
  white-space:pre; word-break:normal; overflow-x:auto;
  font-size:12px; line-height:1.75; color:var(--fg);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.shell-out .tbl::-webkit-scrollbar{ height:6px }
.shell-out .tbl::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px }

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:13px; padding:.7rem 1.15rem; border-radius:8px;
  border:1px solid var(--line-soft); color:var(--dim); background:transparent;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.btn:hover{ color:var(--fg); border-color:var(--line); background:var(--surface-hover); transform:translateY(-1px) }
.btn.primary{ color:var(--green); border-color:var(--line); background:var(--surface-hover) }
.btn.primary:hover{ background:rgba(127,238,160,.1) }

/* ── 404 page ── */
.err-wrap{ min-height:100dvh; display:flex; flex-direction:column }
.err-main{
  position:relative; overflow:hidden; flex:1;
  padding:clamp(4.5rem,11vw,7rem) 0 clamp(3rem,7vw,5rem);
  display:flex; align-items:center;
}
.err-main .hero-inner{ width:min(100% - 2.5rem, 60rem) }
.err-code{
  font-size:clamp(4.5rem,20vw,10rem); font-weight:700; line-height:.95;
  letter-spacing:-.05em; margin:0;
  color:var(--fg); text-shadow:0 0 40px rgba(127,238,160,.14);
}
.err-code::after{
  content:""; display:block; height:3px; width:clamp(4rem,22vw,10rem);
  margin-top:1.1rem; background:linear-gradient(90deg,var(--green),transparent);
}
.err-path{ color:var(--red) }
.err-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem }
.err-actions + .shell-input{ margin-top:2.2rem }
.err-wrap .shell-input{
  border:1px solid var(--line-soft); border-radius:8px;
  padding:.6rem 1rem; background:var(--surface);
}
.err-wrap .shell-out{ margin-top:1.1rem }

/* ── footer ── */
.foot{ border-top:1px solid var(--line-soft); padding:2.25rem 0 }
.foot p{ margin:0; font-size:11.5px; letter-spacing:.04em; color:var(--muted); text-align:center }

/* ── floating status pill ── */
.status-pill{
  position:fixed; right:1rem; bottom:1rem; z-index:20;
  font-size:10.5px; letter-spacing:.08em; color:var(--muted);
  background:rgba(10,14,20,.82); border:1px solid var(--line-soft);
  border-radius:999px; padding:.32rem .75rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* ── scroll reveal ── */
@media (scripting: enabled){
  .reveal > *{
    opacity:0; transform:translateY(10px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .reveal.is-visible > *{ opacity:1; transform:none }
  .reveal > :nth-child(2){ transition-delay:.1s }
  .reveal > :nth-child(3){ transition-delay:.2s }
  .reveal > :nth-child(4){ transition-delay:.3s }
  .reveal > :nth-child(n+5){ transition-delay:.38s }
}

/* ── responsive ── */
@media (max-width:56rem){
  .cards{ grid-template-columns:1fr }
  .cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:34rem){
  body{ font-size:14px }
  .cols{ grid-template-columns:1fr; gap:2rem }
  .stats{ grid-template-columns:1fr }
  .term-body{ padding:1.15rem .85rem 1.35rem }
  .out{ padding-left:0 }
  .stars{ margin-left:0 }
  .status-pill{ display:none }
  .topbar-in{ flex-wrap:wrap; gap:.4rem 1rem; padding:.6rem 0 }
  .nav ul{ gap:.25rem 1rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
  .reveal > *{ opacity:1; transform:none }
  .cursor{ opacity:1 }
}