/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --font-main: 'Cairo', sans-serif;
    --font-display: 'Outfit', sans-serif;

    /* Palette */
    --bg-body: #f4f7fa;
    --text-main: #1e293b;
    --text-muted: #64748b;

    --primary: #3b82f6;       /* Blue */
    --primary-dark: #2563eb;
    --accent: #8b5cf6;        /* Purple */
    --success: #10b981;       /* Green */
    --danger: #ef4444;        /* Red */
    --orange: #f97316;

    /* Glassmorphism System */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    --backdrop: blur(16px) saturate(180%);

    /* Shapes */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --container: 1280px;
}

[data-theme="dark"] {
    --bg-body: #0b1120;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body {
    font-family: var(--font-main);
    background: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }

/* Ambient Background Lights */
.ambient-light {
    position: fixed; width: 600px; height: 600px; border-radius: 50%; filter: blur(120px); z-index: -1; opacity: 0.5;
}
.one { top: -100px; right: -100px; background: #60a5fa; animation: float 10s infinite alternate; }
.two { bottom: -100px; left: -100px; background: #a78bfa; animation: float 15s infinite alternate-reverse; }

@keyframes float { from { transform: translate(0,0); } to { transform: translate(50px, 50px); } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* =========================================
   2. HEADER & NAV & DRAWER
   ========================================= */
/* Top Ticker */
.top-ticker {
    background: var(--primary-dark);
    height: 45px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    direction: rtl;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}

.ticker-label {
    position: absolute;
    right: 0;
    top: 0;
    background: var(--danger);
    color: white;
    padding: 0 20px;
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 20;
    box-shadow: -2px 0 10px rgba(0,0,0,0.3);
}

.ticker-text-wrap {
    display: flex;
    white-space: nowrap;
    animation: infiniteTickerRTL 50s linear infinite;
    width: max-content;
}

.ticker-item {
    color: white;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    min-width: 50vw;
    padding: 0 20px;
}

.ticker-item i { color: var(--success); margin-left: 12px; }
.ticker-item a { color: white; text-decoration: none; transition: 0.3s; }
.ticker-item a:hover { color: var(--accent); }

@keyframes infiniteTickerRTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.top-ticker:hover .ticker-text-wrap { animation-play-state: paused; }

/* Navbar */
.navbar {
    position: sticky; top: 15px; margin: 15px 20px; z-index: 1000;
    border-radius: 50px; padding: 0 10px;
}
.glass-effect, .glass-panel {
    background: var(--glass-bg); backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop);
    border: var(--glass-border); box-shadow: var(--glass-shadow);
    border-radius: var(--radius-md);
}

.nav-inner { display: flex; justify-content: space-between; align-items: center; height: 70px; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -1px; }
.dot { color: var(--primary); font-size: 2rem; line-height: 0; }

.nav-links { display: flex; gap: 25px; list-style: none; }
.nav-links a { font-weight: 600; font-size: 1rem; position: relative; color: var(--text-main); }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }

.has-dropdown { position: relative; }
.mega-menu {
    position: absolute; top: 200%; right: 0; width: 400px; padding: 20px;
    border-radius: var(--radius-md); display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.3s;
    background: var(--glass-bg);
    z-index: 1002;
}
.has-dropdown:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); top: 100%; }
.mm-col h4 { color: var(--primary); margin-bottom: 10px; border-bottom: 1px dashed var(--text-muted); padding-bottom: 5px; }
.mm-col a { display: block; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-muted); }
.mm-col a:hover { padding-right: 5px; color: var(--text-main); }

.nav-end { display: flex; gap: 10px; align-items: center; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
    color: var(--text-main); cursor: pointer; font-size: 1.1rem; transition: 0.3s;
}
.icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--primary); }
.btn-join {
    background: var(--text-main); color: var(--bg-body); padding: 8px 16px; border-radius: 20px;
    font-weight: bold; font-family: var(--font-display);
}

/* Mobile Toggle & Drawer */
.mobile-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--text-main); cursor: pointer; }

.drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1005;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.drawer-overlay.active { opacity: 1; visibility: visible; }
.drawer {
    position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
    background: var(--bg-body); z-index: 1006; transition: 0.3s; padding: 20px;
    display: flex; flex-direction: column;
}
.drawer.active { right: 0; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.drawer-body a { display: block; padding: 15px; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: bold; font-size: 1.1rem; }
.close-drawer { background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--text-muted); }

/* =========================================
   3. HERO GRID & STATS
   ========================================= */
.main-wrapper { padding-top: 30px; padding-bottom: 50px; }
.hero-grid {
    display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 300px 300px; gap: 20px;
}
.hero-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
}
.main-hero { grid-row: 1 / -1; }
.cover-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.hero-overlay {
    position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent 60%);
}
.hero-content {
    position: absolute; bottom: 0; right: 0; width: 100%; padding: 30px; z-index: 2; color: white;
}
.badge { padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; display: inline-block; color: white; }
.neon-blue { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; }
.neon-green { background: #10b981; box-shadow: 0 0 10px #10b981; }
.neon-red { background: #ef4444; box-shadow: 0 0 10px #ef4444; }

.main-hero h1 { font-size: 2.2rem; line-height: 1.3; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.main-hero p { opacity: 0.9; font-size: 1.1rem; max-width: 80%; margin-bottom: 15px; }
.meta-row { display: flex; gap: 15px; font-size: 0.85rem; opacity: 0.7; }

.hover-lift { transition: transform 0.3s; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.hover-lift:hover .cover-img { transform: scale(1.05); }

.stats-bar {
    display: flex; justify-content: space-around; padding: 20px; margin: 30px 0;
    text-align: center; border-radius: var(--radius-md);
}
.stat-item { display: flex; flex-direction: column; }
.stat-num { font-size: 1.8rem; font-weight: 800; color: var(--primary); font-family: var(--font-display); }
.stat-label { font-size: 0.9rem; color: var(--text-muted); }

.keywords-strip {
    display: flex; gap: 15px; overflow-x: auto; padding: 10px 0 20px; border-bottom: 1px solid rgba(0,0,0,0.05); margin-bottom: 30px;
}
.kw-tag {
    white-space: nowrap; font-size: 0.9rem; color: var(--text-muted); font-weight: 600;
}
.kw-tag:hover { color: var(--primary); }
.keywords-strip-container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    overflow: hidden;
}

.keywords-label {
    white-space: nowrap;
    font-weight: bold;
    color: var(--text-accent);
    font-size: 0.9rem;
}

.kw-tag-glow {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 15px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.kw-tag-glow:hover {
    background: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
    transform: translateY(-2px);
    color: #fff;
}

.tag-hash { color: var(--primary-color); font-weight: bold; }
.kw-tag-glow:hover .tag-hash { color: #fff; }

.tag-count {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 0.7rem;
    opacity: 0.8;
}
/* حاوية القسم بالكامل */
.trending-tags-section {
    margin: 20px 0 35px 0;
    width: 100%;
}

/* الحاوية الزجاجية */
.tags-container-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 20px;
    border-radius: var(--radius-md);
    flex-wrap: wrap; /* يسمح بنزول العناصر لسطر جديد */
}

/* عنوان "الشائع الآن" */
.tags-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    padding-top: 8px;
    font-size: 0.95rem;
}

.pulse-icon {
    color: var(--danger);
    animation: icon-pulse 1.5s infinite;
}

/* سحابة الوسوم */
.tags-cloud {
    display: flex;
    flex-wrap: wrap; /* الحل السحري لمشكلة السكرول */
    gap: 10px;
    flex: 1;
}

/* تصميم الوسم الديناميكي */
.dynamic-tag {
    background: var(--glass-bg);
    border: var(--glass-border);
    padding: 6px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* ألوان النصوص داخل الوسم (تتغير تلقائياً مع الثيم) */
.dynamic-tag .hash {
    color: var(--primary);
    font-weight: bold;
}

.dynamic-tag .name {
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.85rem;
}

.dynamic-tag .count {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
    color: var(--primary);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: bold;
}

/* تأثيرات التمرير (Hover) */
.dynamic-tag:hover {
    transform: translateY(-3px);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.dynamic-tag:hover .name,
.dynamic-tag:hover .hash,
.dynamic-tag:hover .count {
    color: #ffffff !important;
}

.dynamic-tag:hover .count {
    background: rgba(255, 255, 255, 0.2);
}

/* أنيميشن الأيقونة */
@keyframes icon-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .tags-container-wrapper {
        flex-direction: column; /* العنوان فوق والوسوم تحت في الجوال */
        gap: 12px;
        padding: 12px;
    }

    .tags-header {
        padding-top: 0;
    }

    .dynamic-tag {
        padding: 5px 12px;
    }
}
/* =========================================
   4. COMPLEX LAYOUT & SECTIONS
   ========================================= */
.complex-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; }
.section-block { margin-bottom: 50px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.section-head h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }

.icon-box {
    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem;
}
.icon-box.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.icon-box.red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.icon-box.purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.icon-box.green { background: linear-gradient(135deg, #10b981, #059669); }
.icon-box.orange { background: linear-gradient(135deg, #f97316, #ea580c); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.app-card { padding: 20px; display: flex; flex-direction: column; transition: 0.3s; }
.interactive-card:hover { border-color: var(--primary); box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15); }

.card-image {
    height: 140px; background: rgba(0,0,0,0.03); border-radius: var(--radius-sm); margin-bottom: 15px;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.center-icon { display: flex; justify-content: center; align-items: center; color: rgba(0,0,0,0.5); }
.ver-badge {
    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white;
    font-size: 0.7rem; padding: 2px 6px; border-radius: 4px;
}
.blue-bg { background: #bfdbfe; } .purple-bg { background: #ddd6fe; } .green-bg { background: #bbf7d0; }

.rating-stars { color: #fbbf24; font-size: 0.8rem; margin: 5px 0; }
.rating-stars span { color: var(--text-muted); margin-right: 5px; }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 15px; }
.tag { font-size: 0.8rem; background: rgba(59, 130, 246, 0.1); color: var(--primary); padding: 2px 8px; border-radius: 4px; }
.dl-btn {
    border: 1px solid var(--primary); background: transparent; color: var(--primary);
    padding: 5px 15px; border-radius: 20px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.dl-btn:hover { background: var(--primary); color: white; }
/* 1. حاوية التمرير الأفقي */
.collections-wrapper {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 20px 5px; /* مسافة للظلال */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* لمتصفح فايرفوكس - اخفاء الشريط */
}

/* اخفاء شريط التمرير لكروم وسفاري */
.collections-wrapper::-webkit-scrollbar {
    display: none;
}

/* 2. تصميم البطاقة */
.c-card {
    min-width: 280px;
    flex: 0 0 auto;
    position: relative;
    border-radius: 24px;
    padding: 2px; /* مسافة للحدود المتدرجة */
    background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    scroll-snap-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

/* الخلفية الزجاجية الداخلية */
.c-inner {
    background: rgba(20, 20, 30, 0.85); /* لون داكن شبه شفاف */
    backdrop-filter: blur(12px);
    border-radius: 22px; /* أصغر قليلاً من الخارجي */
    padding: 30px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* 3. تأثيرات الهوفر (Hover) */
.c-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.c-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 24px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.c-card:hover::before {
    opacity: 1;
}

/* 4. الأيقونة */
.c-icon-box {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    margin-bottom: 15px;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3); /* توهج أزرق */
    transition: all 0.4s ease;
}

.c-card:hover .c-icon-box {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #4f46e5, #ec4899); /* تدرج لوني عند الهوفر */
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
    border-color: transparent;
}

/* 5. النصوص */
.c-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.c-desc {
    font-size: 0.9rem;
    color: #a0aec0;
    margin-bottom: 25px;
    line-height: 1.6;
    min-height: 45px; /* لضمان ارتفاع موحد */
}

/* 6. الفوتر (الشارة والزر) */
.c-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 15px;
    margin-top: auto;
}

.c-badge {
    background: rgba(79, 70, 229, 0.15);
    color: #818cf8;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.c-link {
    font-size: 0.85rem;
    color: #fff;
    opacity: 0.8;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.c-card:hover .c-link {
    opacity: 1;
    color: #ec4899;
}

.c-link i {
    transition: transform 0.3s ease;
}

.c-card:hover .c-link i {
    transform: translateX(-5px); /* تحريك السهم */
}
/* Timeline */
.timeline-container { padding: 25px; }
.timeline-item {
    position: relative; padding-right: 30px; padding-bottom: 25px;
    border-right: 2px solid rgba(0,0,0,0.1);
}
.timeline-item:last-child { border-right: none; padding-bottom: 0; }
.timeline-item::before {
    content: ''; position: absolute; right: -7px; top: 5px; width: 12px; height: 12px;
    background: var(--success); border-radius: 50%; box-shadow: 0 0 0 4px var(--glass-bg);
}
.tl-date { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; }
.tl-content h4 { font-size: 1rem; color: var(--text-main); margin-bottom: 3px; }
.tl-content p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; }

/* Versus */
.versus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs-card { padding: 25px; text-align: center; }
.vs-header { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; font-weight: 800; font-family: var(--font-display); }
.vs-icon {
    width: 40px; height: 40px; background: var(--danger); color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-style: italic;
}
.read-btn { display: inline-block; margin-top: 15px; color: var(--primary); font-weight: bold; text-decoration: underline; }

/* Gaming Zone & Game Cards (UPDATED) */
.gaming-zone {
    background: linear-gradient(to right, #111827, #1f2937); border-radius: var(--radius-lg);
    padding: 30px; color: white; margin-bottom: 50px; position: relative; overflow: hidden;
}
.gaming-zone::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDUiLz4KPC9zdmc+');
    opacity: 0.3;
}
.zone-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; position: relative; z-index: 2; }
.games-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; position: relative; z-index: 2; }

/* --- 1. Cyber Link Button (زر العنوان) --- */
.cyber-btn-link {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.cyber-btn-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); /* توهج بنفسجي خفيف */
    transform: translateX(-5px);
}

/* --- 2. Portal Card (البطاقة الأخيرة) --- */
.portal-card {
    min-width: 180px; /* نفس عرض باقي البطاقات */
    display: flex;
    flex-direction: column;
}

.portal-inner {
    height: 240px; /* نفس ارتفاع صورة اللعبة */
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* الأيقونة داخل البطاقة */
.portal-icon {
    width: 60px;
    height: 60px;
    background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة */
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    transition: transform 0.5s ease;
}

.portal-inner h4 {
    font-size: 1rem;
    color: white;
    margin-bottom: 5px;
}

.portal-inner p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* تأثير التمرير (Hover) على بطاقة البوابة */
.portal-card:hover .portal-inner {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
    transform: translateY(15px);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.portal-card:hover .portal-icon {
    transform: scale(1.2) rotate(15deg);
    background: var(--success);
    color: white;
    box-shadow: 0 0 15px var(--success);
}
/* إعدادات بطاقة اللعبة */
.game-card {
    min-width: 180px;
    /* إزالة الحدود والتأثيرات من الحاوية لتجنب التضارب */
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.3s ease;
}

/* إعدادات الصورة المصغرة للعبة */
.game-thumb {
    height: 240px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    position: relative;
    /* الحدود شفافة افتراضياً */
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* عند تمرير الماوس على البطاقة، التأثير يطبق على الصورة فقط */
.game-card:hover .game-thumb {
    transform: scale(1.03);
    /* لون الحدود يأتي من متغير الـ CSS */
    border-color: var(--hover-color) !important;
    /* الظل يأتي من متغير الـ CSS */
    box-shadow: 0 0 15px var(--hover-color);
}
/* عند مرور الماوس على البطاقة، يتغير لون الوسم لنفس لون اللعبة */
.game-card:hover .g-tag {
    color: var(--hover-color) !important;
}

/* رفع البطاقة بالكامل قليلاً عند التمرير */
.game-card:hover {
    transform: translateY(-5px);
}

.game-info { margin-top: 10px; }
.game-info h4 { font-size: 1rem; margin-bottom: 5px; transition: color 0.3s; }
.g-tag {
    font-size: 0.75rem;
    color: #a78bfa; /* اللون الافتراضي */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease; /* إضافة نعومة عند تغير اللون */
}

/* FAQ */

.faq-wrapper { padding: 10px; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.05); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
    width: 100%; background: none; border: none; padding: 20px; text-align: right;
    font-family: inherit; font-weight: bold; font-size: 1rem; color: var(--text-main);
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.faq-question i { transition: 0.3s; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--primary); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.active .arrow-icon {
    transform: rotate(180deg);
}
.answer-content {
    padding: 15px 20px;
    background: rgba(0,0,0,0.02);
}
.faq-item.active .faq-answer { padding-bottom: 20px; }

/* Guides & Ads */
.guides-wrapper { display: flex; flex-direction: column; gap: 20px; }
.guide-item { display: flex; gap: 20px; padding: 20px; align-items: center; }
.gi-img { width: 160px; height: 110px; background: #cbd5e1; border-radius: var(--radius-sm); flex-shrink: 0; overflow: hidden; }
.gi-img.two { background: #94a3b8; }
.gi-img img { width: 100%; height: 100%; object-fit: cover; }
.gi-meta { font-size: 0.8rem; margin-bottom: 5px; color: var(--text-muted); }
.gi-meta .cat { color: var(--primary); font-weight: bold; margin-left: 10px; }
.guide-item h3 { font-size: 1.1rem; margin-bottom: 5px; }

.difficulty-badge {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; color: #fff;
}
.difficulty-badge.easy { background: #2ecc71; }
.difficulty-badge.medium { background: #f1c40f; color: #333; }
.difficulty-badge.hard { background: #e74c3c; }

.cat-tag { color: var(--accent); font-weight: bold; font-size: 12px; }
.read-time { font-size: 12px; color: #888; margin-right: 10px; }
.gi-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
.read-more { font-size: 12px; color: var(--primary); }
.placeholder-icon { background: #2c3e50; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; }

.ad-wide {
    width: 100%; height: 120px; margin: 40px 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.02);
}
.ad-content::after { content: attr(data-text); color: #94a3b8; font-size: 0.9rem; }

/* =========================================
   5. SIDEBAR & WIDGETS
   ========================================= */
.sidebar-col { display: flex; flex-direction: column; gap: 25px; }
.widget { padding: 25px; }
.widget h4 { border-bottom: 2px solid rgba(0,0,0,0.05); padding-bottom: 10px; margin-bottom: 20px; font-size: 1.1rem; }

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-btn { height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: white; font-size: 1.2rem; }
.fb { background: #1877f2; } .tw { background: #1da1f2; } .tg { background: #0088cc; } .yt { background: #ff0000; }

.trending-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed rgba(0,0,0,0.05); }
.trending-list .num { font-size: 1.5rem; font-weight: 900; color: rgba(0,0,0,0.1); font-family: var(--font-display); }
.tl-info a { font-weight: bold; display: block; line-height: 1.2; }
.tl-info small { color: var(--text-muted); font-size: 0.8rem; }

.categories-list { list-style: none; }
.categories-list li { margin-bottom: 12px; }
.categories-list a {
    display: flex; justify-content: space-between; padding: 10px 15px;
    background: rgba(0,0,0,0.02); border-radius: 8px; font-size: 0.95rem; font-weight: 600;
}
.categories-list a:hover { background: var(--primary); color: white; transform: translateX(-5px); }
.categories-list .count { background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }

.poll-question { font-weight: bold; margin-bottom: 15px; }
.poll-option { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; padding: 8px; border-radius: 6px; transition: 0.2s; }
.poll-option:hover { background: rgba(0,0,0,0.03); }
.vote-btn { width: 100%; background: var(--accent); color: white; border: none; padding: 10px; border-radius: 8px; margin-top: 10px; cursor: pointer; font-weight: bold; }
.result-bar {
    margin-bottom: 10px; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(to left, rgba(139, 92, 246, 0.2) var(--w), transparent var(--w));
    padding: 8px; border-radius: 6px; border: 1px solid rgba(139, 92, 246, 0.3);
}

.newsletter-widget { text-align: center; }
.news-icon {
    width: 60px; height: 60px; background: #e0f2fe; color: var(--primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 15px;
}
.newsletter-widget p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; }
.newsletter-widget input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 10px; }
.newsletter-widget button { width: 100%; background: var(--text-main); color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.newsletter-widget button:hover { background: var(--primary); }

.sticky-widget { position: sticky; top: 100px; }
.ad-vertical { height: 300px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.02); color: #94a3b8; }

/* =========================================
   6. FOOTER
   ========================================= */
.mega-footer { background: #0f172a; color: #f1f5f9; padding: 80px 0 30px; margin-top: 80px; position: relative; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.brand-col h2 { font-family: var(--font-display); font-size: 2rem; }
.brand-col span { color: var(--primary); }
.brand-col p { color: #94a3b8; margin: 20px 0; line-height: 1.8; }
.newsletter-form { display: flex; background: rgba(255,255,255,0.1); padding: 5px; border-radius: 50px; }
.newsletter-form input { background: transparent; border: none; padding: 10px 15px; color: white; width: 100%; }
.newsletter-form button { background: var(--primary); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

.ft-col h4 { margin-bottom: 25px; color: white; font-size: 1.1rem; }
.ft-col ul li { margin-bottom: 12px; }
.ft-col a { color: #94a3b8; transition: 0.3s; }
.ft-col a:hover { color: var(--primary); padding-right: 5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; display: flex; justify-content: space-between; color: #64748b; font-size: 0.9rem; }
.ft-links { display: flex; gap: 20px; }

/* =========================================
   7. RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .complex-layout, .article-layout { grid-template-columns: 1fr; }
    .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 15px; }
    .main-hero { grid-row: auto; height: 300px; }
    .sub-hero-1, .sub-hero-2 { height: 200px; }
    .sidebar-col { order: 2; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .nav-links, .nav-end { display: none; }
    .mobile-toggle { display: block; }
    .stats-bar { flex-direction: column; gap: 20px; }
    .pros-cons-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .c-hero { flex-direction: column; text-align: center; }
    .c-hero-text { max-width: 100%; }
    .form-row { grid-template-columns: 1fr; }
    .subcat-hero { height: auto; padding: 40px 0; text-align: center; }
    .subcat-hero h1 { justify-content: center; }
    .sticky-toolbar { flex-direction: column; align-items: stretch; }
    .search-group { max-width: 100%; }
}

@media (max-width: 600px) {
    .footer-top { grid-template-columns: 1fr; text-align: center; }
    .newsletter-form { max-width: 100%; }
    .versus-grid { grid-template-columns: 1fr; }
    .guide-item { flex-direction: column; text-align: center; }
    .gi-img { width: 100%; height: 180px; }
    .navbar { margin: 10px; padding: 0 15px; }
}

/* Search Modal */
.search-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2000; display: none; place-items: center; padding: 20px; }
.search-modal.open { display: grid; }
.search-wrap { width: 100%; max-width: 700px; padding: 20px; border-radius: 50px; display: flex; align-items: center; position: relative; }
.search-wrap input { width: 100%; border: none; background: transparent; font-size: 1.2rem; padding: 10px; color: var(--text-main); font-weight: bold; }
.search-icon { font-size: 1.5rem; color: var(--primary); margin-left: 15px; }
.close-search { background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--text-muted); position: absolute; left: 20px; }

/* =========================================
   8. ARTICLE PAGE STYLES
   ========================================= */


.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 30px; }
.breadcrumb-area { margin-top: 20px; margin-bottom: 20px; }
.breadcrumb { display: flex; list-style: none; font-size: 0.9rem; color: var(--text-muted); align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .separator { opacity: 0.5; font-size: 0.8rem; }
.breadcrumb .current { color: var(--text-main); font-weight: bold; }

.article-header { padding: 30px; margin-bottom: 30px; position: relative; overflow: hidden; }
.article-meta-top { margin-bottom: 15px; display: flex; align-items: center; gap: 15px; }
.article-meta-top .date { font-size: 0.85rem; color: var(--text-muted); }
.article-title { font-size: 2rem; line-height: 1.4; margin-bottom: 25px; font-family: var(--font-display); }

.author-box { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; padding: 10px; background: rgba(0,0,0,0.03); border-radius: 50px; width: fit-content; }
.author-img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--primary); }
.author-info { display: flex; flex-direction: column; line-height: 1.2; }
.author-info .by { font-size: 0.7rem; color: var(--text-muted); }
.author-info .name { font-size: 0.9rem; color: var(--text-main); }
.author-info .role { font-size: 0.75rem; color: var(--primary); }

.featured-image-wrapper { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-top: 20px; }
.featured-img { width: 100%; max-height: 450px; object-fit: cover; }
.img-caption { position: absolute; bottom: 0; right: 0; width: 100%; padding: 10px 20px; background: rgba(0,0,0,0.7); color: white; font-size: 0.85rem; text-align: center; }

.article-body { padding: 40px; font-size: 1.1rem; line-height: 1.9; color: #334155; }
[data-theme="dark"] .article-body { color: #cbd5e1; }
.article-body h2 { font-size: 1.8rem; margin: 40px 0 20px; color: var(--text-main); display: flex; align-items: center; gap: 10px; border-bottom: 2px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.article-body h3 { font-size: 1.4rem; margin: 30px 0 15px; color: var(--text-main); }
.article-body p { margin-bottom: 20px; }
.article-body strong { color: var(--text-main); font-weight: 800; }
.lead-text { font-size: 1.2rem; font-weight: 500; color: var(--text-main); opacity: 0.9; }

.feature-list { list-style: none; margin: 20px 0; }
.feature-list li { display: flex; gap: 15px; margin-bottom: 15px; background: rgba(59, 130, 246, 0.05); padding: 15px; border-radius: 12px; }
.feature-list i { font-size: 1.5rem; color: var(--primary); margin-top: 3px; }

.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.pc-box { padding: 20px; border-radius: var(--radius-md); border: 1px solid transparent; }
.pc-box h4 { margin-bottom: 15px; display: flex; align-items: center; gap: 8px; font-size: 1.2rem; }
.pc-box ul { list-style: none; }
.pc-box ul li { margin-bottom: 10px; position: relative; padding-right: 20px; font-size: 0.95rem; }
.pc-box ul li::before { content: '•'; position: absolute; right: 0; font-weight: bold; }
.pros { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); }
.pros h4 { color: var(--success); }
.cons { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); }
.cons h4 { color: var(--danger); }

.tech-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.tech-table td { padding: 12px 15px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.tech-table tr:first-child td { border-top: 1px solid rgba(0,0,0,0.05); }
.tech-table td:first-child { font-weight: bold; width: 30%; color: var(--text-muted); background: rgba(0,0,0,0.01); }

.download-area { margin: 50px 0; }
.download-card {
    background: linear-gradient(145deg, var(--glass-bg), rgba(255,255,255,0.4));
    border: 2px solid var(--primary); border-radius: var(--radius-lg); padding: 30px;
    text-align: center; position: relative; overflow: hidden;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
}
.dc-header { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 25px; }
.dc-icon { width: 50px; height: 50px; background: #a4c8fd; color: var(--primary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.dc-info h3 { margin: 0; font-size: 1.3rem; }
.dc-info span { font-size: 0.85rem; color: var(--success); font-weight: bold; }

.btn-download {
    display: block; width: 100%; max-width: 350px; margin: 0 auto 10px;
    background: var(--primary); color: white; padding: 15px; border-radius: 50px;
    font-weight: 800; font-size: 1.1rem; text-align: center; transition: 0.3s;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}
.btn-download:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5); }
.btn-mirror { font-size: 0.9rem; color: var(--text-muted); text-decoration: underline; }
.dc-scan { margin-top: 20px; font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 5px; }

.toc-widget { padding: 20px; }
.toc-list { list-style: none; border-right: 2px solid rgba(0,0,0,0.1); }
.toc-list li { margin-bottom: 0; }
.toc-list a {
    display: block; padding: 8px 15px; font-size: 0.95rem; color: var(--text-muted);
    border-right: 2px solid transparent; margin-right: -2px; transition: 0.2s;
}
.toc-list a:hover, .toc-list a.active {
    color: var(--primary); border-right-color: var(--primary); background: linear-gradient(to left, rgba(59, 130, 246, 0.05), transparent);
}
.toc-mobile { display: none; padding: 20px; margin-bottom: 20px; }

.visual-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 30px 0; }
.gallery-img { border-radius: var(--radius-md); transition: transform 0.3s; cursor: zoom-in; }
.gallery-img:hover { transform: scale(1.02); }

.mini-posts { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.mini-post { display: flex; gap: 15px; align-items: center; }
.mini-post img { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; }
.mp-info h5 { font-size: 0.95rem; margin-bottom: 5px; line-height: 1.3; }
.mp-info small { color: var(--primary); font-size: 0.75rem; background: rgba(59, 130, 246, 0.1); padding: 2px 6px; border-radius: 4px; }

.share-footer { padding: 20px; display: flex; align-items: center; gap: 20px; margin-top: 30px; font-weight: bold; }
.share-links { display: flex; gap: 10px; }
.sl-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 0.3s; }
.sl-btn:hover { transform: rotate(10deg); }
.wa { background: #25D366; }
.download-counter-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.download-counter-badge:hover {
    transform: translateY(-2px);
    border-color: {{ $app->theme_color }};
    box-shadow: 0 6px 20px {{ $app->theme_color }}33;
}

.counter-icon {
    position: relative;
    width: 35px;
    height: 35px;
    background: {{ $app->theme_color }};
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.pulse-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #2ecc71; /* لون أخضر للنشاط */
    border: 2px solid #fff;
    border-radius: 50%;
    animation: pulse-animation 2s infinite;
}

.counter-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.counter-number {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-color, #333);
    font-family: 'Inter', sans-serif;
}

.counter-label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 500;
}

@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* لتناسب الوضع الليلي */
[data-theme="dark"] .counter-number {
    color: #fff;
}
/* =========================================
   9. RATINGS & COMMENTS
   ========================================= */
.review-dashboard {
    padding: 30px;
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.rating-summary { text-align: center; border-left: 1px solid rgba(0,0,0,0.1); padding-left: 20px; }
.big-score { font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--text-main); font-family: var(--font-display); }
.stars-display { color: #fbbf24; font-size: 1.2rem; margin: 5px 0; }
.total-votes { font-size: 0.8rem; color: var(--text-muted); }

.rating-bars { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid rgba(0,0,0,0.1); padding-left: 20px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.progress-track { flex-grow: 1; height: 6px; background: rgba(0,0,0,0.05); border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: #fbbf24; border-radius: 10px; }

.user-action-rate { text-align: center; }
.user-action-rate p { margin-bottom: 10px; font-weight: bold; }
.interactive-stars { font-size: 1.8rem; color: #cbd5e1; cursor: pointer; direction: ltr; display: inline-block;}
.interactive-stars i { transition: 0.2s; padding: 0 2px; }
.interactive-stars i.hovered, .interactive-stars i.selected { color: #fbbf24; font-weight: 900; }

.comments-section { margin-top: 40px; }
.comment-form-box { padding: 25px; margin-bottom: 30px; border-top: 4px solid var(--primary); }
.comment-form-box h4 { margin-bottom: 15px; }

.c-form .input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.c-form input, .c-form textarea {
    width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;
    background: rgba(255,255,255,0.5); font-family: inherit; transition: 0.3s;
}
.c-form input:focus, .c-form textarea:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.submit-comment {
    background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    color: white; border: none; padding: 10px 25px; border-radius: 8px; font-weight: bold; cursor: pointer; float: left;
    transition: transform 0.2s;
}
.submit-comment:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); }

.comments-list { display: flex; flex-direction: column; gap: 20px; }
.comment-item { padding: 20px; display: flex; gap: 20px; align-items: flex-start; }
.c-avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; }
.c-content { flex-grow: 1; }
.c-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.c-name { font-size: 1rem; }
.c-date { font-size: 0.8rem; color: var(--text-muted); margin-right: auto; }
.c-text { font-size: 0.95rem; line-height: 1.5; color: var(--text-main); margin-bottom: 10px; }

.badge-role { font-size: 0.7rem; background: var(--primary); color: white; padding: 1px 6px; border-radius: 4px; }
.c-rating-badge { font-size: 0.75rem; color: #fbbf24; background: rgba(251, 191, 36, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: bold; }

.reply-btn { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.reply-btn:hover { color: var(--primary); }
.comment-item.reply { margin-right: 50px; background: rgba(59, 130, 246, 0.03); border-color: rgba(59, 130, 246, 0.1); }

/* =========================================
   10. CATEGORIES PAGE STYLES
   ========================================= */
.cat-page-header { margin-top: 30px; margin-bottom: 40px; text-align: center; }
.header-content { padding: 40px; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--glass-bg), rgba(255,255,255,0.4)); }
.header-content h1 { font-size: 2.5rem; margin-bottom: 10px; font-family: var(--font-display); }
.text-gradient { background: linear-gradient(45deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header-content p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 25px; }

.cat-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tab-btn {
    padding: 10px 25px; border: 1px solid rgba(0,0,0,0.1); background: transparent;
    border-radius: 50px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.3s;
    color: var(--text-muted);
}
.tab-btn:hover, .tab-btn.active { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-2px); }

.group-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; border-bottom: 2px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.group-title h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.count-badge { background: rgba(0,0,0,0.05); padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; }
.count-badge.red { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cat-master-card {
    padding: 25px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 240px;
    border-top: 4px solid transparent; transition: 0.3s;
}
.blue-theme { border-top-color: var(--primary); }
.purple-theme { border-top-color: var(--accent); }
.green-theme { border-top-color: var(--success); }
.orange-theme { border-top-color: var(--orange); }

.cm-icon {
    width: 60px; height: 60px; border-radius: 15px; background: rgba(0,0,0,0.03);
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 20px;
    color: var(--text-main); transition: 0.3s;
}
.cat-master-card:hover .cm-icon { transform: scale(1.1) rotate(-5deg); background: var(--text-main); color: white; }
.cm-body h3 { font-size: 1.3rem; margin-bottom: 8px; }
.cm-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; line-height: 1.4; }

.sub-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: auto; }
.sub-tags a {
    font-size: 0.75rem; background: rgba(0,0,0,0.05); padding: 4px 10px; border-radius: 6px; color: var(--text-muted);
}
.sub-tags a:hover { background: var(--primary); color: white; }

.cm-footer {
    margin-top: 20px; padding-top: 15px; border-top: 1px dashed rgba(0,0,0,0.1);
    display: flex; justify-content: space-between; align-items: center;
}
.files-num { font-size: 0.8rem; font-weight: bold; color: var(--text-muted); }
.explore-btn { width: 35px; height: 35px; border-radius: 50%; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-main); transition: 0.3s; }
.cat-master-card:hover .explore-btn { background: var(--primary); color: white; transform: translateX(-5px); }
/* حاوية التنقل */
.pagination-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

/* تنسيق روابط التنقل الخاصة بـ Laravel Bootstrap */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    background: var(--glass-bg);
    padding: 5px;
    border-radius: 50px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.page-item {
    margin: 0 2px;
}

.page-link {
    position: relative;
    display: block;
    padding: 8px 16px;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--text-muted);
    background-color: transparent;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
}

.page-link:hover {
    color: var(--primary);
    background-color: rgba(59, 130, 246, 0.1);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.page-item.disabled .page-link {
    color: #ccc;
    pointer-events: none;
    background-color: transparent;
}



/* =========================================
   CREATIVE CYBER LOADER
   ========================================= */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85); /* خلفية داكنة شفافة */
    backdrop-filter: blur(15px); /* تمويه قوي للخلفية */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* إظهار اللودر */
.loader-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cyber-core {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

/* النواة الداخلية النابضة */
.inner-circle {
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 30px var(--primary);
    animation: pulseCore 1.5s infinite ease-in-out;
    z-index: 10;
}

/* الحلقة الوسطى (دوران سريع) */
.middle-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 4px solid transparent;
    border-top-color: var(--accent);
    border-bottom-color: var(--accent);
    border-radius: 50%;
    animation: spinRight 1s linear infinite;
    filter: drop-shadow(0 0 10px var(--accent));
}

/* الحلقة الخارجية (دوران بطيء وعكسي) */
.outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: spinLeft 3s linear infinite;
}

/* خط المسح الضوئي (لمسة جمالية) */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px white;
    top: 50%;
    animation: scanMove 2s ease-in-out infinite alternate;
    opacity: 0.5;
}

.loading-text {
    font-family: var(--font-display);
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: blinkText 1.5s infinite;
}

/* Animations */
@keyframes spinRight { 100% { transform: rotate(360deg); } }
@keyframes spinLeft { 100% { transform: rotate(-360deg); } }
@keyframes pulseCore {
    0%, 100% { transform: scale(0.8); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 50px var(--primary); }
}
@keyframes scanMove {
    0% { top: 10%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 90%; opacity: 0; }
}
@keyframes blinkText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* --- B. Games Categories --- */
.games-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.game-cat-card {
    height: 300px; border-radius: var(--radius-lg); background-size: cover; background-position: center;
    position: relative; overflow: hidden; cursor: pointer; transition: 0.4s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.game-cat-card:hover { transform: translateY(-5px) scale(1.02); }
.gc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.3)); }
.gc-content {
    position: absolute; bottom: 0; right: 0; width: 100%; padding: 25px; color: white;
    transform: translateY(20px); transition: 0.4s;
}
.game-cat-card:hover .gc-content { transform: translateY(0); }
.gc-icon { font-size: 2rem; color: var(--danger); margin-bottom: 10px; }
.gc-content h3 { font-size: 1.4rem; font-family: var(--font-display); margin-bottom: 15px; }
.gc-list { list-style: none; margin-bottom: 20px; padding-right: 15px; border-right: 2px solid var(--danger); }
.gc-list li a { color: #ccc; font-size: 0.9rem; display: block; margin-bottom: 5px; }
.gc-list li a:hover { color: white; padding-right: 5px; }
.gc-btn {
    display: inline-block; background: var(--danger); color: white; padding: 8px 20px;
    border-radius: 20px; font-weight: bold; font-size: 0.9rem; opacity: 0; transition: 0.4s 0.1s;
}
.game-cat-card:hover .gc-btn { opacity: 1; }

/* --- C. Knowledge Grid --- */
/* --- Tech/Knowledge Cards Styles --- */
.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.tech-card {
    position: relative;
    height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* صورة الخلفية */
.tc-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(3px) grayscale(40%); /* تغبيش وتقليل الألوان للتركيز على النص */
    transition: all 0.5s ease;
    transform: scale(1.1);
}

/* طبقة تعتيم */
.tc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.6));
    z-index: 1;
}

.tc-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: white;
}

/* الجزء العلوي (الأيقونة والعدد) */
.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.tc-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent); /* اللون البنفسجي */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.article-count {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* النصوص */
.tc-body h4 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 5px;
    font-family: var(--font-display);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tc-body p {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.4;
    opacity: 0.8;
}

/* الفوتر (أحدث مقال) */
.tc-footer {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.new-badge {
    font-size: 0.65rem;
    background: var(--success);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    animation: pulse-green 2s infinite;
}

.latest-title {
    font-size: 0.8rem;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Hover Effects --- */
.tech-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
}

.tech-card:hover .tc-bg {
    filter: blur(0) grayscale(0); /* إزالة التغبيش عند التمرير */
    transform: scale(1);
}

.tech-card:hover .tc-icon {
    background: var(--accent);
    color: white;
    transform: rotate(-10deg);
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.know-card {
    display: flex; align-items: center; padding: 20px; gap: 20px; transition: 0.3s;
}

.subcat-list a.active-link {
    color: var(--primary);
    font-weight: bold;
    background: rgba(59, 130, 246, 0.1);
    padding-right: 15px; /* إزاحة بسيطة للتميز */
}
.kc-icon {
    width: 50px; height: 50px; background: rgba(139, 92, 246, 0.1); color: var(--accent);
    border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.kc-info h4 { margin: 0 0 5px 0; font-size: 1.1rem; }
.kc-info span { font-size: 0.9rem; color: var(--text-muted); }
.arrow { margin-right: auto; color: var(--text-muted); transition: 0.3s; }
.know-card:hover .arrow { transform: translateX(-5px); color: var(--primary); }

.sidebar-search { display: flex; background: rgba(0,0,0,0.05); border-radius: 8px; padding: 5px; }
.sidebar-search input { width: 100%; border: none; background: transparent; padding: 10px; }
.sidebar-search button { width: 40px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
    font-size: 0.8rem; background: rgba(0,0,0,0.05); padding: 5px 10px; border-radius: 20px; color: var(--text-muted); font-weight: 600;
}
.tag-cloud a:hover { background: var(--text-main); color: white; }

/* =========================================
   11. CONTACT & ABOUT PAGE STYLES
   ========================================= */
.contact-header { margin-top: 30px; margin-bottom: 40px; }
.c-hero {
    display: flex; align-items: center; justify-content: space-between;
    padding: 50px; background: linear-gradient(135deg, var(--glass-bg), rgba(255,255,255,0.4));
    overflow: hidden; position: relative;
}
.c-hero-text { max-width: 60%; position: relative; z-index: 2; }
.c-hero-text h1 { font-size: 3rem; margin: 15px 0; font-family: var(--font-display); line-height: 1.2; }
.c-hero-text p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 30px; }

.c-stats-row { display: flex; gap: 40px; }
.c-stats-row .stat strong { display: block; font-size: 1.8rem; color: var(--primary); font-family: var(--font-display); }
.c-stats-row .stat span { font-size: 0.9rem; color: var(--text-muted); }

.c-hero-img {
    position: absolute; left: -50px; top: 50%; transform: translateY(-50%);
    opacity: 0.1; font-size: 15rem; color: var(--primary); z-index: 1; pointer-events: none;
}

.info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
.info-card { padding: 25px; text-align: center; border-bottom: 3px solid transparent; transition: 0.3s; }
.info-card:hover { border-bottom-color: var(--primary); }
.ic-icon {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 15px; color: white;
}
.info-card h3 { font-size: 1.1rem; margin-bottom: 5px; }
.info-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
.info-card a { font-weight: bold; color: var(--primary); font-size: 0.9rem; }

.contact-form-section { padding: 40px; margin-bottom: 50px; }
.form-header { margin-bottom: 30px; border-bottom: 1px dashed rgba(0,0,0,0.1); padding-bottom: 15px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; transition: 0.3s; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.9rem; color: var(--text-main); }
.input-wrapper {
    position: relative; display: flex; align-items: center;
    background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1); border-radius: 10px;
    transition: 0.3s;
}
.input-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); background: white; }
.input-wrapper i { width: 40px; text-align: center; color: var(--text-muted); font-size: 1rem; }
.input-wrapper input, .input-wrapper select, .input-wrapper textarea {
    width: 100%; border: none; background: transparent; padding: 12px 10px 12px 0;
    font-family: inherit; font-size: 1rem; color: var(--text-main);
}
.input-wrapper.top-align { align-items: flex-start; }
.input-wrapper.top-align i { margin-top: 15px; }
.submit-btn-lg {
    width: 100%; padding: 15px; background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: bold;
    cursor: pointer; transition: 0.3s; margin-top: 10px;
}
.submit-btn-lg:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.team-card { padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.member-img img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--glass-border); padding: 3px; margin-bottom: 15px; object-fit: cover; }
.member-info h4 { font-size: 1.1rem; margin-bottom: 5px; }
.member-info span { font-size: 0.85rem; color: var(--primary); display: block; margin-bottom: 10px; }
.member-social { display: flex; gap: 10px; justify-content: center; }
.member-social a { width: 30px; height: 30px; background: rgba(0,0,0,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: 0.3s; }
.member-social a:hover { background: var(--primary); color: white; }

.location-widget .fake-map {
    height: 180px; background-color: #e5e7eb; border-radius: 10px; position: relative;
    background-image: url('https://mt1.google.com/vt/lyrs=m&x=133&y=89&z=8');
    background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center;
    overflow: hidden;
}
.fake-map::before { content: ''; position: absolute; inset: 0; background: rgba(59, 130, 246, 0.2); }
.map-pin { font-size: 2rem; color: var(--danger); animation: bounce 2s infinite; z-index: 2; margin-bottom: 5px; }
.loc-text { position: relative; z-index: 2; background: white; padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }

.faq-list-sm { list-style: none; }
.faq-list-sm li { margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.faq-list-sm summary { font-weight: bold; cursor: pointer; color: var(--text-main); font-size: 0.9rem; }
.faq-list-sm p { font-size: 0.85rem; color: var(--text-muted); margin-top: 5px; padding-right: 15px; }

.social-counter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; text-align: center; }
.sc-item { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.03); transition: 0.3s; }
.sc-item i { font-size: 1.2rem; margin-bottom: 5px; }
.sc-item span { font-weight: bold; font-size: 0.9rem; font-family: var(--font-display); }
.sc-item.fb:hover { background: #1877f2; color: white; }
.sc-item.tg:hover { background: #0088cc; color: white; }
.sc-item.yt:hover { background: #ff0000; color: white; }

/* =========================================
   12. SUB-CATEGORY & LISTING STYLES
   ========================================= */
.subcat-hero {
    position: relative; height: 350px; display: flex; align-items: center;
    margin-bottom: 40px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px;
    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: blur(2px); z-index: 1; transform: scale(1.1);
}
.hero-overlay-gradient {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 40%, rgba(15, 23, 42, 0.6));
}
.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero-text { max-width: 600px; color: white; }

.breadcrumb-hero { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; margin-bottom: 15px; opacity: 0.8; }
.breadcrumb-hero a { color: white; text-decoration: underline; }
.breadcrumb-hero i { font-size: 0.7rem; }
.subcat-hero h1 { font-size: 2.5rem; margin-bottom: 15px; font-family: var(--font-display); display: flex; align-items: center; gap: 15px; }

.featured-item-mini {
    display: flex; align-items: center; gap: 15px; padding: 10px 20px;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    width: fit-content; border-radius: 50px; backdrop-filter: blur(10px);
}
.featured-item-mini img { width: 40px; height: 40px; border-radius: 10px; }
.fi-info { display: flex; flex-direction: column; font-size: 0.9rem; margin-left: 10px; }
.fi-info strong { color: var(--accent); font-size: 0.75rem; }
.fi-btn {
    background: white; color: var(--text-main); padding: 5px 15px; border-radius: 20px;
    font-weight: bold; font-size: 0.85rem; transition: 0.3s;
}
.fi-btn:hover { background: var(--primary); color: white; }

/* .collections-slider { margin-bottom: 40px; } */
.collections-slider {
    width: 100%;
    overflow: hidden; /* يمنع أي خروج للمحتوى عن الحاوية */
}
.section-head-sm { margin-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.section-head-sm h3 { font-size: 1.2rem; }

.collections-wrapper { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; }
.collection-card {
    min-width: 200px; height: 100px; border-radius: 15px; padding: 20px;
    display: flex; flex-direction: column; justify-content: center;
    color: white; position: relative; overflow: hidden; text-decoration: none;
    transition: transform 0.3s;
}
.collection-card:hover { transform: translateY(-5px); }
.collection-card span { font-weight: bold; font-size: 1.1rem; position: relative; z-index: 2; }
.collection-card small { font-size: 0.85rem; opacity: 0.8; position: relative; z-index: 2; margin-top: 5px; }
.c-1 { background: linear-gradient(45deg, #4f46e5, #818cf8); }
.c-2 { background: linear-gradient(45deg, #dc2626, #f87171); }
.c-3 { background: linear-gradient(45deg, #059669, #34d399); }
.c-4 { background: linear-gradient(45deg, #d946ef, #e879f9); }

.sticky-toolbar {
    position: sticky; top: 100px; z-index: 90; margin-bottom: 30px;
    padding: 15px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between;
}
.filter-group { display: flex; gap: 10px; }
.ft-btn {
    background: transparent; border: 1px solid rgba(0,0,0,0.1); padding: 8px 15px;
    border-radius: 20px; font-weight: bold; cursor: pointer; color: var(--text-muted); transition: 0.3s;
}
.ft-btn.active, .ft-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.search-group { position: relative; flex-grow: 1; max-width: 400px; }
.search-group input {
    width: 100%; background: rgba(0,0,0,0.03); border: none; padding: 8px 35px 8px 15px;
    border-radius: 8px;
}
.search-group i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.sort-group select {
    background: transparent; border: none; font-weight: bold; color: var(--text-main); cursor: pointer;
}

.content-grid-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.item-card { padding: 20px; display: flex; flex-direction: column; height: 100%; position: relative; }
.ic-top { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 0.75rem; font-weight: bold; }
.badge-mod { color: var(--accent); background: rgba(139, 92, 246, 0.1); padding: 2px 8px; border-radius: 4px; }
.badge-free { color: var(--success); background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 4px; }
.badge-ver { color: var(--text-muted); }

.ic-body { display: flex; gap: 15px; margin-bottom: 15px; }
.ic-img { width: 70px; height: 70px; flex-shrink: 0; }
.ic-img img { width: 100%; height: 100%; border-radius: 15px; object-fit: cover; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.ic-info h3 { font-size: 1.1rem; margin-bottom: 5px; line-height: 1.3; }
.ic-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.ic-info p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-footer {
    margin-top: auto; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 15px;
    display: flex; justify-content: space-between; align-items: center;
}
.size-tag { font-size: 0.8rem; color: var(--text-muted); background: rgba(0,0,0,0.03); padding: 2px 6px; border-radius: 4px; }
.dl-btn-sm {
    background: var(--primary); color: white; padding: 6px 15px; border-radius: 20px;
    font-size: 0.85rem; font-weight: bold; transition: 0.3s;
}
.dl-btn-sm:hover { background: var(--primary-dark); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); }

.subcat-list { list-style: none; }
.subcat-list li { margin-bottom: 8px; }
.subcat-list a {
    display: flex; justify-content: space-between; padding: 10px; border-radius: 8px;
    transition: 0.2s; color: var(--text-main);
}
.subcat-list a:hover { background: rgba(59, 130, 246, 0.05); padding-right: 15px; color: var(--primary); }
.subcat-list .num { font-size: 0.8rem; color: var(--text-muted); background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 10px; }

.top-item { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.top-item:last-child { border-bottom: none; }
.rank { font-weight: 900; color: #cbd5e1; font-size: 1.2rem; width: 20px; text-align: center; }
.rank.first { color: #fbbf24; }
.top-item .icon { width: 45px; height: 45px; border-radius: 10px; }
.top-item .info { display: flex; flex-direction: column; }
.top-item .info a { font-weight: bold; font-size: 0.95rem; }
.top-item .info small { font-size: 0.75rem; color: var(--text-muted); }

.pagination-area {
    display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; padding: 15px;
}
.pg-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent; border: 1px solid rgba(0,0,0,0.1);
    color: var(--text-main); font-weight: bold; transition: 0.3s;
}
.pg-btn:hover:not(.disabled), .pg-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.pg-btn.disabled { opacity: 0.5; cursor: not-allowed; }

.update-info {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 8px;
    display: block;
}
.last-update-tag {
    background: rgba(0,0,0,0.5);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    color: #fff;
}
.tc-footer-seo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 0.75rem;
}
/* =========================================
   13. SEARCH & PAGINATION UTILS
   ========================================= */
.no-results-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    background: rgba(255,255,255,0.3);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    border: 2px dashed rgba(0,0,0,0.1);
}
.no-results-message i { font-size: 4rem; margin-bottom: 20px; color: var(--primary); opacity: 0.5; }
.no-results-message h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--text-main); }

.grid-loading {
    position: relative;
    pointer-events: none;
}
.grid-loading::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
    z-index: 10;
    border-radius: var(--radius-lg);
}
.grid-loading::before {
    content: '';
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 50px; height: 50px;
    border: 5px solid rgba(0,0,0,0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 11;
}

/* تنسيق الاقتباسات داخل المقال */
.article-body blockquote {
    border-right: 4px solid var(--primary);
    background: rgba(59, 130, 246, 0.05);
    padding: 20px;
    margin: 25px 0;
    font-style: italic;
    border-radius: var(--radius-sm);
    color: var(--text-main);
}
.sticky-sidebar {
    position: sticky;
    top: 20px;
}
.toc-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}
.toc-list li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 8px;
}
.toc-list li:last-child { border: 0; }
.toc-link {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
    display: block;
}
.toc-link:hover, .toc-link.active {
    color: var(--accent);
    padding-right: 5px;
}
.ad-placeholder {
    background: #f8f9fa;
    border: 2px dashed #ddd;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    border-radius: 8px;
}

/* تنسيق صناديق الكود داخل المقال */
.article-body pre {
    background: #1e293b;
    color: #f8fafc;
    padding: 20px;
    border-radius: var(--radius-md);
    direction: ltr; /* الأكواد دائماً من اليسار لليمين */
    overflow-x: auto;
    margin: 25px 0;
    font-family: 'monospace';
    line-height: 1.5;
}

.article-body code {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }


/* =========================================
   NEW PRO CATEGORY STYLES (Dynamic Light/Dark)
   ========================================= */

/* 1. تعريف المتغيرات الخاصة بهذا القسم للوضع النهاري (الافتراضي) */
:root {
    --cyber-banner-bg: linear-gradient(135deg, #ffffff, #f8fafc);
    --cyber-banner-border: rgba(0, 0, 0, 0.1);
    --cyber-banner-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);
    --cyber-grid-color: rgba(59, 130, 246, 0.08);

    --card-pro-bg: rgba(255, 255, 255, 0.85);
    --card-pro-border: rgba(0, 0, 0, 0.08);
    --card-pro-hover-bg: #ffffff;
    --card-pro-shadow-hover: 0 20px 40px -10px rgba(59, 130, 246, 0.15);

    --text-cyber-title: #1e293b; /* غامق للنهاري */
    --text-cyber-desc: #64748b;
    --hud-bg: rgba(59, 130, 246, 0.05);
    --hud-border: rgba(59, 130, 246, 0.1);
    --hud-text: #334155;
}

/* 2. تحديث المتغيرات للوضع الليلي (Dark Mode) */
[data-theme="dark"] {
    --cyber-banner-bg: linear-gradient(135deg, rgba(20, 20, 30, 0.8), rgba(30, 40, 60, 0.6));
    --cyber-banner-border: rgba(255, 255, 255, 0.1);
    --cyber-banner-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    --cyber-grid-color: rgba(59, 130, 246, 0.05);

    --card-pro-bg: rgba(30, 41, 59, 0.6);
    --card-pro-border: rgba(255, 255, 255, 0.08);
    --card-pro-hover-bg: rgba(30, 41, 59, 0.8);
    --card-pro-shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.5);

    --text-cyber-title: #f1f5f9; /* فاتح لليلي */
    --text-cyber-desc: #cbd5e1;
    --hud-bg: rgba(0, 0, 0, 0.3);
    --hud-border: rgba(255, 255, 255, 0.05);
    --hud-text: #94a3b8;
}

/* --- 3. Background Grid Animation --- */
.category-header-wrapper {
    position: relative;
    padding: 2rem 0;
    overflow: hidden;
    margin-top: -20px;
}

.cyber-grid-bg {
    position: absolute; inset: 0;
    /* استخدام المتغير اللوني للشبكة */
    background-image:
        linear-gradient(var(--cyber-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--cyber-grid-color) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
    /* في النهاري نخفف القناع قليلاً */
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

/* --- 4. Cyber Banner --- */
.cyber-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem;
    border: 1px solid var(--cyber-banner-border);
    background: var(--cyber-banner-bg);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: var(--cyber-banner-shadow);
    position: relative;
    overflow: hidden;
    transition: 0.3s ease;
}

/* شعاع ضوئي يمر فوق البانر */
.cyber-banner::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    animation: shine 6s infinite;
    pointer-events: none;
}

@keyframes shine { 20% { left: 200%; } 100% { left: 200%; } }

.banner-content { display: flex; align-items: center; gap: 20px; z-index: 2; }

.banner-icon-wrapper {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: white;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
    transform: rotate(-5deg);
}

.banner-text h1 {
    font-size: 2.5rem; font-weight: 900; line-height: 1.1; margin: 0;
    font-family: var(--font-display);
    color: var(--text-cyber-title); /* استخدام متغير النص */
}
/* تأثير Glitch بسيط للنص */
[data-theme="dark"] .glitch-text {
    background: linear-gradient(to right, #fff, #cbd5e1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="light"] .glitch-text {
    background: linear-gradient(to right, #1e293b, #3b82f6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.banner-text p {
    color: var(--text-cyber-desc);
    margin-top: 0.5rem;
}

/* HUD Stats */
.banner-stats-hud {
    display: flex; align-items: center; gap: 20px;
    background: var(--hud-bg);
    padding: 15px 25px; border-radius: 16px;
    border: 1px solid var(--hud-border);
}

.hud-item { display: flex; flex-direction: column; align-items: center; }
.hud-val { font-size: 1.8rem; font-weight: 800; color: var(--primary); line-height: 1; }
.hud-label { font-size: 0.75rem; color: var(--hud-text); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
.hud-line { width: 1px; height: 40px; background: var(--hud-border); }

/* --- 5. Toolbar --- */
.glass-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px;
    background: var(--card-pro-bg); /* استخدام نفس خلفية الكروت */
    border: 1px solid var(--card-pro-border);
    border-radius: 50px;
    margin-bottom: 2rem;
}
.breadcrumb-st { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
.breadcrumb-st a:hover { color: var(--primary); }
.breadcrumb-st .sep { opacity: 0.3; }
.breadcrumb-st .active { color: var(--text-main); font-weight: bold; }

.filter-pills { display: flex; gap: 10px; }
.pill {
    padding: 6px 16px; font-size: 0.85rem; border-radius: 20px; cursor: pointer;
    transition: 0.3s; color: var(--text-muted);
    background: rgba(0,0,0,0.05); /* حيادي */
}
[data-theme="dark"] .pill { background: rgba(255,255,255,0.05); }

.pill:hover, .pill.active { background: var(--primary); color: white; }

/* --- 6. PRO GRID & CARDS (The Main Attraction) --- */
.pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.pro-card {
    background: var(--card-pro-bg);
    border: 1px solid var(--card-pro-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    display: flex; flex-direction: column;
}

.pro-card:hover {
    transform: translateY(-8px);
    background: var(--card-pro-hover-bg);
    border-color: var(--accent-color); /* يتغير لون الإطار حسب الصعوبة */
    box-shadow: var(--card-pro-shadow-hover);
}

.pc-image-wrap {
    height: 220px; position: relative; overflow: hidden;
}
.pc-image-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.pro-card:hover .pc-image-wrap img { transform: scale(1.1); }

.pc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
    opacity: 0.6; transition: 0.3s;
}
.pro-card:hover .pc-overlay { opacity: 0.4; }

.pc-badge {
    position: absolute; top: 15px; right: 15px;
    padding: 6px 14px; border-radius: 30px;
    color: white; font-size: 0.75rem; font-weight: 800;
    z-index: 5;
    /* إضافة ظل خفيف للنص ليظهر بوضوح */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.pc-content {
    padding: 20px; flex-grow: 1; display: flex; flex-direction: column;
}

.pc-meta {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px;
}
.pc-meta i { color: var(--primary); margin-left: 5px; }

.pc-title {
    font-size: 1.15rem; font-weight: 700; line-height: 1.5; margin-bottom: 10px;
}
.pc-title a {
    color: var(--text-cyber-title); /* لون متغير */
    transition: 0.3s;
    text-decoration: none;
}
/* تأثير الهوفر على العنوان */
.pro-card:hover .pc-title a {
    color: var(--primary);
}

.pc-excerpt {
    font-size: 0.9rem; color: var(--text-cyber-desc); line-height: 1.6;
    margin-bottom: 20px; opacity: 0.9;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pc-footer {
    margin-top: auto; padding-top: 15px;
    border-top: 1px dashed var(--card-pro-border);
    display: flex; justify-content: space-between; align-items: center;
}

.pc-btn {
    font-size: 0.9rem; font-weight: bold; color: var(--primary);
    display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.pro-card:hover .pc-btn { gap: 12px; color: var(--accent-color); }

.pc-type-icon {
    width: 35px; height: 35px; border-radius: 50%;
    background: rgba(0,0,0,0.05); /* خلفية حيادية */
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: 0.3s;
}
[data-theme="dark"] .pc-type-icon { background: rgba(255,255,255,0.05); }

.pro-card:hover .pc-type-icon {
    background: var(--accent-color); color: white; box-shadow: 0 0 15px var(--accent-color);
}

/* --- Responsive Tweaks --- */
@media (max-width: 768px) {
    .cyber-banner { flex-direction: column; text-align: center; gap: 20px; }
    .banner-stats-hud { width: 100%; justify-content: space-around; }
    .banner-icon-wrapper { margin-bottom: 10px; transform: rotate(0); }
    .hud-line { display: none; }
}

/* Animation Utilities */
.fade-in-up { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   PRO ARTICLE DESIGN SYSTEM
   ========================================= */

/* --- 1. Reading Progress Bar --- */
#progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 4px;
    z-index: 9999; background: transparent;
}
#progress-bar {
    height: 4px; background: var(--primary); width: 0%;
    box-shadow: 0 0 10px var(--primary); transition: width 0.1s;
}

/* --- 2. Layout & Header --- */
.article-ambient-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 600px;
    background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15), transparent 70%);
    z-index: -1; pointer-events: none;
}

.article-header-pro { padding: 40px 40px 20px; text-align: right; }

.header-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pro-tag {
    background: rgba(59, 130, 246, 0.1); color: var(--primary);
    padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 0.85rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.difficulty-dot {
    display: inline-block; padding: 5px 12px; border-radius: 20px;
    font-size: 0.75rem; font-weight: bold; color: white;
}
.difficulty-dot.easy { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
.difficulty-dot.medium { background: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
.difficulty-dot.hard { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }

.article-main-title {
    font-size: 2.5rem; line-height: 1.3; font-weight: 900; margin-bottom: 25px;
    font-family: var(--font-display);
    color: var(--text-main);
}

.header-meta {
    display: flex; align-items: center; gap: 20px; border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px; flex-wrap: wrap;
}
.author-mini { display: flex; align-items: center; gap: 10px; }
.av-img {
    width: 40px; height: 40px; border-radius: 50%; background: var(--text-main); color: var(--bg-body);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.av-txt { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.85rem; }
.av-txt span { opacity: 0.7; }
.meta-divider { width: 1px; height: 30px; background: rgba(0,0,0,0.1); }
.meta-item { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }

/* --- 3. Hero Image --- */
.post-hero-wrapper {
    margin: 20px; border-radius: 16px; overflow: hidden;
    height: 400px; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.main-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 10s ease; }
.post-hero-wrapper:hover .main-cover { transform: scale(1.1); }

/* --- 4. Content Typography --- */
.article-body-wrapper { padding: 40px; }
.article-content { font-size: 1.15rem; line-height: 1.9; color: var(--text-main); }

/* Drop Cap */
.article-content > p:first-of-type::first-letter {
    font-size: 3.5rem; float: right; line-height: 0.8; margin-left: 10px;
    color: var(--primary); font-family: var(--font-display); font-weight: 900;
}

.article-content h2 {
    font-size: 1.8rem; margin: 50px 0 25px; position: relative;
    padding-right: 20px; color: var(--text-main);
}
.article-content h2::before {
    content: ''; position: absolute; right: 0; top: 5px; bottom: 5px; width: 4px;
    background: var(--primary); border-radius: 4px;
}

.article-content p { margin-bottom: 25px; opacity: 0.9; }
.article-content ul { margin-bottom: 30px; padding-right: 20px; }
.article-content li { margin-bottom: 10px; position: relative; }
.article-content li::marker { color: var(--primary); font-weight: bold; }

/* --- 5. Code Blocks (Mac Style) --- */
.code-wrapper {
    margin: 30px 0; border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}
.code-header {
    background: #1e293b; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dots { display: flex; gap: 6px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; }
.dots span:nth-child(1) { background: #ff5f56; }
.dots span:nth-child(2) { background: #ffbd2e; }
.dots span:nth-child(3) { background: #27c93f; }

.copy-code-btn {
    background: rgba(255,255,255,0.1); border: none; color: #ccc;
    font-size: 0.8rem; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: 0.3s;
}
.copy-code-btn:hover { background: rgba(255,255,255,0.2); color: white; }

.article-content pre {
    margin: 0 !important; background: #0f172a !important; border-radius: 0 !important;
    padding: 20px !important; color: #e2e8f0; font-family: 'Consolas', monospace; overflow-x: auto;
}

/* --- 6. FAQ Pro --- */
.cyber-divider { border: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent); margin: 50px 0; }
.faq-section-pro { margin-top: 30px; }
.pro-sec-title { font-size: 1.5rem; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
.icon-sq {
    width: 35px; height: 35px; background: var(--primary); color: white;
    display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1rem;
}
.faq-grid { display: grid; gap: 15px; }
.faq-card {
    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; overflow: hidden;
    transition: 0.3s;
}
.faq-q {
    padding: 15px 20px; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center;
}
.faq-q i { transition: 0.3s; font-size: 0.8rem; color: var(--text-muted); }
.faq-card.active { background: white; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-color: var(--primary); }
[data-theme="dark"] .faq-card.active { background: #1e293b; }
.faq-card.active .faq-q { color: var(--primary); }
.faq-card.active .faq-q i { transform: rotate(45deg); color: var(--danger); }
.faq-a { max-height: 0; overflow: hidden; transition: 0.4s; }
.faq-card.active .faq-a { max-height: 500px; }
.inner-a { padding: 0 20px 20px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

/* --- 7. Sidebar & Sticky --- */
.sticky-sidebar {
    position: sticky; top: 100px; align-self: start;
}
.info-widget { padding: 25px; margin-bottom: 20px; }
.iw-header { font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; color: var(--text-main); border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.iw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iw-item { background: rgba(0,0,0,0.03); padding: 10px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; }
.iw-item small { font-size: 0.75rem; color: var(--text-muted); }
.iw-item strong { font-size: 1.1rem; color: var(--primary); }

.widget-title { font-size: 1.1rem; margin-bottom: 20px; padding: 0 20px; border-right: 3px solid var(--accent); }
.mini-posts-list { display: flex; flex-direction: column; gap: 15px; padding: 0 20px 20px; }
.mini-post-item { display: flex; gap: 12px; align-items: center; }
.mp-img { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.mp-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-txt h6 { font-size: 0.9rem; margin: 0; line-height: 1.4; transition: 0.2s; }
.mini-post-item:hover .mp-txt h6 { color: var(--primary); }

.ad-box-sidebar { height: 250px; background: rgba(0,0,0,0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 2px dashed rgba(0,0,0,0.1); }

/* --- 8. Share Footer Pro --- */
.share-footer-pro {
    margin-top: 40px; padding: 20px; background: linear-gradient(to right, rgba(59, 130, 246, 0.05), transparent);
    border-radius: 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;
}
.sf-links { display: flex; gap: 10px; }
.sf-btn {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; transition: 0.3s; cursor: pointer; border: none; font-size: 1.1rem;
}
.sf-btn:hover { transform: translateY(-3px); }
.sf-btn.fb { background: #1877f2; }
.sf-btn.x { background: #000; }
.sf-btn.wa { background: #25D366; }
.sf-btn.cp { background: var(--text-muted); }

/* Responsive Tweaks */
@media (max-width: 768px) {
    .article-main-title { font-size: 1.8rem; }
    .post-hero-wrapper { height: 200px; margin: 15px; }
    .article-header-pro { padding: 20px; }
    .article-body-wrapper { padding: 20px; }
}


/* تصميم صندوق العروض الاحترافي */
.affiliate-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 25px;
    margin: 30px 0;
    display: flex;
    gap: 25px;
    align-items: center;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.affiliate-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.affiliate-card::before {
    content: "عرض مُميز";
    position: absolute;
    top: 15px;
    left: -35px;
    background: var(--primary);
    color: white;
    padding: 5px 40px;
    font-size: 0.75rem;
    font-weight: bold;
    transform: rotate(-45deg);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.aff-image {
    width: 140px;
    height: 140px;
    border-radius: 18px;
    object-fit: cover;
    background: #1e293b;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.aff-content {
    flex: 1;
}

.aff-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    color: #2c2b2b;
    font-family: 'Cairo', sans-serif;
}

.aff-content p {
    font-size: 0.95rem;
    color: rgba(23, 21, 21, 0.6);
    line-height: 1.6;
    margin-bottom: 20px;
}

.aff-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.aff-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
}

.aff-btn {
    background: var(--primary);
    color: white !important;
    padding: 12px 25px;
    border-radius: 12px;
    text-decoration: none !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.aff-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 20px var(--primary);
}

/* للموبايل */
@media (max-width: 600px) {
    .affiliate-card {
        flex-direction: column;
        text-align: center;
    }
    .aff-footer {
        flex-direction: column;
    }
}
/* تصميم العداد التنازلي */
.promo-timer {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: flex-start;
}

.timer-unit {
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 8px;
    padding: 5px 10px;
    min-width: 45px;
    text-align: center;
}

.timer-unit .num {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.timer-unit .label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* وميض خفيف للعداد لجذب الانتباه */
@keyframes pulse-red {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.promo-timer.ending-soon .timer-unit {
    border-color: #ef4444;
    animation: pulse-red 1s infinite;
}