/* ===== Hover effects untuk kartu game ===== */
/* === xlang (isolated) === */

.xlang{position:relative;display:inline-block;z-index:9999}
.xlang-btn{padding:8px 12px;border-radius:999px;border:1px solid #00ff11;background:#0a1410;color:#eaf8f0;font-weight:800;cursor:pointer}
.xlang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:#0b1511;border:1px solid #12351f;border-radius:12px;padding:6px;margin:0;list-style:none;display:none;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.xlang.open .xlang-menu{display:block}
.xlang-menu button{width:100%;text-align:left;padding:10px;border:none;background:transparent;color:#eaf8f0;border-radius:10px;cursor:pointer;font-weight:700}
.xlang-menu button:hover,.xlang-menu button.is-active{background:#0e2217}
.card{
  transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.50);
  outline: 1px solid rgba(12, 249, 0, 0.25);
  cursor: pointer; /* biar terasa bisa diklik */
}

/* Zoom + glow di cover saat hover */
.card .cover{ overflow:hidden; }
.card .cover img{
  transition: transform .45s ease, filter .45s ease;
}
.card:hover .cover img{
  transform: scale(1.05);
  filter: saturate(1.15) contrast(1.08);
}
.card .cover::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 240px at 60% -10%, rgba(0, 255, 21, 0.28), transparent 60%);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;
}
.card:hover .cover::before{ opacity:1; }

/* Tombol Play “muncul” lebih tegas saat hover */
.card .cta button{
  transform: translateY(-6px);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.card:hover .cta button{
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(0, 255, 34, 0.35), inset 0 1px 0 #fff6;
  filter: brightness(1.03);
}

/* ===== Hover untuk tombol bahasa (biar terasa interaktif) ===== */
.lang-switch button{
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.lang-switch button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 0 3px var(--ring);
}
/* Pulse untuk tombol Main Sekarang! */
@keyframes pulsePlay {
  0%   { transform: translateY(-6px) scale(1);   box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50%  { transform: translateY(-6px) scale(1.07); box-shadow: 0 0 0 8px rgba(34,197,94,.15); }
  100% { transform: translateY(-6px) scale(1);   box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Jalanin animasi */
.cta .btn-play{
  will-change: transform, box-shadow;
  animation: pulsePlay 1.6s ease-in-out infinite;
}

/* Supaya saat hover animasi berhenti (biar fokus klik) */
.cta .btn-play:hover{
  animation-play-state: paused;
}

/* Hormati user yang sensitif terhadap gerakan */
@media (prefers-reduced-motion: reduce){
  .cta .btn-play{ animation: none; }
}
/* === RTP BAR – versi animasi kuat === */
.bar > i{
  position: relative;
  background: linear-gradient(90deg,#6e0111 0%, #ddff03 40%, #00ff08 100%);
  background-size: 300% 100%;
  animation: rtpFlow 1.6s linear infinite;   /* lebih cepat & jelas */
  filter: saturate(1.35) brightness(1.1);
  box-shadow: inset 0 0 2px #000, 0 0 10px rgba(34,197,94,.45);
  border-radius: inherit;
}

/* shimmer diagonal yang lebih terlihat */
.bar > i::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.35) 0 8px,
    rgba(255,255,255,0)   8px 16px
  );
  opacity:.35;
  mix-blend-mode: screen;
  animation: rtpStripes .9s linear infinite;
  border-radius: inherit;
}

/* Efek stripes + shine pada RTP bar */
.bar>i {
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e);
  position: relative;
  overflow: hidden;
}

/* Stripes berjalan */
.bar>i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.15) 0 10px,
    rgba(255,255,255,0) 10px 20px
  );
  animation: stripesMove 1s linear infinite;
}

@keyframes stripesMove {
  from { background-position: 0 0; }
  to   { background-position: 40px 0; }
}

/* Kilatan cahaya */
.bar>i::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shineMove 3s ease-in-out infinite;
}

@keyframes shineMove {
  0%, 60% { left: -30%; opacity: 0; }
  70%     { left: 120%; opacity: 1; }
  100%    { left: 120%; opacity: 0; }
}
.logo-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden; /* supaya kilatan nggak keluar */
}

.logo-img {
  display: block;
  width: 200px; /* ubah sesuai kebutuhan */
  height: auto;
}

/* efek shining */
.logo-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shineMove 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shineMove {
  0% {
    left: -75%;
  }
  30% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}
.btn-play {
  position: relative;
  background: linear-gradient(180deg, #10b92f, #05961b);
  color: #061114;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
  animation: pulseGlow 1.8s infinite ease-in-out;
}

/* Efek kilatan cahaya */
.btn-play::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shineSweep 3s ease-in-out infinite;
}

/* Animasi kilatan */
@keyframes shineSweep {
  0% { left: -80%; }
  30% { left: 130%; }
  100% { left: 130%; }
}

/* Animasi glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(34,197,94,0.5), inset 0 1px 0 rgba(255,255,255,0.6); }
  50% { box-shadow: 0 0 20px rgba(0, 255, 4, 0.8), inset 0 1px 0 rgba(255,255,255,0.8); }
}
/* Jadikan isi .topbar fleksibel & bisa diurutkan */
.topbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;            /* jarak antar bagian */
}

/* Urutan yang diinginkan: Title di atas, Banner di bawahnya, Filter row paling bawah */
.topbar .title{ order:1; }             /* Logo + "RTP Live" + tagline */
.topbar > a[aria-label="Promo"]{       /* Banner */
  order:2;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--stroke);      /* opsional: samakan styling */
}
.topbar > a[aria-label="Promo"] img{
  display:block; width:100%; height:auto;
}
.topbar .row{ order:3; }               /* dropdown/filter */
/* Posisi & layout */
.hero-dots{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:6;
}

/* Setiap indikator = garis pendek */
.hero-dots button{
  position:relative;
  width:26px;            /* panjang dash */
  height:4px;            /* tebal dash  */
  border:0;
  border-radius:999px;
  background: rgba(255,255,255,.28);   /* dash pasif */
  cursor:pointer;
  padding:0;
  outline:none;
}

/* Perbesar area klik tanpa mengubah visual */
.hero-dots button::before{
  content:"";
  position:absolute; inset:-10px;
}

/* Dash aktif */
.hero-dots button[aria-selected="true"]{
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 8px rgba(0, 255, 13, 0.25);
}

/* Progress isi di dash aktif (sinkron autoplay) */
.hero-dots button[aria-selected="true"]::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(90deg, #ffffff, #d9ffe8 60%, #9af5bf);
  transform:scaleX(0);
  transform-origin:left;
  animation: heroDotFill var(--auto, 5s) linear forwards;
  box-shadow: 0 0 10px rgba(34,197,94,.45);
}

@keyframes heroDotFill{
  to { transform:scaleX(1); }
}
:root{ --brand:#00ff04; --hdr:#111513; --hdr2:#0b0f0d; --stroke:#12351f; }

.site-header{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, var(--hdr), var(--hdr2));
  border-bottom: 1px solid #1e2823;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; color:#eaf8f0; text-decoration:none; font-weight:800;}
.brand img{height:28px; width:auto; display:block;}
.main-nav{display:flex; gap:18px;}
.main-nav a{
  color:#b9d6c6; text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:8px;
}
.main-nav a.active, .main-nav a:hover{ color:#eaf8f0; background:#0a1410; }
.auth{display:flex; gap:10px;}
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; font-weight:800; text-decoration:none;}
.btn-ghost{border:1px solid #056003; color:#d3f2e2; background:#0a1410;}
.btn-green{background:linear-gradient(180deg,#25c522,#00ff1e); color:#061114;
           box-shadow:0 0 0 1px #096704 inset, 0 10px 20px rgba(34, 197, 40, 0.25);}
@media (max-width:760px){
  .main-nav{display:none;}  /* simple: sembunyikan menu di HP */
}
/* Full-bleed untuk banner di dalam .topbar */
.topbar > a[aria-label="Promo"]{
  position:relative;
  display:block;
  /* trik full-bleed */
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;

  border:1px solid var(--stroke);
  border-radius:14px; overflow:hidden;
  background:#0a1410; box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* gambar mengisi lebar layar; tinggi ikut rasio gambar (4:1) */
.topbar > a[aria-label="Promo"] img{
  display:block; width:100%; height:auto;
}
:root{ --header-h: 56px; }

/* 1) Header TIDAK ikut scroll */
.site-header{
  position: relative;   /* was: sticky */
  top: auto;
  z-index: 10;          /* biar di bawah tombol bahasa */
}

/* 2) Jarak rapi antara header dan konten */
.topbar{ margin-top: 12px; }

/* 3) Tombol bahasa agar tidak ketimpa header */
.lang-switch{
  position: fixed;
  top: calc(var(--header-h) + 12px);   /* geser turun melewati header */
  right: 16px;
  z-index: 2000;
}

/* 4) Kembalikan banner jadi contained (bukan full-bleed) */
.topbar > a[aria-label="Promo"]{
  position: relative;
  left: auto; right: auto;
  margin-left: 0; margin-right: 0;
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow: hidden;
  display: block;
}

/* Gambar banner */
.topbar > a[aria-label="Promo"] img{
  display: block;
  width: 100%;
  height: auto;
}
/* --- Kalibrasi tinggi header (sesuaikan kalau beda) --- */
/* === Global font: Poppins === */
:root{
  --font-main: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html, body, button, input, select, textarea {
  font-family: var(--font-main);
}
:root { --header-h: 60px; }  /* 56–64px biasanya pas */

/* Header nempel di atas layar */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  margin: 0;
}

/* Geser konten turun sebesar tinggi header
   Override padding top bawaan body yang bikin ada gap */
body{
  /* kalau sebelumnya: body { padding:24px; } ini override bagian top-nya */
  padding-top: calc(var(--header-h) + 10px) !important;
}

/* Posisi tombol bahasa supaya tidak ketimpa header */
.lang-switch{
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 16px;
  z-index: 2001;
}

/* Banner tetap rapih (bukan full-bleed) */
.topbar > a[aria-label="Promo"]{
  position: relative;
  left: auto; right: auto;
  margin-left: 0; margin-right: 0;
  width: 100%;
  display: block;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow: hidden;
}
.topbar > a[aria-label="Promo"] img{
  display:block; width:100%; height:auto;
}
.topbar{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.topbar .title{ order:1; }      /* logo */
.topbar .headline{ order:2; }   /* judul panjang + subjudul */
.topbar > a[aria-label="Promo"], .hero-slider{ order:3; } /* banner */
/* Ghost button dengan border gradient tanpa mask (cross-browser) */
.site-header .auth .btn-ghost{
  position: relative;
  color:#d3f2e2;
  background:#0a1410cc;            /* isi tombol */
  border-radius:12px;
  border:1px solid transparent;    /* penting: transparan agar border-box terlihat */

  /* dua layer background: isi & border */
  background:
    linear-gradient(#0a1410cc, #0a1410cc) padding-box,
    linear-gradient(90deg,#22c55e,#a7f3d0,#22c55e) border-box;

  background-origin: border-box;    /* biar layer border ada di border-box */
  background-clip: padding-box, border-box;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .25s ease, background-position .25s linear;
}

/* animasi border berjalan saat hover */
.site-header .auth .btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 255, 13, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* geser layer kedua (border) */
  background-size: auto, 200% 100%;
  animation: borderSlide 2.2s linear infinite;
}

/* pressed */
.site-header .auth .btn-ghost:active{
  transform: translateY(0) scale(.98);
}

/* animasi geser layer border */
@keyframes borderSlide{
  to { background-position: 0 0, 200% 0; }
}

/* hormati preferensi pengguna */
@media (prefers-reduced-motion: reduce){
  .site-header .auth .btn-ghost{ animation: none !important; }
}
/* ====== H5 / HP: 3 kolom + kartu compact ====== */
/* Sembunyikan label RTP LEVEL khusus di HP */
@media (max-width: 560px){
  .card .level,
  .card .rtp-level,
  .card [data-rtp-level]{
    display: none !important;
  }

  /* kalau mau sekalian sembunyikan garis/angka RTP */
  /* .card .rtp-line, .card .bar { display:none !important; } */
}

@media (max-width: 560px){
  /* 3 kolom */
  .grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  /* kartu lebih ringkas */
  .card{ border-radius: 10px; }
  .cover{
    height: auto !important;
    aspect-ratio: 4 / 3;            /* kotak; ganti ke 4/3 kalau mau lebih melebar */
    border-bottom: 0;
  }
  .cta{ top: 6px; right: 6px; }
  .cta .btn-play{                    /* tombol Play Now lebih kecil */
    padding: 4px 6px;
    font-size: 10px;
    border-radius: 8px;
  }
  .badge{                            /* lencana PG/PP diperkecil */
    width: 22px; height: 22px;
    font-size: 10px;
    left: 6px; top: 6px;
  }
  
/* Turunin posisi bulatan PG/PP di mobile biar gak ketutup tombol */
@media (max-width: 560px) {
  .card .badge { 
    top: 38px;   /* coba 32–48px sesuai selera */
  }
  /* optional: rapetin tombol biar makin lega */
  .card .cta { 
    top: 6px;
  }
}

  .body{ padding: 8px; }
  .name{ font-size: 11px; margin: 4px 0 6px; line-height: 1.2; }

  /* bagian detail dibuat compact; kalau mau tetap tampil, hapus dua baris di bawah */
  .body .meta, .body .block{ display:none; }   /* Jam Gacor & Pola disembunyikan di HP */

  /* RTP bar & angka tetap ada tapi kecil */
  .bar{ height: 6px; }
  .rtp-line{ font-size: 10px; margin-top: 6px; }
  .level{ font-size: 10px; padding: 3px 6px; border-radius: 6px; }
}
/* Sembunyikan old .lang-switch kalau masih ada */
.lang-switch{ display:none !important; }

/* === FAB (tombol bulat) === */
.lang-fab{ position:relative; }
.lang-fab__btn{
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--stroke, #085702);
  background: linear-gradient(180deg,#0f1a14,#0a1410);
  color:#d8f3e6; font-weight:900; letter-spacing:.3px;
  box-shadow: inset 0 1px 0 #ffffff22, 0 6px 16px rgba(0,0,0,.35);
  cursor:pointer; outline:0;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.lang-fab__btn:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff33, 0 10px 22px rgba(21, 254, 4, 0.25);
}
.lang-fab__btn[aria-expanded="true"]{
  box-shadow: 0 0 0 3px rgba(34,197,94,.35);
}

/* === Popup menu === */
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width: 180px; padding:6px;
  background: rgba(10,20,16,.98);
  border:1px solid var(--stroke, #047d00);
  border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display:none; z-index:2000;
}
.lang-menu.open{ display:block; }

.lang-option{
  width:100%; text-align:left; padding:10px 12px;
  border-radius:10px; border:1px solid transparent;
  background:transparent; color:#eaf8f0; font-weight:800; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.lang-option:hover{
  background:#005a09; border-color:#008917;
  box-shadow:0 0 0 3px rgba(40, 197, 34, 0.2);
}
.lang-option.active{
  background: linear-gradient(180deg,rgba(255,246,207,.06),rgba(176,122,30,.06));
  border:1px solid rgba(255,210,77,.18);
}

/* Wrapper menempel ke bar kanan header */
.lang-mini{ position:relative; }

/* Tombol bulat */
.lang-mini-btn{
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  border:1px solid var(--stroke, #015b07);
  background: linear-gradient(180deg,#0f1a14,#0a1410);
  color:#d8f3e6; font-weight:900;
  box-shadow: inset 0 1px 0 #ffffff22, 0 6px 16px rgba(0,0,0,.35);
}
.lang-mini-btn:hover{ transform:translateY(-1px); }

/* Popup nempel ke tombol (bukan fixed) */
.lang-mini-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  display:none; min-width:180px; padding:6px; margin:0;
  list-style:none;
  background: rgba(10, 20, 10, 0.98);
  border:1px solid var(--stroke, #067000);
  border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  z-index:3000;
}
.lang-mini.open .lang-mini-menu{ display:block; }

.lang-mini-menu li{ margin:0; }
.lang-mini-menu button{
  width:100%; text-align:left; padding:10px 12px;
  border-radius:10px; border:1px solid transparent; background:transparent;
  color:#eaf8f0; font-weight:800; cursor:pointer;
}
.lang-mini-menu button:hover{
  background:#007204; border-color:#00ff1a;
}
.lang-mini-menu button.is-active{
  background:linear-gradient(180deg,rgba(255,246,207,.06),rgba(176,122,30,.06));
  border:1px solid rgba(255,210,77,.18);
}
/* Kecilkan jarak antar tombol di bar kanan */
.site-header .auth{ display:flex; align-items:center; gap:20px; }

/* A. Biar tombol bahasa nempel ke sisi kiri grup (menjauh dari Masuk/Daftar) */
.site-header .auth .lang-mini{ margin-right: auto; }

/* B. Kalau cuma pengin 'sedikit' lebih kiri, pakai jarak tetap */
.site-header .auth .lang-mini{ margin-right: 20px; }   /* sesuaikan angkanya */

/* C. Fine-tune 1–6px tanpa ganggu layout lain */
.site-header .auth .lang-mini{ transform: translateX(-6px); }  /* - = ke kiri, + = ke kanan */
/* ====== Seksi umum ====== */
.section{ margin: 28px auto; }
.sec-title{
  margin: 0 0 14px; font-weight: 900;
  font-size: 22px; color: var(--text);
}

/* ====== Info Transaksi ====== */
.finance-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
@media (max-width:820px){ .finance-grid{ grid-template-columns:1fr; } }

.fcard{
  display:flex; align-items:center; gap:16px;
  background: linear-gradient(180deg,#0f2018,#0b1711);
  border:1px solid var(--stroke); border-radius:16px;
  padding:18px; box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.fcard-icon{
  width:64px; height:64px; display:grid; place-items:center;
  border-radius:14px; background:#0a1410; border:1px solid var(--stroke);
}
.fcard-icon img{ width:34px; height:34px; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.fcard-label{ color:#cfe9db; font-weight:800; letter-spacing:.02em; }
.fcard-amount{
  font-size:26px; font-weight:900; color:#3dc522; margin-top:4px;
}
.fcard-body{ display:flex; flex-direction:column; }

/* ====== Hubungi Kami ====== */
.contact-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-btn{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:16px;
  background:#0b1711; border:1px solid var(--stroke);
  color:var(--text); text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-btn:hover{
  transform: translateY(-1px);
  border-color:#00df07; box-shadow:0 14px 28px rgba(0,0,0,.4);
}
.contact-ico{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:12px; background:#0a1410; border:1px solid var(--stroke);
}
.contact-ico img{ width:28px; height:28px; object-fit:contain; }
.contact-text{ display:flex; flex-direction:column; }
.contact-text strong{ font-size:16px; line-height:1.2; }
.contact-text small{ color:#cfe9db; }

/* ====== Footer ====== */
.site-footer{
  margin-top: 28px; padding: 22px 0;
  border-top:1px solid var(--stroke);
  background: linear-gradient(180deg,#0d1f17,#0a1a12);
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-brand{ display:flex; align-items:center; gap:10px; color:#cfe9db; font-weight:800; }
.footer-brand img{ height:26px; width:auto; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(255,215,128,.22)); }
.footer-copy{ color:#a9c4b6; font-size:13px; }
@media (max-width:700px){
  .footer-inner{ flex-direction:column; text-align:center; }
}

.fcard{
  /* layer 1: isi kartu | layer 2: border gradasi */
  border:1px solid transparent;
  background:
    linear-gradient(180deg,#0f200f,#013407) padding-box,
    linear-gradient(90deg,#40c522,#a7f3d0,#35c522) border-box;
  background-size: auto, 200% 100%;
  transition: transform .18s ease, box-shadow .25s ease, background-position .25s linear;
}
.fcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
  animation: fBorder 2.2s linear infinite;
}
@keyframes fBorder{ to{ background-position: 0 0, 200% 0; } }

/* Ikon kartu: pelan naik-turun + ripple saat hover */
.fcard-icon{
  position:relative;
  animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-3px); }
}
.fcard-icon::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  box-shadow:0 0 0 0 rgba(37, 197, 34, 0.35);
  opacity:0; pointer-events:none;
}
.fcard:hover .fcard-icon::after{
  opacity:1; animation: ping 1.6s ease-out infinite;
}
@keyframes ping{
  0%  { box-shadow:0 0 0 0   rgba(11, 196, 4, 0.45); }
  100%{ box-shadow:0 0 0 14px rgba(34,197,94,0); }
}

/* Angka: efek shine saat hover */
.fcard-amount{ position:relative; }
.fcard:hover .fcard-amount{
  background: linear-gradient(90deg,#07ba25,#43c43c,#16a316);
  background-size:200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shineTxt 1.4s linear infinite;
}
@keyframes shineTxt{ to{ background-position:200% 0; } }

/* Tombol Hubungi Kami: border gradient + naik sedikit */
.contact-btn{
  border:1px solid transparent;
  background:
    linear-gradient(#0b1711,#0b1711) padding-box,
    linear-gradient(90deg,#0cd408,#a7f3a8,#30c522) border-box;
  background-size: auto, 200% 100%;
  transition: transform .5s ease, box-shadow .5s ease, background-position .25s linear;
}
.contact-btn:hover{
  transform: translateY(-4px);
  animation: fBorder 1.0s linear infinite;   /* pakai keyframes yang sama */
}

/* Ikon pada tombol: pulse + ripple saat hover */
.contact-ico{ position:relative; }
.contact-btn:hover .contact-ico{ animation: btnPulse 1.2s ease-in-out infinite; }
@keyframes btnPulse{
  0%,100%{ transform: scale(1);   }
  50%    { transform: scale(1.00); }
}
.contact-btn:hover .contact-ico::after{
  content:""; position:absolute; inset:-2px; border-radius:12px;
  box-shadow:0 0 0 0 rgba(61, 197, 34, 0.4);
  animation: ping 1.0s ease-out infinite;     /* reuse ripple */
}

@media (max-width: 480px){
  body{ padding-left:5px; padding-right:12px; }      /* semula 24px */
  .topbar{ padding-left:5px; padding-right:12px; }   /* semula 16px */

  /* jaga 2 kolom + lebar kartu sedikit lebih besar */
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;                                         /* semula 14px */
    margin-left: -2px;                                /* optional: biar makin mepet */
    margin-right: -2px;
  }
}


@media (max-width: 390px){
  .grid{ gap: 6px; }
}


.card {
  will-change: transform, opacity;
}

.card.reveal {
  /* muncul halus + naik sedikit */
  animation: revealUp 420ms cubic-bezier(.2,.6,.2,1) both;
  /* jeda bertahap per kartu; diisi dari JS */
  animation-delay: calc(var(--reveal-delay, 0) * 40ms);
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}


.card.hide {
  animation: hideDown 260ms cubic-bezier(.2,.6,.2,1) both;
}
@keyframes hideDown {
  from { opacity: 1; transform: translateY(0);   }
  to   { opacity: 0; transform: translateY(8px); }
}
/* Mobile: tampilkan J A M G A C O R seperti di PC */
@media (max-width: 560px){
  .card .body{ padding:12px }

  /* banyak tema menyembunyikan semua .block di HP;
     kita sembunyikan dulu semuanya… */
  .card .body .block{ display:none !important; }

  /* …lalu munculkan blok pertama (Jam Gacor) saja */
  .card .body .block:first-of-type{
    display:block !important;
  }

  /* tata letak waktu supaya rapi di HP */
  .card .body .block:first-of-type h4{
    font-size:12px; margin-bottom:6px;
  }
  .card .body .block:first-of-type > div{
    display:grid; grid-template-columns:1fr; gap:6px; /* 1 kolom, berjarak */
    font-size:12px;
  }/* ===== Pola versi tabel dengan indikator ===== */
.pola2{display:grid;gap:6px}
.pola2 .prow{
  display:grid;grid-template-columns:1fr 22px 22px 22px;
  align-items:center;gap:8px;
  padding:8px;border:1px dashed #034c03;border-radius:10px;background:#08170f
}
.pola2 .lbl{font-weight:700;color:#d4def9}
.tick{
  width:18px;height:18px;border-radius:50%;
  display:inline-grid;place-items:center;
  background:#0c1611;border:1px solid #063d01
}
.tick.ok{background:#0f2b1a;border-color:#00ad17}
.tick.ok::before{content:"✓";font-size:12px;line-height:1;color:#86ffc0;font-weight:900}
.tick.no{background:#2a1212;border-color:#7a1f1f}
.tick.no::before{content:"✕";font-size:12px;line-height:1;color:#ff9a9a;font-weight:900}

}
/* ==== FIX: Provider tabs clickable & punya state aktif ==== */

/* pastikan kontainer tab ada di atas elemen lain di bar */
.prov-tabs{
  display:flex;
  gap:10px;
  position:relative;
  z-index:5;              /* cegah ketimpa elemen lain di row */
  pointer-events:auto;    /* pastikan bisa di-klik */
}

/* tombol provider */
.prov-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--stroke, #004508);
  background:#119600;
  color:#eaf8f0;
  font-weight:800;
  cursor:pointer;
  user-select:none;
  pointer-events:auto;
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
/* === Provider tabs: paksa tombol ukuran sesuai konten (fit-content) === */
.prov-tabs { display:flex; gap:10px; align-items:center; }

/* kunci: inline-flex + non-growing + width:auto !important agar tidak ketarik lebar */
.prov-tabs .prov-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  width:auto !important;
  max-width:fit-content;
  min-width:unset;
  white-space:nowrap;
}

/* anak-anak tombol tidak boleh grow */
.prov-tabs .prov-btn > * { flex:0 0 auto; }

/* ukuran logo default */
.prov-tabs .prov-btn img{ width:20px; height:20px; }

/* versi compact khusus tombol yang diberi data-compact (JILI) */
.prov-tabs .prov-btn[data-compact]{
  padding:6px 10px;
  gap:6px;
}

/* kalau masih ketarik oleh style global lain, ini “rem” terakhir */
#btnJILI{ width:auto !important; min-width:unset !important; }

.prov-btn img{
  width:22px; height:22px; object-fit:contain; display:block;
  pointer-events:none; /* biar klik kena tombolnya, bukan gambar */
}
.prov-btn:active{ transform: translateY(1px); }
.prov-btn:hover{ border-color:#035100; }

/* state aktif (sinkron dengan JS yang set .active & aria-selected) */
.prov-btn.active,
.prov-btn[aria-selected="true"]{
  box-shadow:0 0 0 4px var(--ring, rgba(34,197,94,.35)), inset 0 1px 0 #ffffff22;
  border-color:#1b3a25;
}

/* jaga bar filter tidak termatikan oleh aturan lain */
.topbar .row{ pointer-events:auto; position:relative; z-index:4; }
/* ==== Search box rapih ==== */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;                     /* samain tinggi dengan tombol provider */
  border: 1px solid var(--stroke,#12351f);
  border-radius: 10px;
  background: #0a1410;
  padding: 0 10px 0 36px;           /* ada ruang buat icon di kiri */
  color: #eaf8f0;
  font-weight: 600;
  width: 220px;                     /* atur lebar sesuai desain */
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 14px;
}

.search-box .icon {
  position: absolute;
  left: 10px;                       /* posisikan icon ke kiri */
  width: 18px; height: 18px;
  opacity: .7;
  pointer-events: none;             /* biar klik tetap ke input */
}

/* versi HP (biar nggak makan tempat) */
@media (max-width:560px) {
  .search-box {
    width: 100%;
    max-width: 180px;
    height: 36px;
    font-size: 13px;
  }
  .search-box .icon { width:16px; height:16px; }
}
/* ====== FIX: Search di bawah provider + logo provider lebih besar ====== */

/* 1) bikin search berada di baris baru penuh, center & rapi */
.topbar .row {
  grid-auto-flow: row dense;         /* biar item yang full-span turun ke baris baru */
}
.topbar .row .search{
  grid-column: 1 / -1;               /* ambil 1 baris penuh di bawah */
  justify-self: center;              /* posisikan di tengah */
  width: min(520px, 100%);           /* lebar ideal */
  margin-top: 10px;                  /* beri jarak dengan provider row */
}
.topbar .row .search input{
  height: 44px;                      /* konsisten tinggi */
  padding: 0 40px 0 12px;            /* ruang teks + ikon kanan */
  border-radius: 12px;
}
.topbar .row .search svg{
  right: 12px;                       /* ikon kaca pembesar di kanan */
  width: 18px; height: 18px; opacity: .85;
}

/* 2) besarkan logo PNG di tombol provider (hanya di prov-btn) */
.prov-btn img{
  width: 30px;
  height: 30px;
}
@media (min-width: 1100px){
  .prov-btn{ padding: 12px 18px; }   /* beri ruang ekstra agar proporsional */
  .prov-btn img{ width: 34px; height: 34px; }
}

/* 3) sedikit rapikan jarak komponen baris pertama supaya tidak dempet */
.prov-tabs{ gap: 12px; }
.live-box{ margin-left: 6px; }
/* === Badge pakai logo provider === */
.badge.badge-logo{
  background:#012603;            /* tetap menyatu dengan tema */
  border:1px solid var(--stroke);
  padding:0;
}
.badge.badge-logo img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  padding:4px;                   /* ruang di dalam lingkaran */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
/* ==== Button Show More versi EMAS ==== */
#btnMore {
  background: linear-gradient(180deg, #FFD84D, #E6B800); /* emas utama */
  color: #1a1a1a;
  font-weight: 900;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid #e6b800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, filter .3s ease, box-shadow .3s ease;
  animation: breathingGold 2.8s ease-in-out infinite;
  box-shadow: 0 4px 14px rgba(255, 215, 77, 0.4);
}

/* shining effect */
#btnMore::before {
  content:"";
  position:absolute;
  top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg);
  animation: shineGold 4s infinite;
}

/* hover */
#btnMore:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 215, 77, 0.6);
}

/* klik */
#btnMore:active {
  transform: scale(.96);
}

/* efek bernafas */
@keyframes breathingGold {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 215, 77, 0.4); }
  50%      { box-shadow: 0 6px 20px rgba(255, 215, 77, 0.7); }
}

/* efek shine */
@keyframes shineGold {
  0%   { left:-75%; }
  60%  { left:125%; }
  100% { left:125%; }
}
#btnMore {
  color: #222 !important;  /* abu-abu tua mendekati hitam */
}
/* ==== Glow Provider Active ==== */
.prov-btn.active[data-provider="Pragmatic Play"] {
  box-shadow: 0 0 14px 3px rgba(0, 255, 21, 0.7), inset 0 0 6px rgba(50, 255, 53, 0.6);
  border-color: #0dff00;
}
.prov-btn.active[data-provider="PG Soft"] {
  box-shadow: 0 0 14px 3px rgba(0, 255, 38, 0.8), inset 0 0 6px rgba(14, 203, 0, 0.6);
  border-color: #0dff00;
}
.prov-btn.active[data-provider="JILI"] {
  box-shadow: 0 0 14px 3px rgba(0, 255, 8, 0.98), inset 0 0 6px rgba(13, 250, 0, 0.6);
  border-color: #0dff00;
}
/* Paksa 2 kolom di mobile/tablet */
@media (max-width: 820px){
  .wrap .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Override khusus breakpoint 560px yang lama bikin 1 kolom */
@media (max-width: 560px){
  .wrap .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* === Mobile: tampilkan Jam Gacor + Pola (2 kolom) === */
@media (max-width: 560px){
  /* sebelumnya disembunyikan – paksa tampil */
  .card .body .block{
    display: block !important;
    margin-bottom: 8px;
  }

  /* tata letak ringkas biar muat 2 baris konten */
  .card .body{ padding: 10px; }
  .card .body .meta{ display:block; font-size:11px; margin-bottom:6px; }
  .card .body .block h4{ font-size:11px; margin:0 0 4px; }

  /* grid chip pola lebih rapat */
  .card .pola{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 4px;
  }
  .card .chip{
    font-size:10px;
    padding:4px 6px;
    border-radius:8px;
  }
  /* === Override Chip Pola === */
.chip {
  background: rgba(0, 40, 20, 0.55) !important; /* hijau tua transparan */
  border: 1px solid #03e319 !important;         /* garis hijau neon */
  color: #aefacb !important;                    /* teks hijau muda */
  font-weight: 700;
}
.chip:hover {
  background: rgba(0, 134, 16, 0.75) !important; /* efek hover lebih terang */
}


  /* bar & teks RTP sedikit diperkecil */
  .card .bar{ height:8px; }
  .card .rtp-line{ font-size:11px; margin-top:6px; }

  /* kalau ingin ruang bawah body lebih lega (opsional) */
  .card .body{ min-height: 140px; }
}

/* Pastikan grid tetap 2 kolom di HP (override rule lama 1 kolom) */
@media (max-width: 560px){
  .wrap .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
/* === DARK GREEN GLASS OVERRIDE === */
:root{
  --glass-bg: rgba(0, 40, 6, 0.35);        /* hijau tua transparan */
  --glass-bg-strong: rgba(0, 86, 4, 0.45); /* versi lebih pekat */
  --glass-border: rgba(0, 255, 42, 0.2);  /* garis tipis hijau neon */
  --glass-ring: rgba(0, 244, 16, 0.45);
  --glass-shadow: 0 10px 30px rgba(0, 128, 17, 0.25), inset 0 1px 0 rgba(255,255,255,.05);
}

.topbar,
.prov-btn,
.live-box,
.search input,
.refresh,
.card,
.card .block,
.badge,
.lang-mini-menu,
.lang-mini-btn,
.fcard,
.contact-btn,
.finance-grid .fcard,
.contact-grid .contact-btn {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
}

.card .block{
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
}

.badge{
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
}

.cover{ background: transparent !important; }

.bar{
  background: rgba(0,0,0,.35) !important;
  border-color: var(--glass-border) !important;
}

.prov-btn.active{
  box-shadow: 0 0 0 4px var(--glass-ring), inset 0 1px 0 #fff2;
}

.cta button{
  background: linear-gradient(180deg,#02cf10,#0dbd00) !important;
}
/* ========== Card appear animation ========== */
@media (prefers-reduced-motion: no-preference){
  .card{
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  .card.anim-in{
    animation: cardIn .55s cubic-bezier(.2,.65,.25,1) forwards;
    /* gunakan variabel --i dari inline style utk stagger */
    animation-delay: calc(var(--i, 0) * 70ms);
    will-change: transform, opacity;
  }
  @keyframes cardIn{
    to{ opacity:1; transform:none; }
  }

  /* bonus: gambar cover ikut fade-in saat load */
  .cover img{ opacity:0; transition: opacity .5s ease; }
  .cover img.is-ready{ opacity:1; }
}
.site-footer{
  margin-top:40px;
  padding:14px 20px;
  text-align:center;
  font-size:13px;
  color:#cfe9db;
  background:rgba(0,40,20,0.35); /* dark green glass */
  border-top:1px solid rgba(0, 255, 47, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-footer{
  width: 100vw;                 /* penuh layar */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  text-align: center;
  font-size: 13px;
  color: #cfe9db;
  padding: 14px 20px;

  background: rgba(2, 40, 0, 0.35); /* dark green glass */
  border-top: 1px solid rgba(26, 255, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* === Pelayanan & Produk (footer highlights) === */
.svc-section{margin:40px auto 60px}
.svc-grid{
  display:grid; gap:36px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr } }

.svc-card{
  background:linear-gradient(180deg,#0f2018,#0b1711);
  border:1px solid var(--stroke); border-radius:16px;
  padding:22px; box-shadow:0 12px 32px rgba(0,0,0,.35)
}
.svc-title{
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.02em; margin:0 0 14px 0;
  color:#eaf8f0; font-size:18px
}

.svc-sub{ color:var(--muted); font-size:12px; margin:-4px 0 14px }

.svc-row{position:relative; padding:12px 0 10px}
.svc-row + .svc-row{ margin-top:16px }
.svc-label{ font-weight:800; font-size:12px; color:#cfe9db }
.svc-note{ font-size:11px; color:#9ecab6; opacity:.9 }
.svc-time{
  position:absolute; right:0; top:6px;
  font-weight:900; font-size:36px; line-height:1; color:#eaf8f0;
}
.svc-time small{ font-size:14px; font-weight:700; margin-left:4px; color:#cfe9db }

.svc-bar{
  height:10px; border-radius:999px; overflow:hidden; margin-top:8px;
  background:#0c1611; border:1px solid #023405
}
.svc-bar > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#bcd0ff,#86ffc0);
  transition:width .6s ease;
}

/* Daftar produk */
.prod-item{ padding:12px 0; border-top:1px solid #016c0b }
.prod-item:first-child{ border-top:0 }
.prod-name{ font-weight:900; letter-spacing:.02em }
.prod-desc{ color:#a9bad1; font-size:12px; margin-top:4px; line-height:1.6 }
/* Styling kartu pelayanan & produk */
.svc-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
}

.svc-card {
  background: rgba(0, 0, 0, 0.35);   /* transparan biar nyatu dengan background hijau */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  min-height: 100%;                  /* biar tinggi rata */
  display: flex;
  flex-direction: column;
}

.svc-title {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}
.svc-sub {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 14px;
}

/* Progress bar lebih jelas */
.svc-bar {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 6px;
}
.svc-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #04ff00, #00cc1f);
  border-radius: inherit;
}

/* Teks waktu */
.svc-time {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
}
.svc-time small {
  font-size: 12px;
  color: #aaa;
  margin-left: 2px;
}

/* Produk list */
.prod-item {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.prod-i
/* Tambahin jarak antar section */
#pelayanan-produk {
  margin-top: 30px;   /* bisa diganti 40px atau 50px kalau mau lebih renggang */
}
.svc-section {
  margin-top: 48px !important;
}
/* === Notifikasi Withdraw Popup === */
.wd-popup {
  position: fixed;
  left: 20px;
  bottom: 20px;
  background: rgba(1, 103, 42, 0.9); /* hijau transparan */
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  z-index: 9999;
  max-width: 280px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .7s ease;
}
.wd-popup.show {
  opacity: 1;
  transform: translateY(0);
}
.wd-popup.hidden {
  display: none;
}
.wd-popup small {
  color: #f3f3f3;
  font-size: 11px;
}
.wd-popup b {
  color: #ffe400; /* username kuning biar menonjol */
}
/* === Animasi Popup WD (in & out smooth) === */
@keyframes wd-pop-in{
  0%   {opacity:0; transform:translateY(20px) scale(.95); filter:blur(4px);}
  60%  {opacity:1; transform:translateY(0) scale(1.03);  filter:blur(0);}
  100% {opacity:1; transform:translateY(0) scale(1);     filter:0;}
}
@keyframes wd-pop-out{
  0%   {opacity:1; transform:translateY(0) scale(1);   filter:0;}
  100% {opacity:0; transform:translateY(15px) scale(.97); filter:blur(2px);}
}
.wd-popup.show {
  display:block;
  animation: wd-pop-in .45s cubic-bezier(.2,.8,.2,1) forwards;
}
.wd-popup.hide {
  animation: wd-pop-out .35s ease forwards;
}
.wd-popup{
  position:fixed; left:20px; bottom:20px;
  background:rgba(0, 164, 25, 0.94);
  color:#071a09; padding:14px 18px; border-radius:14px;
  font-size:14px; line-height:1.45; max-width:320px; z-index:9999;
  border:1px solid rgba(0,0,0,.10); backdrop-filter:saturate(130%) blur(2px);
  box-shadow:0 16px 34px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.22);

  /* start state (composited) */
  opacity:0; transform:translate3d(0,22px,0) scale(.96);
  filter:blur(4px);
  will-change: transform, opacity, filter;
  backface-visibility:hidden;
  pointer-events:none;   /* pas hidden ga bisa diklik */
}

/* Shine halus (eye candy) */
.wd-popup::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background:linear-gradient(115deg, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  transform:translateY(-40%) rotate(2deg);
  pointer-events:none; mix-blend-mode:soft-light;
}

/* Animasi MASUK – slide + blur + overshoot tipis (springy) */
@keyframes wd-in {
  0%   {opacity:0; transform:translate3d(0,22px,0) scale(.96); filter:blur(4px)}
  60%  {opacity:1; transform:translate3d(0,0,0)   scale(1.02); filter:blur(0)}
  100% {opacity:1; transform:translate3d(0,0,0)   scale(1);    filter:blur(0)}
}

/* Animasi KELUAR – fade + slide + de-emphasize */
@keyframes wd-out{
  0%   {opacity:1; transform:translate3d(0,0,0)    scale(1);   filter:blur(0)}
  100% {opacity:0; transform:translate3d(0,14px,0) scale(.98); filter:blur(2px)}
}

/* Trigger states (JS cuma toggle class ini) */
.wd-popup.show{
  display:block;
  animation: wd-in 560ms cubic-bezier(.22,1,.36,1) forwards;
  pointer-events:auto;
}
.wd-popup.hide{
  animation: wd-out 420ms cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}

/* Aksesibilitas: kalau user minta reduce motion */
@media (prefers-reduced-motion: reduce){
  .wd-popup{ filter:none }
  .wd-popup.show, .wd-popup.hide{ animation:none; opacity:1; transform:none }
}
#liveTick{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-left: .35rem;
}
/* === Override warna Pola (biar nyatu dengan tema hijau T6) === */
.pola2 .prow {
  background: rgba(0, 40, 20, 0.45) !important;  /* hijau tua transparan */
  border: 1px solid rgba(0, 255, 8, 0.25) !important;
}

.pola2 .lbl {
  color: #d3fce5 !important;   /* teks hijau muda */
  font-weight: 700;
}
.chip{
  background: rgba(0,40,20,.55) !important;
  border:1px solid #06dd27 !important;
  color:#aefacb !important;
  font-weight:700;
}
.chip:hover{ background: rgba(0,80,40,.75) !important; }
/* === T6 One-time Popup ======================================= */
.t6pop-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display:grid; place-items:center; opacity:0; transform:scale(1.01);
  transition: opacity .25s ease, transform .25s ease; z-index:5000;
}
.t6pop-backdrop.show{ opacity:1; transform:none; }

.t6pop-card{
  position:relative;
  width:min(560px,92vw); border-radius:20px; padding:18px;
  background:linear-gradient(180deg, rgba(7, 58, 1, 0.95), rgba(4,30,18,.92));
  border:1px solid rgba(6, 220, 17, 0.35);
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  color:#eafff3;
}
.t6pop-x{
  position:absolute; right:8px; top:8px; line-height:1; font-size:22px;
  background:transparent; border:0; color:#c1ffe0; opacity:.85; cursor:pointer;
}
.t6pop-x:hover{ opacity:1; transform:scale(1.06); }

.t6pop-body{ display:grid; gap:8px; margin:4px 2px 14px; }
.t6pop-body h3{ margin:0; font-size:18px; color:#00dd00 }
.t6pop-content{ font-size:14px; line-height:1.5 }
.t6pop-content img{ display:block; max-width:100%; height:auto; border-radius:12px; margin-top:8px; }

.t6pop-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.t6pop-actions .btn-ok,
.t6pop-actions .btn-ok-24h{
  appearance:none; border:0; cursor:pointer; border-radius:999px; padding:10px 14px; font-weight:700;
  box-shadow:0 8px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.t6pop-actions .btn-ok{
  background:linear-gradient(180deg,#10b92f,#05961b);
  color:#032016;
}
.t6pop-actions .btn-ok-24h{
  background:transparent; color:#aefad2; border:1px solid rgba(34,197,94,.45);
}
.t6pop-actions .btn-ok:active,
.t6pop-actions .btn-ok-24h:active{ transform:translateY(1px) }
/* === POPUP FX: enter/exit animations ===================== */
@keyframes t6popBdIn   { from{opacity:0} to{opacity:1} }
@keyframes t6popBdOut  { from{opacity:1} to{opacity:0} }
@keyframes t6popCardIn {
  0%{ transform:translateY(10px) scale(.98); opacity:0; filter:brightness(1.05) }
  60%{ transform:translateY(0)    scale(1.02); opacity:1 }
  100%{transform:none;             opacity:1 }
}
@keyframes t6popCardOut{
  from{ transform:none; opacity:1 }
  to  { transform:translateY(6px) scale(.985); opacity:0 }
}

/* aktif saat muncul */
.t6pop-backdrop.fx-in{  animation:t6popBdIn .32s ease forwards }
.t6pop-card.fx-in{      animation:t6popCardIn .38s cubic-bezier(.2,.8,.2,1) forwards }

/* aktif saat ditutup */
.t6pop-backdrop.fx-out{ animation:t6popBdOut .22s ease forwards }
.t6pop-card.fx-out{     animation:t6popCardOut .22s ease forwards }

/* optional: sedikit highlight di tepi saat masuk */
.t6pop-card.fx-in::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 22px rgba(0,224,138,.18);
}
/* Fallback: selalu tampil meski JS gagal */
html, body { opacity: 1 !important; visibility: visible !important; }
html.no-js body,
html:not(.js) body,
body[data-hydrate="pending"],
body.loading { opacity: 1 !important; visibility: visible !important; }