/* ==========================================================
   Mega188 — Tema Kasino (Hitam, Emas, Merah, Ungu, Biru, Hijau)
   Struktur ala WordPress: style.css utama tema
   ========================================================== */
:root{
  --hitam:#0d0a14;
  --hitam-2:#16102a;
  --hitam-3:#1f1638;
  --emas:#f5c518;
  --emas-2:#ffd76a;
  --merah:#d61f3c;
  --merah-2:#ff4d6d;
  --ungu:#7b2ff7;
  --ungu-2:#a06bff;
  --biru:#1e90ff;
  --biru-2:#5ec2ff;
  --hijau:#1fae59;
  --hijau-2:#4ade80;
  --putih:#f7f5fa;
  --abu:#b9b3c9;
  --garis:rgba(245,197,24,.18);
  --radius:14px;
  --maks:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--hitam);
  color:var(--putih);
  line-height:1.75;
  overflow-x:hidden;
  word-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--emas);text-decoration:none}
a:hover{color:var(--emas-2)}
h1,h2,h3,h4{line-height:1.3;font-weight:800}
h1{font-size:clamp(1.6rem,4vw,2.6rem)}
h2{font-size:clamp(1.35rem,3vw,2rem)}
h3{font-size:clamp(1.1rem,2.2vw,1.35rem)}
p{margin-bottom:1rem;color:var(--abu)}
.wadah{max-width:var(--maks);margin:0 auto;padding:0 18px}
.bagian{padding:56px 0}
.bagian:nth-of-type(even){background:var(--hitam-2)}
.tengah{text-align:center}
.teks-emas{color:var(--emas)}
.kecil{font-size:.85rem;color:var(--abu)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:900;
  background:rgba(13,10,20,.96);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--garis);
}
.header-dalam{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;max-width:var(--maks);margin:0 auto}
.merek{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.35rem;color:var(--putih)}
.merek img{width:42px;height:42px}
.merek span{color:var(--emas)}
.nav-utama{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-utama a{
  color:var(--putih);font-size:.92rem;font-weight:600;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
}
.nav-utama a:hover,.nav-utama a.aktif{background:var(--hitam-3);color:var(--emas)}
.header-aksi{display:flex;gap:8px;align-items:center}
.tombol{
  display:inline-block;padding:10px 22px;border-radius:10px;
  font-weight:800;font-size:.95rem;cursor:pointer;border:none;
  transition:transform .15s ease, box-shadow .15s ease;
  text-align:center;
}
.tombol:hover{transform:translateY(-2px)}
.tombol-emas{background:linear-gradient(135deg,var(--emas),#e09b00);color:#1a1200;box-shadow:0 4px 14px rgba(245,197,24,.35)}
.tombol-emas:hover{color:#1a1200;box-shadow:0 6px 20px rgba(245,197,24,.5)}
.tombol-garis{background:transparent;color:var(--emas);border:2px solid var(--emas)}
.tombol-garis:hover{color:var(--emas-2);border-color:var(--emas-2)}
.tombol-merah{background:linear-gradient(135deg,var(--merah),#a01030);color:#fff}
.tombol-besar{padding:14px 34px;font-size:1.05rem;border-radius:12px}
.menu-toggle{display:none;background:none;border:2px solid var(--emas);color:var(--emas);border-radius:8px;padding:6px 12px;font-size:1.2rem;cursor:pointer}

/* ---------- Pencarian header ---------- */
.cari-box{position:relative}
.cari-box input{
  background:var(--hitam-3);border:1px solid var(--garis);color:var(--putih);
  border-radius:20px;padding:7px 34px 7px 14px;width:150px;font-size:.85rem;
}
.cari-box input:focus{outline:none;border-color:var(--emas)}
.cari-box button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--emas);cursor:pointer;font-size:.9rem;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:80px 0 70px;
  background:linear-gradient(180deg,rgba(13,10,20,.82),rgba(13,10,20,.94)),url('../img/hero.jpg') center/cover no-repeat;
  border-bottom:3px solid var(--emas);
}
.hero h1{color:var(--putih)}
.hero h1 .emas{color:var(--emas)}
.hero .sub{font-size:1.1rem;max-width:760px;margin:14px auto 26px;color:#e8e2f5}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.lencana{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lencana span{
  background:rgba(22,16,42,.85);border:1px solid var(--garis);
  padding:6px 14px;border-radius:20px;font-size:.82rem;color:var(--abu);
}
.lencana .l18{border-color:var(--merah);color:#ffb3c0;font-weight:800}

/* ---------- Kartu & Grid ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.kartu{
  background:var(--hitam-3);border:1px solid var(--garis);
  border-radius:var(--radius);padding:24px;
  transition:transform .2s ease, border-color .2s ease;
}
.kartu:hover{transform:translateY(-4px);border-color:var(--emas)}
.kartu .ikon{font-size:2rem;margin-bottom:10px;display:block}
.kartu h3{margin-bottom:8px;color:var(--putih)}
.kartu p{font-size:.92rem;margin-bottom:0}
.kartu-img{padding:0;overflow:hidden}
.kartu-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.kartu-img .isi{padding:20px}

/* ---------- Judul bagian ---------- */
.judul-bagian{text-align:center;margin-bottom:36px}
.judul-bagian h2{color:var(--putih)}
.judul-bagian h2::after{
  content:"";display:block;width:70px;height:4px;margin:12px auto 0;
  background:linear-gradient(90deg,var(--merah),var(--emas));border-radius:2px;
}
.judul-bagian p{max-width:720px;margin:10px auto 0}

/* ---------- Tabel ---------- */
.tabel-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--garis)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
thead th{background:var(--hitam-3);color:var(--emas);font-weight:800}
tbody tr:hover{background:rgba(245,197,24,.05)}
td{color:var(--abu)}
.cek{color:var(--hijau-2);font-weight:800}
.silang{color:var(--merah-2);font-weight:800}

/* ---------- Langkah ---------- */
.langkah{counter-reset:langkah}
.langkah .kartu{position:relative;padding-top:56px}
.langkah .kartu::before{
  counter-increment:langkah;content:counter(langkah);
  position:absolute;top:18px;left:24px;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--emas),#e09b00);color:#1a1200;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;
}

/* ---------- FAQ ---------- */
.faq-item{
  background:var(--hitam-3);border:1px solid var(--garis);
  border-radius:var(--radius);margin-bottom:12px;overflow:hidden;
}
.faq-item summary{
  padding:16px 20px;cursor:pointer;font-weight:700;color:var(--putih);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--emas);font-size:1.4rem;font-weight:900;flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item .jawab{padding:0 20px 16px}
.faq-item .jawab p{margin-bottom:0;font-size:.92rem}

/* ---------- Tag cloud ---------- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tag-cloud a{
  background:var(--hitam-3);border:1px solid var(--garis);color:var(--abu);
  padding:6px 16px;border-radius:20px;font-size:.85rem;
}
.tag-cloud a:hover{border-color:var(--emas);color:var(--emas)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding:12px 0;font-size:.85rem;color:var(--abu);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li::after{content:"›";margin-left:6px;color:var(--abu)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--abu)}
.breadcrumb a:hover{color:var(--emas)}
.breadcrumb [aria-current]{color:var(--emas)}

/* ---------- Artikel ---------- */
.artikel-hero{
  border-radius:var(--radius);overflow:hidden;margin:24px 0;
  border:1px solid var(--garis);
}
.artikel-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.artikel-body{max-width:820px;margin:0 auto}
.artikel-body h2{color:var(--emas);margin:34px 0 14px}
.artikel-body h3{color:var(--putih);margin:26px 0 10px}
.artikel-body ul,.artikel-body ol{margin:0 0 1rem 22px;color:var(--abu)}
.artikel-body li{margin-bottom:6px}
.artikel-body blockquote{
  border-left:4px solid var(--emas);background:var(--hitam-3);
  padding:14px 20px;border-radius:0 10px 10px 0;margin:18px 0;color:#e8e2f5;font-style:italic;
}
.artikel-meta{font-size:.85rem;color:var(--abu);margin-bottom:8px}
.kotak-peringatan{
  background:rgba(214,31,60,.12);border:1px solid var(--merah);
  border-radius:var(--radius);padding:16px 20px;margin:22px 0;font-size:.9rem;color:#ffd9df;
}
.kotak-info{
  background:rgba(30,144,255,.1);border:1px solid var(--biru);
  border-radius:var(--radius);padding:16px 20px;margin:22px 0;font-size:.9rem;color:#d5ecff;
}
.kotak-syarat{
  background:rgba(245,197,24,.07);border:1px dashed var(--emas);
  border-radius:var(--radius);padding:16px 20px;margin:22px 0;font-size:.9rem;color:#f5ead0;
}

/* ---------- Daftar artikel ---------- */
.daftar-artikel .kartu-img a{display:block}

/* ---------- Footer ---------- */
.footer{background:#0a0810;border-top:3px solid var(--emas);padding:44px 0 24px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.footer h4{color:var(--emas);margin-bottom:12px;font-size:1rem}
.footer ul{list-style:none}
.footer li{margin-bottom:8px}
.footer a{color:var(--abu);font-size:.9rem}
.footer a:hover{color:var(--emas)}
.footer p{font-size:.88rem}
.footer-bawah{
  border-top:1px solid rgba(255,255,255,.08);padding-top:18px;
  text-align:center;font-size:.82rem;color:var(--abu);
}
.footer-merek{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.2rem;color:var(--putih);margin-bottom:12px}
.footer-merek img{width:38px;height:38px}
.lencana-18{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:3px solid var(--merah);
  color:#ffb3c0;font-weight:900;font-size:.95rem;flex-shrink:0;
}

/* ---------- Floating CTA (slot style) ---------- */
.float-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:linear-gradient(180deg,rgba(22,16,42,.97),rgba(13,10,20,.99));
  border-top:2px solid var(--emas);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:12px;justify-content:center;align-items:center;
  box-shadow:0 -6px 24px rgba(0,0,0,.6);
}
.float-cta .slot-btn{
  position:relative;flex:1;max-width:260px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;border-radius:12px;font-weight:900;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.5px;overflow:visible;
  transition:transform .15s ease;
}
.float-cta .slot-btn:hover{transform:scale(1.04)}
.slot-daftar{
  background:linear-gradient(135deg,#ffd76a,#f5c518 45%,#e09b00);
  color:#241a00;box-shadow:0 0 18px rgba(245,197,24,.55), inset 0 2px 0 rgba(255,255,255,.5);
  animation:denyut 2.2s ease-in-out infinite;
}
.slot-masuk{
  background:linear-gradient(135deg,#ff4d6d,#d61f3c 55%,#a01030);
  color:#fff;box-shadow:0 0 18px rgba(214,31,60,.5), inset 0 2px 0 rgba(255,255,255,.35);
}
@keyframes denyut{
  0%,100%{box-shadow:0 0 14px rgba(245,197,24,.45), inset 0 2px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 0 30px rgba(245,197,24,.85), inset 0 2px 0 rgba(255,255,255,.5)}
}
.koin{
  position:absolute;top:-8px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#f5c518 55%,#b8860b);
  border:2px solid #ffe9a0;box-shadow:0 2px 6px rgba(0,0,0,.4);
  animation:koin-jatuh 2.6s linear infinite;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:900;color:#7a5b00;
}
.koin.k1{left:12%;animation-delay:0s}
.koin.k2{left:45%;animation-delay:.9s}
.koin.k3{left:78%;animation-delay:1.7s}
@keyframes koin-jatuh{
  0%{transform:translateY(-6px) rotateY(0);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(34px) rotateY(360deg);opacity:0}
}
.float-cta .gulungan{display:flex;gap:3px;font-size:1.05rem}
.gulungan span{
  display:inline-block;background:#0d0a14;border:1px solid var(--emas);
  border-radius:5px;padding:1px 5px;color:var(--emas);font-weight:900;
  animation:putar 3s ease-in-out infinite;
}
.gulungan span:nth-child(2){animation-delay:.4s}
.gulungan span:nth-child(3){animation-delay:.8s}
@keyframes putar{
  0%,88%,100%{transform:translateY(0)}
  92%{transform:translateY(-4px)}
  96%{transform:translateY(2px)}
}

/* ---------- Marquee pengumuman ---------- */
.marquee{
  background:linear-gradient(90deg,var(--merah),#8a1030);
  overflow:hidden;white-space:nowrap;padding:8px 0;font-size:.88rem;
}
.marquee div{display:inline-block;animation:geser 28s linear infinite;color:#ffe3ea;font-weight:600}
@keyframes geser{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}

/* ---------- Form ---------- */
.form-kartu{max-width:520px;margin:0 auto;background:var(--hitam-3);border:1px solid var(--garis);border-radius:var(--radius);padding:32px}
.form-kartu label{display:block;font-weight:700;margin:14px 0 6px;color:var(--putih);font-size:.92rem}
.form-kartu input,.form-kartu select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--garis);
  background:var(--hitam);color:var(--putih);font-size:.95rem;
}
.form-kartu input:focus{outline:none;border-color:var(--emas)}
.form-kartu .tombol{width:100%;margin-top:22px}
.form-catatan{font-size:.82rem;color:var(--abu);margin-top:14px;text-align:center}

/* ---------- Hasil pencarian ---------- */
#hasil-cari .kartu{margin-bottom:14px}

/* ---------- Utilitas responsif ---------- */
@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-utama{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--hitam-2);flex-direction:column;align-items:stretch;
    padding:12px 18px;border-bottom:2px solid var(--emas);
  }
  .nav-utama.buka{display:flex}
  .menu-toggle{display:block}
  .header-aksi .tombol{padding:8px 14px;font-size:.85rem}
  .cari-box{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .bagian{padding:40px 0}
  .hero{padding:56px 0 48px}
  .footer-grid{grid-template-columns:1fr}
  .float-cta .slot-btn{font-size:.9rem;padding:12px 6px}
  .gulungan{display:none!important}
  body{padding-bottom:76px}
}
@media(min-width:761px){
  body{padding-bottom:70px}
}