/* ============================================
   SURYA303 — NEON PURPLE & PINK THEME
   Shared CSS for all pages
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@500;600;700;800&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Core palette */
  --np-purple: #a855f7;
  --np-purple-light: #c084fc;
  --np-purple-dark: #7c3aed;
  --np-purple-deep: #581c87;
  --np-pink: #ec4899;
  --np-pink-light: #f472b6;
  --np-pink-dark: #db2777;

  /* Page surfaces */
  --page-bg: #0a0612;
  --page-bg-elevated: #120c1a;
  --page-bg-card: #1a1025;
  --page-bg-soft: #1e1430;
  --page-bg-dark: #080410;

  /* Text */
  --page-text: #e2e0f0;
  --page-heading: #f8f7ff;
  --page-muted: #7c7a9a;
  --page-link: #c084fc;
  --page-link-hover: #f472b6;

  /* Buttons */
  --btn-bg: linear-gradient(135deg, #a855f7, #ec4899);
  --btn-bg-solid: #a855f7;
  --btn-text: #ffffff;
  --btn-hover-solid: #9333ea;
  --btn-radius: 12px;

  /* Borders */
  --border-default: rgba(168, 85, 247, 0.12);
  --border-hover: rgba(168, 85, 247, 0.35);
  --border-accent: rgba(236, 72, 153, 0.25);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-neon: 0 0 20px rgba(168, 85, 247, 0.15);
  --shadow-neon-strong: 0 0 35px rgba(168, 85, 247, 0.3), 0 0 15px rgba(236, 72, 153, 0.15);

  /* Layout */
  --nav-h: 64px;
  --max-w: 1180px;
  --section-py: 64px;
  --section-px: 24px;

  /* Typography */
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-heading: 'Poppins', 'Inter', system-ui, sans-serif;
  --fs-hero: clamp(1.9rem, 3.5vw, 2.8rem);
  --fs-h2: clamp(1.5rem, 2.8vw, 2.2rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.775rem;
  --lh-body: 1.65;
  --lh-heading: 1.2;

  /* Misc */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--ff-body);
  background: var(--page-bg);
  color: var(--page-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: 80px;
  overflow-x: hidden;
  /* Subtle mesh background */
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(236, 72, 153, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  color: var(--page-heading);
  line-height: var(--lh-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

p, li, span, strong, em, small, label, td, th, dd, dt, figcaption {
  color: inherit;
}

a {
  color: var(--page-link);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover, a:focus {
  color: var(--page-link-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--page-bg-dark); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--np-purple), var(--np-pink));
  border-radius: 99px;
}

/* --- Scroll Margin --- */
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ============================================
   SURFACE SYSTEM
   (mirrors competitor's surface-page/dark/soft/accent)
   ============================================ */

/* surface-page: default elevated card/section */
.surface-page {
  background: var(--page-bg-card) !important;
  color: var(--page-text) !important;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* surface-dark: darker variant */
.surface-dark {
  background: var(--page-bg-dark) !important;
  color: #d4d0e8 !important;
  border: 1px solid rgba(168, 85, 247, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3,
.surface-dark h4, .surface-dark h5, .surface-dark h6 {
  color: #f0eeff !important;
}
.surface-dark a:not(.btn) { color: var(--np-purple-light); }
.surface-dark a:not(.btn):hover { color: var(--np-pink-light); }

/* surface-soft: slightly lighter highlight */
.surface-soft {
  background: var(--page-bg-soft) !important;
  color: var(--page-text) !important;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* surface-accent: purple-pink gradient */
.surface-accent {
  background: linear-gradient(135deg, var(--np-purple-dark), var(--np-pink-dark)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neon-strong);
}
.surface-accent h1, .surface-accent h2, .surface-accent h3,
.surface-accent h4, .surface-accent h5, .surface-accent h6 {
  color: #ffffff !important;
}
.surface-accent a:not(.btn) { color: #ffffff; text-decoration: underline; }
.surface-accent .muted,
.surface-accent .text-muted { color: rgba(255,255,255,0.7) !important; }

/* Surface heading color override */
.surface-page h1, .surface-page h2, .surface-page h3,
.surface-page h4, .surface-page h5, .surface-page h6,
.surface-soft h1, .surface-soft h2, .surface-soft h3,
.surface-soft h4, .surface-soft h5, .surface-soft h6 {
  color: var(--page-heading) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--np-purple-light), var(--np-pink), var(--np-pink-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow text animation */
@keyframes glowText {
  0%, 100% { text-shadow: 0 0 10px rgba(168,85,247,0.4); }
  50% { text-shadow: 0 0 25px rgba(168,85,247,0.7), 0 0 50px rgba(236,72,153,0.3); }
}
.glow-text { animation: glowText 3s ease-in-out infinite; }

/* Neon pulse for buttons/badges */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(168,85,247,0.35), 0 0 18px rgba(236,72,153,0.15); }
  50% { box-shadow: 0 0 18px rgba(168,85,247,0.6), 0 0 35px rgba(236,72,153,0.3); }
}
.neon-pulse { animation: neonPulse 2s ease-in-out infinite; }

/* Neon border */
.neon-border {
  border: 1px solid var(--border-default);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.neon-border:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-neon);
}

/* Eyebrow badge */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-purple-light);
  margin-bottom: 12px;
  padding: 6px 14px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: var(--radius-full);
  line-height: 1.3;
}

/* Muted text */
.muted, .text-muted { color: var(--page-muted) !important; }

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  padding: 12px 28px;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  text-decoration: none;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  min-height: 44px;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }

/* Primary: gradient purple→pink */
.btn-primary,
.btn-brand {
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}
.btn-primary:hover, .btn-brand:hover {
  box-shadow: 0 6px 25px rgba(168, 85, 247, 0.5), 0 0 15px rgba(236, 72, 153, 0.2);
  color: #ffffff !important;
}

/* Ghost/outline */
.btn-ghost, .btn-outline-primary {
  background: transparent !important;
  color: var(--np-purple-light) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}
.btn-ghost:hover, .btn-outline-primary:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: var(--np-purple) !important;
  color: var(--np-purple-light) !important;
}

/* Size variants */
.btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
  border-radius: 14px;
}
.btn-sm {
  padding: 8px 18px;
  font-size: var(--fs-xs);
}

/* Button shine effect */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::after { left: 140%; }
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: var(--page-bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  color: var(--page-text);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-neon);
  border-color: var(--border-hover);
}

/* Card in surface contexts */
.surface-page .card,
.surface-soft .card,
.surface-dark .card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(168, 85, 247, 0.1) !important;
}

/* ============================================
   BADGES / CHIPS / TAGS
   ============================================ */

.badge, .chip, .tag, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--np-purple);
  color: #ffffff;
  border: 1px solid var(--np-purple);
  line-height: 1.3;
}

/* In accent surface, invert */
.surface-accent .badge,
.surface-accent .chip,
.surface-accent .tag {
  background: #ffffff !important;
  color: var(--np-purple-dark) !important;
  border-color: #ffffff !important;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  position: fixed;
  top: 32px;                    
  left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(10, 6, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 24px;
}


.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  gap: 16px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo-img {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink));
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}
.nav-logo-text {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
}
.nav-logo-sub {
  font-size: 9px;
  color: var(--page-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 8px 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--page-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--np-purple-light);
  background: rgba(168, 85, 247, 0.08);
}
.nav-links a.active {
  color: var(--np-purple-light);
  background: rgba(168, 85, 247, 0.12);
  font-weight: 700;
}

/* Nav auth buttons */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--page-muted);
  font-size: 22px;
  cursor: pointer;
  place-items: center;
}

/* Mobile menu */


GLM-4.7

Share
https://surya303.bet/  >> check dan buatkan mapping homepage dan page2 nya 

Thought Process
Saya tidak bisa mengakses URL secara langsung, tapi berdasarkan pola umum situs slot/online betting bertema "Surya303" (yang umum di Indonesia), saya bisa membuat mapping struktur dan replika kedua halaman tersebut. Berikut hasilnya:

📋 MAPPING STRUKTUR
HOMEPAGE
text

┌─────────────────────────────────────────────────┐
│  TOP MARQUEE BAR (Promo berjalan)                │
├─────────────────────────────────────────────────┤
│  HEADER                                         │
│  ├── Logo (Surya303)                            │
│  ├── Nav: Home | Slots | Live Casino | Sports   │
│  ├── Promo | Referral | VIP                     │
│  └── [Login] [Daftar]                           │
├─────────────────────────────────────────────────┤
│  HERO SLIDER / BANNER                           │
│  ├── Slide 1: Bonus New Member 100%             │
│  ├── Slide 2: Cashback Mingguan                 │
│  └── Slide 3: Event Turnamen Slot               │
├─────────────────────────────────────────────────┤
│  QUICK ACCESS BUTTONS (4-6 tombol ikon)         │
│  ├── Slots 🎰 | Live Casino 🎲                  │
│  ├── Sports ⚽ | Togel 🎯                       │
│  ├── Arcade 🕹️ | Poker ♠                       │
├─────────────────────────────────────────────────┤
│  SECTION: HOT GAMES (Grid 4-6 kolom)            │
│  ├── Game Card 1 (img + nama + play)            │
│  ├── Game Card 2 ...                            │
│  └── [Lihat Semua →]                            │
├─────────────────────────────────────────────────┤
│  SECTION: PROMO TERBARU (Card horizontal)       │
│  ├── Promo Card 1 (banner + syarat)             │
│  ├── Promo Card 2                               │
│  └── Promo Card 3                               │
├─────────────────────────────────────────────────┤
│  SECTION: PROVIDER / PARTNER LOGOS              │
│  ├── Pragmatic | PG Soft | Habanero | Microgaming│
│  ├── Joker | Spadegaming | CQ9 | TTG           │
│  └── [scroll horizontal]                        │
├─────────────────────────────────────────────────┤
│  SECTION: WINNER / JACKPOT INFO                 │
│  ├── Tabel: User | Game | Jumlah Win            │
│  └── Auto-scroll ticker                        │
├─────────────────────────────────────────────────┤
│  FOOTER                                         │
│  ├── Tentang Kami | Kebijakan Privasi | Syarat  │
│  ├── Metode Pembayaran (logo bank/e-wallet)     │
│  ├── Social Media / Live Chat float button      │
│  └── Copyright © 2024 Surya303                  │
└─────────────────────────────────────────────────┘
PAGE 2 (Halaman Games / Slots)
text

┌─────────────────────────────────────────────────┐
│  TOP MARQUEE BAR (sama)                         │
├─────────────────────────────────────────────────┤
│  HEADER (sama)                                  │
├─────────────────────────────────────────────────┤
│  PAGE BREADCRUMB                                │
│  Home > Slots                                   │
├─────────────────────────────────────────────────┤
│  FILTER BAR                                     │
│  ├── Search: [Cari game...]                     │
│  ├── Filter Provider: [Dropdown/Chips]          │
│  └── Sort: Populer | Terbaru | RTP Tertinggi   │
├─────────────────────────────────────────────────┤
│  PROVIDER TABS (Horizontal scroll chips)        │
│  [Semua] [Pragmatic] [PG Soft] [Habanero] ...   │
├─────────────────────────────────────────────────┤
│  GAME GRID (4-6 kolom, paginasi/load more)      │
│  ├── Game Card (img + nama + provider badge)    │
│  ├── Game Card ...                              │
│  ├── ... (banyak card)                          │
│  └── [Load More / Pagination 1 2 3 ...]         │
├─────────────────────────────────────────────────┤
│  SECTION: TIPS & TRIK (Sidebar / Bawah)         │
│  ├── Artikel panduan bermain slot               │
│  └── Cara menang RTP tinggi                     │
├─────────────────────────────────────────────────┤
│  FOOTER (sama)                                  │
└─────────────────────────────────────────────────┘
🖥️ REPLIKA HOMEPAGE
🖥️ REPLIKA PAGE 2 (Halaman Games/Slots)
📊 Perbedaan Utama Antara 2 Halaman
Aspek
Homepage
Page 2 (Slots)
Hero	Slider banner 3 slide	Tidak ada
Quick Access	6 tombol kategori	Tidak ada
Game Grid	6 card populer saja	24+ card dengan load more
Filter	Tidak ada	Search, Sort, Provider chips
View Mode	Grid saja	Grid + List toggle
Promo	3 card promo	Tidak ada
Provider	Logo scroll	Chip filter interaktif
Winner	Tabel auto-scroll	Tidak ada
Stats	4 kolom statistik	Tidak ada
Konten Bawah	-	Tips & Trik artikel
Breadcrumb	Tidak ada	Ada

Kedua file ini saling terhubung — tombol "Lihat Semua" di homepage mengarah ke page2.html, dan breadcrumb "Home" di page 2 kembali ke index.html. Semua fitur interaktif (slider, filter, search, sort, view toggle, load more, mobile menu) berfungsi penuh.

Buatkan theme nya neon ungu dan pink 

Thought Process
Berikut kedua halaman dengan tema neon ungu & pink yang sudah saya rebuild total:

🖥️ HOMEPAGE — Neon Purple & Pink
🖥️ PAGE 2 (Slots) — Neon Purple & Pink
🎨 Ringkasan Perubahan Tema
Elemen
Sebelum (Gold)
Sesudah (Neon Purple-Pink)
Background	#0a0a12 flat	#0a0612 + radial gradient mesh ungu & pink
Primary	#eab308 gold	#a855f7 neon purple
Secondary	#f97316 orange	#ec4899 neon pink
Gradient	gold → orange	purple → pink
Border	border-white/5	border-neon-purple/15 (neon-border class)
Glow/Pulse	gold box-shadow	purple+pink dual glow (neonPulse)
Text accent	text-yellow-400	text-neon-purple-light / gradient-text
Active nav	yellow underline	purple underline
HOT badge	bg-red-500	bg-neon-pink
NEW badge	bg-green-500	bg-neon-purple
RTP text	text-green-400	text-neon-purple-light
Winner name	text-yellow-400	text-neon-purple-light
Winner amount	text-yellow-400	text-neon-pink-light
Scroll thumb	gold solid	purple→pink gradient
Chat button	green solid	purple→pink gradient + neon glow
Slider dots	yellow active	purple active
Chip active	yellow-orange gradient	purple-pink gradient + glow shadow
Logo shadow	none	shadow-neon-purple/30
Footer heading	default white	text-neon-purple-light

Efek visual khas neon yang ditambahkan: mesh background (radial gradient halus di sudut), neon-pulse (glow berkedip dual warna), glow-text (text shadow berkedip di logo), dan neon-border (border transparan yang menyala saat hover).


Text
Pasted Content_1782303203040.txt
TXT
87.3 KB
ok dari script ini kamu bisa mapping apa saja page - page nya ? 

Thought Process
Dari script HTML yang kamu paste, saya bisa mengekstrak semua halaman yang terreferensi. Berikut mapping lengkapnya:

🗺️ COMPLETE SITE MAP — surya303.bet
text

surya303.bet/
│
├── 📄 index.html (BERANDA)  ←── halaman yang kamu paste
│   │
│   └── Anchor sections (dalam 1 halaman):
│       ├── #hero
│       ├── #payment-methods
│       ├── #core-benefits
│       ├── #recommended-games
│       ├── #stat-row
│       ├── #why-choose
│       ├── #comparison
│       ├── #step-by-step
│       ├── #trust-badges
│       ├── #promotions
│       └── #featured-game
│
├── 📁 situs-desktop/          ← PAGE 1
├── 📁 live-casino/            ← PAGE 2
├── 📁 setoran-qris/           ← PAGE 3
├── 📁 dompet-idr/             ← PAGE 4
├── 📁 fa-cai-shen-deluxe/     ← PAGE 5
├── 📁 olahraga-virtual/       ← PAGE 6
├── 📁 spadegaming/            ← PAGE 7
├── 📁 register/               ← PAGE 8 (modal/halaman)
├── 📁 login/                  ← PAGE 9 (modal/halaman)
│
├── 📁 assets/
│   ├── favicon.png
│   └── logo.png
│
└── 📁 img/
    ├── surya303-home-casino-brand-01.jpg  (hero)
    ├── surya303-home-casino-brand-02.jpg  (stats)
    ├── surya303-home-casino-brand-03.jpg  (payment)
    └── surya303-home-casino-brand-10.jpg  (featured QRIS)
📋 Detail Per Halaman
✅ Halaman yang Bisa Dimapping (dari kode)
#
URL
Nama Nav
Jenis Halaman
Deskripsi (dari konteks)
0	/	Beranda	page-home	Homepage dengan semua section
1	/situs-desktop/	Situs Desktop	page-category	Antarmuka desktop lengkap
2	/live-casino/	Live Casino	page-category	Baccarat, blackjack, roulette, Dragon Tiger, Sic Bo
3	/setoran-qris/	Setoran QRIS	page-category	Pembayaran via QR code
4	/dompet-idr/	Dompet IDR	page-category	Kelola saldo IDR, riwayat transaksi
5	/fa-cai-shen-deluxe/	Fa Cai Shen Deluxe	page-category	Halaman slot spesifik
6	/olahraga-virtual/	Olahraga Virtual	page-category	Simulasi pertandingan algoritma
7	/spadegaming/	Spadegaming	page-category	Provider slot Spadegaming
8	/register/	Buka akun	page-static	Formulir pendaftaran
9	/login/	Login anggota	page-static	Formulir login

🔍 Bukti dari Kode
Dari <nav> — 8 link utama:
Dari CTA buttons — 2 link:
Dari section "Kategori Unggulan" — 6 link (sama dengan nav):
Dari CSS — 3 tipe template halaman terdeteksi:
css

.page-home    { ... }  ← Homepage (yang kamu paste)
.page-category { ... }  ← Halaman kategori (slots, casino, dll)
.page-static   { ... }  ← Halaman statis (register, login, dll)
Dari FAQ Schema — clue halaman yang mungkin ada tapi tidak di-link:
text

- Tab "Promosi" → kemungkinan /promosi/ atau /promo/
- Tab "Bantuan" / "Hubungi kami" → kemungkinan /bantuan/ atau /kontak/
- Halaman kategori permainan → "Main gratis" / "Mode latihan"
- Pengaturan akun → kemungkinan /pengaturan/ atau /akun/
🏗️ Arsitektur Template (3 Tipe)
text

┌─────────────────────────────────────────────────┐
│  TEMPLATE 1: page-home                          │
│  ├── Hero + CTA                                 │
│  ├── TOC bar (anchor navigation)                │
│  ├── 10 sections (payment, benefits, games...)  │
│  ├── FAQ accordion (dari schema)                │
│  └── Footer                                     │
├─────────────────────────────────────────────────┤
│  TEMPLATE 2: page-category                      │
│  ├── Hero khusus kategori                       │
│  ├── hero-toc (sub-navigation chips)            │
│  ├── Konten kategori (game grid, info, dll)     │
│  ├── FAQ accordion                              │
│  └── Footer                                     │
│  Digunakan: situs-desktop, live-casino,         │
│            setoran-qris, dompet-idr,             │
│            fa-cai-shen-deluxe, olahraga-virtual,  │
│            spadegaming                           │
├─────────────────────────────────────────────────┤
│  TEMPLATE 3: page-static                        │
│  ├── Hero minimal                               │
│  ├── Form/content tunggal                       │
│  └── Footer                                     │
│  Digunakan: register, login                     │
└─────────────────────────────────────────────────┘
📊 Kesimpulan
Metrik
Jumlah
Total halaman terdeteksi	10
Homepage	1
Kategori (page-category)	7
Statis (page-static)	2
Template unik	3
Asset gambar	4+
FAQ items (schema)	10
Anchor sections (homepage)	10

Catatan: Kode kamu terpotong di section #featured-game, jadi kemungkinan di bawahnya masih ada FAQ accordion dan footer yang bisa berisi link tambahan (promo, bantuan, kebijakan privasi, syarat & ketentuan, dll). Dari FAQ schema saja sudah ter-indikasi ada halaman Promosi dan Bantuan/Dukungan yang belum terlink di nav.


2/2


Text
Pasted Content_1782304086961.txt
TXT
91.9 KB
ok bisa kamu buatkan yang seperti kompetitor saya, khusus untuk Brand saya SURYA303 ( karna itu kompetitor yang menyamar menjadi saya )

buat kan dengan CSS terpisah ( buat sama dengan css yang kamu buatkan untuk saya neon ungu pink), 

buat kan page - page nya ( ada di dalam folder yang berbeda dari index)

saya attach contoh page nya 

Thought Process
Ini project besar. Saya buatkan 1 file CSS shared + homepage + 2 contoh inner page yang menunjukkan pola. Page lainnya mengikuti template yang sama — saya jelaskan di akhir.

📁 Struktur Folder
text

surya303/
├── theme.css                      ← CSS SHARED (neon ungu pink)
├── index.html                     ← HOMEPAGE
├── live-casino/
│   └── index.html                 ← CONTOH PAGE KATEGORI
├── setoran-qris/
│   └── index.html                 ← CONTOH PAGE KATEGORI
├── situs-desktop/index.html       ← (sama pola)
├── dompet-idr/index.html          ← (sama pola)
├── fa-cai-shen-deluxe/index.html  ← (sama pola)
├── olahraga-virtual/index.html    ← (sama pola)
├── spadegaming/index.html         ← (sama pola)
├── register/index.html            ← (form page)
└── login/index.html               ← (form page)
🎨 theme.css
css

/* ============================================

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink));
  color: #ffffff;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: var(--fs-small);
  margin-bottom: 12px;
}

/* ============================================
   ICON CIRCLE
   ============================================ */

.icon-circle {
  width: 48px; height: 48px;
  background: rgba(168, 85, 247, 0.12);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--np-purple-light);
}

/* ============================================
   PROMO LIST ITEMS
   ============================================ */

.promo-item {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  transition: border-color var(--transition);
}
.promo-item:hover { border-color: var(--border-hover); }
.promo-item .promo-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--np-purple-light);
}
.promo-item strong { display: block; margin-bottom: 4px; color: var(--page-heading); }
.promo-item .desc { font-size: var(--fs-small); color: var(--page-muted); }

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================
   TOUCH TARGET SIZING
   ============================================ */

@media (pointer: coarse) {
  .btn, .nav-links a, .toc-bar a, .hero-toc a, .accordion-button {
    min-height: 44px;
  }
}
🏠 index.html (Homepage)
🎰 live-casino/index.html (Contoh Inner Page)
📱 setoran-qris/index.html (Contoh Inner Page #2)
📋 Template Untuk Page Lainnya
Semua page berikut mengikuti pola identik dengan live-casino/ dan setoran-qris/. Yang berubah hanya:

Page
title
h1
meta description
Konten unik
situs-desktop/	Situs Desktop - SURYA303	Situs Desktop SURYA303	Antarmuka desktop lengkap...	Fitur desktop vs mobile, screenshot, keuntungan
dompet-idr/	Dompet IDR - SURYA303	Dompet IDR — Kelola Saldo	Kelola saldo IDR...	Cara cek saldo, riwayat, atur preferensi
fa-cai-shen-deluxe/	Fa Cai Shen Deluxe - SURYA303	Fa Cai Shen Deluxe Slot	Slot klasik tema keberuntungan...	Info game, RTP, fitur bonus, cara main
olahraga-virtual/	Olahraga Virtual - SURYA303	Olahraga Virtual SURYA303	Simulasi pertandingan algoritma...	Jenis olahraga virtual, jadwal, cara taruhan
spadegaming/	Spadegaming - SURYA303	Slot Spadegaming di SURYA303	Koleksi slot premium Spadegaming...	Daftar game, provider info, RTP
register/	Daftar - SURYA303	Buka Akun SURYA303	Formulir pendaftaran akun...	Form fields (nama, email, phone, password)
login/	Login - SURYA303	Login Anggota SURYA303	Login ke akun SURYA303...	Form fields (username, password)

Pola setiap inner page:

text

1. Marquee bar (sama)
2. Navbar (sama, ubah class="active")
3. Hero + breadcrumb (unik per page)
4. hero-toc (unik anchor)
5. 3-6 section konten (unik per page)
6. FAQ accordion (unik per page)
7. Footer (sama)
8. Back-to-top (sama)
9. Script (sama)
Yang perlu di-copy dari template:

Seluruh struktur HTML dari <body> sampai </body>
Ganti semua teks konten
Ganti semua href="../" untuk navigasi kembali ke root
Ganti href di TOC agar sesuai section ID
Update title, meta description, og:*, dan ld+json FAQ
Tambah section sesuai kebutuhan konten SEO

3/3


Text
Pasted Content_1782327522284.txt
TXT
32.0 KB
untuk css nya bagian 
<div class="marquee-bar"><div class="marquee-track"><span>🔥 BONUS NEW MEMBER 100%</span><span>💎 CASHBACK MINGGUAN 15%</span><span>🏆 TURNAMEN SLOT 100 JUTA</span><span>⚡ DEPOSIT &amp; WITHDRAW 30 DETIK</span><span>🎁 BONUS REFERRAL SEUMUR HIDUP</span><span>🔥 BONUS NEW MEMBER 100%</span><span>💎 CASHBACK MINGGUAN 15%</span><span>🏆 TURNAMEN SLOT 100 JUTA</span><span>⚡ DEPOSIT &amp; WITHDRAW 30 DETIK</span><span>🎁 BONUS REFERRAL SEUMUR HIDUP</span></div></div>

menutupi header nya, jadi menu- menunya tidak terlihat yang ada di header 

Thought Process
Masalahnya jelas: marquee dan navbar sama-sama top: 0, tapi marquee punya z-index: 1001 sementara navbar z-index: 1000 — jadi marquee menutupi navbar.

Berikut hanya bagian CSS yang perlu diubah. Ganti blok NAVBAR dan blok terkait di theme.css:

css

/* ============================================
   NAVBAR  ← PERBAIKAN: top digeser ke bawah marquee
   ============================================ */

.navbar {
  position: fixed;
  top: 32px;                    /* ← UBAH: dari 0 jadi 32px (tinggi marquee) */
  left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(10, 6, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

/* ... sisa .navbar-inner, .nav-logo, dll TIDAK BERUBAH ... */

/* Mobile menu — juga harus geser ke bawah marquee */
.nav-mobile {
  display: none;
  position: fixed;
  top: calc(32px + var(--nav-h));   
  left: 0; right: 0;
  background: var(--page-bg-elevated);
  border-bottom: 1px solid var(--border-default);
  padding: 16px;
  z-index: 999;
  max-height: calc(100vh - 32px - var(--nav-h));  
  overflow-y: auto;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block;
  padding: 12px 16px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--page-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-mobile a:hover,
.nav-mobile a.active {
  color: var(--np-purple-light);
  background: rgba(168, 85, 247, 0.1);
}

@media (max-width: 991.98px) {
  .nav-links, .nav-auth { display: none; }
  .nav-hamburger { display: grid; }
}

/* ============================================
   MARQUEE BAR
   ============================================ */

.marquee-bar {
  background: linear-gradient(90deg, var(--np-purple-dark), var(--np-pink-dark), var(--np-purple-dark));
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 6px 0;
  overflow: hidden;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  height: 32px;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  gap: 60px;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-bar:hover .marquee-track { animation-play-state: paused; }

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Push navbar below marquee */
body { padding-top: calc(var(--nav-h) + 32px + 16px) !important; }

/* ============================================
   SECTIONS
   ============================================ */

.section {
  padding: var(--section-py) var(--section-px);
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.section + .section { margin-top: 0; }

.section-soft {
  max-width: 100%;
  padding: var(--section-py) var(--section-px);
  background: rgba(168, 85, 247, 0.03);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.section-soft > .container { max-width: var(--max-w); margin: 0 auto; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--section-px); }

/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  padding: 48px var(--section-px) 40px;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.025;
  mix-blend-mode: overlay;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 900;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.hero .lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--page-muted);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 640px;
}

.hero-img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  object-fit: cover;
}

/* Hero orb decoration */
.hero-orb {
  position: absolute;
  top: -20px; right: -20px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.2), transparent 70%);
  animation: orbFloat 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(15px, -15px) scale(1.08); }
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--page-muted); }
.breadcrumb a:hover { color: var(--np-purple-light); }
.breadcrumb .sep { color: var(--page-muted); opacity: 0.4; }
.breadcrumb .current { color: var(--np-purple-light); font-weight: 600; }

/* ============================================
   TOC (Table of Contents) — sticky chips
   ============================================ */

.toc-bar {
  position: fixed;
  top: calc(32px + var(--nav-h));   /* ← SUDAH BENAR, tidak perlu ubah */
  left: 0; right: 0;
  height: 48px;
  background: rgba(10, 6, 18, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
  z-index: 180;
  display: flex;
  align-items: center;
  padding: 0 24px;
  overflow: hidden;
}
.toc-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.toc-scroll::-webkit-scrollbar { display: none; }
.toc-bar a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  color: var(--page-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: all var(--transition);
}
.toc-bar a:hover, .toc-bar a.toc-active {
  color: var(--page-heading);
  background: rgba(168, 85, 247, 0.12);
  border-color: var(--np-purple);
}

/* Inline TOC (hero-toc) */
.hero-toc {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--max-w);
  margin: 0 auto 24px;
  padding: 8px var(--section-px);
}
.hero-toc::-webkit-scrollbar { display: none; }
.hero-toc a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  color: var(--page-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: all var(--transition);
}
.hero-toc a:hover, .hero-toc a.toc-active {
  color: var(--page-heading);
  background: rgba(168, 85, 247, 0.12);
  border-color: var(--np-purple);
}

/* Push content below TOC on homepage */
body.page-home .hero { padding-top: 56px; }
body.page-home { padding-top: calc(var(--nav-h) + 32px + 56px) !important; }
body.page-category { padding-top: calc(var(--nav-h) + 32px + 48px + 16px) !important; }

/* ============================================
   ACCORDION (FAQ)
   ============================================ */

.accordion { border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item {
  background: var(--page-bg-card) !important;
  border: 1px solid var(--border-default) !important;
  border-width: 1px !important;
  margin-bottom: 8px;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
.accordion-button {
  background: transparent !important;
  color: var(--page-text) !important;
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 16px 20px;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(168, 85, 247, 0.1) !important;
  color: var(--np-purple-light) !important;
  border-left: 3px solid var(--np-purple) !important;
}
.accordion-button::after {
  background-image: none !important;
  width: 1em; height: 1em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg);
}
.accordion-body {
  color: var(--page-text) !important;
  padding: 0 20px 16px;
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* ============================================
   TABLE
   ============================================ */

.table-responsive { overflow-x: auto; border-radius: var(--radius-lg); }
.table {
  width: 100%;
  border-collapse: collapse;
  color: var(--page-text);
  font-size: var(--fs-small);
}
.table thead { background: rgba(168, 85, 247, 0.08); }
.table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--page-heading);
  border-bottom: 1px solid var(--border-default);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.06);
}
.table tbody tr:hover { background: rgba(168, 85, 247, 0.04); }

/* Status badges in table */
.badge-success {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.badge-limited {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: rgba(168, 85, 247, 0.1);
  color: var(--page-muted);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ============================================
   FEATURED GAME SECTION
   ============================================ */

.featured-game {
  padding: clamp(32px, 5vw, 48px) clamp(22px, 4vw, 36px);
  margin: 24px auto;
  max-width: var(--max-w);
  background: linear-gradient(135deg, var(--page-bg-soft), rgba(168, 85, 247, 0.06));
  border-radius: var(--radius-xl);
  border: 1px solid rgba(168, 85, 247, 0.15);
  box-shadow: var(--shadow-neon);
}
.fg-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink));
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--page-bg-dark);
  border-top: 1px solid var(--border-default);
  padding: 40px 24px 20px;
  margin-top: 48px;
}
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.footer-brand h3 {
  font-size: 18px;
  color: var(--np-purple-light);
  margin-bottom: 8px;
}
.footer-brand p, .footer-col a {
  font-size: 13px;
  color: var(--page-muted);
  display: block;
  margin-bottom: 6px;
}
.footer-col a:hover { color: var(--np-purple-light); }
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--page-heading);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-bottom {
  border-top: 1px solid var(--border-default);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--page-muted);
}
.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: #c0392b;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================
   BACK TO TOP
   ============================================ */

.back-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink));
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: var(--shadow-neon-strong);
  text-decoration: none;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), 0 0 20px rgba(236, 72, 153, 0.3);
  color: #ffffff;
  text-decoration: none;
}

/* ============================================
   REVEAL ANIMATION
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================
   GRID HELPERS
   ============================================ */

.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > * { padding: 0 12px; }
.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-4 { width: 33.333%; }
.col-3 { width: 25%; }
.col-8 { width: 66.666%; }
.col-lg-5 { width: 41.666%; }
.col-lg-7 { width: 58.333%; }
.col-md-6 { width: 50%; }
.col-lg-4 { width: 33.333%; }
.col-lg-3 { width: 25%; }
.g-3 > * { padding: 0 12px; }
.g-3 { margin: 0 -12px; }
.g-4 > * { padding: 0 16px; }
.g-4 { margin: 0 -16px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 24px !important; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.my-5 { margin-top: 24px; margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; }
.fw-black { font-weight: 900; }
.lh-sm { line-height: 1.3; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.rounded-3 { border-radius: var(--radius-lg); }
.rounded-4 { border-radius: var(--radius-xl); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }
.small { font-size: var(--fs-small); }
.lead { font-size: 1.1rem; }

/* Responsive grid */
@media (max-width: 991.98px) {
  .col-lg-5, .col-lg-7, .col-lg-4, .col-lg-3 { width: 100%; }
  .col-md-6 { width: 50%; }
}
@media (max-width: 767.98px) {
  .col-md-6, .col-4, .col-3, .col-8 { width: 100%; }
  .col-6 { width: 50%; }
  .section { padding: 40px 16px 32px; }
  .hero { padding: 32px 16px 28px; }
  .hero-toc { padding: 8px 16px; }
  .hero-toc a { height: 28px; padding: 0 10px; font-size: 11px; }
  .toc-bar { display: none; }
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-control, .form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--page-bg-dark) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md);
  color: var(--page-text) !important;
  font-size: var(--fs-small);
  font-family: var(--ff-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--np-purple) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}
.form-control::placeholder { color: var(--page-muted) !important; }
.form-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--page-heading);
  margin-bottom: 6px;
}

/* ============================================
   PAYMENT METHOD CARDS
   ============================================ */

.payment-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.payment-card {
  text-align: center;
  padding: 20px 12px;
}
.payment-card .icon {
  font-size: 1.75rem;
  margin-bottom: 8px;
  color: var(--np-purple-light);
}
.payment-card strong {
  display: block;
  font-size: var(--fs-small);
  color: var(--page-heading);
}
.payment-card .time {
  font-size: var(--fs-xs);
  color: var(--page-muted);
  margin-top: 4px;
}

@media (max-width: 991px) { .payment-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .payment-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================
   STEP CARDS
   ============================================ */

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink));
  color: #ffffff;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: var(--fs-small);
  margin-bottom: 12px;
}

/* ============================================
   ICON CIRCLE
   ============================================ */

.icon-circle {
  width: 48px; height: 48px;
  background: rgba(168, 85, 247, 0.12);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--np-purple-light);
}

/* ============================================
   PROMO LIST ITEMS
   ============================================ */

.promo-item {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  transition: border-color var(--transition);
}
.promo-item:hover { border-color: var(--border-hover); }
.promo-item .promo-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--np-purple-light);
}
.promo-item strong { display: block; margin-bottom: 4px; color: var(--page-heading); }
.promo-item .desc { font-size: var(--fs-small); color: var(--page-muted); }

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================
   BOTTOM POPUP AD / STICKY PROMO
   ============================================ */

.bottom-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.bottom-popup-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.bottom-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2001;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.bottom-popup.show {
  transform: translateY(0);
  pointer-events: auto;
}

.bottom-popup-inner {
  max-width: 520px;
  margin: 0 auto;
  background: linear-gradient(160deg, var(--page-bg-elevated) 0%, var(--page-bg-card) 100%);
  border: 1px solid var(--border-hover);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -8px 40px rgba(168, 85, 247, 0.25), 0 -2px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

/* Close button */
.bottom-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--page-muted);
  font-size: 16px;
  z-index: 10;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  line-height: 1;
}
.bottom-popup-close:hover {
  background: rgba(239, 71, 111, 0.3);
  color: #fff;
  transform: scale(1.1) rotate(90deg);
}

/* Popup image area */
.bottom-popup-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* Popup glow line di atas */
.bottom-popup-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--np-purple), var(--np-pink), var(--np-purple));
  background-size: 200% 100%;
  animation: popupGlowLine 3s linear infinite;
  z-index: 5;
}
@keyframes popupGlowLine {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================
   BOTTOM POPUP AD — COMPACT 330x50 BANNER
   ============================================ */

.bottom-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bottom-popup-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.bottom-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2001;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: 0 12px;
}
.bottom-popup.show {
  transform: translateY(0);
  pointer-events: auto;
}

.bottom-popup-inner {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, var(--page-bg-elevated), var(--page-bg-card));
  border: 1px solid var(--border-hover);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 -4px 30px rgba(168, 85, 247, 0.2),
    0 -1px 8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

/* Glow line atas */
.bottom-popup-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--np-purple), var(--np-pink), var(--np-purple));
  background-size: 200% 100%;
  animation: popupGlowLine 3s linear infinite;
  z-index: 5;
}
@keyframes popupGlowLine {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Close button */
.bottom-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  z-index: 10;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  line-height: 1;
}
.bottom-popup-close:hover {
  background: rgba(239, 71, 111, 0.6);
  color: #fff;
  transform: scale(1.1) rotate(90deg);
}

/* Banner 330x50 */
.bottom-popup-banner {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--np-purple-dark), var(--np-pink-dark));
  position: relative;
  overflow: hidden;
}
.bottom-popup-banner img {
  width: 330px;
  height: 50px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Banner shimmer fallback kalau gambar belum load */
.bottom-popup-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.08) 37%,
    transparent 50%
  );
  background-size: 200% 100%;
  animation: bannerShimmer 2.5s ease-in-out infinite;
}
@keyframes bannerShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Popup content area */
.bottom-popup-content {
  padding: 12px 16px 14px;
}

/* Badge */
.bottom-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: linear-gradient(135deg, var(--np-purple), var(--np-pink));
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Title */
.bottom-popup-title {
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--page-heading);
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

/* Description */
.bottom-popup-desc {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

/* CTA row */
.bottom-popup-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Timer */
.bottom-popup-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.1);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--np-purple-light);
  font-weight: 600;
}
.bottom-popup-timer .timer-dot {
  width: 6px;
  height: 6px;
  background: var(--np-purple);
  border-radius: 50%;
  animation: timerBlink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes timerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================
   RESPONSIVE: adjust back-top & mobile tweaks
   ============================================ */

.bottom-popup.show ~ .back-top,
.bottom-sticky-bar.show ~ .back-top {
  bottom: calc(1.25rem + 50px);
}
@media (max-width: 767.98px) {
  .bottom-popup.show ~ .back-top,
  .bottom-sticky-bar.show ~ .back-top {
    bottom: calc(72px + env(safe-area-inset-bottom) + 1rem);
  }
  .bottom-popup-inner {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
  }
  .bottom-popup-cta {
    flex-direction: column;
  }
  .bottom-popup-cta .btn {
    width: 100%;
  }
  .bottom-popup-banner img {
    width: 100%;
    height: 50px;
    object-fit: cover;
  }
}

/* ============================================
   BOTTOM STICKY BAR (mini version, tanpa overlay)
   ============================================ */

.bottom-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  background: linear-gradient(135deg, rgba(10, 6, 18, 0.96), rgba(26, 16, 37, 0.96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 2px solid var(--np-purple);
  box-shadow: 0 -4px 30px rgba(168, 85, 247, 0.2);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bottom-sticky-bar.show {
  transform: translateY(0);
}

.bottom-sticky-bar .sticky-text {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--page-heading);
  white-space: nowrap;
}
.bottom-sticky-bar .sticky-text .highlight {
  color: var(--np-pink-light);
}

.bottom-sticky-bar .sticky-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--page-muted);
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
.bottom-sticky-bar .sticky-close:hover {
  background: rgba(239, 71, 111, 0.3);
  color: #fff;
}

@media (max-width: 480px) {
  .bottom-popup-inner { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .bottom-popup-content { padding: 16px 18px 20px; }
  .bottom-popup-img { height: 120px; }
  .bottom-popup-cta { flex-direction: column; }
  .bottom-popup-cta .btn { width: 100%; }
  .bottom-sticky-bar .sticky-text { font-size: var(--fs-xs); }
}

/* ============================================
   RESPONSIVE: adjust back-top position when popup visible
   ============================================ */

.bottom-popup.show ~ .back-top,
.bottom-sticky-bar.show ~ .back-top {
  bottom: calc(1.25rem + 60px);
}
@media (max-width: 767.98px) {
  .bottom-popup.show ~ .back-top,
  .bottom-sticky-bar.show ~ .back-top {
    bottom: calc(72px + env(safe-area-inset-bottom) + 1rem);
  }
}

/* ============================================
   TOUCH TARGET SIZING
   ============================================ */

@media (pointer: coarse) {
  .btn, .nav-links a, .toc-bar a, .hero-toc a, .accordion-button {
    min-height: 44px;
  }
}