/* Increasink Bio Card. Step flow engine, putih Apple, kaca, gradient hidup. */

:root{
  /* paper */
  --paper:#FFFFFF;
  --tint:#F5F5F7;
  --ink:#1D1D1F;
  --mu:#6E6E73;
  --dm:#86868B;
  --line:rgba(0,0,0,.08);
  --line-s:rgba(0,0,0,.14);
  /* aksen netral. Nama var lama dipertahankan supaya editor.css tidak ikut berubah. */
  --gold:#1D1D1F;
  --gold-d:#000000;
  --gold-soft:rgba(0,0,0,.14);
  --gold-tint:rgba(0,0,0,.05);
  /* gradient */
  --g1:#9FC4FF;
  --g2:#D3B9FF;
  --g3:#FFB6CE;
  --g4:#A8ECD8;
  --g5:#FFD9A8;
  --g6:#B9E2FF;
  /* dark step */
  --ink-d:#000000;
  --cream:#F5F5F7;
  --cream-mu:rgba(245,245,247,.66);
  --cream-dm:rgba(245,245,247,.40);
  --cream-line:rgba(245,245,247,.16);
  /* type */
  --h:'Helvetica Neue',Helvetica,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --b:'Helvetica Neue',Helvetica,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  /* ruang dan radius */
  --pad:26px;
  /* lebar isi kartu. Di layar lebar permukaannya penuh layar, isinya tetap selebar ini. */
  --col:440px;
  /* crop kepala dan bahu, dipakai bareng .ring-img dan .wa-av img.
     Disetel ulang 17 Sep 2026: wajah di tengah lingkaran, kepala sampai kerah kemeja.
     Kalau fotonya diganti lagi, dua angka ini yang disetel. */
  --ava-scale:1.45;
  --ava-origin:53% 42%;
  --r:22px;
  --r-s:14px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
/* Metrik teks mengikuti body Apple: 17px, tinggi baris 1.47, tracking -.022em. */
body{
  font-family:var(--b);background:#F2F1F5;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
}
@media(min-width:560px){body{display:flex;align-items:center;justify-content:center}}

/* ---------- lapisan gradient hidup, di belakang segalanya ----------
   Pola diambil dari nakamacreativelab.com: cuma tiga radial, ukurannya jauh lebih
   besar dari layar, alpha rendah, pusatnya di luar kanvas, hue-nya satu keluarga.
   Blob kecil yang banyak dan jenuh justru yang bikin gradient terlihat murah. */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#FBFBFD}
.mesh i{position:absolute;display:block}
.mesh i:nth-child(1){
  width:1200px;height:800px;right:-20%;top:-28%;
  background:radial-gradient(closest-side,rgba(92,124,255,.34),rgba(92,124,255,0) 70%);
  animation:m1 44s ease-in-out infinite alternate;
}
.mesh i:nth-child(2){
  width:900px;height:700px;left:-24%;top:16%;
  background:radial-gradient(closest-side,rgba(148,108,255,.30),rgba(148,108,255,0) 70%);
  animation:m2 57s ease-in-out infinite alternate;
}
.mesh i:nth-child(3){
  width:1100px;height:900px;left:26%;bottom:-34%;
  background:radial-gradient(closest-side,rgba(255,138,182,.26),rgba(255,138,182,0) 70%);
  animation:m3 39s ease-in-out infinite alternate;
}
@keyframes m1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-9%,11%,0) scale(1.16)}}
@keyframes m2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(13%,-8%,0) scale(.94)}}
@keyframes m3{from{transform:translate3d(0,0,0) scale(.96)}to{transform:translate3d(-11%,-9%,0) scale(1.14)}}
/* anyaman 96px, juga dari Nakama. Bikin bidang kosong tidak terasa mati. */
/* butiran halus, penawar banding */
body::after{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- riak sentuhan ---------- */
.ripple{
  position:fixed;z-index:45;pointer-events:none;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(150,160,255,.5) 0%,rgba(255,170,210,.28) 45%,rgba(255,255,255,0) 70%);
  animation:rip .74s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes rip{from{transform:scale(.35);opacity:.95}to{transform:scale(16);opacity:0}}

/* ---------- shell, kaca di atas gradient ---------- */
.app{
  position:relative;z-index:1;width:100%;max-width:var(--col);margin:0 auto;
  height:100dvh;background:rgba(255,255,255,.46);
  display:flex;flex-direction:column;overflow:hidden;
}
@media(min-width:560px){
  .app{
    height:min(880px,calc(100dvh - 40px));border-radius:36px;
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 2px 8px rgba(0,0,0,.05),0 34px 90px rgba(0,0,0,.16);
  }
}
.app.dark{background:rgba(0,0,0,.74);color:var(--cream);border-color:rgba(255,255,255,.10)}

/* ---------- topnav ---------- */
.topnav{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:calc(16px + env(safe-area-inset-top)) var(--pad) 14px;
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.5);
}
.dark .topnav{background:rgba(0,0,0,.34);border-bottom-color:rgba(255,255,255,.10)}
.topnav.hide{display:none}
.back{
  width:32px;height:32px;flex:none;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  background:rgba(255,255,255,.5);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;transition:.25s;
}
.back:hover{background:rgba(255,255,255,.8)}
.back[disabled]{opacity:.28;cursor:default}
.dark .back{background:rgba(245,245,247,.12);border-color:rgba(255,255,255,.14);color:var(--cream)}
.track{flex:1;height:4px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden}
.dark .track{background:rgba(245,245,247,.16)}
.track > i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#6E8BFF,#B98BFF 48%,#FF8FB8);
  transition:width .5s cubic-bezier(.3,.9,.3,1);
}
.langs{
  flex:none;display:flex;border-radius:99px;padding:2px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.dark .langs{background:rgba(245,245,247,.12);border-color:rgba(255,255,255,.12)}
.langs button{
  font-family:var(--b);background:none;border:none;border-radius:99px;color:var(--mu);cursor:pointer;
  font-size:11px;line-height:1.3;letter-spacing:0;font-weight:500;padding:5px 10px;transition:.25s;
}
.langs button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.dark .langs button.on{background:var(--cream);color:var(--ink-d)}

/* ---------- stage ---------- */
.stage{flex:1;overflow-y:auto;overscroll-behavior:contain;position:relative}
.step{padding:30px var(--pad) 44px;animation:enter .44s cubic-bezier(.25,.85,.3,1) both}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- teks ---------- */
/* Judul besar memakai tracking ketat ala headline Apple, plus kilau gradient pelan. */
.h2{margin:0}
.h2t,.cover-name,.name,.box-h{
  background:linear-gradient(100deg,#1D1D1F 0%,#3C3C63 26%,#1D1D1F 52%,#4A3C63 78%,#1D1D1F 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 14s linear infinite;
}
.dark .h2t,.dark .name{
  background:linear-gradient(100deg,#F5F5F7 0%,#8FA6FF 28%,#F5F5F7 54%,#F29BC6 80%,#F5F5F7 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
}
@keyframes sheen{from{background-position:0% 50%}to{background-position:260% 50%}}
.h2t{
  display:block;font-family:var(--h);font-weight:700;
  font-size:clamp(28px,7.2vw,40px);line-height:1.0;letter-spacing:-.038em;
  text-wrap:balance;
}
.h3{font-family:var(--h);font-weight:600;font-size:19px;line-height:1.2105;letter-spacing:.012em;color:var(--ink)}
.p{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--mu);margin-top:16px}
.p strong{color:var(--ink);font-weight:600}
.dark .h3{color:var(--cream)}
.dark .p{color:var(--cream-mu)}
.dark .p strong{color:var(--cream)}

/* kartu kaca */
.glass{
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.66);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.07);
}
.dark .glass{background:rgba(245,245,247,.07);border-color:rgba(255,255,255,.12);box-shadow:none}

/* ---------- cover ---------- */
.cover{
  min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:28px var(--pad) 34px;text-align:center;
}
/* Kartu foto 1:1 hampir selebar layar, sudut membulat dan berbingkai.
   Lebarnya dibatasi 52dvh supaya di HP pendek nama dan tombol tetap muat. */
.ring{
  width:min(100%,52dvh);aspect-ratio:1/1;margin:0 auto 28px;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:50%;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 10px rgba(0,0,0,.06),0 26px 60px rgba(0,0,0,.16);
}
/* Lingkaran besar dengan crop yang sama seperti avatar di tombol WhatsApp (.wa-av img):
   kepala dan bahu. */
.ring-img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transform:scale(var(--ava-scale));transform-origin:var(--ava-origin);position:relative;z-index:1;
}
.ring-ini{font-family:var(--h);font-weight:600;font-size:58px;color:var(--ink);letter-spacing:-.02em}
/* eyebrow Apple: besar, bukan huruf kapital semua, tracking positif, diberi gradient warna */
.cover-kicker{
  font-family:var(--h);font-size:21px;line-height:1.19;letter-spacing:.011em;font-weight:600;
  background:linear-gradient(100deg,#5B7CFF,#A26BFF 38%,#FF6FA5 72%,#5B7CFF);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 9s linear infinite;
}
.cover-name{
  display:block;font-family:var(--h);font-weight:700;
  font-size:clamp(40px,11.5vw,56px);line-height:.98;letter-spacing:-.042em;
  margin-top:10px;text-wrap:balance;
}
.cover-role{margin-top:14px;font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--mu);text-wrap:balance}
.cover-meta{
  margin:26px auto 0;display:inline-block;padding:9px 18px;border-radius:99px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--mu);font-weight:500;
}

/* ---------- perkenalan ---------- */
.portrait{
  width:100%;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:var(--tint) center 14%/cover no-repeat;
  position:relative;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 10px rgba(0,0,0,.05),0 22px 50px rgba(0,0,0,.12);
}
.portrait-ini{font-family:var(--h);font-weight:600;font-size:58px;color:var(--dm)}
/* carousel step Kenalan: geser horizontal dengan snap per slide, scrollbar disembunyikan */
.car-track{
  position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;height:100%;position:relative;scroll-snap-align:center;scroll-snap-stop:always}
.car-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
/* carousel My Ministry, di antara judul dan chip pelayanan */
.mincar{margin-top:18px}
.mincar-empty{border-style:dashed;background:var(--tint);box-shadow:none}
.car-dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.car-dots i{
  width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.5);
  box-shadow:0 0 4px rgba(0,0,0,.3);transition:width .3s ease,background .3s ease;
}
.car-dots i.on{width:18px;background:#fff}
/* tombol speaker di pojok kanan bawah video */
.vsound{
  position:absolute;right:12px;bottom:12px;z-index:2;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.46);color:#fff;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .12s ease,background .2s ease;
}
.vsound:active{transform:scale(.92)}
.vsound[aria-pressed="true"]{background:rgba(255,255,255,.9);color:var(--ink)}
.vsound svg{width:20px;height:20px}
.vsound[hidden]{display:none}

/* ---------- maju mundur carousel ----------
   Di HP carousel digeser dengan jari dan tombol ini tidak perlu ada. Di browser
   tidak ada yang bisa digeser, jadi tombolnya muncul khusus perangkat bertetikus.
   Baru terlihat saat kursor masuk ke carousel, supaya tidak menutupi gambar. */
.car-nav{
  position:absolute;top:50%;z-index:3;display:none;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;padding:0 0 2px;
  background:rgba(255,255,255,.92);color:#1D1D1F;
  font-family:var(--b);font-size:21px;line-height:1;
  align-items:center;justify-content:center;
  box-shadow:0 2px 9px rgba(0,0,0,.28);
  opacity:.82;transform:translateY(-50%);
  transition:opacity .2s ease,transform .12s ease,background .2s ease;
}
.car-nav.prev{left:10px}
.car-nav.next{right:10px}
.reelcar .car-nav{width:42px;height:42px;font-size:26px}
.reelcar .car-nav.prev{left:18px}
.reelcar .car-nav.next{right:18px}
/* Tampil di semua perangkat, bukan cuma yang bertetikus. Di HP geser jari tetap jalan,
   tapi tombolnya membantu dan itu lazim di web Instagram. */
.carousel .car-nav{display:flex}
.car-nav:active{transform:translateY(-50%) scale(.93)}
@media (hover:hover) and (pointer:fine){
  .carousel .car-nav{opacity:0}
  .carousel:hover .car-nav,
  .car-nav:focus-visible{opacity:1}
  .car-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
  .reelcar .car-nav{opacity:.78}
  .reelcar.carousel:hover .car-nav{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .car-nav{transition:opacity .2s ease}
  .car-nav:hover,.car-nav:active{transform:translateY(-50%)}
}
.name{display:block;font-family:var(--h);font-weight:700;font-size:clamp(34px,8.6vw,42px);letter-spacing:-.04em;margin-top:28px;line-height:.99}
.role{margin-top:8px;font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--mu)}
.quote{
  margin-top:26px;padding:24px;border-radius:var(--r);
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.66);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.07);
  font-size:19px;line-height:1.4211;letter-spacing:-.022em;color:var(--ink);
}
.quote em{font-style:normal;color:var(--mu)}

/* ---------- meta rows ---------- */
.meta{
  margin-top:24px;padding:4px 20px;border-radius:var(--r);
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.66);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.07);
}
.meta-row{display:grid;grid-template-columns:108px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.meta-row:last-child{border-bottom:none}
.meta-k{font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--dm)}
.meta-v{font-size:16px;line-height:1.4375;letter-spacing:-.02em;color:var(--ink)}

/* ---------- blok tambahan dari editor ---------- */
.blocks{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.blk{position:relative}
.blk-row.meta{margin-top:0}
/* kolom info yang berurutan menyambung jadi satu tabel */
.blk-row + .blk-row{margin-top:-14px;border-top:1px solid var(--line);border-top-left-radius:0;border-top-right-radius:0}
.blk-row:has(+ .blk-row){border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}
/* di Keanggotaan, kolom info pertama menyambung ke tabel Chapter dan kawan-kawan */
.meta + .blocks:has(> .blk-row:first-child){margin-top:0}
.meta + .blocks > .blk-row:first-child{border-top:1px solid var(--line);border-top-left-radius:0;border-top-right-radius:0}
.meta:has(+ .blocks > .blk-row:first-child){border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}
.blk-text .p{margin-top:0}
.blk-img{margin:0}
.blk-img img{
  display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 10px rgba(0,0,0,.05),0 22px 50px rgba(0,0,0,.12);
}
.blk-cap{margin-top:10px;font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--dm);text-align:center}
.dark .blk-cap{color:var(--cream-dm)}

/* ---------- lists, chips ---------- */
.list{margin-top:18px;display:flex;flex-direction:column;gap:14px}
/* Bulatnya diposisikan absolut, bukan kolom grid. Dengan grid, teks polos yang mengikuti
   <b> dihitung sebagai item terpisah dan jatuh ke kolom bulat yang lebarnya 6px. */
.list li{list-style:none;display:block;position:relative;padding-left:20px;font-size:16px;line-height:1.5;letter-spacing:-.02em;color:var(--mu)}
.list li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.3}
.list li b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{
  font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--ink);padding:8px 15px;border-radius:99px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.dark .chip{background:rgba(245,245,247,.10);border-color:rgba(255,255,255,.12);color:var(--cream)}

/* ---------- GAINS, accordion ---------- */
.acc{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.acc-i{
  border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.66);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.07);
  transition:box-shadow .3s ease,background .3s ease;
}
.acc-i.on{background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.05),0 20px 48px rgba(0,0,0,.11)}
.acc-h{display:flex;align-items:center;gap:14px;padding:18px;cursor:pointer;user-select:none}
.acc-l{
  flex:none;width:36px;height:36px;border-radius:12px;color:#fff;
  background:linear-gradient(145deg,#4C4C63,#1D1D1F);
  font-family:var(--h);font-weight:700;font-size:17px;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.acc-t{flex:1;min-width:0;font-family:var(--h);font-weight:600;font-size:19px;line-height:1.2105;letter-spacing:-.022em;color:var(--ink)}
.acc-x{
  flex:none;width:30px;height:30px;border:1px solid rgba(255,255,255,.7);border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);color:var(--ink);position:relative;transition:background .25s,transform .25s;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.acc-x:hover{background:rgba(255,255,255,.9)}
.acc-x::before,.acc-x::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .34s cubic-bezier(.3,.9,.3,1),opacity .34s;
}
.acc-x::before{width:11px;height:1.6px}
.acc-x::after{width:1.6px;height:11px}
.acc-i.on .acc-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.3,.9,.3,1)}
.acc-i.on .acc-p{grid-template-rows:1fr}
.acc-p > div{overflow:hidden;min-height:0}
.acc-in{padding:0 18px 20px}
.acc-in .p{margin-top:2px;font-size:16px}
.acc-in .list{margin-top:6px}
.acc-in .chips{margin-top:14px}

/* ---------- referral: tumpukan 3D ---------- */
.burger{
  margin-top:26px;height:250px;display:grid;place-items:center;
  perspective:1000px;perspective-origin:50% 42%;touch-action:manipulation;
}
.scene{
  position:relative;width:200px;height:118px;transform-style:preserve-3d;
  transform:rotateX(var(--rx,58deg)) rotateZ(var(--rz,-16deg));
  transition:transform .55s cubic-bezier(.3,.9,.3,1);
}
/* bayangan jatuh di lantai, ikut miring bersama tumpukannya */
.scene::after{
  content:"";position:absolute;left:6%;top:12%;width:88%;height:88%;
  border-radius:50%;transform:translateZ(-26px);
  background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0) 76%);
}
.slab{
  position:absolute;inset:0;transform-style:preserve-3d;cursor:pointer;
  transform:translateZ(calc(var(--i) * 30px + var(--lift,0px)));
  transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .3s ease;
  opacity:.88;
}
.slab:hover{--lift:12px}
.slab .top,.slab .bot{position:absolute;inset:0;border-radius:50%;display:block}
.slab .top{
  background:
    radial-gradient(75% 75% at 32% 24%,rgba(255,255,255,.62),rgba(255,255,255,0) 62%),
    linear-gradient(150deg,rgba(255,255,255,.32),rgba(0,0,0,.14)),
    var(--tc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.slab .bot{background:var(--tc);box-shadow:inset 0 0 0 300px rgba(0,0,0,.46);transform:translateZ(-17px)}
.dark .scene::after{background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0) 76%)}

/* tombol pilih tier, segmented control kaca */
.tiers{
  flex:1;min-width:0;display:flex;gap:4px;padding:4px;border-radius:99px;
  /* Latar pekat tanpa backdrop-filter. Dengan backdrop-filter, Chrome membiarkan teks yang
     di-scroll lewat di belakang bar ini tetap terbaca tembus (sudah dibuktikan lewat eksperimen). */
  background:#F5F5FA;border:1px solid rgba(255,255,255,.66);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.tiers button{
  flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:99px;background:transparent;cursor:pointer;
  font-family:var(--h);font-size:15px;font-weight:600;letter-spacing:-.016em;color:var(--mu);
  transition:background .25s,color .25s,box-shadow .25s;
}
/* bar tier + tombol kembali ke 3D, menempel bersama saat di-scroll */
.tierbar{position:sticky;top:10px;z-index:5;display:flex;gap:8px;align-items:center;margin:4px 0 14px}
.tiers button{gap:7px}
.tback{
  flex:none;width:54px;height:54px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:#F5F5FA;border:1px solid rgba(255,255,255,.66);box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.tback:active{transform:scale(.94)}
/* ikon burger 4 garis: roti atas, cheese, meat, roti bawah */
.tico{display:inline-flex;flex-direction:column;gap:2px;width:17px;flex:none}
.tico i{display:block;height:3px;border-radius:2px;background:rgba(0,0,0,.16);transition:background .25s}
.tico i:first-child{height:4px;border-radius:8px 8px 2px 2px}
.tico i:last-child{height:4px;border-radius:2px 2px 8px 8px}
.tico.t0 i:first-child,.tico.t0 i:last-child,.tico.t1 i:nth-child(2),.tico.t2 i:nth-child(3){background:var(--tc)}
.tico.tall{width:21px;gap:2.5px}
.tico.tall i:first-child,.tico.tall i:last-child{background:var(--c0)}
.tico.tall i:nth-child(2){background:var(--c1)}
.tico.tall i:nth-child(3){background:var(--c2)}
.tiers button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.08)}

/* setelah dipilih: hanya tier yang disorot (.on) yang datar, sisanya lingkaran 3D miring
   seperti lapisan tumpukan. Ukuran kotaknya sama di dua keadaan, supaya scroll tidak melompat. */
.tflats{display:flex;flex-direction:column;gap:44px;margin-top:26px}
.tflat{text-align:center;scroll-margin-top:84px;perspective:900px}
.tdisc{
  position:relative;width:min(62%,220px);aspect-ratio:1/1;margin:0 auto;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;transform-style:preserve-3d;
  background:
    radial-gradient(75% 75% at 32% 24%,rgba(255,255,255,.62),rgba(255,255,255,0) 62%),
    linear-gradient(150deg,rgba(255,255,255,.32),rgba(0,0,0,.14)),
    var(--tc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 -12px 22px rgba(0,0,0,.16);
  transform:rotateX(58deg) rotateZ(-16deg) scale(.8);
  transition:transform .8s cubic-bezier(.3,.9,.3,1),box-shadow .5s ease;
}
/* sisi tebal lapisan, sama seperti .slab .bot */
.tdisc::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--tc);box-shadow:inset 0 0 0 300px rgba(0,0,0,.46);transform:translateZ(-17px);
}
.tflat.on .tdisc{
  transform:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 -12px 22px rgba(0,0,0,.16),0 20px 44px rgba(0,0,0,.16);
}
/* Nama dikembalikan tegak lurus layar saat miring, sama seperti .slab .nm.

   translateZ di depan itu wajib, bukan hiasan. rotateX(-58deg) membuat teks berdiri seperti
   papan reklame yang berpusat di tengah piringan, jadi separuh papannya berada di depan bidang
   piringan dan separuh lagi di belakangnya. Yang menutupi separuh bawah itu bidang latar
   piringan sendiri di z=0, bukan .tdisc::before yang ada jauh di belakang pada -17px.
   Di .slab .nm fontnya 17px sehingga bagian yang tenggelam cuma sekitar 9px dan tersamarkan
   text-shadow, tapi di sini fontnya 30px sehingga sekitar 15px teks benar-benar terpotong.
   translateZ mengangkat seluruh papan ke depan bidang piringan. Ditulis paling kiri supaya
   berlaku di ruang piringan, yaitu sepanjang garis normal piringan, bukan ke arah pandang
   papan itu sendiri. Nilainya harus lebih besar dari setengah tinggi teks dikali sin(58deg),
   sekitar 15px, jadi 22px memberi sedikit kelonggaran. */
.tdisc b{
  display:inline-block;font-family:var(--h);font-weight:700;font-size:30px;letter-spacing:-.038em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);
  transform:translateZ(22px) rotateZ(16deg) rotateX(-58deg);
  transition:transform .8s cubic-bezier(.3,.9,.3,1);
}
.tflat.on .tdisc b{transform:none}
.tier-lvl{font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--dm);margin-top:18px}
.tier-body{margin-top:8px;font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--mu);text-align:left}
/* fill backwards, bukan both, supaya setelah animasi masuk selesai opacity redup di bawah bisa berlaku */
.tflat .tier-lvl,.tflat .tier-body{
  animation:enter .5s backwards;animation-delay:calc(var(--d) * .1s + .35s);
  transition:opacity .45s ease;
}
.tflat:not(.on) .tier-lvl,.tflat:not(.on) .tier-body{opacity:.45}

/* ---------- off the record ---------- */
.facts{
  margin-top:20px;display:flex;flex-direction:column;padding:4px 20px;border-radius:var(--r);
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.66);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.07);
}
.fact{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fact:last-child{border-bottom:none}
.fact-n{font-family:var(--h);font-weight:600;font-size:14px;letter-spacing:-.016em;color:var(--dm)}
.fact-t{font-size:16px;line-height:1.5;letter-spacing:-.02em;color:var(--mu)}
.fact-t b{color:var(--ink);font-weight:600}

/* ---------- kontak (gelap) ---------- */
.contact{
  margin-top:24px;border-radius:var(--r);overflow:hidden;
  background:rgba(245,245,247,.07);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.contact a{
  display:grid;grid-template-columns:26px 1fr 12px;align-items:center;gap:15px;
  padding:18px;border-bottom:1px solid rgba(255,255,255,.10);
  text-decoration:none;color:var(--cream);transition:background .25s;
}
.contact a:last-child{border-bottom:none}
.contact a:hover{background:rgba(245,245,247,.07)}
.contact .ic{width:20px;height:20px;color:var(--cream-dm)}
.contact .tx{font-size:17px;line-height:1.47059;letter-spacing:-.022em;word-break:break-word}
.contact .ar{color:var(--cream-dm);font-size:17px;line-height:1}

/* ---------- lanjut inline ---------- */
/* Tombol sekunder. Sengaja tanpa isian supaya jelas bukan aksi utama: yang berisi
   penuh cuma Chat WhatsApp di kaki kartu. Garisnya memakai --ink beropasitas,
   bukan putih, supaya kontrasnya cukup di latar terang maupun gelap. */
.nextlink{
  margin-top:32px;width:100%;cursor:pointer;border-radius:var(--r-s);
  border:1.5px solid rgba(29,29,31,.28);background:transparent;
  font-family:var(--b);font-size:17px;line-height:1.47059;letter-spacing:-.022em;font-weight:500;
  color:var(--ink);padding:15px 18px;display:flex;align-items:center;justify-content:space-between;
  transition:border-color .25s,background .25s;
}
.nextlink:hover{border-color:rgba(29,29,31,.55);background:rgba(29,29,31,.04)}
.nextlink:active{background:rgba(29,29,31,.08)}

/* ---------- showreel ----------
   Latarnya poster slide yang sama, jadi tidak ada berkas tambahan yang diunduh.
   Gambarnya lewat --reel-img supaya gradien gelapnya tidak ikut tertimpa style inline. */
.reel{
  margin-top:12px;width:100%;min-height:92px;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-s);
  background:#121213;
  display:flex;align-items:center;gap:13px;padding:0 12px 0 18px;text-align:left;
  transition:border-color .25s;
}
/* Videonya keping 16:9 di kanan, bukan latar penuh di balik gradien.
   Alasannya kontras: isi video berpindah antara nyaris putih dan nyaris hitam, jadi
   latar penuh membuat keterbacaan teks ikut berubah ubah dan tombolnya terlihat kotor.
   Dengan tombol gelap pekat dan videonya dipisah, teks selalu aman apa pun isinya. */
.reel-bg{
  margin-left:auto;flex:none;width:124px;height:70px;border-radius:9px;
  object-fit:cover;background:#000;pointer-events:none;
}
@media(max-width:379px){ .reel-bg{width:98px;height:55px} }
.reel-t{overflow:hidden}
.reel-t b,.reel-t i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel:hover{border-color:rgba(255,255,255,.42)}
.reel:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.reel-ic{
  flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);color:#101010;
  display:flex;align-items:center;justify-content:center;
}
.reel-ic svg{width:21px;height:21px}
.reel-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.reel-t b{font-family:var(--b);font-size:17px;line-height:1.4;letter-spacing:-.022em;font-weight:600;color:#fff}
.reel-t i{font-style:normal;font-size:12.5px;line-height:1.4;letter-spacing:.01em;color:rgba(255,255,255,.62)}

/* Layar penuh dipakai overlay CSS, bukan Fullscreen API: Safari iOS hanya mengizinkan
   webkitEnterFullscreen pada video dan itu mengambil alih tampilan dengan player bawaan. */
.modal.full{align-items:center;justify-content:center;background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.reelbox{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
/* carousel yang sama dipakai ulang di dalam overlay, tapi tanpa bingkai kartu dan
   tanpa rasio 4:5, supaya videonya utuh selebar layar */
.reelcar{
  width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:none;
  box-shadow:none;background:#000;
}
.reelcar .car-media{object-fit:contain}
.reelcar .car-dots{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.reelcar .vsound{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.reel-x{
  position:absolute;z-index:2;top:calc(14px + env(safe-area-inset-top,0px));right:14px;
  width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.18);color:#fff;
  display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.reel-x svg{width:20px;height:20px}

/* ---------- embed Instagram ----------
   Lewat /<user>/embed/ milik Instagram sendiri, bukan widget pihak ketiga.
   loading="lazy" menahan unduhannya sampai user benar benar turun ke sini. */
.igbox{
  margin-top:30px;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.igbox-h{
  padding:14px 18px;font-size:13px;letter-spacing:.01em;color:var(--mu);
  border-bottom:1px solid rgba(255,255,255,.55);
}
.igbox-h b{color:var(--ink);font-weight:600}
.igframe{display:block;width:100%;height:352px;border:0;background:#fff}
.igbox-a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;font-size:15px;letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  border-top:1px solid rgba(255,255,255,.55);
}
.dark .igbox{border-color:rgba(255,255,255,.12);background:rgba(245,245,247,.07)}
.dark .igbox-a{color:var(--cream)}

/* ---------- kode QR BNI Connect ----------
   Dibungkus tautan supaya di HP tidak perlu dipindai pakai alat lain, cukup diketuk.
   Lebarnya jangan diturunkan di bawah sekitar 180px: di bawah itu pemindaian mulai
   gagal, sudah diukur dengan mendekode ulang gambarnya di berbagai ukuran. */
.qrbox{
  margin-top:30px;text-align:center;padding:22px 18px;border-radius:var(--r);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.qrtap{
  display:block;width:min(64%,208px);margin:0 auto;border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06),0 14px 30px rgba(0,0,0,.10);
  transition:transform .2s ease;
}
a.qrtap:hover{transform:translateY(-2px)}
a.qrtap:active{transform:translateY(0)}
.qrimg{display:block;width:100%;height:auto}
.qrlab{
  margin-top:16px;font-family:var(--h);font-weight:600;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.qrhint{margin-top:6px;font-size:13.5px;line-height:1.5;letter-spacing:-.01em;color:var(--mu)}
.dark .qrbox{background:rgba(245,245,247,.07);border-color:rgba(255,255,255,.12)}
.dark .qrlab{color:var(--cream)}
.dark .qrhint{color:var(--cream-dm)}
@media (prefers-reduced-motion: reduce){ a.qrtap:hover{transform:none} }

/* ---------- pin BNI ---------- */
.pins{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin:20px 0 24px}
.cover .pins{justify-content:center;margin:-10px 0 24px}
.pin{display:block;width:46px;height:46px;flex:none}
.pin img{
  width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.20));
}

/* logo di kaki Let's Connect. Logonya hitam di atas transparan, jadi di step
   gelap dibalik lewat filter, bukan dengan menyiapkan berkas putih terpisah. */
.foot-logo{display:block;height:28px;width:auto;margin:30px 0 12px;opacity:.72}
.dark .foot-logo{filter:invert(1)}

}
.nextlink span{color:var(--dm);font-weight:400;display:inline-flex;align-items:center;gap:6px}
.dark .nextlink{background:transparent;border-color:rgba(245,245,247,.38);color:var(--cream)}
.dark .nextlink:hover{border-color:rgba(245,245,247,.72);background:rgba(245,245,247,.07)}
.dark .nextlink:active{background:rgba(245,245,247,.12)}
.dark .nextlink span{color:var(--cream-dm)}

/* Panahnya maju mundur pelan, dan melompat sedikit lebih jauh saat disentuh.
   Amplitudonya kecil, tujuannya menunjukkan arah, bukan menarik perhatian. */
/* <i> bawaannya italic, makanya panahnya sempat miring. */
.nextlink .ar2{display:inline-block;font-style:normal;font-size:1.25em;line-height:1;margin:-2px 0 0 4px;animation:arrownudge 1.9s ease-in-out infinite;will-change:transform}
.nextlink:hover .ar2{animation:none;transform:translateX(4px);transition:transform .2s ease}
@keyframes arrownudge{
  0%,58%,100%{transform:translateX(0)}
  74%{transform:translateX(3px)}
}
@media (prefers-reduced-motion: reduce){
  .nextlink .ar2{animation:none}
}

/* ---------- footer: WA + navbar ---------- */
.foot{
  flex:none;background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid rgba(255,255,255,.55);
  padding:12px var(--pad) 0;display:flex;flex-direction:column;gap:10px;
}
.dark .foot{background:rgba(0,0,0,.42);border-top-color:rgba(255,255,255,.10)}
.foot.plain{padding:12px var(--pad) calc(18px + env(safe-area-inset-bottom));border-top:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

.nav{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid rgba(255,255,255,.5);margin:0 calc(var(--pad) * -1);
  padding:6px 8px calc(8px + env(safe-area-inset-bottom));
}
.dark .nav{border-top-color:rgba(255,255,255,.10)}
.nav button{
  background:none;border:none;cursor:pointer;font-family:var(--b);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 2px 7px;color:var(--dm);transition:color .28s;position:relative;isolation:isolate;
}
/* pil kaca di balik tab aktif */
.nav button::before{
  content:"";position:absolute;z-index:-1;inset:2px 5px;border-radius:15px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 1px 3px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:scale(.82);
  transition:opacity .34s cubic-bezier(.3,.9,.3,1),transform .34s cubic-bezier(.3,.9,.3,1);
}
.nav button.on::before{opacity:1;transform:none}
.dark .nav button::before{background:rgba(245,245,247,.16);border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dark .nav button{color:var(--cream-dm)}
.nav button svg{width:25px;height:25px}
.nav button b{font-size:10px;line-height:1.2;letter-spacing:-.006em;font-weight:500}
.nav button.on{color:var(--ink)}
.dark .nav button.on{color:var(--cream)}
.nav button.done:not(.on){color:var(--mu);opacity:.72}
.dark .nav button.done:not(.on){color:var(--cream-mu);opacity:.6}

.btn{
  width:100%;border:none;border-radius:99px;cursor:pointer;font-family:var(--b);
  background:var(--ink);color:var(--paper);
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;font-weight:500;
  padding:15px;display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:opacity .25s ease,transform .12s ease;
}
.btn:hover{opacity:.86}
.btn:active{transform:scale(.985)}
.btn svg{width:19px;height:19px}
.dark .btn{background:var(--cream);color:var(--ink-d)}
.skip{
  background:none;border:none;cursor:pointer;font-family:var(--b);
  color:var(--mu);font-size:16px;letter-spacing:-.02em;padding:8px;
}
.skip:hover{color:var(--ink)}
.dark .skip{color:var(--cream-dm)}

/* ---------- modal WhatsApp ---------- */
.modal{position:absolute;inset:0;z-index:80;display:none;align-items:flex-end;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.show{display:flex}
.box{
  width:100%;background:rgba(255,255,255,.80);color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(34px);backdrop-filter:saturate(180%) blur(34px);
  border-top:1px solid rgba(255,255,255,.8);border-radius:30px 30px 0 0;
  padding:28px var(--pad) calc(24px + env(safe-area-inset-bottom));
  animation:rise .36s cubic-bezier(.2,.85,.3,1);
}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.box-h{display:block;font-family:var(--h);font-weight:700;font-size:28px;line-height:1.0;letter-spacing:-.038em}
.box-s{margin-top:8px;font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--mu)}
.fld{margin-top:16px}
.fld label{display:block;font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--dm);margin-bottom:7px}
.fld input{
  width:100%;background:rgba(255,255,255,.7);border:1px solid var(--line-s);border-radius:var(--r-s);
  color:var(--ink);font-family:var(--b);font-size:17px;letter-spacing:-.022em;padding:13px 14px;
  outline:none;transition:border-color .25s;
}
.fld input:focus{border-color:var(--ink)}
.err{margin-top:10px;font-size:14px;color:#D70015;display:none}
.err.show{display:block}
.fld input.miss{border-color:#D70015}
.box-logo{display:block;height:34px;width:auto;margin-bottom:18px}
/* kotak modal selalu terang, jangan ikut warna step Kontak yang gelap */
.dark .box .btn{background:var(--ink);color:var(--paper)}
.dark .box .skip{color:var(--mu)}

/* ---------- kaca: kilau yang bergerak dan reaksi saat ditekan ---------- */
.quote,.meta,.acc-i,.facts,.contact,.cover-meta{position:relative}
.quote::after,.meta::after,.acc-i::after,.facts::after,.contact::after,.cover-meta::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(114deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.60) 46%,
    rgba(255,255,255,.18) 53%,
    rgba(255,255,255,0) 66%);
  background-size:300% 100%;background-repeat:no-repeat;
  opacity:.5;animation:gsheen 11s ease-in-out infinite;
}
.acc-i:nth-child(2)::after{animation-delay:1.1s}
.acc-i:nth-child(3)::after{animation-delay:2.2s}
.acc-i:nth-child(4)::after{animation-delay:3.3s}
.acc-i:nth-child(5)::after{animation-delay:4.4s}
@keyframes gsheen{
  0%{background-position:200% 0}
  26%,100%{background-position:-100% 0}
}
/* tekan: kaca menekuk sedikit lalu memantul, seperti panel Apple */
.quote,.meta,.acc-i,.facts{
  transition:transform .34s cubic-bezier(.3,1.4,.4,1),background .3s ease,box-shadow .3s ease;
}
.acc-i:active,.quote:active{transform:scale(.985)}
.acc-i:active{background:rgba(255,255,255,.7)}
.dark .quote::after,.dark .contact::after{opacity:.16}

/* ---------- logo BNI di navbar ---------- */
.nav button .tabimg{
  height:15px;width:auto;max-width:46px;margin:5px 0;object-fit:contain;display:block;
  filter:grayscale(1) brightness(1.5) opacity(.5);
  transition:filter .4s cubic-bezier(.3,.9,.3,1),transform .4s cubic-bezier(.3,1.5,.4,1);
}
.nav button.done:not(.on) .tabimg{filter:grayscale(1) brightness(1.2) opacity(.62)}
.nav button.on .tabimg{filter:none;transform:scale(1.14)}
.dark .nav button .tabimg{filter:grayscale(1) brightness(2.4) opacity(.45)}
.dark .nav button.on .tabimg{filter:brightness(1.1)}

/* ---------- foto Stephen di tombol WhatsApp ---------- */
.wabtn{position:relative;padding-right:56px;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 10px rgba(0,0,0,.18),0 8px 26px rgba(92,124,255,.22)}

/* Cahaya yang berputar di garis tepi, ala Nakama. Sudutnya dianimasikan lewat
   @property supaya conic-gradient bisa bergerak. Browser tanpa @property
   tetap menampilkan garis diam, tidak rusak. */
@property --wa-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.wabtn::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--wa-a),
    rgba(255,255,255,.08) 0 58%, rgba(148,108,255,.9) 70%, #fff 77%, rgba(92,124,255,.95) 83%, rgba(255,138,182,.8) 90%, rgba(255,255,255,.08) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:waspin 3.8s linear infinite;
}
/* kilau kaca yang menyapu badan tombol */
.wabtn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 62%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:washeen 4.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes waspin{to{--wa-a:360deg}}
@keyframes washeen{0%{background-position:160% 0}45%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion: reduce){.wabtn::before,.wabtn::after{animation:none}}
.wa-av{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 7px rgba(0,0,0,.3);
}
/* crop ke kepala dan bahu */
.wa-av img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center top;
  transform:scale(var(--ava-scale));transform-origin:var(--ava-origin);
}
.dark .wa-av{border-color:rgba(0,0,0,.6)}

/* ---------- tombol Instagram bulat di samping WhatsApp, gaya kilau yang sama ---------- */
.cta{display:flex;gap:10px}
.cta .wabtn{flex:1;min-width:0}
.cta .igbtn{flex:none;width:55px;height:55px;padding:0;text-decoration:none}
.cta .igbtn svg{width:23px;height:23px}
.igbtn::before{animation-delay:-1.9s}
.igbtn::after{animation-delay:.7s}

/* ---------- nama tiap lapisan, dikembalikan tegak lurus layar ---------- */
.slab .nm{
  position:absolute;left:50%;top:50%;white-space:nowrap;
  transform:
    rotateZ(calc(var(--rz,-16deg) * -1))
    rotateX(calc(var(--rx,58deg) * -1))
    translate(-50%,-50%);
  font-family:var(--h);font-weight:700;font-size:17px;letter-spacing:-.03em;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none;
  transition:transform .55s cubic-bezier(.3,.9,.3,1),opacity .3s ease;
  opacity:.92;
}
.pick{
  margin-top:2px;text-align:center;font-size:14px;line-height:1.42859;letter-spacing:-.016em;
  color:var(--dm);animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .mesh i{animation:none}
}

/* ---------- layar lebar ----------
   Dulu kartu melayang seperti HP di tengah layar, dan pola checker di belakangnya
   jadi kelihatan jelas. Sekarang permukaannya menutup layar, jadi rasanya sama
   seperti di HP, sementara isinya tetap dikunci selebar --col. */
@media(min-width:560px){
  body{display:block}
  .app{
    max-width:none;height:100dvh;
    border-radius:0;border:none;box-shadow:none;
  }
  .topnav,
  .foot,
  .foot.plain{
    padding-left:max(var(--pad), calc((100% - var(--col)) / 2 + var(--pad)));
    padding-right:max(var(--pad), calc((100% - var(--col)) / 2 + var(--pad)));
  }
  .step,
  .cover{max-width:var(--col);margin-inline:auto}
  .modal .box{max-width:var(--col);margin-inline:auto}