“`html

/*
این کدهای CSS به عنوان پیشنهاد برای نمایش بهتر مقاله در ویرایشگر بلوک ارائه شده‌اند.
شما می‌توانید آن‌ها را در بخش CSS سفارشی قالب خود یا در یک بلوک HTML سفارشی قرار دهید.
رنگ‌ها و فونت‌ها باید با برند و هویت بصری سایت شما هماهنگ باشند.
فونت “Vazirmatn” برای زبان فارسی بسیار خوانا و مدرن است. در صورت نیاز می‌توانید آن را از Google Fonts یا CDN مورد نظر بارگذاری کنید.
مثال برای بارگذاری فونت Vazirmatn (بهتر است در فایل CSS اصلی سایت قرار گیرد):
@import url(‘https://cdn.jsdelivr.net/fontsource/fonts/vazirmatn@latest/dist/vazirmatn.css’);
*/
:root {
–primary-color: #007bff; /* آبی برای لینک‌ها و عناصر اصلی */
–secondary-color: #6c757d; /* خاکستری برای متن‌های فرعی */
–accent-color: #28a745; /* سبز برای هایلایت‌ها و نتایج مثبت */
–background-color: #f8f9fa; /* پس‌زمینه روشن */
–text-color: #343a40; /* رنگ متن اصلی */
–heading-color: #0d2a4a; /* رنگ هدینگ‌ها */
–border-color: #e0e0e0; /* رنگ حاشیه‌ها */
–font-family-sans: ‘Vazirmatn’, ‘Arial’, sans-serif; /* فونت اصلی */
}

body {
font-family: var(–font-family-sans);
line-height: 1.7;
color: var(–text-color);
background-color: var(–background-color);
margin: 0;
padding: 0;
box-sizing: border-box; /* اطمینان از محاسبات درست در رسپانسیو */
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(–font-family-sans);
color: var(–heading-color);
margin-top: 1.5em;
margin-bottom: 0.8em;
line-height: 1.3;
font-weight: bold; /* تمامی هدینگ‌ها پیش‌فرض bold هستند */
}

h1 {
font-size: 2.6em;
text-align: center;
border-bottom: 3px solid var(–primary-color);
padding-bottom: 15px;
margin-bottom: 30px;
color: var(–heading-color);
}
h2 {
font-size: 2.0em;
border-bottom: 2px solid var(–border-color);
padding-bottom: 10px;
margin-top: 2.5em;
color: var(–heading-color);
}
h3 {
font-size: 1.5em;
color: var(–primary-color);
}

p {
margin-bottom: 1em;
text-align: justify;
}

ul, ol {
margin-bottom: 1em;
padding-right: 20px; /* برای راست‌چین کردن لیست‌ها */
list-style-position: inside; /* برای نمایش مارکر لیست‌ها در داخل فضای متن */
}
ul li {
list-style-type: ‘• ‘; /* سفارشی‌سازی مارکر بولت */
}
ol li {
list-style-type: decimal;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* برای نمایش درست گوشه‌های گرد با border-collapse */
}

table caption {
caption-side: top;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
font-size: 1.2em;
color: var(–heading-color);
padding-top: 10px;
}

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

table th {
background-color: var(–primary-color);
color: white;
font-weight: bold;
}

table tr:nth-child(even) {
background-color: #f2f2f2;
}

/* استایل اینفوگرافیک زیبا */
.info-graphic-box {
background-color: #e6f7ff; /* رنگ آبی روشن برای پس‌زمینه */
border-right: 5px solid var(–primary-color); /* خط آبی در سمت راست */
padding: 25px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
text-align: right;
direction: rtl; /* اطمینان از راست‌چین بودن کل بلوک */
}

.info-graphic-box h3 {
color: var(–heading-color);
margin-top: 0;
font-size: 1.6em;
text-align: center;
margin-bottom: 20px;
border-bottom: 1px dashed var(–primary-color);
padding-bottom: 10px;
}

.info-graphic-box ul {
list-style: none; /* حذف مارکر پیش‌فرض */
padding: 0;
margin: 0;
}

.info-graphic-box li {
position: relative;
padding-right: 40px; /* فضای خالی برای آیکون */
margin-bottom: 18px;
font-size: 1.1em;
color: var(–text-color);
line-height: 1.5;
}

.info-graphic-box li::before {
content: “✓”; /* آیکون تیک */
color: var(–accent-color); /* رنگ سبز برای آیکون */
position: absolute;
right: 0;
font-weight: bold;
font-size: 1.5em;
top: -2px;
background-color: #d4edda; /* پس‌زمینه روشن برای آیکون */
border-radius: 50%; /* گرد کردن پس‌زمینه */
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* استایل بلوک نتیجه‌گیری */
.conclusion-box {
background-color: #d4edda; /* سبز روشن برای نتیجه‌گیری */
border: 1px solid #28a745;
padding: 25px;
margin: 40px 0;
border-radius: 8px;
text-align: justify;
color: #155724; /* رنگ متن تیره برای کنتراست */
line-height: 1.8;
}

/* استایل بخش پرسش‌های متداول */
.faq-section {
background-color: #ffffff;
padding: 25px;
margin: 40px 0;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
direction: rtl; /* اطمینان از راست‌چین بودن کل بلوک */
}

.faq-section h2 {
text-align: center;
border-bottom: none;
margin-top: 0;
margin-bottom: 25px;
color: var(–primary-color);
font-size: 2.2em; /* کمی بزرگتر برای جلب توجه */
}

.faq-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed var(–border-color);
}

.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.faq-item h3 {
color: var(–heading-color);
font-size: 1.3em;
margin-bottom: 10px;
cursor: pointer; /* برای حس تعاملی بودن (اگر قابلیت آکاردئون اضافه شود) */
padding-right: 0; /* حذف padding اضافی h3 */
border-bottom: none; /* حذف border اضافی h3 */
}

.faq-item p {
font-size: 1em;
line-height: 1.6;
padding-right: 20px; /* تورفتگی پاسخ */
color: var(–text-color);
}

/* Responsive Design Adjustments */
@media (max-width: 992px) { /* برای لپ‌تاپ‌های کوچک و تبلت‌های افقی */
.container { max-width: 768px; }
h1 { font-size: 2.4em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
}

@media (max-width: 768px) { /* برای تبلت‌ها و موبایل‌های افقی */
.container { padding: 15px; }
h1 { font-size: 2em; border-bottom: 2px solid var(–primary-color); padding-bottom: 10px; margin-bottom: 20px; }
h2 { font-size: 1.6em; border-bottom: 1px solid var(–border-color); padding-bottom: 8px; margin-top: 2em; }
h3 { font-size: 1.3em; }
table th, table td { padding: 10px; font-size: 0.9em; }
.info-graphic-box, .conclusion-box, .faq-section { padding: 20px; margin: 25px 0; }
.info-graphic-box h3 { font-size: 1.4em; margin-bottom: 15px; }
.info-graphic-box li { font-size: 1em; padding-right: 35px; margin-bottom: 12px; }
.info-graphic-box li::before { font-size: 1.3em; width: 25px; height: 25px; }
.faq-section h2 { font-size: 1.8em; margin-bottom: 20px; }
.faq-item h3 { font-size: 1.2em; }
.faq-item p { font-size: 0.95em; padding-right: 15px; }
}

@media (max-width: 480px) { /* برای موبایل */
.container { padding: 10px; }
h1 { font-size: 1.8em; padding-bottom: 8px; margin-bottom: 15px; }
h2 { font-size: 1.4em; padding-bottom: 5px; margin-top: 1.5em; }
h3 { font-size: 1.1em; }
p { font-size: 0.95em; }
ul, ol { padding-right: 15px; }
table { border-radius: 5px; }
table th, table td { padding: 8px; font-size: 0.85em; }
.info-graphic-box, .conclusion-box, .faq-section { padding: 15px; margin: 15px 0; }
.info-graphic-box h3 { font-size: 1.2em; margin-bottom: 10px; }
.info-graphic-box li { font-size: 0.9em; padding-right: 30px; margin-bottom: 10px; }
.info-graphic-box li::before { font-size: 1.1em; width: 22px; height: 22px; }
.faq-section h2 { font-size: 1.6em; margin-bottom: 15px; }
.faq-item h3 { font-size: 1.1em; margin-bottom: 8px; }
.faq-item p { font-size: 0.9em; padding-right: 10px; }
}

@media (min-width: 1200px) { /* برای نمایشگرهای بزرگتر و تلویزیون */
.container { max-width: 1140px; }
h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 1.7em; }
.info-graphic-box { padding: 35px; margin: 40px 0; }
.info-graphic-box h3 { font-size: 1.8em; }
.info-graphic-box li { font-size: 1.2em; padding-right: 45px; margin-bottom: 20px; }
.info-graphic-box li::before { font-size: 1.7em; width: 32px; height: 32px; }
.faq-section { padding: 35px; margin: 50px 0; }
.faq-section h2 { font-size: 2.6em; }
.faq-item h3 { font-size: 1.4em; }
.faq-item p { font-size: 1.05em; }
}

“`