/* ====================================================================== */
/* فایل استایل اصلی سایت فراگمان                                       */
/* نسخه نهایی با اسلایدر و بهبودهای دیگر                             */
/* ====================================================================== */

/* --- بخش ۱: وارد کردن فونت‌ها و تعریف متغیرهای رنگ --- */
/* =========================================================
   مینی-ریست جایگزین تیل‌ویند (برای جلوگیری از آبی شدن لینک‌ها)
   ========================================================= */
a {
    color: inherit;
    text-decoration: inherit;
}

button, 
[type='button'], 
[type='reset'], 
[type='submit'] {
    background-color: transparent;
    background-image: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
/* ========================================================= */
:root {
    --purple-glow: #c77dff; 
    --gold-glow: #ffd700; 
    --dark-bg: #0d0b14;
    --component-bg: rgba(20, 16, 32, 0.7); 
    --border-color: rgba(168, 85, 247, 0.3);
}

/* --- بخش ۲: استایل‌های عمومی و پایه با انیمیشن‌های نرم --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    background-color: var(--dark-bg); 
    color: var(--gold-glow); 
  
    min-height: 100vh; 
    direction: rtl; 
    overflow-x: hidden;
    padding-bottom: 85px;
}

section, .auth-container, .category-nav {
    background: var(--component-bg); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color); 
    border-radius: 16px; 
    padding: 2rem; 
    margin-bottom: 2rem;
    opacity: 0; 
    transform: translateY(20px);
    animation: fadeIn-up 0.8s ease-out forwards;
}
@keyframes fadeIn-up { 
    to { 
        opacity: 1; 
        transform: translateY(0);
    } 
}

h2 { 
    font-size: 2rem; 
    
    margin-bottom: 1.5rem; 
    border-bottom: 1px solid var(--purple-glow); 
    padding-bottom: 0.75rem; 
    color: #fff; 
}

/* --- بخش ۳: هدر و زیرنویس --- */
header { 
    text-align: center; 
    padding: 2rem 1rem; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
header h1 { 
    
    font-size: 5rem; 
    background: linear-gradient(90deg, #a855f7, #ffd700, #f97316, #a855f7); 
    background-size: 200% auto; 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent;
    -webkit-text-fill-color: transparent; 
    animation: text-flow 7s linear infinite; 
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.5); 
    margin-bottom: 0.5rem;
}
@keyframes text-flow { to { background-position: 200% center; } }

.site-tagline {
    font-size: 1.2rem;
    color: #eee;
    text-shadow: 0 0 5px var(--purple-glow);
    animation: fadeIn-up 1s ease-out 0.5s forwards;
    opacity: 0;
}

/* --- بخش ۴: نوار دسته‌بندی‌ها --- */
.category-nav {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 1rem; padding: 1rem; margin-bottom: 2rem;
}
.category-nav a {
    color: #ccc; text-decoration: none; background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem; border-radius: 20px; border: 1px solid transparent;
    transition: all 0.3s ease;
}
.category-nav a:hover { background: var(--purple-glow); color: var(--dark-bg); }
.category-nav a.active {
    background: var(--gold-glow); color: var(--dark-bg);
    border-color: var(--gold-glow); font-weight: bold;
}

/* --- بخش ۵: نوار تب پایین (Bottom Tab Bar) --- */
.bottom-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background: rgba(15, 12, 25, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid rgba(168, 85, 247, 0.4); display: flex; justify-content: space-around; align-items: center; z-index: 2000; }
.tab-link { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #aaa; text-decoration: none; font-size: 0.8rem; }
.tab-link i { font-size: 1.5rem; }
.tab-link.active { color: var(--purple-glow); text-shadow: 0 0 10px var(--purple-glow); }

/* --- بخش ۶: کارت‌های مقاله --- */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.article-card { background: rgba(30, 25, 50, 0.6); border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 12px; overflow: hidden; }
.article-card .card-image-container { position: relative; }
.article-card img { width: 100%; height: 200px; object-fit: cover; }
.card-content { padding: 1.5rem; }
.card-content h3 { font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--gold-glow); }

/* --- بخش ۷: فرم‌های ورود و ثبت‌نام --- */
.auth-container { max-width: 450px; margin: 2rem auto; }
.auth-toggle { display: flex; margin-bottom: 1.5rem; background: rgba(0,0,0,0.3); border-radius: 10px; overflow:hidden; }
.auth-toggle-btn { flex: 1; padding: 1rem; background: none; border: none; color: #ccc; font-size: 1.1rem; cursor: pointer; transition: background-color 0.3s; }
.auth-toggle-btn.active { background: var(--purple-glow); color: #fff; }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeInForm 0.5s ease; }
@keyframes fadeInForm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; margin-bottom: .5rem; font-size: .9rem; }
.input-group input, .input-group textarea, .input-group select { width: 100%; padding: 15px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; color: #fff; font-family: 'Vazir', sans-serif; }
.auth-button { background: linear-gradient(45deg, var(--purple-glow), var(--gold-glow)); color: var(--dark-bg); border: none; padding: 15px; width: 100%; font-weight: bold; font-size: 1.1rem; border-radius: 8px; cursor: pointer; }
.form-message { text-align: center; margin-top: 1rem; padding: 10px; border-radius: 8px; }
.form-message.error { color: #ffadad; background-color: rgba(255, 77, 77, 0.2); }
.form-message.success { color: #c1ffc1; background-color: rgba(77, 255, 77, 0.2); }
hr { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0; }

/* --- بخش ۸: پنل ادمین و صفحات داخلی آن --- */
.profile-view { text-align: center; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--purple-glow); margin-bottom: 1rem; object-fit: cover; }
.admin-container { display: flex; min-height: 100vh; }
.admin-sidebar { width: 250px; background: rgba(10, 8, 18, 0.9); border-left: 1px solid var(--border-color); padding: 1.5rem 0; }
.admin-nav a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; color: #ccc; text-decoration: none; border-right: 4px solid transparent; transition: all 0.3s; }
.admin-nav a:hover { background: rgba(168, 85, 247, 0.1); color: #fff; }
.admin-nav a.active { background: rgba(168, 85, 247, 0.2); color: #fff; border-right-color: var(--purple-glow); }
.admin-content { flex-grow: 1; padding: 2rem; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.page-header h3 { font-family: 'Lalezar', cursive; color: #fff; font-size: 1.8rem; }
.panel-button { background: linear-gradient(45deg, #3a1c71, #d76d77, #ffaf7b); color: white; border: none; padding: 12px 24px; font-weight: bold; border-radius: 8px; cursor: pointer; text-decoration:none; display:inline-block; }
.data-table { width: 100%; border-collapse: collapse; background: var(--component-bg); border-radius: 16px; overflow: hidden; }
.data-table th, .data-table td { text-align: right; padding: 1rem; border-bottom: 1px solid var(--border-color); }
.status-badge { padding: 5px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; }
.status-pending { background-color: #ffc107; color: #333; }
.status-published { background-color: #28a745; color: #fff; }
.action-links a { color: #ccc; margin: 0 8px; font-size: 1.2rem; }
.action-links a.approve:hover { color: #28a745; }
.action-links a.delete:hover { color: #dc3545; }
.upload-box { border: 2px dashed var(--border-color); border-radius: 8px; padding: 1rem; text-align: center; cursor: pointer; }
.upload-box input[type="file"] { display: none; }
.admin-grid-container { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .admin-grid-container { grid-template-columns: 1fr 2fr; } }

/* --- بخش ۹: افکت پس‌زمینه ستاره‌ای (بسیار سبک) --- */
.stars-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; background: var(--dark-bg); }
@keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-2000px); } }
@function multiple-box-shadow ($n) { $value: '#{random(2000)}px #{random(2000)}px #FFF'; @for $i from 2 through $n { $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'; } @return unquote($value); }
$shadows-small: multiple-box-shadow(700); $shadows-medium: multiple-box-shadow(200); $shadows-big: multiple-box-shadow(100);
#stars { width: 1px; height: 1px; background: transparent; box-shadow: $shadows-small; animation: animStar 50s linear infinite; }
#stars2 { width: 2px; height: 2px; background: transparent; box-shadow: $shadows-medium; animation: animStar 100s linear infinite; }
#stars3 { width: 3px; height: 3px; background: transparent; box-shadow: $shadows-big; animation: animStar 150s linear infinite; }

/* --- بخش ۱۰: استایل اسلایدر صفحه اصلی --- */
.slider-section {
    padding: 0;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin-top: -2rem; /* کمی به بالا برود و به هدر نزدیک‌تر شود */
}
.main-slider {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}
.slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}
.slide-content {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2rem 3rem;
    color: #fff;
    width: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.slide-category {
    background-color: var(--gold-glow);
    color: var(--dark-bg);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}
.slide-title {
    font-size: 2.2rem;
    font-family: 'Lalezar', cursive;
    margin-top: 1rem;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}
.slider-nav {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    display: flex;
    gap: 1rem;
}
.slider-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}
.slider-btn:hover {
    background: var(--purple-glow);
}

/* --- بخش ۱۱: استایل بخش مدیریت اسلایدر در پنل ادمین --- */
.slider-management-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.slider-management-list span {
    color: #fff;
}
.slider-remove-btn {
    background: #dc3545;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.8rem;
}
/* --- بخش ۱۲: استایل صفحه بررسی مقاله و آیکون‌های جدید --- */
.action-links a.review {
    color: #17a2b8;
}
.action-links a.review:hover {
    color: #107280;
}
.action-links a.edit {
    color: #ffc107;
}
.action-links a.edit:hover {
    color: #d39e00;
}

.article-review-container {
    background: #1a1a2e;
    padding: 2rem;
    border-radius: 12px;
}
.article-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: #ccc;
}
.article-title-review {
    font-size: 2.5rem;
    font-family: 'Lalezar', cursive;
    color: var(--gold-glow);
    margin-bottom: 1.5rem;
}
.article-image-review {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 2rem;
}
.article-content-review {
    color: #e0e0e0;
    line-height: 1.8;
    font-size: 1.1rem;
}
.article-content-review h1, .article-content-review h2, .article-content-review h3 {
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.article-content-review p {
    margin-bottom: 1rem;
}
.article-content-review a {
    color: var(--purple-glow);
}
.article-content-review ul, .article-content-review ol {
    margin-right: 2rem;
    margin-bottom: 1rem;
}
.article-actions-review {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
}
.action-btn {
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
.action-btn.approve {
    background: #28a745;
}
.action-btn.delete {
    background: #dc3545;
}
/* --- بخش ۱۳: استایل کارت‌های آمار داشبورد --- */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.stat-icon {
    font-size: 2.5rem;
    color: var(--purple-glow);
}
.stat-info {
    display: flex;
    flex-direction: column;
}
.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}
.stat-title {
    font-size: 0.9rem;
    color: #ccc;
}
/* --- اصلاحیه برای لینک کارت‌ها و استایل متا --- */
a.article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.article-card-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #ccc;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-meta i {
    color: var(--purple-glow);
}
/* --- بخش ۱۵: اصلاحیه برای ویرایشگر متن TinyMCE در موبایل --- */

/* این کلاس را به div نگهدارنده textarea اضافه کرده‌ایم */
.tinymce-container {
    /* بازنویسی هرگونه display:flex یا grid احتمالی از کلاس والد */
    display: block;
    width: 100%;
}

/* این کلاس به صورت خودکار توسط TinyMCE ساخته می‌شود. */
/* ما مطمئن می‌شویم که عرض آن همیشه درست است. */
.tox-tinymce {
    width: 100% !important; /* !important برای اولویت بالاتر */
    border-radius: 8px !important;
}
/* ========================================================== */
/* --- بخش ۱۴: استایل‌های صفحه نمایش مقاله تکی --- */
/* ========================================================== */

.single-article-container {
    background: var(--component-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 3rem;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn-up 0.8s ease-out forwards;
}

.article-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.article-title {
    font-size: 3rem;
    font-family: 'Lalezar', cursive;
    color: var(--gold-glow);
    margin-bottom: 1rem;
}

.article-meta-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* برای نمایش بهتر در موبایل */
    gap: 1rem 2rem; /* فاصله بین آیتم‌ها */
    color: #ccc;
    font-size: 0.9rem;
}

.article-meta-info span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-meta-info i {
    color: var(--purple-glow);
}

.article-meta-info a {
    color: var(--purple-glow);
    text-decoration: none;
}

.article-featured-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 2.5rem;
}

/* --- راه حل مشکل متن زرد رنگ --- */
.article-content {
    color: #e0e0e0; /* رنگ سفید دودی برای خوانایی بهتر */
    line-height: 1.9;
    font-size: 1.1rem;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content a {
    color: var(--purple-glow);
    text-decoration: none;
    border-bottom: 1px dotted var(--purple-glow);
}

.article-content ul, .article-content ol {
    margin-right: 2rem;
    margin-bottom: 1.5rem;
}

.article-content blockquote {
    border-right: 4px solid var(--purple-glow);
    padding-right: 1rem;
    margin: 2rem 0;
    color: #ccc;
    font-style: italic;
}

/* راه حل برای عنوان‌های داخل متن مقاله */
.article-content h1, 
.article-content h2, 
.article-content h3, 
.article-content h4 {
    color: #fff; /* عنوان‌های داخل متن سفید باشند */
    font-family: 'Lalezar', cursive;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}


/* ========================================================== */
/* --- بخش ۱۵: استایل‌های جدید برای کارت‌های مقاله --- */
/* ========================================================== */

a.article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border-radius: 12px; /* برای اینکه سایه به درستی اعمال شود */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.article-card-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(199, 125, 255, 0.2);
}

.author-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(5px);
}

.author-tag i {
    /* آیکون رنگ را به ارث می‌برد و نیاز به استایل اضافه ندارد */
}

.category-badge {
    display: inline-block;
    background: var(--purple-glow);
    color: var(--dark-bg);
    padding: 3px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.article-title-card {
    font-size: 1.4rem;
    color: var(--gold-glow);
    margin-bottom: 0.75rem;
}

.article-excerpt {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
    margin-top: 0.75rem;
    /* نمایش حداکثر ۲ خط از خلاصه */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

/* استایل متای قدیمی که دیگر به آن نیاز نداریم را پنهان می‌کنیم */
.article-meta {
    display: none;
}
/* ========================================================== */
/* --- بخش ۱۸: اصلاحات جزئی برای جدول مدیریت مقالات --- */
/* ========================================================== */

/* استایل برای هدر ستون بازدیدها */
.data-table th:nth-child(4) {
    text-align: center; /* عنوان "بازدیدها" را وسط‌چین می‌کند */
}

/* استایل برای محتوای ستون بازدیدها */
.data-table td:nth-child(4) {
    text-align: center; /* اعداد بازدید را وسط‌چین می‌کند */
    font-weight: bold;
    color: #fff;
    font-family: monospace; /* از یک فونت با عرض یکسان برای اعداد استفاده می‌کند */
    font-size: 1rem;
}

/* در حالتی که کاربر نویسنده است و ستون "نویسنده" وجود ندارد، ستون بازدیدها ستون سوم خواهد بود */
/* این کد برای سازگاری با هر دو حالت ادمین و نویسنده است */

/* هدر ستون بازدیدها برای نویسنده */
.data-table th:nth-child(3) {
    text-align: center;
}

/* محتوای ستون بازدیدها برای نویسنده */
.data-table td:nth-child(3) {
    /* برای اینکه با استایل اقدامات تداخل نکند، شرطی می‌نویسیم */
}

/* یک روش بهتر و دقیق‌تر با استفاده از کلاس */

.data-table .views-column {
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-family: monospace;
    font-size: 1rem;
}
/* --- بخش ۱۸: استایل‌های جدید برای اسلایدر حرفه‌ای --- */

/* انیمیشن نرم برای نمایش اسلایدها */
.slide {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slide.active {
    opacity: 1;
    z-index: 1; /* اسلاید فعال را روی بقیه قرار می‌دهد */
}
.slider-section {
    background: #111; /* یک پس‌زمینه برای زمانی که تصاویر لود می‌شوند */
}
/* استایل نشانگرهای تعداد اسلاید */
.slider-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}
.dot:hover {
    background: #fff;
}
.dot.active {
    background: #fff;
    border-color: var(--purple-glow);
    transform: scale(1.2);
}
/* ========================================================== */
/* --- بخش ۲۳: استایل‌های حرفه‌ای و ایزوله شده برای صفحه چت --- */
/* ========================================================== */

/* تمام استایل‌های زیر فقط به عناصری که داخل این کانتینر هستند، اعمال می‌شود */
.chat-page-container h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff; /* اطمینان از رنگ صحیح عنوان */
}

.chat-container {
    height: 70vh;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.chat-message {
    display: flex;
    gap: 1rem;
    max-width: 80%;
    align-self: flex-start; /* پیام‌ها به صورت پیش‌فرض در سمت چپ هستند */
}

.message-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--purple-glow);
    flex-shrink: 0; /* جلوگیری از کوچک شدن آواتار */
}

.message-content {
    display: flex;
    flex-direction: column;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.message-display-name {
    font-weight: 700;
    color: #fff;
}

.message-time {
    font-size: 0.75rem;
    color: #aaa;
}

.message-bubble {
    background: var(--component-bg);
    padding: 0.75rem 1.25rem;
    border-radius: 20px 20px 20px 5px;
}

.message-text {
    color: #e0e0e0;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word; /* برای شکستن کلمات طولانی */
}

/* استایل برای پیام‌های کاربر فعلی */
.chat-message.current-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message.current-user .message-bubble {
    background: var(--purple-glow);
    border-radius: 20px 20px 5px 20px;
}

.chat-message.current-user .message-text,
.chat-message.current-user .message-display-name {
    color: var(--dark-bg);
}

/* استایل بخش ریپلای */
.reply-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s;
    align-self: flex-start;
}
.chat-message:hover .reply-btn {
    opacity: 1;
}
.replied-message {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-right: 3px solid var(--gold-glow);
    font-size: 0.8rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reply-to-container {
    padding: 0.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reply-info span { font-size: 0.8rem; color: #aaa; }
.reply-info p { margin: 0; font-size: 0.9rem; color: #fff; }
.cancel-reply-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* استایل فرم ارسال پیام */
.chat-form {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 12px 12px;
}
#message-input {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.75rem 1rem;
    color: #fff;
    font-family: 'Pinar', sans-serif;
    resize: none;
    height: 50px;
}
.send-btn {
    background: var(--purple-glow);
    border: none;
    color: var(--dark-bg);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
}
/* ====================================================================== */
/* --- بلوک کامل بازطراحی و قابلیت‌های جدید (نسخه نهایی و ضد تداخل) --- */
/* ====================================================================== */

/* --- ۱. فونت‌ها و تایپوگرافی پایه --- */
body {
    font-family: 'Pinar', 'Vazir', sans-serif;
}
.logo-title {
    font-family: 'Lalezar', cursive;
    /* (بقیه استایل‌های لوگو که از قبل داشتید صحیح است) */
}

/* --- ۲. بازطراحی کامل منوی تب پایین --- */
.bottom-tab-nav {
    /* (کدهای این بخش که قبلاً فرستادم، کامل و صحیح هستند) */
}
.nav-link { /* ... */ }
.nav-icon { /* ... */ }
/* (ادامه استایل‌های فوتر) */

/* --- ۳. بازطراحی کارت‌های مقاله و برچسب نویسنده "خفن" --- */
a.article-card-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(199, 125, 255, 0.2);
}
.author-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.8), rgba(245, 158, 11, 0.8)); /* گرادیانت بنفش به طلایی */
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.article-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* --- ۴. بهینه‌سازی‌های موبایل (که از بین رفته بود) --- */
@media (max-width: 600px) {
    /* بهینه‌سازی عنوان اسلایدر */
    .slide-title {
        font-size: 1.5rem;
        margin-top: 0.5rem;
    }
    .slide-content {
        padding: 1.5rem;
        width: 85%;
    }
    /* بهینه‌سازی گرید مقالات */
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* --- ۵. استایل‌های بخش چت (نسخه ضد تداخل) --- */
/* ما تمام انتخاب‌گرها را با #chat-container شروع می‌کنیم تا فقط روی صفحه چت اعمال شوند */
#chat-container .chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
#chat-container .chat-message {
    display: flex;
    gap: 1rem;
    max-width: 80%;
}
#chat-container .message-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--purple-glow);
}
#chat-container .message-content {
    display: flex;
    flex-direction: column;
}
#chat-container .message-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
#chat-container .message-display-name { font-weight: 700; color: #fff; }
#chat-container .message-time { font-size: 0.75rem; color: #aaa; }
#chat-container .message-bubble {
    background: var(--component-bg);
    padding: 0.75rem 1.25rem;
    border-radius: 20px 20px 20px 5px;
}
#chat-container .message-text { color: #e0e0e0; line-height: 1.6; white-space: pre-wrap; }

/* استایل بخش ریپلای در چت */
#chat-container .reply-btn {
    background: none; border: none; color: #aaa;
    cursor: pointer; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s;
}
#chat-container .chat-message:hover .reply-btn { opacity: 1; }
#chat-container .replied-message {
    background: rgba(255, 255, 255, 0.05); padding: 0.5rem; border-radius: 8px;
    margin-bottom: 0.5rem; border-right: 3px solid var(--gold-glow);
    font-size: 0.8rem; color: #ccc; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
#chat-container .reply-to-container {
    padding: 0.5rem 1.5rem; background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--border-color); display: flex;
    justify-content: space-between; align-items: center;
}
#chat-container .reply-info span { font-size: 0.8rem; color: #aaa; }
#chat-container .reply-info p { margin: 0; font-size: 0.9rem; color: #fff; }
#chat-container .cancel-reply-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* استایل فرم ارسال پیام در چت */
#chat-container .chat-form {
    display: flex; padding: 1rem; gap: 1rem;
    border-top: 1px solid var(--border-color);
}
#chat-container #message-input {
    flex-grow: 1; background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color); border-radius: 20px;
    padding: 0.75rem 1rem; color: #fff;
    font-family: 'Pinar', sans-serif; resize: none; height: 50px;
}
#chat-container .send-btn {
    background: var(--purple-glow); border: none; color: var(--dark-bg);
    width: 50px; height: 50px; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer;
}
/* ====================================================================== */
/* --- بلوک کامل بازطراحی و قابلیت‌های جدید (نسخه نهایی ضد تداخل) --- */
/* ====================================================================== */

/* --- ۱. بازگرداندن فونت فانتزی لوگو --- */
.logo-title {
    font-family: 'Lalezar', cursive;
    font-size: 5rem;
    font-weight: 400;
    background: linear-gradient(90deg, #a855f7, #ffd700, #f97316, #a855f7);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: text-flow 7s linear infinite;
}

/* --- ۲. بازگرداندن استایل هدر چسبان و دکمه تم --- */
body.scrolled .site-header.sticky {
    /* (این استایل‌ها باید از قبل در فایل شما باشند، اما برای اطمینان اینجا هم می‌آوریم) */
}
.theme-toggle {
    /* (این استایل‌ها باید از قبل در فایل شما باشند، اما برای اطمینان اینجا هم می‌آوریم) */
}

/* --- ۳. بازگرداندن استایل منوی تب پایین مدرن --- */
.bottom-tab-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0; height: 70px;
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 2000;
}
.nav-link {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; color: #888; text-decoration: none;
    height: 100%; flex-grow: 1; position: relative;
    transition: color 0.3s ease;
}
.nav-link:hover { color: #fff; }
.nav-icon { font-size: 1.5rem; margin-bottom: 4px; transition: transform 0.3s ease; }
.nav-text { font-size: 0.75rem; font-weight: 700; }
.nav-link.active { color: var(--purple-glow); }
.nav-link.active .nav-icon { transform: translateY(-2px); }
.nav-link.active::after {
    content: ''; position: absolute; bottom: 8px;
    width: 6px; height: 6px; background-color: var(--gold-glow);
    border-radius: 50%; box-shadow: 0 0 8px var(--gold-glow);
}


/* --- ۴. اصلاح گرید مقالات برای موبایل (بازگشت به تک ستونه) --- */
@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr; /* در موبایل فقط یک ستون نمایش بده */
        gap: 1.5rem;
    }
}


/* --- ۵. استایل جدید و "خفن" برای برچسب نویسنده --- */
.author-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.8), rgba(245, 158, 11, 0.8));
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* --- ۶. استایل‌های ضد تداخل برای بخش چت --- */
.chat-page-container h2 { display: flex; align-items: center; gap: 1rem; }
.chat-container { height: 70vh; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.2); border-radius: 12px; }
#chat-container .chat-messages { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
#chat-container .chat-message { display: flex; gap: 1rem; max-width: 80%; }
#chat-container .message-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid var(--purple-glow); }
#chat-container .message-content { display: flex; flex-direction: column; }
#chat-container .message-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
#chat-container .message-display-name { font-weight: 700; color: #fff; }
#chat-container .message-time { font-size: 0.75rem; color: #aaa; }
#chat-container .message-bubble { background: var(--component-bg); padding: 0.75rem 1.25rem; border-radius: 20px 20px 20px 5px; }
#chat-container .message-text { color: #e0e0e0; line-height: 1.6; white-space: pre-wrap; }
#chat-container .chat-message.current-user { align-self: flex-end; flex-direction: row-reverse; }
#chat-container .chat-message.current-user .message-bubble { background: var(--purple-glow); border-radius: 20px 20px 5px 20px; }
#chat-container .chat-message.current-user .message-text,
#chat-container .chat-message.current-user .message-display-name { color: var(--dark-bg); }
#chat-container .reply-btn { background: none; border: none; color: #aaa; cursor: pointer; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s; }
#chat-container .chat-message:hover .reply-btn { opacity: 1; }
#chat-container .replied-message { background: rgba(255, 255, 255, 0.05); padding: 0.5rem; border-radius: 8px; margin-bottom: 0.5rem; border-right: 3px solid var(--gold-glow); font-size: 0.8rem; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-container .reply-to-container { padding: 0.5rem 1.5rem; background: rgba(0, 0, 0, 0.3); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
#chat-container .reply-info span { font-size: 0.8rem; color: #aaa; }
#chat-container .reply-info p { margin: 0; font-size: 0.9rem; color: #fff; }
#chat-container .cancel-reply-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
#chat-container .chat-form { display: flex; padding: 1rem; gap: 1rem; border-top: 1px solid var(--border-color); }
#chat-container #message-input { flex-grow: 1; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); border-radius: 20px; padding: 0.75rem 1rem; color: #fff; font-family: 'Pinar', sans-serif; resize: none; height: 50px; }
#chat-container .send-btn { background: var(--purple-glow); border: none; color: var(--dark-bg); width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
/* ====================================================================== */
/* --- بخش ۲۳: بازطراحی نهایی هدر، دکمه‌ها و انیمیشن‌ها --- */
/* ====================================================================== */

/* --- ۱. هدر چسبان و دینامیک --- */
.site-header {
    /* بازنویسی استایل قبلی برای چسبان شدن */
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    padding: 2rem 1rem;
    border-bottom: 1px solid transparent; /* در حالت عادی بدون خط */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* انیمیشن نرم */
}

/* حالت کوچک شده هدر وقتی کاربر اسکرول می‌کند */
body.scrolled .site-header {
    background: rgba(18, 18, 18, 0.8); /* پس‌زمینه شیشه‌ای */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* برای هماهنگی با کانتینر اصلی */
    margin: 0 auto;
}

/* محو شدن تگ‌لاین هنگام اسکرول */
.site-tagline {
    transition: all 0.4s ease;
}
body.scrolled .site-tagline {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}


/* --- ۲. بازگرداندن استایل "خفن" فونت فراگمان --- */
.logo-title {
    /* بازنویسی استایل ساده قبلی */
    font-family: 'Lalezar', cursive;
    font-size: 3rem; /* اندازه اولیه */
    font-weight: 400;
    background: linear-gradient(90deg, #c77dff, #ffd700);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transition: font-size 0.4s ease; /* انیمیشن برای اندازه فونت */
}
/* کوچک شدن فونت لوگو هنگام اسکرول */
body.scrolled .logo-title {
    font-size: 2rem;
}
.logo-icon {
    transition: font-size 0.4s ease; /* انیمیشن برای اندازه آیکون */
}
body.scrolled .logo-icon {
    font-size: 1.8rem;
}


/* --- ۳. بازگرداندن استایل دکمه تم شب/روز --- */
.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
}
.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
    position: absolute;
    transition: transform 0.4s ease;
}
/* حالت پیش‌فرض (شب) */
.theme-toggle .sun-icon { transform: translateY(100%); }
.theme-toggle .moon-icon { transform: translateY(0); }
/* حالت روز */
body.light-mode .theme-toggle .sun-icon { transform: translateY(0); }
body.light-mode .theme-toggle .moon-icon { transform: translateY(-100%); }


/* --- ۴. دکمه "ادامه مطلب" خفن‌تر --- */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold-glow);
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}
a.article-card-link:hover .cta-button {
    background: var(--purple-glow);
    color: var(--dark-bg);
    border-color: var(--purple-glow);
    gap: 1rem; /* آیکون فاصله می‌گیرد */
}
.cta-button i {
    transition: transform 0.3s ease;
}
a.article-card-link:hover .cta-button i {
    transform: translateX(-5px); /* آیکون به سمت چپ حرکت می‌کند */
}
/* ====================================================================== */
/* --- بخش ۲۴: بازطراحی نهایی اسلایدر و نوار دسته‌بندی --- */
/* ====================================================================== */

/* --- ۱. بازطراحی اسلایدر با انیمیشن‌های جدید --- */

/* بازنویسی استایل پایه اسلایدر */
.slider-section {
    position: relative;
    height: 60vh; /* ارتفاع بیشتر برای تاثیرگذاری */
    min-height: 400px;
    overflow: hidden;
    border-radius: 16px; /* گرد کردن گوشه‌ها */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* بازنویسی استایل هر اسلاید */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1); /* کمی زوم اولیه برای انیمیشن */
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide.active {
    opacity: 1;
    transform: scale(1); /* بازگشت به اندازه اصلی با انیمیشن نرم */
    z-index: 1;
}

.slide-bg {
    transition: transform 8s ease-out; /* انیمیشن حرکت آرام تصویر */
}
.slide.active .slide-bg {
    transform: scale(1.15); /* افکت Ken Burns: زوم آرام تصویر فعال */
}

/* بازنویسی استایل محتوای اسلاید */
.slide-content {
    width: 100%;
    bottom: 0;
    right: 0;
    padding: 3rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 80%);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.8s ease 0.4s; /* با کمی تاخیر ظاهر می‌شود */
}
.slide.active .slide-content {
    transform: translateY(0);
    opacity: 1;
}

.slide-title {
    font-size: 2.8rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

/* بازنویسی استایل دکمه‌های چپ و راست */
.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}
.slider-btn:hover {
    background: var(--purple-glow);
    transform: scale(1.1);
}
.slider-nav { z-index: 10; } /* برای اطمینان از اینکه روی اسلایدها هستند */


/* --- ۲. بازطراحی نوار دسته‌بندی‌ها با ظاهر مدرن --- */

/* بازنویسی استایل کانتینر */
.category-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem; /* فاصله کمتر */
    padding: 1rem;
    margin-bottom: 2rem;
    /* حذف پس‌زمینه و حاشیه قبلی */
    background: none;
    border: none;
}

/* بازنویسی استایل لینک دسته‌بندی */
.category-nav a {
    color: #ccc;
    text-decoration: none;
    background: rgba(30, 25, 50, 0.6); /* پس‌زمینه شیشه‌ای تیره */
    padding: 0.6rem 1.2rem;
    border-radius: 30px; /* گردی بیشتر */
    border: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* افکت هاور */
.category-nav a:hover {
    background: var(--purple-glow);
    color: var(--dark-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(168, 85, 247, 0.3);
}

/* استایل حالت فعال */
.category-nav a.active {
    background: var(--gold-glow);
    color: var(--dark-bg);
    border-color: var(--gold-glow);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}
/* ====================================================================== */
/* --- بخش ۲۵: بهینه‌سازی نهایی اسلایدر و صفحه مقاله برای موبایل --- */
/* ====================================================================== */

/* این کد فقط زمانی اجرا می‌شود که عرض صفحه نمایش ۷۶۸ پیکسل یا کمتر باشد */
@media (max-width: 768px) {

    /* --- ۱. بهینه‌سازی اسلایدر برای موبایل --- */
    
    .slider-section {
        height: 50vh; /* کاهش ارتفاع اسلایدر در موبایل */
        min-height: 350px;
    }

    .slide-content {
        /* کاهش پدینگ برای باز شدن فضا */
        padding: 1.5rem;
        /* افزایش عرض برای استفاده بهتر از فضا */
        width: 100%; 
        /* گرادیانت را کمی بیشتر می‌کنیم تا متن خواناتر باشد */
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%);
    }

    .slide-title {
        /* کاهش چشمگیر اندازه فونت عنوان */
        font-size: 1.8rem; 
    }

    .slide-category {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    /* مخفی کردن دکمه‌های چپ و راست در موبایل (چون اسکرول لمسی وجود دارد) */
    .slider-nav {
        display: none;
    }

    /* نقطه‌های نشانگر را کمی بالاتر می‌آوریم */
    .slider-pagination {
        bottom: 15px;
    }


    /* --- ۲. بهینه‌سازی صفحه مقاله برای موبایل --- */

    .single-article-container {
        /* کاهش پدینگ‌های افقی برای استفاده حداکثری از عرض صفحه */
        padding: 1.5rem;
    }

    .article-title {
        /* کاهش اندازه فونت عنوان اصلی مقاله */
        font-size: 2.2rem;
    }

    .article-meta-info {
        /* چیدمان عمودی اطلاعات نویسنده و دسته برای جلوگیری از شلوغی */
        flex-direction: column;
        gap: 0.75rem; /* کاهش فاصله */
    }

    .article-featured-image {
        max-height: 250px; /* کاهش ارتفاع تصویر شاخص */
    }

    .article-content {
        /* کاهش اندازه فونت متن اصلی برای جا شدن کلمات بیشتر در هر خط */
        font-size: 1rem;
        line-height: 1.8; /* حفظ فاصله خطوط برای خوانایی */
    }

}
/* ========================================================== */
/* --- بخش ۲۳: اصلاحیه‌های نهایی برای چت و نظرات --- */
/* ========================================================== */

/* استایل برای نمایش زمان پیام (که قبلاً ممکن است مخفی بوده) */
.message-time {
    font-size: 0.75rem;
    color: #aaa;
    margin-right: auto; /* آن را به سمت چپ هدر پیام هل می‌دهد */
    white-space: nowrap;
}

/* استایل برای بخش پیام ریپلای شده */
.replied-message {
    background: rgba(0, 0, 0, 0.5); /* کمی تیره‌تر از پس‌زمینه اصلی حباب */
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border-right: 3px solid var(--gold-glow);
    font-size: 0.85rem;
    color: #ccc;
}

.replied-message strong {
    color: var(--gold-glow);
    display: block;
    margin-bottom: 4px;
}

.replied-message p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* نمایش ... برای متن‌های طولانی */
}

/* اطمینان از اینکه دکمه ریپلای همیشه قابل دیدن است */
.reply-btn {
    opacity: 1; /* حذف حالت هاور و نمایش دائمی */
    margin-top: 5px;
    color: var(--purple-glow);
    font-weight: bold;
}
/* ========================================================== */
/* --- بخش ۲۴: استایل کامل برای بخش نظرات مقالات --- */
/* ========================================================== */

/* کانتینر اصلی بخش نظرات */
.comments-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.comments-section h3 {
    font-family: 'Lalezar', cursive;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* فرم ارسال نظر جدید */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}

.comment-form textarea {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    color: #fff;
    font-family: 'Pinar', sans-serif;
    resize: vertical; /* اجازه تغییر ارتفاع به کاربر */
    min-height: 100px;
}

.comment-form .panel-button {
    align-self: flex-start; /* دکمه در ابتدای ردیف قرار بگیرد */
}

/* لیست نظرات */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* استایل هر کامنت تکی (بسیار شبیه به پیام چت) */
.comment-item {
    display: flex;
    gap: 1rem;
}

.comment-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--purple-glow);
}

.comment-content {
    flex-grow: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.comment-author-name {
    font-weight: 700;
    color: #fff;
}

.comment-time {
    font-size: 0.75rem;
    color: #aaa;
    margin-right: auto;
}

.comment-bubble {
    background: var(--component-bg);
    padding: 0.75rem 1.25rem;
    border-radius: 5px 20px 20px 20px;
}

.comment-text {
    color: #e0e0e0;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* استایل بخش ریپلای در نظرات */
.comment-reply-btn {
    background: none;
    border: none;
    color: var(--purple-glow);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

.replied-comment-preview {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border-right: 3px solid var(--gold-glow);
    font-size: 0.85rem;
    color: #ccc;
}
.replied-comment-preview strong {
    color: var(--gold-glow);
    display: block;
    margin-bottom: 4px;
}
.replied-comment-preview p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ========================================================== */
/* --- بخش جدید: بهینه‌سازی صفحه پروفایل برای موبایل --- */
/* ========================================================== */

/* استایل‌های پایه برای کانتینر پروفایل */
.profile-view {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* فاصله بین عناصر */
}

/* استایل پایه برای آواتار */
.profile-avatar {
    width: 150px; /* اندازه پیش‌فرض برای دسکتاپ */
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--purple-glow);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    margin-bottom: 1rem;
    object-fit: cover;
}

.profile-view h2 {
    font-size: 2rem;
    margin-bottom: 0;
}

.profile-view p {
    font-size: 1.1rem;
    color: #ccc;
}

/* 
   این کد فقط زمانی اجرا می‌شود که عرض صفحه نمایش ۷۶۸ پیکسل یا کمتر باشد 
   (محدوده تبلت و موبایل)
*/
@media (max-width: 768px) {
    .profile-avatar {
        /* اندازه آواتار را در موبایل کوچکتر می‌کنیم */
        width: 120px;
        height: 120px;
        border-width: 3px;
    }

    .profile-view h2 {
        font-size: 1.8rem; /* اندازه عنوان را کمی کوچکتر می‌کنیم */
    }

    .profile-view p {
        font-size: 1rem; /* اندازه متن را کمی کوچکتر می‌کنیم */
    }

    /* اندازه دکمه خروج را هم بهینه می‌کنیم */
    .profile-view .auth-button {
        padding: 12px 24px;
        font-size: 1rem;
    }
}
/* ========================================================== */
/* --- بخش ۲۳: استایل کامل و نهایی برای صفحه پروفایل --- */
/* (این کد هم برای پروفایل کاربر عمومی و هم برای ادمین کار می‌کند) */
/* ========================================================== */

/* کانتینر اصلی بخش پروفایل */
.profile-view {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* فاصله بین عناصر */
}

/* استایل عکس پروفایل (آواتار) */
.profile-avatar {
    width: 150px; /* اندازه پیش‌فرض برای دسکتاپ */
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--purple-glow);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 0 5px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.profile-avatar:hover {
    transform: scale(1.05) rotate(3deg); /* افکت هاور جذاب */
}

/* استایل نام کاربر */
.profile-view h2 {
    font-family: 'Lalezar', cursive;
    font-size: 2.2rem;
    margin-bottom: 0;
    color: #fff;
    border-bottom: none; /* حذف خط زیرین اضافی */
    padding-bottom: 0;
}

/* استایل متن‌های دیگر (نام کاربری، نقش و...) */
.profile-view p {
    font-size: 1.1rem;
    color: #ccc;
    margin-top: 0.5rem;
}

.profile-view p strong {
    color: var(--gold-glow);
    font-weight: 700;
}

/* ========================================================== */
/* --- بهینه‌سازی پروفایل برای موبایل و تبلت --- */
/* ========================================================== */

/* این کد فقط زمانی اجرا می‌شود که عرض صفحه نمایش ۷۶۸ پیکسل یا کمتر باشد */
@media (max-width: 768px) {
    .profile-avatar {
        /* اندازه آواتار را در موبایل کوچکتر می‌کنیم */
        width: 120px;
        height: 120px;
        border-width: 3px;
    }

    .profile-view h2 {
        font-size: 1.8rem; /* اندازه عنوان را کمی کوچکتر می‌کنیم */
    }

    .profile-view p {
        font-size: 1rem; /* اندازه متن را کمی کوچکتر می‌کنیم */
    }

    /* اندازه دکمه خروج را هم بهینه می‌کنیم */
    .profile-view .auth-button {
        padding: 12px 24px;
        font-size: 1rem;
        margin-top: 1.5rem !important; /* برای اطمینان از فاصله */
    }
}
/* ========================================================== */
/* === استایل تلفیقی و نهایی پروفایل و نظرات (Gemini) === */
/* ========================================================== */


/* ================================= */
/* --- بخش ۱: صفحه پروفایل (کد شما) --- */
/* ================================= */

/* کانتینر اصلی بخش پروفایل */
.profile-view {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* فاصله بین عناصر */
}

/* استایل عکس پروفایل (آواتار) */
.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--purple-glow);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 0 5px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.profile-avatar:hover {
    transform: scale(1.05) rotate(3deg); /* افکت هاور جذاب */
}

/* استایل نام کاربر */
.profile-view h2 {
    font-family: 'Lalezar', cursive;
    font-size: 2.2rem;
    margin-bottom: 0;
    color: #fff;
    border-bottom: none; /* حذف خط زیرین اضافی */
    padding-bottom: 0;
}

/* استایل متن‌های دیگر (نام کاربری، نقش و...) */
.profile-view p {
    font-size: 1.1rem;
    color: #ccc;
    margin-top: 0.5rem;
}

.profile-view p strong {
    color: var(--gold-glow);
    font-weight: 700;
}


/* =============================================== */
/* --- بخش ۲: بخش نظرات مقالات (کد جدید) --- */
/* =============================================== */

.article-comments-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #444; /* خط جداکننده تیره‌تر برای تم تاریک */
}

.comment-container {
    margin-bottom: 20px;
}

.comment-item {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.05); /* پس‌زمینه نیمه‌شفاف */
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    position: relative;
}

.comment-author-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-left: 15px;
    object-fit: cover;
    border: 2px solid var(--purple-glow);
}

.comment-author {
    font-weight: bold;
    color: #fff;
    font-size: 1.1em;
}

.comment-time {
    font-size: 0.85em;
    color: #aaa;
    margin-right: 10px;
}

.comment-content p {
    margin: 0;
    line-height: 1.6;
    color: #ddd;
}

.reply-button {
    background: var(--purple-glow);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
    transition: background-color 0.2s;
}

.reply-button:hover {
    background: #a855f7; /* کمی روشن‌تر */
}

.comment-replies {
    margin-top: 15px;
    margin-right: 30px; 
    padding-right: 20px;
    border-right: 3px solid var(--purple-glow);
}

.comment-form-container {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.comment-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #333;
    color: #fff;
    min-height: 100px;
    margin-bottom: 10px;
}

.comment-form button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.login-prompt {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--gold-glow);
    padding: 15px;
    border-radius: 8px;
}
.login-prompt a {
    color: #a855f7;
    text-decoration: none;
}


/* ========================================================== */
/* --- بخش ۳: بهینه‌سازی برای موبایل و تبلت (تلفیقی) --- */
/* ========================================================== */

@media (max-width: 768px) {
    /* --- بهینه‌سازی پروفایل --- */
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-width: 3px;
    }

    .profile-view h2 {
        font-size: 1.8rem;
    }

    .profile-view p {
        font-size: 1rem;
    }

    .profile-view .auth-button {
        padding: 12px 24px;
        font-size: 1rem;
        margin-top: 1.5rem !important;
    }

    /* --- بهینه‌سازی نظرات --- */
    .comment-avatar {
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }
    
    .comment-replies {
        margin-right: 15px;
        padding-right: 15px;
    }

    .comment-author {
        font-size: 1em;
    }

    .comment-content p {
        font-size: 0.95em;
    }
}
/* استایل بنر حالت پیش‌نمایش مقاله */
.preview-mode-banner {
    background-color: #ffc107;
    color: #212529;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #e0a800;
}

/* ========================================================== */
/* --- بخش ۲۴: اصلاحیه نهایی برای رنگ متن ویرایشگر CKEditor (تم روشن) --- */
/* ========================================================== */

/* این کلاس به صورت خودکار توسط CKEditor به بخش قابل ویرایش اضافه می‌شود */
.ck-editor__main .ck-content {
    /* رنگ پس‌زمینه ویرایشگر را به سفید تغییر می‌دهیم تا شبیه صفحه کاغذ شود */
    background: #FFFFFF !important;
    
    /* رنگ متن اصلی را به مشکی خالص تغییر می‌دهیم */
    color: #000000 !important;
}

/* 
   این بخش تضمین می‌کند که تمام عناصر داخل ویرایشگر 
   (پاراگراف‌ها، لیست‌ها، عنوان‌ها و...) هم رنگ صحیح را به خود بگیرند.
   استفاده از !important برای اطمینان از اولویت این استایل‌هاست.
*/
.ck-editor__main .ck-content p,
.ck-editor__main .ck-content li,
.ck-editor__main .ck-content blockquote,
.ck-editor__main .ck-content h1,
.ck-editor__main .ck-content h2,
.ck-editor__main .ck-content h3,
.ck-editor__main .ck-content h4 {
    color: #000000 !important;
}

/* رنگ لینک‌ها را هم برای خوانایی بهتر در پس‌زمینه سفید، آبی می‌کنیم */
.ck-editor__main .ck-content a {
    color: #0000EE !important; /* رنگ آبی استاندارد برای لینک */
}
/* =============================================== */
/* === اصلاحیه چیدمان دکمه‌های اقدامات در جداول پنل === */
/* =============================================== */

/* این دستور اصلی برای چیدمان افقی دکمه‌ها است */
.action-links {
    display: flex;
    justify-content: center; /* دکمه‌ها را در مرکز ستون قرار می‌دهد */
    align-items: center;    /* دکمه‌ها را عمودا در مرکز قرار می‌دهد */
    gap: 15px;              /* فاصله بین دکمه‌ها */
}

/* استایل کلی برای هر دکمه (آیکون) */
.action-btn {
    font-size: 1.2rem; /* کمی بزرگتر کردن آیکون‌ها */
    text-decoration: none;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* رنگ‌بندی دکمه‌ها */
.action-btn.approve, 
.action-btn.edit,
.action-btn.preview {
    color: #28a745; /* سبز */
}

.action-btn.delete {
    color: #dc3545; /* قرمز */
}

/* افکت هاور برای جذابیت بیشتر */
.action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}
/* ========================================================== */
/* === بهبود ظاهر لینک مقالات در جداول پنل مدیریت === */
/* ========================================================== */

/* استایل اصلی برای لینک مقاله در جدول */
.data-table td a {
    color: #d1d5db; /* یک رنگ خاکستری روشن که با تم تیره هماهنگ است */
    text-decoration: none; /* حذف خط زیرین در حالت عادی */
    font-weight: 500;
    display: block; /* لازم برای اعمال ویژگی‌های زیر */
    white-space: nowrap; /* جلوگیری از شکستن خط و چند خطی شدن عنوان‌های طولانی */
    overflow: hidden; /* مخفی کردن بخش اضافی متن */
    text-overflow: ellipsis; /* نمایش '...' برای عنوان‌های خیلی طولانی */
    transition: color 0.2s ease;
}

/* استایل هاور برای لینک مقاله */
.data-table td a:hover {
    color: var(--purple-glow, #a855f7); /* استفاده از متغیر رنگ اصلی تم شما */
    text-decoration: underline; /* نمایش خط زیرین فقط هنگام هاور */
}

/* افزودن یک آیکون کوچک "لینک" برای راهنمایی بصری (اختیاری اما بسیار زیبا) */
.data-table td a::before {
    font-family: "Font Awesome 5 Free"; /* نام دقیق فونت Font Awesome */
    font-weight: 900; /* برای آیکون‌های solid */
    content: "\f0c1"; /* کد یونیکد آیکون fa-link */
    margin-left: 8px; /* فاصله آیکون از متن */
    opacity: 0.6;
}
/* =================================================================== */
/* === کدهای اضافه شده برای ویژگی‌های جدید صفحه اصلی فراگمان === */
/* =================================================================== */

/* --- ۱. بخش انتخاب سردبیر --- */
.editors-pick-section { 
    padding: 2rem 0; 
    position: relative; 
}
.editors-pick-section h2 { 
    font-size: 1.5rem; 
    margin-bottom: 1.5rem; 
    padding-right: 15px; 
    color: #eee; 
}
.editors-pick-section h2 .fa-award { 
    color: #f9a826; 
    margin-left: 10px; 
}
.ep-scroller { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    scroll-padding: 0 15px; 
    padding-bottom: 20px; 
    -webkit-overflow-scrolling: touch; 
}
.ep-scroller::-webkit-scrollbar { 
    height: 6px; 
}
.ep-scroller::-webkit-scrollbar-track { 
    background: #222; 
    border-radius: 10px; 
}
.ep-scroller::-webkit-scrollbar-thumb { 
    background-color: #f9a826; 
    border-radius: 10px; 
}
.ep-card { 
    flex: 0 0 85%; 
    max-width: 320px; 
    margin-left: 15px; 
    scroll-snap-align: start; 
    position: relative; 
    overflow: hidden; 
    border-radius: 12px; 
    background-color: #333; 
    transition: transform 0.3s ease; 
    text-decoration: none; 
}
.ep-card:first-child { 
    margin-right: 15px; 
}
.ep-card:hover { 
    transform: translateY(-5px); 
}
.ep-card img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.4s ease; 
}
.ep-card:hover img { 
    transform: scale(1.05); 
}
.ep-card-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 1rem; 
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); 
}
.ep-card-title { 
    color: #fff; 
    font-size: 1.1rem; 
    margin: 0; 
}

/* --- ۲. نوار دسته‌بندی‌ها --- */
.category-nav-wrapper { 
    padding: 1rem 0; 
    border-bottom: 1px solid #3a3a3a; 
}
.category-nav { 
    display: flex; 
    overflow-x: auto; 
    scrollbar-width: none; /* Firefox */
}
.category-nav::-webkit-scrollbar { 
    display: none; /* Chrome, Safari, and Opera */
}
.category-nav a { 
    flex: 0 0 auto; 
    padding: 10px 20px; 
    margin: 0 5px; 
    text-decoration: none; 
    color: #aaa; 
    font-weight: 500; 
    white-space: nowrap; 
    position: relative; 
    transition: color 0.3s ease; 
}
.category-nav a:hover { 
    color: #fff; 
}
.category-nav a.active { 
    color: #f9a826; 
}
.category-nav a.active::after { 
    content: ''; 
    position: absolute; 
    bottom: -18px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 70%; 
    height: 3px; 
    background-color: #f9a826; 
    border-radius: 2px; 
}

/* --- ۳. دکمه ادامه مقالات --- */
.load-more-container {
    text-align: center;
    padding: 2.5rem 0;
}
#load-more-btn {
    background-color: #f9a826;
    color: #111;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#load-more-btn:hover {
    background-color: #ffc107;
    transform: scale(1.05);
}
#load-more-btn:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
    transform: none;
}

/* --- ۴. بخش داغ‌ترین‌ها و جدیدترین نظرات --- */
.hottest-articles-section, .latest-comments-section {
    padding: 3rem 0;
    border-top: 1px solid #3a3a3a;
    margin-top: 2rem;
}
.hottest-articles-section h2, .latest-comments-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 15px;
    color: #eee;
}
.hottest-articles-section h2 .fa-fire, .latest-comments-section h2 .fa-comments {
    color: #f9a826;
    margin-left: 10px;
}
/* استایل بخش داغ‌ترین‌ها */
.hottest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 15px;
}
.hottest-card {
    background-color: #2c2c2c;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hottest-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}
.hottest-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.hottest-card-title {
    padding: 1rem;
    font-size: 1.1rem;
    margin: 0;
}
/* استایل بخش جدیدترین نظرات */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
}
.comment-card {
    background-color: #2c2c2c;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.comment-body {
    flex-grow: 1;
}
.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.comment-author {
    font-weight: bold;
    color: #f9a826;
}
.comment-article-link {
    font-size: 0.8rem;
    color: #aaa;
    text-decoration: none;
}
.comment-article-link:hover {
    text-decoration: underline;
}
.comment-text {
    color: #ddd;
    margin: 0;
    line-height: 1.6;
}
/* =================================================================== */
/* === کد نهایی با حذف اسکرول دسته‌بندی و اصلاح بخش سردبیر === */
/* =================================================================== */

/* --- بخش ۱: نوار دسته‌بندی‌ها (حالت چند خطی و بدون اسکرول) --- */

/* بازنویسی استایل کانتینر */
.category-nav {
    display: flex;
    justify-content: center; /* دکمه‌ها در مرکز قرار می‌گیرند */
    flex-wrap: wrap;         /* *** دستور کلیدی: آیتم‌ها را به خط بعد می‌برد *** */
    gap: 0.75rem;            /* فاصله بین دکمه‌ها */
    padding: 1rem;
    margin-bottom: 2rem;
    background: none;        /* حذف پس‌زمینه و حاشیه اضافی از کانتینر */
    border: none;
    
    /* حذف تمام کدهای مربوط به اسکرول */
    overflow: visible;
}

/* بازنویسی استایل لینک دسته‌بندی */
.category-nav a {
    color: #ccc;
    text-decoration: none;
    background: rgba(30, 25, 50, 0.6); /* پس‌زمینه شیشه‌ای تیره */
    padding: 0.6rem 1.2rem;
    border-radius: 30px; /* گردی بیشتر */
    border: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* افکت هاور */
.category-nav a:hover {
    background: var(--purple-glow);
    color: var(--dark-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(168, 85, 247, 0.3);
}

/* استایل حالت فعال */
.category-nav a.active {
    background: var(--gold-glow);
    color: var(--dark-bg);
    border-color: var(--gold-glow);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}


/* --- بخش ۲: کوچک کردن «انتخاب سردبیر» برای موبایل (اصلاحیه نهایی) --- */

@media (max-width: 768px) {
  
    /* عنوان بخش را کمی کوچکتر می‌کنیم */
    .editors-pick-section h2 {
        font-size: 1.5rem; 
        margin-bottom: 1rem;
    }

    /* هر کارت در بخش انتخاب سردبیر */
    .ep-card {
        /* عرض هر کارت را محدود می‌کنیم تا خیلی بزرگ نباشد */
        flex: 0 0 280px;
        height: 180px; /* ارتفاع کارت‌ها را هم کم می‌کنیم */
    }

    /* عنوان داخل کارت‌ها را هم متناسب می‌کنیم */
    .ep-card-title {
        font-size: 1rem; /* کاهش اندازه فونت */
        padding: 0.5rem; /* کاهش فاصله داخلی */
    }
}
/* === استایل نوار بالای دسته‌بندی === */
.category-filter-section {
    margin: 2rem auto;
    max-width: 900px;
    padding: 0 1rem;
}

.category-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    border-radius: 8px;
}

.filter-status {
    font-size: 16px;
    color: #333;
}

/* === دکمه باز کردن مدال === */
.open-filter-btn {
    background: none;
    border: none;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.open-filter-btn:hover {
    color: #000;
}

/* === مدال دسته‌بندی === */
.category-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.category-modal-overlay.visible {
    display: flex;
}

/* === محتوای مدال === */
.category-modal-content {
    background: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    animation: fadeIn 0.25s ease;
}

/* === سربرگ مدال === */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-header h3 {
    font-size: 20px;
    color: #333;
}

/* === دکمه بستن مدال === */
.close-modal-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #777;
    cursor: pointer;
}

.close-modal-btn:hover {
    color: #000;
}

/* === بدنه مدال (لیست دسته‌ها) === */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 250px); /* ارتفاع حداکثری برای بدنه لیست. 100vh منهای 250px برای فضای اطراف هدر، فوتر و پدینگ‌های مدال */
    overflow-y: auto; /* فعال کردن اسکرول عمودی در صورت نیاز */
    -webkit-overflow-scrolling: touch; /* اسکرول روان در دستگاه‌های لمسی */
    padding-right: 15px; /* فاصله برای جلوگیری از چسبیدن متن به نوار اسکرول */
}

.modal-body a {
    padding: 10px 15px;
    background-color: #f1f1f1;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

.modal-body a:hover {
    background-color: #e2e2e2;
}

.modal-body a.active {
    background-color: #007BFF;
    color: #fff;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ================================================== */
/* === استایل دکمه‌های عملیاتی در بخش نظرات و پنل === */
/* ================================================== */

/* استایل پایه برای همه دکمه‌های عملیاتی (پاسخ، گزارش، حذف) */
.comment-actions button,
.comment-actions a {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em; /* کمی کوچک‌تر برای هماهنگی */
    margin-left: 8px; /* فاصله از دکمه کناری */
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* برای لینک‌ها */
    display: inline-flex; /* برای تراز کردن آیکون و متن */
    align-items: center;
}

/* جدا کردن آیکون از متن */
.comment-actions button i,
.comment-actions a i {
    margin-left: 6px;
}


/* --- استایل دکمه حذف نظر (قرمز رنگ) --- */
.comment-actions .delete-comment-link {
    background-color: #fff0f1; /* پس‌زمینه قرمز بسیار ملایم */
    border-color: #dc3545;   /* حاشیه قرمز */
    color: #dc3545;          /* متن قرمز */
}

/* هاور (Hover) برای دکمه حذف */
.comment-actions .delete-comment-link:hover {
    background-color: #dc3545; /* پس‌زمینه قرمز پررنگ */
    color: #fff;               /* متن سفید */
}


/* --- استایل دکمه گزارش تخلف (نارنجی رنگ) --- */
.comment-actions .report-comment-btn {
    background-color: #fff8e1;
    border-color: #ff9800;
    color: #ff9800;
}

/* هاور (Hover) برای دکمه گزارش */
.comment-actions .report-comment-btn:hover {
    background-color: #ff9800;
    color: #fff;
}

/* استایل دکمه بعد از گزارش موفق */
.comment-actions .report-comment-btn.reported-successfully {
    background-color: #e8f5e9;
    border-color: #4CAF50;
    color: #4CAF50;
    cursor: not-allowed;
}


/* --- استایل دکمه پاسخ (آبی رنگ) --- */
.comment-actions .reply-button {
    background-color: #e3f2fd;
    border-color: #2196F3;
    color: #2196F3;
}

/* هاور (Hover) برای دکمه پاسخ */
.comment-actions .reply-button:hover {
    background-color: #2196F3;
    color: #fff;
}
/* ================================================== */
/* === استایل دکمه‌های صفحه مدیریت کاربران (ادمین) === */
/* ================================================== */

/* استایل کلی برای همه دکمه‌ها در ستون عملیات */
.admin-table .actions-cell .btn {
    display: inline-flex;       /* استفاده از فلکس برای تراز عالی آیکون و متن */
    align-items: center;        /* تراز عمودی آیتم‌ها در مرکز */
    justify-content: center;    /* تراز افقی آیتم‌ها در مرکز */
    padding: 8px 14px;          /* فاصله داخلی برای بزرگ‌تر شدن دکمه */
    margin-bottom: 5px;         /* فاصله از دکمه پایینی در حالت موبایل */
    border-radius: 5px;         /* گرد کردن گوشه‌ها */
    text-decoration: none;      /* حذف خط زیر لینک */
    font-size: 0.85em;          /* اندازه فونت کمی کوچک‌تر */
    font-weight: bold;          /* ضخیم کردن متن برای خوانایی بهتر */
    color: white;               /* رنگ متن پیش‌فرض سفید */
    border: none;               /* حذف حاشیه */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* انیمیشن نرم برای هاور */
    min-width: 110px;           /* حداقل عرض برای همه دکمه‌ها جهت یکپارچگی */
}

/* جدا کردن آیکون از متن */
.actions-cell .btn i {
    margin-left: 8px;
}

/* استایل دکمه موفقیت (سبز) - برای رفع بن */
.btn.btn-success {
    background-color: #28a745;
}
.btn.btn-success:hover {
    background-color: #218838;
    transform: translateY(-1px); /* کمی حرکت به بالا در زمان هاور */
}


/* استایل دکمه هشدار (نارنجی) - برای بن کردن */
.btn.btn-warning {
    background-color: #ffc107;
    color: #212529; /* رنگ متن تیره برای خوانایی روی پس‌زمینه زرد */
}
.btn.btn-warning:hover {
    background-color: #e0a800;
    transform: translateY(-1px);
}


/* استایل دکمه خطر (قرمز) - برای عزل نویسنده */
.btn.btn-danger {
    background-color: #dc3545;
}
.btn.btn-danger:hover {
    background-color: #c82333;
    transform: translateY(-1px);
}
/* ========================================================== */
/* --- بخش جدید: واکنش‌گرا کردن تصاویر داخل محتوای مقاله --- */
/* ========================================================== */

/* این دستور تمام تگ‌های <img> که داخل عنصری با کلاس .article-content هستند را هدف قرار می‌دهد */
.article-content img {
    /* *** دستور کلیدی *** */
    /* حداکثر عرض تصویر را برابر با 100% عرض والدش قرار می‌دهد. */
    /* این باعث می‌شود تصویر هیچ‌وقت از کانتینر محتوا بیرون نزند. */
    max-width: 100%;

    /* ارتفاع را به صورت خودکار تنظیم می‌کند تا نسبت تصویر حفظ شود و عکس شما کشیده نشود. */
    height: auto;

    /* (اختیاری ولی پیشنهادی) برای زیبایی بیشتر و هماهنگی با طراحی سایت شما */
    display: block;           /* برای حذف فضاهای اضافی زیر تصویر و امکان وسط‌چین کردن */
    margin: 2rem auto;        /* یک فاصله عمودی از بالا و پایین ایجاد کرده و تصویر را در مرکز قرار می‌دهد */
    border-radius: 12px;      /* گوشه‌های تصویر را گرد می‌کند تا با کارت‌های دیگر هماهنگ باشد */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* یک سایه ملایم برای جلوه بهتر */
}
/* Announcement Styles */
.announcements-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: rgba(31, 27, 46, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 16px;
}

.announcements-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    text-align: center;
}

.announcements-title .fa-bullhorn {
    color: #38bdf8;
    margin-left: 0.5rem;
}

.announcements-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.announcement-item {
    background-color: #1f1b2e;
    border-radius: 8px;
    border-left: 4px solid #a855f7;
    overflow: hidden;
}

.announcement-item summary {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: #f0f0f0;
    transition: background-color 0.2s;
}

.announcement-item summary:hover {
    background-color: rgba(168, 85, 247, 0.1);
}

.announcement-item-date {
    color: #888;
    font-size: 0.8rem;
}

.announcement-item-content {
    padding: 0 1rem 1rem 1rem;
    color: #ccc;
    line-height: 1.7;
}
/*
==============================================
  استایل‌های بخش اطلاعیه‌ها (کاربر و ادمین)
==============================================
*/

/* ۱. استایل بخش اطلاعیه‌ها در صفحه پروفایل کاربر */
/************************************************/
.announcements-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: rgba(31, 27, 46, 0.7);
    
    /* دور طلایی زیبا */
    border: 2px solid #DAA520; /* حاشیه طلایی رنگ (goldenrod) */
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.4); /* درخشش نرم طلایی در اطراف کادر */
    
    border-radius: 16px;
}

.announcements-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    text-align: center;
}

.announcements-title .fa-bullhorn {
    color: #facc15; /* رنگ طلایی زرد برای آیکن */
    margin-left: 0.5rem;
    animation: bell-shake 2s cubic-bezier(.36,.07,.19,.97) both infinite;
}

.announcements-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.announcement-item {
    background-color: #1f1b2e;
    border-radius: 8px;
    border-left: 4px solid #a855f7; /* نوار بنفش کنار هر آیتم */
    overflow: hidden;
    transition: all 0.3s ease;
}

.announcement-item[open] {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.announcement-item summary {
    padding: 1rem 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: #f0f0f0;
    transition: background-color 0.2s;
}

.announcement-item summary:hover {
    background-color: rgba(168, 85, 247, 0.1);
}

.announcement-item-date {
    color: #888;
    font-size: 0.8rem;
    white-space: nowrap;
    margin-right: 1rem;
}

.announcement-item-content {
    padding: 0 1.2rem 1.2rem 1.2rem;
    color: #ccc;
    line-height: 1.7;
    border-top: 1px solid rgba(168, 85, 247, 0.1);
    margin-top: 0.5rem;
}


/* ۲. استایل بخش مدیریت اطلاعیه‌ها در پنل ادمین */
/************************************************/
.announcements-list-admin { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.announcement-item-admin { 
    background-color: #2c2c2c; 
    border-radius: 8px; 
    padding: 1rem; 
    border-right: 4px solid #38bdf8; /* نوار آبی برای تمایز با بخش کاربری */
}

.announcement-header-admin { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 0.5rem; 
    color: #fff; 
}

.announcement-item-admin p { 
    color: #ccc; 
    margin: 0; 
    padding-bottom: 1rem;
}

.announcement-footer-admin { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 1rem; 
    padding-top: 0.5rem;
    border-top: 1px solid #444;
    color: #888; 
}


/* انیمیشن برای آیکن زنگوله */
@keyframes bell-shake {
  0% { transform: rotate(0); }
  15% { transform: rotate(5deg); }
  30% { transform: rotate(-5deg); }
  45% { transform: rotate(4deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(2deg); }
  85% { transform: rotate(-2deg); }
  92% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
/*
==============================================
  استایل‌های هدر سایت (نسخه اصلاح شده و کوچک‌تر)
==============================================
*/

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--dark-bg);
    transition: all 0.4s ease-in-out;
    padding: 0 1rem; /* پدینگ چپ و راست */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0; /* ✨ کاهش پدینگ عمودی برای کوچک شدن هدر */
    transition: padding 0.4s ease-in-out;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    font-size: 1.5rem; /* ✨ کمی کوچک کردن آیکن */
    color: var(--sky-blue);
}

.logo-title {
    font-family: 'Lalezar', cursive;
    font-size: 1.5rem; /* ✨ کاهش اندازه فونت لوگو */
    color: #fff;
    margin: 0;
}

/* بخش مربوط به متن تایپ شونده */
.tagline-container {
    text-align: center;
    padding-bottom: 0.5rem; /* ✨ کاهش فاصله پایین */
    height: 30px; /* ارتفاع ثابت برای جلوگیری از پرش */
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.site-tagline {
    font-size: 0.9rem; /* ✨ کاهش اندازه فونت متن تایپی */
    color: #aaa;
}

/* === حالت هدر پس از اسکرول خوردن === */

body.scrolled .header-content {
    padding: 0.25rem 0; /* کوچک‌تر شدن بیشتر پس از اسکرول */
}

body.scrolled .tagline-container {
    height: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
}
/*
=====================================================
  بخش ۲۶: بازطراحی کامل نوار فیلتر دسته‌بندی (طلایی)
=====================================================
*/

/* --- کانتینر اصلی --- */
.category-filter-section {
    margin: 2rem auto;
    max-width: 900px;
    padding: 0 1rem;
}

/* --- نوار اصلی نمایش دسته‌بندی --- */
.category-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* ظاهر شیشه‌ای تیره، هماهنگ با سایت */
    background: var(--component-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* ✨ حاشیه و درخشش طلایی محشر ✨ */
    border: 1px solid var(--gold-glow);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.1);
    
    padding: 12px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.category-filter-bar:hover {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

.filter-status {
    font-size: 1rem;
    color: #e0e0e0; /* رنگ متن روشن */
}
.filter-status strong {
    color: var(--gold-glow); /* رنگ طلایی برای نام دسته فعال */
    font-weight: 700;
}

/* --- دکمه باز کردن مدال --- */
.open-filter-btn {
    background: none;
    border: none;
    color: var(--gold-glow);
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

.open-filter-btn:hover {
    transform: scale(1.2);
    color: #fff;
}

/* --- مدال (پنجره پاپ آپ) --- */
.category-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(13, 11, 20, 0.6); /* پس‌زمینه تیره‌تر */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.category-modal-overlay.visible {
    display: flex;
}

/* --- محتوای مدال --- */
.category-modal-content {
    background: #100d1c; /* پس‌زمینه تیره‌تر برای کنتراست */
    padding: 2rem;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    position: relative;
    
    /* ✨ حاشیه و درخشش طلایی برای مدال ✨ */
    border: 1px solid var(--gold-glow);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    animation: fadeIn-up 0.4s ease-out;
}

/* --- سربرگ مدال --- */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.5rem;
    font-family: 'Lalezar', cursive;
    color: #fff;
}

/* --- دکمه بستن مدال --- */
.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.close-modal-btn:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* --- بدنه مدال (لیست دسته‌ها) --- */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-body a {
    padding: 12px 18px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-decoration: none;
    color: #ccc;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.modal-body a:hover {
    background-color: rgba(168, 85, 247, 0.2); /* افکت بنفش در هاور */
    color: #fff;
    border-color: var(--border-color);
}

.modal-body a.active {
    background-color: var(--gold-glow);
    color: var(--dark-bg);
    font-weight: 700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 12px;
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: background-color 0.3s;
}
.google-login-btn:hover { background-color: #f5f5f5; }
.google-login-btn img { width: 20px; height: 20px; }
.form-separator { display: flex; align-items: center; text-align: center; color: #888; margin-bottom: 1rem; }
.form-separator::before, .form-separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
.form-separator:not(:empty)::before { margin-right: .5em; }
.form-separator:not(:empty)::after { margin-left: .5em; }
/*
=====================================================
  بخش ۲۷: بازطراحی کامل کارت‌های مقاله (نسخه خفن)
=====================================================
*/

/* به کانتینر اصلی یک پرسپکتیو می‌دهیم تا افکت سه بعدی کار کند */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem; /* افزایش فاصله برای زیبایی بیشتر */
    perspective: 1500px;
}

.article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d; /* مهم برای افکت سه بعدی */
}

.article-card {
    /* --- افکت شیشه مات --- */
    background: rgba(31, 27, 46, 0.6); /* پس‌زمینه نیمه شفاف */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    /* --- حاشیه گرادیانی --- */
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
}

/* ساخت حاشیه گرادیانی با یک عنصر مجازی */
.article-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -1px; /* ضخامت حاشیه */
    border-radius: inherit;
    background: linear-gradient(135deg, var(--purple-glow), var(--gold-glow));
    transition: opacity 0.4s ease;
    opacity: 0.5; /* در حالت عادی کم‌رنگ */
}

/* --- افکت‌های هاور --- */
.article-card-link:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.03);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
}

.article-card-link:hover .article-card::before {
    opacity: 1; /* در حالت هاور حاشیه پررنگ می‌شود */
}

.article-card-link:hover .card-image-container img {
    transform: scale(1.1); /* افکت زوم روی تصویر */
}

/* بخش تصویر */
.card-image-container {
    position: relative;
    overflow: hidden; /* برای اینکه تصویر زوم شده بیرون نزند */
}

.article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* بخش محتوا */
.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* باعث می‌شود محتوا همیشه تا پایین کارت کشیده شود */
}

.category-badge {
    align-self: flex-start; /* در ابتدای ردیف قرار بگیرد */
    background: var(--purple-glow);
    color: var(--dark-bg);
    padding: 4px 14px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.article-title-card {
    font-size: 1.4rem;
    color: #fff; /* سفید برای خوانایی بهتر */
    margin-bottom: 0.75rem;
}

.article-excerpt {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* باعث می‌شود خلاصه فضا را پر کرده و دکمه به پایین هل داده شود */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* نمایش حداکثر ۳ خط */
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* دکمه ادامه مطلب */
.card-footer {
    margin-top: auto; /* دکمه را همیشه در پایین کارت نگه می‌دارد */
}

.cta-button {
    color: var(--gold-glow);
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-button i {
    border-top: 2px solid var(--gold-glow);


    transition: transform 0.3s ease;
}

.article-card-link:hover .cta-button i {
    transform: translateX(-5px);
}


/* --- استایل‌های اختصاصی برای دسته‌بندی‌ها --- */
/* (می‌توانید این بخش را گسترش دهید) */

/* برای دسته‌بندی افسانه‌ها (فرض کنیم slug آن 'legends' است) */
.category-legends .article-card::before {
    background: linear-gradient(135deg, #4f46e5, #c77dff);
}
.category-legends .category-badge {
    background-color: #8b5cf6;
    color: #fff;
}

/* برای دسته‌بندی علمی-تخیلی (فرض کنیم slug آن 'sci-fi' است) */
.category-sci-fi .article-card::before {
    background: linear-gradient(135deg, #0ea5e9, #22d3ee);
}
.category-sci-fi .category-badge {
    background-color: #06b6d4;
    color: #fff;
}
/*
=====================================================
  بخش ۲۸: استایل جادویی و متحرک برای عنوان مقالات
=====================================================
*/

.article-title-card {
    /* ۱. تغییر فونت و اندازه */
    font-family: 'Lalezar', cursive;
    font-size: 1.6rem; /* کمی بزرگتر برای جلوه بهتر */
    line-height: 1.4;
    margin-bottom: 0.75rem;

    /* ۲. تکنیک اصلی برای نمایش پس‌زمینه در متن */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* ۳. ایجاد پس‌زمینه چند لایه */
    background-size: 200% 200%; /* اندازه بزرگ برای حرکت نرم */
    background-image: 
        /* لایه اول: ستاره‌های ریز سفید */
        radial-gradient(circle at 10% 20%, white 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, white 1px, transparent 1px),
        radial-gradient(circle at 30% 90%, white 1px, transparent 1px),
        
        /* لایه دوم: موجودات تاریک (افکت سحابی مانند) */
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.5) 5%, transparent 40%),
        radial-gradient(circle at 20% 10%, rgba(10, 5, 20, 0.6) 10%, transparent 50%),

        /* لایه سوم: گرادیانت رنگی اصلی (طلایی به بنفش) */
        linear-gradient(125deg, 
            var(--gold-glow) 0%, 
            #f97316 30%, 
            var(--purple-glow) 70%, 
            #a855f7 100%
        );

    /* ۴. اعمال انیمیشن */
    animation: magical-text-flow 15s ease-in-out infinite;
}

/* تعریف انیمیشن برای حرکت پس‌زمینه‌ها */
@keyframes magical-text-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/*
=====================================================
  بخش ۲۹: بازطراحی کارت مقاله با حاشیه طلایی متحرک
=====================================================
*/

/* به کانتینر اصلی یک پرسپکتیو می‌دهیم تا افکت سه بعدی کار کند */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    perspective: 1500px;
}

.article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.article-card {
    background: rgba(31, 27, 46, 0.7); /* همان رنگ قبلی که دوست داشتید */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid transparent; /* برای سازگاری بهتر */
}

/* --- ساخت حاشیه متحرک --- */
.article-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -2px; /* ضخامت حاشیه را کمی بیشتر می‌کنیم */
    border-radius: inherit; /* گردی گوشه‌ها را از والد به ارث می‌برد */
    
    /* گرادیانت بزرگ با رنگ‌های طلایی و بنفش */
    background: linear-gradient(115deg, var(--gold-glow), #f97316, var(--purple-glow), #a855f7);
    background-size: 400% 400%; /* اندازه بزرگ برای حرکت نرم */

    /* انیمیشن برای حرکت گرادیانت */
    animation: animated-border-flow 8s ease-in-out infinite;
}

/* انیمیشن حرکت حاشیه */
@keyframes animated-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- افکت‌های هاور --- */
.article-card-link:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
}

.article-card-link:hover .card-image-container img {
    transform: scale(1.1);
}

/* بخش تصویر */
.card-image-container {
    position: relative;
    overflow: hidden;
}

.article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* بخش محتوا */
.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- بازگرداندن استایل ساده و خوانا برای عنوان --- */
.article-title-card {
    font-family: 'Lalezar', cursive;
    font-size: 1.5rem;
    color: var(--gold-glow); /* رنگ طلایی ثابت */
    margin-bottom: 0.75rem;
    /* حذف تمام کدهای انیمیشن و پس‌زمینه از عنوان */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    animation: none;
}

.article-excerpt {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.card-footer {
    margin-top: auto;
}

.cta-button {
    color: var(--gold-glow);
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-button i {
    transition: transform 0.3s ease;
}

.article-card-link:hover .cta-button i {
    transform: translateX(-5px);
}
/*
=====================================================
  بخش ۳۰: بازگرداندن افکت عنوان متحرک (فقط طلایی)
=====================================================
*/

.article-title-card {
    /* ۱. فونت و اندازه (مانند قبل) */
    font-family: 'Lalezar', cursive;
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;

    /* ۲. تکنیک اصلی برای نمایش پس‌زمینه در متن */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* ۳. گرادیانت جدید فقط با طیف‌های رنگ طلایی */
    background-image: linear-gradient(115deg, 
            #ffd700, /* طلایی استاندارد */
            #fde047, /* زرد طلایی روشن */
            #eab308, /* طلایی تیره‌تر */
            #ffd700  /* بازگشت به طلایی استاندارد */
        );
    background-size: 300% 300%; /* اندازه بزرگ برای حرکت نرم */

    /* ۴. اعمال انیمیشن */
    animation: magical-text-flow 10s ease-in-out infinite;
}

/* این انیمیشن حرکت پس‌زمینه را کنترل می‌کند. 
  اگر از مرحله قبل این کد را دارید، نیازی به افزودن دوباره آن نیست.
*/
@keyframes magical-text-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/*
=====================================================
  بخش ۳۱: استایل دکمه زیبای تلگرام در صفحه مقاله
=====================================================
*/
.telegram-share-container {
    text-align: center;
    margin-bottom: 2.5rem; /* فاصله از محتوای اصلی مقاله */
}

.telegram-share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 24px;
    border-radius: 50px; /* گردی کامل برای ظاهر مدرن */
    text-decoration: none;
    font-weight: bold;
    color: #fff;

    /* گرادیانت زیبا هماهنگ با تم سایت و رنگ تلگرام */
    background: linear-gradient(135deg, #a855f7, #3b82f6);

    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);

    /* انیمیشن نرم برای تمام تغییرات */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.telegram-share-button i {
    font-size: 1.5rem; /* اندازه آیکن */
    transition: transform 0.3s ease;
}

/* افکت هاور */
.telegram-share-button:hover {
    transform: translateY(-4px) scale(1.05); /* کمی بالا می‌رود و بزرگ می‌شود */
    box-shadow: 0 12px 25px rgba(168, 85, 247, 0.4); /* درخشش بنفش */
}

.telegram-share-button:hover i {
    transform: rotate(-15deg); /* آیکن کمی می‌چرخد */
}
/*
=====================================================
  بخش ۳۲: بازطراحی هدر صفحه مقاله
=====================================================
*/
.article-header-new {
    display: flex;
    flex-direction: column; /* در موبایل به صورت ستونی */
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

/* ستون اصلی (عنوان و اطلاعات) */
.article-main-info {
    flex-grow: 1;
}

.category-badge-article {
    display: inline-block;
    background: var(--purple-glow);
    color: var(--dark-bg);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-decoration: none;
}

.article-title {
    font-size: 2.8rem; /* کمی کوچکتر و مناسب‌تر */
}

/* بخش اطلاعات جمع‌وجور مقاله */
.article-meta-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    color: #ccc;
    font-size: 0.9rem;
}

.author-info, .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.author-avatar-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.meta-separator {
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
}

.meta-item i {
    color: var(--purple-glow);
}

/* ستون دکمه تلگرام */
.article-share-box {
    background: var(--component-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.article-share-box p {
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
}

.telegram-share-button-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    background: #2AABEE; /* رنگ رسمی تلگرام */
    transition: all 0.2s ease-in-out;
}

.telegram-share-button-new:hover {
    background: #1e9de0;
    transform: scale(1.05);
}

/* در صفحه‌های بزرگتر (دسکتاپ) کنار هم قرار می‌گیرند */
@media (min-width: 768px) {
    .article-header-new {
        flex-direction: row; /* در دسکتاپ به صورت ردیفی */
        align-items: center;
    }
    .article-share-box {
        width: 250px;
    }
}
/*
=====================================================
  بخش ۳۲: بازطراحی هدر صفحه مقاله (نسخه نهایی واکنش‌گرا)
=====================================================
*/
.article-header-new {
    display: flex;
    flex-direction: column; /* حالت پیش‌فرض برای موبایل */
    justify-content: space-between;
    gap: 1.5rem; /* کاهش فاصله در موبایل */
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* ستون اصلی (عنوان و اطلاعات) */
.article-main-info {
    flex-grow: 1;
    text-align: center; /* در موبایل همه چیز وسط‌چین باشد */
}

.category-badge-article {
    display: inline-block;
    background: var(--purple-glow);
    color: var(--dark-bg);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-decoration: none;
}

.article-title {
    font-size: 2rem; /* کاهش اندازه فونت برای موبایل */
    line-height: 1.4;
}

/* بخش اطلاعات جمع‌وجور مقاله */
.article-meta-compact {
    display: flex;
    align-items: center;
    justify-content: center; /* در موبایل وسط‌چین باشد */
    flex-wrap: wrap;
    gap: 0.8rem 1rem; /* کاهش فاصله‌ها */
    margin-top: 1.5rem;
    color: #ccc;
    font-size: 0.85rem; /* کاهش اندازه فونت متا */
}

.author-info, .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.author-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.meta-separator {
    display: none; /* در موبایل جداکننده‌ها را مخفی می‌کنیم */
}

.meta-item i {
    color: var(--purple-glow);
}

/* ستون دکمه تلگرام */
.article-share-box {
    background: var(--component-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem; /* کاهش پدینگ در موبایل */
    text-align: center;
    flex-shrink: 0;
}

.article-share-box p {
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
    font-size: 0.9rem; /* کاهش اندازه فونت */
}

.telegram-share-button-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    background: #2AABEE; /* رنگ رسمی تلگرام */
    transition: all 0.2s ease-in-out;
}

.telegram-share-button-new:hover {
    background: #1e9de0;
    transform: scale(1.05);
}

/* ============== حالت دسکتاپ ============== */
/* در صفحه‌های بزرگتر (۷۶۸ پیکسل به بالا) کنار هم قرار می‌گیرند */
@media (min-width: 768px) {
    .article-header-new {
        flex-direction: row; /* در دسکتاپ به صورت ردیفی */
        align-items: center;
        gap: 2rem;
    }

    .article-main-info {
        text-align: right; /* در دسکتاپ راست‌چین باشد */
    }

    .article-title {
        font-size: 2.8rem; /* بازگرداندن اندازه فونت بزرگ برای دسکتاپ */
    }

    .article-meta-compact {
        justify-content: flex-start; /* در دسکتاپ راست‌چین باشد */
        font-size: 0.9rem;
    }

    .meta-separator {
        display: block; /* نمایش مجدد جداکننده‌ها در دسکتاپ */
        width: 1px;
        height: 16px;
        background-color: var(--border-color);
    }
    
    .article-share-box {
        width: 250px;
        padding: 1.5rem;
    }

    .article-share-box p {
        font-size: 1rem;
    }
}
/*
=====================================================
  بخش ۳۴: استایل بخش بریده کتاب و فوتر کپی‌رایت
=====================================================
*/

/* --- بخش بریده‌ای از کتاب --- */
.quote-section {
    position: relative;
    padding: 5rem 2rem;
    margin: 3rem 1rem;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* افکت پارالاکس */
    overflow: hidden;
    text-align: center;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.quote-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 11, 20, 0.85), rgba(31, 27, 46, 0.85));
    z-index: 1;
}

.quote-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.quote-icon {
    font-size: 4rem;
    font-family: serif;
    color: var(--gold-glow);
    opacity: 0.5;
    line-height: 1;
}

.quote-text {
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
    line-height: 1.6;
    margin: 1rem 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.quote-source {
    display: block;
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 3rem;
}

.quote-admin-profile {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0,0,0,0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
}

.admin-avatar-gold-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
}
/* ساخت دور طلایی متحرک برای آواتار */
.admin-avatar-gold-wrapper::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--gold-glow), var(--purple-glow));
    animation: animated-border-flow 4s ease-in-out infinite;
    background-size: 200% 200%;
}

.admin-avatar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.admin-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
}
.admin-info span {
    font-size: 0.8rem;
    color: #aaa;
}
.admin-info strong {
    font-size: 1rem;
    color: #fff;
    font-weight: bold;
}

/* --- بخش فوتر کپی‌رایت --- */
.site-copyright-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
    color: #888;
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
}
/*
=====================================================
  بخش ۳۵: بهینه‌سازی بخش بریده کتاب برای موبایل
=====================================================
*/

/* این کد فقط زمانی اجرا می‌شود که عرض صفحه ۷۶۸ پیکسل یا کمتر باشد */
/* این کد فقط زمانی اجرا می‌شود که عرض صفحه ۷۶۸ پیکسل یا کمتر باشد */
@media (max-width: 768px) {

    .quote-section {
        /* کاهش فاصله‌های داخلی و خارجی */
        padding: 3rem 1.5rem;
        margin: 2rem 0.5rem;
        
        /* 🚀 سبک‌سازی شدید برای موبایل */
        background-attachment: scroll !important;
        box-shadow: none !important;
    }

    .quote-overlay {
        background: rgba(13, 11, 20, 0.9) !important; /* حذف گرادیانت سنگین */
    }

    .quote-icon {
        /* کوچک کردن آیکون نقل قول */
        font-size: 3rem;
    }

    .quote-text {
        /* کاهش اندازه فونت متن اصلی */
        font-size: 1.5rem;
    }

    .quote-source {
        /* کاهش اندازه فونت منبع */
        font-size: 1rem;
        margin-bottom: 2rem; /* کاهش فاصله از بخش ادمین */
    }

    .quote-admin-profile {
        /* کاهش پدینگ داخلی برای جمع‌وجور شدن */
        padding: 0.5rem 1rem;
    }

    .admin-avatar-gold-wrapper {
        width: 40px;
        height: 40px;
    }
}
/*
=====================================================
  بخش ۳۶: بهینه‌سازی کامل پنل مدیریت برای موبایل
=====================================================
*/

/* این کد فقط زمانی اجرا می‌شود که عرض صفحه ۷۶۸ پیکسل یا کمتر باشد */
@media (max-width: 768px) {

    /* --- ۱. اصلاح ساختار کلی پنل --- */
    
    /* در موبایل، سایدبار و محتوا زیر هم قرار نمی‌گیرند، 
       بلکه محتوا کل عرض را می‌گیرد */
    .admin-content {
        padding: 1rem; /* کاهش پدینگ داخلی محتوا */
    }

    /* هدر بالای هر بخش (مثل "مدیریت مقالات") را بهینه می‌کنیم */
    .page-header {
        flex-direction: column; /* آیتم‌ها زیر هم قرار بگیرند */
        align-items: flex-start; /* آیتم‌ها از چپ تراز شوند */
        gap: 1rem; /* فاصله بین عنوان و دکمه */
    }
    
    .page-header h3 {
        font-size: 1.5rem; /* کوچک کردن فونت عنوان */
    }

    /* --- ۲. تکنیک اصلی: تبدیل جدول به لیست کارتی --- */

    /* کل جدول را برای چیدمان جدید آماده می‌کنیم */
    .data-table {
        border: none;
        box-shadow: none;
    }

    /* سربرگ جدول (thead) را در موبایل مخفی می‌کنیم */
    .data-table thead {
        display: none;
    }

    /* هر ردیف (tr) را به یک کارت تبدیل می‌کنیم */
    .data-table tr {
        display: block; /* باعث می‌شود ردیف‌ها زیر هم بیفتند */
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    .data-table td {
        display: block; /* سلول‌ها هم زیر هم قرار می‌گیرند */
        text-align: left; /* متن را به چپ منتقل می‌کنیم */
        position: relative;
        padding-left: 50%; /* فضا برای لیبل در سمت راست ایجاد می‌کنیم */
        border-bottom: 1px dotted var(--border-color);
    }

    .data-table tr td:last-child {
        border-bottom: none; /* خط زیرین آخرین آیتم هر کارت را حذف می‌کنیم */
    }

    /* جادوی اصلی اینجاست: ساخت لیبل از روی data-label */
    .data-table td::before {
        content: attr(data-label); /* محتوای data-label را به عنوان لیبل نمایش بده */
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        width: 45%;
        padding-left: 1rem;
        text-align: right;
        font-weight: bold;
        color: #fff; /* رنگ لیبل را سفید می‌کنیم */
    }
    
    /* استایل خاص برای ستون اقدامات */
    .data-table .action-links {
        padding-left: 1rem; /* در ستون اقدامات، پدینگ چپ را کم می‌کنیم */
        text-align: center; /* دکمه‌ها در مرکز قرار بگیرند */
    }
    .data-table .action-links::before {
        display: none; /* لیبل "اقدامات" را نمایش نمی‌دهیم */
    }
}
/*
=====================================================
  بخش کارت مقالات (نسخه نهایی و یکپارچه)
=====================================================
*/

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    perspective: 1500px;
}

.article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.article-card {
    background: rgba(31, 27, 46, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid transparent;
}

.article-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(115deg, var(--gold-glow), #f97316, var(--purple-glow), #a855f7);
    background-size: 400% 400%;
    animation: animated-border-flow 8s ease-in-out infinite;
}

.article-card-link:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
}

.article-card-link:hover .card-image-container img {
    transform: scale(1.1);
}

.card-image-container {
    position: relative;
    overflow: hidden;
    height: 200px; /* ارتفاع ثابت برای تصویر */
    flex-shrink: 0;
}

.article-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✨ این ویژگی از کشیده شدن تصویر جلوگیری می‌کند */
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-title-card {
    font-family: 'Lalezar', cursive;
    font-size: 1.5rem;
    color: var(--gold-glow);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.article-excerpt {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.card-footer {
    margin-top: auto;
}
/*
=====================================================
  بخش ۳۹: بهینه‌سازی کارت‌های مقاله برای موبایل
=====================================================
*/

/* این کد فقط زمانی اجرا می‌شود که عرض صفحه ۷۶۸ پیکسل یا کمتر باشد */
@media (max-width: 768px) {

    /* فاصله بین کارت‌ها را کمتر می‌کنیم */
    .articles-grid {
        gap: 1.5rem;
    }

    /* عنوان متحرک را کمی کوچکتر و خواناتر می‌کنیم */
    .article-title-card {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    /* برچسب سفارشی را فشرده‌تر می‌کنیم */
    .custom-post-tag {
        font-size: 0.75rem;
        padding: 4px 12px;
        top: 0.75rem;
        right: 0.75rem;
    }

    /* خلاصه متن را کمی کوچکتر می‌کنیم */
    .article-excerpt {
        font-size: 0.85rem;
    }

    /* پدینگ داخلی کارت را کمتر می‌کنیم */
    .card-content {
        padding: 1rem;
    }

    /* افکت هاور سه بعدی را در موبایل ساده‌تر می‌کنیم (چون هاور وجود ندارد) */
    .article-card-link:hover {
        transform: translateY(-5px); /* فقط کمی حرکت به بالا */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    }
}
/*
=====================================================
  بخش ۳۷: استایل تگ سفارشی روی کارت مقاله
=====================================================
*/
.custom-post-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2; /* برای اطمینان از اینکه روی تصویر قرار می‌گیرد */
    
    background: linear-gradient(135deg, var(--gold-glow), #f9a826);
    color: var(--dark-bg);
    
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* برای حالتی که متن طولانی باشد */
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
=====================================================
  بخش ۴۰: استایل حالت نوشتن تمام‌صفحه
=====================================================
*/

/* استایل بدنه اصلی پنل در حالت تمام‌صفحه */
#admin-panel-container.distraction-free-mode .admin-sidebar,
#admin-panel-container.distraction-free-mode .page-header,
#admin-panel-container.distraction-free-mode .panel-button[type="submit"],
#admin-panel-container.distraction-free-mode .input-group:not(.editor-container) {
    display: none; /* تمام عناصر اضافی را مخفی کن */
}

/* استایل کانتینر ویرایشگر در حالت تمام‌صفحه */
#admin-panel-container.distraction-free-mode .editor-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--dark-bg);
    padding: 2rem;
    margin: 0;
    border: none;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#admin-panel-container.distraction-free-mode .editor-container .ck-editor {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

#admin-panel-container.distraction-free-mode .editor-container .ck-editor__main {
    flex-grow: 1;
}

/* دکمه خروج از حالت تمام‌صفحه */
#exit-fullscreen-btn {
    display: none; /* در حالت عادی مخفی است */
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    background-color: #fff;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

#admin-panel-container.distraction-free-mode #exit-fullscreen-btn {
    display: block; /* در حالت تمام‌صفحه نمایش داده می‌شود */
}
/* ========================================= */
/* استایل‌های مودال رد مقاله و اطلاعیه‌ها    */
/* ========================================= */

/* پس‌زمینه تیره مودال */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 15px;
}

/* محتوای مودال */
.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 500px;
    position: relative;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* دکمه بستن مودال */
.modal-close {
    position: absolute;
    top: 10px;
    left: 15px; /* برای راست‌چین */
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #333;
}

.modal-content h3 {
    margin-top: 0;
    color: #c0392b; /* رنگ قرمز تیره */
}

.modal-content textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit; /* ارث‌بری فونت */
    margin-top: 10px;
    margin-bottom: 15px;
}

/* استایل برای ردیف دلیل رد شدن */
.rejection-row td {
    padding: 0 !important;
    border: none !important;
}

.rejection-notice {
    background-color: #fff3cd; /* زرد روشن */
    color: #856404; /* قهوه‌ای */
    border: 1px solid #ffeeba;
    border-right: 5px solid #ffc107; /* نوار زرد رنگ در سمت راست */
    padding: 15px;
    margin: 5px 0;
    border-radius: 4px;
}

.rejection-notice strong {
    display: block;
    margin-bottom: 5px;
}
.rejection-notice p {
    margin: 0;
    white-space: pre-wrap; /* حفظ فاصله‌ها و خطوط جدید */
}

/* استایل برای وضعیت رد شده */
.status-badge.status-rejected {
    background-color: #e74c3c; /* قرمز */
    color: white;
}
/* ========================================= */
/* استایل ویجت اطلاع‌رسانی داشبورد        */
/* ========================================= */

.notifications-widget {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    margin-bottom: 30px;
    overflow: hidden; /* برای اینکه border-radius درست اعمال شود */
}

.notifications-widget .widget-title {
    margin: 0;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 18px;
    font-weight: 600;
    color: #343a40;
}

.notifications-widget .widget-title .fa-bell {
    margin-left: 10px;
    color: #007bff;
}

.notification-list-widget {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-list-widget li {
    border-bottom: 1px solid #f0f0f0;
}
.notification-list-widget li:last-child {
    border-bottom: none;
}

.notification-list-widget li a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.notification-list-widget li a:hover {
    background-color: #f8f9fa;
}

/* استایل برای نوتیفیکیشن‌های خوانده نشده */
.notification-list-widget li.unread {
    background-color: #eaf5ff;
    border-left: 4px solid #007bff;
}

.notification-list-widget .notif-icon {
    font-size: 20px;
    color: #007bff;
    margin-left: 15px;
}
.notification-list-widget li.read .notif-icon {
    color: #6c757d;
}

.notification-list-widget .notif-content p {
    margin: 0;
    font-size: 14px;
    color: #212529;
    line-height: 1.5;
}
.notification-list-widget .notif-content small {
    font-size: 12px;
    color: #6c757d;
}

.notification-list-widget .empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #6c757d;
}
.notification-list-widget .empty-state .fa-check-circle {
    margin-left: 8px;
    color: #28a745;
}

.notifications-widget .widget-footer {
    text-align: center;
    padding: 12px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}
.notifications-widget .widget-footer a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.follow-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.follow-btn.follow {
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
}
.follow-btn.follow:hover {
    background-color: #0056b3;
}

.follow-btn.unfollow {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}
.follow-btn.unfollow:hover {
    background-color: #e0e0e0;
} 
/* استایل پایه کارت پروفایل عمومی */
.profile-card {
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border-left: 10px solid #6c757d; /* رنگ پیش‌فرض برای نوآموز */
}
.profile-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* استایل بر اساس رتبه (این بخش جادویی است!) */
.profile-card.rank-کاتب { border-left-color: #3498db; }
.profile-card.rank-وقایع‌نگار { border-left-color: #9b59b6; }
.profile-card.rank-استاد-قصه { border-left-color: #f39c12; }
.profile-card.rank-افسانه {
    border-left-color: transparent;
    border-image: linear-gradient(180deg, #f1c40f, #e74c3c) 1 10;
    box-shadow: 0 8px 30px rgba(241, 196, 15, 0.2);
}

.author-rank-badge {
    color: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    background-color: #6c757d; /* رنگ پیش‌فرض */
}

/* رنگ بج بر اساس رتبه */
.rank-کاتب .author-rank-badge { background-color: #3498db; }
.rank-وقایع‌نگار .author-rank-badge { background-color: #9b59b6; }
.rank-استاد-قصه .author-rank-badge { background-color: #f39c12; }
.rank-افسانه .author-rank-badge { background: linear-gradient(45deg, #f1c40f, #e74c3c); }
/* ===================================================== */
/* --- بخش 41: استایل جدید باکس نویسنده در مقاله --- */
/* ===================================================== */

/* --- متغیرهای رنگ برای رتبه‌ها --- */
.author-box-article.novice { --author-color: #3b82f6; } /* نوآموز */
.author-box-article.scribe { --author-color: #f59e0b; } /* کاتب */
.author-box-article.chronicler { --author-color: #8b5cf6; } /* وقایع‌نگار */
.author-box-article.master { --author-color: #10b981; } /* استاد قصه */
.author-box-article.legend { --author-color: #ef4444; } /* افسانه */

/* --- باکس اصلی --- */
.author-box-article {
  background: #1a1f2b;
  border-radius: 12px;
  padding: 12px;
  display: inline-flex; /* برای اینکه عرض آن به اندازه محتوا باشد */
  align-items: center;
  gap: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all .4s ease;
  min-width: 250px;
}

/* --- افکت درخشش پشت کارت (فقط برای نویسندگان با رتبه) --- */
.author-box-article[class*="rank-"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: conic-gradient(from 0deg, var(--author-color) 0%, transparent 40%, var(--author-color) 100%);
  filter: blur(8px);
  opacity: 0.5;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- آواتار --- */
.author-box-article .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.author-box-article .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* --- افکت درخشش آواتار (فقط برای نویسندگان با رتبه) --- */
.author-box-article[class*="rank-"] .avatar::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--author-color), transparent 60%);
  animation: pulse 2.5s infinite;
  opacity: 0.7;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 0.3; }
}

/* --- اطلاعات: نام و رتبه --- */
.author-box-article .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
  text-align: right;
}

.author-box-article .name {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}

/* لینک نام نویسنده */
.author-box-article .name-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}
.author-box-article .name-link:hover .name {
    color: var(--author-color, #fff); /* Fallback to white if no rank */
}

/* --- لقب --- */
.author-box-article .rank {
  font-size: 0.8rem;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--author-color);
  border: 1px solid var(--author-color);
  align-self: flex-start; /* باعث می‌شود عرض آن به اندازه متن باشد */
  text-shadow: 0 0 5px var(--author-color);
}

/* --- بهینه‌سازی برای موبایل --- */
@media (max-width: 480px) {
    .author-box-article {
        padding: 10px;
        gap: 12px;
        min-width: 0;
        width: 100%;
    }
    .author-box-article .avatar {
        width: 45px;
        height: 45px;
    }
    .author-box-article .name {
        font-size: 0.95rem;
    }
    .author-box-article .rank {
        font-size: 0.75rem;
    }
}
/* ===================================================== */
/* --- استایل جدید و طلایی برای نکات کلیدی مقاله --- */
/* ===================================================== */

.article-key-points {
    list-style: none;
    padding: 1rem; /* فاصله داخلی برای نمایش بهتر کادر */
    margin-top: 1rem;
    font-size: 0.85rem;
    border: 1px solid var(--gold-glow); /* کادر طلایی ظریف */
    border-radius: 8px; /* گرد کردن گوشه‌های کادر */
    background: rgba(255, 215, 0, 0.05); /* پس‌زمینه با تم طلایی بسیار کم‌رنگ */
}

.article-key-points li {
    position: relative;
    padding-right: 20px;
    margin-bottom: 8px;
    color: #f0f0f0; /* رنگ سفید برای متن */
    font-weight: 600; /* ضخیم‌تر کردن متن */
    line-height: 1.5;
}

/* آخرین آیتم فاصله پایین ندارد */
.article-key-points li:last-child {
    margin-bottom: 0;
}

.article-key-points li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background-color: var(--gold-glow); /* نقطه طلایی */
    border-radius: 50%;
    box-shadow: 0 0 6px var(--gold-glow); /* درخشش طلایی */
}
/* ================================= */
/* فوتر جدید و خفن برای فراگمان */
/* ================================= */
.site-footer {
    background: rgba(10, 5, 20, 0.95);
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    padding: 1.5rem 1rem;
    text-align: center;
    font-family: 'Vazir', Tahoma, sans-serif;
    direction: rtl;
    position: relative;
    z-index: 100;
}

.site-footer .social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.site-footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.15);
    color: #c77dff;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.site-footer .social-icon:hover {
    background: rgba(168, 85, 247, 0.3);
    transform: translateY(-3px);
    color: #ffd7e0;
    box-shadow: 0 5px 15px rgba(199, 125, 255, 0.3);
}

.site-footer .copyright {
    color: #a78bfa;
    font-size: 0.9rem;
}

/* دکمه بازگشت به بالا */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(168, 85, 247, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffd7e0;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-5px);
}

/* واکنش‌گرا برای موبایل */
@media (max-width: 768px) {
    .site-footer {
        padding: 1.2rem 0.8rem;
    }
    
    .site-footer .social-icon {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
    
    .site-footer .copyright {
        font-size: 0.8rem;
    }
    
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
    }
}
/* =============================================== */
/* --- بخش جدید: استایل کارت فشرده نویسنده --- */
/* =============================================== */

.author-compact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: rgba(31, 27, 46, 0.85);
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    max-width: 280px;
    margin: 2rem auto; /* فاصله از بالا و پایین صفحه */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.author-compact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(168, 85, 247, 0.4);
}

/* لوگوی نویسنده */
.author-compact-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.author-avatar-frame {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #c77dff);
    padding: 3px;
    display: flex;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.author-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(20, 16, 32, 0.9);
}

/* نام نویسنده */
.author-name {
    font-family: 'Vazir', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffd7e0;
    margin-bottom: 1rem; /* افزایش فاصله از دکمه */
    text-align: center;
    text-shadow: 0 0 8px rgba(199, 125, 255, 0.4);
}

/* دکمه فالو جمع و جور */
.follow-btn-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Vazir', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
    width: 100%;
    max-width: 180px;
}

.follow-btn-compact.follow {
    background: linear-gradient(135deg, #a855f7, #c77dff);
    color: white;
}
.follow-btn-compact.follow:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
    background: linear-gradient(135deg, #c77dff, #a855f7);
}

.follow-btn-compact.unfollow {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.follow-btn-compact.unfollow:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


.follow-btn-compact i {
    font-size: 1.1em;
}

/* بخش مقالات نویسنده */
.author-articles-section {
    margin-top: 1.5rem;
    width: 100%;
}

.author-articles-title {
    font-family: 'Lalezar', cursive;
    font-size: 1.2rem;
    color: #ffd7e0;
    border-bottom: 1px solid rgba(168, 85, 247, 0.3);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* لیست مقالات */
.article-list-placeholder {
    text-align: center;
    color: #aaa;
    font-size: 0.9rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-style: italic;
}

/* نسخه موبایل */
@media (max-width: 768px) {
    .author-compact-card {
        padding: 1.2rem;
        max-width: 90%; /* کمی از کناره‌ها فاصله بگیرد */
    }
    
    .author-compact-avatar {
        width: 70px;
        height: 70px;
    }
    
    .author-name {
        font-size: 1.3rem;
    }
    
    .follow-btn-compact {
        padding: 9px 18px;
        font-size: 0.9rem;
    }
}
/* ===================================================== */
/* --- بخش جدید: استایل پروفایل عمومی نویسنده (کامل) --- */
/* ===================================================== */

/* کانتینر اصلی صفحه */
.author-profile-page {
    max-width: 800px;
    margin: 2rem auto;
}

/* بخش آمار نویسنده */
.author-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    width: 100%;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    min-width: 100px;
}

.stat-item .stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

.stat-item .stat-label {
    font-size: 0.8rem;
    color: #aaa;
}

.stat-item .author-rank-badge-small {
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    background-color: var(--gold-glow);
    color: var(--dark-bg);
}


/* بخش لیست مقالات نویسنده */
.author-articles-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.author-article-item {
    display: flex;
    gap: 1rem;
    background: rgba(31, 27, 46, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    padding: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.author-article-item:hover {
    transform: translateX(5px);
    border-color: rgba(168, 85, 247, 0.5);
}

.author-article-thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.author-article-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-article-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.author-article-meta {
    font-size: 0.8rem;
    color: #aaa;
}
/* ===================================================== */
/* --- استایل دکمه شناور جستجو --- */
/* ===================================================== */
.floating-search-btn {
    position: fixed;
    /* موقعیت دکمه در گوشه پایین چپ */
    bottom: 85px; /* بالاتر از نوار تب پایین */
    left: 20px;
    z-index: 999; /* برای اینکه روی محتوا باشد */
    
    /* اندازه و شکل */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* استایل سه‌بعدی */
    border: none;
    background: linear-gradient(145deg, #b362ff, #8c52ff);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* سایه برای ایجاد حس عمق و سه‌بعدی */
    box-shadow: 
        0px 8px 15px rgba(0, 0, 0, 0.4),
        inset 0px 2px 2px rgba(255, 255, 255, 0.2),
        inset 0px -2px 2px rgba(0, 0, 0, 0.3);
        
    /* انیمیشن نرم */
    transition: all 0.2s ease-in-out;
}

/* افکت هاور: دکمه کمی بالا می‌آید */
.floating-search-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0px 12px 20px rgba(0, 0, 0, 0.5),
        inset 0px 2px 2px rgba(255, 255, 255, 0.2),
        inset 0px -2px 2px rgba(0, 0, 0, 0.3);
}

/* افکت کلیک: دکمه به داخل فشرده می‌شود */
.floating-search-btn:active {
    transform: translateY(1px);
    box-shadow: 
        0px 4px 8px rgba(0, 0, 0, 0.4),
        inset 0px 2px 3px rgba(0, 0, 0, 0.4);
}
/* ===================================================== */
/* --- استایل نتایج جستجو در پنجره تمام‌صفحه --- */
/* ===================================================== */

/* استایل متنی که قبل از جستجو نمایش داده می‌شود */
.search-results-placeholder {
    color: #888;
    font-size: 1rem;
    margin-top: 2rem;
}

/* کانتینر اصلی لیست نتایج */
.search-results-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    max-height: 50vh; /* محدود کردن ارتفاع برای اسکرول خوردن */
    overflow-y: auto; /* فعال کردن اسکرول در صورت زیاد بودن نتایج */
    text-align: right;
}

/* هر آیتم در لیست نتایج */
.search-result-item a {
    display: block;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* افکت هاور برای هر نتیجه */
.search-result-item a:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--border-color);
    transform: translateX(5px);
}

/* عنوان مقاله در نتایج */
.search-result-item .result-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

/* اطلاعات اضافی (مثل دسته‌بندی) در نتایج */
.search-result-item .result-meta {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
}
/* ===================================================== */
/* --- استایل بخش جستجوی تمام‌صفحه --- */
/* ===================================================== */

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(13, 11, 20, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.search-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.close-search-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
}

.search-content {
    width: 90%;
    max-width: 700px;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.4s ease;
}

.search-overlay.visible .search-content {
    transform: scale(1);
}

.search-form {
    position: relative;
    margin-bottom: 2rem;
}

.search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    padding: 1rem 1.5rem;
    font-size: 1.8rem;
    color: #fff;
    font-family: 'Vazir', sans-serif;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input:focus {
    border-bottom-color: var(--gold-glow);
}

.search-submit-btn {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.5rem;
    cursor: pointer;
}

/* ===================================================== */
/* --- استایل نتایج جستجو در پنجره تمام‌صفحه --- */
/* ===================================================== */

.search-results-placeholder {
    color: #888;
    font-size: 1rem;
    margin-top: 2rem;
}

.search-results-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    max-height: 50vh;
    overflow-y: auto;
    text-align: right;
}

.search-result-item a {
    display: block;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.search-result-item a:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--border-color);
    transform: translateX(5px);
}

.search-result-item .result-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.search-result-item .result-meta {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
}
/* ===================================================== */
/* --- استایل بخش مقالات مشابه --- */
/* ===================================================== */

.related-articles-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(31, 27, 46, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    position: relative;
    border: 2px solid transparent;
    /* ایجاد حاشیه طلایی-زرشکی با گرادیانت */
    background-clip: padding-box;
    border-image: linear-gradient(135deg, #ffd700, #c0392b, #8e44ad) 1;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
}

.related-articles-section .section-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.related-articles-section .header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.related-articles-section h2 {
    font-family: 'Lalezar', cursive;
    font-size: 1.8rem;
    color: #fff;
    margin: 0;
    border: none;
}

.related-articles-section .header-icons {
    display: flex;
    gap: 1rem;
    font-size: 1.5rem;
    color: #dc3545; /* رنگ قرمز برای آیکون‌ها */
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.7);
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.related-article-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 200px; /* ارتفاع ثابت و کوچک‌تر برای کارت‌ها */
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.related-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.6);
}

.related-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-article-card:hover .related-card-img {
    transform: scale(1.05);
}

.related-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 70%);
    display: flex;
    align-items: flex-end;
    padding: 1rem;
}

.related-card-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
/* ===================================================== */
/* --- استایل کنترل‌های اسلایدر مقالات مشابه --- */
/* ===================================================== */
.related-slider-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider-nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.slider-nav-btn:hover:not(:disabled) {
    background: var(--purple-glow);
    transform: scale(1.1);
}

.slider-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-indicator {
    color: #aaa;
    font-weight: bold;
    font-size: 0.9rem;
}
/* ===================================================== */
/* --- استایل بخش نقد و بررسی شخصیت‌ها --- */
/* ===================================================== */
/* ===================================================== */
/* ===================================================== */
/* --- استایل جدید (قرمز، ریسپانسیو، جذاب‌تر) برای بخش نقد شخصیت --- */
/* ===================================================== */

.character-analysis-section {
    padding: 3.5rem 2.5rem; /* کمی پدینگ بیشتر */
    margin: 4rem 0; /* فاصله بیشتر از بالا و پایین */
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 20px; /* گوشه‌های گردتر */
    overflow: hidden;
    
    background-color: #fcf8f8; /* پس‌زمینه بسیار روشن با کمی تم قرمز */
    color: #333; 
    
    border: 3px solid #E03B3B; /* ✨ حاشیه قرمز جذاب ✨ */
    box-shadow: 0 12px 40px rgba(224, 59, 59, 0.2); /* ✨ سایه قرمز ملایم و عمیق‌تر ✨ */
    transition: all 0.5s ease-in-out; /* انیمیشن برای هاور کلی بخش */
}

/* افکت هاور برای کل بخش */
.character-analysis-section:hover {
    box-shadow: 0 15px 50px rgba(224, 59, 59, 0.3); /* سایه عمیق‌تر در هاور */
    transform: translateY(-3px); /* کمی حرکت به سمت بالا */
}

/* لایه روی عکس پس‌زمینه */
.character-analysis-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit; /* استفاده از عکس پس‌زمینه اصلی */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: brightness(1.05) grayscale(0.2); /* کمی روشن‌تر و کم‌رنگ‌تر */
    opacity: 0.08; /* شفافیت کمتر عکس در پس‌زمینه */
    z-index: -1;
}

.ca-header {
    display: flex;
    flex-wrap: wrap; /* برای ریسپانسیو بودن در موبایل */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem; /* فاصله بیشتر */
    padding-bottom: 1.2rem;
    border-bottom: 2px dashed rgba(224, 59, 59, 0.3); /* ✨ خط جداکننده دش قرمز ✨ */
}

.ca-title {
    font-family: 'Lalezar', cursive;
    font-size: 2.8rem; /* ✨ بزرگتر و چشمگیرتر ✨ */
    color: #E03B3B; /* ✨ رنگ قرمز خفن ✨ */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.1); /* سایه ظریف برای عنوان */
    margin-bottom: 0.5rem; /* فاصله از کنترل‌ها در موبایل */
}
/* ✨ ریسپانسیو کردن و سبک‌سازی شدید بخش نقد شخصیت برای موبایل ✨ */
@media (max-width: 768px) {
    .ca-title {
        font-size: 2rem; 
        width: 100%; 
        text-align: center;
    }
    .ca-slider-controls {
        width: 100%; 
        justify-content: center; 
    }
    /* 🚀 خاموش کردن فیلترهای سنگین و سایه‌ها در موبایل 🚀 */
    .character-analysis-section {
        background-attachment: scroll !important; 
        box-shadow: none !important; 
    }
    .character-analysis-section::before {
        display: none !important; /* حذف لایه فیلتردار که قاتلِ پردازنده گوشی بود */
    }
    .ca-article-card {
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* سایه بسیار سبک */
    }
    .ca-article-card:hover {
        transform: none !important; /* خاموش کردن انیمیشن هاور */
    }
}


.ca-slider-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* فاصله بین دکمه‌ها و نشانگر صفحه */
}

.ca-page-indicator {
    font-size: 1.1rem;
    color: #666;
    font-weight: bold;
}

.ca-slider-btn {
    background: #E03B3B; /* ✨ دکمه‌های قرمز ✨ */
    border: none;
    color: #fff;
    width: 40px; /* اندازه مشخص برای دکمه */
    height: 40px; /* اندازه مشخص برای دکمه */
    border-radius: 50%; /* دکمه گرد */
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.ca-slider-btn:hover:not(:disabled) {
    background: #FF5C5C; /* ✨ قرمز روشن‌تر در هاور ✨ */
    transform: scale(1.1); /* بزرگ‌تر شدن در هاور */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.ca-slider-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.ca-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* کارت‌های کمی بزرگ‌تر */
    gap: 2rem; /* فاصله بیشتر بین کارت‌ها */
}

.ca-article-card {
    background: #ffffff; 
    border-radius: 15px; /* گوشه‌های گردتر */
    overflow: hidden;
    text-decoration: none;
    border: 1px solid #f0f0f0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* سایه عمیق‌تر برای کارت‌ها */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ca-article-card:hover {
    transform: translateY(-8px); /* ✨ حرکت بیشتر به بالا در هاور ✨ */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* ✨ سایه بسیار عمیق‌تر در هاور ✨ */
    border-color: #E03B3B; /* ✨ حاشیه قرمز در هاور ✨ */
}

.ca-article-card img {
    width: 100%;
    height: 200px; /* ارتفاع بیشتر برای تصویر */
    object-fit: cover;
    border-bottom: 1px solid #f0f0f0; /* جداکننده ظریف */
}

.ca-card-content {
    padding: 1.2rem; /* پدینگ بیشتر */
}

.ca-card-title {
    font-size: 1.35rem; /* عنوان کارت بزرگ‌تر */
    color: #222; 
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
    font-weight: 700; /* بولدتر */
}

.ca-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem; /* متن متا کمی بزرگ‌تر */
    color: #777; 
    border-top: 1px solid #eee;
    padding-top: 1rem;
    margin-top: 1rem;
}

.ca-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ca-footer {
    text-align: center;
    margin-top: 3rem; /* فاصله بیشتر */
}

.ca-view-all-btn {
    background: #E03B3B; /* ✨ دکمه قرمز اصلی ✨ */
    color: #fff;
    padding: 12px 30px; /* پدینگ بیشتر */
    border-radius: 35px; /* گردتر */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem; /* متن بزرگ‌تر */
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(224, 59, 59, 0.3); /* سایه برای دکمه */
}

.ca-view-all-btn:hover {
    background: #FF5C5C; /* قرمز روشن‌تر */
    transform: translateY(-2px) scale(1.02); /* ✨ افکت جذاب‌تر در هاور ✨ */
    box-shadow: 0 8px 25px rgba(224, 59, 59, 0.4);
}
/* ===================================================== */
/* --- استایل نهایی حالت روشن (تم کاغذی با کارت تیره) --- */
/* ===================================================== */

body.light-mode {
    /* ۱. بازنویسی متغیرهای اصلی رنگ */
    --dark-bg: #fdfaf6; /* پس‌زمینه کاغذی گرم */
    --component-bg: #ffffff; /* پس‌زمینه سفید برای بخش‌های عمومی */
    --border-color: #e7e5e4; /* حاشیه خاکستری گرم */
    
    /* رنگ‌های اصلی جدید بر پایه طلایی */
    --purple-glow: #b45309; /* طلایی/اُکر اصلی برای لینک‌ها و عناصر فعال */
    --gold-glow: #92400e;  /* طلایی/اُکر تیره‌تر */
}

/* ۲. اصلاح رنگ متن‌های اصلی و فرعی */
body.light-mode {
    color: #44403c; /* رنگ متن اصلی (قهوه‌ای دودی) */
}
body.light-mode .text-gray-300,
body.light-mode .text-gray-200,
body.light-mode .text-gray-400,
body.light-mode .copyright-text,
body.light-mode .article-meta-compact,
body.light-mode .comment-time,
body.light-mode .stat-label {
    color: #78716c; /* خاکستری گرم برای متن‌های فرعی */
}

/* ۳. اصلاح رنگ عنوان‌ها */
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4,
body.light-mode .text-white,
body.light-mode .author-name,
body.light-mode .data-table td strong {
    color: #1c1917; /* رنگ مرکب (قهوه‌ای بسیار تیره) */
}

/* ۴. اصلاح استایل‌های خاص هر بخش */

/* هدر و لوگو */
body.light-mode .logo-title {
    background: linear-gradient(90deg, #f59e0b, #b45309);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
}
body.light-mode.scrolled .site-header {
    background: rgba(253, 250, 246, 0.85);
}
body.light-mode .theme-toggle { background: #fef3c7; border-color: #fde68a; color: #b45309; }

/* نوار تب پایین */
body.light-mode .bottom-tab-bar {
    background: rgba(245, 245, 245, 0.9);
    border-top: 1px solid #e5e5e5;
}
body.light-mode .tab-link { color: #57534e; }
body.light-mode .tab-link.active { color: var(--purple-glow); }

/* ✨ تغییر اصلی: کارت‌های مقاله تیره می‌شوند ✨ */
body.light-mode .article-card {
    background: #292524; /* پس‌زمینه تیره (سنگ‌آهن) */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
body.light-mode .article-card::before {
    background: linear-gradient(135deg, #f59e0b, #fbbf24); /* حاشیه طلایی */
}
/* ✨ مهم: متن داخل کارت‌های تیره دوباره روشن می‌شود ✨ */
body.light-mode .article-card .article-title-card {
    color: #fde047; /* رنگ عنوان طلایی روشن */
}
body.light-mode .article-card .article-excerpt {
    color: #a8a29e; /* رنگ متن خلاصه خاکستری روشن */
}
body.light-mode .article-card .cta-button,
body.light-mode .article-card .author-tag span {
    color: #e5e7eb; /* رنگ متن نویسنده و دکمه سفید دودی */
}
body.light-mode .article-card .cta-button {
    color: #fcd34d; /* دکمه ادامه مطلب طلایی */
}
body.light-mode .article-author .author-avatar {
    border-color: #fcd34d; /* دور آواتار طلایی */
    box-shadow: 0 0 8px #fcd34d;
}

/* ✨ تغییر اصلی: عنوان اسلایدر و انتخاب سردبیر طلایی می‌شوند ✨ */
body.light-mode .slide-title,
body.light-mode .ep-card-title {
    color: #f59e0b; /* رنگ طلایی جذاب */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* سایه برای خوانایی */
}

/* پنل مدیریت */
body.light-mode .admin-sidebar { background: #f1f5f9; border-left-color: #e2e8f0; }
body.light-mode .admin-nav a { color: #475569; }
body.light-mode .admin-nav a:hover { background: #e2e8f0; color: #0f172a; }
body.light-mode .admin-nav a.active { background: #b45309; color: #fff; border-right-color: #92400e; }
/* ===================================================== */
/* ===================================================== */
/* --- استایل نهایی و صحیح لوگو در هدر --- */
/* ===================================================== */

.logo-switcher {
    position: relative;
    display: flex; /* این کد مشکل را حل می‌کند */
    align-items: center;
    justify-content: center;
    height: 50px; /* ارتفاع متناسب با هدر */
    width: 150px; /* عرض تقریبی برای لوگو */
    text-decoration: none;
}

.logo-main,
.logo-scrolled {
    position: absolute;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    will-change: opacity, transform;
}

/* حالت اولیه: لوگوی اصلی مشخص */
.logo-main {
    opacity: 1;
    transform: scale(1);
}
.logo-scrolled {
    opacity: 0;
    transform: scale(0.8);
}

/* حالت پس از اسکرول: لوگوی دوم مشخص می‌شود */
body.scrolled .logo-main {
    opacity: 0;
    transform: scale(0.8);
}
body.scrolled .logo-scrolled {
    opacity: 1;
    transform: scale(1);
}
.header-actions {
    margin-right: auto; /* دکمه را به سمت چپ هل می‌دهد */
    /* اگر هم کدهای دیگری برای .header-actions دارید، این را به آن اضافه کنید */
}
/* --- اصلاح پس‌زمینه شفاف لوگو --- */
.logo-switcher img {
    background: none !important;
    mix-blend-mode: normal !important;
}
/* ===================================================== */
/* --- کد نهایی برای اصلاح هدر و لوگو (اضافه به انتهای فایل) --- */
/* ===================================================== */

/* ۱. چینش صحیح محتوای هدر */
.header-content {
    display: flex !important;
    justify-content: flex-start !important;
}

/* ۲. ارسال دکمه تغییر تم به گوشه چپ */
.header-actions {
    margin-right: auto !important;
}

/* ۳. تضمین شفافیت پس‌زمینه لوگو */
.logo-switcher img {
    background: transparent !important;
    mix-blend-mode: normal !important;
}
/* ===================================================== */
/* --- سنجاق کردن دکمه تغییر تم به گوشه صفحه --- */
/* ===================================================== */

.header-actions {
    position: fixed !important; /* موقعیت ثابت نسبت به صفحه نمایش */
    top: 20px !important;      /* فاصله از بالا */
    left: 20px !important;     /* فاصله از چپ */
    z-index: 2001 !important;  /* برای اینکه روی همه چیز باشد، حتی بالاتر از منوی پایین */
    margin: 0 !important;      /* حذف مارجین‌های قبلی */
}
/* ===================================================== */
/* --- بخش ۴۳: استایل بخش درباره ما (با گوشه خمیده) --- */
/* ===================================================== */

/* --- ۱. کانتینر اصلی بخش درباره ما --- */
.about-us-section {
    position: relative; /* برای position: absolute گوشه خمیده */
    background: linear-gradient(135deg, #3a005f, #0d011c); /* رنگ بنفش تیره به آبی */
    border-radius: 12px;
    padding: 3rem; /* فاصله داخلی */
    margin: 4rem 1rem; /* فاصله از بالا و پایین */
    overflow: hidden; /* مهم برای نمایش گوشه خمیده */
    color: #e0e0e0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- ۲. شبیه‌سازی گوشه خمیده (Folded Corner Effect) --- */
.about-us-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 60px 0 0; /* اندازه خمیدگی (بالا، راست، پایین، چپ) */
    border-color: #5d008f transparent transparent transparent; /* رنگ گوشه خمیده */
    box-shadow: -2px 2px 2px rgba(0,0,0,0.2); /* سایه کوچک برای عمق */
    transform: rotate(90deg); /* چرخش برای قرارگیری در گوشه راست بالا */
    transform-origin: top right;
    z-index: 1; /* روی محتوا باشد */
}
.about-us-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px; /* باید با border-width بالا برابر باشد */
    height: 60px; /* باید با border-width بالا برابر باشد */
    background: #5d008f; /* رنگی مشابه گوشه خمیده */
    transform: translateY(-50%) rotate(-45deg); /* گوشه بالایی را می پوشاند */
    z-index: 2; /* روی گوشه خمیده باشد */
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3);
}


/* --- ۳. محتوای داخلی (برای padding و max-width) --- */
.about-content {
    position: relative; /* برای اینکه روی گوشه خمیده قرار بگیرد */
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
    text-align: right; /* متن راست‌چین شود */
}

/* --- ۴. هدر (لوگو و عنوان) --- */
.about-header {
    display: flex;
    align-items: center; /* لوگو و عنوان در یک خط */
    gap: 1.5rem; /* فاصله بین لوگو و عنوان */
    margin-bottom: 2rem;
    justify-content: flex-start; /* از راست شروع شود */
}

.about-logo {
    height: 80px; /* اندازه بزرگتر برای لوگو */
    width: auto;
    flex-shrink: 0; /* از کوچک شدن لوگو جلوگیری می‌کند */
    mix-blend-mode: normal; /* تضمین شفافیت */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); /* درخشش ملایم */
}

.about-title {
    font-family: 'Lalezar', cursive;
    font-size: 3rem; /* اندازه عنوان */
    color: #ffcc00; /* رنگ طلایی برای عنوان */
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    line-height: 1.2;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.4); /* سایه درخشان */
}

/* --- ۵. متن اصلی --- */
.about-text p {
    color: #e0e0e0;
    font-size: 1.15rem;
    line-height: 1.9;
    margin-bottom: 1.2rem;
    text-align: justify; /* متن justify شود */
}
.about-text p:last-child {
    margin-bottom: 0;
}

/* ===================================================== */
/* --- بهینه‌سازی برای موبایل (صفحه‌های کوچکتر از ۷۶۸ پیکسل) --- */
/* ===================================================== */
@media (max-width: 768px) {
    .about-us-section {
        padding: 2rem 1rem;
        margin: 3rem 0.5rem;
    }

    .about-us-section::before,
    .about-us-section::after {
        border-width: 40px 40px 0 0; /* کوچکتر کردن گوشه خمیده در موبایل */
        width: 40px;
        height: 40px;
    }

    .about-header {
        flex-direction: column; /* لوگو و عنوان زیر هم قرار می‌گیرند */
        align-items: flex-end; /* به راست متمایل می‌شوند */
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .about-logo {
        height: 65px; /* کوچک‌تر کردن لوگو در موبایل */
    }

    .about-title {
        font-size: 2.2rem; /* کوچک‌تر کردن عنوان در موبایل */
        text-align: right; /* عنوان به راست بچسبد */
    }

    .about-text p {
        font-size: 1rem;
        line-height: 1.7;
    }
}
/* ===================================================== */
/* --- اصلاحیه نهایی برای شفافیت پس‌زمینه لوگو --- */
/* ===================================================== */

.logo-switcher img {
    background: transparent !important;
    mix-blend-mode: normal !important;
}
/* ===================================================== */
/* --- اصلاح Z-index برای پنل ادمین --- */
/* ===================================================== */
.admin-sidebar,
.admin-content {
    position: relative; /* مطمئن می‌شویم که position برای z-index فعال است */
    z-index: 100;      /* یک عدد بالا برای اطمینان از قرارگیری در بالاترین لایه */
}

/* اگر 'main-app-container' (که پنل ادمین را در بر می گیرد) وجود دارد، آن را هم چک می کنیم */
#main-app-container {
    position: relative;
    z-index: 90;
}
.admin-container { z-index: 10; }
/* ===================================================== */
/* --- تنظیم فونت‌های اصلی سایت (استعداد و وزیرمتن) --- */
/* ===================================================== */

/* تنظیمات عمومی برای فونت بدنه */
body {
    font-family: 'Vazirmatn', sans-serif; /* فونت اصلی برای تمام متن‌ها */
    direction: rtl; /* اطمینان از راست به چپ بودن متن */
    text-align: right; /* تنظیم تراز متن به راست */
    line-height: 1.7; /* افزایش فاصله خطوط برای خوانایی بهتر */
}

/* برای عنوان‌ها، لوگو و عناصر برجسته از فونت استعداد استفاده می‌کنیم */
h1, h2, h3, h4, h5, h6,
.logo-title, /* عنوان لوگو در هدر */
.about-us-title, /* عنوان بخش درباره ما */
.site-tagline, /* تگ لاین سایت */
.article-title, /* عنوان مقالات در صفحه مقاله */
.article-title-card, /* عنوان مقالات در کارت‌ها */
.admin-section-header h2, /* عنوان بخش‌های پنل ادمین */
.admin-nav a, /* آیتم‌های منوی پنل ادمین */
.ep-card-title, /* عنوان مقالات انتخاب سردبیر */
.slide-title /* عنوان اسلایدر */ {
    font-family: 'Estedad FD', 'Vazirmatn', sans-serif; /* اول استعداد، اگر نبود وزیرمتن */
    font-weight: 700; /* وزن پررنگ برای عنوان‌ها */
}

/* برای اطمینان از نمایش صحیح اعداد فارسی در هر جایی که ممکن است استفاده شوند */
.numbers-display,
.view-count,
.comment-count,
.stat-value,
.time-display { /* هر جایی که عدد مهم است */
    font-family: 'Estedad FD', sans-serif;
}

/* برای دکمه‌ها و فرم‌ها می‌توانیم از وزیرمتن با وزن مشخص استفاده کنیم */
button, input, select, textarea {
    font-family: 'Vazirmatn', sans-serif;
}

/* ─── استایل پرونده ویژه جنایی - نسخه خفن سه بعدی ─── */
.special-crime-section {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border-left: 4px solid transparent;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 30px rgba(255, 92, 141, 0.3);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.special-crime-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.05) 50%, transparent 70%),
    radial-gradient(circle at 30% 20%, rgba(255, 92, 141, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(101, 31, 255, 0.15) 0%, transparent 40%);
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.special-crime-section h2 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  background: linear-gradient(45deg, #8b5cf6, #a855f7, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0.4rem 0.8rem;
  border: 1px solid #a855f7;
  border-radius: 6px;
  display: inline-block;
  max-width: 90vw; /* ✅ جلوگیری از بیرون‌زدن در موبایل */
  box-sizing: border-box; /* ✅ محاسبه padding در عرض */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* ✅ جلوگیری از شکست خط ناخواسته */
}

.crime-articles-grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.crime-articles-grid::-webkit-scrollbar {
  height: 6px;
}

.crime-articles-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.crime-articles-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #ffd700, #ff6b35);
  border-radius: 3px;
}

.crime-article-card {
  flex: 0 0 160px;
  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(255, 215, 0, 0.3);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 215, 0, 0.1);
  transform: translateZ(0);
}

.crime-article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.2),
    transparent
  );
  transition: left 0.6s ease;
}

.crime-article-card:hover::before {
  left: 100%;
}

.crime-article-card:hover {
  transform: translateY(-8px) translateZ(10px) scale(1.05);
  border-color: #ffd700;
  box-shadow: 
    0 15px 30px rgba(255, 215, 0, 0.3),
    0 0 30px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.crime-article-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.8rem;
  border: 2px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
  filter: brightness(0.9) contrast(1.1);
}

.crime-article-card:hover img {
  border-color: #ffd700;
  filter: brightness(1.1) contrast(1.2);
  transform: scale(1.05);
}

.crime-article-card h3 {
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.4;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
}

.crime-article-card h3 a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
  padding: 0.3rem;
  border-radius: 4px;
}

.crime-article-card h3 a:hover {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  background: rgba(255, 215, 0, 0.1);
}

.crime-empty {
  text-align: center;
  color: #ffd700;
  font-style: italic;
  padding: 2rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-size: 1.1rem;
}

/* واکنش‌گرایی */
@media (max-width: 768px) {
  .special-crime-section {
    margin: 2rem 0.5rem;
    padding: 1.2rem;
  }
  
  .special-crime-section h2 {
    font-size: 1.1rem;
    letter-spacing: 1px;
    padding: 0.4rem 0.8rem;
  }
  
  .crime-article-card {
    flex: 0 0 140px;
    padding: 0.8rem;
  }
  
  .crime-article-card img {
    height: 85px;
  }
}
/* --- استایل‌های جدید برای بج‌های نویسنده --- */

.author-profile-box {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.author-avatar-large {
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.author-details-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name-text {
    font-weight: bold;
    font-size: 1rem;
    color: #f0f0f0;
}

.author-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.identity-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    line-height: 1.4;
    display: inline-block;
}

/* استایل بج عنوان (مثل دانشجو) - شیشه‌ای با حاشیه رنگی */
.badge-title {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(157, 0, 255, 0.5); /* رنگ بنفش نئونی */
    color: #e0e0e0;
    box-shadow: 0 0 5px rgba(157, 0, 255, 0.2);
}

/* استایل بج تخصص (مثل پژوهشگر) - توپر ملایم */
.badge-bio {
    background: linear-gradient(45deg, #ff6b6b, #ee5253);
    color: white;
    border: none;
    font-weight: 500;
}
/* --- استایل نوار پیشرفت مطالعه (Reading Progress Bar) --- */

.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px; /* ارتفاع نوار */
    background: transparent;
    z-index: 99999; /* بالاتر از همه چیز حتی منو */
    pointer-events: none; /* کلیک از رویش رد شود */
}

.reading-progress-bar {
    height: 100%;
    width: 0%; /* با جاوااسکریپت پر می‌شود */
    background: linear-gradient(90deg, #8e2de2, #4a00e0, #00d2ff); /* گرادینت بنفش به آبی نئونی */
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.7); /* درخشش نئونی */
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    transition: width 0.1s ease-out;
    position: relative;
}

/* یک افکت درخشش اضافی در نوک نوار */
.reading-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    height: 6px;
    width: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px #00d2ff;
    opacity: 1;
}
/* =========================================
   ✨ استایل‌های بخش واکنش‌های جادویی (Magic Reactions)
   ========================================= */

.magic-reactions-container {
    margin: 3rem auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03); /* پس‌زمینه خیلی محو */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    max-width: 800px;
}

.reaction-title {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #e0e0e0;
    font-weight: 500;
}

.reaction-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* --- دکمه‌های واکنش --- */
.magic-btn {
    background: #252535;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 5px;
    width: 80px;
    height: 95px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* انیمیشن فنری */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.magic-btn:hover {
    background: #303045;
    transform: translateY(-5px); /* دکمه بالا می‌پرد */
}

/* حالت فعال (وقتی کاربر روی آن کلیک کرده) */
.magic-btn.active {
    background: rgba(157, 0, 255, 0.1);
    border-color: #9d00ff; /* رنگ بنفش نئونی */
    box-shadow: 0 0 15px rgba(157, 0, 255, 0.3);
}

.magic-btn .emoji {
    font-size: 1.8rem;
    margin-bottom: 5px;
    filter: grayscale(0.8); /* در حالت عادی خاکستری */
    transition: filter 0.3s;
}

.magic-btn:hover .emoji,
.magic-btn.active .emoji {
    filter: grayscale(0); /* رنگی شدن ایموجی */
    transform: scale(1.2);
}

.magic-btn .count {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.magic-btn .label {
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 4px;
}

/* =========================================
   ✨ استایل پنجره شناور (Modal)
   ========================================= */

.reaction-modal {
    display: none; /* پیش‌فرض مخفی */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* تاریکی پشت صفحه */
    backdrop-filter: blur(5px); /* مات کردن پشت */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reaction-modal.visible {
    display: flex;
    opacity: 1;
}

.reaction-modal-content {
    background: linear-gradient(145deg, #1e1e2e, #2d2d44);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reaction-modal.visible .reaction-modal-content {
    transform: translateY(0);
}

.close-reaction-modal {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
}

.close-reaction-modal:hover {
    color: #fff;
}

.modal-emoji-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    animation: popIn 0.5s ease;
}

@keyframes popIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.reaction-modal-content h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.reaction-modal-content p {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-primary-modal {
    background: #9d00ff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-primary-modal:hover {
    background: #7b00cc;
}

.btn-secondary-modal {
    background: transparent;
    border: 1px solid #555;
    color: #bbb;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secondary-modal:hover {
    border-color: #fff;
    color: #fff;
}
/* =========================================
   ✨ استایل‌های دکمه خانه و سیستم نظرات شناور
   ========================================= */

/* --- 1. دکمه بازگشت به خانه (بالای صفحه) --- */
.back-to-home-btn {
    position: fixed;
    top: 20px;
    right: 20px; /* در حالت راست‌چین، سمت راست بالا */
    background: rgba(30, 30, 40, 0.7); /* پس‌زمینه شیشه‌ای تیره */
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px); /* تاری پشت دکمه */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 9900; /* روی همه چیز */
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.back-to-home-btn i {
    font-size: 1.1rem;
    color: #00d2ff; /* رنگ آیکون */
}

.back-to-home-btn:hover {
    background: rgba(0, 210, 255, 0.15);
    border-color: #00d2ff;
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
}

/* --- 2. دکمه شناور نظرات (Bubble FAB) --- */
.floating-comments-btn {
    position: fixed;
    bottom: 30px;
    left: 30px; /* گوشه پایین سمت چپ */
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #4a00e0, #8e2de2); /* گرادینت بنفش جذاب */
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(142, 45, 226, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 26px;
    cursor: pointer;
    z-index: 9990;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.floating-comments-btn:hover {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 0 30px rgba(142, 45, 226, 0.8);
}

/* بج تعداد نظرات روی دکمه */
.floating-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff0055; /* قرمز جیغ */
    color: white;
    font-size: 12px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1a1a2e; /* همرنگ پس‌زمینه سایت برای فاصله */
    font-weight: bold;
    padding: 2px;
}

/* --- 3. پنل کشویی نظرات (Drawer) --- */
.comments-drawer {
    position: fixed;
    top: 0;
    left: -100%; /* پیش‌فرض مخفی در بیرون کادر سمت چپ */
    width: 400px;
    max-width: 85vw; /* در موبایل خیلی پهن نشود */
    height: 100%;
    background: #15151e; /* رنگ تیره مات */
    box-shadow: 5px 0 50px rgba(0, 0, 0, 0.7);
    z-index: 10000; /* بالاترین لایه */
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.comments-drawer.open {
    left: 0; /* باز شدن */
}

/* هدر پنل */
.drawer-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.drawer-header h3 {
    margin: 0;
    color: #f0f0f0;
    font-size: 1.2rem;
    font-family: 'Vazirmatn', sans-serif;
}

.close-drawer {
    background: none;
    border: none;
    color: #aaa;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
    transition: color 0.3s;
}

.close-drawer:hover {
    color: #ff0055;
}

/* بدنه اسکرول‌خوردنی پنل */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    /* اسکرول بار زیبا */
    scrollbar-width: thin;
    scrollbar-color: #444 #15151e;
}

.drawer-body::-webkit-scrollbar {
    width: 6px;
}
.drawer-body::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 10px;
}

/* --- 4. فرم داخل پنل (مدرن) --- */
.drawer-form-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.drawer-form-box h4 {
    margin-top: 0;
    color: #00d2ff;
    font-size: 0.95rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-form-box h4::before {
    content: '✍️';
}

.guest-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.drawer-input, .drawer-textarea {
    width: 100%;
    background: #0d0d12;
    border: 1px solid #333;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border 0.3s;
}

.drawer-input:focus, .drawer-textarea:focus {
    outline: none;
    border-color: #8e2de2;
    box-shadow: 0 0 10px rgba(142, 45, 226, 0.2);
}

.drawer-textarea {
    min-height: 100px;
    resize: vertical;
    margin-bottom: 15px;
}

.drawer-submit-btn {
    background: linear-gradient(90deg, #4a00e0, #8e2de2);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    font-size: 1rem;
    transition: opacity 0.3s;
}

.drawer-submit-btn:hover {
    opacity: 0.9;
    box-shadow: 0 5px 15px rgba(142, 45, 226, 0.3);
}

.logged-in-msg {
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 15px;
    background: rgba(0, 210, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
    border-right: 3px solid #00d2ff;
}

/* --- 5. لیست نظرات در پنل --- */
.drawer-comment-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    animation: fadeIn 0.5s ease;
}

.dc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.dc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
}

.dc-info {
    display: flex;
    flex-direction: column;
}

.dc-name {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.9rem;
}

.dc-date {
    font-size: 0.75rem;
    color: #666;
}

.dc-content {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.6;
    padding-right: 52px; /* فاصله از سمت راست برای هم‌ترازی با متن */
}

/* ریسپانسیو برای موبایل */
@media (max-width: 480px) {
    .comments-drawer {
        width: 100%; /* تمام صفحه در موبایل */
    }
    
    .floating-comments-btn {
        width: 55px;
        height: 55px;
        bottom: 20px;
        left: 20px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* =========================================
   📊 استایل‌های داشبورد آنالیتیکس (Analytics)
   ========================================= */

/* 1. دکمه آمار در جدول لیست مقالات */
.action-btn.stats {
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
}

.action-btn.stats:hover {
    background: linear-gradient(135deg, #5a32a3, #4a2585);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.6);
}

/* 2. لایه تاریک پشت مودال (Overlay) */
.analytics-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* پس‌زمینه خیلی تیره */
    backdrop-filter: blur(8px);       /* افکت شیشه‌ای مات */
    z-index: 10000;                   /* بالاتر از همه چیز */
    display: none;                    /* پیش‌فرض مخفی */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.analytics-modal-overlay.visible {
    display: flex;
    opacity: 1;
}

/* 3. بدنه اصلی داشبورد (Window) */
.analytics-dashboard {
    background: #1a1a2e; /* رنگ اصلی تم سایت */
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 50px rgba(0, 210, 255, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPopUp {
    from { transform: scale(0.8) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* 4. هدر داشبورد */
.analytics-header {
    padding: 20px 30px;
    background: linear-gradient(90deg, #16213e, #1a1a2e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analytics-header h3 {
    margin: 0;
    color: #00d2ff; /* آبی نئونی */
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

/* دکمه بستن (ضربدر) */
.close-analytics {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-analytics:hover {
    color: #ff0055;
    background: rgba(255, 0, 85, 0.1);
    transform: rotate(90deg);
}

/* 5. بدنه نمودارها (Grid Layout) */
.analytics-body {
    padding: 30px;
    overflow-y: auto; /* اسکرول داخلی */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* ریسپانسیو خودکار */
    gap: 25px;
}

/* اسکرول بار اختصاصی برای داشبورد */
.analytics-body::-webkit-scrollbar {
    width: 8px;
}
.analytics-body::-webkit-scrollbar-track {
    background: #0f0f13;
}
.analytics-body::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
.analytics-body::-webkit-scrollbar-thumb:hover {
    background: #00d2ff;
}

/* 6. کارت‌های نمودار (Chart Cards) */
.chart-card {
    background: #0f0f13; /* تیره‌تر از پس‌زمینه */
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 380px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 210, 255, 0.3);
}

.chart-card h4 {
    position: absolute;
    top: 20px;
    right: 25px; /* راست‌چین برای فارسی */
    margin: 0;
    color: #888;
    font-size: 0.95rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* 7. لودینگ (چرخنده) */
.analytics-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.95);
    display: none; /* با JS روشن می‌شود */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    border-radius: 20px;
    color: #00d2ff;
    font-size: 1.2rem;
    gap: 15px;
}

.analytics-loader i {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px #00d2ff);
}

/* 8. ریسپانسیو موبایل */
@media (max-width: 768px) {
    .analytics-dashboard {
        width: 95%;
        height: 95vh;
        max-height: 95vh;
    }
    .analytics-body {
        grid-template-columns: 1fr; /* تک ستونه در موبایل */
        padding: 15px;
    }
    .chart-card {
        min-height: 300px;
    }
}
/* 🔧 فیکس ویژه برای باگ اسکرول در گوشی‌های شیائومی */
html, body {
    overscroll-behavior-y: none; /* جلوگیری از کش آمدن صفحه در شیائومی */
    touch-action: pan-y; /* اجبار به اسکرول فقط عمودی */
}

/* جلوگیری از رندرهای سنگین که باعث لگ در شیائومی می‌شود */
* {
    -webkit-overflow-scrolling: touch;
}

/* اگر المان "انتخاب سردبیر" کلاس خاصی دارد (مثلا editor-choice) */
/* آن را ساده کنید تا GPU درگیر نشود */
.editor-choice, .sticky-post {
    will-change: auto !important; /* غیرفعال کردن پیش‌بینی رندر */
    transform: translateZ(0); /* اجبار به استفاده از GPU لایه صفر */
}
/* =========================================
   🚀 1. اصلاح فیزیک اسکرول (مخصوص شیائومی)
   ========================================= */
html, body {
    /* جلوگیری از افکت کشسانی که باعث لگ در شیائومی می‌شود */
    overscroll-behavior-y: none;
    /* بهینه‌سازی تاچ برای اسکرول عمودی سریع */
    touch-action: pan-y;
    /* روان‌سازی فونت‌ها */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* =========================================
   🚀 2. تکنیک ایزولاسیون (Containment) - جادوی رفع لگ
   ========================================= */
/* این کد به مرورگر می‌گوید: "فقط وقتی به این بخش رسیدی نقاشیش کن" */
/* کلاس‌های احتمالی مقالات و بخش‌ها را اینجا لیست کردم */
article, 
.post-card, 
.article-item, 
.blog-post,
.editor-choice-container, /* کلاس احتمالی بخش سردبیر */
.sidebar-widget {
    /* مدرن‌ترین تکنیک افزایش سرعت در کروم موبایل */
    content-visibility: auto; 
    
    /* تخمین ارتفاع برای جلوگیری از پرش اسکرول (مثلا 500 پیکسل) */
    contain-intrinsic-size: 1px 500px; 
    
    /* ایزوله کردن چیدمان */
    contain: layout paint style;
}

/* =========================================
   🚀 3. بهینه‌سازی تصاویر (جلوگیری از ریفلو)
   ========================================= */
img {
    /* انتقال پردازش عکس به کارت گرافیک گوشی */
    transform: translateZ(0);
    will-change: opacity, transform;
    /* جلوگیری از پرش صفحه */
    height: auto;
    display: block;
}

/* =========================================
   📱 4. تنظیمات مخصوص موبایل (زیر 768 پیکسل)
   ========================================= */
@media screen and (max-width: 768px) {
    * {
        /* ⛔️ قاتل اصلی: حذف تاری شیشه‌ای در موبایل */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        
        /* حذف انیمیشن‌های پس‌زمینه سنگین */
        background-attachment: scroll !important;
    }

    /* سبک کردن کارت‌ها در موبایل */
    .post-card, article {
        /* حذف سایه‌های سنگین و نرم */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        /* حذف ترنزیشن‌ها موقع اسکرول */
        transition: none !important;
        /* حذف بوردر ردیوس‌های سنگین اگر زیاد هستند */
        border-radius: 8px !important; 
    }

    /* غیرفعال کردن انیمیشن‌های هاور در موبایل */
   /* غیرفعال کردن انیمیشن‌های هاور در موبایل */
    :hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* 🚀 توقف انیمیشن‌های سنگین پس‌زمینه (حاشیه متحرک، درخشش و ستاره‌ها) 🚀 */
    .article-card::before, 
    .admin-avatar-gold-wrapper::before, 
    .special-crime-section::before,
    .article-title-card {
        animation: none !important; 
    }
}
/* =========================================================
   حل باگ oklab برای کتابخانه html2canvas در بخش استوری
   ========================================================= */