/*
این بلوک CSS برای اطمینان از نمایش صحیح و ریسپانسیو محتوا در محیط‌های مختلف (موبایل، تبلت، لپ‌تاپ و تلویزیون) و همچنین ایجاد یک طراحی منحصر به فرد در ویرایشگر بلوک یا کلاسیک طراحی شده است.
رنگ‌بندی انتخابی آرام، حرفه‌ای و خوانا است.
*/
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif; /* فونت‌های خوانا برای فارسی */
line-height: 1.7; /* افزایش فاصله خطوط برای خوانایی بهتر */
color: #333333; /* رنگ متن اصلی: خاکستری تیره */
background-color: #f9f9f9; /* پس‌زمینه مقاله: خاکستری بسیار روشن */
margin: 0;
padding: 0;
direction: rtl; /* جهت متن از راست به چپ */
text-align: right; /* تراز متن به راست */
}

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

/* استایل‌های عمومی برای تیترها */
h1, h2, h3 {
margin-top: 2em; /* فاصله بیشتر بالای تیترها */
margin-bottom: 0.8em; /* فاصله مناسب پایین تیترها */
padding-bottom: 0.4em; /* پدینگ پایین برای خط جداکننده */
border-bottom: 2px solid #e0ac53; /* خط جداکننده با رنگ طلایی/نارنجی ملایم */
font-weight: bold; /* تیترها همیشه پررنگ */
}

/* استایل‌های اختصاصی برای H1 */
h1 {
font-size: 2.6em; /* سایز بزرگ برای عنوان اصلی */
color: #1a4a6e; /* آبی نفتی تیره */
border-bottom-width: 3px; /* خط جداکننده ضخیم‌تر برای H1 */
margin-top: 0; /* بدون فاصله از بالای کانتینر */
}

/* استایل‌های اختصاصی برای H2 */
h2 {
font-size: 2em; /* سایز مناسب برای بخش‌های اصلی */
color: #3a7ca5; /* آبی نفتی متوسط */
}

/* استایل‌های اختصاصی برای H3 */
h3 {
font-size: 1.5em; /* سایز مناسب برای زیربخش‌ها */
color: #5a9bc0; /* آبی نفتی روشن */
border-bottom: 1px solid #a8d0e6; /* خط جداکننده نازک‌تر و آبی روشن */
}

p {
margin-bottom: 1.2em; /* فاصله پایین پاراگراف‌ها */
text-align: justify; /* تراز دو طرفه برای خوانایی بهتر متن */
}

ul, ol {
margin-bottom: 1.2em;
padding-right: 25px; /* پدینگ از راست برای لیست‌ها */
list-style-position: inside; /* قرار گرفتن علامت لیست داخل محتوا */
}
li {
margin-bottom: 0.6em; /* فاصله بین آیتم‌های لیست */
line-height: 1.6;
}

strong {
color: #1a4a6e; /* رنگ پررنگ برای متن‌های مهم */
}

/* استایل‌بندی جدول برای زیبایی و ریسپانسیو بودن */
.responsive-table-container {
overflow-x: auto; /* اسکرول افقی برای جدول در صفحه نمایش‌های کوچک */
margin: 2.5em 0; /* فاصله از بالا و پایین */
}
.data-table {
width: 100%;
border-collapse: collapse; /* حذف خطوط اضافی بین سلول‌ها */
font-size: 0.98em;
background-color: #fdfdfd; /* پس‌زمینه کمی روشن‌تر برای جدول */
border: 1px solid #a8d0e6; /* بوردر کلی جدول */
border-radius: 8px; /* گرد کردن گوشه‌های جدول */
}
.data-table th, .data-table td {
border: 1px solid #dbe9f4; /* بوردر داخلی سلول‌ها */
padding: 14px 18px; /* پدینگ داخلی سلول‌ها */
text-align: right; /* تراز متن به راست */
}
.data-table th {
background-color: #eef7fc; /* پس‌زمینه آبی روشن برای هدر جدول */
color: #1a4a6e; /* رنگ متن هدر */
font-weight: bold;
font-size: 1.05em;
position: sticky; /* برای ثابت نگه داشتن هدر در اسکرول افقی */
top: 0;
}
.data-table tr:nth-child(even) {
background-color: #f7fcfd; /* رنگ‌آمیزی متناوب سطرها */
}
.data-table tr:hover {
background-color: #e6f2fa; /* افکت هاور برای سطرها */
}

/* استایل‌بندی اینفوگرافیک جایگزین (بلوک بصری متنی) */
.infographic-block {
background-color: #e6f2fa; /* پس‌زمینه آبی روشن */
border-right: 6px solid #a8d0e6; /* بوردر ضخیم سمت راست برای جلوه بصری */
padding: 25px 30px;
margin: 3em 0;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
font-size: 1.1em;
}
.infographic-title {
color: #1a4a6e;
font-weight: bold;
font-size: 1.6em;
margin-bottom: 1.5em;
text-align: center;
position: relative;
padding-bottom: 0.5em;
}
.infographic-title::after {
content: ”;
position: absolute;
right: 50%;
transform: translateX(50%);
bottom: 0;
width: 60px;
height: 3px;
background-color: #e0ac53; /* خط طلایی زیر عنوان اینفوگرافیک */
border-radius: 2px;
}
.infographic-step {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان افقی */
align-items: flex-start; /* آیتم‌ها در بالا تراز شوند */
margin-bottom: 1.8em;
gap: 18px; /* فاصله بین آیکون و متن */
line-height: 1.5;
}
.infographic-step-icon {
font-size: 2.2em; /* سایز بزرگتر برای آیکون‌های مرحله */
color: #e0ac53; /* رنگ طلایی برای آیکون‌ها */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px solid #e0ac53;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.infographic-step-text {
color: #333333;
flex-grow: 1; /* اجازه رشد به متن برای اشغال فضای موجود */
}
.infographic-step-text strong {
color: #3a7ca5; /* رنگ آبی نفتی برای متن پررنگ در اینفوگرافیک */
font-size: 1.1em;
}

/* بلوک نکات کلیدی / هایلایت */
.highlight-box {
background-color: #fff8e1; /* پس‌زمینه زرد روشن‌تر */
border: 1px solid #e0ac53; /* بوردر طلایی */
border-right: 5px solid #e0ac53; /* بوردر ضخیم‌تر سمت راست */
padding: 20px 25px;
margin: 3em 0;
border-radius: 8px;
font-size: 1.1em;
color: #6a4f00; /* رنگ متن تیره برای کنتراست بهتر */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.highlight-box strong {
color: #b38600; /* رنگ طلایی تیره‌تر برای متن پررنگ */
font-size: 1.1em;
}

/* واکنش‌گرایی برای صفحات نمایش کوچک‌تر */
@media (max-width: 768px) {
.article-container {
margin: 15px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه ملایم‌تر در موبایل */
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
p { text-align: right; } /* در موبایل تراز دو طرفه ممکن است خوانایی را کم کند */
.data-table th, .data-table td {
padding: 10px 12px;
}
.infographic-block {
padding: 20px;
border-right: 4px solid #a8d0e6;
}
.infographic-title {
font-size: 1.4em;
margin-bottom: 1em;
}
.infographic-step {
flex-direction: column; /* چیدمان عمودی آیکون و متن در موبایل */
align-items: center;
text-align: center;
margin-bottom: 1.5em;
gap: 10px;
}
.infographic-step-icon {
font-size: 1.8em;
width: 35px;
height: 35px;
}
.infographic-step-text strong {
font-size: 1em;
}
.highlight-box {
padding: 18px 20px;
font-size: 1em;
}
}

/* واکنش‌گرایی برای صفحات نمایش بسیار کوچک (موبایل‌های قدیمی) */
@media (max-width: 480px) {
.article-container {
margin: 10px auto;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
.data-table {
font-size: 0.9em;
}
.infographic-title {
font-size: 1.2em;
}
.infographic-step-icon {
font-size: 1.5em;
width: 30px;
height: 30px;
}
}

“`