/* ============================================================
   BAYAR GROUP — BIOLINK
   Base: warm charcoal + brass  |  FX: RGB ring, ember fire, sweep
   ============================================================ */

/* sudut untuk conic-gradient RGB — didaftarkan supaya bisa dianimasi */
@property --deg{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces (warm neutral, bukan biru-abu standar) */
  --ink-900:#0c0d0b;
  --ink-850:#111310;
  --ink-800:#161814;
  --ink-750:#1d201b;
  --line:#2b2f27;
  --line-soft:#22261f;

  /* text */
  --tx:#ece9e0;
  --tx-dim:#a3a294;
  --tx-mute:#77786c;

  /* accents */
  --gold:#e7b043;
  --gold-hi:#f4cf78;
  --gold-lo:#a9762a;
  --ember:#de5b3b;
  --ember-hi:#ff9d5c;
  --jade:#58a97f;
  --steel:#6e93b8;

  --brand:231,176,67;            /* di-override per kartu */

  /* spektrum RGB — sengaja diredam (bukan neon) supaya nyatu dgn base hangat */
  --rgb:#e2503a,#e7b043,#d8d04a,#58a97f,#4f8fd0,#8f6ad6,#e2503a;

  /* shape & motion */
  --r-lg:18px;
  --r-md:14px;
  --ease:cubic-bezier(.2,.8,.25,1);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px -14px rgba(0,0,0,.9);

  --font-ui:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-dsp:"Chakra Petch","Segoe UI",system-ui,sans-serif;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}

body{
  min-height:100dvh;
  background:var(--ink-900);
  color:var(--tx);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  padding:
    calc(env(safe-area-inset-top) + 26px)
    16px
    calc(env(safe-area-inset-bottom) + 34px);
}

.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- 3. BACKGROUND ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.bg__grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 78% at 50% 0%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 12%,transparent 76%);
}

.bg__glow{position:absolute;border-radius:50%;filter:blur(64px)}
.bg__glow--a{
  top:-190px;left:50%;width:520px;height:420px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(231,176,67,.20),transparent 68%);
}
/* bara di dasar layar — sumber "api" */
.bg__glow--b{
  bottom:-170px;left:50%;width:min(760px,140vw);height:340px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(226,80,58,.20),rgba(231,176,67,.07) 45%,transparent 70%);
  animation:ember-breathe 5.5s ease-in-out infinite;
}

/* garis CRT tipis */
.bg__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
}

.bg__vignette{
  position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 8%,transparent 40%,rgba(0,0,0,.55) 100%);
}

/* percikan bara — lapisan paling atas, tidak menghalangi klik */
.fx{
  position:fixed;inset:0;z-index:40;
  width:100%;height:100%;
  pointer-events:none;
}

/* ---------- 4. SHELL ---------- */
.shell{width:100%;max-width:460px;margin:0 auto}

/* ---------- 5. HERO ---------- */
.hero{text-align:center;margin-bottom:22px;animation:fade-down .55s var(--ease) both}

/* --- logo brand --- */
.hero__logo{
  position:relative;
  width:clamp(158px,48vw,196px);
  margin:0 auto 14px;
  line-height:0;
}
.hero__logo img{
  position:relative;z-index:1;
  width:100%;height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.65)) drop-shadow(0 0 24px rgba(231,176,67,.20));
  animation:logo-float 6.5s ease-in-out infinite;
}

/* halo RGB berputar di belakang logo */
.hero__aura{
  position:absolute;inset:-16% -8%;border-radius:50%;
  background:conic-gradient(from var(--deg),var(--rgb));
  filter:blur(28px);
  opacity:.26;
  animation:rgb-spin 9s linear infinite;
}

/* lidah api di kaki logo */
.hero__flame{
  position:absolute;left:50%;bottom:-9%;
  width:74%;height:56%;
  transform:translateX(-50%);
  background:
    radial-gradient(46% 54% at 50% 74%,rgba(255,214,140,.5),transparent 70%),
    radial-gradient(62% 70% at 50% 82%,rgba(226,80,58,.4),transparent 72%);
  filter:blur(12px);
  animation:flicker 2.6s ease-in-out infinite;
}

.hero__sub{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:11px;font-size:13.5px;color:var(--tx-dim);
}
.ico--check{width:15px;height:15px;color:var(--jade);stroke-width:2.6}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:15px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--tx-dim);
  background:var(--ink-800);
  border:1px solid var(--line-soft);
}
.chip--live{color:#bfe9d1;border-color:rgba(88,169,127,.32);background:rgba(88,169,127,.09)}

.dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--jade);box-shadow:0 0 0 0 rgba(88,169,127,.6);
  animation:pulse 2.1s ease-out infinite;
}

/* ---------- 6. TICKER ---------- */
.ticker{
  position:relative;overflow:hidden;
  margin:0 -4px 24px;padding:8px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(231,176,67,.05),transparent 30%,transparent 70%,rgba(222,91,59,.05));
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__track{
  display:flex;align-items:center;width:max-content;
  font-family:var(--font-dsp);font-weight:600;font-size:10.5px;letter-spacing:2px;
  color:var(--tx-mute);white-space:nowrap;
  animation:marquee 26s linear infinite;
}
/* jarak lewat padding (bukan gap) supaya loop -50% benar-benar mulus */
.ticker__track span,
.ticker__track i{padding:0 7px}
.ticker__track i{color:var(--gold);font-style:normal;font-size:8px}

/* berkas cahaya RGB yang lewat di garis bawah ticker */
.ticker__rgb{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#e7b043,#58a97f,#4f8fd0,#8f6ad6,transparent);
  background-size:45% 100%;background-repeat:no-repeat;
  animation:rgb-slide 5s linear infinite;
}

/* ---------- 7. SECTION LABEL ---------- */
.sect{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sect__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.sect__line:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.sect__txt{
  font-family:var(--font-dsp);font-weight:600;font-size:11.5px;
  letter-spacing:3px;text-transform:uppercase;color:var(--tx-mute);
}

/* ---------- 8. LINK CARDS ---------- */
.links{display:flex;flex-direction:column;gap:11px}

.card{
  position:relative;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--ink-800),var(--ink-850) 65%);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  overflow:hidden;
  isolation:isolate;
  animation:rise .5s var(--ease) both;
  animation-delay:calc(var(--i) * 45ms + 120ms);
  transition:border-color .25s var(--ease),transform .18s var(--ease),box-shadow .25s var(--ease);
}

/* --- bingkai RGB berputar (tiap kartu beda fase) --- */
.card::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:1.4px;
  background:conic-gradient(from var(--deg),var(--rgb));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.32;
  animation:rgb-spin 7s linear infinite;
  animation-delay:calc(var(--i) * -.85s);
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}

/* --- glow mengikuti kursor --- */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(var(--brand),.17),transparent 70%);
  transition:opacity .3s var(--ease);
}

.card__hit{
  position:relative;z-index:1;
  display:grid;grid-template-columns:80px 1fr 34px;align-items:center;gap:13px;
  padding:12px 14px;
  overflow:hidden;
}

/* --- kilau menyapu saat hover / ditekan --- */
.card__hit::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.085),transparent);
  transform:translateX(-110%) skewX(-18deg);
  opacity:0;pointer-events:none;will-change:transform;
}

.card__logo{
  width:80px;height:56px;border-radius:var(--r-md);
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 30%,#20241d,#131611);
  border:1px solid var(--line);
  box-shadow:0 0 0 3px rgba(var(--brand),.06);
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card__logo img{
  width:100%;height:100%;object-fit:contain;padding:6px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.card__logo .fallback{
  font-family:var(--font-dsp);font-weight:700;font-size:17px;
  color:rgb(var(--brand));letter-spacing:.5px;
}

.card__body{min-width:0;padding-right:30px;display:flex;flex-direction:column;gap:3px}
.card__name{
  font-family:var(--font-dsp);font-weight:600;font-size:17px;letter-spacing:.2px;
  color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card__meta{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--tx-mute);letter-spacing:.2px;
}
.ico--v{width:12px;height:12px;color:var(--jade);stroke-width:3}

.card__go{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--tx-mute);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  transition:transform .25s var(--ease),color .25s var(--ease),background .25s var(--ease),
             border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.card__go .ico{width:16px;height:16px}

.card__copy{
  position:absolute;z-index:2;right:56px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  color:var(--tx-mute);
  border:1px solid transparent;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.card__copy .ico{width:15px;height:15px}
.card__copy:active{transform:translateY(-50%) scale(.9)}
.card__copy.is-done{color:var(--jade)}

/* --- state: ditekan (mobile) --- */
.card:active{transform:scale(.985)}
.card.is-tapped::before{opacity:1}
.card.is-tapped .card__hit::after{opacity:1;animation:sweep .75s var(--ease)}
.card.is-tapped .card__go{
  color:#20130c;border-color:transparent;
  background:linear-gradient(140deg,var(--ember-hi),var(--ember));
  box-shadow:0 0 16px rgba(222,91,59,.55);
}

/* --- state: hover (desktop) --- */
@media (hover:hover){
  .card:hover{
    transform:translateY(-2px);
    border-color:rgba(var(--brand),.30);
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 36px -20px rgba(0,0,0,.95),
               0 0 22px -8px rgba(var(--brand),.35);
  }
  .card:hover::before{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,.12))}
  .card:hover::after{opacity:1}
  .card:hover .card__hit::after{opacity:1;animation:sweep .85s var(--ease)}
  .card:hover .card__logo{border-color:rgba(var(--brand),.3);box-shadow:0 0 0 3px rgba(var(--brand),.10)}
  .card:hover .card__go{
    color:#20130c;border-color:transparent;transform:translateX(2px);
    background:linear-gradient(140deg,var(--ember-hi),var(--ember));
    box-shadow:0 0 16px rgba(222,91,59,.5);
  }
  .card__copy:hover{color:var(--tx);background:rgba(255,255,255,.06);border-color:var(--line)}
}

/* --- percikan saat diklik --- */
.ripple{
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,222,150,.38),rgba(226,80,58,.22) 45%,transparent 70%);
  animation:ripple .62s var(--ease) forwards;
}

/* ---------- 9. TOOLS ---------- */
.tools{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
  animation:rise .5s var(--ease) both;animation-delay:.5s;
}
.tool{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 10px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--tx-dim);
  background:var(--ink-800);
  border:1px solid var(--line-soft);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
}
.tool .ico{width:16px;height:16px}
.tool:active{transform:scale(.97)}
@media (hover:hover){
  .tool:hover{color:var(--gold);border-color:rgba(231,176,67,.32);background:rgba(231,176,67,.06)}
}

/* ---------- 10. FOOTER ---------- */
.foot{
  margin-top:26px;padding-top:20px;text-align:center;
  border-top:1px solid var(--line-soft);
  animation:fade-down .5s var(--ease) both;animation-delay:.58s;
}
.foot__warn{
  display:flex;align-items:flex-start;gap:9px;text-align:left;
  padding:11px 13px;border-radius:var(--r-md);
  font-size:11.5px;line-height:1.55;color:var(--tx-dim);
  background:rgba(222,91,59,.06);
  border:1px solid rgba(222,91,59,.18);
}
.foot__warn .ico{width:16px;height:16px;color:var(--ember);margin-top:1px}
.foot__meta{margin-top:14px;font-size:11.5px;color:var(--tx-mute);letter-spacing:.3px}
.foot__meta b{color:var(--tx-dim);font-weight:600}
.foot__copy{
  margin-top:6px;font-family:var(--font-dsp);font-weight:600;
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#4e5047;
}

/* ---------- 11. TOAST ---------- */
.toast{
  position:fixed;left:50%;z-index:50;
  bottom:calc(env(safe-area-inset-bottom) + 22px);
  transform:translate(-50%,120%);
  display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 40px);
  padding:11px 16px;border-radius:999px;
  font-size:13px;font-weight:600;white-space:nowrap;
  color:var(--tx);
  background:rgba(22,24,20,.96);
  border:1px solid var(--line);
  box-shadow:0 16px 34px -16px rgba(0,0,0,1);
  opacity:0;pointer-events:none;
  transition:transform .38s var(--ease),opacity .28s var(--ease);
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--gold);box-shadow:0 0 9px var(--gold);
}

/* ---------- 12. KEYFRAMES ---------- */
@keyframes rgb-spin{to{--deg:360deg}}
@keyframes rgb-slide{from{background-position:-50% 0}to{background-position:150% 0}}
@keyframes sweep{from{transform:translateX(-110%) skewX(-18deg)}to{transform:translateX(250%) skewX(-18deg)}}
@keyframes sheen{0%,100%{background-position:135% 0}50%{background-position:-35% 0}}
@keyframes flicker{
  0%,100%{opacity:.72;transform:translateX(-50%) scale(1,1)}
  22%{opacity:1;transform:translateX(-50%) scale(1.04,1.13)}
  41%{opacity:.62;transform:translateX(-50%) scale(.97,.93)}
  63%{opacity:.94;transform:translateX(-50%) scale(1.03,1.09)}
  81%{opacity:.7;transform:translateX(-50%) scale(.99,.98)}
}
@keyframes logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ember-breathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(88,169,127,.55)}
  70%{box-shadow:0 0 0 7px rgba(88,169,127,0)}
  100%{box-shadow:0 0 0 0 rgba(88,169,127,0)}
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- 13. RESPONSIVE ---------- */
@media (min-width:400px){
  .card__hit{padding:13px 15px;gap:14px}
}

@media (min-width:780px){
  body{padding-top:48px}
  .shell{max-width:840px}
  .links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tools{max-width:420px;margin-left:auto;margin-right:auto}
  .foot__warn{max-width:560px;margin-inline:auto;justify-content:center}
}

/* ---------- 14. MOTION / KONTRAS ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ticker__track,.ticker__rgb,.hero__flame,.bg__glow--b{animation:none}
  .hero__aura,.hero__logo img{animation:none}
  .card::before{opacity:.45}
}

@media (prefers-contrast:more){
  :root{--line:#4a4f43;--line-soft:#3a3f34;--tx-mute:#9a9b8e}
  .card::before{opacity:.6}
}