# Tutorial Hari 7: CSS & Layout

## 🎯 Tujuan
- Memahami CSS Variables dan penggunaannya
- Membuat file CSS global
- Memahami Flexbox dan Grid
- Membuat komponen reusable

---

## 📚 Teori: CSS Variables

### Apa itu CSS Variables?

CSS Variables (Custom Properties) adalah cara menyimpan nilai yang bisa dipakai berulang di seluruh stylesheet.

```css
/* Definisi variabel */
:root {
    --primary: #2563eb;
    --danger: #ef4444;
}

/* Penggunaan */
.btn-primary {
    background: var(--primary);  /* #2563eb */
}

.btn-danger {
    background: var(--danger);   /* #ef4444 */
}
```

### Keuntungan CSS Variables

| Tanpa Variables | Dengan Variables |
|-----------------|------------------|
| Warna ditulis berulang | Definisi sekali, pakai di mana-mana |
| Ganti warna = edit banyak tempat | Ganti di `:root`, berubah semua |
| Sulit konsisten | Konsisten otomatis |

---

## 📚 Teori: Flexbox vs Grid

### Flexbox

Untuk layout **1 dimensi** (baris ATAU kolom):

```css
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
```

| Property | Fungsi |
|----------|--------|
| `display: flex` | Aktifkan flexbox |
| `flex-direction` | Arah (row/column) |
| `justify-content` | Posisi horizontal |
| `align-items` | Posisi vertikal |
| `gap` | Jarak antar item |

### Grid

Untuk layout **2 dimensi** (baris DAN kolom):

```css
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
```

| Property | Fungsi |
|----------|--------|
| `display: grid` | Aktifkan grid |
| `grid-template-columns` | Jumlah kolom |
| `grid-template-rows` | Jumlah baris |
| `gap` | Jarak antar cell |

### Kapan Pakai Apa?

| Kasus | Gunakan |
|-------|---------|
| Navbar (horizontal menu) | Flexbox |
| Card grid (banyak kolom) | Grid |
| Sidebar + content | Grid |
| Tombol berjajar | Flexbox |

---

## 1. Buat File style.css

### Langkah 1: Buat file baru

1. Klik kanan folder **assets/css**
2. New File → `style.css`

### Langkah 2: Tulis CSS

```css
/**
 * ==========================================
 * WebGIS Pemetaan Desa - Global Styles
 * ==========================================
 */

/* ==========================================
   CSS VARIABLES
   ========================================== */
:root {
    /* Warna utama */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    
    /* Warna status */
    --secondary: #64748b;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    
    /* Warna abu-abu */
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
}

/* ==========================================
   RESET - Menghilangkan default browser
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   BODY - Style dasar
   ========================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--gray-100);
}

/* ==========================================
   LINKS
   ========================================== */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==========================================
   CONTAINER
   ========================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--gray-800);
    text-decoration: none;
}

.navbar-brand i {
    color: var(--primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-links a {
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.875rem;
}

.nav-links a:hover {
    color: var(--primary);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    color: white;
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

/* ==========================================
   CARDS
   ========================================== */
.card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

/* ==========================================
   ALERTS
   ========================================== */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

/* ==========================================
   FORMS
   ========================================== */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ==========================================
   UTILITIES
   ========================================== */
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--gray-500); }
.text-center { text-align: center; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
```

---

## 📚 Penjelasan Kode CSS

### 1. Reset CSS

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```

| Property | Fungsi |
|----------|--------|
| `*` | Selector untuk SEMUA elemen |
| `margin: 0` | Hapus margin default |
| `padding: 0` | Hapus padding default |
| `box-sizing: border-box` | Ukuran elemen include padding & border |

### 2. Sticky Navbar

```css
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}
```

| Property | Fungsi |
|----------|--------|
| `position: sticky` | Tetap di posisi saat scroll |
| `top: 0` | Posisi dari atas |
| `z-index: 100` | Di atas elemen lain |

### 3. Button Transition

```css
.btn {
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--primary-dark);
}
```

| Property | Fungsi |
|----------|--------|
| `transition: all 0.2s` | Animasi perubahan 0.2 detik |
| `:hover` | Style saat mouse di atas |

---

## 2. Daftar Component

### Komponen yang Tersedia

| Class | Kegunaan | Contoh |
|-------|----------|--------|
| `.navbar` | Bar navigasi | Header website |
| `.btn` | Tombol | Submit, Cancel |
| `.btn-primary/secondary/etc` | Varian tombol | Warna berbeda |
| `.card` | Kotak konten | Dashboard widget |
| `.alert` | Pesan notifikasi | Error, Success |
| `.form-group` | Wrapper input | Label + input |
| `.form-control` | Input field | Text, email, etc |

### Cara Pakai

```html
<!-- Button -->
<button class="btn btn-primary">
    <i class="fas fa-save"></i> Simpan
</button>

<!-- Card -->
<div class="card">
    <div class="card-header">Judul</div>
    <div class="card-body">Konten...</div>
</div>

<!-- Alert -->
<div class="alert alert-success">
    Berhasil disimpan!
</div>

<!-- Form -->
<div class="form-group">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
</div>
```

---

## 📁 Struktur Akhir Hari 7

```
📁 pemetaan-desa/
├── 📁 assets/
│   ├── 📁 css/
│   │   └── 📄 style.css      ← BARU
│   └── 📁 js/
└── ...
```

---

**← [Hari 6: CRUD Fasilitas](hari6.md) | [Hari 8: Dashboard](hari8.md) →**
