/* Reset و استایل‌های پایه */
body {
font-family: ‘IRANSans’, ‘Tahoma’, ‘Arial’, sans-serif; /* فونت اصلی برای خوانایی بهتر فارسی */
line-height: 1.8;
color: #333333;
margin: 0;
padding: 0;
background-color: #F8F8F8; /* پس‌زمینه روشن برای کل صفحه */
direction: rtl; /* جهت نوشتار راست به چپ برای فارسی */
text-align: right;
-webkit-font-smoothing: antialiased; /* افزایش کیفیت رندرینگ فونت در مرورگرهای وب‌کیت */
-moz-osx-font-smoothing: grayscale; /* افزایش کیفیت رندرینگ فونت در مرورگرهای موزیلا */
box-sizing: border-box; /* اطمینان از مدل جعبه‌ای ثابت */
}
* {
box-sizing: border-box; /* اعمال box-sizing به تمامی عناصر */
}
p, ul, ol, table, .highlight-box, .infographic-container {
margin-bottom: 1.5em; /* فاصله پایینی ثابت برای بلاک‌ها */
}

/* کانتینر اصلی محتوا */
.container {
max-width: 980px; /* حداکثر عرض برای نمایش بهتر محتوا */
margin: 25px auto; /* مرکز قرار گرفتن کانتینر با فاصله از بالا و پایین */
padding: 30px 40px; /* پدینگ داخلی برای محتوا */
background-color: #ffffff; /* پس‌زمینه سفید برای کانتینر */
box-shadow: 0 5px 25px rgba(0,0,0,0.1); /* سایه نرم و جذاب */
border-radius: 15px; /* گوشه‌های گرد برای زیبایی بیشتر */
}

/* استایل هدینگ‌ها */
h1 {
font-size: 3em; /* سایز بزرگ برای عنوان اصلی */
font-weight: 900; /* بسیار ضخیم */
color: #0A2647; /* رنگ آبی تیره */
text-align: center; /* تراز وسط */
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 4px solid #BBE1FA; /* خط زیرین شیک */
position: relative;
line-height: 1.2;
}
h1::after { /* المان تزئینی زیر H1 */
content: ”;
position: absolute;
bottom: -7px;
right: 50%;
transform: translateX(50%);
width: 80px;
height: 4px;
background-color: #144272; /* رنگ آبی متوسط */
border-radius: 2px;
}
h2 {
font-size: 2.3em; /* سایز بزرگ برای هدینگ سطح دوم */
font-weight: bold;
color: #144272; /* رنگ آبی متوسط */
border-bottom: 2px solid #E0E0E0; /* خط زیرین ظریف */
padding-bottom: 15px;
margin-top: 55px; /* فاصله بیشتر از بالا */
margin-bottom: 30px;
position: relative;
padding-right: 15px;
}
h2::before { /* آیکون تزئینی برای H2 */
content: ‘◆’; /* علامت لوزی */
color: #BBE1FA; /* رنگ آبی روشن */
position: absolute;
right: 0;
top: 0;
font-size: 0.8em;
line-height: 1.2;
}
h3 {
font-size: 1.7em; /* سایز بزرگ برای هدینگ سطح سوم */
font-weight: bold;
color: #0A2647; /* رنگ آبی تیره */
margin-top: 40px;
margin-bottom: 20px;
position: relative;
padding-right: 15px;
border-right: 3px solid #BBE1FA; /* خط راست برای H3 */
padding-right: 10px;
display: inline-block; /* برای اینکه border دور محتوا بیاید */
line-height: 1.4;
}

/* استایل پاراگراف‌ها و لیست‌ها */
p {
margin-bottom: 1.2em;
line-height: 2; /* افزایش فاصله خطوط برای خوانایی بهتر */
text-align: justify; /* تراز از دو طرف */
}
ul, ol {
margin-right: 25px; /* تورفتگی لیست‌ها */
margin-bottom: 1.5em;
line-height: 1.9;
}
ul li, ol li {
margin-bottom: 0.7em;
padding-right: 5px;
}
ul li::marker, ol li::marker {
color: #144272; /* رنگ مارکر لیست‌ها */
font-weight: bold;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
margin: 35px 0;
font-size: 0.98em;
border-radius: 10px; /* گوشه‌های گرد برای جدول */
overflow: hidden; /* اطمینان از اعمال border-radius */
box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* سایه نرم برای جدول */
}
table th, table td {
border: 1px solid #E0E0E0; /* خطوط جدول */
padding: 18px 22px;
text-align: right;
}
table th {
background-color: #144272; /* پس‌زمینه آبی برای سربرگ جدول */
color: #ffffff; /* متن سفید برای سربرگ */
font-weight: bold;
text-align: center; /* تراز وسط برای سربرگ */
text-transform: uppercase; /* حروف بزرگ برای سربرگ (اگر فونت فارسی پشتیبانی کند) */
letter-spacing: 0.5px;
}
table tr:nth-child(even) {
background-color: #F8F8F8; /* پس‌زمینه روشن برای سطرهای زوج */
}
table tr:hover {
background-color: #E6F3FA; /* افکت هاور ملایم */
}

/* باکس هایلات (برای تاکید یا نقل قول) */
.highlight-box {
background-color: #E6F3FA; /* پس‌زمینه آبی روشن برای تاکید */
border-right: 6px solid #144272; /* خط آبی ضخیم در سمت راست */
padding: 30px;
margin: 40px 0;
border-radius: 10px;
line-height: 1.8;
font-size: 1.08em;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
position: relative;
}
.highlight-box::before { /* المان تزئینی شبیه نقل قول */
content: ‘“’;
font-size: 4em;
color: rgba(10, 38, 71, 0.1); /* رنگ بسیار روشن و شفاف */
position: absolute;
top: 10px;
right: 15px;
font-family: serif;
line-height: 1;
}

/* بخش اینفوگرافیک‌مانند */
.infographic-container {
display: flex;
flex-direction: column; /* به طور پیش‌فرض ستونی در صفحه‌های کوچک */
gap: 25px; /* فاصله بین آیتم‌ها */
margin: 45px 0;
align-items: center; /* مرکز قرار گرفتن آیتم‌ها به صورت عمودی */
}
.infographic-step {
background-color: #ffffff;
border: 2px solid #BBE1FA; /* حاشیه آبی روشن */
border-radius: 12px;
padding: 25px;
min-width: 280px;
max-width: 320px; /* حداکثر عرض برای هر مرحله */
box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* سایه جذاب */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* انیمیشن نرم */
text-align: center;
flex-shrink: 0; /* جلوگیری از کوچک شدن */
position: relative;
}
.infographic-step:hover {
transform: translateY(-10px); /* حرکت به بالا هنگام هاور */
box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* سایه عمیق‌تر هنگام هاور */
}
.infographic-step-icon {
font-size: 3em;
color: #144272; /* رنگ آیکون */
margin-bottom: 15px;
display: block;
}
.infographic-step-title {
font-size: 1.4em;
font-weight: bold;
color: #0A2647; /* رنگ عنوان مرحله */
margin-bottom: 10px;
}
.infographic-arrow {
font-size: 2.8em;
color: #BBE1FA; /* رنگ پیکان اصلی */
font-weight: bold;
line-height: 1;
text-align: center;
flex-shrink: 0;
position: relative;
padding: 10px 0;
}
.infographic-arrow::after { /* پیکان داخلی تیره برای عمق */
content: ‘➔’;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #144272; /* رنگ آبی متوسط برای پیکان داخلی */
font-size: 0.7em;
}

/* تنظیمات واکنش‌گرا برای اینفوگرافیک */
@media (min-width: 768px) {
.infographic-container {
flex-direction: row; /* جریان افقی در صفحه‌های بزرگ‌تر */
flex-wrap: wrap; /* اجازه شکستن به خط بعدی */
justify-content: center; /* مرکز قرار گرفتن آیتم‌ها افقی */
align-items: flex-start; /* تراز آیتم‌ها از بالا */
}
.infographic-step {
width: calc(33.33% – 25px); /* سه ستون با در نظر گرفتن فاصله */
max-width: 300px; /* حداکثر عرض ثابت */
margin-bottom: 0; /* حذف فاصله عمودی */
}
.infographic-arrow {
transform: rotate(0deg); /* پیکان افقی */
margin: 0 15px; /* فاصله افقی برای پیکان */
}
/* نمایش پیکان فقط بین مراحل در حالت افقی */
.infographic-container > .infographic-step:not(:last-child) + .infographic-arrow {
display: flex;
align-items: center;
justify-content: center;
}
/* عدم نمایش پیکان بعد از آخرین مرحله */
.infographic-container > .infographic-step:last-child + .infographic-arrow {
display: none;
}
.infographic-container > .infographic-step {
margin-left: 0;
margin-right: 0;
}
}

@media (max-width: 767px) { /* تنظیمات برای موبایل و تبلت‌های کوچک */
.container {
margin: 10px auto;
padding: 20px 25px;
border-radius: 10px;
}
h1 {
font-size: 2.2em;
margin-bottom: 30px;
padding-bottom: 15px;
}
h2 {
font-size: 1.9em;
margin-top: 40px;
margin-bottom: 25px;
}
h3 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 15px;
}
p {
line-height: 1.8;
}
table {
font-size: 0.8em;
margin: 25px 0;
}
table th, table td {
padding: 12px 18px;
}
.highlight-box {
padding: 20px;
margin: 30px 0;
}
.infographic-step {
width: 95%; /* مراحل تقریباً تمام عرض صفحه را اشغال کنند */
max-width: unset; /* حذف محدودیت حداکثر عرض */
}
.infographic-arrow {
transform: rotate(90deg); /* پیکان عمودی */
margin: 15px 0; /* فاصله عمودی */
display: block; /* اطمینان از نمایش پیکان بین بلاک‌های چیده شده */
}
.infographic-container > .infographic-step:last-of-type + .infographic-arrow {
display: none; /* عدم نمایش پیکان بعد از آخرین آیتم مرحله */
}
}