[hidden]{display:none !important}
:root{--ink:#0E0F12;--fog:#EAEAEA;--mute:#A3A7B0;--line:#2A2D33;--accent:#FDCA0D}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--fog);font-family:'Jost','Futura','Trebuchet MS',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}a:hover{color:var(--accent)}
a.btn,a.btn:hover,button.btn{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
.k{font-family:'Krona One','Arial Black',sans-serif;font-weight:400}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.site{container-type:inline-size;container-name:site;width:100%;overflow-x:clip}
.pad{padding-left:clamp(20px,6.6cqi,96px);padding-right:clamp(20px,6.6cqi,96px)}
.sec{padding-top:clamp(72px,9cqi,136px);padding-bottom:clamp(72px,9cqi,136px)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5cqi,72px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6cqi,20px)}
.g8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.glay{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5cqi,80px);align-items:center}
.gfaq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6cqi,96px)}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.h2{font-size:clamp(28px,3.9cqi,56px);line-height:1.12;letter-spacing:-.02em}
.lead{font-size:18px;line-height:1.6;max-width:440px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 26px;background:var(--accent);border:none;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.ghost{display:inline-flex;align-items:center;min-height:58px;padding:0 26px;border:1.5px solid #4A4E57;font-size:17px;font-weight:500;text-decoration:none}
.grid-ms{background-color:var(--ink);background-image:linear-gradient(rgba(234,234,234,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(234,234,234,.045) 1px,transparent 1px),linear-gradient(rgba(234,234,234,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(234,234,234,.02) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* header */
.hdr{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;min-height:76px;background:rgba(14,15,18,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav{display:flex;gap:32px;font-size:16px}
.nav a{text-decoration:none}
.langs{display:flex;border:1px solid var(--line);margin-left:auto}
.langs button{min-width:44px;min-height:40px;border:none;background:transparent;color:var(--mute);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--fog);color:var(--ink)}
.menu-btn{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--fog);cursor:pointer}
.mnav{display:none;flex-direction:column;border-bottom:1px solid var(--line);background:var(--ink)}
.mnav.open{display:flex}
.mnav a{padding:18px 20px;border-top:1px solid var(--line);font-size:18px;text-decoration:none}
/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:calc(100svh - 77px);display:flex;flex-direction:column;justify-content:space-between;cursor:crosshair}
.hero h1{font-size:clamp(32px,4cqi,58px);line-height:1.1;letter-spacing:-.02em}
.hero h1 span{display:block}
.xh{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:1}
.xh .v{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(234,234,234,.35)}
.xh .h{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(234,234,234,.35)}
.xh .b{position:absolute;left:0;top:0;width:12px;height:12px;border:1px solid var(--fog)}
.xh .l{position:absolute;left:0;top:0;padding:4px 8px;background:#17191D;border:1px solid var(--line);font-size:12px;white-space:nowrap}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.pop{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.fade{opacity:0;animation:fade .8s ease forwards}
.type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:type 1.1s steps(15) 3.4s forwards}
.caret{display:inline-block;width:.6em;height:1.1em;vertical-align:-3px;background:var(--fog);animation:blink 1s steps(1) infinite}
/* model */
.model{display:flex;flex-direction:column;gap:12px;width:100%}
.model svg{display:block;width:100%;height:auto;aspect-ratio:600/520;touch-action:pan-y;cursor:grab;user-select:none}
.model svg.drag{cursor:grabbing}
.model .lyr{transition:opacity .35s}
.mctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.chip{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line);background:rgba(14,15,18,.8);color:#6B6F78;font:inherit;font-size:14px;cursor:pointer}
.chip .sw{width:11px;height:11px;opacity:.3}
.chip[aria-pressed="true"]{color:var(--fog);border-color:#4A4E57}
.chip[aria-pressed="true"] .sw{opacity:1}
.ibtn{width:40px;height:40px;border:1px solid var(--line);background:rgba(14,15,18,.8);color:var(--fog);cursor:pointer;display:flex;align-items:center;justify-content:center}
.model input[type=range]{width:130px;accent-color:var(--accent)}
/* wizard */
.opt{min-height:56px;padding:0 22px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.opt:hover{background:rgba(14,15,18,.07)}
.opt.on{background:var(--ink);color:var(--fog)}
#wizItems{margin:0;padding:0;list-style:none}
#wizItems li{border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px}
#wizItems .num{font-size:12px;color:var(--accent)}
#wizItems .nm{font-size:17px;line-height:1.3}
#wizItems .why{font-size:16px;line-height:1.55;color:var(--mute)}
/* layers */
.lrow{display:grid;grid-template-columns:14px minmax(0,1fr);gap:22px;width:100%;padding:28px 24px;border:none;border-top:1px solid var(--line);background:transparent;color:var(--fog);font:inherit;text-align:left;cursor:pointer;transition:background .3s,opacity .3s}
.lrow:hover,.lrow.on{background:#17191D}
.lrow.dim{opacity:.45}
.lrow .sw{width:14px;height:14px;margin-top:8px}
.lrow .ttl{font-size:clamp(20px,2cqi,28px)}
.lrow .dsc{display:block;font-size:16px;line-height:1.5;color:var(--mute);margin-top:10px}
.ppl{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
.person{display:flex;align-items:center;gap:12px}
.ava{width:44px;height:44px;flex-shrink:0;background:#22252A;display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover}
.sec-fig{margin:0;padding:24px;border:1px solid var(--line);background:#0B0C0F}
.sec-fig .lyr{transition:opacity .35s}
/* steps */
.sbtn{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0;border:none;background:transparent;color:var(--mute);font:inherit;font-size:14px;line-height:1.35;text-align:left;cursor:pointer}
.sbtn:hover,.sbtn.on{color:#fff}
.tick{width:48px;height:48px;border-radius:50%;border:2px solid #4A4E57;background:#17191D;color:var(--mute);display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.sbtn.done .tick{background:var(--fog);border-color:var(--fog);color:var(--ink)}
.sbtn.on .tick{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.bar{transition:width .6s cubic-bezier(.2,.7,.2,1)}
.nav-b{min-height:48px;padding:0 20px;border:1px solid #4A4E57;background:transparent;color:var(--fog);font:inherit;font-size:16px;cursor:pointer}
.nav-b:hover{border-color:var(--fog)}
/* projects */
.card{display:block;border:1.5px solid var(--ink);background:#fff;color:var(--ink);text-decoration:none}
.card .ph{position:relative;overflow:hidden;height:clamp(260px,30cqi,440px)}
.card .ph>*{position:absolute;inset:0;width:100%;height:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card .ph img{object-fit:cover}
.card:hover .ph>*{transform:scale(1.05)}
.card .ph .bp{display:flex;align-items:center;justify-content:center}
.tb{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,1fr);border-top:1.5px solid var(--ink)}
.tb>div{padding:16px 18px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--ink)}
.tb>div:last-child{border-right:none}
.tb .lb{font-size:13px;color:#4F535B}
.more{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 32px;border:1.5px solid var(--ink);text-decoration:none;color:var(--ink);transition:background .3s}
.more:hover{background:var(--accent);color:var(--ink)}
.more .arw{transition:transform .3s}
.more:hover .arw{transform:translateX(10px)}
/* faq */
.qbtn{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:76px;padding:0;border:none;background:transparent;color:var(--ink);font:inherit;font-size:clamp(18px,1.6cqi,22px);font-weight:500;text-align:left;cursor:pointer}
.qa{padding:0 48px 26px 0;font-size:17px;line-height:1.7;color:#3A3D44}
/* contact */
.office{border:1px solid var(--line);background:var(--ink);padding:20px;display:flex;flex-direction:column;gap:8px;text-decoration:none}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:15px;font-weight:500}
.field input,.field textarea{width:100%;height:50px;padding:0 14px;border:1px solid #6E717A;background:#fff;font:inherit;font-size:17px;color:var(--ink)}
.field textarea{height:auto;padding:12px 14px;resize:vertical}
.fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s}
.fab:hover{transform:scale(1.06);color:var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes type{to{width:15ch}}
@keyframes blink{50%{opacity:0}}
@container site (max-width: 860px){
.g2,.glay,.gfaq{grid-template-columns:minmax(0,1fr)}
.g3{grid-template-columns:minmax(0,1fr)}
.g8{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
.row{flex-direction:column;align-items:flex-start}
.nav,.hide-sm{display:none}
.menu-btn{display:flex}
.opt{width:100%}
.hero{min-height:0;cursor:auto}
.tb{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tb>div:first-child{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--ink)}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.rise,.pop,.fade{animation:none;opacity:1}
.type{animation:none;width:15ch}
.caret{animation:none}
}
/* ===== halaman proyek ===== */
.crumb{display:flex;gap:10px;font-size:13px;color:var(--mute)}
.crumb a{text-decoration:none}
.fchip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.fchip .n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#4F535B}
.fchip:hover{background:rgba(14,15,18,.07)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--fog)}
.fchip[aria-pressed="true"] .n{color:var(--accent)}
.vtog{display:flex;border:1.5px solid var(--ink)}
.vtog button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:none;background:transparent;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.vtog button[aria-pressed="true"]{background:var(--ink);color:var(--fog)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2cqi,24px)}
.pgrid .card .ph{height:auto;aspect-ratio:4/3}
.tbp{grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.7fr)}
.tbp>div.full{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--ink)}
.reg-wrap{border:1.5px solid var(--ink);background:#fff}
.reg{width:100%;border-collapse:collapse;color:var(--ink)}
.reg th{text-align:left;font-weight:500;font-size:13px;color:#4F535B;padding:14px 18px;border-bottom:1.5px solid var(--ink)}
.reg td{padding:18px;border-bottom:1px solid #D0D1D4;font-size:16px;vertical-align:middle}
.reg tr:last-child td{border-bottom:none}
.reg tbody tr{transition:background .2s}
.reg tbody tr:hover{background:#F6F2E2}
.reg .nm{font-family:'Krona One','Arial Black',sans-serif;font-size:15px}
.reg .th{width:64px;height:48px;position:relative;overflow:hidden;background:#17191D}
.reg .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@container site (max-width: 1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container site (max-width: 860px){
.pgrid{grid-template-columns:minmax(0,1fr)}
.reg .c-kat,.reg .c-sheet,.reg .c-th{display:none}
.tbp{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}
.tbp .mono{white-space:nowrap}
.reg td,.reg th{padding:14px 12px}
}


/* logo */
.brand-mark{height:36px;width:auto;display:block}
.foot-logo{height:72px;width:auto;display:block;align-self:flex-start}
.logo-ghost{display:block;width:min(1100px,64cqi);height:auto;margin-left:clamp(12px,3cqi,48px);margin-bottom:-6cqi;pointer-events:none;user-select:none}
@container site (max-width: 860px){.brand-mark{height:32px}.foot-logo{height:60px}}

/* klien */
.clients{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cl{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(104px,9.5cqi,140px);padding:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(10px,.98cqi,14px);text-decoration:none;transition:background .35s}
.cl .lg{position:relative;display:block;height:var(--h);width:min(calc(var(--h) * var(--r)),88%)}
.cl .lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.cl .m{opacity:.72}
.cl .c{opacity:0}
.cl:hover{background:#fff}
.cl.gelap:hover{background:#17191D}
.cl:hover .m{opacity:0}
.cl:hover .c{opacity:1}
.cl.stat{flex-direction:column;gap:6px;color:var(--fog)}
.cl.stat:hover{background:var(--accent);color:var(--ink)}
.cl.stat .num{font-family:'Krona One','Arial Black',sans-serif;font-size:2.2em;color:var(--accent);transition:color .35s}
.cl.stat:hover .num{color:var(--ink)}
.cl.stat .lbl{font-size:1.1em;text-align:center}
@container site (max-width: 1100px){.clients{grid-template-columns:repeat(4,minmax(0,1fr))}.cl{font-size:12px}}
@container site (max-width: 860px){.clients{grid-template-columns:repeat(2,minmax(0,1fr))}.cl{font-size:12.5px;min-height:96px}}