/* =========================================================
   VIPER AURUM x ORACLE (P5R) + HACKER PACK (FINAL GOLD)
   - Neon gold/amber, holographic grid, glass panels (warm)
   - Digital hex mesh, matrix rain (gold-green), cyber corners
   - Kompatibel dengan class yang sudah ada
   ========================================================= */

/* ---------- Root Tokens (AURUM CORE) ---------- */
:root{
  /* Type scale */
  --smaller-font: 0.72rem;
  --small-font:   0.9rem;
  --normal-font:  1rem;
  --medium-font:  1.12rem;
  --large-font:   1.68rem;
  --x-large-font: 2rem;

  /* Base */
  --bg-color:      #0a0906;         /* hitam ber-nuansa hangat */
  --layer-1:       #11100c;         /* panel gelap coklat-kehitaman */
  --layer-2:       #15130d;         /* panel gelap+1 */
  --surface-glass: rgba(18,15,8,.55); /* glass warm */

  /* Text */
  --text-first:  #fff8e6;           /* putih krem */
  --text-dim:    #e1d7b8;           /* sekunder hangat */
  --text-mute:   #a99a73;
  --text-second: #0b0a07;           /* teks di atas bg terang */

  /* AURUM Core (range emas → amber → honey) */
  --first-color:  #ffd54a;          /* soft neon gold */
  --second-color: #ffc107;          /* amber neon */
  --third-color:  #ffb300;          /* deep amber */
  --fourth-color: #f0b90b;          /* Binance gold */
  --fifth-color:  #ffe66b;          /* honey glow */
  --sixth-color:  #281e08;          /* hampir hitam keemasan */

  /* Accent / warn (hemat pakai) */
  --accent-magenta:#ff4bd8;
  --accent-purple: #8a5bff;
  --ok:   #2ece6f;
  --warn: #ffc107;
  --bad:  #ff4d4d;

  /* Oracle grid + spectral gradient (emas) */
  --g1: conic-gradient(from 180deg at 50% 50%,
        #ffd54a 0deg, #ffc107 65deg, #ffe66b 120deg,
        #ffb300 190deg, #f0b90b 250deg, #ffd54a 320deg, #ffd54a 360deg);
  --g2: linear-gradient(135deg,#ffe66b 0%,#ffd54a 40%,#ffc107 60%,#ffb300 100%);
  --g3: linear-gradient(180deg,#1a1509 0%,#0f0c07 100%); /* depth warm */
  --g4: linear-gradient(90deg,#f0b90b 0%,#ffd54a 100%);  /* outline hover */

  /* Glass & Glow (emas) */
  --glass-border: 1px solid rgba(255, 208, 85, .25);
  --inner-glow:   0 0 0 1px rgba(255,193,7,.16) inset, 0 0 28px rgba(255,208,85,.08) inset;
  --outer-glow:   0 6px 22px rgba(255,193,7,.18), 0 1px 0 rgba(255,255,255,.05);

  /* Motion */
  --ease-smooth: cubic-bezier(.22,.61,.36,1);
  --rad: 12px;

  /* Hacker pack (emas-hijau terminal) */
  --mesh-color:  rgba(255, 215, 74, .12);
  --mesh-glow:   rgba(255, 215, 74, .18);
  --matrix-color: rgba(255, 215, 110, .16);
  --terminal-green: #9aff7b;   /* hijau fosfor hangat */
  --crt-scan: rgba(255,215,110,.06);
  --glitch-magenta: #ff4bd8;   /* tetap: aksen “glitch” */
  --glitch-cyan:    #86fff3;   /* cyan hangat */
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(255,208,85,.06), transparent 55%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,193,7,.06), transparent 55%),
    var(--bg-color);
  color:var(--text-first);
  font-size:var(--normal-font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Subtle scanline (warm gold) */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: linear-gradient(transparent 97%, rgba(255,208,85,.06) 100%);
  background-size: 100% 3px;
  pointer-events:none; opacity:.22;
}

/* Focus ring aksesibel (emas) */
:focus-visible{outline:2px solid var(--second-color); outline-offset:2px}

/* ---------- Utilities (glass + grid) ---------- */
.u-glass{
  background:var(--surface-glass);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border:var(--glass-border);
  border-radius:var(--rad);
  box-shadow:var(--inner-glow), var(--outer-glow);
}
.u-grid{
  position:relative; overflow:hidden;
  background:var(--layer-1);
}
.u-grid::before{
  content:"";
  position:absolute; inset:-200%;
  background:
    linear-gradient(0deg, rgba(255,208,85,.10) 1px, transparent 1px) repeat,
    linear-gradient(90deg, rgba(255,208,85,.10) 1px, transparent 1px) repeat;
  background-size: 36px 36px, 36px 36px;
  transform:rotate(1deg);
  animation: gridFloat 24s linear infinite;
}
@keyframes gridFloat{
  0%{transform:translateY(0) rotate(1deg)}
  100%{transform:translateY(-36px) rotate(1deg)}
}

/* ---------- Logo ---------- */
.logo img{
  width: clamp(11rem, 18vw, 19rem);
  display:block; margin:1.6rem auto .8rem;
  filter: drop-shadow(0 8px 18px rgba(255,193,7,.25));
}

/* ---------- Slider / Banner ---------- */
.slider,.swiper{width:100%;max-width:100%}
.slider-wrapper{
  background:var(--g3);
  border-bottom:1px dashed rgba(255,193,7,.45);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}
.slider-img{
  width:100%;display:block;margin:0 auto;border-radius:var(--rad);
  box-shadow: var(--outer-glow);
}

/* ---------- Running Text ---------- */
.running-text{
  background:linear-gradient(90deg, rgba(255, 230, 107, .5), rgba(255, 193, 7, .45));
  color:var(--text-first);
  font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  padding:.35rem .6rem;
  border-top:var(--glass-border); border-bottom:var(--glass-border);
  position:relative; overflow:hidden;
}
.running-text::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: sheen 5s var(--ease-smooth) infinite;
}
@keyframes sheen{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

/* ---------- RTP Card ---------- */
.rtp-card{
  background: radial-gradient(80% 120% at 0% 0%, rgba(255,208,85,.09), transparent 60%), var(--layer-2);
  border-radius: var(--rad);
  padding: .75rem;
  text-align:center;
  width: 24rem; max-width:100%; height:100%;
  position:relative; z-index:1;
  border: var(--glass-border);
  box-shadow: var(--inner-glow), var(--outer-glow);
  transition: transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
}
.rtp-card:hover{ transform: translateY(-3px); box-shadow:0 10px 28px rgba(255,193,7,.22) }

.place-img-rtp{
  width:100%; padding:.55rem; position:relative; overflow:hidden; z-index:1;
  display:flex; border-radius: calc(var(--rad) - 4px);
  box-shadow: inset 0 0 0 1px rgba(255,208,85,.12);
  background:linear-gradient(180deg, rgba(255,208,85,.07), rgba(0,0,0,0));
}
.place-img-rtp:hover{cursor:pointer}

.rtp-card-img{
  width:29rem; max-width:100%; display:block; margin:0 auto;
  border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Badge TOP/HOT (pakai asetmu) */
.top-game,.hot-game{
  position:absolute; width:3rem; height:2.9rem; top:.25rem; left:.4rem; z-index:2;
  background-repeat:no-repeat!important; background-size:contain!important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.top-game{ background:url('../assets/top.gif') }
.hot-game{ background:url('../assets/hot.gif') }

/* Provider Icon */
.icon-providers{
  position:absolute; top:.55rem; right:.55rem; width:2rem; display:block; margin:0 auto;
}
.icon-providers img{ width:1.7rem; filter: drop-shadow(0 4px 10px rgba(255,193,7,.25)) }

/* ---------- Pola Box ---------- */
.pola-wrapper{
  background: linear-gradient(180deg, rgba(255,208,85,.06), rgba(0,0,0,0)), var(--layer-1);
  padding:.9rem; width:100%; border-radius:var(--rad); position:relative;
  border:var(--glass-border);
  box-shadow:var(--inner-glow), var(--outer-glow);
}
.pola-wrapper h4{ font-size:.95rem; color:var(--text-first) }
.pola-wrapper h5{ font-size:.8rem; color:var(--text-dim) }
.pola-wrapper h4 i, .pola-wrapper h5 i{ color:var(--second-color) }

.jam-wrapper{
  background: linear-gradient(145deg,#1c1609,#151007);
  border-radius:50%; padding:.6rem;
  box-shadow: inset 0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,208,85,.12);
}

/* ---------- Table Pola ---------- */
.table-pola{width:100%;max-width:100%}
.table-pola tr td{
  text-align:center; font-size:.72rem; color:var(--text-first);
  padding:.45rem .25rem; border-bottom:1px dashed rgba(255,208,85,.14);
}

/* ---------- Provider Strip ---------- */
.icon-prov{
  background:linear-gradient(90deg, rgba(255, 214, 90, .25) 0%, rgba(255, 193, 7, .25) 100%);
  display:flex; position:relative; overflow:auto!important; gap:.35rem; padding:.35rem;
  border-top:var(--glass-border); border-bottom:var(--glass-border);
}
.item-prov{ padding:0 .5rem }
.img-prov{ display:block; margin:0 auto; filter:drop-shadow(0 6px 14px rgba(255,193,7,.25)) }
.icon-card-bg{ cursor:pointer; padding:.15rem!important; color:var(--text-first) }
.icon-card-bg p{
  font-size:.74rem; font-weight:700; color:var(--text-first);
  text-align:center; white-space:nowrap; text-transform:uppercase; letter-spacing:.4px;
}

/* ---------- Buttons ---------- */
.btn-login,.btn-daftar,.btn-play{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border:none; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  border-radius:10px; padding:.62rem .8rem; gap:.5rem;
  color:var(--text-second); cursor:pointer; isolation:isolate;
  transition: transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth), background .18s var(--ease-smooth);
}

/* Login = Gold Bright */
.btn-login{
  background: linear-gradient(90deg,#ffe66b 0%,#ffd54a 100%);
  box-shadow: var(--outer-glow);
}
.btn-login::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(80% 120% at 10% 10%, rgba(255,255,255,.20), transparent 60%);
  mix-blend-mode:overlay; pointer-events:none;
}
.btn-login:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,208,85,.35);
  background: linear-gradient(90deg,#fff176 0%,#ffc107 100%);
}

/* Daftar = Amber → Deep Amber */
.btn-daftar{
  background: linear-gradient(90deg,#ffc107 0%,#ffb300 100%);
  color:var(--text-first);
  box-shadow: 0 6px 18px rgba(255,193,7,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-daftar:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,193,7,.35);
}

/* Play = Royal Gold Button */
.btn-play{
  width:100%; font-size:.72rem; padding:.5rem .65rem; margin-top:.6rem;
  background: linear-gradient(180deg,#f0b90b 0%, #b8870a 80%);
  color:#1a1304; border:1px solid rgba(255,193,7,.35);
}
.btn-play:hover{
  background: linear-gradient(180deg,#e0ab08 0%, #a47708 85%);
  box-shadow: 0 8px 22px rgba(160,120,8,.35);
}

/* ---------- Bottom Nav ---------- */
.nav-bottom{
  position:fixed; bottom:0; left:0; right:0; display:flex; z-index:11; overflow:hidden;
  width:100%; border-top:3px solid rgba(255,208,85,.35);
  background: linear-gradient(180deg, rgba(24,18,7,.75), rgba(24,18,7,.95));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.item-nav-bottom{
  flex:1 1 20%; text-align:center; padding:.45rem .3rem;
  color:var(--text-first); font-weight:700; font-size:.82rem;
  background: linear-gradient(0deg, rgba(255,208,85,.18) 0%, rgba(255,193,7,.18) 100%);
  border-right:1px solid rgba(255,208,85,.10);
  transition: background .15s var(--ease-smooth);
}
.item-nav-bottom:last-child{border-right:none}
.item-nav-bottom:hover{
  background: linear-gradient(0deg, rgba(255,208,85,.28) 0%, rgba(255,193,7,.28) 100%);
  cursor:pointer;
}
.item-nav-bottom p{margin:0}

/* ---------- Back To Top ---------- */
.btn-up{
  display:none; position:fixed; bottom:3.85rem; right:.85rem; z-index:99;
  font-size:.9rem; padding:.55rem .7rem; border-radius:10px;
  background:linear-gradient(90deg,#ffe66b,#ffc107); color:#261b06; font-weight:900;
  box-shadow:0 10px 26px rgba(255,193,7,.28);
}

/* ---------- Percentage Bar ---------- */
.percent{
  height:19px; margin-top:10px!important; display:flex; overflow:hidden;
  font-size:.75rem; background:linear-gradient(180deg,#181207,#120e06);
  border-radius:8px; width:100%; position:relative; border:1px solid rgba(255,208,85,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.percent p{
  z-index:15; position:absolute; width:100%; top:0; transform:translateY(0);
  font-size:12px; font-weight:800; color:#fff7d1; text-shadow:0 1px 2px rgba(0, 0, 0, 0.92);
}

/* Base bar (emas default) */
.percent-bar{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent),
    linear-gradient(90deg,#ffe66b,#ffc107);
  background-size:1rem 1rem, 200% 100%;
  color:#fff; text-align:center; white-space:nowrap; transition:width .6s ease, background-position 1.5s linear;
  animation: progressMove 2s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
@keyframes progressMove{
  0%{background-position:0 0, 0% 50%}
  100%{background-position:1rem 0, 100% 50%}
}

/* Variants */
.good{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent),
    linear-gradient(90deg,#ffe66b,#2ece6f);
}

/* SSR “Golden Rainbow” — start & end sama -> no seam */
.great{
  background-image:
    linear-gradient(45deg,
      rgba(255,255,255,.18) 25%,
      transparent 25%, transparent 50%,
      rgba(255,255,255,.18) 50%,
      rgba(255,255,255,.18) 75%,
      transparent 75%, transparent),
    linear-gradient(90deg,
      #FFD54A 0%,
      #FFC107 10%,
      #FFB300 20%,
      #FF9F3F 30%,
      #FF7A57 40%,
      #E55C8A 50%,
      #C98EFF 60%,
      #86FFF3 70%,
      #D1FF6A 80%,
      #FFE66B 90%,
      #FFD54A 100% /* = 0% */
    );
}
.percent-bar.great{
  background-size: 1rem 1rem, 300% 100%;
  animation: progressMoveSSR 3s linear infinite alternate;
}
@keyframes progressMoveSSR{
  from{ background-position: 0 0,   0%   50% }
  to  { background-position: 1rem 0, 200% 50% }
}

.bad{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent),
    linear-gradient(90deg,#ff6b6b,#ff4d4d);
}

/* ---------- Content Card ---------- */
.content-home{
  padding:1rem; margin-bottom:4rem;
  color:var(--text-first);
  background: linear-gradient(180deg, rgba(255,208,85,.05), rgba(0,0,0,0)), var(--layer-1);
  border:var(--glass-border);
  border-radius:var(--rad);
  box-shadow: var(--inner-glow), var(--outer-glow);
}

/* ---------- Modal Contact (narrow) ---------- */
.modal.modal-contact .modal-dialog{ max-width:300px!important }

/* ---------- Social Boxes ---------- */
.social-box{
  display:flex; flex-direction:row; justify-content:space-between; align-items:center;
  border-radius:10px; color:#1b1406!important; text-decoration:none!important; position:relative;
  padding:.5rem .6rem; gap:.6rem; border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  background:linear-gradient(135deg,#ffe66b 0%, #ffc107 100%);
}
.social-box .icon{
  display:flex; justify-content:center; align-items:center;
  width:45px; height:45px; border-radius:8px; position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background-color:#b8860b;
}
.social-box .icon img{ width:20px; height:20px }
.social-box .text{ font-size:16px; font-weight:700; color:#1b1406 }

.social-box.tg{ background:linear-gradient(135deg,#ffe66b 0%, #ffc107 100%) }
.social-box.wa{ background:linear-gradient(135deg,#ffe66b 0%, #ffb300 100%) }
.social-box.lc{ background:linear-gradient(135deg,#ffd54a 0%, #f0b90b 100%) }

.social-box.tg .icon{ background-color:#8c6a1f }
.social-box.wa .icon{ background-color:#7a5a17 }
.social-box.lc .icon{ background-color:#6b4f14 }

/* ---------- Responsive ---------- */
@media (min-width:1200px){
  .container,.container-lg,.container-md,.container-sm,.container-xl{ max-width:1100px!important }
}
@media (max-width:1024px){
  .running-text{ font-size:.95rem }
}
@media (max-width:480px){
  html,body{ max-width:100%; overflow-y:scroll!important; overflow-x:hidden!important }
  .logo img{ width:13rem!important }
  .pola-wrapper{ width:100%!important; padding:.58rem!important }
  .rtp-card-img{ width:100%!important }
  .icon-card-bg p{ font-size:.62rem!important; font-weight:800!important }
  .icon-prov{ justify-content:flex-start!important }
  .icon-card-bg img{ width:3rem!important }
  .title-game{ font-size:1.18rem!important }
  .item-nav-bottom{ font-size:.78rem; padding:.4rem .25rem }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* =========================================================
   HACKER PACK — Digital Mesh, Matrix Rain, Cyber Corners,
   Terminal/CRT & Glitch Hover (AURUM VARIANT)
   ========================================================= */

/* 1) DIGITAL HEX MESH (emas) */
.u-hexmesh{
  position: relative;
  isolation: isolate;
}
.u-hexmesh::before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  mix-blend-mode: overlay;
  opacity:.7;
  background:
    repeating-linear-gradient( 60deg, var(--mesh-glow) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-60deg, var(--mesh-glow) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(  0deg, var(--mesh-glow) 0 1px, transparent 1px 39px);
  filter: drop-shadow(0 0 6px rgba(255, 208, 85, .35));
  animation: meshDrift 30s linear infinite;
  border-radius: inherit;
}
.u-hexmesh::after{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none; border-radius:inherit;
  background:
    repeating-linear-gradient( 60deg, var(--mesh-color) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-60deg, var(--mesh-color) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(  0deg, var(--mesh-color) 0 1px, transparent 1px 42px);
  opacity:.35;
  animation: meshDrift2 38s linear infinite reverse;
}
@keyframes meshDrift{
  0%  { transform: translateY(0) translateX(0) }
  100%{ transform: translateY(-36px) translateX(24px) }
}
@keyframes meshDrift2{
  0%  { transform: translateY(0) translateX(0) }
  100%{ transform: translateY(30px) translateX(-18px) }
}

/* 2) MATRIX RAIN (golden) */
.u-matrix{
  position:relative; isolation:isolate; overflow:hidden;
}
.u-matrix::before{
  content:"";
  position:absolute; inset:-1px; pointer-events:none;
  background-image:
    linear-gradient(0deg, transparent 0 85%, var(--matrix-color) 90%, transparent 100%);
  background-size: 100% 18px;
  mix-blend-mode: screen;
  opacity:.55;
  animation: matrixScroll 6.5s linear infinite;
}
.u-matrix::after{
  content:"";
  position:absolute; inset:-1px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,215,110,.08) 30px 31px);
  opacity:.15;
}
@keyframes matrixScroll{
  0%  { background-position: 0 0 }
  100%{ background-position: 0 18px }
}

/* 3) CYBER CORNER BRACKETS (emas) */
.u-cyber-corners{ position:relative }
.u-cyber-corners::before,
.u-cyber-corners::after{
  content:""; position:absolute; width:28px; height:28px; pointer-events:none;
  border:2px solid transparent; border-image: linear-gradient(90deg, #f0b90b, #ffd54a) 1;
  filter: drop-shadow(0 0 6px rgba(255,193,7,.35));
}
.u-cyber-corners::before{ top:8px; left:8px; border-right:none; border-bottom:none }
.u-cyber-corners::after { bottom:8px; right:8px; border-left:none; border-top:none }
.u-cyber-corners--bright::before,
.u-cyber-corners--bright::after{ filter: drop-shadow(0 0 10px rgba(255,208,85,.6)) }

/* 4) TERMINAL / CRT (hangat) */
.u-terminal{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--terminal-green);
  text-shadow: 0 0 8px rgba(154,255,123,.3), 0 0 2px rgba(154,255,123,.45);
  letter-spacing:.4px;
}
.u-terminal::after{
  content:"▌"; margin-left:4px; animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink{ 50%{opacity:0} }

.u-crt{
  position:relative; isolation:isolate;
  box-shadow: inset 0 0 0 1px rgba(255,215,110,.10);
}
.u-crt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(transparent 96%, var(--crt-scan) 100%);
  background-size: 100% 3px; opacity:.35;
}
.u-crt::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255,208,85,.06), transparent 60%);
  mix-blend-mode: screen; opacity:.5;
}

/* 5) GLITCH HOVER (tone warm) */
.u-glitch{ position:relative; display:inline-block }
.u-glitch::before,
.u-glitch::after{
  content:attr(data-glitch);
  position:absolute; inset:0; pointer-events:none; mix-blend-mode: screen;
  transform: translate(0,0);
  clip-path: inset(0 0 0 0);
  opacity:.0;
}
.u-glitch:hover::before{
  color: var(--glitch-magenta);
  text-shadow: 0 0 8px rgba(255,75,216,.6);
  animation: glitch1 .6s infinite;
  opacity:.9;
}
.u-glitch:hover::after{
  color: var(--glitch-cyan);
  text-shadow: 0 0 8px rgba(134,255,243,.6);
  animation: glitch2 .6s infinite;
  opacity:.9;
}
@keyframes glitch1{
  0%{ transform: translate(0,0) }
  20%{ transform: translate(-2px,-1px) }
  40%{ transform: translate(2px,1px) }
  60%{ transform: translate(-1px,2px) }
  80%{ transform: translate(1px,-2px) }
  100%{ transform: translate(0,0) }
}
@keyframes glitch2{
  0%{ transform: translate(0,0) }
  20%{ transform: translate(2px,1px) }
  40%{ transform: translate(-2px,-1px) }
  60%{ transform: translate(1px,-2px) }
  80%{ transform: translate(-1px,2px) }
  100%{ transform: translate(0,0) }
}
#dragon-layer{
  width: 100%;
  height: 260px;             /* tinggi visual, bebas ganti */
  display:block;
  image-rendering: pixelated; /* rasa retro */
  image-rendering: crisp-edges;
}

/* 6) VARIAN TOMBOL "HACKER" (sheen warm) */
.btn-login.hacker, .btn-daftar.hacker{ position:relative; overflow:hidden }
.btn-login.hacker::before, .btn-daftar.hacker::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%);
  animation: btnSheen 2.8s var(--ease-smooth) infinite;
  border-radius:inherit;
}
@keyframes btnSheen{
  0%{ transform: translateX(-120%) }
  50%{ transform: translateX(120%) }
  100%{ transform: translateX(120%) }
}

/* 7) Card versi cyber (gabungan utilities) */
.rtp-card.u-crt{ border:1px solid rgba(255,208,85,.18) }

/* 8) Reduced Motion override */
@media (prefers-reduced-motion: reduce){
  .u-hexmesh::before,.u-hexmesh::after,
  .u-matrix::before,
  .u-glitch::before,.u-glitch::after{ animation:none!important }
}
#dragons-layer{
  position:fixed; inset:0; pointer-events:none; /* layer mengambang */
  z-index: 30; /* sesuaikan */
}
.dragon-sprite{
  position:absolute; will-change: transform;
  pointer-events:auto; /* agar bisa drag */
  touch-action: none;  /* penting untuk pointer events di mobile */
}
.dragon-canvas{
  display:block;
  image-rendering: pixelated; /* sprite lebih crisp */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}