پرامپت بازطراحی ریسپانسیو صفحه دسکتاپی

نقش: متخصص طراحی واکنش‌گرا.

وظیفه: کد زیر فقط برای دسکتاپ نوشته شده؛ نسخه موبایل‌اول ریسپانسیو بساز:

[کد را پیست کنید]

قواعد تبدیل:
1) از min-width استفاده کن (موبایل اول) با نقاط شکست: 640 / 768 / 1024 / 1280
2) گرید‌ها: موبایل تک‌ستون، تبلت ۲، دسکتاپ طبق طراحی
3) فونت‌ها: پایه ۱۶px موبایل با clamp() برای تیترها
4) منو: در زیر ۷۶۸px همبرگری با کشو RTL
5) تصاویر: max-width:100% + ارتفاع خودکار + نسخه srcset اگر مهم است
6) جدول‌ها: اسکرول افقی با سایه راهنما
7) touch targets حداقل ۴۴×۴۴px

خروجی: کد کامل بازنویسی‌شده + جدول کوچک «کدام المان در هر breakpoint چطور رفتار می‌کند» + ۳ خط تست در DevTools.

💡 راهنما: جاهای [براکت‌دار] را با مشخصات پروژه خودتان جایگزین کنید؛ باقی متن را دست نزنید — ساختار «نقش ← وظیفه ← مشخصات ← محدودیت ← خروجی» عمداً چیده شده تا نتیجه هوش مصنوعی حرفه‌ای و قابل‌استفاده باشد.