# UI Design System

Bu dokuman ERP + CRM arayuzunun ortak tasarim kararlarini tanimlar. Sayfa tasarimi degil, tum sayfalarda kullanilacak temel sistemdir.

## Tema

- Ana renk: `#ffbe00`
- Koyu gri: `#3b3b39`
- Beyaz: `#ffffff`
- Arka plan: `#202020`
- Kart yuzeyi: `#2b2b2b`
- Border: `rgba(255, 255, 255, .08)`

Ana tema modern dark dashboard hissi verir. Glassmorphism, soft shadow, glow effect ve kontrollu micro animation kullanilir.

## CSS Giris Dosyasi

Tum stiller su dosyadan yuklenmelidir:

```html
<link rel="stylesheet" href="/assets/css/app.css">
```

`app.css` su katmanlari toplar:

- `base/reset.css`
- `base/variables.css`
- `base/typography.css`
- `themes/dark-premium.css`
- `layouts/app-layout.css`
- `layouts/auth-layout.css`
- `components/*.css`

## Tokenlar

Tasarim tokenlari `public/assets/css/base/variables.css` icindedir.

- Renkler: `--color-primary`, `--color-bg`, `--color-surface`, `--color-text`
- Spacing: `--space-1` ile `--space-12`
- Radius: `--radius-xs` ile `--radius-xl`
- Shadow: `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-glow`
- Layout: `--layout-sidebar-width`, `--layout-navbar-height`
- Motion: `--transition-fast`, `--transition-base`, `--ease-premium`

## Ana Siniflar

- Button: `.ui-btn`, `.ui-btn-primary`, `.ui-btn-ghost`, `.ui-icon-btn`
- Input: `.ui-field`, `.ui-label`, `.ui-input`, `.ui-select`, `.ui-textarea`
- Card: `.ui-card`, `.ui-stat-card`, `.ui-card-header`
- Modal: `.ui-modal-backdrop`, `.ui-modal`, `.ui-modal-header`, `.ui-modal-body`
- Alert: `.ui-alert`, `.ui-alert-success`, `.ui-alert-warning`, `.ui-alert-danger`
- Badge: `.ui-badge`, `.ui-badge.is-new`
- Table: `.ui-table-wrap`, `.ui-table`
- Pagination: `.ui-pagination`, `.ui-page-link`
- Sidebar: `.ui-sidebar`, `.ui-sidebar-link`
- Navbar: `.ui-navbar`
- Dropdown: `.ui-dropdown`, `.ui-dropdown-item`
- Notification: `.ui-notification`, `.ui-notification-dot`
- Chart placeholder: `.ui-chart`
- Widget: `.ui-widget`, `.ui-widget-header`

## Animasyon

- Kart hover: `translateY(-4px)` ve sari glow
- Button hover: scale, soft glow ve light sweep
- Notification: pulse
- Badge: bounce
- Dashboard kartlari: yavas nefes animasyonu
- Sayfa/kart girisi: fade-in

## Kullanim Kurali

Yeni sayfa tasarlanirken once bu siniflar kullanilmali. Sayfaya ozel CSS sadece gerekli farklar icin `public/assets/css/pages/*.css` altinda yazilmalidir.