“`html

/*
** طراحی رسپانسیو و منحصر به فرد برای نمایش در ویرایشگر بلوک، لپ‌تاپ، تبلت، موبایل و تلویزیون **

این استایل‌ها با دقت طراحی شده‌اند تا محتوا را زیبا، خوانا و قابل انطباق با هر سایز صفحه نمایش کنند.
از پالت رنگی گرم و حرفه‌ای استفاده شده تا حس اعتماد و اعتبار علمی را منتقل کند.

پالت رنگی:
– اصلی (متن): #333333 (قهوه‌ای تیره)، #444444، #555555
– هدینگ‌ها: #2C3E50 (آبی تیره مایل به خاکستری) – H1, #34495E (کمی روشن‌تر) – H2, #5C6F80 (خاکستری آبی) – H3
– رنگ‌های تاکیدی/اکسنت: #E67E22 (نارنجی پررنگ)، #3498DB (آبی روشن)، #27AE60 (سبز)
– پس‌زمینه: #f9f9f9 (خاکستری روشن) برای بدنه، #fff (سفید) برای کانتینر اصلی

ساختار کلی:
– `body`: تنظیمات پایه فونت، رنگ متن، جهت‌دهی و پس‌زمینه.
– `.container`: یک کانتینر مرکزی برای محتوا با عرض محدود، سایه ظریف و گوشه‌های گرد برای زیبایی.
– `h1`, `h2`, `h3`: استایل‌های اختصاصی برای هر سطح هدینگ شامل سایز، ضخامت، رنگ و دکوراسیون‌های منحصر به فرد.
– `p`: تنظیمات پاراگراف برای خوانایی بالا.
– `ul`, `ol`, `li`: استایل‌های جذاب برای لیست‌ها با آیکون‌های سفارشی.
– `table`: طراحی مدرن برای جدول با رنگ‌های متناوب و سایه.
– `.infographic-box`: طراحی خاص برای جایگزین اینفوگرافیک با رنگ پس‌زمینه متمایز و لیست‌های کارت‌مانند.
– `@media queries`: تنظیمات اختصاصی برای اندازه‌های صفحه نمایش کوچک‌تر (تبلت و موبایل) جهت اطمینان از رسپانسیو بودن کامل.
*/

body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت مدرن و خوانا فارسی */
line-height: 1.8;
color: #333333; /* رنگ اصلی متن */
background-color: #f9f9f9; /* پس‌زمینه روشن */
direction: rtl; /* جهت راست به چپ برای فارسی */
text-align: right;
margin: 0;
padding: 20px; /* پدینگ کلی برای بدنه */
}

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

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

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

/* هدینگ H3 (زیرعنوان‌ها) */
h3 {
font-size: 1.7em;
color: #5C6F80; /* خاکستری آبی ملایم */
font-weight: 600; /* نیمه‌ضخیم */
margin-top: 35px;
margin-bottom: 20px;
padding-right: 10px;
line-height: 1.5;
position: relative;
}
h3::before { /* نقطه دکوراتیو با رنگ تاکیدی برای H3 */
content: ‘•’;
color: #E67E22;
font-size: 1.2em;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
padding-right: 5px;
}

/* پاراگراف‌ها */
p {
font-size: 1.15em;
margin-bottom: 25px;
line-height: 1.9; /* فاصله خطوط بیشتر برای خوانایی */
color: #444444;
}

/* لیست‌ها (نامرتب و مرتب) */
ul, ol {
margin-bottom: 25px;
padding-right: 25px; /* تورفتگی برای لیست‌ها */
}
li {
font-size: 1.1em;
margin-bottom: 12px;
line-height: 1.7;
color: #555555;
}
ul li::before { /* آیکون سفارشی (تیک سبز) برای لیست‌های نامرتب */
content: ‘✓’;
color: #27AE60; /* سبز */
font-weight: bold;
display: inline-block;
width: 1.5em;
margin-right: -1.5em;
margin-left: 0.5em;
}

/* استایل‌دهی جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌ها */
margin: 30px 0;
font-size: 1.1em;
text-align: right;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه ظریف برای جدول */
border-radius: 8px;
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
}
th, td {
padding: 18px 25px;
border: 1px solid #eee; /* خطوط جداکننده نازک */
}
th {
background-color: #3498DB; /* پس‌زمینه آبی برای سربرگ */
color: #fff;
font-weight: 700;
text-align: center;
}
td {
background-color: #fcfcfc; /* پس‌زمینه روشن برای خانه‌های عادی */
color: #555555;
}
tr:nth-child(even) td { /* پس‌زمینه متناوب برای ردیف‌ها (Zebra striping) */
background-color: #f2f7fb;
}

/* بخش جایگزین اینفوگرافیک (زیبا و ساختار یافته) */
.infographic-box {
background-color: #EBF5FB; /* پس‌زمینه آبی روشن */
border-right: 8px solid #3498DB; /* خط آبی پررنگ در سمت راست */
padding: 30px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}
.infographic-box h3 {
color: #2980B9; /* آبی تیره برای عنوان اینفوگرافیک */
border-bottom: 2px dashed #AEC6CF; /* خط زیرین نقطه‌چین */
padding-bottom: 10px;
margin-top: 0;
margin-bottom: 25px;
text-align: center;
}
.infographic-box ul {
list-style: none; /* حذف استایل پیش‌فرض لیست */
padding: 0;
}
.infographic-box ul li {
background-color: #fff; /* پس‌زمینه سفید برای هر آیتم */
padding: 15px 20px;
margin-bottom: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* سایه ظریف برای هر آیتم */
display: flex; /* برای چیدمان آیکون و متن */
align-items: center;
border-right: 4px solid #2ECC71; /* خط سبز در سمت راست برای تاکید */
}
.infographic-box ul li::before { /* آیکون ستاره/اسپارکل برای هر آیتم اینفوگرافیک */
content: ‘✨’;
margin-left: 15px;
font-size: 1.5em;
flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
color: #F1C40F; /* رنگ طلایی برای ستاره */
}

/* جداکننده بخش‌ها */
.section-separator {
margin: 60px 0;
border: none;
border-top: 1px dashed #CCC; /* خط جداکننده نقطه‌چین */
width: 70%;
margin-left: auto;
margin-right: auto;
}

/*
** رسپانسیو بودن برای دستگاه‌های مختلف **
تنظیمات برای نمایش صحیح در تبلت‌ها و موبایل‌ها
*/

/* تبلت (عرض حداکثر 768px) */
@media (max-width: 768px) {
h1 {
font-size: 2.2em;
margin-bottom: 30px;
}
h2 {
font-size: 1.8em;
margin-top: 40px;
margin-bottom: 20px;
}
h3 {
font-size: 1.4em;
margin-top: 30px;
margin-bottom: 15px;
}
p {
font-size: 1em;
margin-bottom: 20px;
}
li {
font-size: 1em;
margin-bottom: 10px;
}
table, .infographic-box {
margin: 25px 0;
padding: 20px;
}
th, td {
padding: 12px 15px;
}
.infographic-box ul li {
padding: 12px 15px;
margin-bottom: 10px;
}
.container {
padding: 15px;
margin: 10px auto;
}
}

/* موبایل (عرض حداکثر 480px) */
@media (max-width: 480px) {
h1 {
font-size: 1.8em;
padding-bottom: 10px;
}
h2 {
font-size: 1.5em;
padding-right: 10px;
}
h3 {
font-size: 1.2em;
}
p, li {
font-size: 0.95em;
line-height: 1.7;
}
ul li::before {
font-size: 1.2em;
}
.container {
padding: 10px;
margin: 5px auto;
}
table, .infographic-box {
padding: 10px;
margin: 15px 0;
}
th, td {
padding: 8px 10px;
font-size: 0.9em;
}
.infographic-box ul li {
padding: 10px;
font-size: 0.95em;
}
}

“`