/* تنظیمات پایه برای فونت‌ها و ظاهر کلی مقاله */
body {
font-family: ‘Tahoma’, sans-serif; /* انتخاب فونت خوانا */
line-height: 1.7; /* فاصله خطوط برای خوانایی بهتر */
color: #333; /* رنگ متن اصلی */
background-color: #f9f9f9; /* پس‌زمینه روشن */
margin: 0;
padding: 0;
direction: rtl; /* تنظیم جهت نوشتار به راست به چپ */
text-align: right; /* تراز متن به راست */
}
.container {
max-width: 900px; /* حداکثر عرض برای نمایش بهینه در دسکتاپ */
margin: 0 auto; /* قرارگیری در مرکز صفحه */
padding: 25px 30px; /* فضای داخلی */
background-color: #fff; /* پس‌زمینه سفید برای محتوا */
border-radius: 12px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* سایه ملایم */
box-sizing: border-box; /* برای محاسبه padding در عرض */
}

/* استایل‌های Heading 1 */
h1 {
font-size: 2.6em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 800; /* ضخامت بسیار بالا */
color: #2c3e50; /* رنگ آبی-خاکستری تیره */
margin-bottom: 35px;
text-align: center; /* عنوان در مرکز */
border-bottom: 4px solid #3498db; /* خط آبی تزئینی */
padding-bottom: 18px;
line-height: 1.3;
letter-spacing: -0.5px;
}

/* استایل‌های Heading 2 */
h2 {
font-size: 2.1em; /* سایز مناسب برای تیترهای اصلی */
font-weight: 700; /* ضخامت بالا */
color: #2980b9; /* رنگ آبی روشن‌تر */
margin-top: 45px;
margin-bottom: 25px;
border-right: 6px solid #8e44ad; /* خط بنفش تزئینی در سمت راست */
padding-right: 18px;
padding-left: 10px; /* برای جلوگیری از چسبیدن متن به خط */
line-height: 1.4;
background-color: #eaf6fc; /* پس‌زمینه ملایم برای H2 */
border-radius: 6px;
}

/* استایل‌های Heading 3 */
h3 {
font-size: 1.6em; /* سایز برای زیرتیترها */
font-weight: 600; /* ضخامت متوسط */
color: #34495e; /* رنگ آبی-خاکستری متوسط */
margin-top: 35px;
margin-bottom: 18px;
border-bottom: 2px dashed #dbe4eb; /* خط چین ملایم */
padding-bottom: 8px;
line-height: 1.5;
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1.4em;
text-align: justify; /* تراز دو طرفه برای ظاهر حرفه‌ای */
hyphens: auto; /* برای شکستن کلمات در مرورگرهای پشتیبانی‌کننده */
}

/* استایل لیست‌ها */
ul, ol {
margin-bottom: 1.8em;
padding-right: 35px; /* فضای بیشتر برای لیست‌ها */
list-style-position: inside; /* علامت لیست داخل حاشیه */
}
li {
margin-bottom: 0.9em;
line-height: 1.6;
}
ul li::marker { /* استایل دادن به مارکرهای لیست */
color: #3498db;
font-weight: bold;
}

/* باکس های برجسته (مانند فهرست مطالب) */
.highlight-box {
background-color: #f8fcfd; /* رنگ آبی بسیار روشن */
border-right: 6px solid #f39c12; /* خط نارنجی تزئینی */
padding: 20px 25px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.highlight-box strong {
color: #e67e22; /* رنگ نارنجی برای متن برجسته */
}
.highlight-box ul {
list-style: none; /* حذف مارکرهای پیش فرض */
padding: 0;
margin: 15px 0 0 0;
}
.highlight-box li {
margin-bottom: 10px;
}
.highlight-box a {
color: #2980b9; /* رنگ آبی برای لینک‌ها */
text-decoration: none; /* حذف خط زیر لینک */
font-weight: 500;
transition: color 0.3s ease; /* انیمیشن برای تغییر رنگ لینک */
}
.highlight-box a:hover {
color: #8e44ad; /* تغییر رنگ لینک هنگام هاور */
text-decoration: underline; /* نمایش خط زیر لینک هنگام هاور */
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 35px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* سایه قوی‌تر */
border-radius: 10px;
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
text-align: right;
}
th, td {
border: 1px solid #e0e7ed; /* رنگ خطوط جدول */
padding: 14px 18px;
font-size: 0.98em;
}
th {
background-color: #3498db; /* سربرگ آبی */
color: white;
font-weight: bold;
text-align: center; /* متن سربرگ در مرکز */
}
tr:nth-child(even) { /* استایل سطر‌های زوج */
background-color: #f7fbfd; /* رنگ روشن‌تر */
}
tr:hover { /* افکت هاور روی سطرها */
background-color: #eef8ff; /* رنگ آبی بسیار روشن هنگام هاور */
}

/* بلاک اینفوگرافیک (جایگزین بصری) */
.infographic-block {
background-color: #e0f2f7; /* پس‌زمینه آبی روشن */
border: 2px solid #3498db; /* کادر آبی */
border-radius: 15px; /* گوشه‌های گرد */
padding: 30px;
margin: 45px 0;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* سایه عمیق‌تر */
position: relative;
overflow: hidden;
}
.infographic-block h3 {
color: #2c3e50;
margin-top: 0;
margin-bottom: 25px;
border-bottom: none;
font-size: 2em;
position: relative;
z-index: 1;
}
.infographic-block h3::after { /* خط زیرین برای عنوان اینفوگرافیک */
content: ”;
display: block;
width: 80px;
height: 3px;
background-color: #f39c12;
margin: 10px auto 0 auto;
border-radius: 2px;
}
.infographic-step {
display: flex; /* نمایش مراحل در یک خط */
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap; /* اجازه شکستن خط در صفحات کوچک */
}
.infographic-step span {
font-size: 1.15em;
font-weight: 600;
color: #2980b9;
background-color: #d1ecf1; /* پس‌زمینه روشن‌تر برای هر مرحله */
border-radius: 25px; /* گوشه‌های گردتر */
padding: 10px 20px;
margin: 8px; /* فاصله بین مراحل */
display: inline-block;
box-shadow: 0 3px 8px rgba(0,0,0,0.07);
transition: transform 0.3s ease, background-color 0.3s ease;
}
.infographic-step span:hover {
transform: translateY(-3px); /* افکت سه‌بعدی هنگام هاور */
background-color: #c0e1e8;
}
.infographic-arrow {
font-size: 2.2em; /* سایز بزرگ‌تر برای فلش */
color: #8e44ad; /* رنگ بنفش برای فلش */
margin: 0 15px;
font-weight: bold;
animation: pulse 1.5s infinite alternate; /* انیمیشن برای فلش‌ها */
}
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}

/* رسپانسیو بودن برای دستگاه‌های مختلف */
@media (max-width: 768px) {
.container {
padding: 20px;
margin: 10px auto;
}
h1 {
font-size: 2.2em;
margin-bottom: 25px;
padding-bottom: 12px;
}
h2 {
font-size: 1.8em;
margin-top: 35px;
margin-bottom: 18px;
padding-right: 15px;
}
h3 {
font-size: 1.4em;
margin-top: 25px;
margin-bottom: 12px;
}
th, td {
padding: 10px 12px;
font-size: 0.9em;
}
.infographic-block {
padding: 20px;
margin: 30px 0;
}
.infographic-block h3 {
font-size: 1.6em;
margin-bottom: 15px;
}
.infographic-step {
flex-direction: column; /* مراحل زیر هم قرار می‌گیرند */
}
.infographic-arrow {
transform: rotate(90deg); /* فلش‌ها عمودی می‌شوند */
margin: 10px 0;
font-size: 1.8em;
}
}

@media (max-width: 480px) {
.container {
padding: 15px;
border-radius: 0; /* حذف گوشه‌های گرد در موبایل کوچک */
box-shadow: none; /* حذف سایه در موبایل کوچک */
}
h1 {
font-size: 1.9em;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom-width: 2px;
}
h2 {
font-size: 1.5em;
padding-right: 10px;
border-right-width: 4px;
}
h3 {
font-size: 1.2em;
}
p {
font-size: 0.95em;
}
ul, ol {
padding-right: 20px;
}
th, td {
font-size: 0.85em;
padding: 8px;
}
.infographic-step span {
font-size: 1em;
padding: 8px 15px;
margin: 6px;
}
.infographic-arrow {
font-size: 1.5em;
margin: 8px 0;
}
}
/* استایل برای تبلت‌ها و تلویزیون‌ها (متوسط تا بزرگ) */
@media (min-width: 769px) and (max-width: 1200px) {
.container {
max-width: 800px;
}
h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.5em; }
.infographic-block h3 { font-size: 1.8em; }
}
@media (min-width: 1201px) { /* برای صفحه نمایش‌های بزرگ و تلویزیون */
.container {
max-width: 1000px;
padding: 35px 40px;
}
h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 1.8em; }
.infographic-block h3 { font-size: 2.2em; }
th, td { padding: 16px 20px; font-size: 1.05em; }
.infographic-step span { font-size: 1.25em; padding: 12px 25px; }
.infographic-arrow { font-size: 2.5em; }
}