:root{--red:#e8323a;--red2:#ff6b5e;--red3:#b3151d;--blue:#3d3f98;--blue2:#5b6cff;--ink:#16162b;--mut:#5d5f78;--bg:#fff;--soft:#f6f7fb;--line:#e6e7f0;
--serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,system-ui,sans-serif;
--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6V12H0z' fill='%233d3f98'/%3E%3C/svg%3E")}
@media(prefers-color-scheme:dark){:root:not([data-t=l]){--bg:#0f1020;--soft:#16182e;--ink:#f2f3ff;--mut:#a3a6c8;--line:#26294a}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.w{width:min(100% - 48px,1240px);margin-inline:auto}
.serif{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.grad{background:linear-gradient(120deg,var(--red3),var(--red) 40%,var(--red2) 70%,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
/* ombak biru pada elemen yang bisa diklik */
.wv{position:relative;overflow:hidden;isolation:isolate}
.wv::before{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:0;z-index:-1;background:var(--wave) repeat-x bottom/120px 100%,linear-gradient(var(--blue),var(--blue));background-size:120px 14px,100% calc(100% - 13px);background-position:0 0,0 100%;background-repeat:repeat-x,no-repeat;transition:height .6s cubic-bezier(.2,.7,.2,1);animation:sw 2.4s linear infinite;opacity:.96}
.wv:hover::before,.wv:focus-visible::before{height:100%}
@keyframes sw{to{background-position:120px 0,0 100%}}
.wv:hover,.wv:focus-visible{color:#fff}
/* header */
.hd{position:sticky;top:0;z-index:40;height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(24px,4.5%);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--red3),var(--red),var(--blue));transform-origin:left;transform:scaleX(var(--p,0))}
.br{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.br i{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red3));display:grid;place-items:center;box-shadow:0 8px 20px -8px var(--red)}
.br small{display:block;font-size:10px;color:var(--mut);letter-spacing:.14em;font-weight:500}
.nv{display:flex;gap:30px;align-items:center}
.nv a,.nv button{font:500 15px var(--sans);color:var(--mut);background:none;border:0;cursor:pointer;padding:10px 0;position:relative;transition:color .25s}
.nv a::after,.nv button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nv a:hover,.nv button:hover,.nv a.on{color:var(--blue2)}.nv a:hover::after,.nv button:hover::after,.nv a.on::after{transform:scaleX(1);transform-origin:left}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font:600 15px var(--sans);color:#fff;border:0;cursor:pointer;background:linear-gradient(120deg,var(--red3),var(--red) 50%,var(--red2));box-shadow:0 14px 34px -14px rgba(232,50,58,.7);transition:transform .3s,box-shadow .3s}
.pill:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(61,63,152,.65)}
.pill.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--red)}.pill.o:hover{color:#fff}
.tg{display:none;width:44px;height:44px;border-radius:50%;place-items:center;cursor:pointer;color:var(--ink)}.tg input{position:absolute;opacity:0;pointer-events:none}
.tg svg{width:26px;transition:transform .6s ease-out}.tg svg.o{transform:rotate(-45deg)}
.tg .d{stroke-dasharray:12 63;transition:stroke-dasharray .6s ease-out,stroke-dashoffset .6s ease-out}.tg svg.o .d{stroke-dasharray:20 300;stroke-dashoffset:-32.42px}
.mb{display:none}
@media(max-width:900px){.nv,.hd>.pill{display:none}.tg{display:grid}
.mb{display:block;position:fixed;inset:0 0 auto;z-index:39;padding-top:88px;max-height:0;overflow:hidden;opacity:0;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(14px);transition:max-height .5s ease,opacity .3s}
.mb.o{max-height:640px;opacity:1;padding-bottom:24px}.mb a,.mb button{display:block;width:100%;text-align:left;font:400 24px var(--serif);font-style:italic;padding:14px 24px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink)}.mb .pill{margin:18px 24px 0;width:calc(100% - 48px)}}
/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 0;background:radial-gradient(ellipse 55% 42% at 85% 45%,rgba(255,107,94,.2),transparent 70%),radial-gradient(ellipse 45% 40% at 5% 55%,rgba(232,50,58,.12),transparent 70%)}
/* .hero .ey{display:inline-flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.16em;font-weight:600;color:var(--red);text-transform:uppercase}.hero .ey::before{content:"";width:26px;height:2px;background:var(--red)} */

.hero .ey{display:inline-flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.16em;font-weight:600;color:var(--red);text-transform:uppercase}

.hero h1{margin:18px 0 22px;font-size:clamp(46px,8.4vw,116px);line-height:.95}
.hero p.l{max-width:56ch;color:var(--mut);font-size:18px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,7vw,90px);border-top:1px solid var(--line)}
.facts div{padding:22px 18px 22px 0}.facts b{display:block;font:italic 500 clamp(32px,4vw,52px)/1 var(--serif)}.facts span{font-size:12px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.sea{height:70px;background:var(--wave) repeat-x bottom/240px 100%;animation:sw 6s linear infinite;background-size:240px 70px;opacity:.9;margin-top:0}
.sea.b{background:linear-gradient(var(--blue),var(--blue)) bottom/100% 1px no-repeat,var(--wave) repeat-x bottom/240px 70px}
/* sections */
.sec{padding:clamp(64px,9vw,120px) 0}.soft{background:var(--soft)}
.k{font-size:12px;letter-spacing:.16em;font-weight:600;color:var(--red);text-transform:uppercase}
.h2{margin:10px 0 14px;font:italic 500 clamp(36px,5vw,68px)/1.02 var(--serif)}
.lead{color:var(--mut);max-width:60ch;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:40px}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:200px;padding:26px;border-radius:20px;background:var(--bg);border:1px solid var(--line);transition:transform .4s,box-shadow .4s,border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(61,63,152,.55);border-color:var(--blue)}
.card em{font:normal 600 12px var(--sans);letter-spacing:.14em;color:var(--red);transition:color .3s}.card:hover em,.card:hover p{color:#fff}
.card h3{margin:0;font:italic 500 30px/1.05 var(--serif)}.card p{margin:8px 0 0;font-size:14px;color:var(--mut);transition:color .3s}
.vm{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:26px;overflow:hidden;border:1px solid var(--line)}
.vm>div{padding:clamp(28px,4vw,54px)}.vm .a{color:#fff;background:linear-gradient(150deg,var(--red3),var(--red) 55%,var(--red2));position:relative;overflow:hidden}
.vm .a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:var(--wave) repeat-x bottom/160px 60px;animation:sw 5s linear infinite;opacity:.85}
.vm ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:m}.vm li{counter-increment:m;display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.vm li::before{content:"0" counter(m);font:600 12px var(--sans);color:var(--red);padding-top:5px}
.qp{border-radius:26px;padding:clamp(28px,5vw,60px);color:#fff;background:linear-gradient(140deg,#1d1f5e,var(--blue) 60%,#2b2e86);position:relative;overflow:hidden}
.qp ul{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;list-style:none;margin:28px 0 0;padding:0}.qp li{padding:16px 0;border-top:1px solid rgba(255,255,255,.2);color:#dfe1ff;font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}.chip{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font:500 13px var(--sans);cursor:pointer;color:var(--mut)}
.chip.on{background:linear-gradient(120deg,var(--red3),var(--red));color:#fff;border-color:transparent}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.gi{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg);cursor:zoom-in;transition:transform .4s,box-shadow .4s}.gi:hover{transform:translateY(-5px);box-shadow:0 24px 40px -26px rgba(61,63,152,.6)}
.gi div{overflow:hidden;height:210px}.gi img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.gi:hover img{transform:scale(1.07)}
.gi figcaption{padding:12px 16px;font-size:14px;font-weight:500}.gi small{display:block;color:var(--red);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.cl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:34px}
.cl span{padding:34px 12px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font:italic 500 26px var(--serif);color:var(--mut);transition:color .3s,background .3s}.cl span:hover{color:var(--red);background:var(--soft)}
.ct{display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;border:1px solid var(--line)}.ct>div{padding:clamp(28px,4vw,54px)}
.ct dl{margin:20px 0 0}.ct dt{font-size:11px;letter-spacing:.14em;color:var(--red);font-weight:600;margin-top:18px}.ct dd{margin:2px 0 0}
.ct .b{background:linear-gradient(150deg,var(--red3),var(--red) 55%,var(--red2));color:#fff;display:flex;flex-direction:column;gap:16px;justify-content:center}.ct .b .pill{background:#fff;color:var(--red3);align-self:flex-start;box-shadow:none}.ct .b .pill:hover{color:#fff}
/* halaman slug */
.bc ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 22px;font-size:13px;color:var(--mut)}.bc a{color:var(--blue2)}.bc a:hover{text-decoration:underline}
.pg{padding:clamp(28px,5vw,64px) 0 90px}.pg h1{margin:8px 0 18px;font:italic 500 clamp(40px,6.4vw,84px)/1 var(--serif)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,70px);margin-top:44px}
.pts{list-style:none;padding:0;margin:18px 0}.pts li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.pts li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,50,58,.15)}
details{border-top:1px solid var(--line);padding:16px 0}details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}details summary::after{content:"+";color:var(--red);font-size:22px;line-height:1}details[open] summary::after{content:"–"}details p{margin:10px 0 0;color:var(--mut)}
/* footer */
.ft{position:relative;overflow:hidden;color:#f2f3ff;background:radial-gradient(70% 55% at 50% 0,#2a2c7a,#14153f 70%);margin-top:0}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--red2),var(--red),var(--blue2),transparent)}
.ft .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px;padding:clamp(56px,9vw,110px) 0 clamp(36px,5vw,64px)}
.ft .st{margin:0;max-width:14em;font:italic 500 clamp(36px,5.2vw,76px)/1.04 var(--serif)}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,80px);padding:44px 0;border-top:1px solid rgba(255,255,255,.16)}
.ft h4{margin:0 0 18px;font:italic 500 24px var(--serif);color:#ffb3b0}.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:0 0 12px}
.ft .lk{position:relative;display:inline-block;color:#b9bce6;background:none;border:0;padding:2px 0;font:inherit;cursor:pointer;transition:color .25s}.ft .lk::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red2);transform:scaleX(0);transform-origin:right;transition:transform .4s}.ft .lk:hover{color:#fff}.ft .lk:hover::after{transform:scaleX(1);transform-origin:left}
.dot{display:inline-block;position:relative;width:9px;height:9px;border-radius:50%;background:#4ade80;margin-right:12px}.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #4ade80;animation:pg 2.2s ease-out infinite}@keyframes pg{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.mk{--mx:30%;--my:45%;overflow:hidden;text-align:center;white-space:nowrap;user-select:none;font:italic 500 clamp(48px,17vw,270px)/1 var(--serif);padding:.04em .04em .16em;background:radial-gradient(circle 22vw at var(--mx) var(--my),#ff8f86,#e8323a 30%,rgba(255,255,255,.2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft .bt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:#9fa3d6}
.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0));z-index:35;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;box-shadow:0 12px 28px -8px rgba(0,0,0,.4)}
/* veil transisi */
.vl{position:fixed;inset:0;z-index:9999;display:none;overflow:hidden;background:#fff}
.vl i{position:absolute;inset:0}.v1{background:linear-gradient(120deg,var(--red3),var(--red) 45%,var(--red2) 60%,var(--red))}.v2{background:radial-gradient(120% 100% at 50% 40%,#2f329a,#12133a)}
.v2::after{content:"";position:absolute;left:0;right:0;top:0;height:90px;background:var(--wave) repeat-x top/240px 90px;transform:scaleY(-1);animation:sw 4s linear infinite;opacity:.55}
.vt{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;text-align:center}
.vt div{display:flex;overflow:hidden;padding:.12em .1em;font:italic 500 clamp(34px,8.6vw,120px)/1 var(--serif);color:#fff}.vt b{display:inline-block;font-weight:500}
.vt p{margin:0;letter-spacing:.2em;font-size:12px;color:#c9cbff;opacity:0}
/* overlay lokasi */
.lo{position:fixed;inset:0;z-index:9990;visibility:hidden;overflow:auto;background:linear-gradient(180deg,#eef1ff,#fff 60%);color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-t=l]) .lo{background:linear-gradient(180deg,#14163a,#0f1020 60%)}}
.lo .in{display:grid;grid-template-columns:1.4fr .8fr;gap:22px;padding:24px;min-height:100%}.lo .hh{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.lo h2{margin:0;font:italic 500 clamp(34px,5vw,64px)/1 var(--serif)}
.x{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--red);background:none;color:var(--red);font-size:22px;cursor:pointer;transition:.4s}.x:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.mp{position:relative;min-height:380px;border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -34px rgba(61,63,152,.6)}
.mp svg{position:absolute;inset:0;width:100%;height:100%}
.pn{fill:var(--red);stroke:#fff;stroke-width:.6}.rg{fill:none;stroke:var(--red);stroke-width:.5;transform-box:fill-box;transform-origin:center;animation:rg 2.2s ease-out infinite}@keyframes rg{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.6);opacity:0}}
.wl{fill:none;stroke:#fff;stroke-width:.5;opacity:.7;animation:wl 6s ease-in-out infinite alternate}@keyframes wl{to{transform:translateX(-6px)}}
.pan{padding:24px;border-radius:22px;background:var(--bg);border:1px solid var(--line);align-self:start}.pan h3{margin:0 0 10px;font:italic 500 32px var(--serif)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
.lb{position:fixed;inset:0;z-index:9980;display:none;place-items:center;background:rgba(18,19,58,.9);padding:24px;cursor:zoom-out}.lb img{max-height:88vh;border-radius:14px}
@media(max-width:900px){.facts{grid-template-columns:1fr 1fr}.vm,.ct,.two,.qp ul,.lo .in{grid-template-columns:1fr}.ft .cols{grid-template-columns:1fr 1fr}.ft .cols>:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---- tambahan versi Nest (SSR): veil transisi antar-halaman ---- */
/* Head-script menambahkan html.vp saat halaman baru dimuat supaya konten tidak sempat "berkedip" sebelum veil. */
html.vp .vl{display:block}
html.vp:not(.vn) .vt b{transform:translateY(118%)}
html.vn .vt p{opacity:1}

/* ---- Tiger Tear Reveal (port dari 21st.dev) ---- */
.tt{position:relative;width:100%;height:calc(100svh - 88px + 160svh);background:#fff;overflow:clip}
.tt .st{position:sticky;top:88px;height:calc(100svh - 88px);overflow:hidden}
.tt .st.on{cursor:pointer}
.tt svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
/* .tt .hn{position:absolute;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;font:600 10px ui-monospace,Menlo,monospace;letter-spacing:.35em;text-transform:uppercase;color:#16162b} */
.tt .hn {
  z-index: 3;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font: 600 10px ui-monospace, Menlo, monospace;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #16162b
}
.tt .hn i{display:block;width:1px;height:24px;background:currentColor;animation:ttp 1.6s ease-in-out infinite}
@keyframes ttp{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.tt{height:calc(100svh - 88px)}.tt .hn i{animation:none}}


/* ---- Hero: tipografi baru (Bricolage Grotesque) + animasi kata & gelombang ---- */
.hero{--hf:'Bricolage Grotesque',Inter,system-ui,sans-serif}
.hero .ht{margin:18px 0 24px;font:700 clamp(42px,7.2vw,100px)/1 var(--hf);letter-spacing:-.035em;word-spacing:.08em;color:var(--ink)}
/* tiap kata dibungkus "topeng" supaya naik dari bawah garis */
.hero .ht .wm{position:relative;display:inline-block;vertical-align:top;overflow:hidden;padding:.1em .05em .2em;margin:-.1em -.05em -.2em}
.hero .ht .wd{display:inline-block;transform-origin:0 100%;animation:wdUp 1s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i,0) * 90ms) both}
@keyframes wdUp{from{transform:translateY(108%) rotate(5deg);opacity:0}to{transform:none;opacity:1}}
/* kata sorotan: gradient merah yang bergeser pelan + garis gelombang biru di bawahnya */
.hero .ht .hl{background:linear-gradient(100deg,var(--red3),var(--red) 30%,var(--red2) 55%,var(--red) 80%,var(--red3));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wdUp 1s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i,0) * 90ms) both,gsh 6s ease-in-out 1.6s infinite alternate}
@keyframes gsh{to{background-position:100% 0}}
.hero .ht .wm.u::after{content:"";position:absolute;left:.05em;right:.05em;bottom:.07em;height:.11em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q10 0 20 5T40 5' fill='none' stroke='%235b6cff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;background-size:.9em 100%;
  transform-origin:0 50%;animation:hwIn .9s cubic-bezier(.2,.7,.2,1) 1.5s both,hw 2.2s linear 1.5s infinite}
@keyframes hwIn{from{transform:scaleX(0)}}
@keyframes hw{to{background-position:.9em 0}}
.hero .facts b{font:800 clamp(30px,3.6vw,50px)/1 var(--hf);font-style:normal;letter-spacing:-.04em}



/* ===== Layanan 3D (tempel di paling bawah public/css/main.css) ===== */
.l3d{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);gap:24px;margin-top:36px;align-items:start}
.l3d-stage{position:relative;height:clamp(460px,52vw,690px);border-radius:26px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 30%,var(--soft),var(--bg) 78%)}
.l3d-canvas{position:absolute;inset:0}.l3d-canvas canvas{display:block;width:100%;height:100%;cursor:grab}
.l3d-tags{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.l3d-tag{position:absolute;left:0;top:0;display:flex;gap:6px;align-items:center;padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 11px/1.2 var(--sans);letter-spacing:.06em;white-space:nowrap;will-change:transform;transition:opacity .3s,background .25s,color .25s}
.l3d-tag em{display:none;font-style:normal;font-weight:500;letter-spacing:0}
.l3d-tag.on{background:var(--red);color:#fff;z-index:2}.l3d-tag.on em{display:inline}
.l3d-hint{position:absolute;left:18px;top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);pointer-events:none}
.l3d-hint .h-touch{display:none}
@media(pointer:coarse){.l3d-hint .h-fine{display:none}.l3d-hint .h-touch{display:inline}}
.l3d-card{position:absolute;left:16px;bottom:66px;width:min(330px,calc(100% - 32px));padding:14px 18px 16px;border-radius:16px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(22,22,43,.55);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s}
.l3d-card.on{opacity:1;transform:none;pointer-events:auto}
.l3d-card small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--red)}
.l3d-card strong{display:block;margin:4px 0 4px;font:italic 500 28px/1.05 var(--serif)}
.l3d-card p{margin:0 0 10px;font-size:14px;color:var(--mut)}
.l3d-card a{font-size:14px;font-weight:600;color:var(--blue2)}.l3d-card a:hover{text-decoration:underline}
.l3d-ctrl{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.l3d-ctrl button{border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);color:var(--mut);font:500 12px var(--sans);padding:7px 12px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.l3d-ctrl button:hover{color:var(--ink);border-color:var(--blue)}
.l3d-ctrl button[aria-pressed=true]{background:linear-gradient(120deg,var(--red3),var(--red));color:#fff;border-color:transparent}
.l3d-sep{width:1px;height:16px;background:var(--line);margin:0 6px}
.l3d-load{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;gap:12px;align-items:center;font-size:13px;color:var(--mut);transition:opacity .4s}
.l3d-load.done{opacity:0;pointer-events:none}
.l3d-load i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--red);animation:l3dspin 1s linear infinite}
@keyframes l3dspin{to{transform:rotate(360deg)}}
.l3d-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:690px;overflow:auto;padding-right:2px}
.l3d-it{display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);transition:transform .3s,border-color .3s,box-shadow .3s}
.l3d-it em{font:normal 600 12px var(--sans);letter-spacing:.14em;color:var(--red);padding-top:5px}
.l3d-it b{display:block;font:italic 500 23px/1.1 var(--serif)}
.l3d-it small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--mut)}
.l3d-it:hover,.l3d-it.on,.l3d-it:focus-visible{transform:translateX(4px);border-color:var(--blue);box-shadow:0 18px 34px -24px rgba(61,63,152,.6)}
.l3d-it.on em{color:var(--blue2)}
/* fallback: WebGL tidak ada -> tampilkan daftar saja */
.l3d-fail .l3d-stage{display:none}.l3d-fail{grid-template-columns:1fr}.l3d-fail .l3d-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));max-height:none}
@media(max-width:900px){.l3d{grid-template-columns:1fr}.l3d-stage{height:clamp(420px,110vw,560px)}.l3d-list{max-height:none;display:grid;grid-template-columns:1fr 1fr}.l3d-card{bottom:98px}}
@media(max-width:560px){.l3d-list{grid-template-columns:1fr}.l3d-ctrl button{padding:6px 10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.l3d-it,.l3d-card{transition:none}.l3d-load i{animation:none}}

/* ===== Tear Slides (tempel di paling bawah public/css/main.css) ===== */
.tr{--th:clamp(600px,50vw,680px)}
.tr-stage{position:relative;height:var(--th);border-radius:26px;overflow:hidden;border:1px solid var(--line);isolation:isolate;color:#fff;
  background:radial-gradient(60% 70% at 15% 40%,rgba(232,50,58,.28),transparent 70%),radial-gradient(45% 60% at 85% 60%,rgba(91,108,255,.3),transparent 70%),
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(#1a1c55,#0d0e2b)}
.tr-gears{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.tr-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(13,14,43,.88),rgba(13,14,43,.4) 58%,transparent)}
.tr-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--th)*.2) 0 calc(var(--th)*.17)}
.tr-tabs{display:flex;gap:8px;padding:0 clamp(24px,6vw,84px);overflow-x:auto;scrollbar-width:none}
.tr-tabs button{flex:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font:500 12px var(--sans);letter-spacing:.06em;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tr-tabs button:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.tr-tabs button[aria-pressed=true]{background:linear-gradient(120deg,var(--red3),var(--red));color:#fff;border-color:transparent}
.tr-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;overscroll-behavior-x:contain}
.tr-track::-webkit-scrollbar{display:none}
.tr-track:focus-visible{box-shadow:inset 0 0 0 2px var(--red2)}
.tr-s{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,6vw,84px)}
.tr-k{display:block;margin-bottom:14px;font:600 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--red2)}
.tr-s p,.tr-s h2{margin:0;font:italic 500 clamp(24px,2.9vw,40px)/1.22 var(--serif);max-width:22em;color:#fff}
.tr-s .tr-big{font-size:clamp(38px,5.2vw,76px);line-height:1.04;max-width:14em}
.tr.js .tr-s>*{opacity:.15;transform:translateX(30px);transition:opacity .5s,transform .65s cubic-bezier(.2,.7,.2,1)}
.tr.js .tr-s.on>*{opacity:1;transform:none}
.tr.js .tr-s.on>:nth-child(2){transition-delay:.08s}
.tr-ctl{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(24px,6vw,84px);margin-top:10px}
.tr-info{display:flex;align-items:center;gap:18px;min-width:0}
.tr-cnt{font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:rgba(255,255,255,.7);white-space:nowrap}
.tr-dots{display:flex;align-items:center;gap:7px}
.tr-d{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.25);cursor:pointer;transition:background .3s,box-shadow .3s,transform .3s}
.tr-d.gs{margin-left:9px}
.tr-d:hover{background:rgba(255,255,255,.6)}
.tr-d[aria-current=true]{background:var(--red2);box-shadow:0 0 12px var(--red2);transform:scale(1.3)}
.tr-nav{display:flex;gap:8px}
.tr-nav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s}
.tr-nav button:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.tr-nav button:disabled{opacity:.3;cursor:default}
.tr button:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.tr-paper{position:absolute;inset:0;z-index:5;background:#fff;pointer-events:none}
.tr-paper.ready{background:none}
.tr-paper svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;overflow:visible}
@media(max-width:900px){.tr{--th:680px}.tr-shade{background:linear-gradient(90deg,rgba(13,14,43,.85),rgba(13,14,43,.6))}}
@media(max-width:520px){.tr-cnt{display:none}.tr-dots{gap:5px}.tr-d{width:8px;height:8px}.tr-nav button{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.tr.js .tr-s>*{transition:none;transform:none}}


/* ===== Layanan: carousel swipe di mobile ===== */
@media (max-width: 900px) {
  .l3d-list {
    display: flex;
    flex-direction: row;
    gap: 12px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 4px 0 12px;
  }
  .l3d-list::-webkit-scrollbar { display: none; }
  .l3d-list > li { flex: 0 0 86%; display: flex; scroll-snap-align: start; scroll-snap-stop: always; }
  .l3d-list > li > .l3d-it { flex: 1; }
  /* matikan efek geser saat hover/tap supaya kartu tidak "goyang" di layar sentuh */
  .l3d-it:hover, .l3d-it.on, .l3d-it:focus-visible { transform: none; }
}

.br-logo{width:44px;height:44px;object-fit:contain;display:block}


/* ===== Klien & Mitra: infinite logo slider ===== */
.lg{position:relative;margin-top:34px;overflow:hidden;padding:14px 0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lg-track{display:flex;width:max-content;animation:lgScroll 32s linear infinite;will-change:transform}
.lg:hover .lg-track,.lg:focus-within .lg-track,.lg:active .lg-track{animation-play-state:paused}
@keyframes lgScroll{to{transform:translateX(-50%)}}

.lg-it{flex:none;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;
  width:190px;height:96px;margin-right:18px;padding:18px 24px;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 14px 30px -22px rgba(22,22,43,.45);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.lg-it img{width:100%;height:100%;object-fit:contain;
  transition:filter .35s,opacity .35s,transform .35s}
.lg-it:hover,.lg-it:focus-visible,.lg-it:active{transform:translateY(-6px);border-color:var(--blue);
  box-shadow:0 24px 40px -20px rgba(61,63,152,.55)}

/* abu-abu di desktop, berwarna saat di-hover (di HP tetap berwarna) */
@media(hover:hover){
  .lg-it img{filter:grayscale(1);opacity:.65}
  .lg-it:hover img,.lg-it:focus-visible img{filter:none;opacity:1;transform:scale(1.06)}
}

/* logo muncul bergantian saat section masuk layar */
.lg.in .lg-it{animation:lgPop .8s cubic-bezier(.2,.7,.2,1) backwards}
.lg.in .lg-it:nth-child(2){animation-delay:.08s}
.lg.in .lg-it:nth-child(3){animation-delay:.16s}
.lg.in .lg-it:nth-child(4){animation-delay:.24s}
.lg.in .lg-it:nth-child(5){animation-delay:.32s}
.lg.in .lg-it:nth-child(6){animation-delay:.40s}
.lg.in .lg-it:nth-child(7){animation-delay:.48s}
@keyframes lgPop{from{opacity:0;transform:translateY(24px) scale(.92);filter:blur(8px)}}

.lg-note{margin:0;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

@media(max-width:560px){
  .lg-it{width:150px;height:80px;margin-right:12px;padding:14px 18px}
  .lg-track{animation-duration:24s}
}

/* reduced motion: tanpa animasi, jadi biarkan digeser manual */
@media(prefers-reduced-motion:reduce){
  .lg{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .lg-track{width:auto}
  .lg-it[aria-hidden="true"]{display:none}
}


/* ---- Sambungan ke section Kontak: putih -> abu lembut ---- */
#kontak.soft{background:linear-gradient(180deg,var(--bg) 0,var(--soft) 220px)}

/* ---- Sambungan Proyek (navy) -> Klien (putih): memudar + cahaya merah/biru yang bergeser ---- */
#klien{position:relative;padding-top:clamp(96px,12vw,170px)}
#klien>.w{position:relative;z-index:1}
#klien::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;z-index:0;
  background:
    radial-gradient(35% 70% at var(--bx,15%) 45%,rgba(232,50,58,.35),transparent 70%),
    radial-gradient(35% 70% at calc(100% - var(--bx,15%)) 45%,rgba(91,108,255,.30),transparent 70%),
    linear-gradient(180deg,#0f1030 0,rgba(15,16,48,.55) 35%,rgba(15,16,48,.12) 75%,transparent);
  animation:seamBlob 12s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){#klien::before{animation:none}}