“`html

/*
** دستورالعمل‌های استایل‌دهی سراسری (Global Styles) **
این بخش شامل تنظیمات پایه برای فونت، رنگ‌ها و چیدمان است.
هدف: اطمینان از نمایش یکپارچه و زیبا در تمام دستگاه‌ها و ویرایشگرها.
*/
body {
font-family: ‘Vazirmatn’, ‘B nazanin’, ‘Arial’, sans-serif; /* فونت‌های منتخب فارسی و جایگزین انگلیسی */
margin: 0;
padding: 0;
direction: rtl; /* جهت نوشتاری راست به چپ برای زبان فارسی */
text-align: right;
background-color: #fcfcfc; /* رنگ پس‌زمینه اصلی، کمی مایل به کرم روشن */
color: #333; /* رنگ متن اصلی: خاکستری تیره */
line-height: 1.7; /* فاصله خطوط برای خوانایی بهتر */
font-size: 16px; /* اندازه فونت پایه */
}

/*
** کانتینر اصلی مقاله (Article Container) **
این دیو (div) محتوای اصلی مقاله را در بر می‌گیرد و مسئول ریسپانسیو بودن کلی است.
هدف: محدود کردن عرض محتوا در نمایشگرهای بزرگ و تنظیم فاصله از کناره‌ها.
*/
.article-container {
max-width: 900px; /* حداکثر عرض مقاله برای خوانایی در نمایشگرهای بزرگ */
margin: 40px auto; /* فاصله از بالا و پایین و قرارگیری در مرکز */
padding: 30px; /* پدینگ داخلی */
background-color: #fff; /* پس‌زمینه سفید برای محتوای اصلی */
border-radius: 15px; /* گوشه‌های گرد برای زیبایی */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* سایه ملایم برای جلوه سه‌بعدی */
border: 1px solid #e0e0e0; /* حاشیه نازک برای تفکیک */
}

/*
** استایل‌دهی تیترها (Headings) **
شامل H1، H2، H3 برای سلسله مراتب محتوا.
هدف: تمایز بصری تیترها و بهبود قابلیت اسکن محتوا.
*/
h1 {
font-size: 2.6em; /* اندازه بزرگ برای تیتر اصلی */
font-weight: 800; /* بسیار پررنگ */
color: #5A2C6E; /* بنفش تیره و باشکوه */
text-align: center; /* تراز وسط */
margin-bottom: 45px; /* فاصله از متن بعدی */
line-height: 1.4; /* فاصله خطوط */
padding-bottom: 20px; /* پدینگ زیرین */
border-bottom: 3px solid #E1BEE7; /* خط زیرین بنفش روشن */
}

h2 {
font-size: 2.0em; /* اندازه مناسب برای تیترهای اصلی بخش‌ها */
font-weight: 700; /* پررنگ */
color: #7B1FA2; /* بنفش متوسط */
margin-top: 55px; /* فاصله از بالا */
margin-bottom: 28px; /* فاصله از پایین */
padding-right: 18px; /* پدینگ از راست برای مرز */
border-right: 6px solid #B39DDB; /* مرز بنفش روشن‌تر در سمت راست */
}

h3 {
font-size: 1.6em; /* اندازه برای زیرتیترها */
font-weight: 600; /* نیمه‌پررنگ */
color: #9C27B0; /* بنفش روشن‌تر */
margin-top: 38px; /* فاصله از بالا */
margin-bottom: 20px; /* فاصله از پایین */
padding-right: 12px; /* پدینگ از راست */
border-right: 4px solid #E0F2F7; /* مرز بسیار روشن آبی/بنفش */
}

/*
** استایل‌دهی پاراگراف‌ها و متن (Paragraphs & Text) **
هدف: خوانایی بالا و جلوه بصری دلپذیر.
*/
p {
margin-bottom: 1.6em; /* فاصله بین پاراگراف‌ها */
font-size: 1.05em; /* اندازه فونت کمی بزرگتر از پایه */
text-align: justify; /* تراز دوطرفه برای ظاهری مرتب */
color: #444; /* رنگ متن کمی روشن‌تر از پایه */
}

strong {
color: #7B1FA2; /* رنگ پررنگ برای متن‌های مهم */
font-weight: 700;
}

/*
** استایل‌دهی لیست‌ها (Lists) **
هدف: سازماندهی اطلاعات به صورت خوانا و جذاب.
*/
ul {
margin-right: 30px; /* فاصله از سمت راست */
margin-bottom: 1.8em; /* فاصله از پایین */
list-style-type: none; /* حذف نشانگر پیش‌فرض */
padding: 0;
}
ul li {
margin-bottom: 1em; /* فاصله بین آیتم‌های لیست */
padding-right: 15px; /* پدینگ برای نشانگر سفارشی */
font-size: 1.05em;
position: relative; /* برای قرار دادن نشانگر سفارشی */
}
ul li::before {
content: ‘🌟’; /* نشانگر ستاره‌ای سفارشی */
color: #FFC107; /* رنگ طلایی برای ستاره */
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
}

/*
** استایل‌دهی جدول (Table Styling) **
هدف: نمایش منظم و قابل فهم داده‌ها.
*/
.styled-table {
width: 100%; /* عرض کامل */
border-collapse: collapse; /* ادغام مرزها */
margin: 35px 0; /* فاصله از بالا و پایین */
font-size: 1.0em;
text-align: right;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07); /* سایه ملایم */
border-radius: 12px; /* گوشه‌های گرد */
overflow: hidden; /* برای اعمال گوشه‌های گرد به محتوا */
}

.styled-table th,
.styled-table td {
padding: 18px 22px; /* پدینگ سلول‌ها */
border: 1px solid #eceff1; /* مرز نازک سلول‌ها */
}

.styled-table thead tr {
background-color: #7B1FA2; /* پس‌زمینه بنفش برای سربرگ */
color: #ffffff; /* متن سفید برای سربرگ */
text-align: center; /* تراز وسط برای متن سربرگ */
font-weight: 700;
}

.styled-table tbody tr:nth-of-type(even) {
background-color: #f9f9f9; /* راه‌راه کردن ردیف‌ها برای خوانایی بهتر */
}

.styled-table tbody tr:hover {
background-color: #f0f0f0; /* افکت هاور روی ردیف‌ها */
transition: background-color 0.3s ease;
}

/*
** بخش اینفوگرافیک (Infographic-like Section) **
هدف: ارائه اطلاعات کلیدی به صورت بصری و جذاب (جایگزین اینفوگرافیک تصویری).
*/
.infographic-block {
display: flex; /* استفاده از فلکس‌باکس برای چیدمان انعطاف‌پذیر */
flex-wrap: wrap; /* اجازه شکستن آیتم‌ها به خط بعدی */
gap: 30px; /* فاصله بین آیتم‌ها */
margin: 50px 0; /* فاصله از بالا و پایین */
justify-content: center; /* تراز وسط آیتم‌ها */
}

.infographic-item {
flex: 1 1 calc(50% – 30px); /* دو آیتم در هر ردیف با فاصله */
background-color: #fbf0ff; /* پس‌زمینه بسیار روشن بنفش */
border: 2px solid #D1C4E9; /* حاشیه بنفش روشن */
border-radius: 18px; /* گوشه‌های گرد */
padding: 30px; /* پدینگ داخلی */
text-align: center; /* تراز وسط محتوای آیتم */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); /* سایه ملایم */
min-width: 300px; /* حداقل عرض برای هر آیتم */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* افکت انتقال هنگام هاور */
}

.infographic-item:hover {
transform: translateY(-7px); /* حرکت کمی به سمت بالا هنگام هاور */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* افزایش سایه هنگام هاور */
}

.infographic-icon {
font-size: 3.5em; /* اندازه بزرگ برای آیکون */
color: #9C27B0; /* رنگ بنفش برای آیکون */
margin-bottom: 20px; /* فاصله از متن */
display: block; /* اطمینان از قرارگیری آیکون در خط جداگانه */
}

.infographic-item h4 {
font-size: 1.5em; /* اندازه تیتر داخلی آیتم */
color: #7B1FA2; /* رنگ بنفش برای تیتر */
margin-bottom: 12px; /* فاصله از پاراگراف */
font-weight: 600;
}

.infographic-item p {
font-size: 1.0em;
color: #555;
margin-bottom: 0;
text-align: center; /* تراز وسط برای متن داخلی */
}

/*
** دکمه فراخوان به اقدام (Call to Action Button) **
هدف: هدایت کاربر به صفحه تماس یا سفارش.
*/
.cta-button {
display: block; /* نمایش به صورت بلوک برای کنترل عرض و مرکزیت */
width: fit-content; /* عرض متناسب با محتوا */
margin: 50px auto; /* قرارگیری در مرکز و فاصله از بالا و پایین */
padding: 18px 35px; /* پدینگ داخلی */
background-color: #A167AF; /* رنگ بنفش جذاب برای دکمه */
color: #ffffff; /* متن سفید */
text-decoration: none; /* حذف زیرخط لینک */
border-radius: 10px; /* گوشه‌های گرد */
font-size: 1.4em; /* اندازه بزرگ برای متن دکمه */
font-weight: 700;
text-align: center;
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* افکت انتقال */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* سایه دکمه */
}

.cta-button:hover {
background-color: #8D5EA1; /* رنگ تیره‌تر هنگام هاور */
transform: translateY(-3px); /* حرکت کمی به سمت بالا */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* سایه بیشتر هنگام هاور */
}

/*
** تنظیمات ریسپانسیو (Responsive Adjustments) **
این بخش شامل Media Queries برای تنظیم چیدمان در اندازه‌های مختلف صفحه است.
هدف: نمایش بهینه در موبایل، تبلت، لپ‌تاپ و تلویزیون.
*/

/* لپ‌تاپ‌ها و تبلت‌های بزرگ (عرض تا 1024 پیکسل) */
@media (max-width: 1024px) {
.article-container {
margin: 30px auto;
padding: 25px;
}
h1 { font-size: 2.3em; margin-bottom: 40px; }
h2 { font-size: 1.8em; margin-top: 45px; margin-bottom: 22px; padding-right: 15px; }
h3 { font-size: 1.4em; margin-top: 32px; margin-bottom: 18px; padding-right: 10px; }
p, ul li, .styled-table { font-size: 1em; }
.infographic-item { flex: 1 1 calc(50% – 30px); } /* حفظ دو ستون */
.infographic-icon { font-size: 3em; }
.infographic-item h4 { font-size: 1.3em; }
.cta-button { font-size: 1.3em; padding: 15px 30px; }
}

/* تبلت‌ها (عرض تا 768 پیکسل) */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 20px;
box-shadow: none; /* حذف سایه در تبلت برای ظاهر ساده‌تر */
border-radius: 10px;
}
h1 { font-size: 2em; margin-bottom: 35px; padding-bottom: 15px; }
h2 { font-size: 1.6em; margin-top: 35px; margin-bottom: 20px; padding-right: 12px; border-right-width: 4px; }
h3 { font-size: 1.3em; margin-top: 28px; margin-bottom: 15px; padding-right: 8px; border-right-width: 3px; }
p { font-size: 0.95em; }
ul { margin-right: 20px; }
ul li { font-size: 0.9em; padding-right: 12px; }
ul li::before { font-size: 1.1em; }
.styled-table th, .styled-table td { padding: 15px 18px; font-size: 0.95em; }
.infographic-block { gap: 25px; }
.infographic-item {
flex: 1 1 100%; /* هر آیتم در یک ردیف جداگانه */
padding: 25px;
min-width: unset; /* حذف حداقل عرض */
}
.infographic-icon { font-size: 2.8em; }
.infographic-item h4 { font-size: 1.2em; }
.cta-button {
width: 85%;
font-size: 1.2em;
padding: 14px 28px;
margin: 35px auto;
}
}

/* موبایل‌ها (عرض تا 480 پیکسل) */
@media (max-width: 480px) {
body { font-size: 15px; } /* کاهش اندازه فونت پایه */
.article-container {
margin: 15px auto;
padding: 15px;
border-radius: 0; /* حذف گوشه‌های گرد برای ظاهر تمام‌عرض */
border: none;
box-shadow: none;
}
h1 { font-size: 1.7em; margin-bottom: 25px; padding-bottom: 10px; border-bottom-width: 2px; }
h2 { font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; padding-right: 10px; border-right-width: 3px; }
h3 { font-size: 1.1em; margin-top: 20px; margin-bottom: 10px; padding-right: 6px; border-right-width: 2px; }
p { font-size: 0.9em; }
ul { margin-right: 15px; }
ul li { font-size: 0.85em; padding-right: 10px; }
ul li::before { font-size: 1em; right: -5px; }
.styled-table th, .styled-table td {
padding: 12px 15px;
font-size: 0.85em;
}
/* برای جداول در موبایل، اجازه اسکرول افقی می‌دهیم اگر خیلی عریض شوند */
.styled-table {
display: block;
overflow-x: auto;
white-space: nowrap; /* از شکستن متن در سلول‌ها جلوگیری می‌کند */
}
.styled-table thead, .styled-table tbody, .styled-table th, .styled-table td, .styled-table tr {
display: block; /* نمایش عناصر جدول به عنوان بلوک */
}
.styled-table th, .styled-table td {
width: 100%; /* هر سلول عرض کامل بگیرد */
box-sizing: border-box; /* پدینگ در عرض محاسبه شود */
white-space: normal; /* اجازه شکستن متن در سلول‌ها */
}
.styled-table tbody tr {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.styled-table th {
text-align: right;
color: #333;
background-color: #f0f0f0;
font-weight: 600;
position: sticky; /* برای اینکه تیتر ستون در بالای دید بماند */
top: 0;
z-index: 1;
}
.styled-table tbody td:before {
content: attr(data-label); /* نمایش تیتر ستون به عنوان لیبل */
font-weight: bold;
display: block;
margin-bottom: 5px;
color: #7B1FA2;
}

.infographic-block { gap: 15px; margin: 30px 0; }
.infographic-item { padding: 20px; }
.infographic-icon { font-size: 2.2em; margin-bottom: 15px; }
.infographic-item h4 { font-size: 1.1em; }
.cta-button {
width: 95%;
font-size: 1.05em;
padding: 12px 20px;
margin: 25px auto;
}
}

/* تنظیمات برای حالت چاپ (Print Styles) */
@media print {
body {
background-color: #fff !important;
color: #000 !important;
}
.article-container {
box-shadow: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
h1, h2, h3 {
color: #000 !important;
border-bottom: 1px solid #ccc !important;
border-right: none !important;
padding-right: 0 !important;
}
.styled-table th, .styled-table td {
border: 1px solid #ccc !important;
background-color: #fff !important;
color: #000 !important;
}
.infographic-block, .cta-button {
display: none !important; /* پنهان کردن عناصر غیرضروری برای چاپ */
}
p, ul li {
font-size: 12pt !important;
line-height: 1.5 !important;
}
}

“`