/**
 * Blog Style CSS - وكالة الصقر للتسويق الرقمي
 * تصميم عصري مع تأثيرات Glass Morphism (Updated UI/UX)
 * Version: 1.1 (Performance & Conversion Optimized)
 */

/* ===== CSS Variables ===== */
:root {
    /* Brand Colors */
    --primary-dark: #083B66;
    --primary-teal: #00A7B4;
    --primary-gold: #C8A14F;
    
    /* Extended Color Palette */
    --primary-dark-light: rgba(8, 59, 102, 0.8);
    --primary-teal-light: rgba(0, 167, 180, 0.8);
    --primary-gold-light: rgba(200, 161, 79, 0.8);
    
    /* Glass Morphism Colors */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    
    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #ffffff;
    --text-muted: #95a5a6;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-dark: #2c3e50;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-teal) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-gold) 100%);
    --gradient-hero: linear-gradient(135deg, 
        rgba(8, 59, 102, 0.95) 0%, 
        rgba(0, 167, 180, 0.85) 50%, 
        rgba(200, 161, 79, 0.8) 100%);
    
    /* Spacing & Radius */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Transitions & Typography */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --font-family: 'Cairo', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
}

/* ===== Base Styles & Typography ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-family);
    line-height: 1.8; /* UX Improvement for Arabic */
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #e0eaf5 100%); /* UX Depth */
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.3; margin-bottom: var(--spacing-sm); }
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); color: var(--primary-dark); }
h3 { font-size: var(--font-size-3xl); color: var(--primary-dark); }
p { margin-bottom: var(--spacing-sm); color: var(--text-secondary); }
a { color: var(--primary-teal); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--primary-dark); }

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

/* ===== Glass Morphism Base ===== */
.glass-morphism {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ===== Hero Section (UX Optimized) ===== */
.hero-section {
    position: relative;
    min-height: 70vh; /* UX Improvement: Reduced to show below content */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--gradient-hero);
    padding: var(--spacing-xxl) 0;
}

.floating-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}
.floating-particles::before, .floating-particles::after {
    content: ''; position: absolute; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%; animation: float 6s ease-in-out infinite;
}
.floating-particles::before { top: 20%; left: 10%; animation-delay: 0s; }
.floating-particles::after { top: 60%; right: 10%; animation-delay: 3s; }
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content { position: relative; z-index: 2; text-align: center; color: var(--text-light); max-width: 800px; margin: 0 auto; }
.title-main { display: block; font-size: var(--font-size-5xl); font-weight: 800; margin-bottom: var(--spacing-xs); text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.title-sub { display: block; font-size: var(--font-size-2xl); font-weight: 600; color: var(--primary-gold); margin-bottom: var(--spacing-lg); }
.hero-description { font-size: var(--font-size-lg); margin-bottom: var(--spacing-xl); opacity: 0.9; }

/* ===== Search Box ===== */
.hero-search { max-width: 600px; margin: 0 auto var(--spacing-xl); position: relative; }
.search-input {
    width: 100%; padding: var(--spacing-md) var(--spacing-lg); padding-left: 60px;
    border: none; border-radius: var(--radius-xl); font-size: var(--font-size-lg);
    background: rgba(255, 255, 255, 0.95); color: var(--text-primary); outline: none;
    transition: var(--transition-normal); box-shadow: var(--shadow-lg);
}
.search-input:focus {
    background: #ffffff; box-shadow: 0 0 0 4px rgba(0, 167, 180, 0.2); transform: scale(1.02); /* UX Glow */
}
.search-button {
    position: absolute; left: var(--spacing-sm); top: 50%; transform: translateY(-50%);
    background: var(--primary-teal); border: none; border-radius: 50%; width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fast); color: #fff;
}
.search-button:hover { background: var(--primary-dark); transform: translateY(-50%) scale(1.1); }

/* ===== Main Blog Layout ===== */
.blog-content-section { padding: var(--spacing-xxl) 0; }
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--spacing-xl); align-items: start; }

/* ===== Post Cards (Glow UX Update) ===== */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.post-card {
    position: relative; overflow: hidden; transition: all var(--transition-normal);
    cursor: pointer; background: var(--bg-primary); border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column;
}
.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 167, 180, 0.12); /* Modern Cyber Glow */
    border-color: rgba(0, 167, 180, 0.3);
}
.post-card-image { height: 220px; overflow: hidden; position: relative; }
.post-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); }
.post-card:hover .post-thumbnail { transform: scale(1.08); }

.category-badge {
    position: absolute; top: 15px; right: 15px; background: var(--primary-gold);
    color: var(--text-light); padding: 4px 12px; border-radius: var(--radius-xl);
    font-size: var(--font-size-xs); font-weight: 700; z-index: 2; box-shadow: var(--shadow-sm);
}

.post-card-content { padding: var(--spacing-lg); flex: 1; display: flex; flex-direction: column; }
.post-card-title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); }
.post-card-excerpt { font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); flex: 1; }

.post-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--spacing-sm); border-top: 1px solid rgba(0,0,0,0.05);
}
.author-meta { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); font-weight: 600; }
.author-avatar-small { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--primary-teal); }
.post-date-small { font-size: var(--font-size-xs); color: var(--text-muted); }

/* ===== Sidebar ===== */
.blog-sidebar { position: sticky; top: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); }
.sidebar-widget { padding: var(--spacing-lg); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.03); }
.widget-title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); position: relative; padding-bottom: 10px; }
.widget-title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 3px; background: var(--primary-teal); border-radius: 2px; }

.categories-filter { display: flex; flex-direction: column; gap: 8px; }
.filter-btn {
    background: transparent; border: 1px solid rgba(0, 0, 0, 0.05); padding: 10px 15px;
    border-radius: var(--radius-sm); text-align: right; cursor: pointer; transition: var(--transition-fast);
    display: flex; justify-content: space-between; align-items: center; font-family: var(--font-family); font-weight: 600;
}
.filter-btn:hover, .filter-btn.active { background: var(--primary-teal); color: var(--text-light); border-color: var(--primary-teal); }

/* ===== CTA Section ===== */
.cta-section { padding: var(--spacing-xxl) 0; background: var(--gradient-primary); text-align: center; border-radius: var(--radius-xl); margin: var(--spacing-xl) 0; color: #fff; box-shadow: var(--shadow-xl); }
.cta-title { color: #fff; margin-bottom: var(--spacing-md); }
.cta-btn {
    background: var(--primary-gold); color: var(--primary-dark); padding: 14px 35px;
    border-radius: 50px; font-weight: 800; display: inline-block; margin-top: 20px; transition: 0.3s;
}
.cta-btn:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* ===== Dark Mode Polish ===== */
@media (prefers-color-scheme: dark) {
    body { background: linear-gradient(135deg, #1a1a1a 0%, #081b2e 100%); color: #fff; }
    h2, h3, .widget-title, .post-card-title a, .author-name-small { color: #fff; }
    p, .post-card-excerpt { color: #b0b0b0; }
    .post-card, .sidebar-widget { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.05); }
    .post-card:hover { box-shadow: 0 15px 30px rgba(200, 161, 79, 0.15); border-color: rgba(200, 161, 79, 0.3); } /* Gold glow in dark mode */
    .filter-btn { color: #ddd; border-color: rgba(255,255,255,0.1); }
    .search-input { background: rgba(0, 0, 0, 0.5); color: #fff; }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .title-main { font-size: var(--font-size-4xl); }
}
@media (max-width: 768px) {
    .posts-grid { grid-template-columns: 1fr; }
    .hero-section { min-height: 60vh; padding: var(--spacing-xl) 0; }
    .title-main { font-size: var(--font-size-3xl); }
    .blog-sidebar { grid-template-columns: 1fr; }
}
</style>

<section class="hero-section">
    <div class="floating-particles"></div>
    <div class="container hero-content">
        <h1 class="hero-title">
            <span class="title-main">مدونة الصقر للتسويق الرقمي</span>
            <span class="title-sub">رؤى وأدلة استراتيجية لنمو أعمالك في [current_year]</span>
        </h1>
        <p class="hero-description">اكتشف أحدث استراتيجيات السيو، الإعلانات المدفوعة، وقمع المبيعات المصممة خصيصاً لاكتساح السوق السعودي.</p>
        
        <div class="hero-search glass-morphism">
            <form action="/" method="GET" class="search-form">
                <input type="text" name="s" class="search-input" placeholder="ابحث عن: تحسين محركات البحث، B2B، إعلانات...">
                <button type="submit" class="search-button" aria-label="بحث">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                </button>
            </form>
        </div>
    </div>
</section>

<section class="blog-content-section container">
    <div class="blog-layout">
        
        <main class="posts-main-content">
            <div class="posts-header">
                <h2 class="posts-count">أحدث المقالات الاستراتيجية</h2>
            </div>

            <div class="posts-grid">
                
                <article class="post-card">
                    <div class="post-card-image">
                        <span class="category-badge">B2B Marketing</span>
                        <img src="https://saqqr.com/wp-content/uploads/b2b-cover.jpg" alt="التسويق للشركات" class="post-thumbnail" loading="lazy">
                    </div>
                    <div class="post-card-content">
                        <h3 class="post-card-title"><a href="#">دليلك الشامل للتسويق الموجه للشركات (B2B) في السعودية</a></h3>
                        <p class="post-card-excerpt">تعلم أقوى استراتيجيات التسويق للشركات لجلب عملاء محتملين (Leads) والوصول لصناع القرار بفعالية عالية.</p>
                        <div class="post-card-meta">
                            <div class="author-meta">
                                <img src="https://saqqr.com/wp-content/uploads/avatar.png" alt="الصقر" class="author-avatar-small">
                                <span class="author-name-small">فريق الصقر</span>
                            </div>
                            <span class="post-date-small">منذ يومين</span>
                        </div>
                    </div>
                </article>

                <article class="post-card">
                    <div class="post-card-image">
                        <span class="category-badge">Sales Funnel</span>
                        <img src="https://saqqr.com/wp-content/uploads/funnel-cover.jpg" alt="قمع المبيعات" class="post-thumbnail" loading="lazy">
                    </div>
                    <div class="post-card-content">
                        <h3 class="post-card-title"><a href="#">قمع المبيعات (Sales Funnel): لماذا يزورون موقعك ولا يشترون؟</a></h3>
                        <p class="post-card-excerpt">اكتشف كيف تبني مسار تسويقي متكامل يحول الزوار العابرين إلى عملاء دائمين ويضاعف أرباح متجرك.</p>
                        <div class="post-card-meta">
                            <div class="author-meta">
                                <img src="https://saqqr.com/wp-content/uploads/avatar.png" alt="الصقر" class="author-avatar-small">
                                <span class="author-name-small">فريق الصقر</span>
                            </div>
                            <span class="post-date-small">منذ أسبوع</span>
                        </div>
                    </div>
                </article>

                <article class="post-card">
                    <div class="post-card-image">
                        <span class="category-badge">SEO</span>
                        <img src="https://saqqr.com/wp-content/uploads/seo-cover.jpg" alt="تكلفة السيو" class="post-thumbnail" loading="lazy">
                    </div>
                    <div class="post-card-content">
                        <h3 class="post-card-title"><a href="#">تكلفة خدمات SEO في السعودية – الأسعار والعوامل المؤثرة</a></h3>
                        <p class="post-card-excerpt">كم تبلغ تكلفة السيو الحقيقية؟ وما الفرق بين العروض الرخيصة والاستثمار الرقمي الناجح الذي يبني أصولاً لشركتك.</p>
                        <div class="post-card-meta">
                            <div class="author-meta">
                                <img src="https://saqqr.com/wp-content/uploads/avatar.png" alt="الصقر" class="author-avatar-small">
                                <span class="author-name-small">فريق الصقر</span>
                            </div>
                            <span class="post-date-small">15 أكتوبر [current_year]</span>
                        </div>
                    </div>
                </article>

            </div>

            <div class="cta-section">
                <h2 class="cta-title">هل تبحث عن السيطرة الرقمية في قطاعك؟</h2>
                <p>دعنا نبني لك استراتيجية تسويقية متكاملة تضمن لك صدارة محركات البحث وتضاعف مبيعاتك.</p>
                <a href="https://saqqr.com/contact-us" class="cta-btn">احجز استشارتك المجانية</a>
            </div>

        </main>

        <aside class="blog-sidebar">
            
            <div class="sidebar-widget">
                <h3 class="widget-title">التصنيفات الاستراتيجية</h3>
                <div class="categories-filter">
                    <button class="filter-btn active">الكل <span class="category-count">(24)</span></button>
                    <button class="filter-btn">تحسين محركات البحث (SEO) <span class="category-count">(8)</span></button>
                    <button class="filter-btn">التسويق للشركات B2B <span class="category-count">(5)</span></button>
                    <button class="filter-btn">إعلانات مدفوعة <span class="category-count">(7)</span></button>
                    <button class="filter-btn">أقماع المبيعات <span class="category-count">(4)</span></button>
                </div>
            </div>

            <div class="sidebar-widget glass-morphism" style="text-align: center;">
                <h3 class="widget-title" style="text-align: right;">النشرة البريدية</h3>
                <p style="font-size: 0.9em; margin-bottom: 15px;">احصل على أسرار السيو والتسويق التي لا نشاركها إلا مع مشتركينا.</p>
                <form action="#" method="POST" style="display: flex; flex-direction: column; gap: 10px;">
                    <input type="email" placeholder="بريدك الإلكتروني" class="search-input" style="padding-left: 15px; font-size: 0.9em;" required>
                    <button type="submit" class="search-button" style="position: relative; width: 100%; border-radius: var(--radius-sm); top: 0; transform: none; font-family: var(--font-family); font-weight: bold;">اشترك الآن</button>
                </form>
            </div>

        </aside>

    </div>
</section>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://saqqr.com/#organization",
      "name": "شركة الصقر للتسويق الرقمي",
      "url": "https://saqqr.com/",
      "logo": {
        "@type": "ImageObject",
        "url": "https://saqqr.com/wp-content/themes/saqqr-theme/assets/images/logo-header.png"
      },
      "sameAs": [
        "https://www.linkedin.com/company/saqr-agency",
        "https://twitter.com/SaqqrD"
      ]
    },
    {
      "@type": "WebSite",
      "@id": "https://saqqr.com/#website",
      "url": "https://saqqr.com/",
      "name": "شركة الصقر للتسويق الرقمي",
      "inLanguage": "ar-SA",
      "publisher": {
        "@id": "https://saqqr.com/#organization"
      },
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://saqqr.com/?s={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@type": "CollectionPage",
      "@id": "https://saqqr.com/blog/#webpage",
      "url": "https://saqqr.com/blog/",
      "name": "مدونة الصقر للتسويق الرقمي - رؤى وأدلة استراتيجية [current_year]",
      "description": "اكتشف أحدث المقالات والأدلة في تحسين محركات البحث، التسويق للشركات B2B، وأقماع المبيعات لاكتساح السوق السعودي.",
      "inLanguage": "ar-SA",
      "isPartOf": {
        "@id": "https://saqqr.com/#website"
      },
      "breadcrumb": {
        "@id": "https://saqqr.com/blog/#breadcrumb"
      }
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://saqqr.com/blog/#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "الرئيسية",
          "item": "https://saqqr.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "المدونة",
          "item": "https://saqqr.com/blog/"
        }
      ]
    },
    {
      "@type": "Blog",
      "@id": "https://saqqr.com/blog/#blog",
      "mainEntityOfPage": "https://saqqr.com/blog/",
      "publisher": {
        "@id": "https://saqqr.com/#organization"
      },
      "blogPost": [
        {
          "@type": "BlogPosting",
          "headline": "دليلك الشامل للتسويق الموجه للشركات (B2B) في السعودية",
          "url": "https://saqqr.com/b2b-marketing-guide-saudi-arabia/"
        },
        {
          "@type": "BlogPosting",
          "headline": "قمع المبيعات (Sales Funnel): لماذا يزورون موقعك ولا يشترون؟",
          "url": "https://saqqr.com/sales-funnel-guide/"
        },
        {
          "@type": "BlogPosting",
          "headline": "تكلفة خدمات SEO في السعودية – الأسعار والعوامل المؤثرة",
          "url": "https://saqqr.com/seo-services-cost-saudi-arabia/"
        }
      ]
    }
  ]
}