feat: implement real before/after preview, Neubrutalism UI redesign, production readiness fixes, and update README

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,24 @@
+# Dependencies
+node_modules/
+frontend/node_modules/
+
+# Next.js Build Outputs
+frontend/.next/
+frontend/out/
+build/
+dist/
+
+# Local Environment Secrets
+.env
+.env*.local
+frontend/.env.local
+frontend/.env*.local
+
+# Logs and System Files
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.DS_Store
+Thumbs.db
+.vercel

DESIGN.md

@@ -0,0 +1,129 @@
+---
+version: "alpha"
+name: "Neubrutalism"
+description: "Neubrutalist interface. Ideal for landing pages, saas. AI-ready template."
+colors:
+  primary: "#FFEB3B"
+  secondary: "#FF5252"
+  tertiary: "#2196F3"
+  neutral: "#000000"
+typography:
+  h1:
+    fontFamily: System UI stack
+    fontSize: 2.25rem
+    fontWeight: 700
+  body-md:
+    fontFamily: System UI stack
+    fontSize: 1rem
+    fontWeight: 400
+  label-caps:
+    fontFamily: System UI stack
+    fontSize: 0.75rem
+    fontWeight: 500
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.neutral}"
+    padding: 12px
+---
+
+## Overview
+
+Neubrutalist interface. Ideal for landing pages, saas. AI-ready template. Brutalism on the web was always a provocation. Raw HTML, system fonts, zero polish — it said "I don't care about your expectations." Neubrutalism kept the attitude but ditched the hostility. It's brutalism that actually wants you to click the button.
+
+The turning point was Gumroad's 2021 redesign. Sahil Lavingia stripped the product down to thick black borders, flat primary colors, and offset drop shadows that looked like someone dragged a rectangle two pixels southeast. It was loud, playful, and unmistakably intentional. Designers noticed. Within months, the Figma community had dozens of neubrutalist UI kits climbing the charts.
+
+What separates it from classic brutalism is warmth. Where brutalism embraced ugliness as ideology, neubrutalism uses bold geometry as decoration. The borders are thick but the corners can be rounded. The shadows are hard but the palette is candy-colored. It's confrontational aesthetics made approachable — punk rock in a good mood.
+
+- Density: 5/10 — Balanced
+- Variance: 4/10 — Moderate
+- Motion: 4/10 — Subtle
+
+- **Style:** Bold, Colorful, Raw, Playful
+- **Keywords:** Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z
+- **Era:** 2020s Modern
+- **Light/Dark:** ✓ Full / ✓ Full
+
+## Colors
+
+- **#FFEB3B** (#FFEB3B) — Primary surface or dominant color
+- **#FF5252** (#FF5252) — Secondary surface or text color
+- **#2196F3** (#2196F3) — Supporting palette color
+- **#000000** (#000000) — Supporting palette color
+
+
+## Typography
+
+- **Display / Hero:** System UI stack (-apple-system, sans-serif) — Weight 700, tight tracking, used for headline impact
+- **Body:** System UI stack (-apple-system, sans-serif) — Weight 400, 16px/1.6 line-height, max 72ch per line
+- **UI Labels / Captions:** System UI stack (-apple-system, sans-serif) — 0.875rem, weight 500, slight letter-spacing
+- **Monospace:** JetBrains Mono — Used for code, metadata, and technical values
+
+Scale:
+- Hero: clamp(2.5rem, 5vw, 4rem)
+- H1: 2.25rem
+- H2: 1.5rem
+- Body: 1rem / 1.6
+- Small: 0.875rem
+
+
+## Layout
+
+- **Grid:** CSS Grid primary. Max-width containment: 1280px centered with 1.5rem side padding.
+- **Spacing rhythm:** Balanced. Base unit: 0.5rem (8px).
+- **Section vertical gaps:** clamp(4rem, 8vw, 8rem).
+- **Hero layout:** Split-screen (text left, visual right).
+- **Feature sections:** Zig-zag alternating text+image rows. No 3-equal-columns.
+- **Mobile collapse:** All multi-column layouts collapse below 768px. No horizontal overflow.
+- **z-index contract:** base (0) / sticky-nav (100) / overlay (200) / modal (300) / toast (500).
+
+
+## Elevation & Depth
+
+box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography
+
+- **Physics:** Ease-out curves, 200-300ms duration. Smooth and predictable.
+- **Entry animations:** Fade + translate-Y (16px → 0) over 420ms ease-out. Staggered cascades for lists: 80ms between items.
+- **Hover states:** Subtle color shift + shadow adjustment over 200ms.
+- **Page transitions:** Fade only (200ms).
+- **Performance:** Only transform and opacity animated. No layout-triggering properties.
+
+
+## Shapes
+
+Base corner radius: 8px. See rounded tokens in front matter for the full scale.
+
+
+## Components
+
+- **Primary Button:** Subtly rounded (0.5rem) shape. Accent color fill. Hover: 8% darken + subtle lift shadow. Active: -1px translate tactile press. Font weight 600. No outer glows.
+- **Secondary / Ghost Button:** Outline variant. 1.5px border in muted color. Text in primary color. Hover: subtle background fill.
+- **Cards:** Subtly rounded (0.5rem) corners. Surface background. Subtle shadow (0 2px 12px rgba(0,0,0,0.06)). 1px border stroke.
+- **Inputs:** Label above input. 1px border stroke. Focus ring: 2px accent color offset 2px. Error text below in semantic red. No floating labels.
+- **Navigation:** Primary surface background. Active item: accent color indicator. Font weight 500 when active.
+- **Skeletons:** Shimmer animation matching component dimensions. No circular spinners.
+- **Empty States:** Icon-based composition with descriptive text and action button.
+
+
+## Do's and Don'ts
+
+- No emojis in UI — use icon system only (Lucide, Heroicons)
+- No pure black (#000000) — use off-black or charcoal variants
+- No oversaturated accent colors (saturation cap: 80%)
+- No 3-column equal-width feature layouts — use zig-zag or asymmetric grid
+- No `h-screen` — use `min-h-[100dvh]`
+- No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen"
+- No broken external image links — use picsum.photos or inline SVG
+- No generic lorem ipsum in demos
+
+- Do Hard borders (2-4px)
+- Do Hard offset shadows
+- Do High saturation colors
+- Do Bold typography
+- Do No blurs/gradients
+- Do Distinctive 'ugly-cute' look
+
+
+## Use Case
+
+Landing pages, SaaS

README.md

@@ -10,4 +10,159 @@ app_file: app.py
 pinned: true
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# RemBG: Pemotong Latar Belakang Foto Berbasis AI
+
+Aplikasi web modern untuk menghapus latar belakang foto secara otomatis dengan hasil PNG transparan 32-bit RGBA. Menggabungkan frontend **Next.js 14** bertema **Neubrutalism** dengan backend **Hugging Face ZeroGPU** bertenaga pustaka Python `rembg` (BiRefNet & ISNet).
+
+---
+
+## Pratinjau Tampilan Antarmuka
+
+### 1. Halaman Utama (Neubrutalism Light Mode)
+![Tampilan Halaman Utama](docs/screenshots/hero-preview.png)
+
+### 2. Pratinjau Interaktif Sebelum & Sesudah (Before/After Slider)
+Bandingkan foto asli referensi dengan hasil pemisahan latar belakang riil dari model `BiRefNet Portrait`:
+![Slider Sebelum dan Sesudah](docs/screenshots/before-after-slider.png)
+
+### 3. Editor Kerja Utama (Workspace Pemrosesan)
+Area unggah drag-and-drop, seleksi model segmentasi, opsi alpha matting, dan inspeksi hasil:
+![Editor Kerja Utama](docs/screenshots/main-workspace.png)
+
+---
+
+## Fitur Utama
+
+- **Katalog 6 Model Segmentasi AI:**
+  - `BiRefNet Portrait`: Khusus potret manusia, mendeteksi helai rambut halus dan lekuk pakaian.
+  - `BiRefNet General`: Optimal untuk fotografi produk, katalog e-commerce, dan objek benda padat.
+  - `ISNet General`: Pemrosesan cepat dengan batas tepi tegas untuk subjek umum.
+  - `ISNet Anime`: Segmentasi spesifik ilustrasi 2D, karakter anime, dan grafik vektor.
+  - `U2Net Standard`: Model segmentasi serbaguna dengan stabilitas tinggi.
+  - `U2Net Human`: Segmentasi figur manusia ringan untuk kebutuhan cepat.
+- **Alpha Matting Tepi Halus:** Opsi erosi piksel tepi dan ambang batas foreground/background untuk helai rambut tipis.
+- **Slider Perbandingan Interaktif:** Tuas perbandingan Before/After responsif dengan kendali mouse, sentuhan layar (touch-friendly), dan aksesibilitas keyboard (`input[type="range"]`).
+- **Keamanan & Anti-Spam:**
+  - Dilindungi Cloudflare Turnstile tanpa captcha yang mengganggu kenyamanan pengguna.
+  - Dilengkapi *in-memory sliding window IP rate limiter* (15 req/menit) untuk mencegah bot flood.
+- **Privasi Data Penuh:** Berkas gambar hanya diproses sementara di memori GPU terisolasi (ZeroGPU) dan langsung dibuang setelah kanal alpha diekstrak. Tidak ada penyimpanan permanen di server.
+- **Halaman Error 404 Kustom:** Tampilan 404 berdesain Neubrutalism yang aman tanpa kebocoran informasi internal server.
+- **Telemetri Tanpa Pelacak Pribadi:** Modul telemetri aman yang siap dihubungkan dengan Google Analytics (`gtag`) atau Plausible tanpa merekam berkas gambar atau identitas pengguna.
+
+---
+
+## Arsitektur Sistem
+
+```mermaid
+flowchart LR
+    A[Pengguna / Browser] -->|Unggah Gambar + Turnstile| B[Frontend Next.js 14]
+    B -->|Validasi Ukuran & Rate Limit| C[API Route /api/remove-bg]
+    C -->|Base64 Payload via SSE| D[Hugging Face Space ZeroGPU]
+    D -->|Inferensi Model BiRefNet / ISNet| E[Pustaka Python rembg]
+    E -->|Kanal Alpha Transparan RGBA| D
+    D -->|Stream Event complete| C
+    C -->|Data URL PNG 32-bit| B
+    B -->|Pratinjau Checkerboard & Unduh| A
+```
+
+---
+
+## Struktur Direktori Proyek
+
+```text
+rembg/
+├── app.py                     # Entry point backend Gradio & API ZeroGPU
+├── requirements.txt           # Dependensi Python (rembg, gradio, spaces, pillow)
+├── README.md                  # Dokumentasi proyek & konfigurasi HF Space
+├── DESIGN.md                  # Panduan desain Neubrutalism (warna, border, tipografi)
+├── docs/
+│   └── screenshots/           # Tangkapan layar dokumentasi
+└── frontend/                  # Aplikasi web Next.js 14
+    ├── package.json
+    ├── next.config.js
+    ├── vercel.json            # Konfigurasi deployment Vercel
+    ├── .env.example           # Contoh variabel lingkungan
+    ├── public/
+    │   └── samples/           # Sampel foto sebelum dan sesudah AI
+    └── src/
+        ├── app/
+        │   ├── globals.css    # Sistem desain Neubrutalism lengkap
+        │   ├── layout.js      # Metadata, Schema.org JSON-LD, OpenGraph
+        │   ├── page.js        # UI utama, dropzone, slider before/after
+        │   ├── not-found.js   # Halaman 404 kustom
+        │   ├── robots.js      # Generator robots.txt dinamis
+        │   ├── sitemap.js     # Generator sitemap.xml dinamis
+        │   ├── icon.svg       # Favicon Neubrutalist
+        │   └── api/
+        │       ├── remove-bg/      # Handler pemrosesan utama + Turnstile
+        │       └── demo-remove-bg/ # Handler live demo sampel
+        └── lib/
+            ├── analytics.js   # Dispatcher telemetri aman privasi
+            ├── rate-limit.js  # Sliding-window rate limiter
+            └── turnstile.js   # Verifikator server-side Cloudflare Turnstile
+```
+
+---
+
+## Panduan Menjalankan Secara Lokal
+
+### 1. Menjalankan Backend Python (Gradio)
+
+Pastikan Python 3.10+ terpasang:
+
+```bash
+# Pasang dependensi Python
+pip install -r requirements.txt
+
+# Jalankan server Gradio
+python app.py
+```
+Aplikasi backend akan aktif di `http://localhost:7860`.
+
+### 2. Menjalankan Frontend Next.js
+
+Masuk ke folder `frontend`:
+
+```bash
+cd frontend
+
+# Pasang dependensi Node.js
+npm install
+
+# Buat berkas environment lokal dari template
+cp .env.example .env.local
+
+# Jalankan server pengembang
+npm run dev
+```
+Buka browser di `http://localhost:3000`.
+
+### 3. Menjalankan Pengujian Unit
+
+```bash
+cd frontend
+npm test
+```
+
+---
+
+## Konfigurasi Variabel Lingkungan (`frontend/.env.local`)
+
+| Variabel | Keterangan | Nilai Contoh |
+|---|---|---|
+| `NEXT_PUBLIC_SITE_URL` | Domain kanonikal untuk sitemap dan SEO | `https://rembg.vercel.app` |
+| `NEXT_PUBLIC_HF_SPACE_URL` | Alamat backend Hugging Face ZeroGPU | `https://ilhamdev-rembg.hf.space` |
+| `NEXT_PUBLIC_TURNSTILE_SITE_KEY` | Site Key Cloudflare Turnstile | Disediakan Cloudflare |
+| `TURNSTILE_SECRET_KEY` | Secret Key Cloudflare Turnstile | Disediakan Cloudflare |
+| `NEXT_PUBLIC_GSC_VERIFICATION` | Token verifikasi Google Search Console (opsional) | `google-site-verification-...` |
+| `NEXT_PUBLIC_GA_ID` | Google Analytics Measurement ID (opsional) | `G-XXXXXXXXXX` |
+
+> **Catatan Pengujian Lokal:** Jika variabel Turnstile dikosongkan saat pengujian lokal, sistem otomatis menggunakan Dummy Test Key resmi dari Cloudflare (`1x00000000000000000000AA`).
+
+---
+
+## Lisensi & Atribusi
+
+- Pustaka Segmentasi: [danielgatis/rembg](https://github.com/danielgatis/rembg)
+- Model BiRefNet: [ZhengPeng7/BiRefNet](https://github.com/ZhengPeng7/BiRefNet)
+- Hosting Inferensi: [Hugging Face Spaces (ZeroGPU)](https://huggingface.co/spaces/ilhamdev/rembg)

frontend/.env.example

@@ -9,3 +9,9 @@ NEXT_PUBLIC_HF_SPACE_URL=https://ilhamdev-rembg.hf.space
 # Catatan: Jika dikosongkan saat dev lokal, sistem otomatis menggunakan Official Dummy Test Key Cloudflare.
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=
 TURNSTILE_SECRET_KEY=
+
+# Google Search Console Verification Token (Opsional, jika menggunakan metode HTML tag)
+# NEXT_PUBLIC_GSC_VERIFICATION=
+
+# Web Analytics (Opsional: Google Analytics Measurement ID, misal: G-XXXXXXXXXX)
+# NEXT_PUBLIC_GA_ID=

frontend/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "test": "node --test src/lib/turnstile.test.js"
+    "test": "node --test \"src/lib/*.test.js\""
   },
   "dependencies": {
     "@marsidev/react-turnstile": "^1.6.1",

frontend/src/app/api/demo-remove-bg/route.js

@@ -0,0 +1,165 @@
+/**
+ * API Route: /api/demo-remove-bg
+ *
+ * Menjalankan inferensi model BiRefNet riil untuk foto contoh (background-removal-before.png).
+ * Memanggil HuggingFace ZeroGPU Gradio Space (ilhamdev-rembg) secara langsung.
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { checkRateLimit } from '@/lib/rate-limit'
+
+const HF_SPACE_URL = (process.env.NEXT_PUBLIC_HF_SPACE_URL || 'https://ilhamdev-rembg.hf.space').replace(/\/+$/, '')
+const TIMEOUT_MS = 90_000
+
+export async function POST(request) {
+  try {
+    const clientIp = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || request.headers.get('cf-connecting-ip') || '127.0.0.1'
+    const rateLimit = checkRateLimit(`demo-${clientIp}`, 10, 60_000)
+    if (!rateLimit.allowed) {
+      return Response.json(
+        { error: 'Terlalu banyak permintaan demo. Harap tunggu sesaat sebelum mencoba lagi.' },
+        {
+          status: 429,
+          headers: { 'Retry-After': Math.ceil(rateLimit.resetMs / 1000).toString() },
+        }
+      )
+    }
+
+    let modelName = 'birefnet-portrait'
+    let alphaMatting = false
+
+    try {
+      const body = await request.json()
+      if (body.model_name) modelName = body.model_name
+      if (typeof body.alpha_matting === 'boolean') alphaMatting = body.alpha_matting
+    } catch {
+      // Default jika tidak ada body json
+    }
+
+    // ── STEP 1: Baca berkas foto referensi dari public/samples ───────────────
+    const samplePath = path.join(process.cwd(), 'public', 'samples', 'background-removal-before.png')
+    if (!fs.existsSync(samplePath)) {
+      return Response.json(
+        { error: 'Berkas contoh background-removal-before.png tidak ditemukan di server' },
+        { status: 404 }
+      )
+    }
+
+    const fileBuffer = fs.readFileSync(samplePath)
+    const base64Data = fileBuffer.toString('base64')
+    const dataUrl = `data:image/png;base64,${base64Data}`
+
+    const payload = {
+      data: [dataUrl, modelName, alphaMatting],
+    }
+
+    // ── STEP 2: Panggil HuggingFace Gradio Space ────────────────────────────
+    const endpoint = `${HF_SPACE_URL}/gradio_api/call/remove_bg`
+    console.log('[Demo API] Menghubungi endpoint model riil:', endpoint, 'Model:', modelName)
+
+    const callRes = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+
+    if (!callRes.ok) {
+      const errText = await callRes.text()
+      console.error('[Demo API] Call failed:', callRes.status, errText.slice(0, 100))
+      return Response.json(
+        { error: `Gagal memanggil model ZeroGPU: status ${callRes.status}` },
+        { status: 502 }
+      )
+    }
+
+    const { event_id } = await callRes.json()
+    if (!event_id) {
+      return Response.json({ error: 'Tidak ada event_id dari HuggingFace' }, { status: 502 })
+    }
+
+    // ── STEP 3: Baca SSE Stream sampai complete ────────────────────────────
+    const sseUrl = `${endpoint}/${event_id}`
+    const sseController = new AbortController()
+    const sseTimer = setTimeout(() => sseController.abort(), TIMEOUT_MS)
+
+    let sseRes
+    try {
+      sseRes = await fetch(sseUrl, {
+        headers: { Accept: 'text/event-stream' },
+        signal: sseController.signal,
+      })
+    } finally {
+      clearTimeout(sseTimer)
+    }
+
+    if (!sseRes.ok) {
+      return Response.json(
+        { error: `Gagal membaca SSE status: ${sseRes.status}` },
+        { status: 502 }
+      )
+    }
+
+    const sseText = await sseRes.text()
+    const lines = sseText.split('\n')
+    let currentEvent = ''
+    let resultOutput = null
+    let errorMsg = null
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (trimmed.startsWith('event: ')) {
+        currentEvent = trimmed.slice(7).trim()
+      } else if (trimmed.startsWith('data: ')) {
+        const raw = trimmed.slice(6).trim()
+        if (currentEvent === 'error') {
+          errorMsg = raw
+          break
+        }
+        if (currentEvent === 'complete') {
+          try {
+            const parsed = JSON.parse(raw)
+            if (Array.isArray(parsed) && parsed.length > 0) {
+              resultOutput = parsed[0]
+            }
+          } catch {
+            console.error('[Demo SSE parse error]', raw.slice(0, 100))
+          }
+        }
+      }
+    }
+
+    if (errorMsg) {
+      return Response.json({ error: `Gradio inference error: ${errorMsg}` }, { status: 502 })
+    }
+
+    if (!resultOutput) {
+      return Response.json(
+        { error: 'ZeroGPU belum selesai atau sedang antre. Silakan coba kembali.' },
+        { status: 502 }
+      )
+    }
+
+    // ── STEP 4: Format hasil ────────────────────────────────────────────��───
+    if (typeof resultOutput === 'string') {
+      const finalImage = resultOutput.startsWith('data:')
+        ? resultOutput
+        : `data:image/png;base64,${resultOutput}`
+
+      return Response.json({
+        success: true,
+        image: finalImage,
+        model: modelName,
+        source: 'real-zerogpu-inference',
+      })
+    }
+
+    return Response.json({ error: 'Format output dari HuggingFace tidak dikenali' }, { status: 502 })
+  } catch (err) {
+    console.error('[Demo API Error]', err)
+    return Response.json({ error: err.message || 'Terjadi kesalahan pada server' }, { status: 500 })
+  }
+}

frontend/src/app/api/remove-bg/route.js

@@ -6,20 +6,43 @@
  */
 
 import { verifyTurnstileToken } from '@/lib/turnstile'
+import { checkRateLimit } from '@/lib/rate-limit'
 
 const HF_SPACE_URL = (process.env.NEXT_PUBLIC_HF_SPACE_URL || 'https://ilhamdev-rembg.hf.space').replace(/\/+$/, '')
 const TIMEOUT_MS = 90_000 // 90 detik untuk toleransi ZeroGPU cold start
+const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB
+const ALLOWED_MODELS = [
+  'birefnet-portrait',
+  'birefnet-general',
+  'isnet-general-use',
+  'isnet-anime',
+  'u2net',
+  'u2net_human_seg',
+]
 
 export async function POST(request) {
   try {
+    // ── STEP 0: Identifikasi IP & Rate Limiting ────────────────────────────
+    const clientIp = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || request.headers.get('cf-connecting-ip') || '127.0.0.1'
+    const rateLimit = checkRateLimit(clientIp, 15, 60_000)
+    if (!rateLimit.allowed) {
+      return Response.json(
+        { error: 'Terlalu banyak permintaan. Harap tunggu sesaat sebelum mencoba lagi.' },
+        {
+          status: 429,
+          headers: { 'Retry-After': Math.ceil(rateLimit.resetMs / 1000).toString() },
+        }
+      )
+    }
+
     const formData = await request.formData()
     const imageFile = formData.get('image')
-    const modelName = formData.get('model_name') || 'birefnet-portrait'
+    const rawModelName = formData.get('model_name') || 'birefnet-portrait'
+    const modelName = ALLOWED_MODELS.includes(rawModelName) ? rawModelName : 'birefnet-portrait'
     const alphaMatting = formData.get('alpha_matting') === 'true'
     const turnstileToken = formData.get('turnstile_token')
 
-    // ── STEP 0: Verifikasi Keamanan Cloudflare Turnstile ──────────────────
-    const clientIp = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || request.headers.get('cf-connecting-ip') || undefined
+    // ── STEP 1: Verifikasi Keamanan Cloudflare Turnstile ──────────────────
     const turnstileVerification = await verifyTurnstileToken({
       token: turnstileToken,
       remoteIp: clientIp,
@@ -32,14 +55,22 @@ export async function POST(request) {
       )
     }
 
-    if (!imageFile) {
-      return Response.json({ error: 'Tidak ada file gambar yang dikirim' }, { status: 400 })
+    if (!imageFile || typeof imageFile.arrayBuffer !== 'function') {
+      return Response.json({ error: 'Tidak ada file gambar yang valid dikirim' }, { status: 400 })
     }
 
-    // ── STEP 1: Konversi file gambar ke Base64 Data URL ────────────────────
+    if (imageFile.size > MAX_FILE_SIZE) {
+      return Response.json({ error: 'Ukuran file gambar melebihi batas maksimum 20MB' }, { status: 400 })
+    }
+
+    const mimeType = imageFile.type || 'image/png'
+    if (!mimeType.startsWith('image/')) {
+      return Response.json({ error: 'Format berkas tidak didukung. Harap unggah gambar JPG, PNG, atau WEBP.' }, { status: 400 })
+    }
+
+    // ── STEP 2: Konversi file gambar ke Base64 Data URL ────────────────────
     const arrayBuffer = await imageFile.arrayBuffer()
     const base64 = Buffer.from(arrayBuffer).toString('base64')
-    const mimeType = imageFile.type || 'image/png'
     const dataUrl = `data:${mimeType};base64,${base64}`
 
     const payload = {

frontend/src/app/globals.css

@@ -1,64 +1,69 @@
-/* ===== STUDIO MINIMALIST DESIGN SYSTEM ===== */
+/* ===== NEUBRUTALISM DESIGN SYSTEM (DESIGN.md) ===== */
 
 :root {
-  /* Dark Theme (Default) */
-  --bg-base: #0c0d0e;
-  --bg-surface: #141518;
-  --bg-card: #18191d;
-  --bg-card-subtle: #212226;
-  --bg-input: #121316;
-
-  --border: rgba(255, 255, 255, 0.12);
-  --border-subtle: rgba(255, 255, 255, 0.07);
-  --border-strong: rgba(255, 255, 255, 0.22);
-  --border-focus: #f3f4f6;
-
-  --text-primary: #f3f4f6;
-  --text-secondary: #9ca3af;
-  --text-muted: #6b7280;
-
-  --accent-cta-bg: #f9fafb;
-  --accent-cta-text: #0c0d0e;
-  --accent-cta-hover: #ffffff;
-
-  --status-success: #22c55e;
-  --status-warning: #f59e0b;
-  --status-error: #ef4444;
+  /* Neubrutalism Color Palette */
+  --color-primary: #FFEB3B;      /* Dominant Yellow */
+  --color-secondary: #FF5252;    /* Vibrant Coral / Red */
+  --color-tertiary: #2196F3;     /* Supporting Blue */
+  --color-black: #000000;        /* Pure black for outlines & shadows */
+
+  /* Light Theme Canvas */
+  --bg-base: #FFFDE7;            /* Soft warm pastel yellow-cream base */
+  --bg-surface: #FFFFFF;
+  --bg-card: #FFFFFF;
+  --bg-card-muted: #F8F9FA;
+  --bg-input: #FFFFFF;
+  --bg-accent-soft: #FFF9C4;     /* Light yellow tint */
+
+  --text-primary: #121212;       /* Charcoal off-black */
+  --text-secondary: #27272A;
+  --text-muted: #52525B;
+
+  --border-color: #000000;
+  --border-width: 3px;
+  --border-stroke: 3px solid #000000;
+  --border-stroke-sm: 2px solid #000000;
+
+  --shadow-offset-xs: 2px 2px 0 #000000;
+  --shadow-offset: 4px 4px 0 #000000;
+  --shadow-card: 6px 6px 0 #000000;
+  --shadow-hover: 8px 8px 0 #000000;
+  --shadow-inset: inset 2px 2px 0 #000000;
 
   --radius-xs: 4px;
   --radius-sm: 6px;
+  --radius-base: 8px;            /* 0.5rem base corner radius per DESIGN.md */
   --radius-md: 8px;
   --radius-lg: 12px;
 
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --font-mono: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  --font-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
 }
 
-[data-theme="light"] {
-  /* Light Theme */
-  --bg-base: #f9fafb;
-  --bg-surface: #ffffff;
-  --bg-card: #ffffff;
-  --bg-card-subtle: #f3f4f6;
-  --bg-input: #f3f4f6;
+[data-theme="dark"] {
+  /* Dark Theme Canvas (Full Dark Mode per DESIGN.md) */
+  --bg-base: #121215;            /* Deep charcoal canvas */
+  --bg-surface: #1C1C21;
+  --bg-card: #1F1F24;
+  --bg-card-muted: #27272D;
+  --bg-input: #18181C;
+  --bg-accent-soft: #2B281B;     /* Dark yellow tint */
 
-  --border: rgba(0, 0, 0, 0.12);
-  --border-subtle: rgba(0, 0, 0, 0.06);
-  --border-strong: rgba(0, 0, 0, 0.22);
-  --border-focus: #111827;
+  --text-primary: #FAFAFA;
+  --text-secondary: #E4E4E7;
+  --text-muted: #A1A1AA;
 
-  --text-primary: #111827;
-  --text-secondary: #4b5563;
-  --text-muted: #6b7280;
+  --border-color: #000000;
+  --border-stroke: 3px solid #000000;
+  --border-stroke-sm: 2px solid #000000;
 
-  --accent-cta-bg: #111827;
-  --accent-cta-text: #ffffff;
-  --accent-cta-hover: #000000;
-
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-offset-xs: 2px 2px 0 #000000;
+  --shadow-offset: 4px 4px 0 #000000;
+  --shadow-card: 6px 6px 0 #000000;
+  --shadow-hover: 8px 8px 0 #000000;
 }
 
+/* ===== RESET & BASE STYLES ===== */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -67,48 +72,79 @@
 
 html {
   scroll-behavior: smooth;
+  font-size: 16px;
 }
 
 body {
-  font-family: inherit;
+  font-family: var(--font-sans);
   background-color: var(--bg-base);
   color: var(--text-primary);
-  min-height: 100vh;
+  min-height: 100dvh;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
-/* Accessible focus visible ring */
+/* Accessible high-contrast focus visible ring */
 :focus-visible {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
+  outline: 3px solid var(--color-tertiary);
+  outline-offset: 3px;
+}
+
+/* Typography Scale per DESIGN.md */
+h1 {
+  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: var(--text-primary);
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.6;
+  max-width: 72ch;
 }
 
-/* ===== APP LAYOUT ===== */
+code, .mono {
+  font-family: var(--font-mono);
+}
+
+/* ===== APP LAYOUT & CONTAINER ===== */
 .app-wrapper {
-  min-height: 100vh;
+  min-height: 100dvh;
   display: flex;
   flex-direction: column;
   background-color: var(--bg-base);
+  position: relative;
+  overflow-x: hidden;
 }
 
+/* Max-width containment: 1280px centered with 1.5rem side padding (DESIGN.md) */
 .container {
   width: 100%;
-  max-width: 920px;
+  max-width: 1280px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 1.5rem;
 }
 
-/* ===== HEADER ===== */
+/* ===== HEADER & NAVIGATION ===== */
 .header {
-  padding: 14px 0;
-  border-bottom: 1px solid var(--border-subtle);
+  padding: 16px 0;
   background-color: var(--bg-surface);
+  border-bottom: 3px solid var(--color-black);
   position: sticky;
   top: 0;
-  z-index: 50;
+  z-index: 100; /* z-index contract: sticky-nav (100) */
   transition: background-color 0.2s ease;
 }
 
@@ -116,12 +152,13 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
 }
 
 .logo {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   text-decoration: none;
   color: var(--text-primary);
 }
@@ -130,238 +167,480 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
-  background-color: var(--bg-card-subtle);
-  border: 1px solid var(--border);
-  color: var(--text-primary);
+  width: 42px;
+  height: 42px;
+  background-color: var(--color-primary);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: 3px 3px 0 var(--color-black);
+  color: var(--color-black);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.logo:hover .logo-badge {
+  transform: translate(-2px, -2px);
+  box-shadow: 5px 5px 0 var(--color-black);
+}
+
+.logo-title-group {
+  display: flex;
+  flex-direction: column;
 }
 
 .logo-text {
-  font-size: 16px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
+  font-size: 1.25rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  line-height: 1.1;
+}
+
+.logo-sub {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
 }
 
 .header-meta {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
-/* Theme Toggle Button */
+/* Theme Toggle Button (Neubrutalism) */
 .theme-toggle-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   min-height: 44px;
-  padding: 0 12px;
+  padding: 0 16px;
   background-color: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  font-size: 13px;
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.15s ease;
+  user-select: none;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
 .theme-toggle-btn:hover {
-  color: var(--text-primary);
-  border-color: var(--border-strong);
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}
+
+.theme-toggle-btn:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-offset-xs);
 }
 
 .theme-toggle-label {
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
 }
 
+/* Hugging Face Link Button */
 .hf-link {
-  font-size: 13px;
-  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
   min-height: 44px;
-  padding: 0 10px;
-  border-radius: var(--radius-sm);
-  border: 1px solid transparent;
-  transition: all 0.15s ease;
+  padding: 0 16px;
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .hf-link:hover {
-  color: var(--text-primary);
-  border-color: var(--border-subtle);
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+  color: #FFFFFF;
+}
+
+.hf-link:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-offset-xs);
 }
 
-/* ===== HERO ===== */
+/* ===== HERO SECTION: SPLIT-SCREEN (DESIGN.md) ===== */
 .hero {
-  padding: 40px 0 28px;
-  text-align: center;
+  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
 }
 
-.hero h1 {
-  font-size: clamp(24px, 4vw, 36px);
-  font-weight: 700;
-  line-height: 1.25;
-  letter-spacing: -0.02em;
+.hero-split-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 40px;
+  align-items: center;
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.hero-tag-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  align-self: flex-start;
+  padding: 6px 14px;
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset-xs);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.hero-title {
+  margin: 0;
   color: var(--text-primary);
-  margin-bottom: 10px;
 }
 
 .hero-desc {
-  font-size: 15px;
-  color: var(--text-secondary);
-  max-width: 580px;
-  margin: 0 auto;
+  font-size: 1.125rem;
   line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.hero-feature-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+.feature-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  box-shadow: var(--shadow-offset-xs);
+}
+
+.feature-chip.chip-yellow {
+  background-color: var(--color-primary);
+  color: var(--color-black);
+}
+
+.feature-chip.chip-blue {
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+}
+
+.feature-chip.chip-red {
+  background-color: var(--color-secondary);
+  color: #FFFFFF;
+}
+
+/* Hero Visual Card (Neubrutalist Showcase) */
+.hero-visual-card {
+  background-color: var(--bg-card);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-card);
+  padding: 20px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.hero-visual-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 2px solid var(--color-black);
+  padding-bottom: 12px;
+}
+
+.hero-visual-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--color-black);
+}
+
+.dot-red { background-color: var(--color-secondary); }
+.dot-yellow { background-color: var(--color-primary); }
+.dot-blue { background-color: var(--color-tertiary); }
+
+.hero-visual-title {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.hero-visual-preview {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.visual-preview-box {
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.visual-preview-box.box-original {
+  background-color: var(--bg-card-muted);
+}
+
+.visual-preview-box.box-cutout {
+  background-color: var(--color-accent-soft);
+  background-image:
+    linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.06) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.06) 75%);
+  background-size: 12px 12px;
+}
+
+.visual-mockup-graphic {
+  width: 100%;
+  height: 110px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--color-black);
+  border-radius: var(--radius-xs);
+  background-color: var(--bg-surface);
+}
+
+.visual-preview-label {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--text-primary);
+}
+
+.hero-visual-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  padding: 8px 12px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
 }
 
-/* ===== MAIN TOOL CARD ===== */
+/* ===== MAIN TOOL CARD (NEUBRUTALISM) ===== */
 .main-card {
   background-color: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 24px;
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  padding: clamp(20px, 3vw, 32px);
   box-shadow: var(--shadow-card);
+  margin-bottom: clamp(3rem, 6vw, 5rem);
 }
 
 /* Configuration grid */
 .config-grid {
   display: grid;
-  grid-template-columns: 1fr 220px;
-  gap: 16px;
-  margin-bottom: 20px;
+  grid-template-columns: 1fr 260px;
+  gap: 20px;
+  margin-bottom: 24px;
 }
 
 .field-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .field-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
 .select-control {
   width: 100%;
-  min-height: 44px;
-  padding: 10px 12px;
+  min-height: 48px;
+  padding: 10px 14px;
   background-color: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
   color: var(--text-primary);
-  font-size: 13px;
-  font-family: inherit;
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  font-weight: 600;
   cursor: pointer;
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .select-control:focus {
-  border-color: var(--border-focus);
+  outline: 3px solid var(--color-tertiary);
+  outline-offset: 2px;
+}
+
+.select-control:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
+/* Toggle card (Alpha Matting) */
 .toggle-card {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
+  gap: 12px;
+  padding: 10px 14px;
   background-color: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
   cursor: pointer;
   user-select: none;
-  min-height: 44px;
+  min-height: 48px;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+.toggle-card:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 5px 5px 0 var(--color-black);
 }
 
 .toggle-card input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
-  accent-color: var(--accent-cta-bg);
+  accent-color: var(--color-primary);
 }
 
 .toggle-text {
-  font-size: 13px;
-  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--text-primary);
   line-height: 1.3;
 }
 
-/* ===== DROPZONE & UPLOAD ===== */
+/* ===== DROPZONE & UPLOAD (NEUBRUTALISM) ===== */
 .dropzone {
-  border: 1px dashed var(--border-strong);
-  border-radius: var(--radius-md);
-  background-color: var(--bg-surface);
-  padding: 44px 20px;
+  border: 3px dashed var(--color-black);
+  border-radius: var(--radius-base);
+  background-color: var(--bg-card-muted);
+  box-shadow: var(--shadow-offset);
+  padding: 56px 24px;
   text-align: center;
   cursor: pointer;
   position: relative;
-  transition: border-color 0.15s ease, background-color 0.15s ease;
+  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .dropzone:hover,
 .dropzone.drag-active {
-  border-color: var(--border-focus);
-  background-color: var(--bg-card-subtle);
+  background-color: var(--bg-accent-soft);
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
 }
 
 .dropzone-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
 }
 
 .dropzone-icon {
-  width: 44px;
-  height: 44px;
-  color: var(--text-secondary);
+  width: 60px;
+  height: 60px;
+  background-color: var(--color-primary);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset-xs);
+  color: var(--color-black);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .dropzone-title {
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 1.125rem;
+  font-weight: 700;
   color: var(--text-primary);
 }
 
 .dropzone-hint {
-  font-size: 13px;
-  color: var(--text-muted);
-  max-width: 440px;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  max-width: 520px;
+  line-height: 1.5;
 }
 
 /* Uploaded Image Preview */
 .preview-container {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .preview-media-box {
-  background-color: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 16px;
+  background-color: var(--bg-card-muted);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  padding: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 240px;
-  max-height: 420px;
+  min-height: 280px;
+  max-height: 480px;
   overflow: hidden;
 }
 
 .preview-img {
   max-width: 100%;
-  max-height: 380px;
+  max-height: 440px;
   object-fit: contain;
+  border: 2px solid var(--color-black);
   border-radius: var(--radius-xs);
 }
 
@@ -371,185 +650,232 @@ body {
   justify-content: space-between;
   padding: 0 4px;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 12px;
 }
 
 .meta-info {
-  font-size: 12px;
-  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .meta-filename {
-  font-weight: 500;
+  font-weight: 700;
   color: var(--text-primary);
-  max-width: 260px;
+  max-width: 320px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .meta-badge {
-  background-color: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  padding: 3px 8px;
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 2px solid var(--color-black);
+  box-shadow: var(--shadow-offset-xs);
+  padding: 4px 10px;
   border-radius: var(--radius-xs);
-  font-size: 11px;
-  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
 }
 
 .btn-ghost-small {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  font-size: 13px;
-  font-weight: 500;
-  padding: 0 14px;
+  background-color: var(--bg-card);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset-xs);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  padding: 0 16px;
   cursor: pointer;
-  transition: all 0.15s ease;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
-.btn-ghost-small:hover {
-  color: var(--text-primary);
-  border-color: var(--border-strong);
+.btn-ghost-small:hover:not(:disabled) {
+  background-color: var(--color-secondary);
+  color: #FFFFFF;
+  transform: translate(-1px, -1px);
+  box-shadow: var(--shadow-offset);
+}
+
+.btn-ghost-small:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/* Progress bar */
+/* Stepped Progress bar (Neubrutalism) */
 .progress-wrapper {
-  margin-top: 16px;
+  margin-top: 20px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .progress-header {
   display: flex;
   justify-content: space-between;
-  font-size: 12px;
-  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
 .progress-value {
-  font-weight: 600;
-  color: var(--text-primary);
+  font-weight: 800;
+  color: var(--color-secondary);
 }
 
 .progress-track {
-  height: 6px;
-  background-color: var(--bg-input);
-  border-radius: var(--radius-xs);
+  height: 16px;
+  background-color: var(--bg-card-muted);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset-xs);
   overflow: hidden;
 }
 
 .progress-bar-fill {
   height: 100%;
-  background-color: var(--text-primary);
+  background-color: var(--color-primary);
+  border-right: 2px solid var(--color-black);
   transition: width 0.3s ease;
 }
 
-/* Error message */
+/* Error message banner (Neubrutalism) */
 .error-banner {
-  margin-top: 14px;
-  padding: 12px 14px;
-  background-color: rgba(239, 68, 68, 0.10);
-  border: 1px solid rgba(239, 68, 68, 0.30);
-  border-radius: var(--radius-sm);
-  color: #ef4444;
-  font-size: 13px;
+  margin-top: 20px;
+  padding: 14px 18px;
+  background-color: var(--color-secondary);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  color: #FFFFFF;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 700;
   display: flex;
   align-items: center;
-  gap: 10px;
-}
-
-[data-theme="dark"] .error-banner {
-  color: #fca5a5;
+  gap: 12px;
 }
 
 /* Turnstile container */
 .turnstile-box {
-  margin-top: 20px;
+  margin-top: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 8px;
   min-height: 65px;
 }
 
 .turnstile-notice {
-  font-size: 12px;
-  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
 }
 
 /* Action button area */
 .action-row {
-  margin-top: 20px;
+  margin-top: 24px;
   display: flex;
-  gap: 12px;
+  gap: 16px;
 }
 
+/* Primary Button (Neubrutalism per DESIGN.md: Yellow fill, 3px black border, offset shadow, tactile press) */
 .btn-primary {
   flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  background-color: var(--accent-cta-bg);
-  color: var(--accent-cta-text);
-  border: none;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 600;
-  padding: 12px 20px;
+  gap: 10px;
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 14px 24px;
   cursor: pointer;
-  transition: opacity 0.15s ease;
-  min-height: 44px;
+  user-select: none;
+  min-height: 48px;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
 .btn-primary:hover:not(:disabled) {
-  opacity: 0.90;
+  background-color: #FDD835; /* 8% darken per DESIGN.md */
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-offset-xs);
 }
 
 .btn-primary:disabled {
-  opacity: 0.40;
+  opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: var(--shadow-offset);
 }
 
+/* Secondary Button (Outline variant with tactile press) */
 .btn-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  background-color: transparent;
-  color: var(--text-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  font-weight: 500;
-  padding: 10px 16px;
+  gap: 8px;
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  padding: 12px 20px;
   cursor: pointer;
-  transition: all 0.15s ease;
-  min-height: 44px;
+  user-select: none;
+  min-height: 48px;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
 }
 
 .btn-secondary:hover:not(:disabled) {
-  color: var(--text-primary);
-  border-color: var(--border-strong);
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
 }
 
-/* Minimalist loading spinner */
+.btn-secondary:active:not(:disabled) {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-offset-xs);
+}
+
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Loading spinner */
 .spinner-icon {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(125, 125, 125, 0.3);
-  border-top-color: currentColor;
+  width: 18px;
+  height: 18px;
+  border: 3px solid rgba(0, 0, 0, 0.2);
+  border-top-color: var(--color-black);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
 }
@@ -558,50 +884,57 @@ body {
   to { transform: rotate(360deg); }
 }
 
-/* ===== RESULT SECTION ===== */
+/* ===== RESULT SECTION (NEUBRUTALISM) ===== */
 .result-section {
-  margin-top: 24px;
+  margin-top: 32px;
   background-color: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 24px;
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  padding: clamp(20px, 3vw, 32px);
   box-shadow: var(--shadow-card);
+  margin-bottom: clamp(3rem, 6vw, 5rem);
 }
 
 .result-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 16px;
+  border-bottom: 2px solid var(--color-black);
+  padding-bottom: 16px;
 }
 
 .result-title-group {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 .result-title {
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 1.125rem;
+  font-weight: 800;
   color: var(--text-primary);
 }
 
 .result-meta-badge {
-  font-size: 11px;
-  background-color: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  color: var(--text-muted);
-  padding: 2px 8px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+  border: 2px solid var(--color-black);
+  box-shadow: var(--shadow-offset-xs);
+  padding: 4px 10px;
   border-radius: var(--radius-xs);
 }
 
 .result-controls-bar {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
@@ -609,217 +942,351 @@ body {
 .view-mode-group {
   display: flex;
   align-items: center;
-  background-color: var(--bg-input);
-  padding: 3px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
+  background-color: var(--bg-card-muted);
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-base);
+  padding: 4px;
+  gap: 4px;
 }
 
 .control-tab-btn {
   background: transparent;
-  border: none;
-  font-size: 12px;
-  color: var(--text-muted);
-  padding: 0 12px;
+  border: 2px solid transparent;
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  padding: 0 14px;
   border-radius: var(--radius-xs);
   cursor: pointer;
-  transition: all 0.15s ease;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
+  transition: all 0.15s ease;
 }
 
 .control-tab-btn.active {
-  background-color: var(--bg-card);
-  color: var(--text-primary);
-  font-weight: 600;
-  box-shadow: var(--shadow-sm);
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 2px solid var(--color-black);
+  box-shadow: var(--shadow-offset-xs);
 }
 
 /* Preview background inspector toggle */
 .bg-inspector-group {
   display: flex;
   align-items: center;
-  background-color: var(--bg-input);
-  padding: 3px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-subtle);
+  background-color: var(--bg-card-muted);
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-base);
+  padding: 4px;
+  gap: 4px;
 }
 
 .bg-inspector-btn {
   background: transparent;
-  border: none;
-  font-size: 12px;
-  color: var(--text-muted);
+  border: 2px solid transparent;
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-secondary);
   padding: 0 12px;
   border-radius: var(--radius-xs);
   cursor: pointer;
-  transition: all 0.15s ease;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
+  transition: all 0.15s ease;
 }
 
 .bg-inspector-btn.active {
   background-color: var(--bg-card);
   color: var(--text-primary);
-  font-weight: 600;
-  box-shadow: var(--shadow-sm);
+  border: 2px solid var(--color-black);
+  box-shadow: var(--shadow-offset-xs);
 }
 
 /* Canvas backgrounds */
 .result-canvas {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 16px;
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
+  padding: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 320px;
-  max-height: 520px;
+  min-height: 340px;
+  max-height: 540px;
   overflow: hidden;
   transition: background-color 0.2s ease;
 }
 
 .result-canvas.checkerboard {
   background-image:
-    linear-gradient(45deg, #232328 25%, transparent 25%),
-    linear-gradient(-45deg, #232328 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #232328 75%),
-    linear-gradient(-45deg, transparent 75%, #232328 75%);
-  background-size: 16px 16px;
-  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
-  background-color: #17171b;
+    linear-gradient(45deg, #E0E0E0 25%, transparent 25%),
+    linear-gradient(-45deg, #E0E0E0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #E0E0E0 75%),
+    linear-gradient(-45deg, transparent 75%, #E0E0E0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  background-color: #FFFFFF;
 }
 
-[data-theme="light"] .result-canvas.checkerboard {
+[data-theme="dark"] .result-canvas.checkerboard {
   background-image:
-    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
-    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
-    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
-  background-size: 16px 16px;
-  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
-  background-color: #f3f4f6;
+    linear-gradient(45deg, #2B2B30 25%, transparent 25%),
+    linear-gradient(-45deg, #2B2B30 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #2B2B30 75%),
+    linear-gradient(-45deg, transparent 75%, #2B2B30 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  background-color: #1A1A1F;
 }
 
 .result-canvas.white {
-  background-color: #ffffff;
+  background-color: #FFFFFF;
 }
 
 .result-canvas.dark {
-  background-color: #0c0d0e;
+  background-color: #121212;
 }
 
 .result-canvas.original-bg {
-  background-color: var(--bg-input);
+  background-color: var(--bg-card-muted);
 }
 
 .result-image {
   max-width: 100%;
   max-height: 480px;
   object-fit: contain;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
 }
 
 .result-footer-actions {
-  margin-top: 18px;
+  margin-top: 24px;
   display: flex;
-  gap: 12px;
+  gap: 16px;
 }
 
 /* Reprocess panel in result card */
 .reprocess-panel {
-  margin-top: 20px;
-  padding: 16px;
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  margin-top: 28px;
+  padding: 20px;
+  background-color: var(--bg-accent-soft);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-offset);
 }
 
 .reprocess-header {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
 }
 
 .reprocess-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 1rem;
+  font-weight: 800;
   color: var(--text-primary);
 }
 
 .reprocess-desc {
-  font-size: 12px;
-  color: var(--text-muted);
+  font-size: 0.875rem;
+  color: var(--text-secondary);
 }
 
 .reprocess-controls {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   flex-wrap: wrap;
 }
 
 .reprocess-field {
   flex: 1;
-  min-width: 220px;
+  min-width: 240px;
 }
 
 .reprocess-tip {
-  margin-top: 8px;
-  font-size: 12px;
+  margin-top: 10px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--text-muted);
 }
 
-/* ===== TECHNICAL / PROJECT INFORMATION ===== */
+/* ===== FEATURE / INFORMATION SECTION: ZIG-ZAG ROWS (DESIGN.md) ===== */
 .info-section {
-  padding: 40px 0 24px;
+  padding: clamp(2rem, 4vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
+}
+
+.section-headline-group {
+  margin-bottom: 32px;
+}
+
+.section-tag {
+  display: inline-block;
+  padding: 4px 10px;
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  margin-bottom: 8px;
 }
 
-.info-grid {
+.zigzag-container {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.zigzag-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: 1fr 1fr;
+  gap: 28px;
+  align-items: stretch;
 }
 
 .info-card {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  padding: 20px;
+  background-color: var(--bg-card);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-card);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.info-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+  border-bottom: 2px solid var(--color-black);
+  padding-bottom: 12px;
 }
 
+.info-card-badge {
+  padding: 4px 10px;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.badge-yellow { background-color: var(--color-primary); color: var(--color-black); }
+.badge-blue { background-color: var(--color-tertiary); color: #FFFFFF; }
+.badge-red { background-color: var(--color-secondary); color: #FFFFFF; }
+
 .info-card h2 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 10px;
-  letter-spacing: -0.01em;
+  font-size: 1.25rem;
+  margin: 0;
 }
 
 .model-list {
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
-.model-list li {
-  font-size: 12px;
+.model-item {
+  font-size: 0.875rem;
   color: var(--text-secondary);
   line-height: 1.5;
+  padding: 8px 12px;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  background-color: var(--bg-card-muted);
 }
 
-.model-list strong {
+.model-item strong {
   color: var(--text-primary);
+  font-family: var(--font-mono);
+  display: inline-block;
+  margin-right: 6px;
+}
+
+/* Visual companion card for zigzag rows */
+.spec-highlight-card {
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-card);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.spec-highlight-card.card-blue {
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+}
+
+.spec-highlight-card.card-blue h3,
+.spec-highlight-card.card-blue p,
+.spec-highlight-card.card-blue .spec-stat-label {
+  color: #FFFFFF;
+}
+
+.spec-highlight-title {
+  font-size: 1.375rem;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.spec-stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.spec-stat-box {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.spec-stat-val {
+  font-family: var(--font-mono);
+  font-size: 1.125rem;
+  font-weight: 800;
+  color: var(--color-secondary);
+}
+
+.spec-stat-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
 }
 
 /* ===== FOOTER ===== */
 .footer {
   margin-top: auto;
-  padding: 28px 0 24px;
-  border-top: 1px solid var(--border-subtle);
+  padding: 32px 0;
+  background-color: var(--bg-surface);
+  border-top: 3px solid var(--color-black);
 }
 
 .footer-content {
@@ -827,56 +1294,377 @@ body {
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 16px;
 }
 
 .footer-text {
-  font-size: 12px;
-  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
 .footer-links {
   display: flex;
   gap: 16px;
+  flex-wrap: wrap;
 }
 
 .footer-link {
-  font-size: 12px;
-  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary);
   text-decoration: none;
-  transition: color 0.15s ease;
+  padding: 6px 12px;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  background-color: var(--bg-card);
+  box-shadow: var(--shadow-offset-xs);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
 .footer-link:hover {
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  transform: translate(-1px, -1px);
+  box-shadow: 4px 4px 0 var(--color-black);
+}
+
+/* ===== BEFORE/AFTER INTERACTIVE DEMO SHOWCASE SECTION (DESIGN.md) ===== */
+.demo-section {
+  padding: clamp(2rem, 4vw, 3.5rem) 0;
+  margin-bottom: clamp(2rem, 4vw, 3.5rem);
+}
+
+.demo-card {
+  background-color: var(--bg-card);
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-card);
+  padding: clamp(20px, 3.5vw, 36px);
+}
+
+.demo-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 24px;
+  border-bottom: 2px solid var(--color-black);
+  padding-bottom: 16px;
+}
+
+.demo-header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 680px;
+}
+
+.demo-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  padding: 4px 10px;
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.demo-title {
+  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
+  font-weight: 800;
   color: var(--text-primary);
+  margin: 0;
 }
 
-/* ===== RESPONSIVE BREAKPOINTS ===== */
-@media (max-width: 720px) {
-  .config-grid {
+.demo-desc {
+  font-size: 0.9375rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.demo-status-pill {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 6px 12px;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.demo-status-pill.pill-ready {
+  background-color: var(--color-primary);
+  color: var(--color-black);
+}
+
+.demo-status-pill.pill-processing {
+  background-color: var(--color-tertiary);
+  color: #FFFFFF;
+}
+
+.demo-status-pill.pill-idle {
+  background-color: var(--bg-card-muted);
+  color: var(--text-secondary);
+}
+
+/* Slider frame & container */
+.demo-stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.demo-slider-frame {
+  position: relative;
+  width: 100%;
+  max-width: 520px;
+  aspect-ratio: 1 / 1;
+  border: 3px solid var(--color-black);
+  border-radius: var(--radius-base);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  user-select: none;
+  background-color: var(--bg-card-muted);
+}
+
+/* Checkerboard for transparent after layer */
+.demo-layer-after {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-image:
+    linear-gradient(45deg, #E0E0E0 25%, transparent 25%),
+    linear-gradient(-45deg, #E0E0E0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #E0E0E0 75%),
+    linear-gradient(-45deg, transparent 75%, #E0E0E0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  background-color: #FFFFFF;
+}
+
+[data-theme="dark"] .demo-layer-after {
+  background-image:
+    linear-gradient(45deg, #2A2A30 25%, transparent 25%),
+    linear-gradient(-45deg, #2A2A30 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #2A2A30 75%),
+    linear-gradient(-45deg, transparent 75%, #2A2A30 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  background-color: #16161B;
+}
+
+.demo-layer-before {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--bg-card-muted);
+}
+
+.demo-img {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  pointer-events: none;
+}
+
+/* Vertical divider line */
+.demo-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--color-black);
+  z-index: 10;
+  pointer-events: none;
+}
+
+/* Draggable handle */
+.demo-handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  background-color: var(--color-primary);
+  border: 3px solid var(--color-black);
+  border-radius: 50%;
+  box-shadow: var(--shadow-offset-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-black);
+  cursor: ew-resize;
+  pointer-events: auto;
+  touch-action: none;
+  transition: transform 0.1s ease;
+}
+
+.demo-handle:hover {
+  transform: translate(-50%, -50%) scale(1.08);
+}
+
+.demo-handle:active {
+  transform: translate(-50%, -50%) scale(0.96);
+}
+
+/* Badges inside slider */
+.demo-badge-floating {
+  position: absolute;
+  top: 14px;
+  z-index: 12;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 800;
+  padding: 4px 10px;
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
+  pointer-events: none;
+}
+
+.demo-badge-before {
+  left: 14px;
+  background-color: #FFFFFF;
+  color: #000000;
+}
+
+.demo-badge-after {
+  right: 14px;
+  background-color: var(--color-primary);
+  color: var(--color-black);
+}
+
+/* Native accessible range input overlaid for keyboard control */
+.demo-range-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: ew-resize;
+  z-index: 15;
+  margin: 0;
+}
+
+.demo-range-input:focus-visible + .demo-divider .demo-handle {
+  outline: 3px solid var(--color-tertiary);
+  outline-offset: 4px;
+}
+
+/* Slider quick controls / presets */
+.demo-quick-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.demo-quick-btn {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  padding: 8px 16px;
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  border: 2px solid var(--color-black);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-offset-xs);
+  cursor: pointer;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+.demo-quick-btn:hover {
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 var(--color-black);
+}
+
+.demo-quick-btn.active {
+  background-color: var(--color-primary);
+  color: var(--color-black);
+  box-shadow: inset 2px 2px 0 var(--color-black);
+}
+
+/* Actions below comparison */
+.demo-actions {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  max-width: 580px;
+}
+
+.demo-helper-note {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+/* ===== RESPONSIVE BREAKPOINTS (COLLAPSE BELOW 768px per DESIGN.md) ===== */
+@media (max-width: 768px) {
+  .hero-split-grid {
     grid-template-columns: 1fr;
+    gap: 32px;
   }
 
-  .hero {
-    padding: 28px 0 20px;
+  .config-grid {
+    grid-template-columns: 1fr;
   }
 
   .main-card {
-    padding: 16px;
+    padding: 18px;
   }
 
   .result-section {
-    padding: 16px;
+    padding: 18px;
   }
 
   .result-footer-actions {
     flex-direction: column;
   }
 
+  .action-row {
+    flex-direction: column;
+  }
+
   .btn-primary, .btn-secondary {
     width: 100%;
   }
 
+  .zigzag-row {
+    grid-template-columns: 1fr;
+  }
+
   .footer-content {
     flex-direction: column;
     align-items: flex-start;

frontend/src/app/layout.js

@@ -1,15 +1,22 @@
-import { Inter } from 'next/font/google'
+import { Inter, JetBrains_Mono } from 'next/font/google'
 import './globals.css'
 
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
+  variable: '--font-sans',
+})
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-mono',
 })
 
 const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || 'https://rembg.vercel.app').replace(/\/+$/, '')
 
 export const viewport = {
-  themeColor: '#09090b',
+  themeColor: '#FFEB3B',
   width: 'device-width',
   initialScale: 1,
 }
@@ -56,6 +63,9 @@ export const metadata = {
       'max-snippet': -1,
     },
   },
+  verification: process.env.NEXT_PUBLIC_GSC_VERIFICATION
+    ? { google: process.env.NEXT_PUBLIC_GSC_VERIFICATION }
+    : undefined,
 }
 
 const jsonLd = {
@@ -111,7 +121,7 @@ export default function RootLayout({ children }) {
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         />
       </head>
-      <body className={inter.className}>{children}</body>
+      <body className={`${inter.variable} ${jetbrainsMono.variable}`}>{children}</body>
     </html>
   )
 }

frontend/src/app/not-found.js

@@ -0,0 +1,123 @@
+import Link from 'next/link'
+
+export const metadata = {
+  title: '404: Halaman Tidak Ditemukan - RemBG',
+  description: 'Halaman yang Anda tuju tidak ditemukan atau telah dipindahkan.',
+}
+
+export default function NotFound() {
+  return (
+    <div className="layout-root">
+      <header className="header">
+        <div className="container">
+          <div className="header-content">
+            <Link href="/" className="logo-group" style={{ textDecoration: 'none' }}>
+              <div className="logo-box">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="6" cy="6" r="3" />
+                  <circle cx="6" cy="18" r="3" />
+                  <line x1="20" y1="4" x2="8.12" y2="15.88" />
+                  <line x1="14.47" y1="14.48" x2="20" y2="20" />
+                  <line x1="8.12" y1="8.12" x2="12" y2="12" />
+                </svg>
+              </div>
+              <div className="logo-text">
+                <span className="logo-title">RemBG</span>
+                <span className="logo-badge">404</span>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <main style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px 16px' }}>
+        <div className="container" style={{ maxWidth: '640px' }}>
+          <div
+            className="main-card"
+            style={{
+              textAlign: 'center',
+              padding: '48px 24px',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '20px',
+            }}
+          >
+            <div
+              style={{
+                display: 'inline-block',
+                background: '#FFEB3B',
+                color: '#000000',
+                border: '3px solid #000000',
+                boxShadow: '4px 4px 0px #000000',
+                padding: '6px 16px',
+                fontWeight: 900,
+                fontSize: '1.25rem',
+                fontFamily: 'var(--font-mono, monospace)',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+              }}
+            >
+              Kesalahan 404
+            </div>
+
+            <h1
+              style={{
+                fontSize: 'clamp(1.75rem, 4vw, 2.5rem)',
+                fontWeight: 900,
+                lineHeight: 1.15,
+                margin: '8px 0',
+                letterSpacing: '-0.02em',
+              }}
+            >
+              Halaman Tidak Ditemukan
+            </h1>
+
+            <p
+              style={{
+                color: 'var(--text-secondary, #52525b)',
+                fontSize: '1rem',
+                maxWidth: '460px',
+                margin: 0,
+                lineHeight: 1.6,
+              }}
+            >
+              Tautan yang Anda tuju mungkin salah ketik, sudah dihapus, atau berkas telah dipindahkan ke direktori lain.
+            </p>
+
+            <div style={{ marginTop: '12px' }}>
+              <Link
+                href="/"
+                className="btn-primary"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  textDecoration: 'none',
+                  fontSize: '0.95rem',
+                  padding: '12px 24px',
+                }}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <line x1="19" y1="12" x2="5" y2="12" />
+                  <polyline points="12 19 5 12 12 5" />
+                </svg>
+                Kembali ke Halaman Utama
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer className="footer">
+        <div className="container">
+          <div className="footer-content">
+            <span className="footer-text">
+              RemBG • Pemotong Latar Belakang Foto
+            </span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}

frontend/src/app/page.js

@@ -3,6 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import { Turnstile } from '@marsidev/react-turnstile'
 import { DEFAULT_TEST_SITE_KEY } from '@/lib/turnstile'
+import { trackEvent } from '@/lib/analytics'
 
 const TURNSTILE_SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || DEFAULT_TEST_SITE_KEY
 
@@ -39,15 +40,28 @@ export default function Home() {
   const [viewMode, setViewMode] = useState('result') // 'result' | 'original'
   const [theme, setTheme] = useState('dark')
 
+  // State untuk Demo Before / After Preview (Reference Image)
+  const [demoResultUrl, setDemoResultUrl] = useState('/samples/background-removal-after.png')
+  const [demoLoading, setDemoLoading] = useState(false)
+  const [demoError, setDemoError] = useState(null)
+  const [sliderPos, setSliderPos] = useState(50)
+  const [isDraggingSlider, setIsDraggingSlider] = useState(false)
+  const sliderFrameRef = useRef(null)
+
   const fileInputRef = useRef(null)
   const turnstileRef = useRef(null)
 
-  // Inisialisasi tema tampilan
+  // Inisialisasi tema tampilan dan cache demo
   useEffect(() => {
     const saved = localStorage.getItem('rembg-theme')
     const initial = saved || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
     setTheme(initial)
     document.documentElement.setAttribute('data-theme', initial)
+
+    const cachedDemo = sessionStorage.getItem('rembg-demo-result')
+    if (cachedDemo) {
+      setDemoResultUrl(cachedDemo)
+    }
   }, [])
 
   const toggleTheme = () => {
@@ -57,6 +71,61 @@ export default function Home() {
     localStorage.setItem('rembg-theme', nextTheme)
   }
 
+  const handleProcessDemo = async () => {
+    setDemoLoading(true)
+    setDemoError(null)
+    try {
+      const res = await fetch('/api/demo-remove-bg', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model_name: 'birefnet-portrait' }),
+      })
+      const data = await res.json()
+      if (!res.ok || !data.success) {
+        throw new Error(data.error || 'Gagal memproses gambar contoh')
+      }
+      setDemoResultUrl(data.image)
+      sessionStorage.setItem('rembg-demo-result', data.image)
+      trackEvent('remove_bg_demo_success', { model: 'birefnet-portrait' })
+    } catch (err) {
+      setDemoError(err.message)
+      trackEvent('remove_bg_demo_error', { error: err.message })
+    } finally {
+      setDemoLoading(false)
+    }
+  }
+
+  const handleDownloadDemo = () => {
+    if (!demoResultUrl) return
+    trackEvent('cta_click', { action: 'download_demo' })
+    const a = document.createElement('a')
+    a.href = demoResultUrl
+    a.download = 'person-cap-nobg.png'
+    a.click()
+  }
+
+  const updateSliderPosition = (clientX) => {
+    if (!sliderFrameRef.current) return
+    const rect = sliderFrameRef.current.getBoundingClientRect()
+    const x = clientX - rect.left
+    const pct = Math.max(0, Math.min(100, (x / rect.width) * 100))
+    setSliderPos(Math.round(pct))
+  }
+
+  const handlePointerDown = (e) => {
+    setIsDraggingSlider(true)
+    updateSliderPosition(e.clientX)
+  }
+
+  const handlePointerMove = (e) => {
+    if (!isDraggingSlider) return
+    updateSliderPosition(e.clientX)
+  }
+
+  const handlePointerUp = () => {
+    setIsDraggingSlider(false)
+  }
+
   const handleFile = useCallback((file) => {
     if (!file || !file.type.startsWith('image/')) {
       setError('File harus berupa gambar (JPG, PNG, atau WEBP)')
@@ -80,6 +149,19 @@ export default function Home() {
     img.src = url
   }, [])
 
+  const handleLoadDemoToEditor = useCallback(async () => {
+    try {
+      const res = await fetch('/samples/background-removal-before.png')
+      const blob = await res.blob()
+      const file = new File([blob], 'person-cap-reference.png', { type: 'image/png' })
+      handleFile(file)
+      const mainCard = document.querySelector('.main-card')
+      if (mainCard) mainCard.scrollIntoView({ behavior: 'smooth' })
+    } catch (err) {
+      setError('Gagal memuat foto contoh: ' + err.message)
+    }
+  }, [handleFile])
+
   // Dukungan paste gambar dari clipboard
   useEffect(() => {
     const handlePaste = (e) => {
@@ -162,9 +244,17 @@ export default function Home() {
       setProgress(100)
       setResultUrl(data.image)
       setViewMode('result')
+      trackEvent('remove_bg_success', {
+        model,
+        file_size_kb: Math.round((imageFile?.size || 0) / 1024),
+      })
     } catch (err) {
       clearInterval(progressInterval)
       setError(err.message)
+      trackEvent('remove_bg_error', {
+        model,
+        error: err.message,
+      })
     } finally {
       setLoading(false)
       setTimeout(() => setProgress(0), 1000)
@@ -188,6 +278,7 @@ export default function Home() {
 
   const handleDownload = () => {
     if (!resultUrl) return
+    trackEvent('cta_click', { action: 'download_result', model })
     const a = document.createElement('a')
     a.href = resultUrl
     const baseName = imageFile?.name?.replace(/\.[^.]+$/, '') || 'hasil'
@@ -203,7 +294,7 @@ export default function Home() {
           <div className="header-inner">
             <a className="logo" href="/" aria-label="RemBG Beranda">
               <span className="logo-badge" aria-hidden="true">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                   <circle cx="6" cy="6" r="3"/>
                   <circle cx="6" cy="18" r="3"/>
                   <line x1="20" y1="4" x2="8.12" y2="15.88"/>
@@ -211,7 +302,10 @@ export default function Home() {
                   <line x1="8.12" y1="8.12" x2="12" y2="12"/>
                 </svg>
               </span>
-              <span className="logo-text">RemBG</span>
+              <div className="logo-title-group">
+                <span className="logo-text">RemBG</span>
+                <span className="logo-sub">AI CUTOUT</span>
+              </div>
             </a>
             <div className="header-meta">
               <button
@@ -248,7 +342,7 @@ export default function Home() {
                 className="hf-link"
               >
                 HF Space
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                   <polyline points="15 3 21 3 21 9"/>
                   <line x1="10" y1="14" x2="21" y2="3"/>
@@ -259,13 +353,282 @@ export default function Home() {
         </div>
       </header>
 
-      {/* Hero */}
+      {/* Hero: Split-Screen per DESIGN.md */}
       <section className="hero">
         <div className="container">
-          <h1>Pemisah Latar Belakang Foto</h1>
-          <p className="hero-desc">
-            Pemisahan subjek foto otomatis menggunakan model segmentasi BiRefNet dan ISNet. Hasil transparan resolusi penuh dalam format PNG.
-          </p>
+          <div className="hero-split-grid">
+            <div className="hero-content">
+              <div className="hero-tag-badge">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                </svg>
+                Segmentasi AI Otomatis
+              </div>
+              <h1 className="hero-title">Pemisah Latar Belakang Foto</h1>
+              <p className="hero-desc">
+                Pisahkan subjek foto menjadi format PNG transparan secara cepat menggunakan model BiRefNet dan ISNet. Resolusi penuh tanpa kompresi, aman, dan siap pakai.
+              </p>
+              <div className="hero-feature-chips">
+                <span className="feature-chip chip-yellow">PNG Transparan RGBA</span>
+                <span className="feature-chip chip-blue">BiRefNet &amp; ISNet</span>
+                <span className="feature-chip chip-red">ZeroGPU Accelerated</span>
+              </div>
+            </div>
+
+            <div className="hero-visual-card">
+              <div className="hero-visual-header">
+                <div className="hero-visual-dots">
+                  <span className="dot dot-red" />
+                  <span className="dot dot-yellow" />
+                  <span className="dot dot-blue" />
+                </div>
+                <span className="hero-visual-title">HASIL MODEL NYATA</span>
+              </div>
+              <div className="hero-visual-preview">
+                <div className="visual-preview-box box-original">
+                  <img
+                    src="/samples/background-removal-before.png"
+                    alt="Foto asli contoh referensi person with cap"
+                    style={{ width: '100%', height: '110px', objectFit: 'contain' }}
+                  />
+                  <span className="visual-preview-label">Foto Asli</span>
+                </div>
+                <div className="visual-preview-box box-cutout">
+                  <img
+                    src={demoResultUrl || '/samples/background-removal-after.png'}
+                    alt="Hasil potongan transparan model BiRefNet Portrait"
+                    style={{ width: '100%', height: '110px', objectFit: 'contain' }}
+                  />
+                  <span className="visual-preview-label">Tanpa Background</span>
+                </div>
+              </div>
+              <div className="hero-visual-footer" style={{ gap: '8px' }}>
+                <a
+                  href="#demo-preview-section"
+                  style={{ color: '#000000', textDecoration: 'none', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '4px' }}
+                >
+                  Buka Slider Interaktif ↓
+                </a>
+                <span>BiRefNet Portrait</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Interactive Before/After Preview Slider Section (MISSION REQUIREMENT) */}
+      <section className="demo-section" id="demo-preview-section">
+        <div className="container">
+          <div className="demo-card">
+            <div className="demo-header">
+              <div className="demo-header-info">
+                <div className="demo-tag">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                  </svg>
+                  Perbandingan Interaktif
+                </div>
+                <h2 className="demo-title">Pratinjau Nyata AI: Sebelum &amp; Sesudah Pemisahan</h2>
+                <p className="demo-desc">
+                  Uji coba langsung kemampuan segmentasi model <strong>BiRefNet Portrait</strong> menggunakan foto referensi asli. Geser pembatas horizontal untuk membandingkan foto asli dengan hasil potongan transparan riil tanpa rekayasa.
+                </p>
+              </div>
+
+              <div className="demo-status-pill pill-ready">
+                <span className="dot dot-yellow" />
+                Model: BiRefNet Portrait (ZeroGPU)
+              </div>
+            </div>
+
+            <div className="demo-stage">
+              {/* Slider Frame */}
+              <div
+                ref={sliderFrameRef}
+                className="demo-slider-frame"
+                onPointerDown={handlePointerDown}
+                onPointerMove={handlePointerMove}
+                onPointerUp={handlePointerUp}
+                onPointerLeave={handlePointerUp}
+                role="region"
+                aria-label="Area perbandingan foto asli dan hasil potongan AI"
+              >
+                {/* Layer After (Background Removed with Transparency Checkerboard) */}
+                <div className="demo-layer-after">
+                  {demoResultUrl ? (
+                    <img
+                      src={demoResultUrl}
+                      alt="Hasil potongan transparan model BiRefNet Portrait"
+                      className="demo-img"
+                    />
+                  ) : (
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.875rem' }}>
+                      Menunggu pemrosesan model...
+                    </div>
+                  )}
+                </div>
+
+                {/* Layer Before (Original Image, Clipped to sliderPos %) */}
+                <div
+                  className="demo-layer-before"
+                  style={{
+                    clipPath: `polygon(0 0, ${sliderPos}% 0, ${sliderPos}% 100%, 0 100%)`,
+                  }}
+                >
+                  <img
+                    src="/samples/background-removal-before.png"
+                    alt="Foto asli sebelum pemisahan latar belakang"
+                    className="demo-img"
+                  />
+                </div>
+
+                {/* Badges inside frame */}
+                <span className="demo-badge-floating demo-badge-before">
+                  Foto Asli ({sliderPos}%)
+                </span>
+                <span className="demo-badge-floating demo-badge-after">
+                  Hasil AI ({100 - sliderPos}%)
+                </span>
+
+                {/* Vertical Divider Line & Draggable Handle */}
+                <div
+                  className="demo-divider"
+                  style={{ left: `${sliderPos}%` }}
+                >
+                  <div
+                    className="demo-handle"
+                    title="Tarik ke kiri atau kanan untuk membandingkan"
+                    aria-hidden="true"
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="15 18 9 12 15 6" />
+                    </svg>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: '-10px' }}>
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  </div>
+                </div>
+
+                {/* Accessible range input for screen readers and keyboard navigation */}
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={sliderPos}
+                  onChange={(e) => setSliderPos(Number(e.target.value))}
+                  className="demo-range-input"
+                  aria-label="Penggeser perbandingan sebelum dan sesudah pemisahan latar belakang"
+                />
+              </div>
+
+              {/* Quick Presets */}
+              <div className="demo-quick-bar" role="group" aria-label="Preset posisi perbandingan">
+                <button
+                  type="button"
+                  className={`demo-quick-btn ${sliderPos === 100 ? 'active' : ''}`}
+                  onClick={() => setSliderPos(100)}
+                >
+                  Foto Asli Penuh (100%)
+                </button>
+                <button
+                  type="button"
+                  className={`demo-quick-btn ${sliderPos === 50 ? 'active' : ''}`}
+                  onClick={() => setSliderPos(50)}
+                >
+                  Bandingkan Imbang (50%)
+                </button>
+                <button
+                  type="button"
+                  className={`demo-quick-btn ${sliderPos === 0 ? 'active' : ''}`}
+                  onClick={() => setSliderPos(0)}
+                >
+                  Hasil AI Penuh (0%)
+                </button>
+              </div>
+
+              {/* Progress and Error States */}
+              {demoLoading && (
+                <div className="progress-wrapper" style={{ width: '100%', maxWidth: '520px' }}>
+                  <div className="progress-header">
+                    <span>Menjalankan inferensi model BiRefNet di Hugging Face ZeroGPU...</span>
+                  </div>
+                  <div className="progress-track" role="progressbar" aria-busy="true">
+                    <div className="progress-bar-fill" style={{ width: '100%' }} />
+                  </div>
+                </div>
+              )}
+
+              {demoError && (
+                <div className="error-banner" style={{ width: '100%', maxWidth: '520px' }}>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="12" />
+                    <line x1="12" y1="16" x2="12.01" y2="16" />
+                  </svg>
+                  <span>{demoError}</span>
+                </div>
+              )}
+
+              {/* Actions */}
+              <div className="demo-actions">
+                <button
+                  type="button"
+                  className="btn-primary"
+                  onClick={handleProcessDemo}
+                  disabled={demoLoading}
+                  style={{ minWidth: '220px' }}
+                >
+                  {demoLoading ? (
+                    <>
+                      <span className="spinner-icon" aria-hidden="true" />
+                      Memproses ZeroGPU...
+                    </>
+                  ) : (
+                    <>
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                        <polyline points="23 4 23 10 17 10" />
+                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                      </svg>
+                      {demoResultUrl ? 'Proses Ulang (Live ZeroGPU)' : 'Hapus Background dengan AI'}
+                    </>
+                  )}
+                </button>
+
+                {demoResultUrl && (
+                  <button
+                    type="button"
+                    className="btn-secondary"
+                    onClick={handleDownloadDemo}
+                    title="Unduh berkas PNG transparan hasil model AI"
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                      <polyline points="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                    Unduh PNG Transparan
+                  </button>
+                )}
+
+                <button
+                  type="button"
+                  className="btn-secondary"
+                  onClick={handleLoadDemoToEditor}
+                  title="Buka foto contoh ini di formulir upload bawah untuk mencoba model segmentasi lain"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                    <circle cx="8.5" cy="8.5" r="1.5" />
+                    <polyline points="21 15 16 10 5 21" />
+                  </svg>
+                  Gunakan di Editor Utama ↓
+                </button>
+              </div>
+
+              <span className="demo-helper-note">
+                Tekan tombol panah keyboard atau geser tuas pembatas untuk membandingkan transparansi piksel.
+              </span>
+            </div>
+          </div>
         </div>
       </section>
 
@@ -347,6 +710,17 @@ export default function Home() {
                   <div className="dropzone-hint">
                     Format JPG, PNG, atau WEBP hingga 20MB. Bisa juga tempel langsung (Ctrl+V).
                   </div>
+                  <button
+                    type="button"
+                    className="btn-ghost-small"
+                    style={{ marginTop: '8px' }}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleLoadDemoToEditor()
+                    }}
+                  >
+                    Atau Coba Foto Contoh (Person with Cap)
+                  </button>
                 </div>
               </div>
             ) : (
@@ -626,29 +1000,91 @@ export default function Home() {
             </div>
           )}
 
-          {/* Informasi Teknis & Spesifikasi Model */}
+          {/* Informasi Teknis & Spesifikasi Model: Zig-Zag Alternating Layout per DESIGN.md */}
           <section className="info-section">
-            <div className="info-grid">
-              <article className="info-card">
-                <h2>Karakteristik Model</h2>
-                <ul className="model-list">
-                  <li><strong>BiRefNet Portrait:</strong> Optimal untuk potret manusia, mendeteksi lekuk pakaian dan helai rambut secara halus.</li>
-                  <li><strong>BiRefNet General:</strong> Optimal untuk foto produk, kemasan dagang, dan objek benda padat.</li>
-                  <li><strong>ISNet General:</strong> Inferensi cepat dengan batas tepi yang tajam untuk berbagai subjek umum.</li>
-                  <li><strong>ISNet Anime:</strong> Dikhususkan untuk ilustrasi 2D, karakter kartun, anime, dan grafik vektor.</li>
-                  <li><strong>U2Net Standard:</strong> Model segmentasi klasik dengan stabilitas tinggi pada berbagai tipe objek.</li>
-                  <li><strong>U2Net Human:</strong> Segmentasi figur manusia ringan untuk kebutuhan pemrosesan cepat.</li>
-                </ul>
-              </article>
-
-              <article className="info-card">
-                <h2>Format & Pemrosesan</h2>
-                <ul className="model-list">
-                  <li><strong>Format Masukan:</strong> Mendukung file JPG, JPEG, PNG, dan WEBP dengan ukuran hingga 20MB.</li>
-                  <li><strong>Format Keluaran:</strong> Format PNG dengan kanal alpha transparan penuh tanpa penurunan resolusi dimensi gambar.</li>
-                  <li><strong>Privasi Data:</strong> Berkas gambar diproses sementara di memori inferensi Hugging Face ZeroGPU dan tidak disimpan di server.</li>
-                </ul>
-              </article>
+            <div className="section-headline-group">
+              <span className="section-tag">Spesifikasi Sistem</span>
+              <h2>Karakteristik &amp; Arsitektur Pemrosesan</h2>
+            </div>
+
+            <div className="zigzag-container">
+              {/* Row 1: Model Segmentasi (Text on left, Spec highlight on right) */}
+              <div className="zigzag-row">
+                <article className="info-card">
+                  <div>
+                    <div className="info-card-header">
+                      <span className="info-card-badge badge-yellow">Katalog Model</span>
+                      <h2>Karakteristik Model AI</h2>
+                    </div>
+                    <ul className="model-list">
+                      <li className="model-item"><strong>BiRefNet Portrait:</strong> Optimal untuk potret manusia, mendeteksi lekuk pakaian dan helai rambut halus.</li>
+                      <li className="model-item"><strong>BiRefNet General:</strong> Optimal untuk foto produk, kemasan dagang, dan benda padat.</li>
+                      <li className="model-item"><strong>ISNet General:</strong> Inferensi cepat dengan batas tepi tajam untuk berbagai subjek umum.</li>
+                      <li className="model-item"><strong>ISNet Anime:</strong> Dikhususkan untuk ilustrasi 2D, karakter kartun, anime, dan grafik vektor.</li>
+                      <li className="model-item"><strong>U2Net Standard:</strong> Model segmentasi klasik dengan stabilitas tinggi pada aneka tipe objek.</li>
+                      <li className="model-item"><strong>U2Net Human:</strong> Segmentasi figur manusia ringan untuk kebutuhan pemrosesan cepat.</li>
+                    </ul>
+                  </div>
+                </article>
+
+                <aside className="spec-highlight-card" aria-label="Ringkasan Kapabilitas Model">
+                  <div>
+                    <span className="info-card-badge badge-yellow" style={{ background: '#000000', color: '#FFEB3B' }}>Kinerja Inferensi</span>
+                    <h3 className="spec-highlight-title" style={{ marginTop: '12px' }}>Segmentasi Birefnet Tingkat Lanjut</h3>
+                    <p style={{ marginTop: '8px', fontSize: '0.875rem' }}>
+                      Algoritma BiRefNet memetakan peta kedalaman bilateral resolusi tinggi untuk memisahkan latar belakang tanpa kehilangan detail rambut dan batas tepi tipis.
+                    </p>
+                  </div>
+                  <div className="spec-stat-grid">
+                    <div className="spec-stat-box">
+                      <span className="spec-stat-val">6 Model</span>
+                      <span className="spec-stat-label">Pilihan Segmentasi</span>
+                    </div>
+                    <div className="spec-stat-box">
+                      <span className="spec-stat-val">20 MB</span>
+                      <span className="spec-stat-label">Maksimal Berkas</span>
+                    </div>
+                  </div>
+                </aside>
+              </div>
+
+              {/* Row 2: Format & Privasi Data (Spec highlight on left, Text on right - ZIG ZAG) */}
+              <div className="zigzag-row">
+                <aside className="spec-highlight-card card-blue" aria-label="Keamanan dan Format">
+                  <div>
+                    <span className="info-card-badge badge-blue" style={{ background: '#000000', color: '#2196F3' }}>Standar Privasi</span>
+                    <h3 className="spec-highlight-title" style={{ marginTop: '12px' }}>ZeroGPU Ephemeral Processing</h3>
+                    <p style={{ marginTop: '8px', fontSize: '0.875rem' }}>
+                      Berkas gambar dieksekusi langsung di memori GPU terisolasi dan dihapus seketika setelah keluaran PNG dikirimkan. Tidak ada penyimpanan permanen di server.
+                    </p>
+                  </div>
+                  <div className="spec-stat-grid">
+                    <div className="spec-stat-box">
+                      <span className="spec-stat-val">32-Bit</span>
+                      <span className="spec-stat-label">PNG Kanal RGBA</span>
+                    </div>
+                    <div className="spec-stat-box">
+                      <span className="spec-stat-val">100%</span>
+                      <span className="spec-stat-label">Dimensi Asli Utuh</span>
+                    </div>
+                  </div>
+                </aside>
+
+                <article className="info-card">
+                  <div>
+                    <div className="info-card-header">
+                      <span className="info-card-badge badge-red">Format &amp; Keamanan</span>
+                      <h2>Format &amp; Integritas Data</h2>
+                    </div>
+                    <ul className="model-list">
+                      <li className="model-item"><strong>Format Masukan:</strong> Mendukung berkas JPG, JPEG, PNG, dan WEBP hingga ukuran 20MB.</li>
+                      <li className="model-item"><strong>Format Keluaran:</strong> Format PNG dengan kanal alpha transparan penuh tanpa penurunan resolusi dimensi gambar asli.</li>
+                      <li className="model-item"><strong>Privasi Pengguna:</strong> Seluruh pemrosesan inferensi berjalan sementara di infrastruktur Hugging Face ZeroGPU tanpa pencatatan log konten gambar.</li>
+                      <li className="model-item"><strong>Perlindungan Bot:</strong> Dilindungi oleh Cloudflare Turnstile tanpa captcha yang mengganggu kenyamanan pengguna.</li>
+                    </ul>
+                  </div>
+                </article>
+              </div>
             </div>
           </section>
         </div>

frontend/src/lib/analytics.js

@@ -0,0 +1,38 @@
+/**
+ * Safe, privacy-first telemetry dispatcher.
+ * Dispatches events only if an authorized provider (Google Analytics gtag or Plausible) is mounted.
+ * Never collects or transmits personal data, filenames, or image content.
+ */
+
+export function trackEvent(eventName, params = {}) {
+  if (typeof window === 'undefined') return
+
+  // 1. Google Analytics (gtag)
+  if (typeof window.gtag === 'function') {
+    try {
+      window.gtag('event', eventName, params)
+    } catch (e) {
+      // Suppress analytics dispatch errors to never disrupt UI
+    }
+  }
+
+  // 2. Plausible Analytics
+  if (typeof window.plausible === 'function') {
+    try {
+      window.plausible(eventName, { props: params })
+    } catch (e) {
+      // Suppress analytics dispatch errors
+    }
+  }
+
+  // 3. Custom Event for extensible listeners
+  try {
+    window.dispatchEvent(
+      new CustomEvent('rembg:track', {
+        detail: { eventName, params },
+      })
+    )
+  } catch (e) {
+    // Suppress custom event errors
+  }
+}

frontend/src/lib/rate-limit.js

@@ -0,0 +1,59 @@
+/**
+ * In-memory sliding-window rate limiter for API endpoints.
+ * Minimal zero-dependency implementation.
+ */
+
+const ipRequests = new Map()
+
+// Clean up expired entries every 5 minutes to prevent memory leaks
+const CLEANUP_INTERVAL_MS = 5 * 60 * 1000
+let lastCleanup = Date.now()
+
+function cleanupExpired(windowMs) {
+  const now = Date.now()
+  if (now - lastCleanup < CLEANUP_INTERVAL_MS) return
+  lastCleanup = now
+
+  for (const [ip, timestamps] of ipRequests.entries()) {
+    const valid = timestamps.filter((t) => now - t < windowMs)
+    if (valid.length === 0) {
+      ipRequests.delete(ip)
+    } else {
+      ipRequests.set(ip, valid)
+    }
+  }
+}
+
+/**
+ * Check if a request from an IP should be rate limited.
+ * @param {string} ip - Client IP identifier
+ * @param {number} maxRequests - Maximum allowed requests in the time window
+ * @param {number} windowMs - Window duration in milliseconds (default: 60,000ms = 1 minute)
+ * @returns {{ allowed: boolean, remaining: number, resetMs: number }}
+ */
+export function checkRateLimit(ip = '127.0.0.1', maxRequests = 15, windowMs = 60_000) {
+  const now = Date.now()
+  cleanupExpired(windowMs)
+
+  const timestamps = ipRequests.get(ip) || []
+  const validTimestamps = timestamps.filter((t) => now - t < windowMs)
+
+  if (validTimestamps.length >= maxRequests) {
+    const oldestTimestamp = validTimestamps[0]
+    const resetMs = windowMs - (now - oldestTimestamp)
+    return {
+      allowed: false,
+      remaining: 0,
+      resetMs: Math.max(0, resetMs),
+    }
+  }
+
+  validTimestamps.push(now)
+  ipRequests.set(ip, validTimestamps)
+
+  return {
+    allowed: true,
+    remaining: maxRequests - validTimestamps.length,
+    resetMs: windowMs,
+  }
+}

frontend/src/lib/rate-limit.test.js

@@ -0,0 +1,29 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { checkRateLimit } from './rate-limit.js'
+
+test('rate limiter allows requests within threshold', () => {
+  const ip = 'test-ip-1'
+  const result1 = checkRateLimit(ip, 3, 1000)
+  assert.equal(result1.allowed, true)
+  assert.equal(result1.remaining, 2)
+
+  const result2 = checkRateLimit(ip, 3, 1000)
+  assert.equal(result2.allowed, true)
+  assert.equal(result2.remaining, 1)
+
+  const result3 = checkRateLimit(ip, 3, 1000)
+  assert.equal(result3.allowed, true)
+  assert.equal(result3.remaining, 0)
+})
+
+test('rate limiter blocks requests exceeding threshold', () => {
+  const ip = 'test-ip-blocked'
+  checkRateLimit(ip, 2, 5000)
+  checkRateLimit(ip, 2, 5000)
+
+  const blocked = checkRateLimit(ip, 2, 5000)
+  assert.equal(blocked.allowed, false)
+  assert.equal(blocked.remaining, 0)
+  assert.ok(blocked.resetMs > 0)
+})