# Design System: Teknik Ketenagalistrikan SMKN 1 Cirebon

## 1. Filosofi Visual
Proyek ini mengusung tema **"Dark Analytics & Industrial Engineering"**. Visual dirancang untuk memberikan kesan presisi, modern, dan futuristik, mencerminkan identitas jurusan teknik yang berurusan dengan energi dan teknologi tinggi.

## 2. Design Tokens

### Warna (Color Palette)
Semua warna didefinisikan dalam konfigurasi Tailwind CSS (`tailwind.config.js`).
* **Base Background (`electrical-base`)**: Hitam pekat dengan sedikit tint biru gelap untuk kedalaman. Digunakan sebagai latar belakang utama.
* **Surface (`electrical-surface`)**: Warna abu-abu gelap transparan. Digunakan untuk card, navbar, dan elemen mengambang.
* **Accent (`electrical-accent`)**: `#F0F941` (Neon Yellow). Warna utama untuk aksi, ikon, dan penekanan. Memberikan kontras tinggi terhadap latar gelap.
* **Accent Dim**: Versi gelap dari warna aksen, digunakan untuk gradient dan hover.
* **Text Main**: Putih tulang/abu-abu sangat terang agar nyaman di mata.
* **Text Muted**: Abu-abu redup untuk deskripsi dan informasi sekunder.
* **Border**: Putih transparan atau abu-abu gelap tipis untuk memisahkan section tanpa terlihat kaku.

### Tipografi (Typography)
* **Heading (Display)**: Menggunakan font sans-serif dengan bobot *Black/ExtraBold*. 
    * Gaya Khas: Judul besar sering menggunakan kombinasi teks tegak putih dan teks *italic* dengan gradasi aksen.
    * Tracking: *Tighter* (rapat) untuk judul besar agar terlihat solid.
* **Body (Sans)**: Menggunakan font sans-serif bersih. 
    * Line Height: *Relaxed* untuk meningkatkan keterbacaan pada blok teks panjang.

## 3. Komponen & Aturan Visual
* **Glassmorphism**: Gunakan `backdrop-blur-md` sampai `xl` pada elemen seperti Navbar dan Card untuk kesan transparan yang mewah.
* **Borders & Radius**: 
    * Radius besar (`rounded-2xl` sampai `rounded-[3rem]`) digunakan pada card utama.
    * Gunakan desain asimetris (contoh: sudut kiri atas dan kanan bawah lebih melengkung) untuk kesan *out of the box*.
* **Glow Effects**: Gunakan `drop-shadow` atau `blur` di latar belakang (bulatan besar dengan opacity sangat rendah 5%) untuk memberikan kedalaman (*depth*).

## 4. Animasi (GSAP Guidelines)
* **Reveal on Scroll**: Elemen harus muncul dengan gerakan halus dari bawah (`y: 50`) atau pudar (`opacity: 0`).
* **Magnetic Interaction**: Tombol utama menggunakan efek magnetik (mengikuti pergerakan kursor sedikit).
* **Sticky Content**: Pada section editorial, judul di sisi kiri harus tetap diam (*sticky*) sementara konten di kanan bergulir.

---
