“`html

/* CSS برای طراحی منحصر به فرد و رسپانسیو مقاله سئو شده */
/* این کد را می‌توانید در بخش Custom CSS وب‌سایت خود یا در تگ صفحه قرار دهید. */

/* تنظیمات عمومی و فونت */
body {
font-family: ‘Tahoma’, ‘Vazirmatn’, sans-serif; /* فونت‌های خوانا برای فارسی */
line-height: 1.7; /* فاصله خطوط برای خوانایی بهتر */
color: #34495E; /* رنگ متن اصلی (آبی-خاکستری تیره) */
background-color: #F8F9FA; /* رنگ پس‌زمینه کلی صفحه (خاکستری بسیار روشن) */
margin: 0;
padding: 0;
direction: rtl; /* جهت متن از راست به چپ برای فارسی */
text-align: right; /* تراز متن به راست */
}

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

/* هدینگ H1 (عنوان اصلی) */
h1 {
font-size: 2.8em; /* سایز بزرگتر برای عنوان اصلی */
color: #2C3E50; /* رنگ تیره‌تر برای H1 */
font-weight: 800; /* بسیار ضخیم */
text-align: center; /* تراز وسط */
margin-bottom: 40px; /* فاصله از متن زیرین */
padding-bottom: 15px; /* پدینگ زیرین برای خط */
border-bottom: 3px solid #4CAF50; /* خط زیرین سبز جذاب */
line-height: 1.3;
}

/* هدینگ H2 (عناوین اصلی بخش‌ها) */
h2 {
font-size: 2.1em;
color: #34495E;
font-weight: 700; /* ضخیم‌تر */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 15px;
border-right: 5px solid #8BC34A; /* خط کناری سبز روشن */
}

/* هدینگ H3 (عناوین فرعی) */
h3 {
font-size: 1.6em;
color: #34495E;
font-weight: 600; /* متوسط ضخیم */
margin-top: 40px;
margin-bottom: 20px;
padding-right: 10px;
border-right: 3px solid #CFD8DC; /* خط کناری خاکستری روشن */
}

/* پاراگراف‌ها */
p {
margin-bottom: 1.5em; /* فاصله بین پاراگراف‌ها */
font-size: 1.1em; /* سایز فونت کمی بزرگتر برای خوانایی */
line-height: 1.8;
}

/* لیست‌های نامرتب (Unordered Lists) */
ul {
margin-bottom: 1.5em;
padding-right: 25px; /* پدینگ برای نشانه‌گر لیست */
list-style-type: none; /* حذف نشانه‌گر پیش‌فرض */
}
ul li {
margin-bottom: 0.8em;
font-size: 1.05em;
color: #34495E; /* رنگ متن آیتم لیست */
position: relative; /* برای قرار دادن آیکون سفارشی */
padding-right: 30px; /* فضای لازم برای آیکون */
}
ul li::before {
content: ‘✅’; /* آیکون سفارشی (تیک سبز) */
position: absolute;
right: 0;
color: #4CAF50; /* رنگ آیکون */
font-size: 1.2em;
top: -2px;
}

/* لیست‌های مرتب (Ordered Lists) */
ol {
margin-bottom: 1.5em;
padding-right: 25px;
list-style-position: inside; /* شماره‌ها داخل پدینگ قرار گیرند */
counter-reset: my-counter; /* برای شماره‌گذاری سفارشی */
}
ol li {
margin-bottom: 0.8em;
font-size: 1.05em;
color: #34495E;
position: relative;
padding-right: 30px;
}
ol li::before {
counter-increment: my-counter;
content: counter(my-counter) “. “; /* شماره‌گذاری با نقطه */
font-weight: bold;
color: #4CAF50;
position: absolute;
right: 0;
}

/* جدول آموزشی */
table {
width: 100%; /* عرض کامل جدول */
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 30px 0; /* فاصله از بالا و پایین */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه ظریف */
border-radius: 8px; /* گوشه‌های گرد */
overflow: hidden; /* برای اعمال border-radius به محتوا */
}
table th, table td {
border: 1px solid #CFD8DC; /* رنگ حاشیه جدول (خاکستری روشن) */
padding: 15px; /* پدینگ داخلی خانه‌ها */
text-align: center; /* تراز وسط */
font-size: 1.05em;
}
table th {
background-color: #E8F5E9; /* پس‌زمینه سربرگ جدول (سبز بسیار روشن) */
color: #2C3E50;
font-weight: 700;
}
table tr:nth-child(even) {
background-color: #F8FDF8; /* رنگ پس‌زمینه ردیف‌های زوج */
}
table tr:hover {
background-color: #E0F2F1; /* رنگ در هنگام هاور */
}

/* اینفوگرافیک جایگزین متنی */
.infographic-block {
background-color: #E8F5E9; /* پس‌زمینه سبز روشن */
border-radius: 12px;
padding: 30px;
margin: 40px 0;
text-align: center;
border: 2px dashed #8BC34A; /* حاشیه خط‌چین جذاب */
color: #2C3E50;
}
.infographic-block h3 {
color: #4CAF50; /* رنگ سبز برای عنوان اینفوگرافیک */
font-size: 1.8em;
margin-top: 0;
margin-bottom: 20px;
border-right: none; /* حذف border-right برای اینفوگرافیک */
}
.infographic-block .step {
margin-bottom: 20px;
font-size: 1.15em;
display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
align-items: center;
justify-content: center;
flex-wrap: wrap; /* برای ریسپانسیو بودن در موبایل */
text-align: right;
}
.infographic-block .step strong {
color: #34495E;
font-size: 1.2em;
margin: 0 10px;
flex-basis: auto; /* خودکار تنظیم شود */
min-width: 150px; /* حداقل عرض برای عنوان گام */
text-align: left;
}
.infographic-block .step span {
flex-basis: auto; /* خودکار تنظیم شود */
flex-grow: 1; /* اجازه رشد به خود می‌دهد */
text-align: right;
}
.infographic-block .icon {
font-size: 1.5em;
color: #4CAF50;
margin-left: 10px; /* فاصله از متن */
}

/* بخش سوالات متداول (FAQ) */
.faq-section {
margin-top: 50px;
background-color: #F8FDF8; /* پس‌زمینه سبز بسیار روشن */
border-radius: 10px;
padding: 25px;
border: 1px solid #CFD8DC;
}
.faq-section h2 {
border-right: 5px solid #4CAF50; /* خط کناری سبز پررنگ */
padding-right: 15px;
margin-top: 0;
margin-bottom: 30px;
}
.faq-item {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dashed #E0E0E0; /* خط‌چین جداکننده سوالات */
}
.faq-item:last-child {
border-bottom: none; /* آخرین آیتم خط جداکننده نداشته باشد */
margin-bottom: 0;
padding-bottom: 0;
}
.faq-question {
font-weight: 700;
color: #2C3E50;
font-size: 1.15em;
margin-bottom: 8px;
position: relative;
padding-right: 30px; /* فضای لازم برای آیکون */
}
.faq-question::before {
content: ‘❓’; /* آیکون سوال */
position: absolute;
right: 0;
font-size: 1.2em;
top: -2px;
}
.faq-answer {
font-size: 1.05em;
color: #555;
padding-right: 30px;
position: relative;
}
.faq-answer::before {
content: ‘💡’; /* آیکون پاسخ */
position: absolute;
right: 0;
font-size: 1.2em;
top: -2px;
}

/* ———- ریسپانسیو بودن (Responsive Design) ———- */

/* برای دستگاه‌های کوچک (موبایل) */
@media (max-width: 768px) {
.container {
margin: 15px auto;
padding: 15px;
border-radius: 8px;
}
h1 {
font-size: 2em; /* کاهش سایز H1 */
margin-bottom: 30px;
padding-bottom: 10px;
}
h2 {
font-size: 1.6em; /* کاهش سایز H2 */
margin-top: 40px;
margin-bottom: 20px;
padding-right: 10px;
}
h3 {
font-size: 1.3em; /* کاهش سایز H3 */
margin-top: 30px;
margin-bottom: 15px;
padding-right: 8px;
}
p, ul li, ol li, table th, table td, .infographic-block .step, .faq-question, .faq-answer {
font-size: 1em; /* سایز پایه فونت برای موبایل */
}

/* تنظیمات اینفوگرافیک برای موبایل */
.infographic-block .step {
flex-direction: column; /* آیتم‌ها زیر هم قرار گیرند */
align-items: flex-end; /* تراز به راست */
text-align: right;
}
.infographic-block .step strong, .infographic-block .step span {
flex-basis: 100%; /* عرض کامل در موبایل */
text-align: right;
margin-bottom: 5px;
}
.infographic-block .step strong {
text-align: right; /* عنوان گام به راست */
}
.infographic-block .icon {
display: none; /* حذف آیکون‌ها برای صرفه‌جویی در فضا */
}

/* تنظیمات FAQ برای موبایل */
.faq-question, .faq-answer {
padding-right: 25px;
}
.faq-question::before, .faq-answer::before {
font-size: 1em;
top: 0;
}

/* تنظیمات لیست‌ها برای موبایل */
ul li, ol li {
padding-right: 25px;
}
ul li::before, ol li::before {
font-size: 1.1em;
top: 0;
}
}

/* برای دستگاه‌های کوچکتر (تلفن‌های همراه قدیمی) */
@media (max-width: 480px) {
h1 {
font-size: 1.6em;
margin-bottom: 20px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
.container {
padding: 10px;
margin: 10px auto;
}
table th, table td {
padding: 10px;
font-size: 0.9em; /* کوچکتر شدن فونت جدول */
}
}

/* برای نمایش در تلویزیون یا مانیتورهای بزرگ (Smart TV / Large Desktop) */
@media screen and (min-width: 1200px) {
.container {
max-width: 1200px; /* فضای بیشتر برای نمایش بزرگتر */
padding: 40px 60px;
margin: 50px auto;
}
h1 {
font-size: 3.5em;
margin-bottom: 60px;
}
h2 {
font-size: 2.5em;
margin-top: 70px;
}
h3 {
font-size: 2em;
}
p, ul li, ol li, table th, table td, .infographic-block .step, .faq-question, .faq-answer {
font-size: 1.25em; /* سایز فونت بزرگتر */
}
.infographic-block .step strong {
min-width: 200px; /* حداقل عرض برای عنوان گام در صفحه بزرگ */
}
}

“`