/* ==========================================================================
   Apple FiX Medan
   Ditulis mobile dulu, desktop menyusul.

   Arah desain: bengkel presisi, bukan halaman promosi. Kanvasnya grafit
   netral dengan butiran halus supaya terasa punya bahan, bukan hitam kosong
   berpendar. Cyan dan kuning dari lambang dipakai sangat sedikit, cuma di
   tempat yang memang perlu ditunjuk.

   Tiga hal sengaja DIHINDARI karena itu ciri paling kentara halaman buatan
   mesin: label huruf besar berjarak lebar dengan font monospace, penomoran
   bagian seperti "01 /", dan cahaya neon melingkar di latar belakang.
   ========================================================================== */

:root{
  --bg:#0B0B0C;
  --bg-2:#0F0F11;
  --surface:#141416;
  --surface-2:#1A1A1D;

  --ink:#F2F1EF;
  --ink-2:#ADACA9;
  --ink-3:#878683;

  --line:rgba(240,238,234,.10);
  --line-strong:rgba(240,238,234,.22);
  --line-btn:rgba(240,238,234,.42);

  --accent:#52D6E4;
  --accent-soft:rgba(82,214,228,.12);
  --accent-2:#EEFA1B;
  --on-accent:#04262B;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Karla",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(0,0,0,.9),0 4px 18px rgba(0,0,0,.72),0 14px 50px rgba(0,0,0,.7);

  --pad:clamp(18px,5.4vw,76px);
  --maxw:1240px;
  --dock:74px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16.5px/1.66 var(--body);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
}

h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;margin:0;
  font-variation-settings:"wdth" 108;
  letter-spacing:-.015em;line-height:1.06;
}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.08em;height:1.08em;flex:none;vertical-align:-.16em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* cadangan kalau JavaScript mati total */
.no-js .band{display:none}
.no-js .band-settle{display:block;opacity:1;visibility:visible}
.no-js .band-settle .w,.no-js .band-settle .c,.no-js .band-settle .lede,.no-js .band-settle .cta-row{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.no-js .cue{display:none}
.no-js .part{--t:1}
.no-js .rakit{--zoom:1}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--surface);color:var(--ink);
  padding:11px 17px;border-radius:10px;border:1px solid var(--line-strong);transition:top .25s var(--ease)}
.skip:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* butiran halus. Ini yang bikin latar terasa punya bahan, bukan bidang kosong */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* --------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:14px;
  padding:12px var(--pad);
  background:linear-gradient(180deg,rgba(11,11,12,.94) 30%,rgba(11,11,12,0));
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand-mark{width:32px;height:32px;display:block}
.brand-name{font-family:var(--display);font-weight:600;font-size:16px;font-variation-settings:"wdth" 100;letter-spacing:-.01em;white-space:nowrap}
.brand-name b{color:var(--accent);font-weight:800}
.nav-links{display:none}
.nav-cta{display:none}

@media (min-width:920px){
  .nav{gap:clamp(18px,3vw,46px);padding:16px var(--pad)}
  .brand{margin-right:0}
  .brand-mark{width:36px;height:36px}
  .brand-name{font-size:18px}
  .nav-links{display:flex;gap:clamp(18px,2.2vw,32px);list-style:none;margin:0 auto 0 0;padding:0;
    font-size:15px;color:var(--ink-2)}
  .nav-links a{text-decoration:none;padding:6px 0;position:relative}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
  .nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
  .nav-cta{display:inline-flex}
}

/* --------------------------------------------------------- tombol */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:14px 24px;border-radius:999px;text-decoration:none;
  font-family:var(--body);font-weight:700;font-size:15px;
  background:var(--accent);color:var(--on-accent);border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease-out),background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:#6FE0EC}
.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-btn)}
.btn-ghost:hover{background:rgba(240,238,234,.07);border-color:var(--ink)}
.btn-hero{background:var(--accent-2);color:#1C1F03}
.btn-hero:hover{background:#F4FE4E}
.band .btn{text-shadow:none}

/* kicker tanpa huruf besar berjarak lebar dan tanpa nomor. Cuma garis pendek
   lalu satu kata biasa. */
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-weight:500;font-size:14.5px;color:var(--accent);margin-bottom:14px;
}
.kicker::before{content:"";width:24px;height:1px;background:currentColor;opacity:.8}

.lede{color:var(--ink-2);max-width:48ch;margin-top:14px;line-height:1.62}
.note{font-size:13.5px;line-height:1.66;color:var(--ink-3);margin-top:20px;
  border-left:2px solid var(--line-strong);padding-left:14px;max-width:56ch}
.note-center{margin-left:auto;margin-right:auto}

/* ==========================================================================
   HERO
   Perjalanan gulir ini SENGAJA tetap hidup di HP. Isinya cuma vektor yang
   digambar sendiri, nol byte gambar yang perlu diunduh, jadi mematikannya
   di layar kecil justru membuang bagian terbaiknya untuk mayoritas
   pengunjung.
   ========================================================================== */
.hero{position:relative;height:520vh;z-index:2}
@supports (height:100svh){.hero{height:520svh}}

.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;
  padding:0 var(--pad) calc(var(--dock) + 20px);
}
@supports (height:100svh){.stage{height:100svh}}

.rig{grid-row:1/-1;grid-column:1;position:relative;display:flex;align-items:center;justify-content:center;
  height:100%;pointer-events:none}

.rakit{
  height:54svh;width:auto;max-width:none;overflow:visible;
  transform:scale(var(--zoom,.8));
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
@supports not (height:1svh){.rakit{height:54vh}}

/* Tiap bagian punya jarak lemparnya sendiri di HTML (--ex, --ey, --er).
   Nilai --t adalah kadar "sudah sampai di tempatnya", 0 sampai 1, ditulis
   JavaScript satu per satu dengan jeda, jadi bagiannya menyatu berurutan,
   bukan serempak. */
.part{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:
    translate(calc(var(--ex,0) * (1 - var(--t,0)) * 1px),
              calc(var(--ey,0) * (1 - var(--t,0)) * 1px))
    rotate(calc(var(--er,0) * (1 - var(--t,0)) * 1deg));
  opacity:calc(.5 + .5 * var(--t,0));
}
.svg-label{font-family:var(--body);font-weight:500;letter-spacing:.1em}
.nyala{opacity:var(--glow,0)}
.daun{opacity:var(--daun,0)}
.sapu{opacity:var(--sapu-o,0);transform:translate(calc(var(--sapu-x,0) * 1px),0)}
.denyut{opacity:calc(var(--t,0) * .95);animation:denyut 4.6s var(--ease) -1.4s infinite}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}

.scrim{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(ellipse 140% 58% at 50% 104%,rgba(6,6,7,.94) 12%,rgba(6,6,7,0) 74%),
    linear-gradient(180deg,rgba(6,6,7,.55) 0%,rgba(6,6,7,0) 26%);
}

/* ----- pita teks ----- */
.bands{grid-row:2;grid-column:1;position:relative;z-index:3;display:grid;align-items:end}
.band{
  grid-area:1/1;
  opacity:var(--o,0);visibility:var(--vis,hidden);
  text-shadow:var(--tshadow);position:relative;
}
.band::before{
  content:"";position:absolute;inset:-28% -36% -40% -36%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7 * var(--k,1));
  background:radial-gradient(ellipse 80% 76% at 40% 62%,rgba(4,4,5,.8) 0%,rgba(4,4,5,.5) 48%,rgba(4,4,5,0) 78%);
}
.band h1,.band h2{font-size:clamp(33px,8.8vw,48px);font-weight:800;font-variation-settings:"wdth" 104;letter-spacing:-.028em}
.band .lede{margin-top:13px;font-size:16px;max-width:34ch}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;
  opacity:var(--kb,1);transform:translateY(calc((1 - var(--kb,1)) * 14px))}
.band-settle .lede{opacity:var(--ks,1);transform:translateY(calc((1 - var(--ks,1)) * 12px))}

.rating{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:14.5px;color:var(--ink-2);text-shadow:none}
.rating b{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink)}
.stars{display:inline-flex;gap:1px;color:var(--accent-2)}
.stars .ico{width:14px;height:14px}
.rating-txt{color:var(--ink-3)}

.w{display:inline-block;white-space:pre}
.c{display:inline-block}

[data-fx="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -22px))}
[data-fx="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px)))
            rotate(calc((1 - var(--kc)) * var(--jr,0deg)))}
.blur-stack{position:relative;display:block}
.blur-stack .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.blur-stack .sharp{opacity:var(--k,0)}
[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 24px))}

.cue{position:absolute;bottom:calc(var(--dock) + 4px);left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:13px;color:var(--ink-3);opacity:var(--cue-o,1)}
.cue i{width:1px;height:28px;background:linear-gradient(180deg,var(--line-strong),transparent);
  animation:cueDrop 3.4s var(--ease) -1s infinite}
@keyframes cueDrop{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media (max-height:560px){.cue{display:none}}

@media (min-width:920px){
  .hero{height:660vh}
  .stage{grid-template-rows:1fr;grid-template-columns:1.04fr .96fr;align-items:center;padding:0 var(--pad)}
  .rig{grid-column:2;grid-row:1}
  .rakit{height:74vh}
  .bands{grid-column:1;grid-row:1;align-items:center;max-width:min(52ch,100%)}
  .band h1,.band h2{font-size:clamp(44px,4.6vw,68px)}
  .band .lede{font-size:17.5px;margin-top:18px;max-width:40ch}
  .band::before{inset:-26% -34%;
    background:radial-gradient(ellipse 78% 70% at 38% 50%,rgba(4,4,5,.76) 0%,rgba(4,4,5,.46) 48%,rgba(4,4,5,0) 78%)}
  .scrim{background:radial-gradient(ellipse 116% 96% at 56% 48%,rgba(6,6,7,0) 34%,rgba(6,6,7,.6) 100%)}
  .cue{bottom:26px}
}

/* ==========================================================================
   GERBANG HERO STATIS
   Satu syarat saja: pengguna yang meminta gerak dikurangi. Daftar ini harus
   sama persis dengan GATES di app.js.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:86vh;grid-template-columns:1fr;grid-template-rows:auto auto;
    padding:120px var(--pad) 64px;gap:36px;align-items:start}
  .rig{grid-column:1;grid-row:2;height:auto}
  .rakit{height:auto;width:min(72vw,300px);transform:none}
  .bands{grid-column:1;grid-row:1;display:block;max-width:none}
  .band{display:none}
  .band-settle{display:block;opacity:1 !important;visibility:visible !important}
  .band-settle .w,.band-settle .c{opacity:1 !important;transform:none !important}
  .band-settle .lede,.band-settle .cta-row{opacity:1 !important;transform:none !important}
  .band-settle .blur-stack .soft{opacity:0 !important}
  .band-settle .blur-stack .sharp{opacity:1 !important}
  .cue{display:none}
  .part{--t:1}
}

/* ==========================================================================
   BAGIAN BAWAH
   ========================================================================== */
.sec{position:relative;z-index:2;padding:clamp(66px,9vh,140px) var(--pad);max-width:var(--maxw);margin-inline:auto}
.sec-head{margin-bottom:clamp(32px,5vh,64px);max-width:34ch}
.sec-head h2{font-size:clamp(28px,7vw,46px);font-weight:800;font-variation-settings:"wdth" 104;letter-spacing:-.025em}
.sec-head-center{margin-inline:auto;text-align:center}
.sec-head-center .kicker{justify-content:center}
.sec-head-center .lede{margin-inline:auto}

.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.in .reveal,.reveal.in{opacity:1;transform:none}

/* ----- pita kepercayaan ----- */
.strip{position:relative;z-index:2;border-block:1px solid var(--line);background:var(--bg-2)}
.strip ul{list-style:none;margin:0 auto;padding:28px var(--pad);max-width:var(--maxw);
  display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.strip li{display:flex;flex-direction:column;gap:3px}
.strip b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;
  font-size:clamp(24px,6.4vw,32px);color:var(--ink);letter-spacing:-.02em}
.strip span{font-size:14px;color:var(--ink-3);line-height:1.42}
@media (min-width:760px){.strip ul{grid-template-columns:repeat(4,1fr);gap:28px}}

/* ----- layanan ----- */
.svc{list-style:none;margin:0;padding:0;display:grid;gap:0}
.svc-item{position:relative;padding:24px 0;border-top:1px solid var(--line)}
.svc-item:first-child{border-top:0;padding-top:0}
.svc-item h3{font-size:clamp(19px,4.8vw,24px);margin-bottom:8px;font-weight:700}
.svc-item p{color:var(--ink-2);max-width:40ch;font-size:15.5px}
.svc-item::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);
  transition:width .7s var(--ease-out)}
.svc-item:hover::after{width:100%}
@media (min-width:760px){
  .svc{grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,68px)}
  .svc-item:nth-child(2){border-top:0;padding-top:0}
  .svc .reveal:nth-child(2){transition-delay:.06s}
  .svc .reveal:nth-child(3){transition-delay:.12s}
  .svc .reveal:nth-child(4){transition-delay:.18s}
  .svc .reveal:nth-child(5){transition-delay:.24s}
  .svc .reveal:nth-child(6){transition-delay:.3s}
  .svc.settled .reveal{transition-delay:0s}
}

/* ----- cara kerja ----- */
.sec-flow{background:var(--bg-2);max-width:none;border-block:1px solid var(--line)}
.sec-flow .sec-head,.sec-flow .flow{max-width:var(--maxw);margin-inline:auto}
.flow-steps{display:grid;gap:28px}
.step{position:relative;padding-left:62px}
.step-no{position:absolute;left:0;top:-4px;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--accent)}
.step::before{content:"";position:absolute;left:21.5px;top:44px;bottom:-28px;width:1px;background:var(--line)}
.step:last-child::before{display:none}
.step h3{font-size:clamp(18px,4.4vw,22px);margin-bottom:7px}
.step p{color:var(--ink-2);font-size:15.5px;max-width:42ch}
@media (min-width:920px){
  .flow-steps{grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,48px)}
  .step{padding-left:0}
  .step-no{position:relative;margin-bottom:22px;top:0}
  .step::before{content:"";position:absolute;left:52px;top:22px;bottom:auto;right:-24px;width:auto;height:1px}
  .step:last-child::before{display:none}
  .flow .reveal:nth-child(2){transition-delay:.09s}
  .flow .reveal:nth-child(3){transition-delay:.18s}
  .flow .reveal:nth-child(4){transition-delay:.27s}
  .flow.settled .reveal{transition-delay:0s}
}

/* ----- ulasan ----- */
.quotes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 20px;scrollbar-width:none}
.quotes::-webkit-scrollbar{display:none}
.quote{flex:0 0 min(80vw,330px);scroll-snap-align:center;margin:0;
  padding:26px 24px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.q-stars{display:flex;gap:2px;color:var(--accent-2);margin-bottom:14px}
.q-stars .ico{width:15px;height:15px}
.quote blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.42;
  font-variation-settings:"wdth" 100;letter-spacing:-.012em}
.quote figcaption{margin-top:18px;font-size:14px;color:var(--ink-2)}
.quote figcaption span{display:block;color:var(--ink-3);margin-top:2px;font-size:13px}
@media (min-width:920px){
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
    overflow:visible;margin-inline:0;padding:0}
  .quote{flex:none}
  .quote:nth-child(2),.quote:nth-child(5){margin-top:24px}
  .quotes .reveal:nth-child(2){transition-delay:.07s}
  .quotes .reveal:nth-child(3){transition-delay:.14s}
  .quotes .reveal:nth-child(4){transition-delay:.21s}
  .quotes .reveal:nth-child(5){transition-delay:.28s}
  .quotes .reveal:nth-child(6){transition-delay:.35s}
  .quotes.settled .reveal{transition-delay:0s}
}

/* ----- momen interaktif ----- */
.sec-hold{text-align:center}
.hold-wrap{max-width:600px;margin-inline:auto}
.hold-wrap .kicker{justify-content:center}
.hold-wrap h2{font-size:clamp(25px,6.2vw,38px);font-weight:800;font-variation-settings:"wdth" 104}
.hold-wrap .lede{margin-inline:auto}
.hold-wrap .note{margin-inline:auto;text-align:left}
.holder{position:relative;width:132px;height:132px;margin:38px auto 0;display:block;
  background:transparent;border:0;cursor:pointer;color:var(--ink);touch-action:none;
  -webkit-tap-highlight-color:transparent}
.holder-ring{position:absolute;inset:0;width:100%;height:100%}
.holder-arc{transition:stroke-dashoffset .1s linear}
.holder-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700}
.diag{list-style:none;margin:36px auto 0;padding:0;text-align:left;max-width:430px}
.diag li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.diag.on li{opacity:1;transform:none}
.diag.on li:nth-child(2){transition-delay:.12s}
.diag.on li:nth-child(3){transition-delay:.24s}
.diag.on li:nth-child(4){transition-delay:.36s}
.diag-k{font-size:14px;color:var(--ink-3)}
.diag-v{color:var(--ink-2);font-size:15px;text-align:right}
.diag li:last-child .diag-v{color:var(--accent)}

/* ----- peringatan ----- */
.warn{display:grid;gap:18px;padding:28px 24px;border-radius:18px;
  background:var(--surface);border:1px solid rgba(238,250,27,.3)}
.warn h2{font-size:clamp(21px,5.4vw,32px);font-weight:800;font-variation-settings:"wdth" 104}
.warn .lede{max-width:62ch}
@media (min-width:760px){.warn{grid-template-columns:auto 1fr;gap:28px;padding:36px 38px;align-items:start}}

/* ----- faq ----- */
.faq{max-width:72ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,4.4vw,21px);font-variation-settings:"wdth" 100}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{color:var(--ink-2);padding:0 0 24px;max-width:62ch;font-size:15.5px}

/* ----- cabang ----- */
.branches{display:grid;gap:16px}
.branch{padding:28px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  position:relative;overflow:hidden}
.branch::before{content:"";position:absolute;left:0;top:0;width:64px;height:2px;background:var(--accent)}
.branch h3{font-size:clamp(22px,5.2vw,28px);font-weight:800;font-variation-settings:"wdth" 104}
.branch-name{font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.5}
.branch dl{margin:24px 0 0;display:grid;gap:16px}
.branch dt{font-size:13.5px;color:var(--ink-3)}
.branch dd{margin:3px 0 0;color:var(--ink-2);font-size:15.5px}
.branch dd b{color:var(--accent);font-family:var(--display);font-weight:800}
.branch-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.branch-cta .btn{flex:1 1 auto}
@media (min-width:840px){.branches{grid-template-columns:1fr 1fr;gap:22px}
  .branch{padding:36px 34px}
  .branches .reveal:nth-child(2){transition-delay:.09s}
  .branches.settled .reveal{transition-delay:0s}}

/* ----- footer ----- */
.foot{position:relative;z-index:2;padding:48px var(--pad) 44px;border-top:1px solid var(--line);
  max-width:var(--maxw);margin-inline:auto}
.foot-top{display:grid;gap:26px;margin-bottom:36px}
.foot-logo{width:96px;height:96px;display:block}
.socials{display:grid;gap:12px}
.socials a{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink-2);
  font-size:15px;transition:color .3s var(--ease)}
.socials a:hover{color:var(--accent)}
.socials .ico{width:19px;height:19px}
.foot-cols{display:grid;gap:26px}
.foot-cols h4{font-size:14px;color:var(--accent);margin-bottom:10px;font-weight:700;font-variation-settings:"wdth" 100}
.foot-cols p{color:var(--ink-2);font-size:15px;margin-bottom:5px}
.foot-note{margin-top:34px;font-size:13.5px;color:var(--ink-3)}
@media (min-width:760px){
  .foot-top{grid-template-columns:auto 1fr;align-items:center;gap:44px}
  .socials{grid-template-columns:1fr 1fr;gap:14px 28px}
  .foot-cols{grid-template-columns:repeat(3,1fr);gap:36px}
  .foot-logo{width:108px;height:108px}
}

/* ----- batang aksi HP ----- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-strong);border-top:1px solid var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock-btn{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--dock);padding:12px 10px;text-decoration:none;background:#0E0E10;
  transition:background .3s var(--ease);color:var(--accent)}
.dock-btn:active{background:var(--accent-soft)}
.dock-btn .ico{width:21px;height:21px}
.dock-btn span{display:flex;flex-direction:column;line-height:1.28;font-size:13px;color:var(--ink-3)}
.dock-btn b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink);font-variation-settings:"wdth" 100}
@media (min-width:920px){.dock{display:none}body{padding-bottom:0}
  .stage{padding-bottom:0}}

/* ==========================================================================
   JEDA DAN GERAK DIKURANGI
   ========================================================================== */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .reveal{opacity:1 !important;transform:none !important}
  .diag li{opacity:1 !important;transform:none !important}
  .holder-arc{stroke-dashoffset:0 !important}
  .quote:nth-child(2),.quote:nth-child(5){margin-top:0}
}