/* Rezky Arian Portfolio — 3 warna: background (biru-slate), accent (oranye fiber), teks. */
:root{--bg:#0d1420;--sf:#141d2d;--sf2:#1b2740;--tx:#e8edf5;--mu:#9aa8bd;--ln:rgba(232,237,245,.17);--ac:#ff8a3d;--act:#ff8a3d;--ink:#0d1420;--glass:rgba(13,20,32,.74);
--in:inset 2px 2px 6px rgba(0,0,0,.5),inset -2px -2px 5px rgba(255,255,255,.04);--out:3px 3px 8px rgba(0,0,0,.4),-2px -2px 6px rgba(255,255,255,.035);
--hd:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--bar:60px;color-scheme:dark}
:root[data-theme=light]{--bg:#f0f2f6;--sf:#e6eaf1;--sf2:#dbe1ec;--tx:#0d1420;--mu:#46526a;--ln:rgba(13,20,32,.22);--ac:#ff7a26;--act:#ab3b07;--glass:rgba(240,242,246,.8);
--in:inset 2px 2px 5px rgba(13,20,32,.16),inset -2px -2px 5px rgba(255,255,255,.95);--out:3px 3px 8px rgba(13,20,32,.13),-3px -3px 8px rgba(255,255,255,.95);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-width:320px;overflow-x:clip;background:var(--bg);color:var(--tx);font:400 1rem/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-rendering:optimizeLegibility}
html.lock{overflow:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--act);outline-offset:3px;border-radius:4px}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ac);color:var(--ink);padding:.6rem 1rem;border-radius:8px;font-weight:700}
.skip:focus{top:.75rem}
.d-only{display:none!important}
.muted{color:var(--mu)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.1rem;border:1.5px solid var(--tx);border-radius:8px;background:transparent;font-weight:650;line-height:1.2;transition:transform .15s,box-shadow .15s,background-color .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--tx)}
.btn:active{transform:none;box-shadow:none}
.btn-p{background:var(--ac);border-color:var(--ac);color:var(--ink)}
.btn-s{min-height:38px;padding:.3rem .9rem;font-size:.92rem}
.ibtn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--sf);box-shadow:var(--out);transition:box-shadow .15s,transform .15s}
.ibtn:active{box-shadow:var(--in);transform:scale(.96)}
.ico{width:20px;height:20px;flex:none}

/* Header + nav */
.bar{position:sticky;top:0;z-index:50;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:var(--bar)}
.brand{display:flex;align-items:center;gap:.6rem;font:700 1.05rem var(--hd);letter-spacing:-.01em}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--ac);color:var(--ink);font:800 .95rem var(--hd)}
.bar-act{display:flex;align-items:center;gap:.5rem}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ac);transform:scaleX(0);transform-origin:left}
.nav{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-rows:0fr;visibility:hidden;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln);transition:grid-template-rows .28s ease,visibility 0s .28s}
.nav.open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .28s ease}
.nav ul{min-height:0;overflow:hidden}
.nav a{display:block;padding:.9rem 1.25rem;font-weight:600;border-top:1px solid var(--ln)}
.nav a[aria-current]{color:var(--act);box-shadow:inset 3px 0 0 var(--ac)}
.nav a:hover{background:var(--sf)}
@media (min-width:820px){
  .m-only{display:none}.d-only{display:inline-flex!important}
  .nav,.nav.open{position:static;display:block;visibility:visible;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none;margin-left:auto}
  .nav ul{display:flex;gap:.15rem;overflow:visible}
  .nav a,.nav a:hover{border:0;border-radius:8px;padding:.45rem .8rem;background:none;font-size:.95rem;color:var(--mu)}
  .nav a:hover{color:var(--tx)}
  .nav a[aria-current]{color:var(--tx);box-shadow:inset 0 -2px 0 var(--ac);border-radius:0}
}

/* Hero */
.hero{position:relative;display:grid;gap:2rem;padding:clamp(1.75rem,6vw,4.5rem) 0 clamp(2rem,6vw,4rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--ln) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#000 20%,transparent 85%);mask-image:linear-gradient(#000 20%,transparent 85%)}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.3rem .85rem;border-radius:999px;background:var(--sf);box-shadow:var(--in);font-size:.85rem;font-weight:600;margin-bottom:1.1rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ac);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
h1{font:800 clamp(2rem,8.4vw,4.2rem)/1.04 var(--hd);letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
.role{margin-top:1rem;font:600 .9rem/1.5 var(--mono);color:var(--act)}
.lead{margin-top:.9rem;max-width:52ch;color:var(--mu);font-size:1.05rem}
.cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.hero-meta{margin-top:1.5rem;padding-left:.8rem;border-left:3px solid var(--ac);font-size:.85rem;color:var(--mu)}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials:empty{display:none}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sf);box-shadow:var(--out);transition:color .15s,transform .15s}
.socials a:hover{color:var(--act);transform:translateY(-2px)}
.topo{max-width:400px;width:100%;justify-self:center}
.topo figcaption{margin-top:.6rem;font-size:.8rem;color:var(--mu)}
.n rect{fill:var(--sf);stroke:var(--tx);stroke-width:1.5}
.n .sd{fill:var(--ac);stroke:none}
.n circle{fill:var(--ac)}
.t1{font:700 15px var(--hd);fill:var(--tx)}
.t2{font:12px var(--mono);fill:var(--mu)}
.lnk path{fill:none;stroke:var(--ac);stroke-width:2.2;stroke-dasharray:6 7;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-13}}
@media (min-width:860px){.hero{grid-template-columns:1.2fr .8fr;align-items:center;gap:3rem}}

/* Sections */
.sec{padding:clamp(2.25rem,6vw,4.25rem) 0;scroll-margin-top:var(--bar)}
.head{display:grid;gap:.5rem;margin-bottom:1.6rem;padding-top:1rem;border-top:1.5px solid var(--tx)}
h2{font:800 clamp(1.6rem,5.5vw,2.5rem)/1.1 var(--hd);letter-spacing:-.02em}
.head p{max-width:58ch;color:var(--mu)}
h3{font:700 1.15rem/1.3 var(--hd)}

/* Projects */
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1.25rem}
.seg{display:inline-flex;flex-wrap:wrap;gap:.25rem;padding:.3rem;border-radius:14px;background:var(--sf);box-shadow:var(--in)}
.seg button{min-height:40px;padding:.3rem .95rem;border:0;border-radius:10px;background:none;color:var(--mu);font-weight:650;transition:background-color .15s,color .15s,box-shadow .15s}
.seg button:hover{color:var(--tx)}
.seg button[aria-pressed=true]{background:var(--bg);color:var(--tx);box-shadow:var(--out)}
.count{font:.82rem var(--mono);color:var(--mu)}
.grid{display:grid;gap:1rem}
.card{position:relative;display:flex;flex-direction:column;background:var(--sf);border:1.5px solid var(--ln);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover,.card:has(.open-p:focus-visible){border-color:var(--tx);transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ac)}
.card:not([hidden]){animation:pop .3s ease both}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.cover{height:112px;display:grid;place-items:center;background:var(--sf2);border-bottom:1.5px solid var(--ln);color:var(--act)}
.cover svg{height:100%;width:auto;max-width:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding:.5rem 0}
.cover circle{fill:currentColor}
.cbody{display:flex;flex-direction:column;gap:.75rem;padding:1.1rem;flex:1}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem;font:.75rem var(--mono);color:var(--mu)}
.tag{color:var(--act);font-weight:700}
.st::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.4rem;background:var(--ac)}
.open-p{padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.open-p::after{content:"";position:absolute;inset:0}
.cbody p{color:var(--mu);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{padding:.15rem .6rem;border:1px solid var(--ln);border-radius:999px;font:600 .75rem var(--mono);color:var(--mu)}
.clinks{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:auto;padding-top:.25rem;font-size:.9rem;font-weight:650}
.clinks a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.35rem;min-height:36px;color:var(--act)}
.clinks a:hover{text-decoration:underline}
.more{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;transition:gap .15s}
.card:hover .more{gap:.6rem}
.more .ico,.clinks .ico{width:16px;height:16px}
@media (min-width:720px){.grid{grid-template-columns:1fr 1fr}}

/* Modal */
.modal{width:min(660px,100% - 1.5rem);max-height:calc(100dvh - 1.5rem);padding:0;overflow:auto;border:1.5px solid var(--tx);border-radius:14px;background:var(--bg);color:var(--tx);box-shadow:6px 6px 0 var(--ac);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s,transform .22s;overscroll-behavior:contain}
.modal.in{opacity:1;transform:none}
.modal::backdrop{background:rgba(4,8,14,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mbody{position:relative;display:grid;gap:1rem;padding:1.4rem 1.25rem 1.5rem}
.mclose{position:sticky;top:0;justify-self:end;margin:-.25rem -.25rem -3rem 0;z-index:2}
.mbody h2{font-size:clamp(1.6rem,6vw,2.2rem);padding-right:3rem}
.mbody h3{font-size:.8rem;font-family:var(--mono);color:var(--act);margin-bottom:.3rem}
.mbody p,.mbody li{color:var(--mu)}
.mfeat li{position:relative;padding-left:1.1rem;margin:.2rem 0}
.mfeat li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--ac)}
.mact{display:flex;flex-wrap:wrap;gap:.65rem}

/* About */
.about{display:grid;gap:1.75rem}
#aboutText p{max-width:56ch;color:var(--mu);font-size:1.05rem}
#aboutText p+p{margin-top:.8rem}
#aboutText .btn{margin-top:1.25rem}
.facts div{display:grid;gap:.1rem;padding:.8rem 0 .8rem 1.1rem;border-bottom:1px solid var(--ln);position:relative}
.facts div::before{content:"";position:absolute;left:0;top:1.3rem;width:7px;height:7px;background:var(--ac)}
.facts dt{font:700 .8rem var(--mono);color:var(--act)}
.facts dd{color:var(--tx)}
.stats{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:2rem}
.stats strong{display:block;font:800 2.3rem/1 var(--hd)}
.stats span{font-size:.85rem;color:var(--mu)}
@media (min-width:860px){.about{grid-template-columns:1.1fr .9fr;gap:3rem}}

/* Skills */
.skills{display:grid;gap:1.75rem}
.grp{padding-top:.9rem;border-top:3px solid var(--ac)}
.grp ul{margin-top:.6rem}
.grp li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--ln)}
.grp b{display:block;font-weight:650}
.grp small{color:var(--mu);font-size:.78rem}
.lv{display:flex;gap:4px;flex:none}
.lv i{width:14px;height:6px;border-radius:2px;background:var(--sf2);box-shadow:var(--in)}
.lv i.on{background:var(--ac);box-shadow:none}
@media (min-width:760px){.skills{grid-template-columns:repeat(3,1fr);gap:2rem}}

/* Journey */
.journey{display:grid;gap:2rem}
.tl{margin-top:1rem;padding-left:1.5rem;border-left:2px solid var(--ln)}
.tl li{position:relative;padding-bottom:1.5rem}
.tl li::before{content:"";position:absolute;left:calc(-1.5rem - 6px);top:.35rem;width:10px;height:10px;background:var(--ac)}
.tl time{font:.78rem var(--mono);color:var(--act)}
.tl h4{margin:.15rem 0 0;font:700 1.05rem/1.3 var(--hd)}
.tl p{color:var(--mu);font-size:.95rem}
.tl .pl{color:var(--tx);font-size:.9rem;font-weight:600}
@media (min-width:760px){.journey{grid-template-columns:1fr 1fr;gap:3rem}}

/* Build */
.build{display:grid;gap:1.25rem 2rem}
.build li{padding-top:.8rem;border-top:1.5px solid var(--ln)}
.build p{margin-top:.3rem;color:var(--mu);font-size:.95rem}
@media (min-width:640px){.build{grid-template-columns:1fr 1fr}}

/* Contact */
.contact{display:grid;gap:1.5rem}
.chan a,.chan div{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.7rem .25rem;border-bottom:1px solid var(--ln);transition:padding .15s,color .15s}
.chan a:hover{padding-left:.75rem;color:var(--act)}
.chan small{display:block;color:var(--mu);font-size:.78rem}
.chan b{overflow-wrap:anywhere}
.chan .go{margin-left:auto;color:var(--mu)}
.cact{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1rem}
.form{display:grid;gap:.7rem}
.form label{display:grid;gap:.25rem;font-size:.85rem;font-weight:600}
.form input,.form textarea{width:100%;min-height:44px;padding:.6rem .8rem;border:0;border-radius:10px;background:var(--sf);color:var(--tx);box-shadow:var(--in);font:inherit}
.form textarea{resize:vertical;min-height:110px}
.note{padding:1rem;border:1.5px dashed var(--ln);border-radius:10px;color:var(--mu)}
@media (min-width:860px){.contact{grid-template-columns:1fr 1fr;gap:3rem}}

/* Footer, toast, totop */
.foot{border-top:1px solid var(--ln);padding:1.5rem 0 2rem;font-size:.85rem;color:var(--mu)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem}
.foot a:hover{color:var(--act)}
.toast{position:fixed;left:50%;bottom:1.25rem;z-index:90;padding:.65rem 1.1rem;border:1.5px solid var(--tx);border-radius:10px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:650;opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.totop{position:fixed;right:1rem;bottom:1rem;z-index:40;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s,box-shadow .15s}
.totop.on{opacity:1;pointer-events:auto;transform:none}

/* Scroll reveal (hanya aktif jika JS jalan) */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .rv.vis{opacity:1;transform:none}
.js .card.rv.vis{transition:opacity .5s,transform .2s,box-shadow .2s,border-color .2s}

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

/* Project cards with published demos are fully clickable. */
.project-link > a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.project-link > a:focus-visible{outline:2px solid var(--ac);outline-offset:-3px}