/* Fondasi Liquid Glass: variabel mudah diubah dan kontras tetap terjaga. */
:root{--ink:#16213f;--muted:#58647e;--glass-alpha:.48;--glass-blur:22px;--shadow:0 24px 70px rgba(66,68,115,.15);--radius-xl:34px;--radius-lg:24px;--ease:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;color:var(--ink);font-family:-apple-system,"SF Pro Display","Inter",system-ui,sans-serif;background:linear-gradient(125deg,#d6e7ff 0%,#eee9ff 52%,#d7f3e8 100%);overflow-x:hidden;line-height:1.5}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 16%,rgba(255,255,255,.7),transparent 25%),linear-gradient(125deg,rgba(255,255,255,.15),transparent 55%);z-index:-2}.ambient,.cursor-glow{position:fixed;border-radius:50%;filter:blur(52px);pointer-events:none;z-index:-1}.ambient{opacity:.58;animation:float 18s ease-in-out infinite alternate}.ambient-one{width:32vw;height:32vw;min-width:250px;background:#9fc9ff;top:-12vw;right:9vw}.ambient-two{width:27vw;height:27vw;min-width:220px;background:#cbb5ff;left:-9vw;top:38vh;animation-delay:-6s}.ambient-three{width:25vw;height:25vw;min-width:200px;background:#a4e8cb;right:1vw;bottom:-10vw;animation-delay:-11s}.cursor-glow{width:280px;height:280px;background:rgba(255,255,255,.26);filter:blur(34px);opacity:.7;transform:translate(-50%,-50%)}.glass-card{--x:50%;--y:30%;position:relative;background:rgba(255,255,255,var(--glass-alpha));border:1px solid rgba(255,255,255,.52);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.74),inset 0 -18px 35px rgba(118,132,194,.06);backdrop-filter:blur(var(--glass-blur)) saturate(145%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(145%);overflow:hidden}.glass-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),rgba(255,255,255,.18),transparent 28%);opacity:.85;pointer-events:none}.glass-card:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(130deg,rgba(255,255,255,.86),rgba(255,255,255,.08) 35%,rgba(255,255,255,.34));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8}.site-header,.site-footer,.section-shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding:27px 0;position:relative;z-index:2}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:12px;letter-spacing:.18em}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:var(--ink);color:#c8f5df;font-size:16px;letter-spacing:0}.brand-dot{color:#73a4ff}.glass-button{width:44px;height:44px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(255,255,255,.34);color:var(--ink);font-size:19px;cursor:pointer;transition:transform .3s var(--ease),background .25s}.glass-button:hover{background:rgba(255,255,255,.7);transform:rotate(12deg)}.section-shell{padding:120px 0 55px}.hero{min-height:680px;display:grid;grid-template-columns:1fr 390px;align-items:center;gap:8vw;padding-top:105px;position:relative}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:700;margin:0 0 20px}.status-dot{display:inline-block;width:7px;height:7px;background:#42bd81;border-radius:50%;margin-right:7px;box-shadow:0 0 0 5px rgba(66,189,129,.13)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(54px,8vw,111px);line-height:.89;letter-spacing:-.075em;margin:0 0 30px;font-weight:780}.line-mask{display:block;overflow:hidden}.line-mask>span{display:block;animation:reveal .95s var(--ease) both}.line-mask:nth-child(2)>span{animation-delay:.12s}.line-mask:nth-child(3)>span{animation-delay:.24s}.accent-line{color:#546de4}.hero-intro{max-width:430px;font-size:16px;color:var(--muted);margin-bottom:35px}.hero-actions{display:flex;align-items:center;gap:25px}.primary-button,.text-link{display:inline-flex;align-items:center;gap:18px;text-decoration:none;font-weight:700;font-size:13px}.primary-button{padding:15px 19px;border-radius:50px;background:var(--ink);color:#fff;box-shadow:0 12px 25px rgba(31,46,89,.2);transition:transform .3s var(--ease),box-shadow .3s}.primary-button:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(31,46,89,.27)}.primary-button span{font-size:18px}.text-link{color:var(--ink);border-bottom:1px solid rgba(22,33,63,.35);padding-bottom:4px}.text-link span{font-size:17px}.hero-orbit{width:min(100%,390px);aspect-ratio:1;border-radius:50%;justify-self:end;display:grid;place-items:center;transform:rotate(7deg);animation:drift 8s ease-in-out infinite alternate}.profile-photo{width:56%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#cce1ff,#f2e8ff 55%,#b8eed5);border:8px solid rgba(255,255,255,.48);box-shadow:0 18px 35px rgba(78,92,158,.18);display:grid;place-items:center;overflow:hidden;position:relative;transform:rotate(-7deg)}.profile-photo img{width:100%;height:100%;object-fit:cover;position:absolute;opacity:0}.profile-photo img.loaded{opacity:1}.profile-initials{font-size:clamp(40px,6vw,72px);letter-spacing:-.09em;font-weight:800;color:#fff;text-shadow:0 4px 20px rgba(47,63,132,.25)}.orbit-ring{position:absolute;border:1px solid rgba(255,255,255,.65);border-radius:50%}.ring-one{inset:11%;transform:rotate(38deg) scaleX(.68)}.ring-two{inset:20%;transform:rotate(-42deg) scaleX(1.25)}.orbit-label{position:absolute;bottom:16%;left:8%;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transform:rotate(-7deg)}.orbit-label strong{display:block;color:var(--ink);font-size:11px;line-height:1.2;letter-spacing:0;margin-top:5px}.orbit-star{position:absolute;top:12%;right:12%;font-size:22px;color:#fff;transform:rotate(-7deg)}.hero-stamp{position:absolute;right:0;bottom:50px;font-size:10px;letter-spacing:.2em;color:var(--muted);writing-mode:vertical-rl}.marquee{width:100%;overflow:hidden;border-block:1px solid rgba(22,33,63,.12);padding:16px 0;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.22em}.marquee-track{display:flex;gap:34px;width:max-content;animation:marquee 28s linear infinite}.marquee i{font-style:normal;color:#7087ea;font-size:14px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}.section-heading h2,.contact-card h2{font-size:clamp(35px,5vw,62px);line-height:.98;letter-spacing:-.06em;margin:0;font-weight:780}.section-heading em,.contact-card em{font-style:normal;color:#647be5}.about-grid{display:grid;grid-template-columns:.93fr 1.07fr;gap:20px}.about-statement{min-height:360px;border-radius:var(--radius-xl);padding:44px;display:flex;flex-direction:column;justify-content:space-between}.quote-mark{font-family:Georgia,serif;font-size:72px;line-height:.5;color:#7890ef;margin:0}.big-copy{font-size:clamp(25px,3vw,39px);line-height:1.05;letter-spacing:-.05em;max-width:430px}.signature{font-size:12px;color:var(--muted);font-style:italic}.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fact-card{border-radius:var(--radius-lg);padding:25px;min-height:170px;display:flex;flex-direction:column}.fact-number{font-size:10px;color:#758ae8}.fact-label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:18px 0 auto}.fact-card h3{font-size:25px;letter-spacing:-.04em;margin:0 0 2px}.fact-card p:last-child{font-size:11px;color:var(--muted);margin:0}.works{padding-top:145px}.works-heading{align-items:start}.heading-note{font-size:12px;text-align:right;color:var(--muted);line-height:1.35}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project-button{border:0;text-align:left;cursor:pointer;color:var(--ink);min-height:245px;border-radius:var(--radius-lg);padding:25px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s var(--ease),box-shadow .35s}.project-button:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 30px 55px rgba(66,68,115,.2)}.project-button:nth-child(2),.project-button:nth-child(5){transform:translateY(28px)}.project-button:nth-child(2):hover,.project-button:nth-child(5):hover{transform:translateY(20px) rotate(1deg)}.project-icon{width:70px;height:70px;border-radius:23px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(188,204,255,.3));box-shadow:inset 0 1px 3px #fff,0 12px 25px rgba(94,113,194,.12);font-size:32px}.project-meta{display:flex;justify-content:space-between;align-items:end}.project-meta-title,.project-meta-description{display:block}.project-meta-title{font-size:20px;letter-spacing:-.04em}.project-meta-description{font-size:11px;color:var(--muted);max-width:145px;margin-top:5px}.project-arrow{font-size:21px;color:#687fea}.contact{padding-top:155px;padding-bottom:95px}.contact-card{border-radius:var(--radius-xl);padding:42px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px}.social-button{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.62);padding:12px 15px;border-radius:18px;min-width:210px;transition:transform .3s var(--ease),background .25s}.social-button:hover{transform:translateY(-4px);background:rgba(255,255,255,.72)}.instagram-icon{font-size:30px}.social-button small,.social-button strong{display:block}.social-button small{font-size:9px;color:var(--muted)}.social-button strong{font-size:13px}.social-button b{margin-left:auto;font-size:18px}.site-footer{padding:0 0 125px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:.04em}.site-footer b{color:#7087ea}.dock{position:fixed;z-index:10;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:6px;border-radius:21px;background:rgba(255,255,255,.58);transition:transform .35s var(--ease),padding .35s;box-shadow:0 15px 40px rgba(58,69,132,.2)}.dock:hover{padding:8px 10px}.dock-link{min-width:64px;height:43px;display:grid;place-items:center;border-radius:15px;text-decoration:none;color:var(--muted);font-size:10px;transition:color .25s,background .25s,transform .25s var(--ease)}.dock-link span{font-size:8px;opacity:.55}.dock-link:hover,.dock-link.is-active{color:var(--ink);background:rgba(255,255,255,.56);transform:translateY(-3px)}.sheet-backdrop{position:fixed;z-index:18;inset:0;background:rgba(28,39,72,.17);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.project-sheet,.settings-panel{position:fixed;z-index:19;right:20px;bottom:20px;width:min(500px,calc(100% - 40px));border-radius:32px;padding:43px;box-shadow:0 30px 90px rgba(35,45,96,.28);animation:sheet-in .55s var(--ease)}.project-sheet[hidden],.settings-panel[hidden],.sheet-backdrop[hidden]{display:none}.sheet-close{position:absolute;right:20px;top:20px}.sheet-icon{font-size:55px;margin:30px 0 15px}.project-sheet h2,.settings-panel h2{font-size:42px;letter-spacing:-.06em;line-height:.95;margin:0 0 15px}.project-sheet>p:not(.eyebrow){color:var(--muted);max-width:390px;font-size:15px;margin-bottom:26px}.settings-panel{width:min(360px,calc(100% - 40px))}.settings-panel label{display:block;font-size:12px;color:var(--muted);margin:34px 0 15px}.settings-panel input{width:100%;accent-color:#697fe8}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:8px}.settings-note{font-size:10px;color:var(--muted);margin:35px 0 0}.reveal{animation:rise .8s ease both}@keyframes reveal{from{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes float{to{transform:translate(6vw,4vh) scale(1.12)}}@keyframes drift{to{transform:rotate(-4deg) translateY(-12px)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes sheet-in{from{opacity:0;transform:translateY(100px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:760px){.site-header,.site-footer,.section-shell{width:min(100% - 28px,600px)}.site-header{padding-top:18px}.hero{display:flex;flex-direction:column;align-items:start;min-height:760px;padding-top:80px;gap:50px}.hero-orbit{align-self:center;width:min(80vw,330px)}.hero-stamp{right:4px;bottom:35px}.section-shell{padding-top:90px}.section-heading{display:block}.section-heading h2{margin-bottom:18px}.heading-note{text-align:left}.about-grid{grid-template-columns:1fr}.about-statement{min-height:330px;padding:30px}.facts-grid{gap:10px}.fact-card{min-height:150px;padding:18px}.project-grid{grid-template-columns:repeat(2,1fr);gap:10px}.project-button{min-height:205px;padding:17px;border-radius:22px}.project-button:nth-child(2),.project-button:nth-child(5){transform:none}.project-icon{width:55px;height:55px;border-radius:18px;font-size:25px}.project-meta{display:block}.project-meta-title{font-size:16px}.project-meta-description{font-size:10px}.project-arrow{display:none}.contact-card{display:block;padding:30px}.social-button{margin-top:30px}.site-footer{padding-bottom:100px;display:block}.site-footer span{display:block;margin-top:8px}.dock{bottom:12px}.dock-link{min-width:59px}.project-sheet,.settings-panel{right:10px;bottom:10px;width:calc(100% - 20px);padding:30px}.project-sheet h2,.settings-panel h2{font-size:36px}}@media (prefers-color-scheme:dark){:root{--ink:#eef3ff;--muted:#aeb8d0;--shadow:0 24px 70px rgba(7,13,39,.4)}body{background:linear-gradient(125deg,#18294b,#29244f 55%,#163d43);color:var(--ink)}body:before{background:radial-gradient(circle at 12% 16%,rgba(126,171,255,.22),transparent 25%)}.glass-card{background:rgba(19,31,68,calc(var(--glass-alpha) * .72));border-color:rgba(255,255,255,.2)}.brand,.text-link,.dock-link,.project-button,.social-button{color:var(--ink)}.glass-button,.social-button{background:rgba(255,255,255,.12)}.primary-button{background:#eff4ff;color:#16213f}.marquee{border-color:rgba(255,255,255,.14)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.ambient,.cursor-glow{display:none}.dock:hover{padding:6px}}@media (pointer:coarse){.cursor-glow{display:none}}:focus-visible{outline:3px solid #7189f0;outline-offset:4px}.is-pressed{transform:scale(.97)!important}