/* ============================================================
   CYBERPUNK OVERRIDE — Cyan + Magenta + Amber
   Hanya ubah WARNA dan ukuran tombol Connect Wallet mobile.
   Tidak menyentuh display, visibility, layout, flex, grid,
   width, height, margin, atau struktur apapun.
   ============================================================ */

/* ---- VARIABEL WARNA CYBERPUNK ---- */
:root {
  --cyber-cyan:    #00FFFF;
  --cyber-magenta: #FF00FF;
  --cyber-amber:   #FFBF00;
  --cyber-dark:    #0a0a1a;
}

/* ============================================================
   BACKGROUNDS — Section backgrounds (green -> dark cyberpunk)
   ============================================================ */
.bg-BG           { background-color: #0d0d1a !important; }
.bg-primary-0    { background-color: var(--cyber-cyan) !important; }
.bg-primary-1    { background-color: var(--cyber-cyan) !important; }
.bg-primary-4    { background-color: #0a0a1a !important; }
.bg-primary-5    { background-color: #0a0a18 !important; }
.bg-primary-6    { background-color: #0a0a18 !important; }
.bg-primary-7    { background-color: #070710 !important; }
.bg-primary-8    { background-color: #070710 !important; }
.bg-\[\#34472C\] { background-color: #0d0d1a !important; }
.bg-\[\#36492D\] { background-color: #0a0a1a !important; }
.bg-\[\#39431D\] { background-color: #0e0e20 !important; }
.bg-\[\#F5D871\] { background-color: var(--cyber-magenta) !important; }
.bg-highlight-2  { background-color: var(--cyber-amber) !important; }

/* ============================================================
   TEXT COLORS
   ============================================================ */
.text-primary-1   { color: var(--cyber-cyan) !important; }
.text-primary-4   { color: #0a0a1a !important; }
.text-highlight-1 { color: var(--cyber-amber) !important; }

.hover\:text-primary-1:hover { color: var(--cyber-cyan) !important; }
.hover\:text-primary-4:hover { color: #0a0a1a !important; }

.group:hover .group-hover\:text-primary-1 { color: var(--cyber-cyan) !important; }
.group:hover .group-hover\:text-primary-4 { color: #0a0a1a !important; }

.xl\:text-primary-4 { color: #0a0a1a !important; }

/* ============================================================
   BORDER COLORS
   ============================================================ */
.border-primary-1 { border-color: var(--cyber-cyan) !important; }
.border-primary-4 { border-color: #0a0a1a !important; }
.border-BG        { border-color: #1a1a30 !important; }

.hover\:border-primary-1:hover   { border-color: var(--cyber-cyan) !important; }
.hover\:border-BG:hover          { border-color: #1a1a30 !important; }
.hover\:border-transparent:hover { border-color: transparent !important; }

.group:hover .group-hover\:border-primary-1   { border-color: var(--cyber-cyan) !important; }
.group:hover .group-hover\:border-primary-4   { border-color: #0a0a1a !important; }
.group:hover .group-hover\:border-transparent { border-color: transparent !important; }

.focus\:border-primary-1:focus { border-color: var(--cyber-cyan) !important; }

/* ============================================================
   HOVER BACKGROUNDS
   ============================================================ */
.hover\:bg-primary-1:hover { background-color: var(--cyber-cyan) !important; }
.hover\:bg-primary-4:hover { background-color: #0a0a1a !important; }
.hover\:bg-BG:hover        { background-color: #0d0d1a !important; }

.group:hover .group-hover\:bg-primary-1 { background-color: var(--cyber-cyan) !important; }
.group:hover .group-hover\:bg-primary-4 { background-color: #0a0a1a !important; }
.group:hover .group-hover\:bg-primary-5 { background-color: #0a0a18 !important; }
.group:hover .group-hover\:bg-BG        { background-color: #0d0d1a !important; }

.xl\:bg-primary-4 { background-color: #0a0a1a !important; }

/* ============================================================
   BUTTON STYLES — Hanya ubah warna, bukan layout/ukuran
   ============================================================ */
.btn-primary {
  border-color:     var(--cyber-cyan) !important;
  background-color: var(--cyber-cyan) !important;
  color:            #0a0a1a !important;
  box-shadow:       0 0 10px rgba(0,255,255,0.4) !important;
  text-shadow:      none !important;
}
.btn-primary:hover {
  background-color: #0a0a1a !important;
  color:            var(--cyber-cyan) !important;
  box-shadow:       0 0 16px rgba(0,255,255,0.6) !important;
}

.btn-outline       { border-color: var(--cyber-cyan) !important; }
.btn-outline:hover { border-color: var(--cyber-magenta) !important; background-color: rgba(0,255,255,0.08) !important; }

.btn-outline-round       { border-color: var(--cyber-cyan) !important; }
.btn-outline-round:hover { border-color: var(--cyber-magenta) !important; }

.btn-linebar-effect:before { background-color: var(--cyber-cyan) !important; }

.hover\:btn-primary:hover {
  border-color:     var(--cyber-cyan) !important;
  background-color: var(--cyber-cyan) !important;
  color:            #0a0a1a !important;
}

/* ============================================================
   CONNECT WALLET BUTTON — Kecilkan di mobile (bawah xl=1200px)
   Selector presisi: hanya button element dengan atribut data-v-6913284e.
   Sama sekali tidak menyentuh SVG hamburger atau elemen lain.
   Hanya mengubah font-size dan padding — TIDAK ada width/flex/display.
   ============================================================ */
@media (max-width: 575px) {
  button.btn.btn-primary[data-v-6913284e] {
    font-size:      0.68rem !important;
    padding-top:    0.28rem !important;
    padding-bottom: 0.28rem !important;
    padding-left:   0.5rem !important;
    padding-right:  0.5rem !important;
    line-height:    1.3 !important;
    white-space:    nowrap !important;
  }
}
@media (min-width: 576px) and (max-width: 1199px) {
  button.btn.btn-primary[data-v-6913284e] {
    font-size:      0.78rem !important;
    padding-top:    0.32rem !important;
    padding-bottom: 0.32rem !important;
    padding-left:   0.6rem !important;
    padding-right:  0.6rem !important;
    line-height:    1.3 !important;
    white-space:    nowrap !important;
  }
}

/* ============================================================
   GRADIENTS
   ============================================================ */
.gradient-text-primary {
  background-image: linear-gradient(to right, var(--cyber-cyan), var(--cyber-magenta)) !important;
}
.group:hover .group-hover\:gradient-text-primary {
  background-image: linear-gradient(to right, var(--cyber-cyan), var(--cyber-magenta)) !important;
}

.gradient-primary-2 {
  background:              linear-gradient(270deg, var(--cyber-magenta) 6.51%, var(--cyber-amber) 63.52%) !important;
  background-clip:         text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.gredient-bg-X:after { background: linear-gradient(270deg, var(--cyber-cyan) 6.51%, var(--cyber-magenta) 63.52%) !important; }
.gredient-bg-Y:after { background: linear-gradient(180deg, var(--cyber-cyan), var(--cyber-magenta)) !important; }

.from-primary-1 {
  --tw-gradient-from:  var(--cyber-cyan) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-primary-1 { --tw-gradient-to: var(--cyber-cyan) var(--tw-gradient-to-position) !important; }

.from-\[\#FACD95\] {
  --tw-gradient-from:  var(--cyber-amber) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-\[\#C7F801\]  { --tw-gradient-to: var(--cyber-cyan) var(--tw-gradient-to-position) !important; }

.from-highlight-1 {
  --tw-gradient-from:  var(--cyber-amber) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-highlight-1 { --tw-gradient-to: var(--cyber-amber) var(--tw-gradient-to-position) !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { background-color: #0d0d1a !important; }
::-webkit-scrollbar-thumb { background-color: var(--cyber-cyan) !important; }

/* ============================================================
   CURSOR (desktop)
   ============================================================ */
.cursor-outer { border-color: var(--cyber-cyan) !important; }
.cursor-inner { background-color: var(--cyber-cyan) !important; }

/* ============================================================
   RANGE SLIDER
   ============================================================ */
#range-slider                      { color: var(--cyber-cyan) !important; }
#range-slider .range-slider__range { background: var(--cyber-cyan) !important; }
#range-slider .range-slider__thumb { background: var(--cyber-cyan) !important; }

/* ============================================================
   PSEUDO ELEMENTS
   ============================================================ */
.after\:bg-primary-1:after     { background-color: var(--cyber-cyan) !important; }
.after\:border-primary-4:after { border-color: #0a0a1a !important; }

/* ============================================================
   CARD HOVER GLOW
   ============================================================ */
.gredient-bg-effect:hover {
  box-shadow: 0 0 18px rgba(0,255,255,0.12), 0 6px 10px #00000014 !important;
}

/* ============================================================
   FIX: Hamburger menu icon (strip 3) di mobile header
   Di kode asli bg-BG hijau gelap sehingga SVG hitam masih kelihatan.
   Setelah cyberpunk bg-BG jadi hampir hitam, SVG ikut nav.text-black
   sehingga tidak kelihatan. Fix: pastikan icon ini selalu putih.
   ============================================================ */
.tabler-icon-menu-2 {
  color: #ffffff !important;
}

/* ============================================================
   FIX HAMBURGER: Explicit size agar SVG tidak collapse ke 0
   + warna putih agar terlihat di background gelap
   ============================================================ */
.tabler-icon-menu-2 {
  color: #ffffff !important;
  width: 1.875rem !important;
  height: 1.875rem !important;
  min-width: 1.875rem !important;
  flex-shrink: 0 !important;
}