/* ===== 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 #12351f;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(34,197,94,.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(34,197,94,.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(34,197,94,.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,#ff3b57 0%, #ffb703 40%, #31e079 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, #22c55e, #16a34a);
  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(34,197,94,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(34,197,94,.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:#22c55e; --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 #244332; color:#d3f2e2; background:#0a1410;}
.btn-green{background:linear-gradient(180deg,#22c55e,#16a34a); color:#061114;
           box-shadow:0 0 0 1px #1e3a29 inset, 0 10px 20px rgba(34,197,94,.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) --- */
: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(34,197,94,.18), inset 0 0 0 1px rgba(255,255,255,.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, #12351f);
  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(34,197,94,.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, #12351f);
  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:#10241a; border-color:#1b3a25;
  box-shadow:0 0 0 3px rgba(34,197,94,.20);
}
.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, #12351f);
  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,16,.98);
  border:1px solid var(--stroke, #12351f);
  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:#10241a; border-color:#1b3a25;
}
.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:#22c55e; 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:#1b3a25; 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,#0f2018,#0b1711) padding-box,
    linear-gradient(90deg,#22c55e,#a7f3d0,#22c55e) 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(34,197,94,.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(34,197,94,.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,#16a34a,#86efac,#16a34a);
  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,#22c55e,#a7f3d0,#22c55e) 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(34,197,94,.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;
  }
}