“`html

/* تعریف متغیرهای رنگی برای استفاده راحت‌تر و یکپارچگی طراحی */
:root {
–primary-color: #28a745; /* سبز پررنگ برای انرژی و حیات */
–secondary-color: #007bff; /* آبی برای فناوری و نوآوری */
–text-color: #333; /* رنگ متن اصلی */
–light-text-color: #666; /* رنگ متن کم‌رنگ‌تر */
–background-light: #f8f9fa; /* پس‌زمینه روشن */
–background-medium: #e9ecef; /* پس‌زمینه کمی تیره‌تر */
–border-color: #dee2e6; /* رنگ حاشیه */
–heading-color: #212529; /* رنگ عنوان‌های اصلی */
}

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.7;
color: var(–text-color);
background-color: #ffffff; /* پس‌زمینه کاملاً سفید برای وضوح */
margin: 0;
padding: 0;
direction: rtl; /* جهت نوشتار راست به چپ */
text-align: right;
-webkit-font-smoothing: antialiased; /* بهبود رندرینگ فونت در مرورگرهای وب‌کیت */
-moz-osx-font-smoothing: grayscale; /* بهبود رندرینگ فونت در مرورگرهای موزیلا */
}

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

/* تنظیمات رسپانسیو برای کانتینر اصلی */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
}
@media (max-width: 480px) {
.article-container {
margin: 10px auto;
padding: 10px;
border-radius: 5px;
}
}
@media (min-width: 1200px) { /* برای صفحه نمایش‌های بزرگتر مانند تلویزیون */
.article-container {
max-width: 1100px;
}
}

/* استایل هدینگ H1 */
h1 {
font-size: 2.8em;
font-weight: 800; /* بسیار ضخیم */
color: var(–heading-color);
text-align: center;
margin-bottom: 40px;
line-height: 1.3;
padding: 15px 0;
background: linear-gradient(to right, #e0ffe0, #c8ffc8); /* گرادیانت سبز روشن */
border-radius: 10px;
}
@media (max-width: 768px) {
h1 { font-size: 2.2em; margin-bottom: 30px; }
}
@media (max-width: 480px) {
h1 { font-size: 1.8em; margin-bottom: 20px; padding: 10px 0;}
}

/* استایل هدینگ H2 */
h2 {
font-size: 2em;
font-weight: 700; /* ضخیم */
color: var(–primary-color);
margin-top: 50px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid var(–primary-color); /* خط زیرین با رنگ اصلی */
position: relative; /* برای عنصر شبه بعد از H2 */
}
h2::after { /* یک خط کوچک تزئینی در زیر عنوان */
content: ”;
display: block;
width: 30px;
height: 3px;
background-color: var(–secondary-color);
position: absolute;
bottom: -3px;
right: 0;
border-radius: 3px;
}
@media (max-width: 768px) {
h2 { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; }
}
@media (max-width: 480px) {
h2 { font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; }
}

/* استایل هدینگ H3 */
h3 {
font-size: 1.5em;
font-weight: 700; /* ضخیم */
color: var(–heading-color);
margin-top: 40px;
margin-bottom: 20px;
border-right: 5px solid var(–secondary-color); /* حاشیه سمت راست برای تاکید */
padding-right: 15px;
line-height: 1.4;
}
@media (max-width: 768px) {
h3 { font-size: 1.3em; margin-top: 30px; margin-bottom: 15px; padding-right: 10px;}
}
@media (max-width: 480px) {
h3 { font-size: 1.2em; margin-top: 25px; margin-bottom: 10px; padding-right: 8px;}
}

p {
margin-bottom: 1.5em;
text-align: justify; /* تراز بندی متن از دو طرف */
line-height: 1.8; /* فاصله خطوط مناسب برای خوانایی */
}

ul {
list-style: none; /* حذف نشانگر پیش‌فرض لیست */
padding-right: 0;
margin-bottom: 1.5em;
}

ul li {
position: relative;
padding-right: 30px;
margin-bottom: 0.8em;
line-height: 1.6;
}

ul li::before { /* استفاده از آیکون سفارشی برای لیست */
content: ‘🌿’; /* آیکون برگ برای حس طبیعی بودن */
position: absolute;
right: 0;
top: 0;
color: var(–primary-color);
font-size: 1.2em;
}

ol {
padding-right: 25px;
margin-bottom: 1.5em;
}
ol li {
margin-bottom: 0.8em;
line-height: 1.6;
}

a {
color: var(–secondary-color);
text-decoration: none;
transition: color 0.3s ease; /* انیمیشن برای تغییر رنگ لینک */
}
a:hover {
color: var(–primary-color);
text-decoration: underline;
}

/* استایل جدول فهرست مطالب */
.table-of-contents {
background-color: var(–background-light);
border: 1px solid var(–border-color);
border-radius: 8px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.table-of-contents h3 {
font-size: 1.6em;
font-weight: 700;
color: var(–heading-color);
margin-top: 0;
margin-bottom: 20px;
border-right: none;
padding-right: 0;
text-align: center;
}
.table-of-contents ul {
list-style: decimal; /* لیست شماره‌دار */
padding-right: 20px;
}
.table-of-contents ul li {
margin-bottom: 0.5em;
padding-right: 0;
}
.table-of-contents ul li::before {
content: none; /* حذف نشانگر سفارشی برای فهرست مطالب */
}

/* استایل جدول آموزشی */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 30px 0;
font-size: 1em;
background-color: #fff;
border-radius: 8px;
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

th, td {
padding: 15px;
border: 1px solid var(–border-color);
text-align: right;
}

th {
background-color: var(–primary-color);
color: #fff;
font-weight: 700;
text-align: center;
}

tr:nth-child(even) { /* رنگ متناوب برای ردیف‌ها */
background-color: var(–background-light);
}

tr:hover {
background-color: var(–background-medium);
transition: background-color 0.3s ease;
}
@media (max-width: 480px) {
th, td { padding: 10px; font-size: 0.9em; }
}

/* استایل جایگزین اینفوگرافیک زیبا */
.infographic-block {
background: linear-gradient(135deg, #e6ffed, #d2f7da); /* گرادیانت سبز ملایم */
border: 2px dashed var(–primary-color); /* حاشیه نقطه‌چین */
border-radius: 15px;
padding: 30px;
margin: 40px 0;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
flex-wrap: wrap; /* اجازه شکستن به خط بعد */
justify-content: space-around; /* توزیع فضا بین آیتم‌ها */
gap: 20px; /* فاصله بین آیتم‌ها */
}

.infographic-item {
flex: 1 1 calc(33% – 40px); /* 3 آیتم در هر ردیف با احتساب فاصله */
min-width: 250px; /* حداقل عرض برای آیتم‌ها */
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هنگام هاور */
display: flex;
flex-direction: column;
align-items: center;
}
.infographic-item:hover {
transform: translateY(-5px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.infographic-item .icon {
font-size: 3em;
color: var(–primary-color);
margin-bottom: 15px;
line-height: 1;
}

.infographic-item h4 {
font-size: 1.3em;
color: var(–heading-color);
margin-bottom: 10px;
font-weight: 700;
}

.infographic-item p {
font-size: 0.95em;
color: var(–light-text-color);
text-align: center;
margin-bottom: 0;
line-height: 1.6;
}

/* رسپانسیو برای آیتم‌های اینفوگرافیک */
@media (max-width: 768px) {
.infographic-item {
flex: 1 1 calc(50% – 30px); /* 2 آیتم در هر ردیف */
}
}
@media (max-width: 480px) {
.infographic-item {
flex: 1 1 100%; /* 1 آیتم در هر ردیف */
}
.infographic-block {
padding: 20px;
}
}

/* استایل برای تصاویر (در صورت وجود) */
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* استایل برای بلوک معرفی بخش‌ها */
.section-intro {
font-size: 1.15em;
color: var(–light-text-color);
margin-top: 20px;
margin-bottom: 30px;
line-height: 1.9;
background-color: #f0fdf2; /* پس‌زمینه سبز بسیار روشن */
padding: 20px;
border-right: 5px solid var(–primary-color);
border-radius: 0 8px 8px 0;
}
@media (max-width: 768px) {
.section-intro { font-size: 1.05em; padding: 15px; }
}

/* استایل برای باکس فراخوان/نکته مهم */
.callout-box {
background-color: var(–background-medium);
border-right: 5px solid var(–secondary-color);
padding: 20px;
margin: 30px 0;
border-radius: 0 8px 8px 0;
font-size: 1.05em;
color: var(–light-text-color);
line-height: 1.7;
}
.callout-box strong {
color: var(–primary-color);
}
@media (max-width: 768px) {
.callout-box { padding: 15px; font-size: 1em; }
}

/* استایل برای بخش نتیجه‌گیری */
.conclusion {
background-color: #e0f2f7; /* آبی روشن برای نتیجه‌گیری */
padding: 30px;
border-radius: 12px;
margin-top: 50px;
text-align: center;
font-size: 1.1em;
line-height: 1.8;
color: var(–text-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.conclusion strong {
color: var(–primary-color);
}

“`