/* Zeysproject landing */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-vf.3100e775e8.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#f2f3f5; --ink-2:rgba(242,243,245,.72); --void:#050506;
  --label:"Inter",system-ui,sans-serif; --lw:620; --ls:-.005em;
  --sp:26px;                 /* jarak visual antar-blok di kartu */
  --cw:min(400px,84vw);      /* lebar kartu */
    --rx:0deg; --ry:0deg; --la:200deg; /* sudut cahaya, dari ui.js */
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--void);color:var(--ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:#d9dce2;color:#050506}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* ---------- lapisan 1: chrome 3D ---------- */
#bg{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0;opacity:0;transition:opacity 1.1s cubic-bezier(.16,1,.3,1)}
.bg-ready #bg{opacity:1}
.no-webgl #bg{display:none}
.no-webgl body{background:#050506 url(/assets/bg-chrome-2560.af385e6680.webp) center/cover no-repeat fixed}

/* vignette tepi saja, tengah transparan */
.veil{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.45) 100%)}

/* ---------- lapisan 3: kartu ---------- */
.stage{position:relative;z-index:3;min-height:100%;display:grid;place-items:center;perspective:1100px;padding:24px 0}
.frame{position:relative;width:var(--cw);border-radius:28px;padding:1px;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  backdrop-filter:blur(18px) saturate(108%);-webkit-backdrop-filter:blur(18px) saturate(108%);
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%,rgba(255,255,255,.05));
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;scale:.965;transition:opacity .9s cubic-bezier(.16,1,.3,1),scale 1.1s cubic-bezier(.16,1,.3,1)}
html.lit body.ready .frame{opacity:1;scale:1}
/* tepi perak; titik terangnya mengikuti arah cahaya (kursor/gyro) */
.frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:conic-gradient(from var(--la),rgba(255,255,255,.95),rgba(255,255,255,.18) 18%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.35) 52%,rgba(255,255,255,.06) 66%,rgba(255,255,255,.18) 84%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass{position:relative;border-radius:27px;background:rgba(6,6,8,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp);padding:var(--sp) calc(var(--sp) - 2px)}

.logo{width:92%;line-height:0;font-size:0}
.logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}

/* ---------- tombol chrome (realistis, cahaya ikut kursor/gyro) ---------- */
.menu{width:100%;display:flex;flex-direction:column;gap:13px}
.btn{--r:15px;--hx:50%;--hy:0px;position:relative;isolation:isolate;display:grid;grid-template-columns:40px 1fr 34px;align-items:center;gap:11px;
  min-height:60px;padding:8px 9px 8px 8px;border-radius:var(--r);color:#0b0c0e;
  border:2px solid transparent;
  background:
    /* titik kilau studio, bergeser mengikuti cahaya */
    radial-gradient(48% 90% at var(--hx) -18%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%) padding-box,
    /* muka chrome: langit terang → horizon gelap tajam → pantulan lantai */
    linear-gradient(180deg,#ffffff 0%,#eceef1 7%,#c3c8cf 15%,#8d939b 19%,#363a41 calc(21.5% + var(--hy)),#1b1e22 calc(24% + var(--hy)),#6a7078 calc(31% + var(--hy)),#a4aab2 44%,#c4c8ce 64%,#e4e7ea 84%,#fbfbfc 100%) padding-box,
    /* bingkai bevel chrome yang berputar mengikuti arah cahaya */
    conic-gradient(from var(--la,200deg),#ffffff,#6b7078 12%,#f4f5f7 24%,#2e3238 38%,#dfe2e6 52%,#7b8088 66%,#fafbfc 80%,#4a4e55 90%,#ffffff) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.55), inset 0 -6px 10px -6px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.7), 0 12px 22px -10px rgba(0,0,0,.95);
  transition:translate .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}
.btn > span:not(.flare):not(.holo){position:relative;z-index:1}
.btn .lbl{min-width:0;overflow:hidden;font-family:"Inter",system-ui,sans-serif;font-weight:680;letter-spacing:-.01em;font-size:15.5px;line-height:1.2;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* sumur ikon: kaca hitam tertanam, ikon perak */
.btn .ico,.btn .arr{display:grid;place-items:center;
  background:radial-gradient(120% 80% at 50% 0%,#3a3e45 0%,#121317 45%,#050506 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.18),0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.35)}
.btn .ico{width:40px;height:40px;border-radius:11px}
.btn .arr{width:34px;height:34px;border-radius:50%}
.btn .ico svg{width:20px;height:20px;fill:url(#g-silver)}
.btn .ico svg.stroke{fill:none;stroke:url(#g-silver);stroke-width:1.7;stroke-linejoin:round}
.btn .arr svg{width:17px;height:17px;fill:none;stroke:url(#g-silver);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* kilau otomatis: pita diagonal kiri → kanan tiap 2 dtk, menurun berurutan antar-tombol */
.btn::after{content:"";position:absolute;inset:-2px;z-index:0;border-radius:calc(var(--r) + 2px);pointer-events:none;
  background:linear-gradient(112deg,transparent 0 44%,rgba(20,22,26,.16) 46.2%,rgba(255,255,255,.55) 47.6%,#fff 49.2%,#fff 50.8%,rgba(255,255,255,.55) 52.4%,rgba(20,22,26,.16) 53.8%,transparent 56% 100%) no-repeat;
  background-size:300% 100%;background-position:88% 0;
  animation:glint 2s cubic-bezier(.5,0,.25,1) infinite}
.menu .btn:nth-child(2)::after{animation-delay:.12s}
.menu .btn:nth-child(3)::after{animation-delay:.24s}
.menu .btn:nth-child(4)::after{animation-delay:.36s}
@keyframes glint{0%{background-position:88% 0}50%,100%{background-position:12% 0}}
/* kilatan kecil di bingkai saat pita lewat */
.btn .flare{position:absolute;inset:-2px;z-index:0;border-radius:calc(var(--r) + 2px);pointer-events:none;opacity:0;
  box-shadow:0 0 14px 1px rgba(255,255,255,.35);animation:flare 2s ease-out infinite}
.menu .btn:nth-child(2) .flare{animation-delay:.12s}.menu .btn:nth-child(3) .flare{animation-delay:.24s}.menu .btn:nth-child(4) .flare{animation-delay:.36s}
@keyframes flare{0%,8%{opacity:0}25%{opacity:1}55%,100%{opacity:0}}

/* hover/fokus/tekan: garis cahaya berjalan di luar tepi */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn::before{content:"";position:absolute;inset:-5.5px;z-index:2;border-radius:calc(var(--r) + 5.5px);padding:1.6px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--ring),transparent 0 58%,rgba(255,255,255,.18) 72%,#fff 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85));transition:opacity .25s}
@keyframes ring{to{--ring:360deg}}
@media (hover:hover){
  .btn:hover::before{opacity:1;animation:ring 1.8s linear infinite}
  .btn:hover .arr svg{transform:translateX(3px)}
}
.btn:focus-visible{outline:none}
.btn:focus-visible::before,.btn:active::before{opacity:1;animation:ring 1.8s linear infinite}
.btn:active{translate:0 2px;box-shadow:inset 0 1px 0 #fff,inset 0 -6px 10px -6px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.7),0 4px 10px -4px rgba(0,0,0,.9)}

/* Affiliate: chrome hitam + tepi hologram tipis */
.btn--aff{color:#f3f4f6;
  background:
    radial-gradient(48% 90% at var(--hx) -18%,rgba(255,255,255,.38),rgba(255,255,255,0) 70%) padding-box,
    linear-gradient(180deg,#7a7f88 0%,#454a52 12%,#16181c calc(21.5% + var(--hy)),#050506 calc(24% + var(--hy)),#16181c 40%,#272a30 72%,#4d525a 100%) padding-box,
    conic-gradient(from var(--la,200deg),#d6dae0,#3a3e45 12%,#f4f5f7 24%,#1c1e22 38%,#c9cdd3 52%,#3a3e45 66%,#f4f5f7 80%,#2a2d32 90%,#d6dae0) border-box}
.btn--aff .lbl{white-space:normal;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn--aff .ico,.btn--aff .arr{background:linear-gradient(180deg,#ffffff,#d1d5db 34%,#3f444b 37%,#9aa0a8 60%,#eef0f2);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.6)}
.btn--aff .ico svg.stroke,.btn--aff .arr svg{stroke:#0a0a0c}
.btn--aff::after{background-image:linear-gradient(112deg,transparent 0 42%,rgba(255,255,255,.22) 47%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.22) 53%,transparent 58% 100%)}
@property --holo{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn--aff .holo{position:absolute!important;inset:-2px;border-radius:calc(var(--r) + 2px);padding:1.4px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--holo),#cfd3da,#bfe3ff 12%,#d9c9ff 24%,#ffd1ec 36%,#fff3c4 48%,#c9ffe8 60%,#cfd3da 72%,#e9ebee 86%,#cfd3da);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.8;animation:holo 9s linear infinite}
@keyframes holo{to{--holo:360deg}}

/* ---------- 404 ---------- */
.msg{font:500 15px/1.5 "Inter",system-ui,sans-serif;color:var(--ink-2);text-align:center;margin-block:-6px}

/* ---------- sosial ---------- */
.socials{display:flex;gap:18px;margin-block:-11px}
.soc{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.soc svg{position:relative;z-index:1;width:22px;height:22px;fill:var(--ink);opacity:.75;transition:opacity .2s,fill .2s}
.soc::before{content:"";position:absolute;inset:0;border-radius:50%;scale:.3;opacity:0;
  background:linear-gradient(180deg,#fbfbfc,#a7abb2 48%,#6f737b 50%,#e3e5e8);transition:scale .35s cubic-bezier(.16,1,.3,1),opacity .2s}
@media (hover:hover){.soc:hover::before{scale:1;opacity:1}.soc:hover svg{opacity:1;fill:#0a0a0c}}
.soc:focus-visible{outline:1.5px solid #fff;outline-offset:2px}
.soc:active{scale:.9}

/* intro bertahap */
.logo,.btn,.socials,.msg{opacity:0;translate:0 10px;transition:opacity .7s cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.16,1,.3,1)}
html.lit body.ready :is(.logo,.btn,.socials,.msg){opacity:1;translate:0 0}
.lit .ready .btn:nth-child(1){transition-delay:.12s}.lit .ready .btn:nth-child(2){transition-delay:.18s}
.lit .ready .btn:nth-child(3){transition-delay:.24s}.lit .ready .btn:nth-child(4){transition-delay:.30s}
.lit .ready .socials{transition-delay:.38s}
.lit .ready .btn:active{translate:0 2px;transition-delay:0s}

/* ---------- HP ---------- */
@media (max-width:560px){
  :root{--sp:22px;--cw:min(400px,84vw)}
  .btn{min-height:56px;grid-template-columns:36px 1fr 30px;gap:9px}
  .btn .ico{width:36px;height:36px}.btn .arr{width:30px;height:30px}
  .btn .lbl{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .btn--aff .holo{animation:none}
  .btn::after,.btn .flare{animation:none}
  .btn:hover::before,.btn:focus-visible::before{animation:none}
}

/* ---------- notifikasi ---------- */
.toast{position:fixed;z-index:11;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));translate:-50% 12px;opacity:0;pointer-events:none;padding:10px 15px;border-radius:12px;
  background:rgba(10,10,12,.92);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 30px rgba(0,0,0,.6);font:500 13.5px/1.3 "Inter",system-ui,sans-serif;color:#f2f3f5;transition:opacity .3s,translate .3s}
.toast.on{opacity:1;translate:-50% 0}