“`html

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

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

/* واکنش‌گرایی برای تبلت‌ها */
@media (max-width: 768px) {
.container {
margin: 15px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* سایه کمی کمتر */
}
h1 { font-size: 2.1em !important; } /* کاهش اندازه فونت H1 */
h2 { font-size: 1.7em !important; } /* کاهش اندازه فونت H2 */
h3 { font-size: 1.3em !important; } /* کاهش اندازه فونت H3 */
table, .infographic-block { margin: 20px 0; } /* کاهش حاشیه عناصر */
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 480px) {
.container {
margin: 10px;
padding: 15px;
border-radius: 8px; /* گوشه‌های گرد کمتر */
box-shadow: none; /* حذف سایه برای نمایش بهتر در موبایل */
}
h1 { font-size: 1.7em !important; line-height: 1.2 !important; margin-bottom: 20px !important; }
h2 { font-size: 1.4em !important; margin-top: 30px !important; margin-bottom: 15px !important; }
h3 { font-size: 1.1em !important; margin-top: 25px !important; margin-bottom: 10px !important; }
p { margin-bottom: 0.8em; }
ul, ol { margin-left: 15px; padding-right: 0; } /* تنظیمات لیست برای موبایل */
li { margin-bottom: 0.4em; }
}

/* استایل‌دهی اختصاصی هدینگ‌ها */
h1 {
color: #003366; /* رنگ آبی تیره برای عنوان اصلی */
font-size: 2.8em; /* اندازه بزرگ فونت */
font-weight: 900; /* بسیار ضخیم */
text-align: center;
margin-bottom: 35px;
line-height: 1.3;
padding-bottom: 18px;
border-bottom: 4px solid #D0E0F0; /* خط زیرین آبی ملایم */
}
h2 {
color: #005A5A; /* رنگ سبزآبی تیره برای بخش‌های اصلی */
font-size: 2.2em;
font-weight: 700;
margin-top: 45px;
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 2px solid #E0F2F1; /* خط زیرین سبزآبی ملایم */
}
h3 {
color: #008080; /* رنگ سبزآبی برای زیربخش‌ها */
font-size: 1.6em;
font-weight: 600;
margin-top: 35px;
margin-bottom: 18px;
padding-right: 10px;
border-right: 4px solid #80CBC4; /* خط کناری برای زیبایی بیشتر */
}

/* استایل پاراگراف‌ها */
p {
margin-bottom: 1.2em;
text-align: justify; /* تراز به صورت دوطرفه */
font-size: 1.05em; /* کمی بزرگ‌تر برای خوانایی */
color: #3A3A3A;
}

/* استایل لیست‌ها */
ul {
list-style-type: disc; /* دایره برای آیتم‌های لیست */
margin-right: 30px; /* حاشیه از راست برای فارسی */
margin-bottom: 1.5em;
padding: 0;
}
ol {
list-style-type: decimal; /* اعداد برای لیست‌های مرتب */
margin-right: 30px;
margin-bottom: 1.5em;
padding: 0;
}
li {
margin-bottom: 0.7em;
color: #4A4A4A;
}
li strong {
color: #005A5A; /* رنگ بولد داخل لیست‌ها */
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 30px 0;
font-size: 1em;
min-width: 300px;
background-color: #FDFDFD;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* سایه برای جدول */
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای اعمال border-radius به محتوا */
}
table th, table td {
padding: 14px 18px;
text-align: right;
border-bottom: 1px solid #EEEEEE; /* خط جداکننده سلول‌ها */
}
table thead tr {
background-color: #008080; /* رنگ سبزآبی برای سربرگ جدول */
color: #ffffff;
text-align: right;
}
table tbody tr:nth-child(even) {
background-color: #F9F9F9; /* رنگ متناوب برای ردیف‌ها */
}
table tbody tr:hover {
background-color: #E0F2F1; /* تغییر رنگ در هاور */
}
table tbody tr:last-child td {
border-bottom: none; /* حذف خط از آخرین ردیف */
}
table th strong {
font-weight: 700;
}

/* اینفوگرافیک (بلوک بصری جایگزین) */
.infographic-block {
background-color: #E8F5E9; /* پس‌زمینه سبز ملایم */
border-right: 6px solid #4CAF50; /* نوار عمودی سبز رنگ در سمت راست */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* سایه ظریف */
position: relative;
overflow: hidden;
}
.infographic-block::before {
content: ‘💡’; /* آیکون لامپ برای جذابیت */
font-size: 2.5em;
position: absolute;
left: 20px; /* موقعیت آیکون در سمت چپ */
top: 20px;
opacity: 0.2;
color: #2E7D32;
}
.infographic-block h3 {
color: #2E7D32; /* رنگ سبز تیره برای عنوان اینفوگرافیک */
margin-top: 0;
padding-bottom: 12px;
border-bottom: 1px dashed #A5D6A7; /* خط چین برای جداکننده */
border-right: none; /* حذف خط کناری h3 اصلی */
padding-right: 0;
position: relative;
z-index: 1; /* برای نمایش روی آیکون لامپ */
}
.infographic-block ul {
list-style: none; /* حذف بولت‌های پیش‌فرض */
padding: 0;
margin: 15px 0 0 0;
}
.infographic-block li {
margin-bottom: 12px;
padding-right: 35px; /* فضا برای آیکون چک‌مارک */
position: relative;
color: #388E3C; /* رنگ سبز برای متن لیست */
font-weight: 500;
}
.infographic-block li::before {
content: ‘✔’; /* آیکون چک‌مارک سفارشی */
color: #2E7D32;
font-weight: bold;
position: absolute;
right: 0;
top: 0;
font-size: 1.2em;
}
.infographic-block p {
color: #388E3C;
font-weight: 500;
text-align: justify;
margin-top: 20px;
font-size: 1em;
}

“`