/* ============================================================
   assets/css/site.css
   Pelengkap custom di luar utility Tailwind (Tailwind di-load via CDN
   langsung di header.php). File ini isinya efek yang gak bisa dibikin
   pakai utility class biasa: glass card, blob animation, marquee,
   ripple effect, FAQ accordion, custom scrollbar.
   ============================================================ */

body {
  /* Dulu solid #F8FAFC (putih rata & "ngeblok"). Sekarang gradasi lembut
     mengikuti warna tema (--gold/--gold-2) supaya tetap terang tapi tidak
     terasa kosong/flat, tanpa mengubah keterbacaan teks. */
  background-color: #F7F8FC;
  background-image:
    radial-gradient(1100px 620px at -10% -15%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%),
    radial-gradient(900px 560px at 110% 10%, color-mix(in srgb, var(--gold-2) 12%, transparent), transparent 55%),
    radial-gradient(800px 700px at 50% 120%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%);
  background-attachment: fixed;
  color: #0F172A;
  overflow-x: clip;
  width: 100%;
  transition: background-color .4s ease, color .4s ease;
}
html { overflow-x: clip; }

/* ---- Mode Gelap Glass (data-surface="gelap", diatur dari Admin > Konten > SEO & Umum) ---- */
body[data-surface="gelap"] {
  background-color: #0D0806;
  color: #F5EFEA;
  background-image:
    radial-gradient(1000px 700px at 50% -10%, color-mix(in srgb, var(--gold) 55%, transparent), transparent 62%),
    radial-gradient(1100px 620px at -10% 10%, color-mix(in srgb, var(--gold) 42%, transparent), transparent 60%),
    radial-gradient(900px 560px at 110% 20%, color-mix(in srgb, var(--gold-2) 38%, transparent), transparent 58%),
    radial-gradient(900px 800px at 50% 115%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 62%);
}
body[data-surface="gelap"] .glass-nav { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 26%, #0D0806), color-mix(in srgb, var(--gold) 10%, #0D0806)); border-bottom-color: rgba(255,255,255,.08); }
body[data-surface="gelap"] .glass-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #F5EFEA; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body[data-surface="gelap"] .drawer { background: #170D0A; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
body[data-surface="gelap"] .prod-thumb { background: rgba(255,255,255,.12); }
body[data-surface="gelap"] .icon-btn, body[data-surface="gelap"] .lang-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #F5EFEA; }
body[data-surface="gelap"] .footer-desc, body[data-surface="gelap"] .footer-cols a { color: #C9BCB3; }
body[data-surface="gelap"] .faq-item, body[data-surface="gelap"] .deco-banner { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
/* Section head & badge teks tetap kontras di atas latar gelap-merah */
body[data-surface="gelap"] .section-head p { color: #C9BCB3; }

/* ------------------------------------------------------------
   JARING PENGAMAN KONTRAS MODE GELAP
   ------------------------------------------------------------
   Banyak halaman (produk-detail, dashboard user, cek transaksi, dll)
   masih pakai warna teks/latar utility Tailwind langsung (text-slate-700,
   bg-white, dst) yang dirancang untuk latar terang. Saat admin mengaktifkan
   Mode Gelap, warna gelap itu tidak ikut berubah otomatis sehingga teks
   jadi nyaris tak terbaca (gelap di atas gelap). Blok ini "menimpa" warna
   itu supaya tetap kontras tanpa perlu mengubah satu-satu tiap halaman.
   Pakai [class~="..."] (exact match nama class), bukan wildcard, supaya
   tidak ikut menimpa kombinasi lain yang memang sengaja dibuat gelap
   (misal header step bg-slate-800 yang teksnya sudah putih). */
body[data-surface="gelap"] [class~="text-slate-900"],
body[data-surface="gelap"] [class~="text-slate-800"],
body[data-surface="gelap"] [class~="text-slate-700"],
body[data-surface="gelap"] [class~="text-slate-600"] { color: #F5EFEA !important; }

body[data-surface="gelap"] [class~="text-slate-500"],
body[data-surface="gelap"] [class~="text-slate-400"],
body[data-surface="gelap"] [class~="text-slate-300"] { color: #C9BCB3 !important; }

body[data-surface="gelap"] [class~="bg-white"],
body[data-surface="gelap"] [class~="bg-slate-50"],
body[data-surface="gelap"] [class~="bg-slate-100"] { background-color: rgba(255,255,255,.07) !important; }

body[data-surface="gelap"] [class~="border-slate-100"],
body[data-surface="gelap"] [class~="border-slate-200"],
body[data-surface="gelap"] [class~="border-slate-300"] { border-color: rgba(255,255,255,.16) !important; }

body[data-surface="gelap"] [class~="text-rose-700"] { color: #FDA4AF !important; }
body[data-surface="gelap"] [class~="bg-rose-50"] { background-color: color-mix(in srgb, #E11D48 16%, transparent) !important; }
body[data-surface="gelap"] [class~="border-rose-200"] { border-color: color-mix(in srgb, #E11D48 35%, transparent) !important; }
body[data-surface="gelap"] [class~="text-emerald-700"] { color: #6EE7B7 !important; }
body[data-surface="gelap"] [class~="bg-emerald-50"] { background-color: color-mix(in srgb, #059669 16%, transparent) !important; }
body[data-surface="gelap"] [class~="text-amber-700"] { color: #FCD34D !important; }
body[data-surface="gelap"] [class~="bg-amber-50"] { background-color: color-mix(in srgb, #D97706 16%, transparent) !important; }
body[data-surface="gelap"] [class~="text-indigo-700"] { color: #C7D2FE !important; }
body[data-surface="gelap"] [class~="bg-indigo-50"] { background-color: color-mix(in srgb, var(--gold) 18%, transparent) !important; }
body[data-surface="gelap"] input,
body[data-surface="gelap"] textarea,
body[data-surface="gelap"] select { color: #F5EFEA; }
body[data-surface="gelap"] input::placeholder,
body[data-surface="gelap"] textarea::placeholder { color: #C9BCB3; opacity: .8; }

/* ------------------------------------------------------------
   Fix umum: item langsung di dalam grid/flex (kartu statistik,
   dsb) default browser punya "min-width: auto" yang bisa memaksa
   kolom melebar mengikuti isi kontennya sendiri (angka besar,
   teks tanpa spasi, dll), sehingga di layar HP sempit kartu jadi
   "kepotong" di tepi layar walau class grid-cols-2/3 sudah benar.
   min-width:0 memaksa item ikut lebar kolom yang sudah dihitung
   grid/flexbox, lalu overflow-hidden membungkus sisa konten yang
   kepanjangan supaya tetap rapi (bukan meluber ke luar kartu).
   ------------------------------------------------------------ */
.grid > *, .flex > * { min-width: 0; }

/* ---- Glass surfaces ---- */
.glass-nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.glass-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 1);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* Defensif: cegah konten (angka/teks panjang) mendorong kartu ini melebihi
     lebar kolom grid/flex induknya, yang di HP bisa bikin kartu "kepotong"
     di tepi layar kalau induknya grid-cols-2 dsb. */
  min-width: 0;
  overflow: hidden;
}
.glass-card:hover {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.15);
}

/* ---- Gradient text ---- */
.text-gradient {
  background: linear-gradient(to right, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Background blobs ---- */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Marquee (kategori / metode bayar) ---- */
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.partner-logo { filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; }
.partner-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }

/* ---- Tombol/kartu terasa "hidup" saat ditekan (klik/tap) -------------
   Efek kecil tapi konsisten di seluruh situs: tombol tab, panah tab, ikon
   navbar, dan kartu produk sedikit mengecil sepersekian detik saat ditekan
   supaya terasa ada respon instan, bukan cuma perubahan warna hover. */
button:not(.no-press):not(:disabled):active,
.tab-arrow:active, .icon-btn:active, .lang-btn:active,
.about-glass-btn:active, .cs-float:active { transform: scale(.93); }
.game-card:active .game-cover { transform: scale(.96); }
.prod-card:active { transform: scale(.97); }
.tab:active { transform: scale(.95); }

/* ---- Ripple button effect ---- */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-span {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.6);
  transform: scale(0); animation: ripple-anim 0.6s linear; pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(3); opacity: 0; } }

/* ---- Animated gradient (CTA section) ---- */
.animated-gradient {
  background: linear-gradient(-45deg, var(--gold), var(--gold-2), var(--gold-soft), var(--gold-2));
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- FAQ accordion ---- */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.active .faq-content { max-height: 320px; }
.faq-item.active .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }

/* ---- Floating buttons ---- */
.floating-btn { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.floating-btn:hover { transform: translateY(-3px) scale(1.05); }

/* ---- Sticky bottom mobile nav ---- */
.sticky-mobile-nav { box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
.sticky-mobile-nav a.active-nav { color: var(--gold); }

/* ---- Hover lift utility (produk/testimoni) ---- */
.lift-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lift-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(79,70,229,0.15); }

/* ---- Hero visual card floating decor ---- */
.hero-slider { position: relative; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 16/9; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.hero-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.hero-dots button.active { background: #fff; width: 20px; border-radius: 5px; }

/* ---- Flame icon: api yang benar-benar "menyala", bukan cuma emoji tempel ---- */
.flame-icon {
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(249,115,22,.7)) drop-shadow(0 0 10px rgba(220,38,38,.45));
  animation: flameFlicker 1.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 4px rgba(249,115,22,.7)) drop-shadow(0 0 10px rgba(220,38,38,.45)); }
  25%      { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 0 7px rgba(251,146,60,.9)) drop-shadow(0 0 16px rgba(220,38,38,.6)); }
  50%      { transform: scale(0.96) rotate(-1deg); filter: drop-shadow(0 0 5px rgba(249,115,22,.75)) drop-shadow(0 0 12px rgba(220,38,38,.5)); }
  75%      { transform: scale(1.05) rotate(1deg); filter: drop-shadow(0 0 8px rgba(251,146,60,.95)) drop-shadow(0 0 18px rgba(220,38,38,.65)); }
}
.badge-corner.hot .flame-icon { filter: drop-shadow(0 0 3px rgba(255,237,213,.9)); }

/* ---- Focus visibility (a11y) ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

@media (max-width: 767px) {
  /* placeholder - reserved for future mobile-only tweaks */
}

@media (prefers-reduced-motion: reduce) {
  .animate-blob, .animate-float, .marquee-track, .hero-slide, .flame-icon { animation: none !important; }
}

/* ============================================================
   PAPAN INFORMASI (info board) -- includes/papan_informasi.php
   ============================================================ */
.info-board {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.12);
}
.info-board-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 12.5px; color: var(--text);
}
.info-board-head .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #EF4444; flex-shrink: 0;
  animation: infoBoardPulse 1.8s infinite;
}
@keyframes infoBoardPulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
/* Tinggi viewport dinaikkan + judul/keterangan boleh 2 baris (line-clamp)
   supaya nama produk/kategori yang panjang tidak kepotong jadi tidak jelas
   di tengah kata (mis. "MOBILELEGEND - 760 Di....."). */
.info-board-viewport { position: relative; min-height: 86px; overflow: hidden; }
.info-board-item {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease; pointer-events: none;
}
.info-board-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.info-board-thumb { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg-2); }
.info-board-thumb-fallback {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.info-board-text { min-width: 0; flex: 1; }
.info-board-title {
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.info-board-sub {
  font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.info-board-price { font-size: 12px; font-weight: 800; color: var(--gold); flex-shrink: 0; white-space: nowrap; align-self: flex-start; }
.info-board-badge { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; flex-shrink: 0; letter-spacing: .02em; align-self: flex-start; white-space: nowrap; }
.info-board-badge.baru { background: #DCFCE7; color: #15803D; }
.info-board-badge.update { background: #DBEAFE; color: #1D4ED8; }
.info-board-badge.nonaktif, .info-board-badge.info { background: #FEF3C7; color: #B45309; }
.info-board-badge.promo { background: #FCE7F3; color: #BE185D; }
.info-board-dots { display: flex; gap: 4px; padding: 7px 16px 10px; justify-content: center; }
.info-board-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--border); transition: all .3s ease; }
.info-board-dots span.active { width: 14px; border-radius: 4px; background: var(--gold); }

/* ============================================================
   POPUP PROMOSI -- modal di TENGAH layar (gaya e-commerce), bukan
   toast. footer.php (#popupModalOverlay/#popupModalBox) + main.js.
   ============================================================ */
.popup-modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10,8,20,.65);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.popup-modal-overlay.show { opacity: 1; visibility: visible; }
.popup-modal-box {
  position: relative; width: 100%; max-width: 400px; max-height: 88vh;
  background: var(--surface); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  transform: scale(.85) translateY(10px); opacity: 0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  display: flex; flex-direction: column;
}
.popup-modal-overlay.show .popup-modal-box { transform: scale(1) translateY(0); opacity: 1; }
.popup-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15,12,25,.55); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}
.popup-modal-close:hover { background: rgba(15,12,25,.8); transform: scale(1.06); }
.popup-modal-img-wrap { width: 100%; max-height: 55vh; overflow: hidden; background: var(--bg-2); flex-shrink: 0; }
.popup-modal-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popup-modal-body { padding: 18px 20px 20px; overflow-y: auto; }
.popup-modal-title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.popup-modal-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; white-space: pre-line; }
.popup-modal-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1A1204;
  font-weight: 800; font-size: 13.5px; margin-bottom: 14px;
  transition: filter .2s ease;
}
.popup-modal-cta:hover { filter: brightness(1.05); }
.popup-modal-hide-row {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted);
  cursor: pointer; user-select: none;
}
.popup-modal-hide-row input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; }
@media (max-width: 480px) {
  .popup-modal-box { max-width: 100%; }
}