/*
**نکات مهم برای نمایش صحیح:**
1. این کد CSS را باید در بخش “استایل‌های سفارشی” (Custom CSS) وب‌سایت خود یا در فایل style.css قالب خود قرار دهید.
2. برای فونت، از فونت‌های رایج فارسی مانند “Vazirmatn”, “Iran Sans”, “Sahel” یا مشابه آن استفاده کنید. در صورت عدم وجود این فونت‌ها، فونت‌های پیش‌فرض سیستم نمایش داده می‌شوند.
3. ساختار HTML اصلی مقاله در ادامه آمده است که باید آن را در ویرایشگر بلوک یا کلاسیک خود کپی کنید. ویرایشگر بلوک به طور خودکار تگ‌های H1، H2 و H3 را به عنوان هدینگ تشخیص می‌دهد و استایل‌های تعریف شده اعمال می‌شوند.
4. برای ریسپانسیو بودن جداول در موبایل، از CSS زیر استفاده شده است که در دستگاه‌های کوچک‌تر ستون‌ها را به صورت بلاک (Stack) نمایش می‌دهد.
5. برای بهترین تجربه، از یک ویرایشگر HTML مانند ویرایشگر “متن” در وردپرس (Text Editor) برای چسباندن کد استفاده کنید و سپس به ویرایشگر “دیداری” (Visual Editor) برگردید.
*/

/* — فونت‌‌ها (نمونه) — */
/*
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘path/to/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘path/to/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: bold;
font-style: normal;
}
*/

/* — استایل‌های عمومی — */
body {
font-family: ‘Vazirmatn’, ‘Iran Sans’, ‘Tahoma’, sans-serif; /* فونت پیشنهادی */
line-height: 1.7;
color: #333; /* رنگ متن اصلی */
background-color: #F8F8F8; /* رنگ پس‌زمینه کلی صفحه */
margin: 0;
padding: 0;
direction: rtl; /* برای زبان فارسی */
text-align: right; /* برای زبان فارسی */
}

.container {
max-width: 900px; /* حداکثر عرض محتوا برای دسکتاپ و تبلت */
margin: 20px auto; /* فاصله از بالا و پایین و وسط چین */
padding: 25px 30px; /* پدینگ داخلی */
background-color: #FFFFFF; /* پس‌زمینه بخش محتوا */
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* سایه ملایم */
border-radius: 12px; /* گوشه‌های گرد */
}

/* — استایل‌ هدینگ‌ها — */
h1 {
font-size: 2.8em; /* اندازه بزرگ */
font-weight: 800; /* بسیار ضخیم */
color: #1A237E; /* آبی تیره (رنگ اصلی برند) */
text-align: center;
margin-bottom: 40px;
line-height: 1.3;
padding-bottom: 15px;
border-bottom: 4px solid #E3F2FD; /* خط زیرین آبی روشن */
}

h2 {
font-size: 2.2em; /* اندازه بزرگتر */
font-weight: 700; /* ضخیم */
color: #004D40; /* سبز تیره (رنگ ثانویه) */
border-bottom: 3px solid #E8F5E9; /* خط زیرین ملایم */
padding-bottom: 10px;
margin-top: 45px;
margin-bottom: 25px;
}

h3 {
font-size: 1.6em; /* اندازه متوسط */
font-weight: 600; /* نیمه ضخیم */
color: #303F9F; /* آبی متوسط */
margin-top: 35px;
margin-bottom: 18px;
position: relative;
padding-right: 15px;
}

/* برای افزودن یک عنصر بصری کوچک قبل از H3 */
h3::before {
content: ‘🔹’; /* یک نقطه یا الماس کوچک */
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #4CAF50; /* سبز ملایم */
font-size: 0.8em;
}

/* — استایل‌ پاراگراف‌ها و لیست‌ها — */
p {
margin-bottom: 1.4em;
text-align: justify;
line-height: 1.8;
}

ul, ol {
margin-bottom: 1.4em;
padding-right: 25px; /* پدینگ برای لیست‌ها */
list-style-position: inside; /* موقعیت نشانگر لیست */
}

li {
margin-bottom: 0.8em;
padding-right: 5px; /* برای فاصله از نشانگر */
}

/* — استایل‌ جدول محتوا (Table of Contents) — */
.table-of-contents {
background-color: #F3F6F9; /* پس‌زمینه آبی بسیار روشن */
border-right: 5px solid #90CAF9; /* نوار آبی در سمت راست */
padding: 20px 25px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.table-of-contents h3 {
margin-top: 0;
color: #3F51B5; /* آبی تیره تر برای عنوان فهرست */
text-align: center;
border-bottom: 1px dashed #BDBDBD;
padding-bottom: 10px;
margin-bottom: 20px;
}

.table-of-contents ul {
list-style: none; /* حذف نشانگر پیش‌فرض */
padding: 0;
margin: 0;
}

.table-of-contents ul li {
margin-bottom: 8px;
}

.table-of-contents ul li a {
text-decoration: none;
color: #555;
display: block;
padding: 7px 10px;
transition: all 0.2s ease;
border-radius: 4px;
}

.table-of-contents ul li a:hover {
color: #1A237E; /* آبی تیره در هاور */
background-color: #E3F2FD; /* پس‌زمینه آبی روشن در هاور */
font-weight: bold;
transform: translateX(-5px); /* حرکت جزئی در هاور */
}

/* — استایل‌ جدول استاندارد — */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 30px 0;
font-size: 0.95em;
min-width: 300px; /* حداقل عرض برای جلوگیری از بهم ریختگی */
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden; /* برای نمایش گوشه‌های گرد در جدول */
}

table th, table td {
padding: 14px 18px;
border: 1px solid #E0E0E0; /* خطوط جدول */
text-align: right;
}

table th {
background-color: #E3F2FD; /* آبی روشن برای سرتیتر */
color: #1A237E; /* آبی تیره برای متن سرتیتر */
font-weight: bold;
font-size: 1.05em;
}

table tr:nth-child(even) {
background-color: #fcfdff; /* رنگ پس‌زمینه برای ردیف‌های زوج */
}

table tr:hover {
background-color: #eef7ff; /* رنگ پس‌زمینه در هاور */
}

/* — استایل‌ اینفوگرافیک بصری (جایگزین گرافیکی) — */
.infographic-box {
background-color: #E8F5E9; /* سبز روشن */
border-radius: 12px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
border-right: 6px solid #4CAF50; /* نوار سبز در سمت راست */
}

.infographic-box h3 {
color: #1B5E20; /* سبز تیره برای عنوان اینفوگرافیک */
margin-top: 0;
text-align: center;
border-bottom: 1px dashed #A5D6A7;
padding-bottom: 15px;
margin-bottom: 25px;
}

.infographic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* شبکه ریسپانسیو */
gap: 25px;
}

.infographic-item {
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
display: flex;
align-items: flex-start;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-top: 4px solid #A5D6A7;
}

.infographic-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.infographic-item span.icon {
font-size: 2.2em;
margin-left: 18px;
color: #4CAF50; /* سبز برای آیکون */
line-height: 1;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
}

.infographic-item div {
flex-grow: 1;
}

.infographic-item h4 {
margin-top: 0;
margin-bottom: 8px;
color: #388E3C; /* سبز تیره تر برای عنوان آیتم */
font-size: 1.2em;
}

.infographic-item p {
margin: 0;
text-align: right;
font-size: 0.95em;
line-height: 1.6;
}

/* — استایل‌ بخش پرسش‌های متداول (FAQ) — */
.faq-section {
background-color: #FDF9E3; /* پس‌زمینه زرد بسیار روشن */
border-left: 5px solid #FFD54F; /* نوار زرد در سمت چپ */
padding: 25px 30px;
margin-top: 40px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.faq-section h3 {
color: #FBC02D; /* زرد پررنگ */
text-align: center;
border-bottom: 1px dashed #FFECB3;
padding-bottom: 10px;
margin-bottom: 20px;
}

.faq-item {
margin-bottom: 15px;
}

.faq-question {
font-weight: bold;
color: #555;
margin-bottom: 5px;
display: flex;
align-items: center;
}

.faq-question::before {
content: ‘❓’; /* آیکون سوال */
margin-left: 10px;
font-size: 1.2em;
color: #FFB300;
}

.faq-answer {
color: #666;
margin-right: 35px; /* برای هم‌راستا شدن با متن سوال */
}

/* — ریسپانسیو برای موبایل و تبلت — */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px 20px;
border-radius: 8px;
}
h1 { font-size: 2.2em !important; margin-bottom: 30px; }
h2 { font-size: 1.8em !important; margin-top: 35px; margin-bottom: 20px; }
h3 { font-size: 1.4em !important; margin-top: 25px; margin-bottom: 15px; padding-right: 10px;}
h3::before { font-size: 0.7em; } /* آیکون کوچکتر */
p { font-size: 0.95em; line-height: 1.7; }

.table-of-contents, .infographic-box, .faq-section {
padding: 15px 20px;
margin-top: 30px;
margin-bottom: 30px;
}

/* ریسپانسیو کردن جداول برای موبایل */
table {
display: block;
overflow-x: auto; /* برای اسکرول افقی در جداول عریض */
white-space: nowrap; /* جلوگیری از شکستن کلمات */
-webkit-overflow-scrolling: touch; /* اسکرول بهتر در iOS */
}
table thead {
display: none; /* مخفی کردن سرتیتر در موبایل */
}
table tbody, table tr {
display: block;
width: 100%;
}
table td {
display: block;
text-align: right;
border-bottom: 1px solid #eee;
padding: 10px 15px;
white-space: normal; /* بازگرداندن شکستن کلمات */
position: relative;
}
table td:before {
content: attr(data-label); /* نمایش عنوان ستون از ویژگی data-label */
position: absolute;
right: 15px;
top: 10px;
width: calc(45% – 15px);
font-weight: bold;
color: #1A237E;
text-align: left;
}
table td:not(:first-child) { /* تنظیم پدینگ برای داده‌ها */
padding-top: 35px; /* فضای بیشتر برای نمایش data-label */
}

.infographic-grid {
grid-template-columns: 1fr; /* یک ستون در موبایل */
}
.infographic-item {
flex-direction: column; /* چینش عمودی در موبایل */
align-items: center;
text-align: center;
padding: 18px;
}
.infographic-item span.icon {
margin: 0 0 10px 0; /* فاصله آیکون از متن */
}
.infographic-item h4 {
text-align: center;
}
.infographic-item p {
text-align: justify; /* متن پاراگراف همچنان justify باشد */
}
.faq-question::before {
margin-left: 8px;
}
.faq-answer {
margin-right: 25px;
}
}

/* — استایل برای تلوزیون (با فرض رزولوشن بالا) — */
@media (min-width: 1200px) {
.container {
max-width: 1100px; /* پهنای بیشتر برای نمایشگرهای بزرگتر */
padding: 40px 50px;
}
h1 { font-size: 3.5em; margin-bottom: 50px; }
h2 { font-size: 2.8em; margin-top: 60px; margin-bottom: 35px; }
h3 { font-size: 2em; margin-top: 45px; margin-bottom: 25px; }
p { font-size: 1.1em; line-height: 1.9; }
.infographic-grid {
grid-template-columns: repeat(3, 1fr); /* 3 ستون برای نمایشگرهای خیلی بزرگ */
gap: 30px;
}
}

“`