/* تنظیمات اولیه برای خوانایی و واکنش‌گرایی */
body {
font-family: ‘Tahoma’, sans-serif; /* استفاده از فونت تاهوما برای خوانایی بهتر در فارسی */
line-height: 1.8; /* افزایش فاصله خطوط برای راحتی مطالعه */
color: #333; /* رنگ متن اصلی */
margin: 0;
padding: 0;
background-color: #f9f9f9; /* پس‌زمینه کلی روشن */
-webkit-text-size-adjust: 100%; /* جلوگیری از تغییر اندازه متن در موبایل */
direction: rtl; /* جهت متن راست به چپ */
text-align: right; /* تراز متن به راست */
}
.container {
max-width: 900px; /* حداکثر عرض محتوا برای دسکتاپ */
margin: 0 auto; /* قرارگیری در مرکز صفحه */
padding: 25px; /* پدینگ داخلی کانتینر */
background-color: #fff; /* پس‌زمینه سفید برای محتوا */
box-shadow: 0 0 18px rgba(0,0,0,0.08); /* سایه ظریف برای زیبایی */
border-radius: 12px; /* گوشه‌های گرد */
margin-top: 30px;
margin-bottom: 30px;
}
/* استایل‌دهی هدینگ‌ها */
h1 {
font-size: 2.7em; /* اندازه بزرگ برای H1 */
font-weight: 800; /* بسیار ضخیم */
color: #1A5276; /* آبی تیره */
text-align: center;
margin-bottom: 45px;
padding-bottom: 20px;
border-bottom: 4px solid #D6EAF8; /* خط آبی روشن زیر H1 */
line-height: 1.3;
}
h2 {
font-size: 2.2em; /* اندازه برای H2 */
font-weight: 700; /* ضخیم */
color: #2874A6; /* آبی متوسط */
margin-top: 50px;
margin-bottom: 25px;
padding-right: 15px; /* پدینگ از راست برای زیبایی */
border-right: 6px solid #5DADE2; /* خط آبی پررنگ در سمت راست */
line-height: 1.4;
background-color: #F8F8FF; /* پس‌زمینه بسیار روشن برای H2 */
padding-top: 10px;
padding-bottom: 10px;
border-radius: 0 8px 8px 0; /* گوشه‌های گرد فقط در سمت راست */
}
h3 {
font-size: 1.6em; /* اندازه برای H3 */
font-weight: 600; /* متوسط ضخیم */
color: #3498DB; /* آبی روشن */
margin-top: 35px;
margin-bottom: 20px;
border-bottom: 2px dashed #A9CCE3; /* خط نقطه‌چین آبی روشن زیر H3 */
padding-bottom: 8px;
line-height: 1.5;
}
p {
margin-bottom: 20px;
text-align: justify; /* تراز دوطرفه برای پاراگراف‌ها */
font-size: 1.05em; /* کمی بزرگتر کردن متن عادی */
}
ul, ol {
margin-bottom: 20px;
padding-right: 30px; /* پدینگ برای لیست‌ها */
list-style-type: disc; /* نوع بولت دیسک */
}
li {
margin-bottom: 12px;
font-size: 1.05em;
}
/* استایل‌دهی جدول */
table {
width: 100%;
border-collapse: collapse; /* حذف فاصله بین خانه‌های جدول */
margin: 30px 0;
font-size: 1em;
box-shadow: 0 4px 18px rgba(0,0,0,0.08); /* سایه بیشتر برای جدول */
border-radius: 10px;
overflow: hidden; /* اطمینان از اعمال گوشه‌های گرد */
}
th, td {
padding: 15px 20px;
text-align: right;
border-bottom: 1px solid #e0e0e0; /* خطوط جداکننده خانه‌ها */
}
th {
background-color: #5DADE2; /* آبی پررنگ برای سربرگ جدول */
color: white;
font-weight: 700;
font-size: 1.1em;
}
tr:nth-child(even) { /* ردیف‌های زوج با پس‌زمینه کمی متفاوت */
background-color: #f8f8f8;
}
tr:hover { /* تغییر رنگ ردیف هنگام هاور */
background-color: #f1f7fc;
}
/* استایل‌دهی بلاک اینفوگرافیک/FAQ */
.infographic-block {
background-color: #EBF5FB; /* پس‌زمینه آبی بسیار روشن */
border-right: 8px solid #5DADE2; /* خط آبی پررنگ در سمت راست */
padding: 30px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.infographic-block h3 {
color: #2874A6;
margin-top: 0;
margin-bottom: 25px;
font-size: 1.8em;
border-bottom: 3px solid #A9CCE3;
padding-bottom: 12px;
}
.infographic-block ul {
list-style: none; /* حذف بولت پیش‌فرض */
padding: 0;
}
.infographic-block li {
position: relative;
padding-right: 45px; /* پدینگ از راست برای آیکون */
margin-bottom: 25px;
font-size: 1.1em;
line-height: 1.7;
color: #444;
background-color: #FFFFFF; /* پس‌زمینه سفید برای هر آیتم */
padding: 18px 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-right: 4px solid #85C1E9; /* خط آبی روشن در سمت راست هر آیتم */
}
.infographic-block li::before {
content: ‘💡’; /* آیکون لامپ برای جذابیت */
position: absolute;
right: 10px; /* موقعیت آیکون */
top: 18px;
font-size: 1.6em;
color: #FFC300; /* رنگ زرد برای آیکون */
line-height: 1.2;
}
.infographic-block li strong {
display: block; /* عنوان سوال در یک خط جداگانه */
font-size: 1.2em;
color: #1A5276;
margin-bottom: 8px;
}
.infographic-block li p {
margin-bottom: 0; /* حذف margin bottom از پاراگراف داخلی */
font-size: 1em;
}

/* استایل‌دهی فهرست مطالب */
.table-of-contents {
background-color: #f0f8ff; /* آبی بسیار روشن */
border: 1px solid #cceeff;
padding: 25px 30px;
margin: 35px 0;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
.table-of-contents h3 {
color: #2874A6;
margin-top: 0;
margin-bottom: 20px;
font-size: 1.5em;
border-bottom: 2px solid #A9CCE3;
padding-bottom: 10px;
text-align: center;
}
.table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
.table-of-contents li {
margin-bottom: 12px;
padding-right: 0; /* حذف پدینگ راست پیش‌فرض */
position: relative;
}
.table-of-contents li::before {
content: ‘▪’; /* بولت مربع برای آیتم‌های اصلی */
position: absolute;
right: 0;
color: #5DADE2;
font-size: 1.2em;
top: -2px;
}
.table-of-contents a {
color: #3498DB;
text-decoration: none;
transition: color 0.3s ease;
font-size: 1.1em;
padding-right: 20px; /* پدینگ برای فضای بولت */
display: block; /* کل بلاک قابل کلیک باشد */
}
.table-of-contents a:hover {
color: #1A5276;
text-decoration: underline;
}
.toc-h3 { /* استایل برای لینک‌های H3 در فهرست */
padding-right: 40px; /* تورفتگی بیشتر */
font-size: 1.05em;
color: #5DADE2;
font-weight: normal;
}
.table-of-contents li ul {
margin-top: 8px;
margin-bottom: 5px;
}
.table-of-contents li ul li::before {
content: ‘▪’; /* استفاده از همان بولت برای زیرمجموعه */
color: #85C1E9; /* رنگ کمی روشن‌تر */
font-size: 1em;
top: 2px;
}

/* واکنش‌گرایی برای موبایل، تبلت، لپ‌تاپ و تلویزیون */
@media (max-width: 1200px) { /* لپ‌تاپ */
.container {
max-width: 850px;
padding: 20px;
}
}
@media (max-width: 992px) { /* تبلت افقی */
.container {
max-width: 760px;
padding: 20px;
}
h1 { font-size: 2.4em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; }
p { font-size: 1em; }
li { font-size: 1em; }
th, td { padding: 12px 15px; }
.infographic-block { padding: 25px; }
.infographic-block li { font-size: 1em; }
.infographic-block li strong { font-size: 1.1em; }
}
@media (max-width: 768px) { /* تبلت عمودی / موبایل افقی */
.container {
max-width: 100%;
padding: 15px;
margin: 15px 0;
border-radius: 0;
box-shadow: none; /* حذف سایه در صفحه‌های کوچک */
}
h1 { font-size: 2em; margin-bottom: 30px; padding-bottom: 12px; border-bottom: 2px solid #D6EAF8; }
h2 { font-size: 1.8em; margin-top: 35px; margin-bottom: 18px; padding-right: 10px; border-right: 4px solid #5DADE2; }
h3 { font-size: 1.3em; margin-top: 25px; margin-bottom: 15px; padding-bottom: 6px; }
p { font-size: 0.95em; margin-bottom: 15px; }
ul, ol { padding-right: 20px; margin-bottom: 15px; }
li { font-size: 0.95em; margin-bottom: 10px; }
th, td { padding: 10px 12px; font-size: 0.9em; }
.infographic-block { padding: 20px; margin: 30px 0; border-right: 6px solid #5DADE2; }
.infographic-block h3 { font-size: 1.5em; margin-bottom: 20px; padding-bottom: 10px; }
.infographic-block li { padding-right: 38px; margin-bottom: 18px; font-size: 0.95em; padding: 15px 20px; }
.infographic-block li::before { right: 8px; top: 15px; font-size: 1.4em; }
.infographic-block li strong { font-size: 1.05em; margin-bottom: 5px; }
.table-of-contents { padding: 20px 20px; margin: 25px 0; }
.table-of-contents h3 { font-size: 1.4em; margin-bottom: 15px; padding-bottom: 8px; }
.table-of-contents a { font-size: 1em; padding-right: 18px; }
.toc-h3 { padding-right: 30px; font-size: 0.95em; }
}
@media (max-width: 480px) { /* موبایل عمودی */
h1 { font-size: 1.8em; margin-bottom: 25px; padding-bottom: 10px; }
h2 { font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; padding-right: 8px; border-right: 3px solid #5DADE2; }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 12px; padding-bottom: 5px; }
p { font-size: 0.9em; margin-bottom: 12px; }
ul, ol { padding-right: 15px; margin-bottom: 12px; }
li { font-size: 0.9em; margin-bottom: 8px; }
th, td { padding: 8px 10px; font-size: 0.8em; }
.infographic-block { padding: 15px; margin: 25px 0; border-right: 5px solid #5DADE2; }
.infographic-block h3 { font-size: 1.3em; margin-bottom: 18px; padding-bottom: 8px; }
.infographic-block li { padding-right: 35px; margin-bottom: 15px; font-size: 0.9em; padding: 12px 18px; }
.infographic-block li::before { right: 5px; top: 12px; font-size: 1.3em; }
.infographic-block li strong { font-size: 1em; margin-bottom: 3px; }
.table-of-contents { padding: 15px 15px; margin: 20px 0; }
.table-of-contents h3 { font-size: 1.3em; margin-bottom: 12px; padding-bottom: 6px; }
.table-of-contents a { font-size: 0.95em; padding-right: 15px; }
.toc-h3 { padding-right: 25px; font-size: 0.9em; }
}
/* استایل‌دهی برای نمایشگرهای بزرگتر (مانند تلویزیون) */
@media (min-width: 1400px) {
.container {
max-width: 1100px;
padding: 40px;
}
h1 { font-size: 3.2em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.8em; }
p { font-size: 1.1em; }
li { font-size: 1.1em; }
th, td { padding: 18px 25px; }
.infographic-block { padding: 40px; }
.infographic-block li { font-size: 1.15em; }
.infographic-block li strong { font-size: 1.3em; }
}