“`html

/*
** Base Styles & Global Settings (برای رسپانسیو بودن در موبایل، تبلت، لپ‌تاپ و تلویزیون)
*/
.article-container {
font-family: ‘B Nazanin’, ‘Arial’, sans-serif; /* یک فونت رایج و خوانا برای فارسی */
line-height: 1.8; /* فاصله خطوط بیشتر برای خوانایی بهتر */
color: #333333; /* رنگ متن اصلی */
max-width: 900px; /* حداکثر عرض مقاله در صفحه‌های بزرگ */
margin: 0 auto; /* قرار دادن مقاله در وسط صفحه */
padding: 25px;
background-color: #ffffff; /* پس‌زمینه سفید برای مقاله */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* سایه ظریف برای زیبایی */
border-radius: 12px; /* گوشه‌های گرد برای کانتینر اصلی */
direction: rtl; /* پشتیبانی کامل از زبان فارسی (راست به چپ) */
text-align: right; /* تراز متن به راست */
}

/* Media Queries for Responsiveness */
/* تبلت و لپ‌تاپ‌های کوچک */
@media (max-width: 992px) {
.article-container {
padding: 20px;
margin: 15px auto;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);
}
h1 { font-size: 2.2em !important; }
h2 { font-size: 1.7em !important; }
h3 { font-size: 1.3em !important; }
}

/* موبایل‌های بزرگ و تبلت‌های کوچک */
@media (max-width: 768px) {
.article-container {
padding: 15px;
margin: 10px auto;
box-shadow: none; /* حذف سایه در صفحه‌های کوچک */
border-radius: 0; /* حذف گوشه‌های گرد در صفحه‌های کوچک */
}
h1 { font-size: 1.9em !important; }
h2 { font-size: 1.5em !important; }
h3 { font-size: 1.2em !important; }
.infographic-block .info-item {
flex: 1 1 100%; /* آیتم‌های اینفوگرافیک به صورت ستونی در موبایل */
max-width: 100%;
}
}

/* موبایل‌های کوچک */
@media (max-width: 480px) {
.article-container {
padding: 10px;
}
h1 { font-size: 1.7em !important; }
h2 { font-size: 1.3em !important; }
h3 { font-size: 1.1em !important; }
}

/* تلویزیون (برای تجربه خواندن راحت‌تر در صفحه‌های بزرگ) */
@media (min-width: 1200px) {
.article-container {
max-width: 1100px; /* افزایش عرض برای تلویزیون */
padding: 35px;
}
h1 { font-size: 2.8em !important; }
h2 { font-size: 2.1em !important; }
h3 { font-size: 1.5em !important; }
}

/*
** Headings Styling (هدینگ‌ها با سایز و ضخامت مشخص)
*/
h1, h2, h3 {
font-weight: bold;
color: #003366; /* رنگ آبی تیره برای هدینگ‌ها */
margin-top: 2em; /* فاصله بالا از متن قبلی */
margin-bottom: 1em; /* فاصله پایین از متن بعدی */
line-height: 1.4; /* بهبود خوانایی هدینگ‌های چند خطی */
}

h1 {
font-size: 2.5em; /* سایز بزرگ برای H1 */
border-bottom: 4px solid #FFCC00; /* خط طلایی/نارنجی زیر H1 */
padding-bottom: 15px;
text-align: center;
color: #002244;
}

h2 {
font-size: 1.9em;
color: #004488; /* رنگ آبی کمی روشن‌تر برای H2 */
border-right: 6px solid #008080; /* خط فیروزه‌ای در سمت راست H2 */
padding-right: 15px;
margin-top: 2.5em;
}

h3 {
font-size: 1.4em;
color: #0055AA;
margin-right: 15px;
position: relative;
padding-right: 25px; /* فضای لازم برای آیکون */
}
/* آیکون برای H3 */
h3::before {
content: ‘▪’; /* یک مربع به عنوان بولت */
color: #FFCC00; /* رنگ طلایی/نارنجی برای آیکون */
position: absolute;
right: 0; /* قرارگیری در سمت راست برای RTL */
top: 0;
font-size: 1.3em;
line-height: 1;
}

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

ul, ol {
margin-right: 25px; /* فرورفتگی لیست‌ها از سمت راست */
margin-bottom: 1.5em;
padding: 0; /* حذف پدینگ پیش‌فرض */
}
ul li {
list-style-type: disc; /* بولت گرد */
margin-bottom: 0.8em;
}
ol li {
list-style-type: decimal; /* اعداد */
margin-bottom: 0.8em;
}
li {
padding-right: 5px; /* فاصله از بولت/عدد */
}

/*
** Table of Contents (فهرست مطالب)
*/
.toc {
background-color: #f8fcff; /* پس‌زمینه آبی بسیار روشن */
border-right: 5px solid #008080; /* خط فیروزه‌ای در سمت راست */
padding: 20px 25px;
margin-bottom: 2.5em;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.toc h2 {
color: #003366;
border-right: none;
margin-top: 0;
padding-right: 0;
font-size: 1.6em;
text-align: center;
border-bottom: 2px dashed #e0e0e0;
padding-bottom: 10px;
margin-bottom: 15px;
}
.toc ul {
list-style-type: none;
margin-right: 0;
padding-right: 0;
}
.toc ul li a {
color: #0055AA;
text-decoration: none;
transition: color 0.3s ease, padding-right 0.3s ease;
display: block;
padding: 7px 0;
border-radius: 3px;
}
.toc ul li a:hover {
color: #FFCC00;
background-color: #eef7ff;
padding-right: 10px;
}
.toc ul li ul {
margin-right: 20px; /* فرورفتگی زیربخش‌ها */
list-style-type: circle;
}

/*
** Table Styles (جدول آموزشی استاندارد)
*/
.responsive-table-wrapper {
overflow-x: auto; /* برای اسکرول افقی جدول در صفحه‌های کوچک */
margin-bottom: 2.5em;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
table {
width: 100%;
border-collapse: collapse;
min-width: 400px; /* حداقل عرض جدول برای جلوگیری از فشرده شدن بیش از حد */
background-color: #ffffff;
}
th, td {
border: 1px solid #e0e0e0; /* خطوط جدول */
padding: 15px;
text-align: right; /* تراز راست برای RTL */
vertical-align: top; /* تراز عمودی بالا */
}
th {
background-color: #f2f7fb; /* پس‌زمینه آبی کم‌رنگ برای سربرگ */
color: #003366;
font-weight: bold;
font-size: 1.05em;
}
tr:nth-child(even) { /* ردیف‌های زوج با رنگ متفاوت */
background-color: #fafafa;
}
tr:hover { /* هایلایت ردیف هنگام هاور */
background-color: #f0f8ff;
}

/*
** Infographic Replacement (اینفوگرافیک زیبا)
*/
.infographic-block {
display: flex;
flex-wrap: wrap; /* امکان شکستن آیتم‌ها به خط بعدی در صفحه‌های کوچک */
justify-content: center; /* هم‌ترازی آیتم‌ها در وسط */
gap: 25px; /* فاصله بین آیتم‌ها */
margin-top: 3em;
margin-bottom: 3em;
background-color: #e8f5fd; /* پس‌زمینه آبی روشن برای بلوک اینفوگرافیک */
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}
.info-item {
flex: 1 1 calc(33% – 50px); /* 3 آیتم در هر ردیف، با در نظر گرفتن gap */
min-width: 280px; /* حداقل عرض هر آیتم قبل از شکستن به خط جدید */
background-color: #ffffff;
border-radius: 10px;
padding: 25px;
text-align: center;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هاور */
border-top: 5px solid #008080; /* خط فیروزه‌ای بالا برای هر آیتم */
}
.info-item:hover {
transform: translateY(-8px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* سایه عمیق‌تر هنگام هاور */
}
.info-item .icon {
font-size: 3.5em; /* سایز بزرگ برای آیکون */
color: #FFCC00; /* رنگ طلایی/نارنجی برای آیکون */
margin-bottom: 15px;
display: block;
}
.info-item h4 {
font-size: 1.4em;
color: #003366;
margin-bottom: 10px;
font-weight: bold;
}
.info-item p {
font-size: 0.98em;
color: #555555;
text-align: center;
line-height: 1.6;
}

/*
** FAQ Section (پرسش‌های متداول)
*/
.faq-item {
margin-bottom: 2em;
padding-bottom: 1.5em;
border-bottom: 1px dashed #e0e0e0; /* خط چین جداکننده */
}
.faq-item:last-child {
border-bottom: none; /* حذف خط چین برای آخرین آیتم */
}
.faq-question {
font-weight: bold;
color: #004488;
margin-bottom: 0.8em;
font-size: 1.15em;
position: relative;
padding-right: 40px; /* فضای لازم برای آیکون */
}
.faq-question::before {
content: ‘❓’; /* آیکون علامت سوال */
position: absolute;
right: 0; /* قرارگیری در سمت راست برای RTL */
top: 0;
font-size: 1.5em;
color: #FFCC00;
}
.faq-answer {
color: #555555;
margin-right: 40px; /* فرورفتگی متن جواب */
}

/*
** Back to Top Button
*/
.back-to-top {
display: block;
text-align: center;
margin-top: 4em;
padding: 15px 25px;
background-color: #008080; /* رنگ فیروزه‌ای */
color: white;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 1.1em;
font-weight: bold;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.back-to-top:hover {
background-color: #006666; /* رنگ تیره‌تر هنگام هاور */
transform: translateY(-3px);
}

“`