“`html

/* کلیات */
body {
font-family: ‘Tahoma’, ‘Arial’, sans-serif;
line-height: 1.7;
color: #333;
margin: 0;
padding: 0;
background-color: #f8faff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.article-container {
max-width: 900px;
margin: 20px auto;
padding: 25px 30px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
overflow-x: hidden; /* برای جلوگیری از اسکرول افقی در موبایل */
}

/* واکنش‌گرا کردن کانتینر برای موبایل و تبلت */
@media (max-width: 768px) {
.article-container {
margin: 10px auto;
padding: 15px 20px;
border-radius: 8px;
}
}

/* هدینگ‌ها */
h1 {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: clamp(1.8em, 4vw, 2.8em); /* رسپانسیو برای عنوان اصلی */
font-weight: 800;
color: #1A2A4B;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.8em;
line-height: 1.3;
padding-bottom: 15px;
position: relative;
}
h1::after {
content: ”;
display: block;
width: 80px;
height: 4px;
background: linear-gradient(to right, #007BFF, #28a745);
margin: 15px auto 0;
border-radius: 2px;
}

h2 {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: clamp(1.5em, 3.5vw, 2.2em); /* رسپانسیو برای H2 */
font-weight: 700;
color: #0056b3;
margin-top: 2em;
margin-bottom: 0.8em;
border-bottom: 2px solid #e0eaff;
padding-bottom: 10px;
padding-right: 10px;
position: relative;
}
h2::before {
content: ‘▪’;
color: #28a745;
position: absolute;
right: -10px;
top: 0;
font-size: 1.2em;
}
@media (max-width: 768px) {
h2 {
padding-right: 0;
}
h2::before {
right: 0;
}
}

h3 {
font-family: ‘B Nazanin’, ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-size: clamp(1.2em, 3vw, 1.8em); /* رسپانسیو برای H3 */
font-weight: 600;
color: #34495e;
margin-top: 1.5em;
margin-bottom: 0.6em;
padding-right: 5px;
border-right: 4px solid #007BFF;
}
@media (max-width: 768px) {
h3 {
padding-right: 0;
border-right: none;
border-left: 4px solid #007BFF; /* برای زبان فارسی، مرز را به سمت چپ منتقل می‌کنیم */
padding-left: 5px;
}
}

/* پاراگراف‌ها */
p {
margin-bottom: 1em;
text-align: justify;
line-height: 1.8;
font-size: clamp(0.9em, 2vw, 1em); /* رسپانسیو برای متن */
}

/* لیست‌ها */
ul, ol {
margin-bottom: 1em;
padding-right: 25px; /* برای فضای لازم لیست‌ها */
font-size: clamp(0.9em, 2vw, 1em);
}
ul li {
list-style-type: ‘✓ ‘;
margin-bottom: 0.6em;
padding-right: 5px;
}
ol li {
margin-bottom: 0.6em;
padding-right: 5px;
}

/* جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: clamp(0.9em, 2vw, 1em);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-radius: 8px;
overflow: hidden; /* برای گرد کردن گوشه‌های جدول */
}
th, td {
border: 1px solid #e0e0e0;
padding: 12px 18px;
text-align: right;
}
th {
background-color: #007BFF;
color: #fff;
font-weight: bold;
text-align: center;
position: sticky;
top: 0; /* برای ثابت نگه داشتن سربرگ در اسکرول */
}
tr:nth-child(even) {
background-color: #f0f8ff;
}
tr:hover {
background-color: #e6f7ff;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto; /* برای اسکرول افقی جدول در موبایل */
white-space: nowrap;
}
thead {
display: none; /* سربرگ جدول را در موبایل مخفی می‌کنیم */
}
tr {
display: flex;
flex-direction: column;
margin-bottom: 1em;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 40%; /* برای قرار دادن عنوان ستون */
text-align: right;
}
td:last-child {
border-bottom: none;
}
td::before {
content: attr(data-label);
position: absolute;
right: 10px;
width: 35%;
font-weight: bold;
color: #555;
text-align: right;
}
}

/* اینفوگرافیک جایگزین */
.infographic-section {
margin: 3em 0;
padding: 30px;
background-color: #f0f8ff;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
text-align: center;
}

.infographic-section h3 {
color: #0056b3;
font-size: clamp(1.3em, 3vw, 1.9em);
margin-bottom: 1.5em;
border-right: none;
border-left: none;
padding-left: 0;
}

.infographic-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px; /* فاصله بین آیتم‌ها */
}

.infographic-item {
background-color: #fff;
border: 1px solid #e0eaff;
border-radius: 10px;
padding: 20px;
flex: 1 1 calc(33% – 50px); /* سه آیتم در هر ردیف، با احتساب گپ */
max-width: calc(33% – 50px);
min-width: 250px; /* حداقل عرض برای آیتم‌ها */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}

.infographic-item:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.infographic-icon {
font-size: 2.8em;
color: #28a745;
margin-bottom: 15px;
background-color: #e9fdf2;
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.infographic-item h4 {
font-size: clamp(1.1em, 2.5vw, 1.4em);
color: #1A2A4B;
margin-top: 0;
margin-bottom: 10px;
font-weight: 600;
text-align: center;
}

.infographic-item p {
font-size: clamp(0.85em, 1.8vw, 0.95em);
color: #555;
line-height: 1.6;
text-align: center;
}

@media (max-width: 992px) {
.infographic-item {
flex: 1 1 calc(50% – 25px); /* دو آیتم در هر ردیف */
max-width: calc(50% – 25px);
}
}

@media (max-width: 600px) {
.infographic-item {
flex: 1 1 100%; /* یک آیتم در هر ردیف */
max-width: 100%;
}
.infographic-grid {
gap: 15px;
}
.infographic-icon {
font-size: 2.2em;
width: 60px;
height: 60px;
}
}

/* باکس نکات/هشدارها */
.note-box {
background-color: #ffeccf;
border-right: 5px solid #ffc107;
padding: 18px 25px;
margin: 2.5em 0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
font-size: clamp(0.9em, 2vw, 1em);
color: #6a4a00;
text-align: justify;
}
.note-box strong {
color: #d68f00;
}
@media (max-width: 768px) {
.note-box {
padding: 15px 20px;
border-right: none;
border-left: 5px solid #ffc107; /* برای زبان فارسی */
}
}

/* فهرست مطالب شبیه‌سازی شده */
.table-of-contents {
background-color: #f0f8ff;
border: 1px solid #e0eaff;
border-radius: 10px;
padding: 20px 25px;
margin: 2em 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}
.table-of-contents h3 {
color: #0056b3;
margin-top: 0;
margin-bottom: 1em;
text-align: center;
border-right: none;
padding-right: 0;
border-bottom: 2px dashed #d0eaff;
padding-bottom: 10px;
}
.table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
.table-of-contents ul li {
margin-bottom: 0.8em;
padding: 0;
list-style-type: none;
border-bottom: 1px dotted #e6f2ff;
padding-bottom: 8px;
}
.table-of-contents ul li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.table-of-contents ul li a {
text-decoration: none;
color: #007BFF;
font-weight: 500;
transition: color 0.3s ease;
display: block;
padding: 5px 0;
font-size: clamp(0.95em, 2vw, 1.05em);
}
.table-of-contents ul li a:hover {
color: #28a745;
padding-right: 5px;
}

/* بخش سوالات متداول */
.faq-section {
margin-top: 3em;
background-color: #fcfdff;
border: 1px solid #e0eaff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}
.faq-section h2 {
text-align: center;
margin-bottom: 2em;
border-bottom: 2px solid #b0d0f7;
}
.faq-item {
margin-bottom: 1.5em;
border-bottom: 1px dashed #e6eef7;
padding-bottom: 1.5em;
}
.faq-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.faq-question {
font-weight: 600;
color: #0056b3;
font-size: clamp(1em, 2.2vw, 1.15em);
margin-bottom: 0.8em;
cursor: pointer;
display: flex;
align-items: center;
}
.faq-question::before {
content: ‘❓’;
margin-left: 10px;
font-size: 1.2em;
}
.faq-answer {
color: #444;
font-size: clamp(0.9em, 1.9vw, 1em);
line-height: 1.7;
padding-right: 30px; /* برای همترازی با متن سوال */
text-align: justify;
}
@media (max-width: 768px) {
.faq-question::before {
margin-left: 5px;
}
.faq-answer {
padding-right: 20px;
}
}

/* تنظیمات زبان فارسی */
body, h1, h2, h3, h4, p, table, ul, ol, .note-box, .infographic-item, .faq-item {
direction: rtl;
text-align: right;
}

“`