@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;500;700&display=swap');

/* ====== Havoc theme: monokrom, kontras tinggi, aksen chrome/putih tajam ====== */
/* Font brand "Havoc" sekarang pakai Archivo Black (Google Fonts, gratis & bebas
   komersial) - font custom lokal sebelumnya ("Another Danger", gaya distressed/
   grunge/stensil semprot) sudah TIDAK dipakai lagi karena gak cocok sama gaya
   neobrutalism tebal-geometris-rapi di referensi desain terbaru. File font lokal
   lama (havoc-display.otf, havoc-display-slanted.otf) dihapus dari /public/fonts -
   gak perlu proses upload manual lagi kayak sebelumnya, Archivo Black otomatis
   kepakai dari Google Fonts. */
@font-face {
  font-family: 'Havoc Body';
  src: url('/fonts/havoc-body.ttf') format('truetype'),
       url('/fonts/havoc-body.otf') format('opentype');
  font-weight: 400;
  font-display: block;
}

:root {
  /* ====== GANTI TEMA: dari neobrutalism (border tebal + shadow keras offset)
     ke dark neon-glow (kartu gelap translucent, border tipis, cahaya lembut
     nyala di sekitar elemen berwarna) - sesuai referensi baru. Variabel lama
     (--shadow, --radius, --border) namanya dipertahankan biar gak perlu ubah
     ratusan referensi kelas di seluruh situs, tapi ISINYA diganti total. ====== */
  --bg: #07080c;
  --surface: #10121a;
  --surface-2: #171a24;
  --surface-3: #1f232f;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f1f2f6;
  --text-muted: #9a9fb0;
  --text-faint: #656b7d;
  /* Shadow sekarang glow blur lembut (bukan offset keras), warnanya ngikutin
     warna aksen elemen masing-masing lewat --glow-color di tempat yang butuh. */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --radius: 18px;

  --green: #22e0a8;
  --green-strong: #0fbd8c;
  --green-soft: rgba(34, 224, 168, 0.14);
  /* --purple dipertahankan sebagai warna brand utama Havoc (magenta neon),
     tapi sekarang cuma SATU dari banyak warna yang dipakai gantian per
     konteks - bukan warna dominan di semua tempat lagi. */
  --purple: #ff2ea6;
  --purple-strong: #ff5cc0;
  --purple-soft: rgba(255, 46, 166, 0.14);
  --gold: #ffc233;
  --gold-strong: #ffb000;
  --gold-soft: rgba(255, 194, 51, 0.14);
  --red: #ff4d5e;
  --red-strong: #ff2d42;
  --red-soft: rgba(255, 77, 94, 0.14);
  --blue: #2e9bff;
  --blue-strong: #5cb3ff;
  --blue-soft: rgba(46, 155, 255, 0.14);
  --magenta: #ff2ea6;
  --magenta-strong: #ff5cc0;
  --magenta-soft: rgba(255, 46, 166, 0.14);
  --on-accent: #07080c;
  --nav-bg-translucent: rgba(7, 8, 12, 0.82);
  --lime: #b6ff3c;
  --lime-strong: #96e01c;
  --on-lime: #07080c;
  --violet: #9d5cff;
  --violet-strong: #b483ff;
  --violet-soft: rgba(157, 92, 255, 0.14);
  --on-violet: #ffffff;
  /* ====== Warna tambahan biar variasinya beneran lengkap ("semua warna di
     dunia"), dipakai kontekstual sesuai kategori konten - bukan cuma hijau/
     merah/ungu doang. Tiap warna ada versi -soft (buat background chip/icon
     translucent) biar konsisten sama pola --purple-soft dkk yang udah ada. ====== */
  --cyan: #22d3ee;
  --cyan-strong: #06b6d4;
  --cyan-soft: rgba(34, 211, 238, 0.14);
  --orange: #ff8a3c;
  --orange-strong: #ff6a00;
  --orange-soft: rgba(255, 138, 60, 0.14);
  --teal: #14c9a8;
  --teal-strong: #0da88b;
  --teal-soft: rgba(20, 201, 168, 0.14);
  --indigo: #6f7bff;
  --indigo-strong: #4f5eff;
  --indigo-soft: rgba(111, 123, 255, 0.14);
  --rose: #ff5c8a;
  --rose-strong: #ff3366;
  --rose-soft: rgba(255, 92, 138, 0.14);
  --sky: #4fc3ff;
  --sky-strong: #1eb0ff;
  --sky-soft: rgba(79, 195, 255, 0.14);
  --amber: #ffcf40;
  --amber-strong: #ffb800;
  --amber-soft: rgba(255, 207, 64, 0.14);
  --emerald: #34d399;
  --emerald-strong: #10b981;
  --emerald-soft: rgba(52, 211, 153, 0.14);
}

/* Efek nyala lembut di belakang elemen berwarna (icon chip, tombol utama, dst) -
   pengganti .shadow keras offset khas neobrutalism kemarin. Dipanggil dengan
   `box-shadow: var(--glow-purple)` dst, bukan cuma dark drop-shadow polos. */
:root {
  --glow-purple: 0 0 22px rgba(255, 46, 166, 0.35);
  --glow-blue: 0 0 22px rgba(46, 155, 255, 0.35);
  --glow-green: 0 0 22px rgba(34, 224, 168, 0.35);
  --glow-red: 0 0 22px rgba(255, 77, 94, 0.35);
  --glow-gold: 0 0 22px rgba(255, 194, 51, 0.35);
  --glow-violet: 0 0 22px rgba(157, 92, 255, 0.35);
  --glow-cyan: 0 0 22px rgba(34, 211, 238, 0.35);
  --glow-orange: 0 0 22px rgba(255, 138, 60, 0.35);
  --glow-teal: 0 0 22px rgba(20, 201, 168, 0.35);
  --glow-indigo: 0 0 22px rgba(111, 123, 255, 0.35);
  --glow-rose: 0 0 22px rgba(255, 92, 138, 0.35);
  --glow-sky: 0 0 22px rgba(79, 195, 255, 0.35);
  --glow-amber: 0 0 22px rgba(255, 207, 64, 0.35);
  --glow-emerald: 0 0 22px rgba(52, 211, 153, 0.35);
}

/* ====== Tema terang (toggle via tombol di navbar) - varian krem/off-white
   neobrutalism, disamain sama background pucat di referensi desain. ====== */
html[data-theme="light"] {
  --bg: #f2f0e4;
  --surface: #fbfaf4;
  --surface-2: #eeece0;
  --surface-3: #e2ded0;
  --border: rgba(10, 10, 10, 0.9);
  --border-strong: #0a0a0a;
  --text: #0a0a0a;
  --text-muted: #4a463c;
  --text-faint: #7a7566;
  --shadow: 5px 5px 0 rgba(10, 10, 10, 0.85);
  --shadow-sm: 3px 3px 0 rgba(10, 10, 10, 0.85);

  --purple: #e0005c;
  --purple-strong: #b8004a;
  --purple-soft: rgba(224, 0, 92, 0.12);
  --magenta: #e0005c;
  --magenta-strong: #b8004a;
  --magenta-soft: rgba(224, 0, 92, 0.12);
  --on-accent: #ffffff;
  --nav-bg-translucent: rgba(242, 240, 228, 0.92);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  /* ====== Aurora gradient blur - ganti total dari gaya sticker/dekorasi neo-brutalist
     lama (barcode, tag miring, tanda "+" bertebaran, dll) yang udah dihapus semua.
     Ini beberapa radial-gradient besar warna brand (pink/cyan/gold) yang nge-blur
     lembut di balik konten - gaya yang umum dipakai produk SaaS profesional
     (Linear, Vercel, Stripe). Murni CSS, gak ada JS/gambar, ringan di GPU, dan
     otomatis kepakai di SEMUA halaman tanpa perlu markup tambahan per-halaman. */
  background-image:
    radial-gradient(ellipse 900px 650px at 10% -8%, rgba(255,46,166,0.14), transparent 60%),
    radial-gradient(ellipse 750px 650px at 105% 12%, rgba(34,211,238,0.11), transparent 62%),
    radial-gradient(ellipse 950px 750px at 15% 105%, rgba(255,194,51,0.07), transparent 65%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Havoc Body', 'Space Grotesk', system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  overflow-x: hidden;
}
/* HP low-end/baterai lemah: grid dimatiin, background jadi warna solid polos.
   gpu-lite class-nya ditaro di <html> sendiri (bukan ancestor-nya), makanya
   html.gpu-lite buat elemen html-nya sendiri, .gpu-lite body buat body sebagai
   descendant dari html.gpu-lite. */
html.gpu-lite, .gpu-lite body { background-image: none !important; }

/* Aurora di tema terang butuh opacity lebih rendah - warna solid di atas
   background krem lebih "keliatan"/kentara dibanding di atas background gelap,
   jadi disesuaikan biar tetep subtle & profesional, bukan malah norak. */
html[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 900px 650px at 10% -8%, rgba(224,0,92,0.08), transparent 60%),
    radial-gradient(ellipse 750px 650px at 105% 12%, rgba(34,211,238,0.07), transparent 62%),
    radial-gradient(ellipse 950px 750px at 15% 105%, rgba(255,194,51,0.06), transparent 65%);
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* Corner accent - dulu bracket sudut tebal ala tactical/neobrutalism, sekarang
   diringankan jadi titik cahaya lembut di 2 sudut biar cocok sama gaya neon-glow. */
.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; background: var(--purple); box-shadow: var(--glow-purple);
}
.corner-frame::before { top: -4px; left: -4px; }
.corner-frame::after { bottom: -4px; right: -4px; }

/* ====== Aksen "+" kecil - motif dekoratif khas neobrutalism yang keliatan di
   referensi (disebar di sudut-sudut kosong biar layout gak terasa polos). Dipakai
   selektif, gak di semua tempat biar gak berlebihan. ====== */
.neo-plus {
  position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0.55;
}
.neo-plus::before, .neo-plus::after {
  content: ""; position: absolute; background: currentColor;
}
.neo-plus::before { top: 6px; left: 0; width: 14px; height: 2.5px; }
.neo-plus::after { top: 0; left: 6px; width: 2.5px; height: 14px; }

/* ====== Motif barcode - elemen dekoratif yang menonjol banget di referensi
   desain, dibikin murni CSS (repeating-linear-gradient), gak perlu file gambar. ====== */
.neo-barcode {
  height: 22px;
  background-image: repeating-linear-gradient(
    90deg, currentColor 0, currentColor 2px, transparent 2px, transparent 4px,
    currentColor 4px, currentColor 5px, transparent 5px, transparent 9px,
    currentColor 9px, currentColor 12px, transparent 12px, transparent 14px
  );
  opacity: 0.85;
}

/* ====== Sticker/tag ala referensi - kotak solid berwarna + border tebal + huruf
   kapital tebal, kadang ada ikon "x" kecil di pojok kanan atas (murni dekoratif,
   nyontoh gaya "tag terminal/UI game" di referensi). Warna diatur lewat modifier
   class (.neo-tag-pink/.neo-tag-black/.neo-tag-yellow/.neo-tag-blue/.neo-tag-lime). ====== */
/* ====== Chip/tag - dulu kotak solid+border tebal+shadow offset ala sticker,
   sekarang pill translucent nyala tipis (kaca gelap + border warna + glow lembut),
   biar konsisten sama gaya card & tombol yang baru. Warna diatur lewat modifier
   class (.neo-tag-pink/.neo-tag-blue/.neo-tag-cyan/dst - variasinya diperbanyak
   biar bisa dipasangin sesuai konteks, bukan cuma segelintir warna). ====== */
.neo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 12.5px;
  letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap;
  box-shadow: none;
}
.neo-tag-black { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.neo-tag-pink { background: var(--purple-soft); color: var(--purple-strong); border-color: var(--purple); }
.neo-tag-yellow { background: var(--gold-soft); color: var(--gold-strong); border-color: var(--gold); }
.neo-tag-blue { background: var(--blue-soft); color: var(--blue-strong); border-color: var(--blue); }
.neo-tag-lime { background: rgba(182, 255, 60, 0.14); color: var(--lime-strong); border-color: var(--lime); }
.neo-tag-violet { background: var(--violet-soft); color: var(--violet-strong); border-color: var(--violet); }
.neo-tag-cyan { background: var(--cyan-soft); color: var(--cyan); border-color: var(--cyan); }
.neo-tag-orange { background: var(--orange-soft); color: var(--orange); border-color: var(--orange); }
.neo-tag-teal { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.neo-tag-indigo { background: var(--indigo-soft); color: var(--indigo); border-color: var(--indigo); }
.neo-tag-rose { background: var(--rose-soft); color: var(--rose); border-color: var(--rose); }
.neo-tag-emerald { background: var(--emerald-soft); color: var(--emerald); border-color: var(--emerald); }
.neo-tag .neo-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; flex-shrink: 0; opacity: 0.85;
}

/* ====== Motif "X" besar dekoratif - dipakai nempel di jaket/kartu di referensi. ====== */
.neo-x {
  position: relative; width: 18px; height: 18px; flex-shrink: 0;
}
.neo-x::before, .neo-x::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 2.5px;
  background: currentColor; transform-origin: center;
}
.neo-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.neo-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ====== Stat badge ala "LEVEL 99 MAX" di referensi - dipakai buat highlight angka
   penting (quota, level role, dsb) di hero/dashboard. ====== */
.neo-stat {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: 'Space Grotesk', sans-serif;
}
.neo-stat .neo-stat-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.neo-stat .neo-stat-value {
  font-size: 34px; font-weight: 800; line-height: 1; color: var(--purple);
  font-family: 'Space Mono', monospace;
}
.neo-stat .neo-stat-sub {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ====== Blok halftone dot - pola titik-titik dekoratif kotak kecil, nyontoh
   pattern "::::" di referensi (bukan grid tipis background global). ====== */
.neo-dots {
  width: 46px; height: 46px; opacity: 0.8;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 8px 8px;
  color: var(--text-faint);
}

/* ====== Strip "tape" diagonal - nyontoh motif garis miring hitam-putih di
   referensi, dipakai sebagai divider/aksen dekoratif tipis di hero/card. ====== */
.neo-stripe {
  height: 10px; border-radius: 3px;
  background-image: repeating-linear-gradient(
    45deg, var(--border-strong) 0, var(--border-strong) 6px,
    transparent 6px, transparent 12px
  );
  opacity: 0.85;
}

.section-divider {
  height: 1px; margin: 0 auto; max-width: 1100px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);
}

::selection { background: var(--purple); color: var(--on-accent); }

/* ====== Kutipan harian di dashboard ====== */
.quote-card {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background-color: var(--surface-2);
  /* Grid mini khusus di dalam card ini - beda ukuran dari grid global body,
     biar keliatan sebagai elemen dekoratif yang disengaja. */
  background-image:
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  /* Warna teks pakai --purple (bukan --text-muted/--text-faint kayak sebelumnya) -
     itu yang bikin kutipan sebelumnya kelihatan "nyaru"/kurang kebaca di background
     gelap. Purple di sini kontrasnya jauh lebih jelas di kedua tema. */
  color: var(--purple);
  font-weight: 500;
}
html[data-theme="light"] .quote-card { background-color: var(--surface); }

/* ====== Tombol "Kembali" - dulu didefinisikan ulang di 6 halaman beda-beda
   (login, order, payment, payment-success, terms, refund) dengan CSS yang mirip
   tapi gak 100% identik. Sekarang satu definisi global dipakai semua halaman,
   biar konsisten. margin-bottom eksplisit + align-self:flex-start mastiin tombol
   ini SELALU jadi elemen terpisah yang berdiri sendiri DI ATAS card konten
   berikutnya, dengan jarak yang jelas - gak menempel/tertumpuk visual sama
   elemen di bawahnya (kartu pembayaran, dst). */
.back-link, .back-link-pay {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 13px; color: var(--text-muted); text-decoration: none; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.back-link:hover, .back-link-pay:hover { color: var(--text); border-color: var(--border-strong); }

.mono {
  font-family: 'Space Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.brand {
  font-family: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 26px;
  line-height: 1;
  /* Sebelumnya pakai text-shadow offset pink ("efek sticker/glitch nempel") -
     ternyata di HP kebanyakan orang itu kebaca kayak teks numpuk/berantakan,
     bukan gaya - bukan "professional". Diganti warna solid + bold aja, tetap
     tegas ala neobrutalism tapi bersih, gak ada elemen dobel/offset. */
  color: var(--purple);
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

svg.icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-xs svg.icon { width: 12px; height: 12px; }

/* ====== Buttons ====== */
/* ====== Buttons - neobrutalism: border tebal + shadow keras offset yang
   "collapse" pas ditekan (simulasi tombol fisik ke-pencet), bukan cuma efek
   brightness/scale halus kayak sebelumnya. ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow: none;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  /* Sebelumnya semua tombol utama (Login, Order, Simpan, dst) pakai --purple,
     jadi kesannya pink/magenta dominan di SELURUH situs. Sekarang purple
     dikhususkan buat brand/logo doang - tombol aksi utama pakai indigo, kesan
     "trust & action" yang lebih netral dan gak norak dipakai berulang-ulang. */
  background: var(--indigo);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--glow-indigo);
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 30px rgba(111, 123, 255, 0.5); }
.btn-green {
  background: var(--green);
  border-color: transparent;
  color: #04170c;
  box-shadow: var(--glow-green);
}
.btn-red {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn-red:hover { background: var(--red-soft); box-shadow: var(--glow-red); }
.btn-ghost {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }
.btn-wa { background: #1fae4f; border-color: transparent; color: white; box-shadow: 0 0 20px rgba(31, 174, 79, 0.35); }
.btn-tg { background: #229ed9; border-color: transparent; color: white; box-shadow: 0 0 20px rgba(34, 158, 217, 0.35); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.btn-icon {
  width: 38px; height: 38px; padding: 0;
  border-radius: 12px;
}

/* ====== Cards & surfaces - dark neon-glow, bukan neobrutalism lagi ====== */
.card {
  background: var(--surface);
  /* Border tipis translucent (bukan tebal solid) - ciri khas gaya baru: kartu
     kaca gelap yang nyala lewat warna aksen di dalamnya, bukan garis tebal. */
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  contain: layout style paint;
}

input, select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  border-color: transparent;
}
label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-owner, .badge-developer {
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold);
}
.badge-owner .icon, .badge-developer .icon {
  width: 12px; height: 12px; flex-shrink: 0;
}
.badge-admin { background: var(--rose-soft); color: var(--rose); border: 1px solid var(--rose); }
.badge-partner { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); }
.badge-reseller { background: var(--emerald-soft); color: var(--emerald); border: 1px solid var(--emerald); }
.badge-full_update { background: var(--indigo-soft); color: var(--indigo); border: 1px solid var(--indigo); }
.badge-locked { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }

/* ====== Chip komponen (dipakai di banyak halaman: dashboard, tools, dll) ====== */
.paired-chip { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.paired-chip svg.icon { width: 11px; height: 11px; }
.paired-chip.yes { background: var(--green-soft); color: var(--green); }
.paired-chip.no { background: var(--surface-3); color: var(--text-muted); }
.paired-chip.pending { background: var(--gold-soft); color: var(--gold); }
.platform-chip { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-strong); white-space: nowrap; }
.platform-chip.whatsapp { background: var(--green-soft); color: var(--green); }
.platform-chip.telegram { background: var(--purple-soft); color: var(--purple); }

/* ====== Komponen form/list yang dipakai di banyak halaman (dashboard & tools) ====== */
.field { margin-bottom: 16px; }
.add-form { display: flex; gap: 10px; }
.add-form select { flex: 0 0 190px; }
.add-form input { flex: 1; }
@media (max-width: 560px) { .add-form { flex-direction: column; } .add-form select { flex: 1; } }
.num-cell { display: flex; align-items: center; gap: 6px; }
.search-wrap { position: relative; max-width: 260px; flex: 1; min-width: 180px; }
.search-wrap svg.icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.search-wrap input { padding-left: 36px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; padding: 7px; color: var(--text-faint); border-radius: 6px;
}
.pw-toggle:hover { color: var(--text); }
.new-badge {
  display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--red); color: #fff; padding: 2px 6px; border-radius: 999px; margin-left: 7px; vertical-align: middle;
}
.import-csv-box {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); margin-bottom: 12px; flex-wrap: wrap;
}
.import-csv-box .ic-wrap {
  width: 36px; height: 36px; border-radius: 9px; background: var(--purple-soft); color: var(--purple);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ====== Step indicator (order -> payment -> success) ====== */
.step-indicator { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.step-indicator .step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.step-indicator .dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
}
.step-indicator .step.active .dot { background: var(--purple); color: var(--on-accent); }
.step-indicator .step.done .dot { background: var(--green); color: #04170c; }
.step-indicator .lb { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.step-indicator .step.active .lb { color: var(--text); font-weight: 700; }
.step-indicator .step-line { flex: 1; height: 2px; background: var(--border-strong); margin-bottom: 16px; }

/* ====== Navbar landing-style (dipakai di index.html & plans.html) ====== */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--nav-bg-translucent);
  border-bottom: 1px solid var(--border);
}
.lp-nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lp-nav-actions { display: flex; gap: 10px; align-items: center; }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-avatar { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; border: 1.5px solid var(--border-strong); flex-shrink: 0; }
@media (max-width: 480px) {
  .brand-avatar { width: 30px; height: 30px; border-radius: 8px; }
}

/* ====== Toggle switch generik (dipakai di setting Mode Kontras Tinggi, dll) ====== */
.switch-toggle {
  width: 46px; height: 26px; border-radius: 999px; background: var(--surface-2);
  border: 1.5px solid var(--border-strong); position: relative; cursor: pointer;
  flex-shrink: 0; padding: 0; transition: background 0.2s ease;
}
.switch-toggle .switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-faint); transition: transform 0.2s ease, background 0.2s ease;
}
.switch-toggle.on { background: var(--purple-soft); border-color: var(--purple); }
.switch-toggle.on .switch-knob { transform: translateX(20px); background: var(--purple); }
/* ====== Tombol ikon navbar (dipakai bareng navbar landing & app - toggle tema, dll) ====== */
.app-nav-btn {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: transparent; border: none; text-decoration: none;
  position: relative; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.app-nav-btn:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 480px) {
  .lp-nav-actions .app-nav-btn { width: 34px; height: 34px; }
}
.lp-nav-links { display: flex; gap: 26px; align-items: center; flex: 1; justify-content: center; }
.lp-nav-links a { font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.lp-nav-links a:hover { color: var(--text); }
.lp-nav-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: 8px; width: 38px; height: 34px; color: var(--text); align-items: center; justify-content: center; flex-shrink: 0; }
.lp-nav-links-mobile-only { display: none; }
.nav-status-pill {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.nav-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); flex-shrink: 0; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); vertical-align: middle; margin-right: 2px; }
.lp-nav-mobile-only { display: none; }
section[id] { scroll-margin-top: 74px; }
/* Mode hemat GPU: pattern grid di navbar dimatiin, sisain warna solid aja
   biar sticky nav gak nge-rasterize gradient tambahan tiap frame scroll. */
@media (max-width: 860px) {
  .lp-nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; gap: 14px; align-items: flex-start; z-index: 60; }
  .lp-nav-links.open { display: flex; }
  .lp-nav-mobile-only { display: block; width: 100%; padding-top: 10px; border-top: 1px solid var(--border); font-weight: 700; }
  .lp-nav-desktop-only { display: none; }
  .lp-nav-toggle { display: inline-flex; }
  .lp-nav-inner { position: relative; }
  /* Login & Order Akses SEBELUMNYA cuma nempel kecil di samping ikon hamburger,
     terpisah dari isi menu dropdown-nya sendiri - sekarang dipindah jadi bagian
     utuh dari menu dropdown, biar pas dibuka lengkap satu menu (bukan setengah
     di dropdown, setengah nempel di luar). */
  .lp-nav-links-mobile-only {
    display: block; width: 100%; text-align: center; padding: 10px 14px;
    border-radius: 10px; font-weight: 700; text-decoration: none;
    background: var(--surface-2); color: var(--text); margin-top: 4px;
  }
  .lp-nav-links-mobile-only.lp-nav-links-cta {
    background: var(--purple); color: var(--on-accent); margin-top: 8px;
  }
}
@media (max-width: 400px) {
  .lp-nav-actions { gap: 6px; }
  .lp-nav-actions a.btn-sm { padding: 7px 8px; font-size: 11.5px; }
  /* Di layar sempit banget, label teks pill disembunyiin, sisain dot doang -
     biar gak numbrukan sama tombol tema + hamburger di sebelahnya. */
  .nav-status-pill { padding: 8px; }
  .nav-status-pill-label { display: none; }
}

/* ====== Toast ====== */
.toast-wrap {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; left: 18px; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px 13px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); animation: slideUp 0.25s ease;
  max-width: 420px; width: 100%; pointer-events: auto;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.toast.success { border-left: 3px solid var(--green); }
.toast.success::before { background: var(--green); }
.toast.error { border-left: 3px solid var(--red); }
.toast.error::before { background: var(--red); }
.toast.info { border-left: 3px solid var(--purple); }
.toast.info::before { background: var(--purple); }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  padding: 2px 4px; font-size: 15px; line-height: 1; flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }
.toast.leaving { animation: slideDown 0.2s ease forwards; }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(16px); opacity: 0; } }

/* ====== Modal ====== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(3, 5, 10, 0.7);
  display: flex; align-items: center; justify-content: center; z-index: 998; padding: 20px;
}
.modal {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 26px; max-width: 420px; width: 100%; box-shadow: var(--shadow);
}
.modal h3 { margin-top: 0; font-size: 17px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ====== Skeleton / spinner ====== */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ====== Mode hemat GPU (.gpu-lite) ======
   Dinyalain otomatis lewat common.js kalau device low-end / baterai lemah / prefers-reduced-motion.
   Matiin semua efek yang mahal buat di-rasterize ulang tiap frame (glow border, gradient card,
   box-shadow, transition, backdrop), sisain warna solid flat biar tetap enak dilihat tapi ringan. */
.gpu-lite * { transition: none !important; animation: none !important; }
.gpu-lite .corner-frame::before,
.gpu-lite .corner-frame::after { display: none; }
.gpu-lite .card { box-shadow: none !important; background-image: none !important; }
.gpu-lite .stat-card.blue,
.gpu-lite .stat-card.green,
.gpu-lite .stat-card.gold { background: var(--surface) !important; }
.gpu-lite .skeleton { animation: none !important; background: var(--surface-2) !important; }
.gpu-lite .qa-card { background-image: none !important; box-shadow: none !important; }
.gpu-lite .qa-green { background: var(--violet-strong) !important; }
.gpu-lite .qa-blue  { background: var(--blue) !important; }
.gpu-lite .qa-gold  { background: var(--gold) !important; }
.gpu-lite .tool-card:hover { border-color: var(--border) !important; }

/* Kalau cookie banner lagi muncul, geser tombol mengambang (Chat AI, WA) ke atas
   dikit biar gak numpuk sama banner-nya. */

/* ====== Cookie notice bar - satu elemen doang, statis, gak masalah GPU sama sekali ====== */
.cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between; box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.cookie-notice span { font-size: 12.5px; color: var(--text-muted); flex: 1; min-width: 200px; }
@media (max-width: 480px) { .cookie-notice { flex-direction: column; align-items: stretch; text-align: center; } }

/* Bug fix: cookie notice (z-index 70) sebelumnya numpuk PAS di atas .app-bottom-nav
   (z-index 55) - dua-duanya fixed bottom:0, jadi pas cookie notice belum di-dismiss,
   navbar bawah Dashboard/Tools ketutup total (gak keliatan sama sekali). class
   "has-bottom-nav" ditambahin ke <body> dari initCookieNotice() di common.js kalau
   halaman punya .app-bottom-nav, geser cookie notice ke atas biar gak numpuk. */
body.has-bottom-nav .cookie-notice { bottom: 66px; }
@media (max-width: 480px) { body.has-bottom-nav .cookie-notice { bottom: 96px; } }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ====== Animasi masuk halus - sekali pas halaman dibuka, bukan tiap re-render ======
   Dipasang di elemen pembungkus utama (bukan di .card yang dipakai di ratusan tempat
   dan sering di-render ulang dinamis, misal daftar Tools) - biar terasa "hidup" pas
   pertama buka halaman tanpa bikin flicker tiap kali ada interaksi/filter/pencarian. */
.container { animation: pageFadeIn 0.35s ease both; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.gpu-lite .container { animation: none; }
.view-panel { animation: pageFadeIn 0.3s ease both; }
.gpu-lite .view-panel { animation: none; }

@media (max-width: 640px) { .container { padding: 0 14px; } }

/* ====== Table (shared) - scrolls horizontally INSIDE its own box ====== */
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* touch-action eksplisit - beberapa browser Android kadang "ngerebut" gesture
     swipe horizontal di dekat tepi layar buat navigasi back/forward, bikin tabel
     kerasa "stuck"/gak bisa digeser padahal overflow-x udah bener. Ini kasih tau
     browser: elemen ini yang megang pan horizontal & vertical-nya sendiri. */
  touch-action: pan-x pan-y;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.table-scroll table { min-width: 560px; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: var(--surface-2); }
.table-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); }
th {
  text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 14px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap; position: sticky; top: 0;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.wrap { white-space: normal; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.empty-state svg.icon { width: 34px; height: 34px; margin-bottom: 10px; color: var(--text-faint); }

.icon-copy-btn {
  background: transparent; border: none; color: var(--text-faint);
  padding: 4px; border-radius: 6px; display: inline-flex; align-items: center;
}
.icon-copy-btn:hover { color: var(--text); background: var(--surface-3); }

/* ======================================================================
   MODE HEMAT GPU ("gpu-lite")
   Class ".gpu-lite" ditempel otomatis ke <html> lewat js/common.js kalau
   device kedetek lemah (RAM kecil / CPU core dikit / user pilih hemat baterai).
   Semua efek yang butuh rasterize ulang tiap frame scroll (blur, glow,
   gradient di atas gradient, box-shadow menumpuk, sticky header) dimatikan
   atau disederhanain jadi warna solid di mode ini biar GPU gak keteteran
   dan gak muncul noise/corrupt pas scroll cepat.
   ====================================================================== */
.gpu-lite * {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.gpu-lite .brand {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--purple-strong);
}
.gpu-lite .btn-primary {
  background: var(--purple);
}
.gpu-lite th {
  position: static;
}
.gpu-lite .lp-nav {
  position: static;
}
.gpu-lite .skeleton {
  animation: none !important;
  background: var(--surface-3);
}
.gpu-lite .nav-status-pill .dot {
  box-shadow: none;
}

/* ====== Nav pill component (dipakai bareng di navbar Dashboard/Tools/Profile) ======
   Dikonsolidasi ke sini biar 3 halaman itu otomatis konsisten & gak drift lagi -
   sebelumnya masing-masing nulis versi sendiri, ada 1 yang ketinggalan breakpoint mobile. */
.nav-pill {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.nav-pill.brand-pill { padding: 8px 16px; flex-shrink: 1; min-width: 0; overflow: hidden; font-weight: 700; }
.nav-right-pills { display: flex; gap: 8px; flex-shrink: 0; }
.nav-pill.action-pill {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: var(--surface); flex-shrink: 0; text-decoration: none;
}
.nav-pill.action-pill:hover { color: var(--text); }
@media (max-width: 380px) {
  .nav-pill.brand-pill .brand { font-size: 20px; }
  .nav-pill.action-pill { width: 38px; height: 38px; }
}

/* ====== Aksesibilitas: skip-to-content link ======
   Ketutup visual normal (di luar layar), tapi muncul begitu di-fokus pakai keyboard
   (Tab pertama kali) - biar pengguna keyboard/screen-reader bisa lompat langsung ke
   konten utama tanpa harus Tab satu-satu ngelewatin seluruh navbar dulu. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--purple); color: #fff; padding: 12px 20px;
  border: none; border-radius: 0 0 12px 0; box-shadow: var(--glow-purple);
  font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ====== Aksesibilitas: focus outline global ======
   Sebelumnya cuma .btn yang punya focus-visible jelas - elemen interaktif lain
   (link, input, select, kartu yang bisa diklik) gak kelihatan fokusnya sama sekali
   pas navigasi keyboard. Sengaja pakai :focus-visible (bukan :focus) biar cuma
   muncul pas navigasi keyboard, gak ganggu visual pas diklik mouse/tap. */
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--purple); outline-offset: 2px; border-radius: 4px;
}

/* ====== Noise/grain texture tipis ======
   Nambah kesan "gritty"/tekstur khas referensi desain, bukan flat polos. Dipasang
   sebagai overlay fixed super tipis (opacity 0.035) pakai SVG fractal noise inline
   (gak ada request network tambahan). Otomatis mati total di mode hemat GPU
   (.gpu-lite) lewat aturan background-image:none yang udah ada di baris atas file ini. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.gpu-lite body::after { display: none; }

/* ====== Glitch hover buat brand text ======
   Efek "RGB split" sekilas (0.35s, sekali jalan) pas hover di teks brand "Havoc" -
   nuansa cyberpunk/chaos yang sejalan sama tema situs, cuma di elemen brand aja
   (dipakai selektif, BUKAN default semua judul, biar gak norak/berlebihan). */
@keyframes glitchSplit {
  0%, 100% { text-shadow: none; transform: translate(0, 0); }
  20% { text-shadow: -2px 0 var(--purple), 2px 0 var(--blue); transform: translate(-1px, 0); }
  40% { text-shadow: 2px 0 var(--purple), -2px 0 var(--blue); transform: translate(1px, 0); }
  60% { text-shadow: -1px 0 var(--purple), 1px 0 var(--blue); transform: translate(0, 0); }
  80% { text-shadow: none; transform: translate(0, 0); }
}
/* Efek glitch pas hover di logo DICABUT - kata "Havoc" sekarang dibikin bersih &
   profesional secara konsisten, jadi gak masuk akal kalau disentuh malah pecah
   lagi jadi dobel warna. Keyframe-nya dibiarin nganggur (gak dipanggil) daripada
   dihapus total, in case ada tempat lain yang masih perlu referensinya. */
.brand-glitch:hover { animation: none; }

/* ================================================================
   ====== SISTEM ANIMASI NEOBRUTALISM (dipakai lintas halaman) ======
   Semua animasi di sini otomatis:
   - mati total di .gpu-lite (mode hemat GPU/baterai, aturan global di baris atas
     file ini: `.gpu-lite * { transition:none!important; animation:none!important; }`)
   - dimatiin/dikurangi drastis buat prefers-reduced-motion (aksesibilitas)
   Tujuannya "berani" & "kece" tapi tetap gak norak - dipakai selektif per elemen,
   bukan nge-spam semua hal sekaligus gerak bareng.
   ================================================================ */

/* ====== Hover tilt/shift buat card & tombol ======
   Kartu "kenyal" dikit + shadow-nya "ngangkat" pas di-hover, bukan cuma ganti warna.
   Dipasang lewat class .neo-hover (opt-in per elemen, bukan global .card, biar gak
   ganggu card yang emang harus diem kayak tabel data). */
/* ====== Hover lift buat card & tombol ======
   Kartu "ngangkat" dikit + nyala pas di-hover, bukan cuma ganti warna. Dipasang
   lewat class .neo-hover (opt-in per elemen, bukan global .card, biar gak ganggu
   card yang emang harus diem kayak tabel data). */
.neo-hover {
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.neo-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), var(--glow-purple);
  border-color: var(--border-strong);
}
.neo-hover:active { transform: translateY(0); }

/* ====== Sticker idle bob ======
   Elemen dekoratif (neo-tag, neo-x, dll) ngambang naik-turun pelan terus-menerus -
   kesan "stiker nempel" hidup, bukan gambar statis. Tiap elemen delay-nya beda
   (nth-child) biar gak gerak barengan kayak robot. */
@keyframes stickerBob {
  0%, 100% { transform: translateY(0) rotate(var(--bob-rot, 0deg)); }
  50% { transform: translateY(-5px) rotate(var(--bob-rot, 0deg)); }
}
.neo-bob { animation: stickerBob 3.2s ease-in-out infinite; will-change: transform; }
.neo-bob:nth-child(2n) { animation-duration: 3.8s; animation-delay: 0.4s; }
.neo-bob:nth-child(3n) { animation-duration: 2.8s; animation-delay: 0.8s; }

/* ====== Marquee/ticker band ======
   Baris teks berjalan horizontal terus-menerus, khas neobrutalism modern. Dua
   salinan konten ditaro bersebelahan (.marquee-track diduplikat di JS/HTML) biar
   loop-nya mulus tanpa "patah" pas balik ke awal. */
.marquee-wrap {
  overflow: hidden; white-space: nowrap; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: var(--surface-2); padding: 10px 0;
}
.marquee-track {
  display: inline-flex; gap: 32px; animation: marqueeScroll 22s linear infinite;
}
.marquee-track span {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ====== Scroll-reveal ======
   Elemen mulai transparan+geser sedikit ke bawah, lalu "masuk" (fade+naik) begitu
   kena viewport pas scroll. Class .reveal ditaro di HTML, .is-visible ditambahin
   JS (IntersectionObserver) pas elemen kelihatan - lihat initScrollReveal() di
   common.js. Kalau JS gagal load, elemen tetap kelihatan normal (fallback aman -
   default opacity 1, JS yang nge-set opacity 0 duluan baru animasiin masuk). */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ====== Glitch-on-scroll buat judul section ======
   Efek RGB-split sekilas pas judul section pertama kali masuk viewport - dipakai
   selektif (.glitch-in), BUKAN default semua heading. */
.glitch-in.is-visible { animation: glitchSplit 0.4s linear 1; }

/* ====== Cursor-reactive tag (desktop only) ======
   Tag/badge dekoratif miring dikit ngikutin posisi mouse relatif ke elemennya -
   diaktifin lewat JS (initCursorTilt() di common.js), CSS-nya cuma nyiapin
   transition halusnya. Otomatis gak aktif di device sentuh (dicek di JS). */
.cursor-tilt { transition: transform 0.12s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .neo-bob { animation: none; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .glitch-in.is-visible { animation: none; }
  .neo-hover { transition: none; }
  .neo-hover:hover { transform: none; }
}

/* ====== Entrance animation buat card utama (login/order/payment/dll) ======
   Beda dari .reveal (scroll-triggered) - ini jalan SEKALI pas halaman pertama
   dimuat (gak nunggu scroll, karena card-card ini biasanya udah kelihatan penuh
   di viewport awal). Sengaja cuma fade+scale halus, BUKAN bounce/tilt, biar gak
   ganggu kepercayaan user pas ngisi form penting (password, pembayaran, dst). */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.card-enter { animation: cardEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .card-enter { animation: none; }
}

/* ====== Mode Kontras Tinggi (opsional, aksesibilitas) ======
   Terpisah dari dark/light theme - bisa dipakai bareng tema manapun. Menegaskan
   border, teks, dan garis fokus biar lebih gampang dibedain buat yang low-vision.
   Aktif lewat toggle di Profile > Preferensi Tampilan, disimpan di localStorage. */
html.high-contrast {
  --text-muted: var(--text);
  --text-faint: var(--text);
  --border: var(--border-strong);
}
html.high-contrast .card, html.high-contrast .btn, html.high-contrast input,
html.high-contrast select, html.high-contrast textarea {
  border-width: 2.5px !important;
}
html.high-contrast a:focus-visible, html.high-contrast input:focus-visible,
html.high-contrast select:focus-visible, html.high-contrast textarea:focus-visible,
html.high-contrast button:focus-visible, html.high-contrast [tabindex]:focus-visible {
  outline-width: 4px !important;
}
html.high-contrast body::after { display: none; } /* noise texture dimatiin, ganggu kontras */

/* ====== Broadcast banner (dashboard) - dipindah ke sini (dari style lokal
   dashboard.html) biar bisa dipakai bareng buat preview broadcast di Tools. ====== */
.broadcast-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px;
  background: var(--blue-soft); border: 1px solid var(--blue); border-radius: 12px; color: var(--text);
  font-size: 13px; line-height: 1.6;
}
.broadcast-banner svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }

/* ====== Polling Ya/Tidak yang bisa nempel di broadcast (dashboard + preview Tools) ====== */
.poll-block {
  margin: -6px 0 14px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px;
}
.poll-question { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; margin-bottom: 10px; }
.poll-question svg { color: var(--purple); flex-shrink: 0; }
.poll-buttons { display: flex; gap: 10px; }
.poll-buttons .btn { flex: 1; }
.poll-answered-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); }
.poll-answered-note svg { flex-shrink: 0; }