:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #ffffff;
    --meta-color: #aaaaaa;
    --accent-color: #ff6b35;
}

/* استایل عمومی */

.main-wrapper { max-width: 1200px; margin: 0 auto; }
.main-wrapper h2 {
    font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem;
    color: var(--text-color);
}

/* گرید اخبار */
.news-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* ۶ ستون برای کنترل کارت‌ها */
    grid-auto-rows: 180px;
    gap: 15px;
}

/* کارت‌ها */
.card {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* اندازه کارت‌ها */
.card.featured { grid-column: span 4; grid-row: span 2; }
.card.small { grid-column: span 2; grid-row: span 1; }
.card.standard { grid-column: span 3; height: 200px; }

/* اسلایدر fade */
.slideshow { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.slide-track { position: relative; width: 100%; height: 100%; }
.slide {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-size: cover; background-position: center;
    opacity: 0; z-index: 1; transition: opacity 0.6s ease-in-out; flex-shrink:0;
}
.slide.active { opacity:1; z-index:2; }

/* محتوای کارت */
.card-content {
    position: absolute; bottom:0; left:0; right:0;
    padding:1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index:5;
}
.card-title { font-size:1rem; font-weight:600; line-height:1.4;color: #cccccc }
.card.featured .card-title { font-size:1.5rem; }
.card.standard .card-title { font-size:1.1rem; }
.card-meta { font-size:0.8rem; color: var(--meta-color); margin-top:0.5rem; }

/* ریسپانسیو */
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .card.featured, .card.small, .card.standard { grid-column: span 1; grid-row: span 1; height: 200px; }
}