:root{
  --primary:#D50000;      /* merah tombol/aksen */
  --primary-dark:#9A0000; /* hover merah gelap */
  --bg:#101010;           /* hitam utama */
  --surface:#171717;      /* panel */
  --white:#FFFFFF;
  --muted:#B0B0B0;
  --gold:#FFD166;         /* aksen gold tipis */
  --neon:#00FF41;         /* jackpot ticker */
  --danger:#FF3B3B;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow:0 12px 32px rgba(0,0,0,.35);
}

/* ====== Reset & Global ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust:100% } /* cegah auto-zoom iOS */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:
    radial-gradient(1200px circle at 70% -10%, #2B0000 0%, #101010 55%, #0A0A0A 100%);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle grain (CSS only) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015), rgba(255,255,255,.015) 2px, transparent 2px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.01), rgba(255,255,255,.01) 2px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
}

/* Focus visible */
:focus-visible{outline:2px solid var(--gold); outline-offset: 3px; border-radius:8px}

/* Utils */
.container{width:min(1100px, 92vw); margin-inline:auto}
.sr-only{position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip link */
.skip-link{
  position:absolute; left:1rem; top:-40px; background:var(--gold); color:#101010;
  padding:.5rem .75rem; border-radius:8px; z-index:1000; transition:top .2s;
}
.skip-link:focus{top:1rem}

/* ====== Topbar ====== */
.j88-topbar{position:sticky; top:0; z-index:999; background:var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.06)}
.j88-topbar__inner{display:flex; justify-content:space-between; align-items:center; height:56px; gap:.75rem; padding:0 1rem}
.j88-topbar__inner--center{position:relative; justify-content:center}
.j88-brand{display:flex; align-items:center; gap:.5rem}
.j88-brand--center{display:flex; align-items:center; gap:.5rem}
.j88-logo{display:flex; align-items:center; gap:.25rem; font-weight:800; letter-spacing:.5px}
.j88-logo__mark{
  display:inline-grid; place-items:center; width:28px; height:28px;
  background:linear-gradient(180deg, var(--primary), var(--primary-dark));
  border-radius:8px; color:#fff; font-weight:900; box-shadow: var(--shadow);
}
.j88-logo__text{font-weight:800}
.j88-flag{filter:saturate(1.1); font-size:18px}

/* Logo gambar tengah */
.j88-logo-img{
  display:block;
  height:50px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
@media (min-width:768px){ .j88-logo-img{height:50px} }

.j88-auth{display:flex; align-items:center; gap:.5rem}
.j88-auth input{
  background:#0f0f0f; border:1px solid rgba(255,255,255,.1); color:var(--white);
  height:36px; padding:.4rem .6rem; border-radius:10px; min-width:140px;
}
.j88-auth input::placeholder{color:#7a7a7a}
.j88-auth .btn{height:36px}

/* ====== Buttons ====== */
.btn{
  --b:1.5px;
  display:inline-grid; place-items:center; padding:.6rem 1rem; border-radius:12px;
  border:var(--b) solid rgba(255,255,255,.12); color:var(--white); background:#151515;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position:relative; isolation:isolate;
  will-change: transform;
}
.btn::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 .5px rgba(255,209,102,.35); pointer-events:none}
.btn:hover{transform:scale(1.02); box-shadow: var(--shadow); border-color: rgba(255,209,102,.45)}
.btn-primary{background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-color: rgba(0,0,0,.2)}
.btn-primary:hover{box-shadow:0 10px 22px rgba(213,0,0,.45)}
.btn-outline{background:transparent; border-color: var(--primary); color:var(--white)}
.btn-outline:hover{background:rgba(213,0,0,.1)}
.btn-ghost{background:transparent; border-color: rgba(255,255,255,.25)}
.btn-lg{height:48px; padding:.8rem 1.2rem; border-radius: var(--radius-pill)}
.btn-icon{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#111; border:1px solid rgba(255,255,255,.15)}

/* Diagonal shine sweep */
.btn:hover::before,.j88-chip:hover::before,.j88-linkbtn:hover::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%) rotate(10deg);
  animation: sweep 1.2s forwards;
  mix-blend-mode:screen;
}
@keyframes sweep{to{transform:translateX(120%) rotate(10deg)}}

/* ====== Hero ====== */
.j88-hero{position:relative; padding: clamp(2rem, 8vw, 5rem) 0}
.j88-hero__inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; width:min(1100px, 92vw); margin-inline:auto}
.j88-hero__title{font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height:1.25; margin:0 0 1rem}
.j88-hero__sub{color:var(--muted); margin:0 0 1.25rem; max-width: 58ch}
.j88-hero__cta{display:flex; gap:.75rem; flex-wrap:wrap}
.j88-hero__art{position:relative; min-height:260px}
.j88-hero__orb{
  position:absolute; inset:auto 0 40% 10%; width:70%; aspect-ratio:1;
  border-radius:50%; background: radial-gradient(circle at 30% 30%, #ff5a5a, transparent 55%), radial-gradient(circle at 60% 60%, #ff1f1f, transparent 60%);
  filter: blur(18px) saturate(1.2); opacity:.9; transform: translateZ(0); will-change: transform;
}
/* Jika pakai gambar pada hero */
.j88-hero__mesh-img{max-width:100%; height:auto; display:block; margin:0 auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); will-change:transform; transition:transform .3s ease-out}

/* Awan Jepang kiri/kanan */
.j88-cloud{position:absolute; filter: blur(2px); opacity:.1; pointer-events:none}
.j88-cloud--left{left:-60px; top:10%; width:220px; height:120px; background:
  radial-gradient(120px 60px at 60px 60px, #fff 0 60%, transparent 61%),
  radial-gradient(160px 80px at 110px 70px, #fff 0 60%, transparent 61%),
  radial-gradient(120px 60px at 170px 60px, #fff 0 60%, transparent 61%)}
.j88-cloud--right{right:-60px; top:25%; width:240px; height:130px; background:
  radial-gradient(130px 70px at 70px 70px, #fff 0 60%, transparent 61%),
  radial-gradient(170px 90px at 120px 70px, #fff 0 60%, transparent 61%),
  radial-gradient(130px 70px at 190px 70px, #fff 0 60%, transparent 61%)}

/* ====== Ticker lama (marquee opsional) ====== */
.j88-ticker{margin: 1rem 0 2rem}
.j88-ticker__panel{
  width:min(1100px, 92vw); margin-inline:auto; background:linear-gradient(180deg, var(--primary), var(--primary-dark));
  padding:.6rem; border-radius: var(--radius-lg); position:relative; box-shadow: var(--shadow);
  display:flex; align-items:center; gap:.5rem;
}
.j88-ticker__led{flex:1; background:#070707; border-radius:14px; padding:.4rem .5rem; border:1px solid rgba(255,255,255,.12); overflow:hidden; position:relative}
.j88-ticker__track{display:flex; gap:0; width:max-content; will-change:transform; animation: marquee 16s linear infinite}
.j88-ticker__item{white-space:nowrap; padding-right:2rem; color:var(--neon); text-shadow:0 0 6px rgba(0,255,65,.6); font-weight:700; letter-spacing:.5px}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.j88-ticker__audio{margin-left:.25rem}

/* ====== Section Titles ====== */
.j88-section__title{
  color:#ff1f1f; width:min(1100px, 92vw); margin:2.2rem auto 1rem; font-size:1.2rem; letter-spacing:.3px
}

/* ====== JACKPOT BANNER (mode LED statis) ====== */
.jackpot-container{
  width:min(1100px,92vw);
  margin: 0 auto 1.6rem;
  padding:.6rem;
  border-radius:18px;
  background-image: linear-gradient(90deg, #6d0000 0%, #ff0000 50%, #5c0020 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:1rem; position:relative;
}
/* Kolom kiri "MEGA JACKPOT" */
.jackpot-header{
  flex:0 0 210px; height:130px; border-radius:14px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  letter-spacing:.12rem; text-transform:uppercase; color:#d4e2e6; text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.jackpot-header .mh{font-weight:900; font-size:32px; line-height:1}
.jackpot-header .jh{font-weight:800; font-size:28px; opacity:.9}
/* Layar LED wrapper */
.jackpot-screen{position:relative; flex:1; height:130px; border-radius:22px; padding:12px; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)); overflow:hidden}
/* Panel LED bersih tanpa bulatan */
.jackpot-led{
  width:100%; height:100%; border-radius:18px; padding:.8rem 1.2rem;
  background: linear-gradient(180deg, #1e1f1f, #070707);
  display:flex; align-items:center; justify-content:flex-start; gap:1rem;
  font-family:"Courier New", monospace;
  box-shadow: inset 0 2px 10px rgba(255,0,0,.45), inset 0 0 0 1px rgba(255,0,0,.15);
  overflow:hidden;
}
.jackpot-currency{
  color:#ff0000; font-size:3.8rem; font-weight:700; letter-spacing:.05rem;
  text-shadow:0 0 6px rgba(0,0,0,.6);
}
.jackpot-value{
  flex:1; color:#ff0000; font-size:4.5rem; font-weight:800; letter-spacing:.08rem; text-align:left;
  text-shadow:0 0 6px rgba(255,0,0,.46), 0 0 16px rgba(255,0,0,.35), 0 0 24px rgba(0,0,0,.25);
}

/* ====== Menu Chips ====== */
.j88-menu__grid{
  width:min(1100px, 92vw); margin-inline:auto;
  display:grid; gap:.8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.j88-chip{
  --b:1.5px;
  display:flex; gap:.75rem; align-items:center; width:100%;
  border-radius: var(--radius-pill);
  padding:.75rem 1rem; background: linear-gradient(180deg, #151515, #0F0F0F);
  border:var(--b) solid rgba(255,255,255,.08);
  color:var(--white); text-align:left; cursor:pointer; position:relative; isolation:isolate;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.j88-chip:hover{transform:translateY(-2px); border-color: rgba(255,209,102,.45); box-shadow: var(--shadow)}
.j88-chip svg{color:var(--gold)}
.j88-chip__txt strong{display:block; font-size:.98rem}
.j88-chip__txt span{color:var(--muted); font-size:.84rem; display:block; margin-top:2px}

/* ====== Link Buttons ====== */
.j88-links__list{
  width:min(900px, 92vw); margin: 1rem auto 0;
  display:grid; gap:.8rem; grid-template-columns: 1fr;
}
.j88-linkbtn{
  height:60px; border-radius: var(--radius-pill);
  background: linear-gradient(to top, #1b0000, #201a1a, #383737, #464646, #130000);
  border:1.5px solid rgba(255, 0, 0, 0.52);
  color:var(--white); font-weight:700; letter-spacing:.2px;
  cursor:pointer; position:relative; isolation:isolate;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.j88-linkbtn:hover{transform: scale(1.02); border-color: rgba(70, 0, 0, 0.45); box-shadow: var(--shadow)}

/* ====== Accordion ====== */
.j88-accordion{width:min(900px, 92vw); margin: 0 auto}
.j88-acc__item{border:1px solid rgba(255,0,0,.49); background:linear-gradient(to top, #1b0000, #201a1a, #383737, #464646, #130000); border-radius:12px; overflow:hidden; margin:.6rem 0}
.j88-acc__q{width:100%; text-align:left; background:#141414; color:var(--white); padding:.9rem 1rem; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px}
.j88-acc__a{padding:.85rem 1rem; color:var(--muted); background:#0f0f0f; border-top:1px solid rgba(255,255,255,.08)}

/* ====== Toast ====== */
.j88-toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.14);
  padding:.65rem .9rem; border-radius:12px; box-shadow: var(--shadow); opacity:0; transition: opacity .25s, transform .25s; z-index:9999;
}
.j88-toast.is-show{opacity:1; transform: translateX(-50%) translateY(0)}

/* ====== Footer ====== */
.j88-footer{margin-top: 2.4rem; padding:2rem 0; background: var(--surface); border-top:1px solid rgba(255,255,255,.08)}
.j88-footer__inner{width:min(1100px, 92vw); margin-inline:auto; text-align:center}
.j88-badges{display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem}
.j88-badge{display:inline-block; padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:#111; font-size:.82rem}
.j88-badge--secure{border-color:#2bb965}
.j88-badge--fast{border-color:#f2c14e}
.j88-badge--fair{border-color:#5aa7ff}
.j88-disclaimer{color:var(--muted); margin:.4rem auto; max-width: 80ch}
.j88-policy{display:flex; gap:1rem; justify-content:center; margin:.4rem 0}
.j88-policy a{color:var(--gold); text-decoration:none}
.j88-copy{color:var(--muted); margin-top:.5rem}
.j88-watermark{
  display:flex;
  justify-content:center;
  margin-bottom:1rem;
}
.j88-watermark__img{
  max-height:60px;   /* atur tinggi logo */
  width:auto;
  opacity:.85;       /* agak transparan kalau mau jadi watermark */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}


/* ====== Load-in Animations ====== */
.j88-hero__title, .j88-hero__sub, .j88-hero__cta .btn, .j88-chip, .j88-linkbtn{opacity:0; transform: translateY(12px)}
body.is-ready .j88-hero__title{opacity:1; transform:none; transition: all .5s ease .05s}
body.is-ready .j88-hero__sub{opacity:1; transform:none; transition: all .5s ease .12s}
body.is-ready .j88-hero__cta .btn:nth-child(1){opacity:1; transform:none; transition: all .5s ease .18s}
body.is-ready .j88-hero__cta .btn:nth-child(2){opacity:1; transform:none; transition: all .5s ease .24s}
body.is-ready .j88-chip{opacity:1; transform:none; transition: all .5s ease .06s}
body.is-ready .j88-linkbtn{opacity:1; transform:none; transition: all .5s ease .08s}

/* ====== Responsive ====== */
@media (max-width: 900px){
  .j88-hero__inner{grid-template-columns:1fr}
  .j88-hero__art{order:-1; min-height:200px}
  .j88-auth input{min-width:110px}
  .j88-auth{gap:.4rem}
}

/* --- Mobile patch (≤600px) --- */
@media (max-width:600px){
  /* Hero lebih padat */
  .j88-hero{padding:1.4rem 0 1.2rem}
  .j88-hero__title{font-size:clamp(1.2rem,5.2vw,1.6rem); line-height:1.25; margin-bottom:.6rem}
  .j88-hero__sub{font-size:.95rem; margin-bottom:.9rem}
  .j88-hero__cta{gap:.5rem}
  .j88-hero__cta .btn{height:44px; padding:.7rem 1rem}
  .j88-hero__art{min-height:160px}

  /* Jackpot: kolom */
  .jackpot-container{flex-direction:column; align-items:stretch; gap:.75rem; padding:.75rem; border-radius:14px; margin:.6rem auto 1.2rem}
  .jackpot-header{flex:0 0 auto; width:100%; height:auto; padding:.9rem .8rem; border-radius:12px; text-align:center}
  .jackpot-header .mh{font-size:20px}
  .jackpot-header .jh{font-size:18px}
  .jackpot-screen{height:86px; padding:8px; border-radius:14px}
  .jackpot-led{padding:.6rem .8rem; border-radius:12px; box-shadow: inset 0 1px 8px rgba(255,0,0,.45), inset 0 0 0 1px rgba(255,0,0,.12)}
  .jackpot-currency{font-size:1.05rem; letter-spacing:.03rem}
  .jackpot-value{font-size:1.35rem; letter-spacing:.04rem}

  /* Tombol audio */
  .jackpot-container .j88-ticker__audio{position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:10px}

  /* Link list */
  .j88-links__list{gap:.65rem}
  .j88-linkbtn{height:56px; font-size:.98rem}

  /* Section title & topbar */
  .j88-section__title{margin:1.2rem auto .6rem; font-size:1.05rem}
  .j88-topbar__inner{padding:0 .75rem}
  .j88-logo-img{height:40px}
}

/* ====== Reduced Motion ====== */
@media (prefers-reduced-motion: reduce){
  .j88-ticker__track{animation:none}
  .btn, .j88-chip, .j88-linkbtn{transition:none}
  .j88-hero__title, .j88-hero__sub, .j88-hero__cta .btn, .j88-chip, .j88-linkbtn{opacity:1; transform:none}
}