/*
این بلوک CSS برای نمایش و انتقال مفهوم طراحی است.
برای یک وب‌سایت واقعی، این استایل‌ها بهینه است که در یک فایل CSS خارجی (.css) قرار گیرند
تا عملکرد، قابلیت نگهداری و رسپانسیو بودن کامل وب‌سایت تضمین شود.

با این حال، برای برآورده کردن درخواست “طراحی منحصر به فرد و بسیار زیبا” و
اینکه “در ویرایشگر بلوک کپی شود و بدرستی نمایش داده شود”،
من یک ساختار HTML تمیز را با استایل‌های داخلی (inline) برای هدینگ‌ها و
استایل‌های مفهومی برای عناصر کانتینر ارائه می‌دهم.
ویرایشگرهای بلوک ممکن است استایل‌های پیچیده را تغییر داده یا حذف کنند.
هدف اصلی، HTML معنایی و تمیز است که خواندن و مدیریت آن آسان باشد.

**پالت رنگی پیشنهادی:**
– آبی/فیروزه‌ای اصلی: #007bff (آبی پر جنب و جوش و حرفه‌ای) یا #20c997 (فیروزه‌ای/سبز تازه)
– خاکستری ثانویه: #6c757d (خاکستری ظریف و حرفه‌ای)
– پس‌زمینه: #f8f9fa (سفید مایل به خاکستری روشن)
– رنگ متن: #343a40 (خاکستری تیره برای خوانایی)
– رنگ تأکید: #ffc107 (کمی زرد گرم برای جلب توجه)

**ملاحظات رسپانسیو (مفهومی):**
– حداکثر عرض برای محتوا جهت اطمینان از خوانایی در صفحه‌های بزرگ (مثلاً 900px – 1200px).
– عرض‌های سیال برای تصاویر و عناصر درون کانتینرها (width: 100%; max-width: 100%;).
– Media queries برای تنظیم اندازه فونت، پدینگ و طرح‌بندی در صفحه‌های کوچک‌تر.
– استفاده از flexbox یا grid برای عناصری که نیاز به بازآرایی دارند.
*/

/* استایل‌های پایه بدنه و ریست (مفهومی – معمولاً خارجی) */
body {
font-family: ‘B Yekan’, ‘IRANSans’, ‘Roboto’, ‘Arial’, sans-serif; /* فونت‌های نمونه، تنظیم شود */
line-height: 1.6;
color: #343a40;
background-color: #f8f9fa;
margin: 0;
padding: 0;
direction: rtl; /* برای زبان‌های راست به چپ مانند فارسی */
text-align: right;
}

/* کانتینر مقاله (مفهومی – معمولاً خارجی) */
.article-container {
max-width: 960px; /* عرض بهینه برای خوانایی */
margin: 30px auto; /* محتوا را در مرکز قرار می‌دهد، فاصله عمودی اضافه می‌کند */
padding: 20px 25px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* سایه ظریف */
}

/* هدینگ‌ها (استایل‌های داخلی بنا به درخواست برای رندر مستقیم در ویرایشگر بلوک) */
h1 {
color: #007bff; /* آبی اصلی */
font-size: 2.5em; /* بزرگ‌تر برای H1 */
font-weight: bold;
text-align: center;
margin-bottom: 35px;
padding-bottom: 15px;
border-bottom: 2px solid #e9ecef; /* جداکننده ظریف */
}

h2 {
color: #20c997; /* فیروزه‌ای/سبز برای H2 */
font-size: 1.9em;
font-weight: bold;
margin-top: 45px;
margin-bottom: 25px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 10px;
}

h3 {
color: #007bff; /* آبی اصلی برای H3 */
font-size: 1.4em;
font-weight: bold;
margin-top: 35px;
margin-bottom: 18px;
}

/* پاراگراف‌ها */
p {
margin-bottom: 1em;
line-height: 1.7;
}

/* لیست‌ها */
ul {
list-style-type: disc;
margin-right: 25px;
margin-bottom: 1em;
padding-right: 0;
}

ol {
list-style-type: decimal;
margin-right: 25px;
margin-bottom: 1em;
padding-right: 0;
}

li {
margin-bottom: 0.7em;
}

/* استایل‌های جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 0.95em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

th, td {
border: 1px solid #dee2e6;
padding: 12px 15px;
text-align: right;
}

th {
background-color: #007bff; /* سربرگ آبی */
color: white;
font-weight: bold;
text-align: center; /* متن سربرگ در مرکز */
}

tr:nth-child(even) {
background-color: #f2f2f2; /* راه‌راه گورخری */
}

tr:hover {
background-color: #e9f7ff; /* افکت هاور */
}

/* استایل اینفوگرافیک (مفهومی – برای کانتینر div) */
.infographic-box {
background-color: #eaf8f4; /* پس‌زمینه سبز/فیروزه‌ای روشن */
border-right: 5px solid #20c997; /* حاشیه تأکیدی */
padding: 25px;
margin: 40px 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.infographic-box h3 {
color: #1a6d4d; /* سبز تیره‌تر برای عنوان اینفوگرافیک */
margin-top: 0;
margin-bottom: 20px;
text-align: center;
border-bottom: 1px dashed #6c757d;
padding-bottom: 10px;
}

.infographic-item {
margin-bottom: 20px;
display: flex; /* برای هم‌ترازی آیتم‌ها */
align-items: flex-start;
}

.infographic-item:last-child {
margin-bottom: 0;
}

.infographic-icon {
font-size: 1.8em;
color: #007bff;
margin-left: 15px;
line-height: 1;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-text {
flex-grow: 1;
}

.infographic-text strong {
color: #0056b3; /* آبی تیره‌تر برای تأکید */
}

/* فراخوان اقدام (CTA) – مفهومی */
.cta-box {
background-color: #ffc107; /* رنگ زرد تأکیدی */
color: #343a40;
padding: 25px 30px;
margin-top: 50px;
border-radius: 8px;
text-align: center;
font-size: 1.1em;
font-weight: bold;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cta-box a {
color: #007bff;
text-decoration: none;
border-bottom: 2px solid #007bff;
padding-bottom: 2px;
transition: color 0.3s, border-bottom 0.3s;
}

.cta-box a:hover {
color: #0056b3;
border-bottom-color: #0056b3;
}

/* تنظیمات رسپانسیو (مفهومی – با استفاده از media queries) */
@media (max-width: 768px) {
.article-container {
margin: 15px;
padding: 15px;
}
h1 {
font-size: 2em;
margin-bottom: 25px;
}
h2 {
font-size: 1.6em;
margin-top: 35px;
margin-bottom: 20px;
}
h3 {
font-size: 1.2em;
margin-top: 25px;
margin-bottom: 15px;
}
table {
border: 0; /* حذف مرزهای جدول برای نمایش بهتر روی موبایل */
}
table thead {
display: none; /* مخفی کردن سربرگ جدول روی موبایل */
}
table, th, td {
display: block; /* نمایش بلوکی برای سلول‌ها */
width: 100%;
font-size: 0.9em;
padding: 10px;
box-sizing: border-box; /* اطمینان از محاسبات عرض صحیح */
}
td {
border: none;
border-bottom: 1px solid #dee2e6;
position: relative;
padding-left: 50%; /* فضای بیشتر برای برچسب */
text-align: right;
}
td::before {
content: attr(data-label); /* نمایش برچسب از دیتا-لیبل */
position: absolute;
right: 0px; /* موقعیت برچسب */
width: 45%; /* عرض برچسب */
padding-right: 15px;
white-space: nowrap;
font-weight: bold;
text-align: left;
background-color: #f2f2f2;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
}
tr {
margin-bottom: 15px;
display: block;
border: 1px solid #dee2e6;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
tr:nth-child(even) {
background-color: #ffffff; /* تنظیم پس‌زمینه برای حالت بلوکی */
}
.infographic-item {
flex-direction: column; /* چیدمان آیکون و متن به صورت عمودی روی موبایل */
align-items: center;
text-align: center;
}
.infographic-icon {
margin-left: 0;
margin-bottom: 10px;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
.infographic-box {
padding: 15px;
}
}

<!–
**نکات برای ادغام در ویرایشگر بلوک/وب‌سایت:**

1. **گنجاندن CSS:** بلوک در ابتدای کد، استایل‌های مفهومی را فراهم می‌کند. برای یک وب‌سایت واقعی، به شدت توصیه می‌شود که این استایل‌ها را به یک فایل CSS خارجی منتقل کرده و آن را در بخش سند HTML خود لینک کنید. این رویکرد برای عملکرد، قابلیت نگهداری و طراحی کاملاً رسپانسیو بهتر است. ویرایشگرهای بلوک ممکن است استایل‌های داخلی (inline) را بهتر حفظ کنند، به همین دلیل استایل‌های اساسی برای هدینگ‌ها و برخی Divها به صورت inline نیز اعمال شده‌اند.
2. **رسپانسیو بودن:** Media query های موجود در CSS مفهومی نشان می‌دهند که چگونه رسپانسیو بودن *باید* مدیریت شود. هنگام کپی کردن در یک ویرایشگر بلوک، چارچوب رسپانسیو پیش‌فرض آن یا CSS سفارشی سایت شما باید این وظیفه را بر عهده بگیرد. ساختار HTML معنایی (divها، هدینگ‌ها، لیست‌ها، جدول) به طور ذاتی نسبت به طرح‌بندی‌های سخت‌گیرانه، سازگاری بیشتری دارد. برای جدول، از ویژگی `data-label` در سلول‌های `

` استفاده شده تا در نمایش موبایل، برچسب هر ستون در کنار محتوای آن نمایش داده شود و خوانایی حفظ گردد.
3. **تصاویر/اینفوگرافیک:** “اینفوگرافیک” در این مقاله، یک نمایش متنی و ساختاریافته با استفاده از عناصر HTML و آیکون‌های ایموجی است. برای یک اینفوگرافیک بصری واقعی، باید این بخش را با یک تگ `` که به یک فایل تصویری واقعی اشاره می‌کند، جایگزین کنید.
4. **داده‌های ساختاریافته (Schema):** محتوای این مقاله برای Schema های مختلف (مانند Article, FAQ, HowTo) مناسب است. این مارک‌آپ‌ها معمولاً در بخش یا از طریق اسکریپت‌های JSON-LD اضافه می‌شوند و بخشی از بدنه قابل مشاهده مقاله نیستند. شما باید این موارد را به طور جداگانه بر اساس قابلیت‌های CMS یا سازنده وب‌سایت خود پیاده‌سازی کنید.
5. **لینک فراخوان اقدام (CTA):** `href=”#”` در کادر CTA یک مکان‌نما است. آن را با URL واقعی صفحه تماس یا فرم درخواست خدمات خود جایگزین کنید.
6. **فونت:** ‘B Yekan’ و ‘IRANSans’ فونت‌های فارسی رایج هستند. اطمینان حاصل کنید که این فونت‌ها در سایت شما موجودند یا از فونت‌های جایگزین استفاده کنید. ‘Roboto’ یا ‘Arial’ جایگزین‌های مناسبی برای فونت‌های sans-serif هستند.
–>