:root{--blue:#2563eb;--blue-light:#dbeafe;--ink:#182337;--body:#516076;--paper:#fff;--muted:#f8fafc;--line:#e7ebf2;--nav:rgba(255,255,255,.82);--shadow:0 18px 45px rgba(25,54,99,.1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;font-family:Poppins,sans-serif;color:var(--ink);background:var(--paper);transition:.3s background,.3s color}.container{width:min(1120px,calc(100% - 42px));margin:auto}.scroll-progress{position:fixed;top:0;left:0;width:0;height:3px;background:var(--blue);z-index:100}.header{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(16px);border-bottom:1px solid transparent}.navbar{height:76px;display:flex;align-items:center;gap:28px}.brand{font-weight:800;font-size:1.5rem;color:var(--ink);text-decoration:none;letter-spacing:-1px}.brand span,em{color:var(--blue);font-style:normal}.nav-links{display:flex;gap:26px;margin-left:auto}.nav-links a{font-size:.84rem;font-weight:500;text-decoration:none;color:var(--body);position:relative}.nav-links a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--blue);transition:.25s}.nav-links a:hover,.nav-links a.active{color:var(--blue)}.nav-links a.active:after{width:100%}.theme-toggle,.menu-toggle,.back-top{border:0;background:none;color:var(--ink);cursor:pointer;font-size:1.05rem}.theme-toggle{width:38px;height:38px;border-radius:50%;background:var(--muted)}.menu-toggle{display:none}.section{padding:110px 0}.hero{min-height:680px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:64px;padding-top:72px}.eyebrow{color:var(--blue);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin:0 0 14px}.eyebrow span{display:inline-block;width:30px;height:2px;background:var(--blue);vertical-align:middle;margin-right:10px}.hero h1{font-size:clamp(3.5rem,7vw,5.8rem);letter-spacing:-4px;line-height:1.05;margin:0}.hero h2{font-size:1.25rem;font-weight:500;margin:16px 0}.typed-text{color:var(--blue);font-weight:700}.cursor{color:var(--blue);animation:blink .8s infinite}.intro{max-width:540px;color:var(--body);font-size:.98rem;line-height:1.85}.hero-actions{display:flex;gap:13px;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;padding:13px 20px;text-decoration:none;font-size:.83rem;font-weight:600;transition:.25s}.button.primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.22)}.button.primary:hover{transform:translateY(-3px);background:#1d4ed8}.button.secondary{color:var(--ink);border:1px solid var(--line)}.button.secondary:hover{border-color:var(--blue);color:var(--blue)}.quick-socials{display:flex;gap:14px}.quick-socials a,.contact-socials a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--body);text-decoration:none;transition:.2s}.quick-socials a:hover,.contact-socials a:hover{background:var(--blue);border-color:var(--blue);color:#fff}.hero-visual{position:relative;height:470px;display:grid;place-items:center}.portrait-frame{width:350px;height:405px;overflow:hidden;border-radius:170px 170px 20px 20px;position:relative;z-index:2;background:var(--blue-light);border:10px solid rgba(255,255,255,.6)}.portrait-frame img,.about-image img,.project-image img{width:100%;height:100%;object-fit:cover}.orb{position:absolute;border-radius:50%;background:var(--blue-light)}.orb-one{width:370px;height:370px;right:0;top:38px}.orb-two{width:75px;height:75px;background:#fef3c7;bottom:5px;left:22px}.floating-card{position:absolute;z-index:3;background:var(--paper);box-shadow:var(--shadow);border-radius:9px;padding:11px 14px;font-size:.72rem;font-weight:600}.floating-card i{color:var(--blue);margin-right:5px}.code-card{left:0;top:105px}.location-card{right:-8px;bottom:58px}.stats{display:grid;grid-template-columns:repeat(3,1fr);padding:32px 50px;background:var(--muted);border-radius:12px}.stats div{padding:0 34px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{font-size:1.9rem}.stats strong span{color:var(--blue)}.stats p{margin:2px 0;color:var(--body);font-size:.76rem}.section-heading{position:relative;margin-bottom:48px}.section-heading h2{font-size:clamp(2rem,4vw,2.65rem);letter-spacing:-1.6px;margin:0}.text-link{position:absolute;right:0;bottom:5px;color:var(--blue);text-decoration:none;font-size:.82rem;font-weight:600}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.about-image{height:390px;position:relative}.about-image img{border-radius:12px;filter:saturate(.85)}.image-stamp{position:absolute;right:-30px;bottom:-28px;display:flex;gap:9px;align-items:center;background:var(--blue);color:#fff;padding:17px 20px;border-radius:8px;font-size:.75rem;line-height:1.35}.image-stamp i{font-size:1.35rem}.about-content h3{font-size:1.5rem;line-height:1.4;margin:0 0 16px}.about-content>p{color:var(--body);line-height:1.8;font-size:.89rem}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px;margin:25px 0}.details-grid div{display:flex;gap:12px;align-items:center;font-size:.74rem;font-weight:600}.details-grid i{display:grid;place-items:center;width:35px;height:35px;border-radius:7px;background:var(--blue-light);color:var(--blue)}.details-grid small{display:block;color:var(--body);font-weight:400;margin-bottom:2px}.goal{padding:12px 15px;background:var(--muted);border-radius:7px;font-size:.77rem!important}.goal i{color:var(--blue);margin-right:7px}.skills-section,.experience-section{background:var(--muted)}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.hard-skills,.soft-skills{padding:31px;background:var(--paper);border:1px solid var(--line);border-radius:12px}.hard-skills h3,.soft-skills h3{margin:0 0 25px;font-size:1rem}.hard-skills h3 i,.soft-skills h3 i{color:var(--blue);margin-right:8px}.skill{margin-bottom:17px}.skill div{display:flex;justify-content:space-between;font-size:.74rem;margin-bottom:8px}.skill b{color:var(--blue)}.skill>i{display:block;height:7px;background:var(--line);border-radius:10px;overflow:hidden}.skill em{display:block;height:100%;width:var(--level);background:var(--blue);border-radius:10px}.soft-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.soft-list span{padding:12px 8px;border:1px solid var(--line);border-radius:7px;font-size:.72rem}.soft-list i{color:var(--blue);margin:0 7px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--paper);transition:.3s}.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.project-image{height:190px;position:relative;overflow:hidden}.project-image img{transition:.4s}.project-card:hover img{transform:scale(1.07)}.project-overlay{position:absolute;inset:0;background:rgba(37,99,235,.76);display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transition:.25s}.project-card:hover .project-overlay{opacity:1}.project-overlay a{display:grid;place-items:center;width:38px;height:38px;background:#fff;border-radius:50%;color:var(--blue);text-decoration:none}.project-body{padding:21px;position:relative}.project-number{position:absolute;right:20px;top:18px;color:#cbd5e1;font-weight:800;font-size:1.1rem}.project-body h3{margin:0 0 9px;font-size:1.05rem}.project-body p{color:var(--body);font-size:.75rem;line-height:1.7;min-height:62px}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{color:var(--blue);background:var(--blue-light);font-size:.62rem;font-weight:600;padding:5px 8px;border-radius:4px}.timeline{max-width:760px;margin:auto;position:relative}.timeline:before{content:"";position:absolute;left:18px;top:20px;bottom:20px;width:2px;background:#cbd5e1}.timeline-item{position:relative;display:grid;grid-template-columns:60px 1fr;gap:20px;padding-bottom:40px}.timeline-dot{z-index:1;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff}.timeline-item:last-child{padding-bottom:0}.timeline-item .time{color:var(--blue);font-size:.72rem;font-weight:700;margin:2px 0 5px}.timeline-item h3{font-size:1.05rem;margin:0}.timeline-item h4{font-size:.76rem;color:var(--body);font-weight:500;margin:5px 0}.timeline-item div>p:last-child{color:var(--body);font-size:.78rem;line-height:1.75;margin:0}.contact{padding-bottom:110px}.contact-box{background:linear-gradient(125deg,#1e3a8a,#2563eb);color:#fff;border-radius:15px;padding:58px 65px;display:flex;align-items:center;justify-content:space-between;gap:40px;overflow:hidden;position:relative}.contact-box:after{content:"";position:absolute;width:260px;height:260px;border:50px solid rgba(255,255,255,.07);border-radius:50%;right:-90px;top:-130px}.contact-box .eyebrow{color:#bfdbfe}.contact-box .eyebrow span{background:#bfdbfe}.contact-box h2{font-size:2.35rem;line-height:1.25;margin:0}.contact-box h2 em{color:#bfdbfe}.contact-box p:not(.eyebrow){font-size:.8rem;line-height:1.8;max-width:480px;color:#dbeafe}.contact-actions{min-width:150px;z-index:1}.contact-actions .button{background:#fff;color:var(--blue);white-space:nowrap}.contact-socials{display:flex;justify-content:center;gap:9px;margin-top:16px}.contact-socials a{color:#fff;border-color:rgba(255,255,255,.35)}footer{border-top:1px solid var(--line);padding:24px 0}.footer-content{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-content p{color:var(--body);font-size:.7rem}.footer-content p i{color:#ef4444}.back-top{width:35px;height:35px;border:1px solid var(--line);border-radius:6px}.back-top:hover{color:#fff;background:var(--blue)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}@keyframes blink{50%{opacity:0}}body.dark{--ink:#e8edf7;--body:#aab5c8;--paper:#101827;--muted:#182235;--line:#27344a;--blue-light:#18366c;--nav:rgba(16,24,39,.82);--shadow:0 18px 45px rgba(0,0,0,.25)}body.dark .portrait-frame{border-color:rgba(16,24,39,.6)}
@media(max-width:800px){.nav-links{position:absolute;display:none;top:76px;left:0;width:100%;padding:16px 21px 22px;background:var(--paper);box-shadow:var(--shadow);flex-direction:column;gap:16px}.nav-links.open{display:flex}.menu-toggle{display:block;margin-left:auto}.theme-toggle{margin-left:0}.hero{grid-template-columns:1fr;padding-top:54px;text-align:center;gap:25px}.hero-copy{order:2}.hero .eyebrow{margin-top:12px}.hero-actions,.quick-socials{justify-content:center}.hero-visual{order:1;height:365px}.portrait-frame{width:270px;height:320px}.orb-one{width:285px;height:285px;right:50%;transform:translateX(50%);top:26px}.stats{padding:25px 10px}.stats div{padding:0 15px}.about-grid,.skills-grid{grid-template-columns:1fr;gap:35px}.about-image{height:330px;max-width:370px}.about-image .image-stamp{right:-10px}.project-grid{grid-template-columns:1fr 1fr}.contact-box{padding:42px 35px;display:block}.contact-actions{margin-top:28px}.contact-socials{justify-content:flex-start}.section{padding:80px 0}}
@media(max-width:520px){.container{width:min(100% - 32px,1120px)}.navbar{height:68px}.nav-links{top:68px}.hero{min-height:auto;padding-top:42px}.hero h1{letter-spacing:-2.5px}.hero h2{font-size:1rem}.hero-visual{height:320px}.portrait-frame{width:225px;height:270px}.code-card{left:-4px;top:70px}.location-card{right:-6px;bottom:33px}.stats strong{font-size:1.4rem}.stats p{font-size:.62rem}.stats div{padding:0 8px}.section-heading{margin-bottom:32px}.section-heading h2{font-size:2rem}.text-link{position:static;display:inline-block;margin-top:15px}.details-grid,.soft-list,.project-grid{grid-template-columns:1fr}.details-grid{gap:14px}.project-image{height:210px}.timeline-item{grid-template-columns:48px 1fr;gap:12px}.contact-box{padding:33px 24px}.contact-box h2{font-size:1.9rem}.footer-content{flex-wrap:wrap}.footer-content p{order:3;width:100%;margin:0}.section{padding:66px 0}}

/* Proyek pribadi */
.project-actions{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:20px}.project-actions .text-link{position:static}.add-project{border:0;border-radius:8px;background:var(--blue);color:#fff;padding:10px 14px;font:600 .73rem Poppins,sans-serif;cursor:pointer;box-shadow:0 7px 16px rgba(37,99,235,.2);transition:.25s}.add-project:hover{background:#1d4ed8;transform:translateY(-2px)}.remove-project{position:absolute;right:16px;bottom:15px;width:28px;height:28px;border:0;border-radius:6px;background:#fef2f2;color:#ef4444;cursor:pointer;opacity:0;transition:.2s}.project-card:hover .remove-project{opacity:1}.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.6);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.25s}.modal.open{opacity:1;visibility:visible}.modal-panel{width:min(100%,600px);max-height:min(90vh,740px);overflow:auto;position:relative;padding:36px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.3);transform:translateY(18px) scale(.98);transition:.25s}.modal.open .modal-panel{transform:none}.modal-panel h2{margin:0;font-size:2rem;letter-spacing:-1px}.modal-copy{margin:8px 0 24px;color:var(--body);font-size:.78rem}.close-modal{position:absolute;right:19px;top:19px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--body);cursor:pointer}.close-modal:hover{background:var(--muted);color:var(--ink)}#project-form{display:grid;gap:14px}#project-form label{display:grid;gap:6px;color:var(--ink);font-size:.75rem;font-weight:600}#project-form small{color:var(--body);font-weight:400}#project-form input,#project-form textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:7px;background:var(--muted);color:var(--ink);padding:11px 12px;font:400 .78rem Poppins,sans-serif;outline:none;transition:.2s}#project-form input:focus,#project-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}#project-form .button{border:0;justify-self:start;margin-top:4px}.modal-open{overflow:hidden}
@media(max-width:800px){.project-actions{position:static;margin-top:16px;justify-content:flex-start}.project-actions .text-link{margin:0}.remove-project{opacity:1}}
@media(max-width:520px){.project-actions{gap:13px;align-items:flex-start;flex-direction:column}.form-row{grid-template-columns:1fr}.modal-panel{padding:30px 22px}.modal-panel h2{font-size:1.7rem}}