/* ═══════════════════════════════════════════════════════════════════════════
   /paket-mygamers/ — LAPISAN GELAP di atas paket-internet.css
   ═══════════════════════════════════════════════════════════════════════════
   Berkas ini TIDAK mengulang tata letak. Seluruh susunan (hero, kartu paket,
   tabel, tanya-jawab, langkah) diambil dari paket-internet.css yang sudah
   dipakai dua halaman paket lain dan sudah diuji. Di sini HANYA warnanya
   yang diganti menjadi gelap bertema gaming.

   Kenapa begitu: kalau tata letaknya ditulis ulang, cepat atau lambat ada
   perbaikan di satu halaman yang tidak ikut ke halaman ini. Dengan cara ini,
   perbaikan susunan otomatis berlaku di ketiganya.

   Dimuat SESUDAH paket-internet.css.
   Awalan kelas khusus halaman ini: mg-
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mg-latar: #0b0616;          /* dasar halaman, hampir hitam keunguan  */
  --mg-latar-2: #120a24;        /* bagian berseling                      */
  --mg-kartu: #1a1030;          /* kartu                                 */
  --mg-garis: #2f1d52;          /* garis tepi                            */
  --mg-teks: #ece5fb;           /* teks utama                            */
  --mg-teks-redup: #b0a3cf;     /* teks pendukung                        */
  --mg-neon: #d946ef;           /* magenta neon — aksen                  */
  --mg-neon-2: #a855f7;         /* ungu neon                             */
}

/* ══════════ DASAR ══════════ */
#main-content { background: var(--mg-latar); }

.mg-gelap { background: var(--mg-latar); }
/* bagian berseling supaya mata punya pijakan, tidak satu blok gelap panjang */
.mg-gelap:nth-of-type(even) { background: var(--mg-latar-2); }

.mg-gelap .pi-wrap p { color: var(--mg-teks-redup); }
.mg-gelap .pi-wrap h2,
.mg-gelap .pi-wrap h3 { color: var(--mg-teks); }
.mg-gelap .pi-wrap strong { color: #ffffff; }
.mg-gelap .pi-wrap em { color: var(--mg-teks); }

/* tautan biasa di atas latar gelap — aturan A15: jangan sewarna latarnya */
.mg-gelap .pi-wrap a:not(.pi-btn) {
  color: #f0a8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mg-gelap .pi-wrap a:not(.pi-btn):hover { color: #ffffff; }

.mg-gelap .pi-sub { color: var(--mg-teks-redup); }
.mg-gelap .pi-catatan { color: #9b8db8 !important; }
.mg-gelap .pi-catatan-tegas {
  background: var(--mg-kartu);
  border-color: var(--mg-garis);
  border-left-color: var(--mg-neon);
  color: var(--mg-teks) !important;
}

/* ══════════ PEMBUKA ══════════
   Foto ruang esports dipakai sebagai latar, DITUTUP lapisan gelap supaya
   tulisan di atasnya tetap terbaca. Tanpa lapisan itu, teks putih di atas
   foto berlampu neon jadi sulit dibaca — masalah yang sama seperti tombol
   ungu di atas latar ungu. */
.mg-hero {
  background:
    linear-gradient(180deg, rgba(11, 6, 22, 0.82) 0%, rgba(11, 6, 22, 0.88) 55%, rgba(11, 6, 22, 0.97) 100%),
    radial-gradient(120% 90% at 85% 0%, rgba(217, 70, 239, 0.28) 0%, rgba(217, 70, 239, 0) 60%),
    url("/assets/images/paket/mygamers-hero.webp") center / cover no-repeat,
    #0b0616;
}
.mg-hero::after {
  background: linear-gradient(90deg,
    rgba(217, 70, 239, 0) 0%,
    rgba(217, 70, 239, 0.6) 35%,
    rgba(168, 85, 247, 0.6) 65%,
    rgba(168, 85, 247, 0) 100%);
}
.mg-hero .pi-poin li {
  background: rgba(217, 70, 239, 0.1);
  border-color: rgba(217, 70, 239, 0.3);
}
.mg-hero .pi-poin-angka { color: #f5d0fe; }

/* ══════════ KARTU ══════════ */
.mg-gelap .pi-kartu-kecil,
.mg-gelap .pi-paket,
.mg-gelap .pi-kolom,
.mg-gelap .pi-langkah > li,
.mg-gelap .pi-faq-item,
.mg-gelap .pi-tabel-bungkus {
  background: var(--mg-kartu);
  border-color: var(--mg-garis);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -16px rgba(0, 0, 0, 0.8);
}
.mg-gelap .pi-kartu-kecil:hover,
.mg-gelap .pi-paket:hover {
  border-color: var(--mg-neon-2);
  box-shadow: 0 16px 40px -12px rgba(168, 85, 247, 0.4);
}

.mg-gelap .pi-paket-nama { color: var(--mg-teks); }
.mg-gelap .pi-paket-kecepatan { color: #f0a8ff !important; }
.mg-gelap .pi-paket-harga { color: #ffffff !important; }
.mg-gelap .pi-paket-harga span { color: var(--mg-teks-redup); }
.mg-gelap .pi-paket-untuk { color: var(--mg-teks-redup) !important; }
.mg-gelap .pi-paket-fitur li { color: var(--mg-teks-redup); }
.mg-gelap .pi-paket-fitur li::before {
  background: rgba(217, 70, 239, 0.16);
  box-shadow: inset 0 0 0 1.5px var(--mg-neon);
}
.mg-gelap .pi-paket-fitur li::after {
  border-right-color: var(--mg-neon);
  border-bottom-color: var(--mg-neon);
}

/* kartu yang disorot — garis neon supaya langsung ketahuan */
.mg-gelap .pi-paket-sorot {
  border-color: var(--mg-neon);
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.35), 0 16px 44px -14px rgba(217, 70, 239, 0.45);
}
.mg-gelap .pi-paket-label {
  background: linear-gradient(135deg, var(--mg-neon) 0%, var(--mg-neon-2) 100%);
}

/* ══════════ TOMBOL ══════════
   Aturan A15: tombol tidak boleh sewarna latar tempat ia berdiri.
   Di sini latarnya gelap, jadi tombol utama dibuat neon terang. */
.mg-gelap .pi-btn-utama,
.mg-hero .pi-btn-utama,
.mg-penutup .pi-btn-utama {
  background: linear-gradient(135deg, #e879f9 0%, #a855f7 100%);
  color: #17032a !important;
  box-shadow: 0 8px 24px -8px rgba(217, 70, 239, 0.65);
}
.mg-gelap .pi-btn-utama:hover,
.mg-hero .pi-btn-utama:hover,
.mg-penutup .pi-btn-utama:hover {
  background: linear-gradient(135deg, #f0abfc 0%, #c084fc 100%);
  box-shadow: 0 12px 32px -8px rgba(217, 70, 239, 0.8);
}
.mg-gelap .pi-btn-garis {
  background: transparent;
  color: #f0a8ff !important;
  border-color: var(--mg-garis);
}
.mg-gelap .pi-btn-garis:hover {
  background: rgba(217, 70, 239, 0.12);
  border-color: var(--mg-neon);
  color: #ffffff !important;
}

/* ══════════ TABEL ══════════ */
.mg-gelap .pi-tabel thead th {
  background: rgba(217, 70, 239, 0.12);
  color: var(--mg-teks);
}
.mg-gelap .pi-tabel th,
.mg-gelap .pi-tabel td { border-bottom-color: var(--mg-garis); }
.mg-gelap .pi-tabel tbody th { color: #ffffff; }
.mg-gelap .pi-tabel tbody td { color: var(--mg-teks-redup); }
.mg-gelap .pi-tabel tbody tr:nth-child(even) th,
.mg-gelap .pi-tabel tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }

/* ══════════ DUA KOLOM ══════════ */
.mg-gelap .pi-kolom-ya h3 { color: #4ade80; }
.mg-gelap .pi-kolom-tidak h3 { color: #fbbf24; }
.mg-gelap .pi-kolom-ya li::before { color: #4ade80; }
.mg-gelap .pi-kolom-tidak li::before { color: #fbbf24; }
.mg-gelap .pi-kolom li { color: var(--mg-teks-redup); }

/* ══════════ LANGKAH ══════════ */
.mg-gelap .pi-langkah > li::before {
  background: linear-gradient(135deg, var(--mg-neon) 0%, var(--mg-neon-2) 100%);
  color: #17032a;
}

/* ══════════ TANYA JAWAB ══════════ */
.mg-gelap .pi-faq-item summary { color: var(--mg-teks); }
.mg-gelap .pi-faq-item[open] { border-color: var(--mg-neon-2); }
.mg-gelap .pi-faq-item summary::after {
  background:
    linear-gradient(#f0a8ff, #f0a8ff) center/13px 2px no-repeat,
    linear-gradient(#f0a8ff, #f0a8ff) center/2px 13px no-repeat;
}
.mg-gelap .pi-faq-item[open] summary::after {
  background: linear-gradient(#f0a8ff, #f0a8ff) center/13px 2px no-repeat;
}

/* ══════════ PENUTUP ══════════ */
.mg-penutup {
  background:
    radial-gradient(120% 90% at 12% -6%, rgba(217, 70, 239, 0.26) 0%, rgba(217, 70, 239, 0) 58%),
    radial-gradient(100% 85% at 96% 104%, rgba(168, 85, 247, 0.3) 0%, rgba(168, 85, 247, 0) 62%),
    linear-gradient(197deg, #14082a 0%, #23103f 45%, #2f1552 100%);
}
.mg-penutup .pi-tautan-lain a { color: #f0a8ff !important; }

/* ══════════ MENGHORMATI SETELAN PENGGUNA ══════════ */
@media (prefers-reduced-motion: reduce) {
  .mg-gelap .pi-kartu-kecil:hover,
  .mg-gelap .pi-paket:hover { transform: none; }
}