/* ============================================================
   NOVEMBR PROJECT — monochrome editorial system
   ============================================================ */
:root{
  --black:#0a0a0a; --card:#101012;
  --white:#f4f3f0; --white-hi:#ffffff;
  --g1:#a7a7a3; --g2:#6f6f6b; --g3:#454542;
  --line-d:rgba(255,255,255,.10); --line-l:rgba(10,10,10,.14);
  --ease:cubic-bezier(.22,.9,.3,1);
  --nav-h:64px;
  --fd:'Anton',Impact,'Arial Narrow',sans-serif;
  --fb:'Space Grotesk','Helvetica Neue',Helvetica,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
html.js{scroll-padding-top:80px}
body{
  margin:0; background:var(--black); color:var(--white);
  font:400 16px/1.6 var(--fb);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; user-select:none; -webkit-user-drag:none}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--white); color:var(--black)}
.sec-light ::selection{background:var(--black); color:var(--white)}

:focus-visible{outline:2px solid currentColor; outline-offset:3px; border-radius:2px}
.sr-only,.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip:focus{position:fixed; z-index:200; top:12px; left:12px; width:auto; height:auto; clip:auto;
  background:var(--white); color:var(--black); padding:10px 16px; border-radius:8px; font-weight:600}

/* Scrollbar selaras dgn tema monokrom */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:#26262b; border:2px solid var(--black); border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#38383f}
html{scrollbar-color:#26262b var(--black); scrollbar-width:thin}

.container{width:min(1180px, 100% - clamp(40px,10vw,168px)); margin-inline:auto}

/* Film grain overlay */
.grain{position:relative}
.grain::after{content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:var(--grain); background-size:140px; opacity:.055; mix-blend-mode:overlay}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.7em; text-decoration:none;
  font:600 12px/1 var(--fb); letter-spacing:.18em; text-transform:uppercase;
  padding:1.1em 1.8em; border-radius:999px; border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn-solid{background:var(--white); color:var(--black)}
.btn-solid:hover{background:var(--white-hi)}
.btn-ghost{border-color:rgba(255,255,255,.55); color:var(--white); background:rgba(255,255,255,.07);
  position:relative; overflow:hidden}
.btn-ghost:hover{border-color:var(--white); background:rgba(255,255,255,.16)}
.btn-ghost::before{content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform:skewX(-18deg); pointer-events:none}
.btn-ghost:hover::before{animation:btn-shine .7s var(--ease)}
@keyframes btn-shine{to{left:130%}}
.btn-xl{padding:1.35em 2.4em; font-size:13px}
.sec-light .btn-ghost{border-color:rgba(10,10,10,.35); color:var(--black)}
.sec-light .btn-ghost:hover{border-color:var(--black)}

/* ---------- Sections ---------- */
.sec{position:relative; padding-block:clamp(110px,16vh,200px); scroll-margin-top:70px}
.sec-dark{background:var(--black); color:var(--white)}
.sec-light{background:var(--white); color:var(--black)}
.sec-label{display:flex; align-items:center; gap:12px;
  font:600 11px/1 var(--fb); letter-spacing:.34em; opacity:.55; margin-bottom:clamp(20px,3vh,36px)}
.sec-label::before{content:''; width:28px; height:1px; background:currentColor}
.sec-title{font-family:var(--fd); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6.6rem); line-height:.94; letter-spacing:.005em}
.sec-title .ind{padding-left:clamp(2.5rem,12vw,11rem)}
.sec-sub{margin-top:clamp(18px,2.5vh,26px); color:var(--g1); max-width:44ch}
.sec-light .sec-sub{color:var(--g2)}
.sec-hint{margin-top:clamp(22px,3vh,32px); font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.45}

.t-outline{color:inherit}
@supports (-webkit-text-stroke:1px #000){
  .t-outline{color:transparent; -webkit-text-stroke:2px var(--strokec, var(--white))}
  .sec-light .t-outline, .sec-light .pv-big, .sec-light .wbig{--strokec:var(--black)}
}

/* ---------- Reveal system (JS adds .is-in per section; no-JS shows all) ---------- */
.js .sec .rv{opacity:0; transform:translateY(46px); filter:blur(7px); will-change:transform,opacity;
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay:var(--d,0s)}
.js .sec.is-in .rv{opacity:1; transform:none; filter:none}
.line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.js .line-in{display:block; transform:translateY(122%) rotate(2deg);
  transition:transform 1.15s var(--ease); transition-delay:var(--d,0s)}
.js .sec.is-in .line-in{transform:none}

/* Garis pembatas atas section "menggambar" saat reveal */
.sec::before{content:''; position:absolute; inset:0 0 auto 0; height:1px; opacity:.15;
  background:linear-gradient(90deg, transparent, currentColor 35%, currentColor 65%, transparent);
  transform:scaleX(0); transition:transform 1.4s var(--ease)}
.sec:not(.hero).is-in::before{transform:scaleX(1)}

/* Stagger cascade kartu di row & carousel (muncul beruntun) */
.wrow .wcard.rv:nth-child(2){--d:.07s}
.wrow .wcard.rv:nth-child(3){--d:.14s}
.wrow .wcard.rv:nth-child(4){--d:.21s}
.wrow .wcard.rv:nth-child(5){--d:.28s}
.wrow .wcard.rv:nth-child(6){--d:.35s}
.wrow .wcard.rv:nth-child(7){--d:.42s}
.wrow .wcard.rv:nth-child(8){--d:.49s}
.wrow .wcard.rv:nth-child(9){--d:.56s}
.cc-track .ccard.rv:nth-child(2){--d:.1s}
.cc-track .ccard.rv:nth-child(3){--d:.2s}
.sec-head .rv:nth-child(n+2){--d:.12s}

/* ---------- Nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:80;
  transition:transform .45s var(--ease), background .4s, border-color .4s, opacity .35s var(--ease), visibility 0s}
.nav.hidden{transform:translateY(-100%)}
.nav-in{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between}
.nav.scrolled{background:rgba(10,10,10,.55); border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.scrolled{background:rgba(10,10,10,.94)}
}
.brand{display:flex; align-items:center; gap:.6em; text-decoration:none; padding-block:8px}
.brand-logo{height:30px; width:auto; display:block}
.brand-name{font:400 30px/30px var(--fd); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
/* efek ketikan: caret berkedip saat mengetik (dikontrol app.js) */
.brand-name.caret::after{content:'|'; margin-left:.08em; font-weight:400; animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}

.nav-links{display:flex; align-items:center}
.nav-links a,.nav-btn{position:relative; text-decoration:none;
  font:600 11px/1 var(--fb); letter-spacing:.22em; padding:12px 2px;
  margin-left:clamp(16px,3vw,34px)}
.nav-links a::after,.nav-btn::after{content:''; position:absolute; left:0; bottom:7px;
  width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease)}
.nav-links a:hover::after,.nav-btn:hover::after,
.nav-links a[aria-current]::after{transform:scaleX(1)}

/* ---------- Fullscreen menu ---------- */
.menu{position:fixed; inset:0; z-index:90; display:flex; overflow-y:auto;
  background:rgba(8,8,9,.82);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s .5s}
.menu.open{opacity:1; visibility:visible; transition:opacity .5s var(--ease)}
.menu-in{margin:auto; width:min(1180px,100% - clamp(48px,12vw,200px));
  display:flex; flex-direction:column; gap:clamp(28px,6vh,60px)}
.menu-nav{display:flex; flex-direction:column}
.m-line{display:block; overflow:hidden; padding-bottom:.08em}
.js .m-line{transform:translateY(30px); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease); transition-delay:calc(var(--i)*70ms)}
.menu.open .m-line{transform:none; opacity:1}
.menu-link{display:inline-flex; align-items:baseline; gap:.5em; text-decoration:none;
  font:400 clamp(2.2rem,7vw,5.2rem)/1.08 var(--fd); text-transform:uppercase;
  transition:color .3s, -webkit-text-stroke .3s}
.menu-link:hover{color:transparent; -webkit-text-stroke:1.5px var(--white)}
.menu-link--cta{-webkit-text-stroke:1px rgba(255,255,255,.55)}
.menu-num{font:600 11px/1 var(--fb); letter-spacing:.2em; font-style:normal; opacity:.4}
.menu-foot{display:flex; flex-wrap:wrap; gap:clamp(16px,4vw,44px);
  font:600 11px/1 var(--fb); letter-spacing:.22em; opacity:.6}
.menu-foot a{text-decoration:none; padding-block:8px}
.menu-foot a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px}
.menu-x{position:fixed; z-index:2; top:calc(14px + env(safe-area-inset-top,0px));
  right:calc(14px + env(safe-area-inset-right,0px)); display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; color:var(--white);
  background:rgba(12,12,13,.55); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .3s, transform .3s var(--ease)}
.menu-x:hover{background:rgba(255,255,255,.12)}
.menu-x:active{transform:scale(.9)}

/* ---------- Mobile bottom bar ---------- */
.bottombar{position:fixed; left:50%; transform:translateX(-50%); display:none; z-index:70;
  transition:opacity .35s var(--ease), visibility 0s;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  gap:2px; padding:7px; border-radius:22px;
  background:rgba(12,12,13,.55); border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  box-shadow:0 14px 44px rgba(0,0,0,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bottombar{background:rgba(12,12,13,.94)}
}
.bb-item{display:flex; flex-direction:column; align-items:center; gap:5px;
  min-width:66px; padding:9px 12px 8px; border-radius:16px; text-decoration:none;
  font:600 9.5px/1 var(--fb); letter-spacing:.16em; color:var(--g1);
  transition:color .25s, background .25s}
.bb-item svg{width:17px; height:17px}
.bb-item:hover{color:var(--white)}
.bb-item.is-active{color:var(--white); background:rgba(255,255,255,.09)}
.bb-item:active{transform:scale(.94); transition:color .15s, background .15s, transform .2s var(--ease)}

/* ---------- Hero ---------- */
.hero{min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  padding-top:calc(var(--nav-h) + 3vh); padding-bottom:0;
  background:radial-gradient(58% 44% at 50% 6%, rgba(255,255,255,.055), transparent 72%) var(--black)}
.hero-main{flex:1; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px,9vh,110px)}
.hero-title-wrap{will-change:transform}
.hero-title{font-family:var(--fd); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.9rem,13.5vw,10rem); line-height:.92; letter-spacing:.005em}
.line-m{display:none}
.hero-sub{margin-top:clamp(20px,3.5vh,34px); font-size:clamp(.95rem,1.4vw,1.15rem); color:var(--g1)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,4vh,44px)}
.hero-foot{display:flex; align-items:center; justify-content:space-between;
  padding-block:22px; border-top:1px solid var(--line-d);
  font:600 10.5px/1 var(--fb); letter-spacing:.3em; color:var(--g2)}
.scr{display:inline-flex; align-items:center; gap:14px}
.scr-rail{position:relative; width:1px; height:30px; background:rgba(255,255,255,.16); overflow:hidden}
.scr-rail::after{content:''; position:absolute; left:0; top:-8px; width:1px; height:8px;
  background:var(--white); animation:scr 2.2s var(--ease) infinite}
@keyframes scr{0%{transform:translateY(0); opacity:0} 25%{opacity:1} 100%{transform:translateY(40px); opacity:0}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden; border-bottom:1px solid var(--line-d); padding-block:clamp(14px,2.4vh,26px)}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track{display:flex; width:max-content; animation:mq 40s linear infinite}
.mq-chunk{white-space:nowrap; font:400 clamp(1.9rem,5vw,4.2rem)/1 var(--fd);
  text-transform:uppercase; letter-spacing:.02em; opacity:.28; padding-right:.5em}
@supports (-webkit-text-stroke:1px #000){
  .mq-chunk{color:transparent; -webkit-text-stroke:1px rgba(244,243,240,.8)}
}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Carousel ---------- */
.carousel{padding-block:clamp(30px,5vh,56px) 0}
.car-stage{position:relative; perspective:1400px; min-height:420px; border-radius:24px;
  touch-action:pan-y; user-select:none; -webkit-user-select:none}
.car-stage:not(.car-ready){display:flex; flex-direction:column; align-items:center; gap:28px}
.car-stage.car-ready{display:block}
.pcard{width:min(680px,88vw); background:var(--card); color:var(--white);
  border:1px solid rgba(255,255,255,.09); border-radius:24px;
  padding:clamp(14px,2vw,22px);
  box-shadow:0 34px 90px -28px rgba(10,10,10,.45)}
.car-stage:not(.car-ready) .pcard{position:static}
.car-ready .pcard{position:absolute; left:50%; top:0; will-change:transform,opacity,filter}
.car-anim .pcard{transition:transform .72s var(--ease), opacity .72s var(--ease), filter .72s var(--ease)}

.pcard-top{display:flex; justify-content:space-between; align-items:center;
  padding:4px 6px 14px; font:600 11px/1 var(--fb); letter-spacing:.28em}
.plabel{opacity:.55}
.pnum{opacity:.35}
.pcard-visual{position:relative; aspect-ratio:1/1; border-radius:15px; overflow:hidden;
  background:radial-gradient(120% 120% at 22% 0%, #26262b 0%, #0a0a0b 58%);
  transform-style:preserve-3d; will-change:transform}
.pcard-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:transform .9s var(--ease)}
.is-center .pcard-visual:hover img{transform:scale(1.05)}
.pv-fallback{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px}
.pv-big{font:400 clamp(4.5rem,11vw,8rem)/1 var(--fd); opacity:.85}
@supports (-webkit-text-stroke:1px #000){
  .pv-big{color:transparent; -webkit-text-stroke:1.5px rgba(244,243,240,.3)}
}
.pv-word{font:600 11px/1 var(--fb); letter-spacing:.34em; opacity:.4}
.pv-sheen{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,.11), transparent 62%)}
.is-center .pcard-visual:hover .pv-sheen{opacity:1}

.pcard-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:18px;
  padding:18px 6px 4px}
.pname{font:400 clamp(1.5rem,3.2vw,2.4rem)/0.96 var(--fd); text-transform:uppercase; letter-spacing:.01em}
.link-order{display:inline-block; margin-top:10px; padding:4px 0;
  font:600 10.5px/1 var(--fb); letter-spacing:.26em; opacity:.5;
  border-bottom:1px solid transparent; transition:opacity .3s, border-color .3s}
.link-order:hover{opacity:1; border-color:currentColor}

.car-ui{display:flex; align-items:center; justify-content:center; gap:26px;
  padding-top:clamp(24px,4vh,40px)}
.car-btn{display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(10,10,10,.25); transition:background .3s, border-color .3s, transform .3s var(--ease), opacity .3s}
.car-btn:hover{background:rgba(10,10,10,.06); transform:translateY(-2px)}
.car-btn:active{transform:scale(.94)}
.car-btn[disabled]{opacity:.25; pointer-events:none}
.car-count{font:600 12px/1 var(--fb); letter-spacing:.3em; min-width:86px; text-align:center}

/* ---------- Websites ---------- */
.wrow-wrap{position:relative; margin-top:clamp(10px,2vh,20px)}
.wrow{display:flex; gap:clamp(16px,2vw,24px); overflow-x:auto;
  padding-block:8px 26px; padding-inline:max(calc((100vw - 1560px)/2), clamp(20px,5vw,80px));
  scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
  overscroll-behavior-x:contain}
.wrow::-webkit-scrollbar{display:none}
.wrow.drag{cursor:grabbing; scroll-snap-type:none}
.wrow.is-anim{cursor:grab; scroll-snap-type:none}
.wrow-fade{position:absolute; top:8px; bottom:26px; width:clamp(44px,7vw,130px);
  pointer-events:none; z-index:3; opacity:0; transition:opacity .45s var(--ease)}
.wrow-fade.l{left:0; background:linear-gradient(90deg, rgba(10,10,10,.95), rgba(10,10,10,0))}
.wrow-fade.r{right:0; background:linear-gradient(270deg, rgba(10,10,10,.95), rgba(10,10,10,0))}
.wrow-fade.on{opacity:1}
.wcard{flex:0 0 min(430px,80vw); scroll-snap-align:start; user-select:none}
.wcard-visual{position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-d);
  background:radial-gradient(130% 120% at 25% 0%, #222227 0%, #0b0b0c 60%);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.wcard-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease)}
.wcard:hover .wcard-visual{transform:translateY(-8px); box-shadow:0 48px 90px -26px rgba(0,0,0,.7)}
.wcard:hover .wcard-visual img{transform:scale(1.07)}
.wtag{position:absolute; z-index:2; top:14px; left:16px;
  font:600 9.5px/1 var(--fb); letter-spacing:.3em; opacity:.55}
.wbig{position:absolute; inset:0; display:grid; place-items:center;
  font:400 clamp(1.9rem,4.5vw,3rem)/1 var(--fd); text-transform:uppercase; opacity:.5}
@supports (-webkit-text-stroke:1px #000){
  .wbig{color:transparent; -webkit-text-stroke:1px rgba(244,243,240,.55)}
}
.wcard-meta{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding-top:16px}
.wname{font:600 15px/1.3 var(--fb); letter-spacing:.02em}
.wlink{display:inline-flex; align-items:center; gap:7px; text-decoration:none; white-space:nowrap;
  font:600 11px/1 var(--fb); letter-spacing:.24em; padding:8px 0;
  border-bottom:1px solid transparent; transition:border-color .3s}
.wlink:hover{border-color:currentColor}
.wlink:active, .cc-notify:active, .link-order:active{transform:scale(.95)}
.wlink-soon{cursor:pointer; opacity:.8; transition:border-color .3s, opacity .3s, transform .3s var(--ease)}
.wlink-soon:hover{opacity:1; border-color:currentColor}
.wlink-soon:active{transform:scale(.95); border-color:currentColor}
.wsoon-badge{font:600 8px/1 var(--fb); letter-spacing:.2em; opacity:.55;
  border:1px solid currentColor; border-radius:99px; padding:3px 7px; margin-left:1px; transform:translateY(-1px)}

/* ---------- Coming soon: carousel ---------- */
.cc-carousel{position:relative; margin-top:clamp(10px,2vh,20px)}
.cc-track{display:flex; gap:clamp(16px,2vw,24px); overflow-x:auto;
  padding-block:8px 26px; padding-inline:clamp(16px,4vw,60px);
  scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
  overscroll-behavior-x:contain}
.cc-track::-webkit-scrollbar{display:none}
.cc-track.drag{cursor:grabbing; scroll-snap-type:none}
.cc-track.is-anim{cursor:grab; scroll-snap-type:none}
.cc-fade{position:absolute; top:8px; bottom:26px; width:clamp(44px,7vw,130px);
  pointer-events:none; z-index:3; opacity:0; transition:opacity .45s var(--ease)}
.cc-fade.l{left:0; background:linear-gradient(90deg, rgba(244,243,240,.65), rgba(244,243,240,0))}
.cc-fade.r{right:0; background:linear-gradient(270deg, rgba(244,243,240,.65), rgba(244,243,240,0))}
.cc-fade.on{opacity:1}
.cc-ui{display:flex; align-items:center; justify-content:center; gap:26px;
  padding-top:clamp(20px,3vh,32px)}
.ccard{flex:0 0 min(560px,88vw); scroll-snap-align:start; user-select:none}
.cc-visual{position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden;
  background:#0c0c0d; border:1px solid rgba(10,10,10,.9); will-change:transform;
  box-shadow:0 34px 80px -30px rgba(10,10,10,.5)}
.cc-shape{position:absolute; border-radius:14px; filter:blur(20px); opacity:.8}
.cc-shape.a{width:52%; height:38%; top:12%; left:10%;
  background:linear-gradient(120deg,#2c2c31,#17171a); animation:drift 9s ease-in-out infinite alternate}
.cc-shape.b{width:34%; height:52%; top:30%; right:8%;
  background:linear-gradient(200deg,#333338,#141416); animation:drift 11s ease-in-out infinite alternate-reverse}
.cc-shape.c{width:60%; height:16%; bottom:10%; left:22%;
  background:#1d1d20; animation:drift 13s ease-in-out infinite alternate}
.cc-bar{position:absolute; top:8%; right:10%; width:44px; height:5px; border-radius:99px;
  background:rgba(244,243,240,.22)}
@keyframes drift{to{transform:translateY(-14px) translateX(8px)}}
.cc-soon{position:absolute; inset:0; display:grid; place-items:center;
  font:600 11px/1 var(--fb); letter-spacing:.5em; text-indent:.5em; color:rgba(244,243,240,.85)}
.cc-meta{padding-top:18px}
.cc-name{display:inline-block; font:400 clamp(1.4rem,3vw,2rem)/1 var(--fd);
  text-transform:uppercase; letter-spacing:.02em;
  filter:blur(7px); opacity:.75; transition:filter .5s var(--ease); user-select:none}
.ccard:hover .cc-name{filter:blur(2.5px)}
.cc-sub{margin-top:10px; font-size:12.5px; letter-spacing:.06em; color:var(--g2)}
.ccard:hover .cc-name{filter:blur(2.5px)}
.cc-notify{display:inline-flex; align-items:center; gap:8px; margin-top:18px; text-decoration:none;
  font:600 10.5px/1 var(--fb); letter-spacing:.26em; text-indent:.26em; padding:14px 26px;
  border:1px solid var(--line-l); border-radius:99px; color:var(--g2);
  transition:color .3s, border-color .3s, background .3s; will-change:transform}
.cc-notify:hover{color:var(--white); background:var(--black); border-color:var(--black)}
.cc-notify svg{transition:transform .3s var(--ease)}
.cc-notify:hover svg{transform:translateX(3px)}

/* Mock UI dekoratif di visual coming-soon (chat / clock-in / chart) */
.cc-mock{position:absolute; inset:8% 10%; display:grid;
  grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr);
  gap:6px; opacity:.5; pointer-events:none}
.cc-mock i{border-radius:6px; background:rgba(244,243,240,.10)}
.cc-mock i{animation:mockIn 1s var(--ease) both}
.cc-mock .m1{grid-column:1/4; grid-row:1; background:rgba(244,243,240,.16)}
.cc-mock .m2{grid-column:4/7; grid-row:1}
.cc-mock .m3{grid-column:1/3; grid-row:2}
.cc-mock .m4{grid-column:3/7; grid-row:2; background:rgba(244,243,240,.16)}
.cc-mock .m5{grid-column:1/5; grid-row:3}
.cc-mock .m6{grid-column:5/7; grid-row:3/5; background:rgba(244,243,240,.16)}
@keyframes mockIn{from{opacity:0; transform:translateY(10px)}}

/* ---------- Final CTA ---------- */
.cta-title{font-family:var(--fd); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.7rem,9vw,7.6rem); line-height:.95}
.cta-actions{margin-top:clamp(30px,5vh,52px)}
.cta-alt{margin-top:22px; font-size:13.5px; color:var(--g1)}
.cta-alt a{color:var(--white); text-underline-offset:4px}

/* ---------- Scroll progress bar ---------- */
.scrollbar{position:fixed; z-index:1200; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--white),var(--g1));
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  mix-blend-mode:difference}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line-d); padding-block:clamp(56px,9vh,96px) 26px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px}
.foot-name{font:400 1.5rem/1 var(--fd); letter-spacing:.03em}
.foot-tag{margin-top:10px; font-size:13px; color:var(--g1)}
.foot-social{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.foot-social a{display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-d); color:var(--white); opacity:.6;
  transition:opacity .3s, border-color .3s, transform .35s var(--ease), background .3s}
.foot-social a:hover{opacity:1; border-color:rgba(244,243,240,.55); transform:translateY(-3px)}
.foot-social a:active{transform:translateY(-1px) scale(.93)}
.foot-social a:focus-visible{outline:2px solid var(--white); outline-offset:3px; opacity:1}
.foot-base{display:flex; justify-content:space-between; align-items:center;
  margin-top:clamp(34px,5vh,54px); padding-top:20px; border-top:1px solid var(--line-d);
  font:600 10.5px/1 var(--fb); letter-spacing:.24em; opacity:.5}
.e11{letter-spacing:.24em; font:inherit; padding:6px 0; transition:opacity .3s, transform .3s var(--ease)}
.e11:hover{opacity:1; transform:translateY(-2px)}

/* ---------- Floating action button (monokrom + reveal channel) ---------- */
.fab{position:fixed; z-index:75; transition:opacity .35s var(--ease), visibility 0s; right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.fab-stack{position:relative; width:56px; height:56px}
.fab-label{position:absolute; right:68px; top:50%; transform:translateY(-50%);
  pointer-events:none; white-space:nowrap;
  font:600 10px/1 var(--fb); letter-spacing:.26em; text-indent:.26em;
  color:var(--white); background:rgba(12,12,13,.82);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:8px 13px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:opacity .3s, visibility .3s, border-color .3s}
.fab:hover .fab-label{border-color:rgba(255,255,255,.45)}
.fab.open .fab-label{opacity:0; visibility:hidden} /* channel yang menutupi label */
.fab.peek .fab-label{opacity:1; visibility:visible} /* intro: label ikut tampil saat ikon keluar */
.fab.intro-done .fab-label{opacity:0; visibility:hidden;
  transition:opacity 1.4s var(--ease), visibility 0s 1.4s} /* memudar perlahan */
.fab.intro-done:hover .fab-label, .fab.intro-done:focus-within .fab-label{
  opacity:1; visibility:visible; transition:opacity .3s, visibility 0s}
.fab-tag{position:absolute; right:calc(100% + 10px); top:50%; white-space:nowrap; pointer-events:none;
  font:600 10px/1 var(--fb); letter-spacing:.24em; text-indent:.24em;
  color:var(--white); background:rgba(12,12,13,.85); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:8px 12px;
  opacity:0; visibility:hidden; transform:translateY(-50%) translateX(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s}
.fab.peek .fab-tag{opacity:1; visibility:visible; transform:translateY(-50%);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s}
.fab.intro-done .fab-tag{opacity:0; visibility:hidden; transform:translateY(-50%) translateX(8px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease), visibility 0s 1.4s}
.fab-mini:hover .fab-tag, .fab-mini:focus-visible .fab-tag{
  opacity:1; visibility:visible; transform:translateY(-50%);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s}
.fab.peek .fab-label{opacity:1; visibility:visible} /* intro: label ikut tampil saat ikon keluar */
.fab.intro-done .fab-label{opacity:0; visibility:hidden;
  transition:opacity 1.4s var(--ease), visibility 0s 1.4s} /* memudar perlahan */
.fab.intro-done:hover .fab-label, .fab.intro-done:focus-within .fab-label{
  opacity:1; visibility:visible; transition:opacity .3s, visibility 0s}
.fab-tag{position:absolute; right:calc(100% + 10px); top:50%; white-space:nowrap; pointer-events:none;
  font:600 10px/1 var(--fb); letter-spacing:.24em; text-indent:.24em;
  color:var(--white); background:rgba(12,12,13,.85); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:8px 12px;
  opacity:0; visibility:hidden; transform:translateY(-50%) translateX(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s}
.fab.peek .fab-tag{opacity:1; visibility:visible; transform:translateY(-50%);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s}
.fab.intro-done .fab-tag{opacity:0; visibility:hidden; transform:translateY(-50%) translateX(8px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease), visibility 0s 1.4s}
.fab-mini:hover .fab-tag, .fab-mini:focus-visible .fab-tag{
  opacity:1; visibility:visible; transform:translateY(-50%);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s}
.fab-main{position:relative; z-index:2; display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--white); color:var(--black);
  border:1px solid rgba(10,10,10,.15);
  box-shadow:0 14px 38px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  transition:transform .45s var(--ease), box-shadow .3s}
.fab-main:hover{transform:scale(1.06)}
.fab.open .fab-main{transform:rotate(135deg)} /* + → × */
.fab.open .fab-main:hover{transform:rotate(135deg) scale(1.06)}
.fab:active .fab-main{transform:scale(.94)}
.fab.open .fab-main:active{transform:rotate(135deg) scale(.94)}
.fab-pulse{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 2px rgba(244,243,240,.5);
  animation:fab-ping 2.4s cubic-bezier(.22,.9,.3,1) infinite}
@keyframes fab-ping{0%{transform:scale(1); opacity:.8}
  70%,100%{transform:scale(1.55); opacity:0}}
@media (prefers-reduced-motion: reduce){.fab-pulse{display:none}}
.fab-mini{position:absolute; z-index:1; top:50%; left:50%;
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--white); color:var(--black);
  border:1px solid rgba(10,10,10,.15);
  box-shadow:0 10px 28px rgba(0,0,0,.45); text-decoration:none;
  transform:translate(-50%,-50%) scale(.35); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), opacity .3s, box-shadow .3s;
  transition-delay:calc(var(--i) * 55ms)}
.fab.open .fab-mini{transform:translate(-50%,-50%) translateY(calc(-1 * var(--jump))) scale(1);
  opacity:1; pointer-events:auto}
.fab-mini:hover{box-shadow:0 14px 36px rgba(0,0,0,.6)}
.fab-mini:active{transform:translate(-50%,-50%) translateY(calc(-1 * var(--jump))) scale(.9)}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:end center;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@media (min-width:821px){.modal{place-items:center}}
[hidden]{display:none !important}
.modal-backdrop{position:absolute; inset:0; background:rgba(5,5,6,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .4s}
.modal.open .modal-backdrop{opacity:1}
.modal-panel{position:relative; width:min(470px,100%); margin:14px;
  background:rgba(16,16,18,.85); border:1px solid rgba(255,255,255,.13); border-radius:26px;
  padding:30px 26px 26px;
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  transform:translateY(34px) scale(.98); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease)}
@media (min-width:821px){.modal-panel{transform:translateY(20px) scale(.97)}}
.modal.open .modal-panel{transform:none; opacity:1}
.modal-x{position:absolute; top:16px; right:16px; display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  transition:background .3s}
.modal-x:hover{background:rgba(255,255,255,.08)}
.om-title{font:400 1.7rem/1.05 var(--fd); text-transform:uppercase; letter-spacing:.01em}
.om-sub{margin-top:10px; font-size:13px; color:var(--g1)}
.om-list{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.om-row{display:flex; justify-content:space-between; align-items:center; gap:12px;
  width:100%; text-decoration:none; padding:17px 18px; border-radius:15px;
  border:1px solid rgba(255,255,255,.14);
  font:600 12px/1 var(--fb); letter-spacing:.22em; text-align:left;
  transition:background .3s, border-color .3s, transform .3s var(--ease)}
.om-row:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.4); transform:translateY(-1px)}
.om-row:active{transform:scale(.98)}
.om-wa{border-color:rgba(244,243,240,.4)}
.om-back{margin-top:18px; font:600 10.5px/1 var(--fb); letter-spacing:.26em; opacity:.5;
  padding:8px 0; transition:opacity .3s}
.om-back:hover{opacity:1}
.om-note{margin-top:18px; font-size:11.5px; color:var(--g2)}

/* ---------- Toast / cursor ---------- */
.toast{position:fixed; z-index:110; left:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px));
  background:rgba(16,16,18,.9); border:1px solid rgba(255,255,255,.16); color:var(--white);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-size:12.5px; letter-spacing:.04em; padding:12px 18px; border-radius:12px;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
.toast.show{opacity:1; transform:none}

.cursor{position:fixed; z-index:120; left:0; top:0; pointer-events:none;
  background:var(--white); color:var(--black);
  font:700 10px/1 var(--fb); letter-spacing:.24em; text-indent:.24em;
  padding:10px 14px; border-radius:999px; opacity:0;
  transition:transform .22s ease-out, opacity .25s; will-change:transform}
.cursor.on{opacity:1}

/* Overlay aktif: sembunyikan nav/bottombar/fab di balik backdrop menu & modal */
body.menu-open .nav, body.menu-open .bottombar, body.menu-open .fab,
body.modal-open .nav, body.modal-open .bottombar, body.modal-open .fab{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility 0s .35s}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .nav-links{display:none}
  .bottombar{display:flex}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .d-join{display:none}
  .line-m{display:block}
  .foot-social{justify-content:flex-start}
  .car-btn{width:46px; height:46px}
  .fab{bottom:calc(104px + env(safe-area-inset-bottom,0px)); right:calc(14px + env(safe-area-inset-right,0px))}
  .brand{gap:.45em}
  .brand-logo{height:22px}
  .brand-name{font-size:22px; line-height:22px}
}
@media (min-width:821px){ .line-m{display:none} }
@media (max-width:380px){
  .hero-cta .btn{width:100%; justify-content:center}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important}
  .js .sec .rv, .js .line-in, .js .m-line{opacity:1 !important; transform:none !important; filter:none !important}
  .mq-track{animation:none}
  .car-anim .pcard{transition:none}
  .cc-shape{animation:none}
}