“`html

/*
** راهنمای طراحی و رنگ‌بندی برای ویرایشگر بلوک یا کلاسیک: **
این کدها در یک تگ در بخش فایل HTML قرار داده شده‌اند تا هنگام کپی در ویرایشگرهای بلوک (مانند گوتنبرگ وردپرس) یا ویرایشگرهای کلاسیک که از کدهای HTML پشتیبانی می‌کنند،
بخشی از طراحی و رسپانسیو بودن مقاله را به طور پیش‌فرض اعمال کنند.

فونت پیشنهادی: ‘Vazirmatn’, ‘Inter’, sans-serif (اطمینان حاصل کنید که این فونت‌ها در سایت شما بارگذاری شده‌اند.)
پالت رنگی پیشنهادی:
– رنگ اصلی متن: #333333 (خاکستری تیره)
– رنگ اصلی هدینگ‌ها (H2): #1A2B47 (آبی تیره فضایی)
– رنگ هدینگ H1: #000080 (سرمه‌ای عمیق)
– رنگ حاشیه‌ها و نقاط برجسته: #6A0DAD (بنفش کیهانی)
– رنگ تاکید ثانویه (مثلاً زیرخط H2): #DAA520 (طلایی مات)
– پس‌زمینه محتوا: #FFFFFF (سفید)
– پس‌زمینه کلی صفحه: #F8F9FA (سفید مایل به خاکستری روشن)
– پس‌زمینه جدول (هدر): #F0F4F7 (آبی-خاکستری روشن)
– پس‌زمینه بلوک اینفوگرافیک: #FDF2F5 (صورتی-بنفش روشن)

**رسپانسیو بودن:**
ساختار محتوا (پاراگراف‌های کوتاه، بولت پوینت‌ها، هدینگ‌های منظم) ذاتاً به خوانایی در دستگاه‌های مختلف کمک می‌کند.
کدهای CSS زیر نیز برای تنظیم فونت و فاصله‌گذاری در اندازه‌های مختلف صفحه (موبایل، تبلت، لپ‌تاپ) بهینه‌سازی شده‌اند.
جدول برای موبایل به حالت ستونی تغییر می‌کند تا محتوا از صفحه بیرون نزند.
*/
body {
font-family: ‘Vazirmatn’, ‘Inter’, sans-serif; /* فونت پیشنهادی: اطمینان حاصل کنید که این فونت‌ها در محیط شما بارگذاری شده‌اند */
line-height: 1.7;
color: #333333; /* رنگ اصلی متن */
background-color: #F8F9FA; /* رنگ پس‌زمینه کلی صفحه */
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #FFFFFF; /* رنگ پس‌زمینه اصلی محتوا */
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
h1, h2, h3 {
color: #1A2B47; /* رنگ پیش‌فرض هدینگ‌ها */
text-align: right;
font-weight: 700;
margin-top: 30px;
margin-bottom: 15px;
line-height: 1.3;
}
h1 {
font-size: 36px;
text-align: center;
color: #000080; /* سرمه‌ای عمیق برای H1 */
border-bottom: 3px solid #6A0DAD; /* بنفش کیهانی برای زیرخط H1 */
padding-bottom: 20px;
margin-bottom: 40px;
}
h2 {
font-size: 28px;
color: #1A2B47; /* آبی تیره فضایی برای H2 */
border-bottom: 2px solid #DAA520; /* طلایی مات برای زیرخط H2 */
padding-bottom: 10px;
margin-top: 50px;
}
h3 {
font-size: 22px;
color: #333333;
margin-top: 35px;
border-right: 4px solid #6A0DAD; /* بنفش کیهانی برای حاشیه راست H3 */
padding-right: 10px;
}
p {
margin-bottom: 15px;
text-align: justify;
}
ul {
list-style: none; /* حذف بولت پیش‌فرض */
padding-right: 20px;
}
ul li {
position: relative;
margin-bottom: 10px;
padding-right: 25px;
}
ul li::before {
content: ‘•’; /* بولت سفارشی */
color: #6A0DAD; /* بنفش کیهانی برای بولت */
position: absolute;
right: 0;
font-size: 1.2em;
line-height: 1;
}
ol {
padding-right: 20px;
}
ol li {
margin-bottom: 10px;
text-align: justify;
}
table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95em;
text-align: right;
}
table th, table td {
border: 1px solid #E0E0E0;
padding: 12px 15px;
}
table th {
background-color: #F0F4F7; /* آبی-خاکستری روشن برای هدر جدول */
color: #1A2B47;
font-weight: 600;
}
table tr:nth-child(even) {
background-color: #FDFEFE; /* پس‌زمینه روشن‌تر برای سطر‌های زوج */
}
.infographic-block {
display: flex;
flex-direction: column;
gap: 20px;
margin: 40px 0;
}
.infographic-step {
background-color: #FDF2F5; /* صورتی-بنفش روشن برای بلوک اینفوگرافیک */
border-right: 5px solid #6A0DAD; /* حاشیه بنفش کیهانی */
padding: 20px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
position: relative;
}
.infographic-step h3 {
margin-top: 0;
margin-bottom: 10px;
color: #1A2B47;
border-right: none;
padding-right: 0;
font-size: 20px;
}
/*
عنصر стрелка (فلش) در اینفوگرافیک با CSS ایجاد شده و برای نمایش در ویرایشگر بلوک، احتمالاً نیاز به بازسازی دستی یا استفاده از تصاویر است.
در این مثال، آن را پنهان کرده‌ایم تا در ویرایشگر بلوک تداخلی ایجاد نکند و متن محور باشد.
*/
.infographic-step:not(:last-child)::after {
content: ‘↓’;
position: absolute;
left: 50%;
transform: translateX(50%);
bottom: -25px;
color: #DAA520; /* طلایی مات */
font-size: 2em;
font-weight: bold;
display: none; /* مخفی شده تا در ویرایشگر بلوک فقط محتوا نمایش یابد */
}

/* ** Media Queries برای رسپانسیو بودن در دستگاه‌های مختلف ** */
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
.infographic-step {
padding: 15px;
}
/* تبدیل جدول به حالت بلوکی برای نمایش بهتر در موبایل */
table, thead, tbody, th, td, tr {
display: block;
}
table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table tr {
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 4px;
}
table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%; /* فضای کافی برای عنوان ستون در حالت موبایل */
text-align: right;
}
table td::before {
position: absolute;
right: 6px;
width: 45%;
padding-left: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-th); /* استفاده از ویژگی data-th برای نمایش عنوان ستون */
}
}

@media (max-width: 480px) {
body { padding: 10px; }
.container { padding: 15px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
}

“`