# CSF-CyberPunk.css

> **Cyberpunk Design System** by Abdur Rozak, S.Kom.
> _Dark HUD, tajam, padat informasi, kontras tinggi — terinspirasi panel kontrol terminal._

[![Version](https://img.shields.io/badge/version-2.0-00f0ff.svg?style=flat-square)](#)
[![License](https://img.shields.io/badge/license-MIT-fcee0a.svg?style=flat-square)](#license)
[![CSS](https://img.shields.io/badge/pure_CSS-no_deps-00ff9f.svg?style=flat-square)](#)
[![Layers](https://img.shields.io/badge/@layer-cascade-ff2a6d.svg?style=flat-square)](#arsitektur-cascade-layers)

---

## Daftar Isi

1. [Pengenalan](#pengenalan)
2. [Filosofi Desain](#filosofi-desain)
3. [Instalasi](#instalasi)
4. [Quick Start](#quick-start)
5. [Arsitektur Cascade Layers](#arsitektur-cascade-layers)
6. [Design Tokens](#design-tokens)
7. [Tipografi](#tipografi)
8. [Palet Warna](#palet-warna)
9. [Katalog Komponen](#katalog-komponen)
10. [Tema & Variasi](#tema--variasi)
11. [Aksesibilitas](#aksesibilitas)
12. [Performa](#performa)
13. [Browser Support](#browser-support)
14. [JavaScript Snippets](#javascript-snippets)
15. [Migrasi dari v1.0](#migrasi-dari-v10)
16. [Best Practices](#best-practices)
17. [FAQ](#faq)
18. [Changelog](#changelog)
19. [License](#license)

---

## Pengenalan

**ARRQ-CyberPunk.css** adalah design system CSS murni untuk membangun antarmuka bergaya cyberpunk HUD. Dirancang oleh Abdur Rozak (ARRQ) untuk proyek-proyek personal di `abdurrozak.my.id`, kini dirilis sebagai UI Kit publik.

### Statistik

| Metrik | Nilai |
|---|---|
| Versi | 2.0 Professional |
| Total baris | 4.189 |
| Ukuran file | 126 KB (gzip ~28 KB) |
| Section terorganisir | 43 |
| Class selectors | ~650 |
| CSS custom properties | 82 |
| `@keyframes` | 22 |
| `@media` query | 12 |
| `!important` | 19 (hanya print + a11y) |
| Theme presets | 15 |
| Dependency eksternal | Google Fonts + Font Awesome 6.5.2 |

### Untuk Siapa?

- Developer yang bangun dashboard/admin panel bertema cyberpunk
- Halaman landing produk tech/gaming/security
- Portofolio personal yang butuh visual "wow"
- Aplikasi internal yang ingin tampil beda dari Bootstrap/Tailwind

---

## Filosofi Desain

### Yang DIIKUTI

- **Dark HUD aesthetic** — latar void gelap, panel modular, scanlines dekoratif
- **Sudut tajam** — `border-radius: 0` di seluruh komponen (kecuali dot indikator)
- **Chamfered corners** — potongan diagonal via `clip-path: polygon()`, bukan rounded
- **Kontras tinggi** — teks terang pada latar gelap, aksen neon menyala
- **Padat informasi** — komponen compact, font monospace untuk data teknis
- **Terminal-inspired** — prompt `> `, kursor berkedip, bracket HUD, glitch effects

### Yang DILARANG

- Bootstrap rounded cards
- Material Design soft shadow
- SaaS pastel gradient
- `border-radius` besar / capsule / pill
- Emoji dalam UI (gunakan Font Awesome)
- `alert()` / `confirm()` / `prompt()` (gunakan toast)
- Font Inter / Roboto / system-ui sebagai font utama

---

## Instalasi

### Opsi 1: Download langsung

```bash
# Salin file ke project Anda
cp ARRQ-CyberPunk.css /path/to/project/css/
```

### Opsi 2: CDN (segera)

```html
<link rel="stylesheet" href="https://cdn.abdurrozak.my.id/arrq-cyberpunk/2.0/ARRQ-CyberPunk.css">
```

### Opsi 3: npm (segera)

```bash
npm install arrq-cyberpunk
```

```js
import 'arrq-cyberpunk/ARRQ-CyberPunk.css';
```

### Dependensi Wajib

```html
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Font Awesome 6.5.2 (untuk ikon) -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
```

> Font Google (Rajdhani + JetBrains Mono + Share Tech Mono) sudah di-`@import` di dalam CSS dengan `font-display: swap`.

---

## Quick Start

```html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ARRQ Cyberpunk Demo</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link rel="stylesheet" href="ARRQ-CyberPunk.css">
</head>
<body class="cp-crt-on">

  <!-- Latar dekoratif -->
  <div class="cp-scanlines"></div>
  <div class="cp-scanbeam"></div>

  <!-- Navbar wajib -->
  <header class="cp-navbar" id="cp-navbar">
    <div class="cp-navbar__inner">
      <a class="cp-navbar__brand" href="/">
        <span class="cp-navbar__brand-logo"><i class="fa-solid fa-terminal"></i></span>
        <span class="cp-navbar__brand-name">ABDUR<span class="cp-navbar__brand-accent">ROZAK</span></span>
      </a>
      <nav class="cp-navbar__menu">
        <a class="cp-navbar__link is-active" href="/">HOME</a>
        <a class="cp-navbar__link" href="/wiki/">WIKI</a>
        <a class="cp-navbar__link" href="/forum/">FORUM</a>
      </nav>
      <div class="cp-navbar__right">
        <span class="cp-navbar__status"><span class="cp-dot"></span> ONLINE</span>
        <button class="cp-navbar__hamburger" id="cp-navbar-toggle"
                aria-label="Toggle menu" aria-expanded="false">
          <i class="fa-solid fa-bars"></i>
        </button>
      </div>
    </div>
    <nav class="cp-navbar__panel" id="cp-navbar-panel">
      <a class="cp-navbar__panel-link is-active" href="/">
        <i class="fa-solid fa-house"></i><span>HOME</span>
      </a>
      <a class="cp-navbar__panel-link" href="/wiki/">
        <i class="fa-solid fa-book"></i><span>WIKI</span>
      </a>
    </nav>
  </header>

  <!-- Konten utama -->
  <main class="cp-container cp-section">
    <h1 class="cp-display cp-h1 cp-text-center">
      Selamat Datang di <span class="cp-display--neon">ARRQ</span>
    </h1>

    <div class="cp-stat-grid">
      <div class="cp-stat">
        <span class="cp-stat__label">USERS</span>
        <span class="cp-stat__value">1,247</span>
        <span class="cp-stat__sub">+12% bulan ini</span>
      </div>
      <div class="cp-stat cp-stat--neon">
        <span class="cp-stat__label">TRAFFIC</span>
        <span class="cp-stat__value">88.4K</span>
        <span class="cp-stat__sub">vs last week</span>
      </div>
    </div>

    <div class="cp-panel cp-panel--bracketed">
      <div class="cp-panel__head">
        <h2 class="cp-panel__title">System Status</h2>
      </div>
      <p>Panel dengan bracket HUD di empat sudut.</p>
      <button class="cp-btn cp-btn--solid">MULAI</button>
    </div>
  </main>

  <!-- Social grid wajib -->
  <div class="cp-container">
    <div class="cp-social-grid">
      <a class="cp-social-btn cp-social-btn--github"
         href="https://github.com/abdurrozakskom"
         target="_blank" rel="noopener">
        <i class="fa-brands fa-github"></i>
        <span class="cp-social-btn__label">GitHub</span>
      </a>
      <a class="cp-social-btn cp-social-btn--whatsapp"
         href="https://wa.me/6289675223353"
         target="_blank" rel="noopener">
        <i class="fa-brands fa-whatsapp"></i>
        <span class="cp-social-btn__label">WhatsApp</span>
      </a>
    </div>
  </div>

  <!-- Footer wajib -->
  <footer class="cp-site-footer">
    <p class="cp-site-footer__credit">
      Dibuat dengan <i class="fa-solid fa-heart" aria-hidden="true"></i>
      oleh <b>Abdur Rozak, S.Kom.</b> -
      <a class="cp-site-footer__domain" href="https://abdurrozak.my.id/">abdurrozak.my.id</a>
    </p>
  </footer>

  <script>
    // Navbar toggle
    document.getElementById('cp-navbar-toggle')?.addEventListener('click', () => {
      const n = document.getElementById('cp-navbar');
      const isOpen = n.classList.toggle('is-open');
      document.getElementById('cp-navbar-toggle')
        .setAttribute('aria-expanded', isOpen);
    });
  </script>
</body>
</html>
```

---

## Arsitektur Cascade Layers

ARRQ-CyberPunk v2.0 menggunakan **CSS Cascade Layers** (`@layer`) untuk mengelola spesifitas tanpa `!important`.

```css
@layer reset, tokens, base, effects, typography,
       components, layout, utilities, themes, overrides;
```

Urutan layer menentukan prioritas — **layer belakang menang**.

| Layer | Isi | Prioritas |
|---|---|---|
| `reset` | Box-sizing, margin reset, scrollbar | 1 (terendah) |
| `tokens` | `:root` CSS variables | 2 |
| `base` | Body, headings, focus-visible | 3 |
| `effects` | Scanlines, CRT, noise, rain | 4 |
| `typography` | Display, neon, glitch, terminal | 5 |
| `components` | Button, panel, card, form, dll | 6 |
| `layout` | App shell, page header, footer | 7 |
| `utilities` | Display, flex, gap, spacing | 8 |
| `themes` | Dark/light/presets | 9 |
| `overrides` | Z-index mappings | 10 (tertinggi) |

**Manfaat:**
- Hapus 366 `!important` dari v1.0 → 19 saja (legitimate untuk print + a11y)
- Override komponen tinggal pakai utility tanpa takut spesifitas
- Urutan baca jelas — maintainer baru langsung paham

---

## Design Tokens

Semua nilai desain terpusat di `:root` (layer `tokens`).

### Warna Dasar

```css
:root {
  /* Void & panels */
  --cp-void:    #06080a;   /* latar paling gelap */
  --cp-panel:   #0b1015;   /* latar panel */
  --cp-panel2:  #0e151c;   /* latar panel alternatif */
  --cp-line:    #1b2530;   /* border tipis */
  --cp-line2:   #2a3b4d;   /* border aktif (AA contrast) */

  /* Text */
  --cp-txt:     #d4dde6;   /* teks utama */
  --cp-dim:     #7a8c9e;   /* teks redup (WCAG AA fix) */
  --cp-dim2:    #95a7b8;   /* teks redup terang */
}
```

### Warna Aksen

```css
:root {
  --cp-cyan:    #00f0ff;   /* aksen HUD utama */
  --cp-neon:    #fcee0a;   /* highlight CTA */
  --cp-mag:     #ff2a6d;   /* danger */
  --cp-green:   #00ff9f;   /* sukses / online */
  --cp-amber:   #ff9f1c;   /* peringatan */
  --cp-purple:  #b18cff;   /* info / spesial */
}
```

### Token Transparan (alpha)

```css
--cp-cyan-a05:  rgba(0, 240, 255, .05);
--cp-cyan-a08:  rgba(0, 240, 255, .08);
--cp-cyan-a12:  rgba(0, 240, 255, .12);
--cp-cyan-a15:  rgba(0, 240, 255, .15);
--cp-cyan-a30:  rgba(0, 240, 255, .30);
/* ... sama untuk neon, mag, green, amber, purple */
```

> **Gunakan token ini, bukan hardcoded `rgba()`.** Memudahkan theming.

### Glow & Geometry

```css
--cp-glow-cyan:  0 0 8px var(--cp-cyan-a30), 0 0 24px rgba(0, 240, 255, .25);
--cp-glow-neon:  0 0 8px rgba(252, 238, 10, .55), 0 0 24px rgba(252, 238, 10, .25);
--cp-glow-mag:   0 0 8px rgba(255, 42, 109, .55), 0 0 24px rgba(255, 42, 109, .25);
--cp-glow-green: 0 0 8px rgba(0, 255, 159, .55), 0 0 24px rgba(0, 255, 159, .25);

--cp-notch: 10px;        /* ukuran chamfer standar */
--cp-notch-sm: 6px;
--cp-notch-lg: 14px;
--cp-radius: 0;          /* cyberpunk: always 0 */
```

### Transisi & Spacing

```css
--cp-ease: cubic-bezier(.2, .8, .2, 1);
--cp-ease-out: cubic-bezier(.16, 1, .3, 1);
--cp-dur:  .22s;
--cp-dur-fast: .15s;
--cp-dur-slow: .4s;

/* Spacing scale */
--cp-space-1: 4px;  --cp-space-2: 8px;
--cp-space-3: 12px; --cp-space-4: 16px;
--cp-space-5: 20px; --cp-space-6: 24px;
--cp-space-8: 32px; --cp-space-10: 40px;
--cp-space-12: 48px;
```

### Z-Index Hierarchy

```css
--z-base: 1;
--z-hover: 10;
--z-sticky: 100;
--z-dropdown: 1000;
--z-topbar: 1020;
--z-sidebar: 1030;
--z-overlay: 1030;
--z-modal: 1040;
--z-toast: 1050;
--z-tooltip: 1060;
--z-loading: 9999;
```

---

## Tipografi

| Token | Font | Penggunaan |
|---|---|---|
| `--cp-font-display` | Rajdhani | Heading, nav, button, label |
| `--cp-font-body` | JetBrains Mono | Body, angka, kode, nilai tabel |
| `--cp-font-mono` | Share Tech Mono | Terminal, glitch, readout |

### Skala Heading (fluid)

```css
.cp-h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.cp-h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.cp-h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
```

### Komponen Tipografi

- `.cp-display` — heading uppercase Rajdhani 700
- `.cp-display--cyan/neon/mag` — varian warna + glow
- `.cp-neon-text` — teks cyan dengan glow ganda
- `.cp-glitch` — RGB split (magenta + cyan offset)
- `.cp-terminal-text` — teks hijau + kursor `▊` berkedip
- `.cp-kicker` — label kecil dengan prefix `// `

---

## Palet Warna

### Default (Dark Void + Cyan/Neon)

| Token | Hex | Preview |
|---|---|---|
| `--cp-void` | `#06080a` | ⬛ |
| `--cp-panel` | `#0b1015` | 🟫 |
| `--cp-cyan` | `#00f0ff` | 🔵 |
| `--cp-neon` | `#fcee0a` | 🟡 |
| `--cp-mag` | `#ff2a6d` | 🟥 |
| `--cp-green` | `#00ff9f` | 🟩 |
| `--cp-amber` | `#ff9f1c` | 🟠 |
| `--cp-purple` | `#b18cff` | 🟪 |

### 15 Theme Presets

Aktifkan via `body[data-theme="..."]`:

```html
<body data-theme="matrix">
```

| Theme | `--cp-neon` | `--cp-cyan` |
|---|---|---|
| `amber` | `#ff9f1c` | `#fcee0a` |
| `matrix` | `#00ff9f` | `#b8ff45` |
| `copper` | `#ff9f72` | `#ffc4a1` |
| `neon-green` | `#b8ff00` | `#00ff9f` |
| `royal` | `#b18cff` | `#00f0ff` |
| `steel` | `#d7e5f2` | `#809db8` |
| `cherry` | `#ff2a6d` | `#ff91b5` |
| `azure` | `#00cfff` | `#7cecff` |
| `lime` | `#d7ff00` | `#00ff9f` |
| `rose-gold` | `#e8a5a5` | `#f0c7a8` |
| `deep-space` | `#8b9dff` | `#b18cff` |
| `honey` | `#fcee0a` | `#ff9f1c` |
| `indigo` | `#818cf8` | `#a5b4fc` |
| `desert` | `#e9c46a` | `#d4a373` |
| `rose` | `#ff7eb6` | `#ffb3d1` |

### Light Mode

Auto-aktif via `prefers-color-scheme: light`, atau manual via `.cp-light`:

```css
.cp-light {
  --cp-void:   #eef2f5;
  --cp-panel:  #ffffff;
  --cp-panel2: #f2f6f9;
  --cp-txt:    #1a232c;
  /* ... */
}
```

---

## Katalog Komponen

43 section terorganisir. Berikut ringkasan per kategori:

### Fondasi (Section 1-7)

| # | Section | Komponen Utama |
|---|---|---|
| 1 | Font Imports | Rajdhani, JetBrains Mono, Share Tech Mono |
| 2 | Layer Stack | `@layer` cascade |
| 3 | Reset | Box-sizing, scrollbar |
| 4 | Design Tokens | `:root` variables |
| 5 | Base & Body | Body, headings, focus |
| 6 | Background Effects | `.cp-grid-bg`, `.cp-scanlines`, `.cp-scanbeam`, `.cp-crt-vignette`, `.cp-noise`, `.cp-cyber-rain` |
| 7 | Typography | `.cp-display`, `.cp-glitch`, `.cp-terminal-text`, `.cp-kicker` |

### Komponen Inti (Section 8-14)

| # | Section | Komponen Utama |
|---|---|---|
| 8 | Buttons | `.cp-btn` + 8 varian (solid/ghost/neon/mag/green) + sizes |
| 9 | Badges & Chips | `.cp-badge`, `.cp-dot`, `.cp-chip` |
| 10 | Panels & Brackets | `.cp-panel`, `.cp-panel--bracketed`, `.cp-brackets` |
| 11 | Cards | `.cp-card` (chamfered), `.cp-holo` (holographic) |
| 12 | Stats & KPI | `.cp-stat`, `.cp-kpi`, `.cp-stat-grid` |
| 13 | Forms | `.cp-input`, `.cp-select`, `.cp-textarea`, `.cp-toggle`, `.cp-check`, `.cp-radio`, `.cp-slider` |
| 14 | Tables | `.cp-table`, `.cp-table-wrap`, `--striped`, `--compact` |

### Navigasi & Overlay (Section 15-22)

| # | Section | Komponen Utama |
|---|---|---|
| 15 | Topbar & Navbar | `.cp-topbar`, `.cp-statusbar` |
| 16 | Sidebar | `.cp-sidebar` |
| 17 | Tabs & Breadcrumbs | `.cp-tabs`, `.cp-tab`, `.cp-breadcrumbs` |
| 18 | Pagination | `.cp-pager` |
| 19 | Modal & Dialog | `.cp-modal-overlay`, `.cp-modal` |
| 20 | Toast & Alert | `.cp-toasts`, `.cp-toast`, `.cp-alert` |
| 21 | Tooltip & Popover | `.cp-tip`, `.cp-popover` |
| 22 | Dropdown & Menu | `.cp-dropdown`, `.cp-dropdown__menu` |

### Komponen Lanjutan (Section 23-30)

| # | Section | Komponen Utama |
|---|---|---|
| 23 | Progress & Loaders | `.cp-progress`, `.cp-spinner`, `.cp-loading-dots`, `.cp-boot` |
| 24 | Accordion | `.cp-accordion`, `.cp-accordion__head/panel` |
| 25 | Empty & Skeleton | `.cp-empty`, `.cp-skel` |
| 26 | Timeline | `.cp-timeline` |
| 27 | Tree View | `.cp-tree`, `.cp-tree__node` |
| 28 | Terminal Window | `.cp-terminal`, `.cp-terminal__head/body` |
| 29 | Radar & Holo ID | `.cp-radar` (dengan sweep), `.cp-id` (kartu hologram) |
| 30 | Image with HUD Scanner | `.cp-scan-img` |

### Layout System (Section 31-33)

| # | Section | Komponen Utama |
|---|---|---|
| 31 | App Shell Layout | `.cp-app`, `.cp-app__sidebar`, `.cp-app__topbar`, `.cp-app__content` |
| 32 | Page Header | `.cp-page-header`, `.cp-section-block` |
| 33 | Stat Grid & KPI Mega | `.cp-page-grid`, `.cp-fluid-grid`, `.cp-col-*` |

### Utilities & Tema (Section 34-40)

| # | Section | Komponen Utama |
|---|---|---|
| 34 | Utilities | Display, flex, gap, margin, padding, text, position |
| 35 | Themes | Dark default, light auto, 15 presets |
| 36 | Print Styles | Hide decorative, force black-on-white |
| 37 | Accessibility | `prefers-reduced-motion`, `prefers-contrast`, focus |
| 38 | Responsive | Breakpoints 1023px, 640px, 380px |
| 39 | Performance | `content-visibility`, conditional backdrop-filter |
| 40 | Z-Index System | Token-based hierarchy |

### Branding Wajib (Section 41-43)

| # | Section | Komponen Utama |
|---|---|---|
| 41 | Social Media Grid | `.cp-social-grid`, `.cp-social-btn` (12 link) |
| 42 | Site Footer | `.cp-site-footer` ("Dibuat dengan Love") |
| 43 | Navbar | `.cp-navbar` (brand + 10 menu + hamburger) |

---

## Tema & Variasi

### Default Dark

```html
<body>
<!-- atau -->
<body class="cp-crt-on">  <!-- aktifkan CRT overlay global -->
```

### Light Mode (auto)

```html
<!-- Aktif otomatis saat OS user light mode -->
<body>
```

### Light Mode (manual)

```html
<body class="cp-light">
```

### Theme Preset

```html
<body data-theme="matrix">
<body data-theme="cherry">
<body data-theme="rose-gold">
```

### Kombinasi

```html
<body class="cp-crt-on" data-theme="matrix">
```

> Theme preset hanya menggeser `--cp-neon` dan `--cp-cyan`. Bentuk tajam, scanlines, struktur panel tetap dipertahankan.

---

## Aksesibilitas

### Yang Sudah Didukung

- **`prefers-reduced-motion: reduce`** — semua animasi dikecilkan ke `.01ms`
- **`prefers-contrast: more`** — border diperkuat ke 2px, warna dicerahkan
- **`prefers-color-scheme: light`** — auto-switch light mode
- **`:focus-visible`** global — outline 2px cyan konsisten
- **`.cp-skip-link`** untuk keyboard navigation
- **`.cp-sr-only`** untuk screen reader
- **Touch target ≥ 36-44px** di tombol/icon-button
- **`aria-invalid="true"`** support untuk validasi form
- **WCAG AA contrast** — `--cp-dim` dicerahkan ke `#7a8c9e` (>4.5:1 pada void)

### Rekomendasi Tambahan

```html
<!-- Selalu tambahkan alt text -->
<img src="..." alt="Deskripsi gambar">

<!-- Label untuk form control -->
<label class="cp-label" for="email">Email</label>
<input class="cp-input" id="email" type="email" required>

<!-- ARIA untuk komponen interaktif -->
<button aria-expanded="false" aria-controls="panel">Toggle</button>
<div id="panel" role="region" aria-hidden="true">...</div>
```

---

## Performa

### Optimasi yang Diterapkan

1. **CSS Cascade Layers** — eliminasi 366 `!important` → 19 (legit)
2. **`@import` font di atas** + `font-display: swap` — render non-blocking
3. **`backdrop-filter: none` otomatis** di ≤640px dan `(pointer: coarse)` — hemat GPU mobile
4. **`content-visibility: auto`** utility — skip rendering offscreen
5. **`will-change`** hanya pada elemen animasi visible
6. **Token transparan** — hindari hardcoded rgba (lebih mudah di-theme)
7. **22 `@keyframes`** (turun dari 84 di v1.0) — lebih fokus

### Bundle Size

| Format | Ukuran |
|---|---|
| Raw CSS | 126 KB |
| Minified | ~95 KB |
| Gzip | ~22 KB |
| Brotli | ~18 KB |

### Rekomendasi Production

```html
<!-- Preconnect untuk font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Load CSS dengan preload -->
<link rel="preload" href="ARRQ-CyberPunk.css" as="style">
<link rel="stylesheet" href="ARRQ-CyberPunk.css">
```

```bash
# Minify untuk production
npx lightningcss --minify ARRQ-CyberPunk.css -o ARRQ-CyberPunk.min.css

# Atau postcss-clean
npx postcss ARRQ-CyberPunk.css --use cssnano -o ARRQ-CyberPunk.min.css
```

---

## Browser Support

### Fully Supported

- Chrome / Edge 99+ (Cascade Layers support)
- Firefox 97+
- Safari 15.4+

### Partially Supported

- Chrome / Edge 88-98 — `@layer` tidak didukung, fallback ke specificity normal
- Firefox 78-96 — sama
- Safari 14-15.3 — sama

### Not Supported

- IE 11 — gunakan v1.0 legacy atau polyfill
- Opera Mini — animasi & `backdrop-filter` dimatikan

### Feature Detection

```css
@supports not (layer: x) {
  /* Fallback untuk browser tanpa cascade layers */
  .cp-btn { /* tulis ulang tanpa @layer */ }
}
```

---

## JavaScript Snippets

### Navbar Toggle

```javascript
document.getElementById('cp-navbar-toggle')?.addEventListener('click', () => {
  const n = document.getElementById('cp-navbar');
  const isOpen = n.classList.toggle('is-open');
  document.getElementById('cp-navbar-toggle')
    .setAttribute('aria-expanded', isOpen);
});

// Close on outside click
document.addEventListener('click', (e) => {
  const n = document.getElementById('cp-navbar');
  if (n?.classList.contains('is-open') && !n.contains(e.target)) {
    n.classList.remove('is-open');
    document.getElementById('cp-navbar-toggle')
      ?.setAttribute('aria-expanded', 'false');
  }
});

// Close on Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    document.getElementById('cp-navbar')?.classList.remove('is-open');
  }
});
```

### Auto-hide Navbar on Scroll

```javascript
let lastScroll = 0;
window.addEventListener('scroll', () => {
  const n = document.getElementById('cp-navbar');
  if (!n) return;
  const cur = window.scrollY;
  if (cur > lastScroll && cur > 100) {
    n.classList.add('is-hidden');
  } else {
    n.classList.remove('is-hidden');
  }
  lastScroll = cur;
}, { passive: true });
```

### Toast Notification

```javascript
function showToast(title, msg, variant = '') {
  const container = document.querySelector('.cp-toasts') || createToastContainer();
  const toast = document.createElement('div');
  toast.className = `cp-toast ${variant ? 'cp-toast--' + variant : ''}`;
  toast.innerHTML = `
    <div>
      <p class="cp-toast__title">${esc(title)}</p>
      <p class="cp-toast__msg">${esc(msg)}</p>
    </div>
  `;
  container.appendChild(toast);
  setTimeout(() => {
    toast.classList.add('is-leaving');
    setTimeout(() => toast.remove(), 250);
  }, 4000);
}

function createToastContainer() {
  const c = document.createElement('div');
  c.className = 'cp-toasts';
  document.body.appendChild(c);
  return c;
}

function esc(s) {
  return String(s).replace(/[&<>"']/g, c => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
  }[c]));
}

// Usage
showToast('Sukses', 'Data tersimpan', 'green');
showToast('Error', 'Koneksi gagal', 'mag');
```

### Theme Switcher

```javascript
function setTheme(theme) {
  document.body.setAttribute('data-theme', theme);
  localStorage.setItem('arrq-theme', theme);
}

// Load saved theme
const saved = localStorage.getItem('arrq-theme');
if (saved) setTheme(saved);
```

### Glitch Text Effect

```javascript
function glitch(el, duration = 800) {
  el.classList.add('is-glitching');
  setTimeout(() => el.classList.remove('is-glitching'), duration);
}

// Random glitch
setInterval(() => {
  const els = document.querySelectorAll('.cp-glitch');
  if (els.length) glitch(els[Math.floor(Math.random() * els.length)]);
}, 3000);
```

---

## Migrasi dari v1.0

### Perubahan Breaking

1. **Namespace tunggal `cp-*`** — hapus class tanpa prefix dari v1.0
2. **`@layer` cascade** — utility sekarang di layer `utilities`, bukan global
3. **Token `--cp-dim`** berubah dari `#6b7c8c` → `#7a8c9e` (WCAG AA fix)
4. **Grid size konsisten 44px** — sebelumnya 42/44 campur
5. **Font body** — `JetBrains Mono` (sebelumnya `Roboto Condensed`)

### Tabel Migrasi Cepat

| v1.0 | v2.0 | Catatan |
|---|---|---|
| `.app-shell` | `.cp-app` | Prefix wajib |
| `.panel-alt` | `.cp-panel--bracketed` | Modifier |
| `.card-alt` | `.cp-card` | Konsolidasi |
| `.btn` (no prefix) | `.cp-btn` | Prefix wajib |
| `rgba(0,240,255,.X)` | `var(--cp-cyan-aXX)` | Pakai token |
| `z-index: 9999` | `z-index: var(--z-loading)` | Pakai token |

### Script Migrasi Otomatis

```bash
# Find & replace (bash)
sed -i 's/\.app-shell/.cp-app/g' *.html
sed -i 's/\.panel-alt/.cp-panel--bracketed/g' *.html
sed -i 's/\.card-alt/.cp-card/g' *.html
sed -i 's/class="btn"/class="cp-btn"/g' *.html
```

### Yang Tidak Berubah

- Semua class `.cp-*` dari v1.0 tetap kompatibel
- 15 theme presets (`data-theme="..."`) tetap sama
- Font Awesome integration tidak berubah
- Standar visual (chamfered, scanlines, neon glow) tetap utuh

---

## Best Practices

### ✅ DO

- Gunakan **token** (`var(--cp-cyan)`), bukan hardcoded hex
- Pakai **utility classes** (`.cp-flex`, `.cp-gap-4`) untuk layout cepat
- Tambah `aria-expanded`, `aria-controls`, `aria-label` untuk komponen interaktif
- Selalu sertakan **navbar + social grid + footer** di setiap halaman
- Test di **mobile (≤640px)** untuk performa backdrop-filter
- Pakai `prefers-reduced-motion` fallback untuk animasi panjang
- Minify + gzip untuk production

### ❌ DON'T

- Jangan tambah `!important` — andalkan urutan `@layer`
- Jangan hardcoded `rgba()` — pakai token transparan
- Jangan pakai `border-radius` besar (cyberpunk = tajam)
- Jangan pakai `alert()` / `confirm()` / `prompt()` — pakai toast/modal
- Jangan pakai emoji dalam UI — pakai Font Awesome
- Jangan pakai Inter/Roboto sebagai font utama
- Jangan override `--cp-radius: 0` (kecuali dot indikator)

---

## FAQ

### Q: Bisa dipakai dengan Tailwind/Bootstrap?

**A:** Bisa, tapi tidak direkomendasi. ARRQ-CyberPunk punya reset sendiri. Jika harus co-exist, load ARRQ-CyberPunk setelah framework lain agar cascade layer menang.

### Q: Apakah support React/Vue/Svelte?

**A:** Ya — ini CSS murni. Import di root component:

```js
// React
import 'arrq-cyberpunk/ARRQ-CyberPunk.css';

// Vue
import 'arrq-cyberpunk/ARRQ-CyberPunk.css';

// Svelte
import 'arrq-cyberpunk/ARRQ-CyberPunk.css';
```

### Q: Bagaimana kontribusi komponen baru?

**A:** Tambah di `@layer components`:

```css
@layer components {
  .cp-komponen-baru {
    /* ... */
  }
}
```

Jangan pakai `!important`. Ikuti konvensi penamaan BEM-like (`cp-block__element--modifier`).

### Q: Apakah ada Dark/Light toggle?

**A:** Ya — otomatis via `prefers-color-scheme`, atau manual via `.cp-light` class di `<body>`.

### Q: Bagaimana custom tema?

**A:** Override token di `:root` atau `body[data-theme="custom"]`:

```css
body[data-theme="my-brand"] {
  --cp-neon: #ff6b35;
  --cp-cyan: #00b4d8;
}
```

### Q: Apakah ada Figma/Sketch file?

**A:** Belum. Rencana v2.1 akan menyertakan Figma library.

---

## Changelog

### v2.0 (2026-11-02) — Professional Edition

**Added:**
- CSS Cascade Layers (`@layer`) untuk spesifitas
- `prefers-color-scheme` auto-switch light mode
- 15 theme presets (`amber`, `matrix`, `cherry`, dll)
- Section 41: Social Media Grid (12 link chamfered)
- Section 42: Site Footer dengan heartbeat animation
- Section 43: Cyberpunk Navbar dengan brand flicker + hamburger mobile
- Token transparan (`--cp-cyan-a05`, dll)
- `content-visibility: auto` utility
- Conditional `backdrop-filter` disable di mobile
- Z-index system terorganisir via token

**Changed:**
- File size: 623 KB → 126 KB (-84%)
- Lines: 18.230 → 4.189 (-77%)
- `!important`: 366 → 19 (-95%)
- `@keyframes`: 84 → 22 (-74%)
- Section count: ~190 duplikat → 43 berurutan
- `--cp-dim`: `#6b7c8c` → `#7a8c9e` (WCAG AA fix)
- Grid size: 42/44 campur → 44px konsisten
- Font body: Roboto Condensed → JetBrains Mono

**Removed:**
- Dual namespace (hapus non-prefixed dari section 200 v1.0)
- Duplicate sections (150, 201)
- Hardcoded `rgba()` values
- Komponen esoterik (sertifikat A4 dengan guilloché, command palette, dll — akan di-port terpisah)

### v1.0 (legacy)

- 18.230 baris, 623 KB
- 190+ section dengan duplikasi
- 366 `!important`
- Dual namespace (`cp-*` + non-prefix)

---

## License

```
MIT License

Copyright (c) 2026 Abdur Rozak, S.Kom.
https://abdurrozak.my.id

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
```

---

## Credit

**Dibuat dengan** ❤️ **oleh Abdur Rozak, S.Kom.**

- Website: [abdurrozak.my.id](https://abdurrozak.my.id/)
- GitHub: [github.com/abdurrozakskom](https://github.com/abdurrozakskom)
- Email: abdurrozak.skom@gmail.com
- WhatsApp: +62 896-7522-3353

> _"Estetika cyberpunk bukan tentang gelap — tapi tentang pesan yang tajam di tengah kebisingan."_