:root{--ink-950:#03070d;--ink-900:#050b15;--ink-800:#08111f;--ink-700:#0b1626;--ink-600:#102038;--ink-500:#17304f;--blue-600:#0f6fbf;--blue-500:#1f8fe5;--blue-400:#35a8f0;--blue-300:#6fa8ff;--blue-200:#a9ccff;--blue-100:#dcebff;--gold-600:#a57f2e;--gold-500:#c9a24b;--gold-400:#d9b869;--gold-300:#e4c77e;--gold-100:#f3e6c4;--red-600:#8e0b20;--red-500:#c8102e;--red-400:#e0334e;--white:#fff;--grey-200:#c9d5e4;--grey-300:#9fb2cc;--grey-400:#7c8fa8;--grey-500:#5a6d85;--surface-page:var(--ink-900);--surface-panel:var(--ink-700);--surface-raised:var(--ink-600);--surface-inset:#ffffff0a;--surface-invert:var(--white);--text-primary:var(--white);--text-secondary:var(--grey-200);--text-muted:var(--grey-300);--text-disabled:var(--grey-500);--text-accent:var(--blue-400);--text-gold:var(--gold-300);--text-on-invert:var(--ink-900);--border-subtle:#9fb2cc29;--border-blue:#35a8f066;--border-gold:#c9a24b73;--accent-primary:var(--blue-500);--accent-primary-hover:var(--blue-400);--accent-gold:var(--gold-500);--accent-red:var(--red-500);--status-ok:#2fbf8f;--status-warn:var(--gold-400);--status-alert:var(--red-500);--status-info:var(--blue-400);--grad-panel:linear-gradient(180deg,#0c182a,#060d18);--grad-page:radial-gradient(120% 80% at 78% 8%,#0e2340,#050b15 55%,#03070d);--grad-gold-rule:linear-gradient(90deg,#c9a24b00 0%,var(--gold-500) 35%,var(--gold-100) 50%,var(--gold-500) 65%,#c9a24b00 100%);--grad-blue-mark:linear-gradient(135deg,#0f6fbf,#35a8f0 50%,#a9ccff);--grad-flag:linear-gradient(135deg,var(--red-500) 0%,var(--red-500) 50%,var(--white) 50%,var(--white) 100%);--font-display:"Montserrat","Segoe UI",sans-serif;--font-body:"Plus Jakarta Sans","Segoe UI",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--fw-black:900;--fs-3xs:11px;--fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:36px;--fs-4xl:46px;--fs-5xl:60px;--fs-6xl:76px;--lh-tight:1.04;--lh-snug:1.18;--lh-normal:1.5;--lh-relaxed:1.65;--ls-tight:-.02em;--ls-normal:0;--ls-wide:.06em;--ls-eyebrow:.18em;--type-hero:var(--fw-extrabold) var(--fs-6xl)/var(--lh-tight) var(--font-display);--type-display:var(--fw-extrabold) var(--fs-4xl)/var(--lh-tight) var(--font-display);--type-h1:var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-display);--type-h2:var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-display);--type-h3:var(--fw-bold) var(--fs-xl)/var(--lh-snug) var(--font-display);--type-card-title:var(--fw-bold) var(--fs-sm)/var(--lh-snug) var(--font-display);--type-body:var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-body);--type-body-sm:var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-body);--type-label:var(--fw-semibold) var(--fs-xs)/var(--lh-normal) var(--font-body);--type-eyebrow:var(--fw-bold) var(--fs-2xs)/var(--lh-normal) var(--font-display);--type-tagline:italic var(--fw-bold) var(--fs-xl)/1.3 var(--font-display);--type-mono:var(--fw-medium) var(--fs-2xs)/var(--lh-normal) var(--font-mono);--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:56px;--space-10:72px;--space-11:96px;--space-12:128px;--container-max:1180px;--container-narrow:760px;--gutter:24px;--gutter-lg:40px;--section-pad-y:var(--space-11);--card-pad:var(--space-5);--card-pad-lg:var(--space-6);--nav-height:72px;--grid-gap:20px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-pill:999px;--border-hairline:1px;--border-strong:2px;--shadow-sm:0 2px 8px #00000073;--shadow-md:0 10px 26px #00000080;--shadow-lg:0 22px 60px #0009;--shadow-inset-top:inset 0 1px 0 #ffffff0f;--glow-blue:0 0 0 1px #35a8f059,0 0 28px #1f8fe538;--glow-blue-strong:0 0 0 1px #35a8f099,0 0 40px #1f8fe566;--glow-gold:0 0 0 1px #c9a24b80,0 0 24px #c9a24b2e;--focus-ring:0 0 0 2px var(--ink-900),0 0 0 4px var(--blue-400);--ease-out:cubic-bezier(.22,.61,.36,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--dur-fast:.12s;--dur-base:.2s;--dur-slow:.36s;--transition-base:all var(--dur-base) var(--ease-out);--blur-panel:blur(14px);--scrim-image:linear-gradient(180deg,#03070d00,#03070dd9 70%,#03070d)}*,:after,:before{box-sizing:border-box}body{background:var(--grad-page);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty;margin:0}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--ls-tight);margin:0}p{margin:0}a{color:var(--blue-300);transition:color var(--dur-fast) var(--ease-out);text-decoration:none}a:hover{color:var(--blue-200)}::selection{background:var(--blue-500);color:var(--white)}.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold-300)}.eyebrow--blue{color:var(--blue-300)}.eyebrow--muted{color:var(--text-muted)}.gold-rule{align-items:center;gap:var(--space-2);width:100%;max-width:100%;display:flex}.gold-rule__line{height:var(--border-strong);background:var(--grad-gold-rule);flex:1}.gold-rule__cap{background:var(--gold-400);flex:none;width:8px;height:8px;transform:rotate(45deg)}.btn{font:var(--type-label);font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase;justify-content:center;align-items:center;gap:var(--space-2);border:var(--border-hairline) solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-base);white-space:nowrap;font-size:var(--fs-2xs);padding:12px 22px;text-decoration:none;display:inline-flex}.btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.btn:active:not([aria-disabled=true]){transform:scale(.97)}.btn[aria-disabled=true]{opacity:.4;cursor:not-allowed;box-shadow:none}.btn--sm{font-size:var(--fs-3xs);padding:8px 14px}.btn--md{font-size:var(--fs-2xs);padding:12px 22px}.btn--lg{font-size:var(--fs-xs);padding:16px 32px}.btn--primary{background:var(--accent-primary);color:var(--white);box-shadow:var(--glow-blue)}.btn--gold{background:var(--accent-gold);color:var(--ink-900);box-shadow:var(--glow-gold)}.btn--outline{color:var(--blue-200);border-color:var(--border-blue);background:0 0}.btn--ghost{background:var(--surface-inset);color:var(--text-secondary)}.btn--red{background:var(--accent-red);color:var(--white)}.btn--primary:hover{background:var(--accent-primary-hover);box-shadow:var(--glow-blue-strong)}.btn--gold:hover{background:var(--gold-400)}.btn--outline:hover{border-color:var(--blue-400);color:var(--white);background:#35a8f01f}.btn--ghost:hover{color:var(--white);background:#ffffff17}.btn--red:hover{background:var(--red-400)}.section-header{gap:var(--space-3);text-align:left;flex-direction:column;align-items:flex-start;display:flex}.section-header__title{font:var(--type-h1);color:var(--white)}.section-header .gold-rule{width:160px}.section-header__lead{font:var(--type-body);color:var(--text-muted);max-width:62ch}.section-header--center{text-align:center;max-width:var(--container-narrow);align-items:center;margin-inline:auto}.section-header--center .gold-rule{width:220px}.portrait-frame{width:100%;margin:0;position:relative}.portrait-frame__media{border:var(--border-hairline) solid var(--border-blue);box-shadow:var(--glow-blue);background:var(--ink-800);border-radius:var(--radius-lg);position:relative;overflow:hidden}.portrait-frame--arc .portrait-frame__media{border-radius:50% 50% var(--radius-lg) var(--radius-lg) /34% 34% var(--radius-lg) var(--radius-lg)}.portrait-frame--circle .portrait-frame__media{border-radius:var(--radius-pill)}.portrait-frame__media img{-o-object-fit:cover;object-fit:cover;-o-object-position:center 18%;object-position:center 18%;aspect-ratio:3/4;width:100%;max-width:100%;height:100%;display:block}.portrait-frame--circle .portrait-frame__media img{aspect-ratio:1}.portrait-frame__scrim{background:var(--scrim-image);opacity:.45;pointer-events:none;position:absolute;inset:0}.portrait-frame__caption{margin-top:var(--space-3);font:var(--type-label);color:var(--text-muted);text-align:center}.icon-panel{gap:var(--space-4);padding:var(--card-pad-lg);border-radius:var(--radius-lg);background:var(--grad-panel);border:var(--border-hairline) solid var(--border-blue);box-shadow:var(--shadow-md);transition:var(--transition-base);align-items:flex-start;display:flex}.icon-panel:hover{box-shadow:var(--glow-blue-strong);transform:translateY(-2px)}.icon-panel--gold{border-color:var(--border-gold)}.icon-panel--sm{gap:var(--space-3);padding:var(--space-4)}.icon-panel__icon{-o-object-fit:contain;object-fit:contain;mix-blend-mode:screen;flex:none;width:56px;height:56px}.icon-panel--sm .icon-panel__icon{width:40px;height:40px}.icon-panel__body{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.icon-panel__title{font:var(--type-card-title);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--white)}.icon-panel__text{font:var(--type-body-sm);color:var(--text-secondary)}.stat-card{gap:var(--space-2);padding:var(--card-pad);border-radius:var(--radius-md);background:var(--surface-inset);border-left:var(--border-strong) solid var(--blue-300);box-shadow:var(--shadow-inset-top);flex-direction:column;display:flex}.stat-card--gold{border-left-color:var(--gold-300)}.stat-card__value{font:var(--type-display);font-size:var(--fs-3xl);letter-spacing:var(--ls-tight);color:var(--blue-300)}.stat-card--gold .stat-card__value{color:var(--gold-300)}.stat-card__unit{font-size:var(--fs-lg);color:var(--text-muted);margin-left:4px}.stat-card__label{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}.portfolio-card{border-radius:var(--radius-lg);background:var(--grad-panel);border:var(--border-hairline) solid var(--border-subtle);box-shadow:var(--shadow-md);transition:var(--transition-base);flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.portfolio-card:hover{border-color:var(--blue-400);box-shadow:var(--glow-blue);transform:translateY(-3px)}.portfolio-card__body{gap:var(--space-3);padding:var(--card-pad-lg);flex-direction:column;display:flex}.portfolio-card__title{font:var(--type-h3);font-size:var(--fs-lg);color:var(--white)}.portfolio-card__url{font:var(--type-mono);color:var(--blue-300)}.portfolio-card__text{font:var(--type-body-sm);color:var(--text-muted)}.portfolio-card__tags{gap:var(--space-2);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.tag{font:var(--type-label);font-size:var(--fs-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--gold-300);border:var(--border-hairline) solid var(--border-gold);border-radius:var(--radius-pill);padding:4px 10px}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:after,:before{transition-duration:.01ms!important;animation-duration:.01ms!important}}img{max-width:100%}.skip-link{z-index:100;background:var(--accent-gold);color:var(--ink-900);font:var(--type-label);padding:12px 20px;position:absolute;top:0;left:-9999px}.skip-link:focus{top:8px;left:8px}.nav{z-index:20;height:var(--nav-height);padding:0 var(--space-7);-webkit-backdrop-filter:var(--blur-panel);border-bottom:var(--border-hairline) solid var(--border-subtle);background:#050b15d1;gap:22px;position:sticky;top:0}.nav,.nav__brand{align-items:center;display:flex}.nav__brand{gap:var(--space-3);flex:none;text-decoration:none}.nav__mark{-o-object-fit:contain;object-fit:contain;flex:none;width:auto;height:40px}.nav__wordmark{font:var(--type-h3);font-size:var(--fs-xl);color:var(--gold-300);flex:none}.nav__link,.nav__wordmark{letter-spacing:var(--ls-wide)}.nav__link{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;white-space:nowrap;color:var(--text-muted);border-bottom:var(--border-strong) solid transparent;transition:var(--transition-base);padding-bottom:6px}.nav__link:hover{color:var(--white)}.nav__link.is-active{color:var(--white);border-bottom-color:var(--accent-gold)}.nav__menu{flex:auto;align-items:center;gap:22px;min-width:0;display:flex}.nav__cta,.nav__toggle{flex:none;margin-left:auto}.nav__toggle{border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-inset);width:44px;height:44px;color:var(--text-primary);cursor:pointer;transition:var(--transition-base);justify-content:center;align-items:center;padding:0;display:none}.nav__toggle:hover{border-color:var(--border-blue);background:#ffffff17}.nav__toggle:focus-visible{box-shadow:var(--focus-ring);outline:none}.nav__burger{width:20px;height:2px;transition:background-color var(--dur-fast) var(--ease-out);background:currentColor;display:block;position:relative}.nav__burger:after,.nav__burger:before{content:"";width:20px;height:2px;transition:transform var(--dur-base) var(--ease-out);background:currentColor;position:absolute;left:0}.nav__burger:before{transform:translateY(-6px)}.nav__burger:after{transform:translateY(6px)}.nav__burger.is-open{background:0 0}.nav__burger.is-open:before{transform:rotate(45deg)}.nav__burger.is-open:after{transform:rotate(-45deg)}.nav__backdrop{display:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page{max-width:var(--container-max);padding-block:var(--space-10) var(--space-11);padding-inline:var(--gutter-lg);gap:var(--space-11);margin-inline:auto}.page,.section{flex-direction:column;display:flex}.section{gap:var(--space-8);scroll-margin-top:calc(var(--nav-height) + var(--space-5))}.hero{gap:var(--space-9);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;display:grid}.hero__copy{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.hero__name{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:clamp(34px,6.2vw,68px);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin:0}.hero__name .is-gold{color:var(--gold-300)}.hero .gold-rule{width:260px;max-width:100%}.hero__tagline{font:var(--type-tagline);color:var(--blue-400)}.hero__lead{font:var(--type-body);color:var(--text-secondary);max-width:54ch}.hero__actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.hero .portrait-frame__media img{-o-object-position:center 6%;object-position:center 6%}.grid{gap:var(--grid-gap);display:grid}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stack{gap:var(--space-3);flex-direction:column;display:flex}.visi-panel{gap:var(--space-5);padding:var(--space-7);border-radius:var(--radius-lg);background:var(--grad-panel);border:var(--border-hairline) solid var(--border-gold);box-shadow:var(--glow-gold);display:flex}.visi-panel__icon{-o-object-fit:contain;object-fit:contain;mix-blend-mode:screen;flex:none;width:72px;height:72px}.visi-panel__title{font:var(--type-h2);color:var(--gold-300)}.visi-panel__text{margin-top:var(--space-3);font:var(--type-body);color:var(--text-secondary)}.milestone{gap:var(--space-4);padding:var(--card-pad-lg);border-radius:var(--radius-lg);background:var(--grad-panel);border:var(--border-hairline) solid var(--border-blue);transition:var(--transition-base);display:flex}.milestone:hover{box-shadow:var(--glow-blue);transform:translateY(-2px)}.milestone--gold{border-color:var(--border-gold)}.milestone--gold:hover{box-shadow:var(--glow-gold)}.milestone__index{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-2xl);color:var(--blue-500);flex:none;line-height:1}.milestone--gold .milestone__index{color:var(--accent-gold)}.milestone__title{font:var(--type-h3);font-size:var(--fs-lg);color:var(--white)}.milestone__text{margin-top:var(--space-2);font:var(--type-body-sm);color:var(--text-muted)}.footer{border-top:var(--border-hairline) solid var(--border-subtle);padding-block:var(--space-8);padding-inline:var(--gutter-lg);text-align:center}.footer__logo{width:200px;max-width:60%;height:auto;margin:0 auto var(--space-5);opacity:.9;display:block}.footer p{font:var(--type-body-sm);color:var(--text-muted)}@media (max-width:1139px){.nav__toggle{display:inline-flex}.nav__menu{padding:var(--space-2) var(--gutter) var(--space-5);-webkit-backdrop-filter:var(--blur-panel);border-bottom:var(--border-hairline) solid var(--border-subtle);box-shadow:var(--shadow-lg);max-height:calc(100vh - var(--nav-height));max-height:calc(100dvh - var(--nav-height));overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s;background:#050b15f7;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;overflow-y:auto;transform:translateY(-8px)}.nav__menu.is-open{visibility:visible;opacity:1;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear 0s;transform:none}body.nav-open{overflow:hidden}.nav__backdrop{inset:var(--nav-height) 0 0;z-index:-1;background:#03070d99;display:block;position:fixed}.nav__link{padding:14px var(--space-3);border-bottom:var(--border-hairline) solid #9fb2cc1a;border-left:var(--border-strong) solid transparent}.nav__link.is-active{border-bottom-color:#9fb2cc1a;border-left-color:var(--accent-gold);background:#ffffff0a}.nav__cta{margin-left:0;margin-top:var(--space-4);justify-content:center}}@media (max-width:680px){.nav__mark{height:34px}}@media (max-width:1080px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:900px){.hero{gap:var(--space-8);grid-template-columns:minmax(0,1fr)}.hero__portrait{order:-1;max-width:380px;margin-inline:auto}.grid--split{grid-template-columns:minmax(0,1fr)}.page{gap:var(--space-10);padding-block:var(--space-8) var(--space-10)}}@media (max-width:680px){.nav{gap:var(--space-4)}.footer,.nav,.page{padding-inline:var(--gutter)}.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}.section{gap:var(--space-6)}.section-header__title{font-size:var(--fs-2xl)}.visi-panel{padding:var(--space-5);flex-direction:column}.hero__actions .btn{flex:auto}}@media (max-width:420px){.icon-panel{padding:var(--space-4)}.hero__tagline{font-size:var(--fs-lg)}}ol.grid,ul.grid{margin:0;padding:0;list-style:none}.portrait-frame__media.is-empty{aspect-ratio:3/4;background:var(--grad-panel);place-items:center;display:grid}.portrait-frame__media.is-empty:after{content:"Foto profil belum tersedia";font:var(--type-label);color:var(--text-disabled);text-align:center;padding:var(--space-5)}.portrait-frame__media.is-empty .portrait-frame__scrim{display:none}
