*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
:root{--bg:#0a0a0a;--surface:#101113;--surface-2:#15171a;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);--text:#f7f7f8;--muted:#a3a7ad;--soft:#717781;--accent:#67d8ff;--accent-2:#7cf8c8;--glow:rgba(64,181,255,.22);--shadow:rgba(0,0,0,.5);--shape-a:rgba(103,216,255,.28);--shape-b:rgba(124,248,200,.2);--shape-c:rgba(117,96,255,.18);--shape-d:rgba(255,214,102,.1)}
html.light{--bg:#f6f8fb;--surface:#ffffff;--surface-2:#edf4f7;--line:rgba(20,39,54,.12);--line-2:rgba(0,109,184,.25);--text:#111827;--muted:#526171;--soft:#788494;--accent:#0077c8;--accent-2:#0f9f72;--glow:rgba(0,119,200,.16);--shadow:rgba(23,47,68,.14);--shape-a:rgba(0,119,200,.22);--shape-b:rgba(15,159,114,.17);--shape-c:rgba(126,87,255,.15);--shape-d:rgba(255,183,77,.2)}
body::before{content:"";position:fixed;inset:-14vh -10vw;z-index:-3;background:radial-gradient(34rem 26rem at 18% 22%,var(--shape-a),transparent 62%),radial-gradient(28rem 24rem at 82% 16%,var(--shape-b),transparent 64%),radial-gradient(32rem 28rem at 70% 78%,var(--shape-c),transparent 66%),radial-gradient(26rem 18rem at 24% 86%,var(--shape-d),transparent 62%);filter:saturate(118%);opacity:.86;animation:shapeDrift 24s cubic-bezier(.45,0,.2,1) infinite alternate;will-change:transform}
body::after{content:"";position:fixed;inset:0;z-index:-4;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 50% 0%,var(--glow),transparent 32rem),var(--bg);background-size:44px 44px,44px 44px,100% 100%,100% 100%}
.spotlight{position:fixed;inset:auto auto 0 0;width:34rem;height:34rem;border-radius:50%;background:radial-gradient(circle,rgba(103,216,255,.13),transparent 68%);pointer-events:none;transform:translate(-50%,-50%);z-index:-2;opacity:.9;transition:opacity .25s}
.page-loader{display:none}
@keyframes loaderOut{0%{opacity:1}70%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes shapeDrift{0%{transform:translate3d(-2vw,-1vh,0) rotate(0deg) scale(1)}45%{transform:translate3d(2vw,1.5vh,0) rotate(7deg) scale(1.025)}100%{transform:translate3d(-1vw,3vh,0) rotate(-6deg) scale(1.045)}}
body[data-page="home"]::before{inset:-18vh -12vw;background:radial-gradient(36rem 14rem at 18% 18%,rgba(103,216,255,.28),transparent 68%),radial-gradient(32rem 13rem at 88% 24%,rgba(124,248,200,.22),transparent 70%),linear-gradient(115deg,transparent 18%,rgba(103,216,255,.09) 30%,rgba(124,248,200,.15) 42%,rgba(117,96,255,.1) 54%,transparent 68%);background-size:115% 115%,110% 110%,140% 120%;background-position:0% 14%,100% 8%,50% 24%;filter:blur(14px) saturate(130%);opacity:.78;mix-blend-mode:screen;transform-origin:50% 12%;animation:auroraDrift 14s ease-in-out infinite alternate;will-change:transform,background-position}
body[data-page="home"]::after{background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 50% 0%,var(--glow),transparent 32rem),radial-gradient(ellipse at 50% -12%,rgba(103,216,255,.12),transparent 42rem),var(--bg);background-size:44px 44px,44px 44px,100% 100%,100% 100%,100% 100%}
html.light body[data-page="home"]::before{background:radial-gradient(36rem 14rem at 18% 18%,rgba(0,119,200,.22),transparent 68%),radial-gradient(32rem 13rem at 88% 24%,rgba(15,159,114,.18),transparent 70%),linear-gradient(115deg,transparent 18%,rgba(0,119,200,.08) 30%,rgba(15,159,114,.12) 42%,rgba(126,87,255,.08) 54%,transparent 68%);background-size:115% 115%,110% 110%,140% 120%;background-position:0% 14%,100% 8%,50% 24%;opacity:.64;mix-blend-mode:multiply}
@keyframes auroraDrift{0%{background-position:0% 14%,100% 8%,16% 0%,84% 6%,50% 24%;transform:translate3d(-7vw,-4vh,0) rotate(-10deg) skewY(-5deg) scale(1.02);filter:blur(24px) saturate(140%) hue-rotate(0deg)}35%{background-position:18% 28%,76% 18%,36% 18%,64% 22%,32% 34%;transform:translate3d(6vw,2vh,0) rotate(7deg) skewY(4deg) scale(1.1);filter:blur(20px) saturate(180%) hue-rotate(22deg)}70%{background-position:34% 8%,62% 30%,48% 4%,44% 34%,70% 14%;transform:translate3d(-3vw,6vh,0) rotate(12deg) skewY(-3deg) scale(1.06);filter:blur(27px) saturate(165%) hue-rotate(-16deg)}100%{background-position:58% 26%,34% 10%,78% 18%,28% 6%,20% 44%;transform:translate3d(5vw,-3vh,0) rotate(-5deg) skewY(5deg) scale(1.14);filter:blur(22px) saturate(190%) hue-rotate(14deg)}}
.site-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;width:min(100% - 2rem,78rem);margin:0 auto;padding:1.7rem 0 1rem;pointer-events:none}
.timezone,.clock{font-size:.875rem;color:var(--text);text-shadow:0 1px 1px rgba(0,0,0,.2)}
body:not([data-page="home"]) .site-header{grid-template-columns:1fr;justify-items:center}
body:not([data-page="home"]) .magic-nav{grid-column:1;justify-self:center}
body:not([data-page="home"]) .timezone,body:not([data-page="home"]) .clock{display:none}
.clock{text-align:right;font-variant-numeric:tabular-nums;display:grid;gap:.06rem;line-height:1.15;justify-self:end}
.clock-time{font-size:1rem;font-weight:750;letter-spacing:.01em}
.clock small{display:block;color:var(--muted);font-size:.68rem;font-weight:700;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:none}
.magic-nav{pointer-events:auto;display:flex;align-items:center;gap:.18rem;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px) saturate(130%);border-radius:999px;padding:.25rem;box-shadow:0 .8rem 2.6rem var(--shadow)}
.magic-nav a,.theme-toggle{height:2.5rem;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:999px;border:0;color:var(--text);background:transparent;padding:0 .82rem;font-size:.875rem;transition:background .25s,transform .25s,color .25s,box-shadow .25s;white-space:nowrap}
.magic-nav a:hover,.theme-toggle:hover,.magic-nav a.active{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--line)}
.magic-nav a:active,.theme-toggle:active{transform:scale(.96)}
.nav-icon{width:2.5rem;padding:0!important}
.nav-icon img{width:1.45rem;height:1.45rem;border-radius:.45rem;object-fit:contain;filter:drop-shadow(0 0 .85rem rgba(124,248,200,.26))}
.nav-icon span{width:1rem;height:1rem;border:1.8px solid currentColor;border-radius:.25rem;position:relative}
.nav-icon span::before{content:"";position:absolute;left:.13rem;right:.13rem;top:-.42rem;height:.65rem;border-left:1.8px solid currentColor;border-top:1.8px solid currentColor;transform:rotate(45deg);border-radius:.1rem}
.nav-mark{width:1rem;height:1rem;display:inline-block;opacity:.82;background:currentColor;mask:var(--nav-icon) center/contain no-repeat;-webkit-mask:var(--nav-icon) center/contain no-repeat}
.nav-img{width:1.05rem;height:1.05rem;border-radius:.32rem;object-fit:contain}
.mark-about{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.mark-work{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M9 20V10'/%3E%3C/svg%3E")}
.mark-blog{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M14 3v4h4M8.5 12h7M8.5 16h7'/%3E%3C/svg%3E")}
.mark-gallery{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='m21 16-5-5L5 19'/%3E%3C/svg%3E")}
.theme-toggle{width:2.5rem;padding:0;border-left:1px solid var(--line);border-radius:0 999px 999px 0}
.theme-toggle span{width:1rem;height:1rem;border:1.5px solid currentColor;border-radius:50%;box-shadow:inset -.32rem -.18rem 0 0 currentColor;transition:box-shadow .25s}
html.light .theme-toggle span{box-shadow:inset 0 0 0 0 currentColor}
.page-shell{width:min(100% - 2rem,48rem);margin:0 auto;padding:5.5rem 0 4rem}
.hero-section{text-align:center;min-height:31rem;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-brand-logo{width:9.2rem;height:auto;object-fit:contain;margin:0 auto 1.55rem;filter:drop-shadow(0 1rem 2.2rem color-mix(in srgb,var(--accent) 18%,transparent))}
h1{font-size:clamp(3rem,8vw,5rem);line-height:.98;letter-spacing:-.04em;margin:0;color:var(--text);text-wrap:balance}
h2{font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.08;letter-spacing:-.03em;margin:0;color:var(--text);text-wrap:balance}
h3{margin:.15rem 0;color:var(--text)}
.hero-copy{font-size:clamp(1.05rem,2.8vw,1.35rem);color:var(--muted);max-width:43rem;margin:1.35rem auto 2.6rem;text-wrap:balance}
.avatar-dot img{width:2rem;height:2rem;border-radius:50%;object-fit:contain;background:#091012}
.featured-card,.mini-project,.newsletter,.post-card,.content-block,.list-card,.skill-grid>div{border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface) 65%,transparent));border-radius:1.35rem;box-shadow:0 1.5rem 5rem var(--shadow)}
.project-card{overflow:hidden;margin:2rem 0 4rem}
.project-media{display:block;min-height:21rem;border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),#050607;padding:0;overflow:hidden}
.project-media.small{min-height:14rem;border-radius:1rem;border:1px solid var(--line);margin-bottom:1.4rem}
.portfolio-photo{width:100%;height:100%;min-height:21rem;object-fit:cover;transition:transform .6s ease,filter .4s ease;filter:saturate(1.04) contrast(1.03)}
.project-media.small .portfolio-photo{min-height:14rem}
.project-card:hover .portfolio-photo,.mini-project:hover .portfolio-photo{transform:scale(1.035);filter:saturate(1.14) contrast(1.06)}
.inline-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:1rem;margin-top:1.2rem;box-shadow:0 1rem 3rem var(--shadow)}
.project-body{padding:1.6rem 1.7rem 1.8rem}.project-body p,.mini-project p{color:var(--muted);margin:.8rem 0 1.3rem}
.text-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--text);font-weight:650;font-size:.94rem}.text-link::after{content:"->";transition:transform .2s}.text-link:hover::after{transform:translateX(.25rem)}.text-link.secondary{color:var(--muted)}
.mockup{height:100%;min-height:17rem;border:1px solid var(--line);border-radius:1rem;background:#0d1217;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.mockup::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.07) 46%,transparent 58%);transform:translateX(-18%);opacity:.55}
@keyframes sheen{0%,45%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
.mockup img{width:10rem;filter:drop-shadow(0 2rem 4rem rgba(103,216,255,.28));z-index:2}.mockup-top{position:absolute;top:1rem;left:1rem;display:flex;gap:.45rem}.mockup-top span{width:.65rem;height:.65rem;border-radius:50%;background:var(--line-2)}
.mockup-grid{position:absolute;right:1.2rem;bottom:1.2rem;width:55%;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.mockup-grid div{height:4rem;border:1px solid var(--line);border-radius:.7rem;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.mockup-pos{background:radial-gradient(circle at 20% 20%,rgba(124,248,200,.24),transparent 34%),#10130f;flex-direction:column;gap:.8rem}.mockup-hris{background:radial-gradient(circle at 80% 15%,rgba(103,216,255,.25),transparent 36%),#0d1016;flex-direction:column;gap:.8rem}
.mockup-pos span,.mockup-hris span{font-size:3rem;font-weight:800;letter-spacing:-.08em}.mockup-pos b,.mockup-hris b{color:var(--muted);font-size:.95rem}
.split-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem;align-items:start;margin:4rem 0}.compact-list{display:grid;gap:.8rem}
.post-row{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;padding:.85rem;border:1px solid transparent;border-radius:1rem;transition:background .22s,border-color .22s,transform .22s}
.post-row:hover{background:var(--surface);border-color:var(--line);transform:translateY(-1px)}
.post-row small,.post-card small{display:block;color:var(--soft);font-size:.76rem}.post-row strong{font-size:.96rem}.post-row em{font-style:normal;color:var(--accent);font-size:.78rem}.avatar-dot img{width:1.5rem;height:1.5rem}
.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0 4rem}.mini-project{padding:1rem 1rem 1.35rem}.link-row{display:flex;gap:1rem;flex-wrap:wrap}
.newsletter{text-align:center;padding:3rem 1.5rem;margin:4rem 0}.newsletter p{color:var(--muted);margin:.9rem 0 1.6rem}.subscribe-form{display:flex;gap:.5rem;justify-content:center;position:relative;max-width:33rem;margin:0 auto}.subscribe-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text);padding:.9rem 1rem;outline:none}.subscribe-form input:focus{border-color:var(--accent)}.subscribe-form button{border:0;border-radius:999px;background:var(--text);color:var(--bg);font-weight:700;padding:.9rem 1.15rem}.sent-note{display:none;position:absolute;top:calc(100% + .7rem);font-size:.82rem;color:var(--accent-2)}.subscribe-form.sent .sent-note{display:block;animation:fadeUp .3s}
.home-admin-toggle{position:fixed;right:1rem;top:1rem;z-index:110;display:inline-grid;place-items:center;width:2.35rem;height:2.35rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);box-shadow:0 .55rem 1.8rem var(--shadow);backdrop-filter:blur(10px);padding:0;font-size:.82rem;font-weight:800}.home-admin-toggle[hidden]{display:none}.home-admin-toggle span{width:.88rem;height:.88rem;border:1.6px solid currentColor;border-radius:.15rem;position:relative}.home-admin-toggle span::after{content:"";position:absolute;right:-.25rem;bottom:-.25rem;width:.48rem;height:.48rem;border-radius:50%;background:var(--accent)}
.home-login-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.46);padding:1rem}.home-login-overlay.open{display:flex}.home-login-modal{background:none;box-shadow:none;max-width:340px;width:100%;padding:0}.home-login-bg{position:relative;width:100%;display:flex;align-items:center;justify-content:center}.home-login-bg>img{width:100%;height:auto;display:block}.home-login-content{position:absolute;inset:22% 18% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center}.home-login-content .lock-icon{width:46px;height:52px;object-fit:contain;margin:0 auto 10px;position:relative}.home-login-content h2{font-size:15px;font-weight:800;margin:0 0 2px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.15)}.home-login-content .sub{font-size:10px;color:rgba(255,255,255,.75);margin-bottom:12px;line-height:1.3;text-align:center}.home-login-content .field{width:100%;margin-bottom:10px}.home-login-content input{width:100%;padding:9px 12px;border:2px solid rgba(255,255,255,.25);border-radius:10px;font-size:12px;outline:none;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);transition:all .3s;text-align:center;letter-spacing:3px;font-weight:700;color:#fff}.home-login-content input::placeholder{letter-spacing:0;font-weight:400;color:rgba(255,255,255,.45);font-size:11px}.home-login-content input:focus{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.18);box-shadow:0 0 0 3px rgba(255,255,255,.08)}.home-login-content input.error{border-color:#fc8181;box-shadow:0 0 0 3px rgba(252,129,129,.2);animation:homeShake .4s}.home-login-content .error-msg{font-size:10px;color:#feb2b2;margin-bottom:8px;min-height:14px;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center}.home-login-content .login-actions{display:flex;gap:8px;width:100%}.home-login-content .login-actions button{flex:1;padding:9px;border:none;border-radius:9px;font-size:11px;font-weight:700;transition:all .25s;cursor:pointer}.home-login-content .btn-login{background:#fff;color:#1a7a5e;box-shadow:0 4px 12px rgba(0,0,0,.1)}.home-login-content .btn-login:hover{box-shadow:0 6px 20px rgba(0,0,0,.15);transform:translateY(-1px)}.home-login-content .btn-login-cancel{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);backdrop-filter:blur(4px)}.home-login-content .btn-login-cancel:hover{background:rgba(255,255,255,.2)}@keyframes homeShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.home-editbar{position:fixed;right:1rem;top:1rem;z-index:115;display:none;align-items:center;gap:.25rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 .55rem 1.8rem var(--shadow);backdrop-filter:blur(12px);padding:.3rem}.home-editbar.open{display:flex}.home-editbar button{border:0;border-radius:999px;background:transparent;color:var(--text);font-weight:800;font-size:.78rem;padding:.48rem .68rem}.home-editbar button:hover{background:rgba(255,255,255,.1)}.home-editbar .danger{color:#ff8a8a}
body.home-editing [data-edit]{outline:1px dashed color-mix(in srgb,var(--accent) 72%,transparent);outline-offset:.22rem;border-radius:.22rem;cursor:text}body.home-editing [data-edit]:focus{outline:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}body.home-editing [data-home-image],body.work-editing [data-work-image],body.gallery-editing [data-gallery-image]{cursor:pointer;outline:2px dashed color-mix(in srgb,var(--accent-2) 75%,transparent);outline-offset:.25rem;filter:saturate(1.08)}body.home-editing [data-home-image]:hover,body.work-editing [data-work-image]:hover,body.gallery-editing [data-gallery-image]:hover{opacity:.82}.image-admin-toggle{left:auto;right:1rem}.project-media:has([data-work-image]){position:relative}body.work-editing .project-media:has([data-work-image])::after,body.gallery-editing [data-gallery-image]::before{content:"Ganti foto";position:absolute;inset:auto 1rem 1rem auto;z-index:5;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.42);color:#fff;backdrop-filter:blur(10px);font-size:.72rem;font-weight:800;padding:.34rem .62rem;text-shadow:none;pointer-events:none}body.gallery-editing [data-gallery-image]::before{inset:1rem 1rem auto auto}
html.light .magic-nav,html.light .gallery-toolbar button{background:rgba(255,255,255,.8)}html.light .magic-nav a:hover,html.light .theme-toggle:hover,html.light .magic-nav a.active{background:linear-gradient(135deg,rgba(0,119,200,.12),rgba(15,159,114,.1));box-shadow:inset 0 0 0 1px rgba(0,119,200,.18)}html.light .featured-card,html.light .mini-project,html.light .newsletter,html.light .post-card,html.light .content-block,html.light .list-card,html.light .skill-grid>div{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(238,247,250,.82));border-color:rgba(0,119,200,.13)}html.light .project-media{background:radial-gradient(circle at 20% 10%,rgba(0,119,200,.16),transparent 44%),radial-gradient(circle at 78% 20%,rgba(15,159,114,.12),transparent 40%),#eaf2f7}html.light .subscribe-form button{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.site-footer{width:min(100% - 2rem,70rem);margin:0 auto;padding:2rem 0 2.5rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.88rem}.site-footer a{color:var(--text)}.social-links{display:flex;gap:.55rem}.social-links a{width:2rem;height:2rem;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:.2s}.social-links a:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px)}
.two-column-page{width:min(100% - 2rem,70rem);display:grid;grid-template-columns:14rem minmax(0,48rem);gap:4rem}.side-rail{position:sticky;top:7rem;align-self:start;display:grid;gap:.55rem}.side-rail a{color:var(--muted);font-size:.9rem;border-left:1px solid var(--line);padding:.3rem 0 .3rem .8rem}.side-rail a:hover{color:var(--text);border-color:var(--accent)}
.profile-top{display:grid;grid-template-columns:10rem 1fr;gap:1.6rem;align-items:center;margin-bottom:2rem}.large-avatar{width:10rem;height:10rem;border-radius:50%;object-fit:contain;background:var(--surface);border:1px solid var(--line);padding:1.2rem}.role,.location-row,.content-block p,.timeline p,.list-card p,.skill-grid span{color:var(--muted)}.chip-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}.chip-row a{border:1px solid var(--line);border-radius:999px;padding:.55rem .85rem;background:var(--surface)}
.content-block{padding:1.4rem;margin:1rem 0}.timeline{display:grid;gap:1rem}.timeline article{border-left:1px solid var(--line);padding-left:1rem}.timeline span{color:var(--accent);font-size:.86rem}.list-card{padding:1rem;margin:.8rem 0}.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.skill-grid>div{padding:1rem;display:grid;gap:.3rem}
.contact-sheet{display:grid;gap:1.15rem;scroll-margin-top:7rem}.contact-head{display:grid;gap:.55rem}.contact-kicker{width:max-content;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:.78rem;font-weight:800;padding:.38rem .68rem}.contact-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.contact-tab{border:1px solid var(--line);border-radius:1rem;background:color-mix(in srgb,var(--surface-2) 70%,transparent);padding:.85rem;transition:transform .22s,border-color .22s,background .22s}.contact-tab:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--surface)}.contact-tab span{display:block;color:var(--soft);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.contact-tab strong{display:block;margin-top:.22rem;color:var(--text);font-size:.92rem}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;position:relative}.contact-form label{display:grid;gap:.35rem;color:var(--muted);font-size:.82rem;font-weight:800}.contact-form label.wide{grid-column:1/-1}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:.95rem;background:var(--surface-2);color:var(--text);outline:none;padding:.82rem .9rem;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.contact-form button{width:max-content;border:0;border-radius:999px;background:var(--text);color:var(--bg);font-weight:800;padding:.85rem 1rem}.contact-form .sent-note{grid-column:1/-1;position:static}.contact-form.sent .sent-note{display:block}
.page-title{margin:2rem 0 3rem}.work-list{display:grid;gap:2rem}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.post-card{padding:1rem;color:var(--text);transition:transform .22s,border-color .22s}.post-card:hover{border-color:var(--line-2)}.post-card h2{font-size:1.2rem;margin:.8rem 0}.post-card span{color:var(--accent);font-size:.85rem}
.post-thumb,.gallery-item,.lightbox-art{height:12rem;border-radius:1rem;border:1px solid var(--line);background-size:cover;background-position:center;position:relative;overflow:hidden}.post-thumb::after,.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.12),transparent);opacity:.6}
.thumb-a{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("maju-operations.webp?v=20260630")}.thumb-b{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("maju-marketplace.webp?v=20260630")}.thumb-c{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("maju-pos.webp?v=20260630")}.thumb-d{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("maju-hris.webp?v=20260630")}.thumb-e{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("marketplace-logo.png")}.thumb-f{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("katalog-icon.png")}.thumb-g{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("pajak-ku.webp?v=20260630")}.thumb-h{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)),url("iq-ku.webp?v=20260630")}
.gallery-shell{width:min(100% - 2rem,70rem);margin:0 auto;padding:5rem 0 4rem}.gallery-hero{text-align:center;max-width:52rem;margin:0 auto 2rem}.gallery-hero p{color:var(--muted);font-size:1.08rem;max-width:42rem;margin:1rem auto 0}.gallery-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 auto 1.25rem}.gallery-toolbar button{border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,transparent);color:var(--muted);padding:.65rem 1rem;font-weight:700;transition:all .22s}.gallery-toolbar button:hover,.gallery-toolbar button.active{color:var(--text);border-color:var(--line-2);background:var(--surface);transform:translateY(-1px)}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:11rem;gap:1rem}.gallery-item{width:100%;height:100%;margin:0;border-radius:1.2rem;display:block;border-color:var(--line);transition:transform .25s,border-color .25s,filter .25s,opacity .2s;grid-column:span 1;grid-row:span 1;padding:0;text-align:left}.gallery-item.wide{height:100%;grid-column:span 2}.gallery-item.tall{height:100%;grid-row:span 2}.gallery-item:hover{transform:translateY(-4px);border-color:var(--line-2);filter:saturate(1.2)}.gallery-item.is-hidden{display:none}.gallery-item span{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;color:#fff;font-size:.9rem;font-weight:800;text-shadow:0 1px 18px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:space-between}.gallery-item span::after{content:"Buka";font-size:.72rem;font-weight:700;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.25rem .55rem;background:rgba(0,0,0,.22);backdrop-filter:blur(10px)}
.lightbox{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(18px);padding:2rem}.lightbox.open{display:grid;animation:fadeUp .25s}.lightbox button{position:absolute;inset:1.5rem 1.5rem auto auto;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text)}.lightbox button::before{content:"x"}.lightbox-art{width:min(42rem,90vw);height:min(30rem,70vh)}.lightbox p{color:var(--text);font-weight:700}
.reveal{opacity:0;transform:translateY(1rem);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}.tilt-card{transform-style:preserve-3d;transition:transform .18s ease,border-color .22s}
@keyframes fadeUp{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
@media (max-width:800px){.site-header{grid-template-columns:1fr;justify-items:center;gap:.6rem;padding-top:1rem}.timezone{display:none}.clock{display:grid;text-align:center;justify-self:center}.magic-nav{max-width:100%;overflow-x:auto}.magic-nav a{padding:0 .72rem}.page-shell{padding-top:3.5rem}.hero-section{min-height:28rem}.project-pair,.split-section,.two-column-page,.profile-top,.post-grid,.contact-tabs,.contact-form{grid-template-columns:1fr}.side-rail{display:none}.skill-grid{grid-template-columns:1fr}.project-media{min-height:17rem}.portfolio-photo{min-height:17rem}.mockup-grid{display:none}.site-footer{flex-direction:column;text-align:center}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:10rem}.gallery-item.wide,.gallery-item.tall{grid-column:span 1;grid-row:span 1}.gallery-hero{text-align:left}.gallery-toolbar{justify-content:flex-start}.subscribe-form{flex-direction:column}.subscribe-form button,.contact-form button{width:100%}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr}.gallery-item.wide,.gallery-item.tall{grid-column:span 1;grid-row:span 1}.gallery-item{min-height:13rem}}
@media (max-width:640px){body{line-height:1.5}.site-header{position:sticky;top:0;width:100%;padding:.62rem .62rem .5rem;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 62%,transparent));backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}.magic-nav{width:100%;max-width:none;border-radius:1rem;padding:.28rem;gap:.12rem;overflow-x:auto;scroll-snap-type:x proximity;box-shadow:0 .5rem 1.7rem color-mix(in srgb,var(--shadow) 68%,transparent);-webkit-overflow-scrolling:touch;scrollbar-width:none}.magic-nav::-webkit-scrollbar{display:none}.magic-nav a,.theme-toggle{height:2.25rem;min-width:max-content;padding:0 .62rem;font-size:.8rem;scroll-snap-align:start}.nav-icon{min-width:2.25rem;width:2.25rem}.nav-icon img{width:1.28rem;height:1.28rem}.nav-mark,.nav-img{width:.95rem;height:.95rem}.page-shell,.gallery-shell{width:min(100% - 1.25rem,48rem);padding:2rem 0 3rem}.hero-section{min-height:auto;padding:3rem 0 2rem;justify-content:flex-start}.hero-brand-logo{width:8.6rem;margin-bottom:1.15rem}h1{font-size:clamp(2.25rem,13vw,3.2rem);line-height:1.02;letter-spacing:-.035em}h2{font-size:clamp(1.38rem,7vw,2rem);line-height:1.12}.hero-copy{font-size:1rem;margin:1rem auto 1.55rem;max-width:30rem}.project-card{margin:1.25rem 0 2.4rem;border-radius:1rem}.featured-card,.mini-project,.newsletter,.post-card,.content-block,.list-card,.skill-grid>div{border-radius:1rem;box-shadow:0 .9rem 2.6rem color-mix(in srgb,var(--shadow) 64%,transparent)}.project-media{min-height:0;aspect-ratio:16/10}.project-media.small{min-height:0;aspect-ratio:16/10;border-radius:.85rem;margin-bottom:1rem}.portfolio-photo,.project-media.small .portfolio-photo{min-height:0;height:100%;aspect-ratio:inherit}.project-body{padding:1.05rem 1rem 1.2rem}.project-body p,.mini-project p{margin:.7rem 0 1rem;font-size:.95rem}.split-section{gap:1rem;margin:2.4rem 0}.post-row{grid-template-columns:auto 1fr;gap:.72rem;border-color:var(--line);background:color-mix(in srgb,var(--surface) 68%,transparent);padding:.8rem}.post-row em{grid-column:2;justify-self:start}.project-pair{gap:1rem;margin:1.5rem 0 2.6rem}.mini-project{padding:.82rem .82rem 1rem}.link-row{gap:.72rem}.newsletter{margin:2.5rem 0 1.5rem;padding:1.8rem 1rem}.newsletter h1{font-size:clamp(1.8rem,10vw,2.5rem)}.subscribe-form input,.subscribe-form button{border-radius:.95rem;min-height:2.9rem}.sent-note{position:static;margin-top:.6rem}.home-admin-toggle,.home-editbar{top:.72rem;right:.72rem}.home-login-overlay{padding:.75rem}.home-login-modal{max-width:min(92vw,330px)}.site-footer{width:min(100% - 1.25rem,70rem);gap:.7rem;padding:1.4rem 0 2rem;font-size:.82rem}.social-links a{width:2.15rem;height:2.15rem}.two-column-page{width:min(100% - 1.25rem,70rem);gap:1.5rem}.profile-top{gap:1rem}.large-avatar{width:7.8rem;height:7.8rem;padding:.9rem}.content-block{padding:1rem}.page-title{margin:1.5rem 0 2rem}.gallery-shell{padding-top:2rem}.gallery-hero{text-align:left;margin-bottom:1.3rem}.gallery-hero p{font-size:.98rem}.gallery-toolbar{gap:.45rem;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:.15rem;scrollbar-width:none}.gallery-toolbar::-webkit-scrollbar{display:none}.gallery-toolbar button{min-width:max-content;padding:.55rem .8rem;font-size:.82rem}.gallery-grid{gap:.72rem;grid-auto-rows:12rem}.gallery-item{border-radius:1rem}.gallery-item span{left:.8rem;right:.8rem;bottom:.8rem;font-size:.84rem}.lightbox{padding:1rem}.lightbox button{inset:1rem 1rem auto auto}.lightbox-art{width:92vw;height:min(58vh,24rem)}}
@media (max-width:380px){.magic-nav a,.theme-toggle{font-size:.76rem;padding:0 .52rem}.page-shell,.gallery-shell,.site-footer,.two-column-page{width:min(100% - 1rem,48rem)}h1{font-size:clamp(2.05rem,12.5vw,2.8rem)}.hero-copy{font-size:.95rem}.post-row strong{font-size:.92rem}.project-body,.mini-project{padding:.82rem}.newsletter{padding:1.4rem .8rem}.home-login-content{inset:20% 16% 19%}.home-login-content .lock-icon{width:40px;height:46px;margin-bottom:7px}.home-login-content h2{font-size:13px}.home-login-content .sub{font-size:9px;margin-bottom:8px}.home-login-content input{padding:8px 10px}.home-login-content .login-actions button{padding:8px 6px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none;filter:none}}