/* این بخش استایل برای اطمینان از رسپانسیو بودن و زیبایی در دستگاه‌های مختلف است */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap’);

body {
margin: 0;
padding: 0;
font-family: ‘Vazirmatn’, sans-serif;
background-color: #f0f2f5; /* رنگ پس‌زمینه کلی برای سایت */
direction: rtl;
color: #34495E;
}

/* تنظیمات عمومی برای بخش اصلی محتوا */
.article-container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* بهبود خوانایی برای پاراگراف‌ها */
p {
line-height: 1.8;
margin-bottom: 1.2em;
}

/* استایل‌دهی هدینگ‌ها برای نمایش در ویرایشگرهای بلوک (با فرض پشتیبانی از CSS) */
h1 {
font-size: 2.8em; /* 45px */
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 35px;
line-height: 1.3;
padding: 15px 0;
background: linear-gradient(135deg, #E0F2F7 0%, #D1ECF1 100%);
border-radius: 8px;
}

h2 {
font-size: 2.2em; /* 35px */
font-weight: bold;
color: #1A5276;
margin-top: 45px;
margin-bottom: 25px;
border-bottom: 3px solid #AED6F1;
padding-bottom: 15px;
text-align: right;
}

h3 {
font-size: 1.8em; /* 29px */
font-weight: bold;
color: #2C3E50;
margin-top: 35px;
margin-bottom: 20px;
border-right: 4px solid #85C1E9;
padding-right: 15px;
}

/* استایل‌دهی برای لینک‌ها (اگر اضافه شوند) */
a {
color: #3498DB;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #21618C;
text-decoration: underline;
}

/* بهبود ظاهر جدول برای رسپانسیو بودن */
table {
width: 100%;
border-collapse: collapse;
background-color: #ffffff;
min-width: 300px; /* حداقل عرض برای نمایش بهتر در موبایل */
margin: 30px auto;
border-radius: 10px;
overflow: hidden; /* برای گرد شدن گوشه‌ها */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

th, td {
padding: 15px;
border: 1px solid #dee2e6;
text-align: right;
font-size: 1em;
color: #34495E;
}

th {
background-color: #85C1E9;
color: #ffffff;
font-size: 1.1em;
font-weight: bold;
text-align: center;
}

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

/* استایل برای لیست‌ها */
ul {
list-style-type: disc;
margin-right: 25px;
padding-right: 0;
font-size: 1.1em;
line-height: 1.9;
color: #34495E;
}

li {
margin-bottom: 10px;
}

/* استایل برای بخش اینفوگرافیک مفهومی */
.infographic-conceptual {
background-color: #e8f5e9;
border: 2px dashed #a5d6a7;
border-radius: 15px;
padding: 30px;
margin: 40px auto;
max-width: 700px;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
position: relative;
}

.infographic-title {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 20px;
font-weight: bold;
font-size: 1.2em;
letter-spacing: 1px;
white-space: nowrap; /* از شکستن خط جلوگیری می کند */
}

.infographic-step {
margin-bottom: 25px;
}

.infographic-step p:first-child {
font-size: 1.3em;
font-weight: bold;
color: #2E7D32;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
}

.infographic-step p:first-child span {
display: inline-block;
background-color: #81C784;
color: white;
border-radius: 50%;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
margin-left: 10px;
flex-shrink: 0; /* از کوچک شدن در موبایل جلوگیری می کند */
}

.infographic-step p:last-child {
font-size: 1em;
color: #4CAF50;
line-height: 1.6;
}

.infographic-divider {
width: 2px;
height: 30px;
background-color: #A5D6A7;
margin: 15px auto;
}

/* استایل برای بخش FAQ */
.faq-item {
background-color: #ecf0f1;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
border-right: 5px solid #85C1E9;
}

.faq-item h3 {
font-size: 1.6em;
font-weight: bold;
color: #2C3E50;
margin-bottom: 10px;
text-align: right;
border-right: none; /* حذف border-right اضافه از h3 عمومی */
padding-right: 0;
}

/* استایل بخش فراخوان به عمل (CTA) */
.call-to-action {
text-align: center;
margin-top: 50px;
padding: 25px;
background-color: #D1ECF1;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.call-to-action p {
font-size: 1.2em;
color: #1A5276;
font-weight: bold;
margin-bottom: 15px;
}

/* Media Queries برای رسپانسیو بودن */
@media (max-width: 768px) {
h1 {
font-size: 2em; /* کاهش اندازه فونت برای موبایل */
margin-bottom: 25px;
padding: 10px;
}
h2 {
font-size: 1.8em;
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 10px;
}
h3 {
font-size: 1.5em;
margin-top: 25px;
margin-bottom: 15px;
padding-right: 10px;
}
p, ul, table, th, td {
font-size: 1em;
line-height: 1.7;
}
.article-container {
padding: 15px;
}
.infographic-title {
font-size: 1em;
padding: 8px 15px;
top: -15px;
}
.infographic-step p:first-child {
font-size: 1.1em;
flex-direction: column; /* در موبایل به صورت عمودی نمایش داده شوند */
}
.infographic-step p:first-child span {
margin-left: 0;
margin-bottom: 5px;
}
.faq-item h3 {
font-size: 1.4em;
}
.call-to-action p {
font-size: 1.1em;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.7em;
padding: 8px;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
p, ul, table, th, td {
font-size: 0.95em;
}
.infographic-step p:first-child {
font-size: 1em;
}
.infographic-step p:first-child span {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 0.9em;
}
.faq-item h3 {
font-size: 1.2em;
}
}

**توضیحات مهم برای پیاده‌سازی:**

• این کد شامل تگ‌های HTML و CSS داخلی (inline styles و بلوک “) است. هنگام کپی کردن در ویرایشگر بلوک یا ویرایشگر کلاسیک، اگر ویرایشگر شما امکان وارد کردن HTML خام را دارد (مانند بلوک HTML سفارشی در گوتنبرگ یا حالت متنی/HTML در ویرایشگر کلاسیک)، محتوا به درستی نمایش داده خواهد شد.
• **هدینگ‌ها (H1, H2, H3):** من از تگ‌های واقعی `

  `, `

  `, `

  ` به همراه استایل‌های inline و CSS برای تعیین اندازه و ضخامت فونت استفاده کرده‌ام. اگر ویرایشگر شما به صورت خودکار این تگ‌ها را تشخیص دهد و به آنها استایل‌های پیش‌فرض خود را اعمال کند، ممکن است نیاز به بازبینی و تنظیم مجدد استایل‌ها در ویرایشگر خود داشته باشید تا دقیقاً مطابق با طراحی پیشنهادی من باشد. در غیر این صورت، با کپی مستقیم کد، استایل‌ها باید اعمال شوند.

• **فونت:** از فونت ‘Vazirmatn’ استفاده شده است. اطمینان حاصل کنید که این فونت بر روی سایت شما بارگذاری شده است (من لینک آن را در CSS قرار داده‌ام).
• **رسپانسیو بودن:** با استفاده از Media Queries در بخش “ سعی شده است محتوا برای نمایش در اندازه‌های مختلف صفحه (موبایل، تبلت، لپ‌تاپ، تلویزیون) بهینه باشد.
• **اینفوگرافیک:** به جای یک فایل تصویری، یک “اینفوگرافیک مفهومی” با استفاده از HTML و CSS ایجاد شده که اطلاعات را به صورت بصری و گام به گام نمایش می‌دهد. این روش باعث می‌شود در هر ویرایشگری که HTML را پشتیبانی می‌کند، به درستی نمایش داده شود و نیاز به آپلود تصویر جداگانه نباشد.
• **لینک‌سازی داخلی و خارجی:** در متن به صورت مستقیم لینکی قرار داده نشده است، اما شما می‌توانید (بر اساس سیاست‌های سایت خود) در کلمات کلیدی مرتبط، به صفحات داخلی یا منابع خارجی معتبر لینک دهید تا سئوی مقاله بهبود یابد.
• **Structured Data (داده‌های ساختاریافته):** برای بخش FAQ، پیشنهاد می‌شود FAQ Schema را به صورت جداگانه در بخش مربوط به سئو سایت (مثلاً با استفاده از افزونه‌های سئو) اضافه کنید تا در Rich Snippet های گوگل ظاهر شود.
• **تجربه کاربری (UX):** رنگ‌بندی ملایم و خوانا، پاراگراف‌های کوتاه، لیست‌ها و جدول برای بهبود تجربه خواننده و سادگی در اسکن محتوا در نظر گرفته شده است.