# طراحی، تعامل و تجربه کاربری

## ۱. سیستم طراحی

پیکربندی: `frontend/tailwind.config.ts` و `frontend/styles/globals.css`

### تایپوگرافی
تنها یک خانواده‌ی قلم: **Vazirmatn** (چهار وزن، محلی در `public/fonts/`).
هیچ ترکیب تصادفی بین قلم متن و تیتر وجود ندارد. مقیاس:

| کلاس | کاربرد |
|---|---|
| `display-xl`, `display-lg`, `display-md` | تیترها |
| `title` | سرتیتر بخش‌ها |
| `body-lg`, `body` | متن |
| `caption`, `micro` | فرعی و فراداده |

### رنگ
پالت: `ink` (خنثی)، `azure`، `turquoise` (تأکید)، `saffron` (هشدار)، `crimson` (خطر).

رنگ‌ها به‌صورت **توکن CSS با سه‌تایی RGB** تعریف شده‌اند:
`--surface-{base,raised,sunken}`, `--border-subtle`, `--text-{primary,secondary,muted}`,
`--accent`, `--chart-1..5`, `--grid-line`.

### حالت تیره واقعی
حالت تیره **مقادیر مستقل** دارد، نه وارونه‌سازی. سطوح در تاریکی به سمت آبی‌خاکستری
عمیق می‌روند، رنگ‌های نمودار اشباع کمتر و روشنایی بیشتری می‌گیرند تا کنتراست روی
پس‌زمینه تیره حفظ شود. انتخاب کاربر در `localStorage` با کلید `shahrnama-theme`
نگه داشته می‌شود و پیش از رنگ‌آمیزی اول اعمال می‌گردد (بدون پرش رنگ).

## ۲. الهام تعاملی — و مرز آن

الهام از تمپلیت موزه‌ی هنر گرفته شده، اما هیچ بخشی کپی نشده است. قاعده‌ی ما:
**هر تعامل باید یک مسئله‌ی اطلاعاتی حل کند، وگرنه حذف می‌شود.**

| ایده‌ی الهام‌گرفته | کاربرد در شهرنما | چرا ارزش دارد |
|---|---|---|
| Cross-Fade Spotlight | `SpotlightHero` روی اخبار برجسته | نمایش چند خبر مهم بدون اسلایدر پرشی |
| ذره‌بین ۴× | `Magnifier` فقط روی اینفوگرافیک‌ها | خواندن اعداد ریز نمودار بدون خروج از صفحه |
| خط زمانی افقی | `HorizontalTimeline` | سیر رویدادها بهتر از فهرست عمودی درک می‌شود |
| Drag-to-Look | `ExploreCanvas` برای سازمان و شهر | ساختار سلسله‌مراتبی سازمان با فهرست قابل درک نیست |
| Teleport Hotspots | نقاط داغ در صحنه‌ی کاوش | پرش مستقیم به اداره یا خدمت |
| Audio Guide | `AudioBriefing` با حلقه‌ی پیشرفت | شنیدن بریفینگ خبری هنگام رانندگی |

**جایی که استفاده نکردیم**: ذره‌بین روی عکس خبری معمولی، چون هیچ اطلاعات تازه‌ای
اضافه نمی‌کند و فقط مزاحم است.

## ۳. صفحه اصلی

۱۶ بخش با چیدمان‌های متفاوت (نه تکرار یک شبکه):
اسپات‌لایت ← نوار فوری ← تازه‌ترین اخبار در کنار ستون گزارش‌های مردمی ← نبض
سازمان‌ها/کسب‌وکارها ← برجسته‌های آماری ← خط زمانی ← نقشه ← پرگفت‌وگوترین و
پرگزارش‌ترین ← بریفینگ صوتی و موضوعات داغ ← داستان داده با ذره‌بین ← چندرسانه‌ای.

سه واریانت کارت خبر (`default` / `compact` / `wide`) تا ریتم بصری یکنواخت نشود.

## ۴. موبایل: نه نسخه‌ی کوچک‌شده

- ناوبری اصلی در موبایل به کشوی تمام‌صفحه با اولویت «جست‌وجو» و «ثبت گزارش» تبدیل می‌شود.
- جدول‌های داده در موبایل به کارت تبدیل می‌شوند، نه اسکرول افقی جدول.
- خط زمانی در لمس با کشیدن انگشت کار می‌کند (نه فقط چرخ ماوس).
- فرم ثبت گزارش در موبایل مرحله‌به‌مرحله است تا صفحه‌کلید فضا را نبلعد.
- نقشه در موبایل ارتفاع کمتر و کنترل لایه‌ی جمع‌شونده دارد.

## ۵. دسترس‌پذیری

| قابلیت | معادل دسترس‌پذیر |
|---|---|
| نمودار | دکمه‌ی «جدول» که همان داده را به‌صورت جدول متنی نشان می‌دهد |
| نقشه | فهرست متنی نقاط با نام، لایه و پیوند |
| خط زمانی | فهرست تاریخ‌دار قابل پیمایش با صفحه‌کلید |
| صحنه‌ی کاوش | حرکت با کلیدهای جهت‌دار و `Enter` برای ورود به لایه |
| بریفینگ صوتی | متن کامل خبر همیشه در دسترس |

همه‌ی انیمیشن‌ها `useReducedMotion` را رعایت می‌کنند.

## ۶. شفافیت به‌عنوان عنصر طراحی

این موارد اجزای بصری ثابت رابط کاربرند، نه پاورقی:

- برچسب **«داده نمونه»** روی هر موجودیت با `dataSource='demo'`
- کادر **«اصلاحیه رسمی»** بالای متن خبر، نه پایین آن
- نشان **«پاسخ رسمی سازمان»** با قاب متمایز روی پاسخ‌ها
- نمایش **مهلت پاسخ و نقض آن** در نمای عمومی پرونده
- درج اجباری **منبع، ناشر، روش‌شناسی و تاریخ** زیر هر نمودار
- جمله‌ی صریح وقتی داده نیست: «هنوز پاسخ رسمی ثبت نشده است. سامانه هیچ پاسخ
  خودکار یا شبیه‌سازی‌شده‌ای تولید نمی‌کند.»

## ۷. Command Palette

`Ctrl/⌘ + K` — فرمان‌های ثابت (رفتن به بخش‌ها، تغییر تم، ثبت گزارش) به‌علاوه‌ی
نتایج زنده‌ی تکمیل خودکار از همان API جست‌وجو.

## ۸. SEO

- `NewsArticle` JSON-LD در صفحه‌ی خبر
- `GovernmentOrganization` در صفحه‌ی سازمان
- `LocalBusiness` در صفحه‌ی کسب‌وکار — **بدون** `aggregateRating`، چون داده‌ی
  امتیازدهی واقعی وجود ندارد
- `Dataset` در صفحه‌ی مجموعه‌داده
- `sitemap.xml` پویا از محتوای منتشرشده
- `rss.xml` برای اخبار
- `robots.txt` با خروج مسیرهای پنل از نمایه‌سازی