“`html

/*
** طراحی پاسخگو (Responsive Design) **
این تنظیمات اطمینان حاصل می‌کنند که مقاله در اندازه‌های مختلف صفحه نمایش (موبایل، تبلت، لپ‌تاپ، تلویزیون) به خوبی نمایش داده شود.
با استفاده از واحدهای نسبی مانند ’em’ و ‘rem’ برای اندازه فونت و ‘width: 100%’ برای عناصر بلوکی،
مقاله به طور خودکار با عرض صفحه تنظیم می‌شود. ‘max-width’ نیز از کشیدگی بیش از حد در نمایشگرهای بزرگ جلوگیری می‌کند.
*/
.main-container {
max-width: 900px; /* حداکثر عرض برای نمایشگرهای بزرگ */
margin: 0 auto; /* قرار دادن در مرکز صفحه */
padding: 20px;
background-color: #ffffff; /* پس‌زمینه سفید برای محتوا */
box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* سایه ملایم برای جلوه بصری */
border-radius: 12px; /* گوشه‌های گرد */
line-height: 1.7; /* فاصله خطوط برای خوانایی بهتر */
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; /* فونت مدرن و خوانا */
color: #333333; /* رنگ متن اصلی */
}

/* Reset برخی از استایل‌های پیش‌فرض مرورگر برای نمایش یکنواخت در ویرایشگرهای بلوک */
div, p, h1, h2, h3, ul, li, table, thead, tbody, tr, th, td, span, strong {
box-sizing: border-box; /* اطمینان از محاسبات صحیح ابعاد شامل padding و border */
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-family: inherit; /* ارث‌بری فونت از عنصر والد */
font-size: inherit; /* ارث‌بری اندازه فونت */
font-weight: inherit; /* ارث‌بری ضخامت فونت */
color: inherit; /* ارث‌بری رنگ */
}

/*
** استایل‌دهی هدینگ‌ها (H1, H2, H3) با سایز و ضخامت مشخص **
این کلاس‌ها به تگ‌های H1, H2, H3 اعمال می‌شوند تا ظاهری متفاوت و ساختارمند داشته باشند.
*/
.h1-style {
font-size: 2.8em; /* اندازه فونت بزرگ برای عنوان اصلی */
font-weight: 800; /* ضخامت بیشتر برای جلب توجه */
color: #1A5276; /* آبی تیره و عمیق */
margin-bottom: 40px;
text-align: center;
padding: 20px 15px;
background-color: #EBF5FB; /* پس‌زمینه آبی روشن برای عنوان */
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-bottom: 5px solid #5DADE2; /* خط آبی در پایین */
}
.h2-style {
font-size: 2.2em;
font-weight: 700;
color: #2874A6; /* آبی متوسط */
margin-top: 50px;
margin-bottom: 25px;
border-bottom: 2px solid #AEC5DD; /* خط زیرین آبی ملایم */
padding-bottom: 12px;
position: relative;
padding-right: 15px; /* برای فضای آیکون یا تزئینات احتمالی */
}
.h2-style::before { /* یک عنصر تزئینی کوچک در کنار H2 */
content: ‘◆’; /* آیکون الماس */
color: #5DADE2;
position: absolute;
right: 0;
top: 0;
font-size: 0.8em;
line-height: 1.5;
}
.h3-style {
font-size: 1.6em;
font-weight: 600;
color: #2E86C1; /* آبی کمی روشن‌تر */
margin-top: 35px;
margin-bottom: 18px;
padding-right: 12px;
border-right: 4px solid #85C1E9; /* خط آبی در سمت راست */
}

/*
** استایل‌دهی پاراگراف‌ها، لیست‌ها و جداول **
*/
.p-style {
font-size: 1.1em;
line-height: 1.9;
margin-bottom: 25px;
color: #333333;
text-align: justify;
}
.ul-style {
list-style-type: disc; /* دیسک برای آیتم‌های لیست */
margin-right: 35px; /* مارجین راست برای متن فارسی */
margin-bottom: 25px;
padding: 0;
}
.li-style {
font-size: 1.05em;
line-height: 1.8;
margin-bottom: 10px;
color: #444444;
}
.li-style strong {
color: #1A5276; /* رنگ آبی تیره برای کلمات کلیدی در لیست‌ها */
}

/*
** جدول آموزشی استاندارد **
طراحی جدول با رنگ‌بندی زیبا و خوانا.
*/
.table-style {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 40px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-radius: 10px;
overflow: hidden; /* برای نمایش گوشه‌های گرد */
direction: rtl; /* جهت متن از راست به چپ */
text-align: right; /* تراز راست برای متن فارسی */
}
.th-style {
background-color: #5DADE2; /* پس‌زمینه آبی برای هدر جدول */
color: white;
padding: 18px;
font-weight: 700;
font-size: 1.15em;
border-bottom: none; /* حذف خط زیر هدر */
}
.td-style {
padding: 18px;
border-bottom: 1px solid #EEEEEE; /* خط جداکننده بین سطرها */
font-size: 1.05em;
color: #555555;
}
.table-row-even {
background-color: #F8F9F9; /* رنگ پس‌زمینه برای سطرهای زوج */
}
.table-row-odd {
background-color: #FFFFFF; /* رنگ پس‌زمینه برای سطرهای فرد */
}
.table-style tr:last-child .td-style {
border-bottom: none; /* حذف خط جداکننده آخرین سطر */
}

/*
** اینفوگرافیک جایگزین (بلوک اطلاعاتی) **
طراحی یک بلوک اطلاعاتی زیبا و ساختارمند که کارکرد اینفوگرافیک را شبیه‌سازی می‌کند.
*/
.infographic-block {
background-color: #EBF5FB; /* آبی بسیار روشن برای پس‌زمینه */
border: 1px solid #AEC5DD; /* حاشیه آبی ملایم */
border-radius: 15px; /* گوشه‌های بسیار گرد */
padding: 35px;
margin: 50px 0;
display: flex;
flex-direction: column; /* چینش عمودی عناصر */
gap: 25px; /* فاصله بین آیتم‌ها */
box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* سایه عمیق‌تر */
}
.info-item {
display: flex;
align-items: flex-start; /* تراز از بالا */
gap: 18px;
flex-direction: row-reverse; /* برای نمایش آیکون در سمت راست متن فارسی */
}
.info-icon {
font-size: 2.5em; /* اندازه بزرگ برای آیکون */
color: #2E86C1; /* آبی متوسط برای آیکون */
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
line-height: 1;
}
.info-text {
font-size: 1.15em;
line-height: 1.7;
color: #36454F; /* خاکستری تیره برای متن */
text-align: justify;
}
.info-text strong {
color: #1A5276; /* آبی تیره برای تاکید */
font-weight: 700;
}
.highlight-text {
background-color: #FFF3C9; /* هایلایت زرد ملایم */
padding: 4px 8px;
border-radius: 6px;
font-weight: 600;
color: #5A4000; /* رنگ متن متناسب با هایلایت */
}
.strong-emphasis {
color: #C0392B; /* رنگ قرمز برای تاکید قوی یا هشدار */
font-weight: 700;
}

/* استایل برای فوتر توضیحات جدول */
.table-caption {
font-size: 0.95em;
color: #666666;
margin-top: 15px;
text-align: center;
font-style: italic;
}

/* استایل‌های کلی برای بهبود خوانایی */
strong {
font-weight: 700; /* اطمینان از ضخامت کافی برای عناصر strong */
}

“`