“`html

/*
* تنظیمات سبک‌دهی عمومی برای نمایش بهینه در ویرایشگر بلوک و ریسپانسیو بودن در دستگاه‌های مختلف
* این سبک‌ها تضمین می‌کنند که هدینگ‌ها، متن، جداول و بخش اینفوگرافیک به درستی و زیبایی نمایش داده شوند.
*/
body {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* فونت مناسب فارسی */
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f9f9f9;
direction: rtl; /* برای محتوای فارسی */
text-align: right;
}
.article-container {
max-width: 900px; /* حداکثر عرض برای خوانایی بهتر در نمایشگرهای بزرگ */
margin: 30px auto;
padding: 25px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

h1 {
font-size: 2.8em; /* سایز بزرگ برای H1 */
font-weight: 800; /* بسیار ضخیم */
color: #1A237E; /* آبی تیره و عمیق */
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #C5CAE9; /* خط زیرین آبی روشن */
line-height: 1.3;
}

h2 {
font-size: 2.1em; /* سایز متوسط رو به بالا برای H2 */
font-weight: 700; /* ضخیم */
color: #283593; /* آبی متوسط */
margin-top: 45px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #E8EAF6; /* خط زیرین بسیار روشن */
}

h3 {
font-size: 1.6em; /* سایز استاندارد برای H3 */
font-weight: 600; /* نیمه‌ضخیم */
color: #3F51B5; /* آبی کمی روشن‌تر */
margin-top: 35px;
margin-bottom: 18px;
padding-bottom: 8px;
border-bottom: 1px dashed #C5CAE9; /* خط زیرین نقطه‌چین */
}

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

ul, ol {
list-style-position: inside;
margin-right: 25px;
margin-bottom: 20px;
padding: 0;
}

li {
font-size: 1.05em;
margin-bottom: 10px;
line-height: 1.7;
}

/* جدول استاندارد */
table {
width: 100%;
border-collapse: separate; /* برای rounded corners */
border-spacing: 0;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
border-radius: 10px; /* گوشه‌های گرد */
overflow: hidden; /* برای اعمال border-radius به محتوا */
}
th, td {
padding: 15px 20px;
text-align: right;
border-bottom: 1px solid #E0E0E0; /* خطوط جداکننده ردیف‌ها */
}
th {
background-color: #F5F5F5; /* پس‌زمینه سربرگ */
color: #424242;
font-weight: 700;
font-size: 1.1em;
}
tr:last-child td {
border-bottom: none;
}
tr:hover {
background-color: #F8F8F8; /* هایلایت شدن ردیف هنگام هاور */
}

/* اینفوگرافیک متنی */
.infographic-box {
background-color: #E3F2FD; /* آبی آسمانی روشن */
border-left: 8px solid #2196F3; /* نوار آبی پررنگ سمت چپ */
padding: 25px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
text-align: right;
}
.infographic-box h3 {
color: #1976D2; /* آبی تیره برای عنوان اینفوگرافیک */
margin-top: 0;
margin-bottom: 20px;
border-bottom: 2px dashed #90CAF9;
padding-bottom: 10px;
}
.infographic-box ul {
list-style: none; /* حذف نشانگر لیست پیش‌فرض */
padding: 0;
margin: 0;
}
.infographic-box li {
margin-bottom: 15px;
display: flex;
align-items: flex-start; /* ترازبندی آیتم‌ها در بالا */
font-size: 1.1em;
color: #424242;
}
.infographic-box li::before {
content: ‘✨’; /* استفاده از ایموجی به عنوان نشانگر بصری */
margin-left: 15px; /* فاصله از متن */
font-size: 1.5em;
line-height: 1;
color: #FFC107; /* رنگ زرد برای ایموجی */
flex-shrink: 0; /* جلوگیری از کوچک شدن ایموجی */
}
.infographic-box li strong {
color: #2196F3; /* آبی برای برجسته‌سازی کلمات کلیدی */
}

/* ریسپانسیو بودن برای موبایل، تبلت و نمایشگرهای کوچک‌تر */
@media (max-width: 768px) {
.article-container {
margin: 20px auto;
padding: 15px;
border-radius: 8px;
}
h1 { font-size: 2em; margin-bottom: 30px; }
h2 { font-size: 1.6em; margin-top: 35px; margin-bottom: 20px; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; }
p { font-size: 1em; line-height: 1.7; }
li { font-size: 0.95em; }

/* ریسپانسیو کردن جدول */
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #E0E0E0;
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
td {
border: none;
border-bottom: 1px solid #F0F0F0;
position: relative;
padding-left: 55%; /* فضای کافی برای برچسب */
text-align: right;
font-size: 0.95em;
}
td:last-child {
border-bottom: none;
}
td::before {
content: attr(data-label); /* استفاده از data-label برای برچسب‌گذاری */
position: absolute;
top: 15px;
right: 15px;
width: 40%;
white-space: nowrap;
text-align: right;
font-weight: 600;
color: #5C6BC0;
}
.infographic-box {
padding: 20px;
margin: 30px 0;
}
.infographic-box h3 {
font-size: 1.4em;
}
.infographic-box li {
font-size: 1em;
}
.infographic-box li::before {
font-size: 1.3em;
margin-left: 10px;
}
}

/* برای لپ‌تاپ و تبلت (ابعاد متوسط) */
@media (min-width: 769px) and (max-width: 1200px) {
.article-container {
max-width: 800px;
padding: 30px;
}
h1 { font-size: 2.5em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.4em; }
p { font-size: 1.05em; }
}

/* برای نمایشگرهای بزرگ‌تر و تلویزیون (حفظ خوانایی با حداکثر عرض) */
@media (min-width: 1201px) {
.article-container {
max-width: 1000px; /* افزایش عرض برای نمایشگرهای بزرگ */
padding: 40px;
}
}

/* لینک‌سازی (مثال برای electroprojects.ir) */
a {
color: #3F51B5; /* رنگ لینک */
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #1A237E; /* رنگ لینک هنگام هاور */
text-decoration: underline;
}

“`