“`html

/*
این بلوک CSS به منظور ارائه یک طراحی منحصر به فرد و رسپانسیو برای مقاله شما در ویرایشگرهای بلوکی و کلاسیک تهیه شده است.
برای نمایش صحیح و کامل طراحی، لازم است این کد CSS را به بخش “CSS سفارشی” (Custom CSS) قالب سایت خود یا در بخش فایل HTML صفحه اضافه کنید.
همچنین در ویرایشگر بلوک، می‌توانید این HTML را مستقیماً Paste کنید و سپس استایل‌ها را به صورت سراسری اعمال نمایید.
رنگ‌بندی بر پایه طیف رنگ‌های فیروزه‌ای و سبزآبی است که حس اعتماد، حرفه‌ای بودن و آرامش را القا می‌کند.
*/

:root {
–primary-color: #00897b; /* Medium Teal */
–secondary-color: #004d40; /* Dark Teal */
–accent-color: #26a69a; /* Light Teal */
–background-light: #f4fcfc; /* Very light teal-white */
–background-mid: #e0f2f1; /* Pale Teal */
–text-color: #333;
–heading-color-1: var(–secondary-color);
–heading-color-2: var(–secondary-color);
–heading-color-3: var(–accent-color);
–info-box-bg: #e0f7fa; /* Light cyan */
–info-box-border: #00bcd4; /* Cyan accent */
–infographic-bg: #f0fdfd; /* Very light teal */
–infographic-border: #4db6ac;
–table-header-bg: var(–background-mid);
–table-border: #e0e0e0;
}

body {
font-family: ‘Vazirmatn’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت پیشنهادی، اطمینان حاصل کنید که در سایت شما بارگذاری شده است */
line-height: 1.8;
color: var(–text-color);
margin: 0;
padding: 0;
background-color: #f8f8f8; /* یک پس‌زمینه کلی روشن */
direction: rtl; /* برای پشتیبانی کامل از زبان فارسی */
}

.article-container {
max-width: 1000px;
margin: 30px auto;
padding: 25px 30px;
background-color: #ffffff;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
border-radius: 12px;
}

h1 {
font-size: 2.8em;
font-weight: 800;
color: var(–heading-color-1);
text-align: center;
margin-bottom: 40px;
padding: 15px 0;
border-bottom: 3px solid var(–primary-color);
position: relative;
}

h1::after {
content: ”;
position: absolute;
bottom: -3px;
right: 50%;
transform: translateX(50%);
width: 60px;
height: 3px;
background-color: var(–accent-color);
border-radius: 2px;
}

h2 {
font-size: 2.2em;
font-weight: 700;
color: var(–heading-color-2);
margin-top: 55px;
margin-bottom: 25px;
padding-right: 18px; /* Padding-right for RTL border-left simulation */
border-right: 5px solid var(–primary-color); /* Visually appealing border */
position: relative;
}

h2::before {
content: ‘▪’; /* Icon for H2 */
color: var(–accent-color);
font-size: 1.2em;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}

h3 {
font-size: 1.7em;
font-weight: 600;
color: var(–heading-color-3);
margin-top: 35px;
margin-bottom: 20px;
padding-right: 12px;
border-right: 3px solid var(–background-mid);
}

p {
margin-bottom: 1.5em;
font-size: 1.1em;
text-align: justify;
line-height: 1.9;
}

ul, ol {
margin-bottom: 1.8em;
padding-right: 30px; /* Adjust for RTL */
font-size: 1.05em;
list-style-type: disc; /* Default bullet */
}

ul li {
margin-bottom: 0.8em;
padding-right: 5px; /* Space for custom bullet */
position: relative;
}

ul li::before {
content: ‘•’; /* Custom bullet point */
color: var(–primary-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: -1em;
position: absolute;
right: 0;
}

strong {
color: var(–secondary-color);
font-weight: 700;
}

em {
color: #d84315; /* Warm accent for emphasis */
font-style: normal;
font-weight: 600;
}

table {
width: 100%;
border-collapse: collapse;
margin: 35px 0;
font-size: 1em;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
background-color: #ffffff;
border-radius: 8px;
overflow: hidden; /* Ensures rounded corners */
}

th, td {
border: 1px solid var(–table-border);
padding: 14px 20px;
text-align: right; /* RTL */
}

th {
background-color: var(–table-header-bg);
font-weight: 700;
color: var(–secondary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}

tr:nth-child(even) {
background-color: var(–background-light);
}

/* Info Box Styling */
.info-box {
background-color: var(–info-box-bg);
border-right: 6px solid var(–info-box-border); /* Accent border for RTL */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(0,0,0,0.08);
font-size: 1.15em;
line-height: 1.7;
color: #006064; /* Darker cyan text */
position: relative;
overflow: hidden;
}

.info-box::before {
content: ‘💡’; /* Lightbulb icon */
font-size: 2em;
color: var(–info-box-border);
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
opacity: 0.2;
}
.info-box strong {
color: #004d40; /* Ensure strong inside info-box is distinct */
}

/* Infographic Section Styling */
.infographic-section {
background-color: var(–infographic-bg);
border: 1px dashed var(–infographic-border);
padding: 35px 25px;
margin: 45px 0;
border-radius: 12px;
box-shadow: 0 7px 15px rgba(0,0,0,0.07);
}

.infographic-step {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
gap: 20px; /* Space between icon and content */
padding-bottom: 25px;
border-bottom: 1px dashed rgba(0, 137, 123, 0.2); /* Light dashed separator */
}

.infographic-step:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}

.infographic-icon {
font-size: 3em; /* Larger emoji */
color: var(–primary-color);
flex-shrink: 0; /* Prevents icon from shrinking */
line-height: 1; /* Aligns emoji better */
margin-top: 5px; /* Adjust icon vertical alignment */
}

.infographic-content h3 {
margin-top: 0;
margin-bottom: 8px;
font-size: 1.6em;
color: var(–secondary-color);
border-right: none; /* Remove border from H3 inside infographic */
padding-right: 0;
}

.infographic-content p {
margin-bottom: 0;
font-size: 1.08em;
line-height: 1.7;
}

/* Responsive Image Placeholder (for visual alternative) */
.responsive-image-placeholder {
display: block;
width: 100%;
max-width: 650px; /* Max width for larger screens */
height: 280px; /* Placeholder height */
background-color: #f5f8f8; /* Light gray-blue */
border: 2px dashed #a7d9d5; /* Dotted border for visual break */
color: #607d8b; /* Muted text color */
text-align: center;
line-height: 280px; /* Vertically center text */
font-size: 1.3em;
margin: 40px auto;
border-radius: 8px;
box-sizing: border-box; /* Include padding/border in width */
position: relative;
overflow: hidden;
}

.responsive-image-placeholder p {
margin: 0;
padding: 0 15px; /* Inner padding */
line-height: 1.5; /* Adjust for multi-line text */
display: inline-block; /* Helps vertical centering */
vertical-align: middle;
}

.responsive-image-placeholder p:last-child {
font-size: 0.9em;
color: #78909c;
position: absolute;
bottom: 15px;
width: 100%;
line-height: 1;
}

/* ————————————————————————– */
/* Responsive Adjustments */
/* ————————————————————————– */

/* Tablet and smaller laptops */
@media (max-width: 992px) {
.article-container {
margin: 20px auto;
padding: 20px 25px;
}
h1 { font-size: 2.4em; margin-bottom: 35px; }
h2 { font-size: 1.9em; margin-top: 45px; margin-bottom: 20px; }
h3 { font-size: 1.5em; margin-top: 30px; margin-bottom: 15px; }
p, ul, ol, table, .info-box { font-size: 1.05em; }
.infographic-icon { font-size: 2.7em; }
.infographic-content h3 { font-size: 1.4em; }
.responsive-image-placeholder { height: 240px; line-height: 240px; font-size: 1.1em; }
.responsive-image-placeholder p:last-child { bottom: 10px; }
}

/* Mobile devices */
@media (max-width: 768px) {
.article-container {
margin: 15px auto;
padding: 15px 20px;
border-radius: 0; /* No rounded corners on very small screens for edge-to-edge feel */
}
h1 { font-size: 2em; margin-bottom: 30px; padding: 10px 0; border-bottom: 2px solid var(–primary-color); }
h1::after { height: 2px; width: 40px; }
h2 { font-size: 1.6em; margin-top: 35px; margin-bottom: 18px; padding-right: 12px; border-right: 4px solid var(–primary-color); }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 12px; padding-right: 10px; border-right: 2px solid var(–background-mid); }
p, ul, ol, table, .info-box { font-size: 1em; line-height: 1.7; }
ul { padding-right: 20px; }
th, td { padding: 10px 15px; }
.info-box { padding: 20px; margin: 30px 0; font-size: 1.05em; border-right: 4px solid var(–info-box-border); }
.info-box::before { font-size: 1.8em; left: 15px; }
.infographic-section { padding: 25px 15px; margin: 35px 0; }
.infographic-step { flex-direction: column; align-items: flex-end; text-align: right; margin-bottom: 20px; gap: 10px; padding-bottom: 15px; } /* Stack vertically */
.infographic-icon { font-size: 2.5em; margin-bottom: 5px; margin-top: 0; }
.infographic-content { width: 100%; } /* Ensure content takes full width */
.infographic-content h3 { font-size: 1.3em; }
.responsive-image-placeholder { height: 180px; line-height: 180px; font-size: 1em; margin: 30px auto; }
.responsive-image-placeholder p:last-child { font-size: 0.8em; bottom: 8px; }
}

/* Very small mobile devices */
@media (max-width: 480px) {
h1 { font-size: 1.8em; margin-bottom: 25px; }
h2 { font-size: 1.4em; margin-top: 30px; margin-bottom: 15px; }
h3 { font-size: 1.1em; margin-top: 20px; margin-bottom: 10px; }
p, ul, ol, table, .info-box { font-size: 0.95em; line-height: 1.6; }
.infographic-icon { font-size: 2em; }
.infographic-content h3 { font-size: 1.2em; }
.responsive-image-placeholder { height: 150px; line-height: 150px; font-size: 0.9em; margin: 25px auto; }
.responsive-image-placeholder p:last-child { font-size: 0.7em; bottom: 5px; }
}

/* Print styles (optional but good practice) */
@media print {
body { background-color: #fff; color: #000; }
.article-container { box-shadow: none; border: none; padding: 0; margin: 0; max-width: 100%; }
h1, h2, h3 { color: #000 !important; border-color: #ccc !important; }
.info-box, .infographic-section { border: 1px solid #ccc; background-color: #f9f9f9; box-shadow: none; }
.infographic-icon, .info-box::before { display: none; }
table { border: 1px solid #ccc; }
th { background-color: #eee !important; }
tr:nth-child(even) { background-color: #f5f5f5 !important; }
.responsive-image-placeholder { border: 1px dashed #ccc; background-color: #f5f5f5; color: #555; }
}

“`