/*
Theme Name: Ashfareza Persona Portfolio V8
Author: Ashfareza Aretha Djatmiko
Description: Personal portfolio dashboard with an original blue, angular game-UI aesthetic.
Version: 8.1.0
License: GPL-2.0-or-later
Text Domain: ashfareza-persona-v4
*/
:root{
 --bg:#041126;--bg2:#071b3b;--panel:#0a2348;--panel2:#0d2c58;
 --blue:#198bff;--cyan:#72ddff;--white:#f4fbff;--muted:#a9bfd9;
 --pink:#ff5d9e;--line:rgba(114,221,255,.22);--shadow:0 30px 90px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(circle at 82% 18%,rgba(41,157,255,.22),transparent 27%),
 radial-gradient(circle at 12% 80%,rgba(31,93,190,.16),transparent 28%),
 linear-gradient(135deg,var(--bg),var(--bg2) 58%,#04152f);
 color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.65;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:-1;background:
 linear-gradient(115deg,transparent 0 49%,rgba(255,255,255,.35) 50%,transparent 51%),
 linear-gradient(90deg,transparent 0 95%,rgba(114,221,255,.3) 96%);background-size:170px 170px,80px 80px}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px,92%);margin:auto}
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:17px 0;background:linear-gradient(180deg,rgba(3,13,30,.94),rgba(3,13,30,.5),transparent);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1rem;font-weight:1000;letter-spacing:.12em;transform:skew(-10deg)}
.logo b{color:var(--cyan)}
.navlinks{display:flex;align-items:center;gap:6px}
.navlinks a{font-size:.73rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:9px 11px;color:#dff6ff;transform:skew(-9deg);position:relative}
.navlinks a:hover,.navlinks a.active{background:var(--blue);box-shadow:7px 7px 0 rgba(0,0,0,.2)}
.menu{display:none;border:1px solid var(--line);background:rgba(5,18,40,.9);padding:8px 10px;color:white}
.menu i{display:block;width:22px;height:2px;background:var(--cyan);margin:4px}
.hero{min-height:100vh;display:grid;align-items:center;padding:120px 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.kicker{display:inline-block;background:var(--cyan);color:#031126;font-size:.7rem;font-weight:1000;letter-spacing:.16em;padding:7px 12px;transform:skew(-11deg);box-shadow:8px 8px 0 rgba(0,0,0,.22)}
h1{font-size:clamp(3.3rem,8vw,7.5rem);line-height:.82;letter-spacing:-.075em;text-transform:uppercase;margin:25px 0 22px;font-weight:1000}
h1 span{display:block;color:var(--cyan)}
.lead{max-width:650px;color:var(--muted);font-size:1.05rem}
.buttons{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;padding:12px 17px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:.78rem;font-weight:1000;text-transform:uppercase;letter-spacing:.06em;transform:skew(-10deg);transition:.25s}
.btn.primary{background:var(--blue);border-color:var(--blue);box-shadow:8px 8px 0 rgba(0,0,0,.22)}
.btn:hover{transform:skew(-10deg) translate(-2px,-2px);filter:brightness(1.12)}
.photo-frame{position:relative;display:flex;justify-content:center}
.photo-frame:before{content:"";position:absolute;inset:7% 6% 2% 12%;background:linear-gradient(145deg,var(--cyan),var(--blue));clip-path:polygon(8% 0,100% 7%,91% 100%,0 91%);transform:rotate(6deg);opacity:.8;animation:float 6s ease-in-out infinite}
.photo{position:relative;width:min(400px,78vw);height:550px;object-fit:cover;object-position:50% 30%;clip-path:polygon(8% 0,100% 7%,92% 100%,0 92%);box-shadow:var(--shadow);filter:contrast(1.06) saturate(.92)}
.photo-tag{position:absolute;right:0;bottom:26px;background:var(--white);color:#031126;font-weight:1000;padding:9px 13px;transform:skew(-10deg);box-shadow:9px 9px 0 rgba(0,0,0,.25)}
@keyframes float{50%{transform:rotate(3deg) translateY(-13px)}}
.diagonal{height:38px;background:linear-gradient(90deg,var(--cyan),var(--blue),transparent);clip-path:polygon(0 55%,100% 0,100% 60%,0 100%)}
section{padding:90px 0}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.eyebrow{font-size:.7rem;font-weight:1000;letter-spacing:.17em;color:var(--cyan);text-transform:uppercase}
.title{font-size:clamp(2.3rem,5vw,4.5rem);line-height:.92;margin:7px 0;text-transform:uppercase;font-weight:1000;letter-spacing:-.04em}
.muted{color:var(--muted)}
.panel{background:linear-gradient(145deg,rgba(15,54,105,.75),rgba(4,18,42,.85));border:1px solid var(--line);padding:28px;box-shadow:var(--shadow);position:relative}
.panel:before{content:"";position:absolute;top:-1px;left:-1px;width:65px;height:4px;background:var(--cyan)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{padding:20px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.stat strong{display:block;font-size:1.25rem}.stat small{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.card{padding:24px;min-height:185px;background:linear-gradient(150deg,rgba(15,68,135,.52),rgba(4,19,43,.88));border:1px solid var(--line);position:relative;overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-6px);border-color:rgba(114,221,255,.55);box-shadow:0 20px 55px rgba(0,0,0,.25)}
.card:after{content:"";position:absolute;right:-45px;bottom:-55px;width:130px;height:130px;border:1px solid rgba(114,221,255,.25);transform:rotate(45deg)}
.num{font-size:.68rem;color:var(--cyan);font-weight:1000;letter-spacing:.16em}
.card h3{font-size:1.25rem;margin:12px 0 6px}.card p{color:var(--muted)}
.timeline{display:grid;gap:9px}.timeline-row{display:grid;grid-template-columns:125px 1fr auto;gap:20px;align-items:center;padding:17px 20px;border-left:4px solid var(--blue);background:rgba(255,255,255,.035)}
.timeline-row b{font-size:1rem}.tag{font-size:.65rem;font-weight:1000;color:#031126;background:var(--cyan);padding:5px 8px}
.future{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dream{padding:30px;min-height:240px;background:linear-gradient(145deg,rgba(25,139,255,.32),rgba(5,21,49,.9));border:1px solid var(--line);position:relative;overflow:hidden}
.dream h3{font-size:2.8rem;margin:10px 0}.dream:after{content:"FUTURE";position:absolute;right:-30px;bottom:0;font-size:5rem;font-weight:1000;color:rgba(255,255,255,.035);transform:rotate(-90deg)}
.quote{font-size:clamp(2rem,4.4vw,4.6rem);font-weight:1000;line-height:.98;margin-top:55px;max-width:950px}.quote small{display:block;font-size:1rem;color:var(--muted);margin-top:16px;font-weight:500}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.contact-card{padding:28px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.contact-card a{color:var(--cyan);font-weight:900}
.page-hero{padding:150px 0 65px;min-height:48vh;display:flex;align-items:end;position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;width:500px;height:500px;right:-8%;top:20%;border-radius:50%;border:1px solid rgba(114,221,255,.2);box-shadow:0 0 0 45px rgba(114,221,255,.025),0 0 0 90px rgba(114,221,255,.018);animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page-body{padding:50px 0 110px}
.reveal{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.8,.2,1)}.reveal.show{opacity:1;transform:none}
body.page-ready .reveal{animation:pageIn .55s both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.scan{position:fixed;left:0;right:0;top:-3px;height:1px;background:rgba(114,221,255,.2);z-index:90;pointer-events:none;animation:scan 7s linear infinite}
@keyframes scan{to{top:105vh}}
@media(max-width:850px){
 .navlinks{display:none;position:absolute;left:4%;right:4%;top:62px;flex-direction:column;align-items:stretch;background:rgba(3,15,35,.98);padding:10px;border:1px solid var(--line)}
 .navlinks.open{display:flex}.menu{display:block}.hero-grid,.future,.contact-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}
 .photo{height:470px}.section-top{align-items:start;flex-direction:column}.timeline-row{grid-template-columns:90px 1fr}.timeline-row .tag{display:none}
}

footer{padding:25px 0 45px;border-top:1px solid var(--line);font-size:.85rem}


/* V8 portfolio additions */
.achievement-grid{display:grid;gap:16px}
.achievement-card{display:grid;grid-template-columns:70px 1.25fr .9fr;gap:22px;align-items:stretch;padding:22px;background:linear-gradient(145deg,rgba(15,68,135,.46),rgba(4,19,43,.9));border:1px solid var(--line);position:relative;overflow:hidden}
.achievement-card.no-cert{grid-template-columns:70px 1fr}
.achievement-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan)}
.achievement-number{font-size:1.8rem;font-weight:1000;color:var(--cyan);letter-spacing:-.04em}
.achievement-content h3{font-size:1.45rem;line-height:1.1;margin:9px 0}
.achievement-content p{color:var(--muted);margin:0 0 15px}
.medal-label{display:inline-block;padding:6px 10px;background:rgba(114,221,255,.1);border:1px solid var(--line);font-size:.68rem;font-weight:1000;letter-spacing:.08em}
.certificate-box{min-height:190px;border:1px dashed rgba(114,221,255,.35);background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;overflow:hidden}
.certificate-box img{width:100%;height:100%;min-height:190px;object-fit:contain;background:#071a35}
.certificate-placeholder{text-align:center;padding:25px;color:var(--muted)}
.certificate-placeholder span{display:block;color:var(--cyan);font-size:.62rem;font-weight:1000;letter-spacing:.18em}
.certificate-placeholder strong{display:block;color:var(--white);font-size:1.2rem;margin:7px 0}
.certificate-placeholder small{display:block;font-size:.68rem;word-break:break-word}
.certificate-note code{color:var(--cyan);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.certificate-note li{color:var(--muted);margin:5px 0}
.dream-note{display:block;color:var(--muted);margin-top:25px;font-size:.85rem}
.mini-cards .card{min-height:145px}
@media(max-width:850px){
 .achievement-card,.achievement-card.no-cert{grid-template-columns:1fr}
 .achievement-number{font-size:1.3rem}
 .certificate-box{min-height:210px}
 .certificate-box img{min-height:210px}
}