/* بسم الله الرحمن الرحيم */
/* ======================================================================== */
/* ملف الأنماط الرئيسي لسجل حزم لغة ص                                       */
/* Main Stylesheet for Sad Language Package Registry                        */
/* ======================================================================== */
/*                                                                          */
/* هذا الملف يحتوي على جميع أنماط CSS لواجهة الويب العربية.                 */
/* التصميم يعتمد على:                                                       */
/*   - نظام ألوان داكن (Dark Theme) مريح للأعين                             */
/*   - نظام CSS Custom Properties (المتغيرات) للتخصيص السهل                */
/*   - خط Noto Kufi Arabic لعرض النص العربي بشكل جميل                      */
/*   - تصميم متجاوب (Responsive) يعمل على كل الشاشات                       */
/*   - دعم كامل لاتجاه RTL (من اليمين لليسار) للغة العربية                 */
/*                                                                          */
/* البنية:                                                                   */
/*   1. المتغيرات (Custom Properties) — الألوان والخطوط والمسافات           */
/*   2. الأساس (Base) — إعدادات عامة للعناصر                                */
/*   3. شريط التنقل (Navbar) — ثابت في الأعلى مع بحث مدمج                  */
/*   4. البطل (Hero) — قسم الترحيب في الصفحة الرئيسية                       */
/*   5. شبكة الحزم (Packages Grid) — بطاقات الحزم الشعبية                   */
/*   6. قائمة الحزم (Package List) — عرض أفقي للنتائج                       */
/*   7. التصنيفات (Categories) — شبكة بطاقات التصنيفات                      */
/*   8. تفاصيل الحزمة (Package Detail) — صفحة العرض الكامل                  */
/*   9. البدء السريع (Getting Started) — خطوات 1-2-3                        */
/*  10. المكونات (Components) — أزرار، شارات، حالات فارغة                   */
/*  11. التذييل (Footer) — روابط وحقوق النشر                                */
/*  12. الاستجابة (Responsive) — تكييف الشاشات الصغيرة                      */
/* ======================================================================== */

/* ======================================================================== */
/* 1. المتغيرات / Custom Properties                                         */
/* ======================================================================== */
/* نظام ألوان مركزي — تغيير لون واحد هنا يؤثر على كل الموقع               */
/* Centralized color system — changing one color here affects the whole site */
/* ======================================================================== */

:root {
    /* ------------------------------------------------------------------ */
    /* الألوان الأساسية — مستوحاة من Tailwind CSS Slate + Blue             */
    /* Primary Colors — inspired by Tailwind CSS Slate + Blue               */
    /* ------------------------------------------------------------------ */
    --primary: #2563eb;          /* الأزرق الأساسي — للأزرار والروابط */
    --primary-dark: #1d4ed8;     /* أزرق داكن — للحالة المضغوطة (hover) */
    --primary-light: #3b82f6;    /* أزرق فاتح — لأسماء الحزم والروابط */
    --accent: #f59e0b;           /* الذهبي — للعناصر البارزة (حرف ص، الإحصائيات) */
    --accent-dark: #d97706;      /* ذهبي داكن — hover على العناصر المميزة */
    --success: #10b981;          /* أخضر — لأوامر التثبيت والحالات الناجحة */
    --danger: #ef4444;           /* أحمر — للأخطاء والإصدارات المسحوبة */
    --warning: #f59e0b;          /* برتقالي — للتحذيرات */

    /* ------------------------------------------------------------------ */
    /* ألوان الخلفية — متدرجة من الأغمق للأفتح                            */
    /* Background Colors — gradient from darkest to lightest                */
    /* ------------------------------------------------------------------ */
    --bg: #0f172a;               /* خلفية الصفحة الرئيسية (Slate 900) */
    --bg-card: #1e293b;          /* خلفية البطاقات والأقسام (Slate 800) */
    --bg-card-hover: #334155;    /* خلفية البطاقة عند التمرير (Slate 700) */
    --bg-alt: #162032;           /* خلفية الأقسام المتبادلة (بين bg و bg-card) */
    --bg-input: #0f172a;         /* خلفية حقول الإدخال */

    /* ------------------------------------------------------------------ */
    /* ألوان النص — ثلاث مستويات من السطوع                                */
    /* Text Colors — three brightness levels                               */
    /* ------------------------------------------------------------------ */
    --text: #e2e8f0;             /* نص عادي (Slate 200) */
    --text-muted: #94a3b8;       /* نص ثانوي/خافت (Slate 400) */
    --text-bright: #f8fafc;      /* نص ساطع — للعناوين (Slate 50) */

    /* ------------------------------------------------------------------ */
    /* الحدود والظلال — لتحديد البطاقات والأقسام                          */
    /* Borders & Shadows — for card/section delineation                    */
    /* ------------------------------------------------------------------ */
    --border: #334155;           /* حد عادي */
    --border-light: #475569;     /* حد فاتح — للتمييز */

    --radius: 12px;              /* انحناء البطاقات الكبيرة */
    --radius-sm: 8px;            /* انحناء الأزرار والحقول */
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.3);       /* ظل عادي */
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.4);  /* ظل كبير — للبطاقات المرفوعة */

    /* ------------------------------------------------------------------ */
    /* الخطوط — خط عربي كوفي + خط أحادي العرض للكود                       */
    /* Fonts — Arabic Kufi + Monospace for code                            */
    /* ------------------------------------------------------------------ */
    --font-ar: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}

/* ======================================================================== */
/* 2. الأساس / Base Styles                                                  */
/* ======================================================================== */
/* إعدادات أساسية: box-sizing, إعادة تعيين الهوامش, الخط العام              */
/* لاحظ: لا نحتاج إعادة تعيين direction لأن HTML يحدد dir="rtl"            */
/* ======================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-ar);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--accent); }

code {
    font-family: var(--font-mono);
    background: var(--bg-input);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ======================================================================== */
/* 3. شريط التنقل / Navigation Bar                                          */
/* ======================================================================== */
/* شريط ثابت (sticky) في أعلى الصفحة يحتوي على:                            */
/*   - الشعار (📦 حزم ص): ينقل للصفحة الرئيسية                             */
/*   - حقل بحث سريع مدمج (يتمدد ليملأ المساحة المتاحة)                    */
/*   - روابط تنقل (تصفح + API)                                             */
/* يستخدم backdrop-filter لتأثير الزجاج الشفاف عند التمرير                  */
/* ======================================================================== */

.navbar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.nav-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-bright);
    font-size: 1.2rem;
    white-space: nowrap;
}
.logo:hover { color: var(--accent); }
.logo-icon { font-size: 1.5rem; }
.logo strong { color: var(--accent); font-size: 1.4rem; }

.nav-search {
    flex: 1;
    max-width: 500px;
}
.nav-search form { display: flex; gap: 0.5rem; }
.search-input {
    flex: 1;
    padding: 0.5rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-ar);
    font-size: 0.95rem;
}
.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.search-btn {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-ar);
    font-weight: 500;
}
.search-btn:hover { background: var(--primary-dark); }

.nav-links {
    display: flex;
    gap: 1.25rem;
    white-space: nowrap;
}
.nav-links a { color: var(--text-muted); }
.nav-links a:hover { color: var(--text-bright); }

/* ======================================================================== */
/* 4. قسم البطل / Hero Section                                              */
/* ======================================================================== */
/* القسم الترحيبي في الصفحة الرئيسية — يحتوي على:                          */
/*   - عنوان المستودع (سجل حزم لغة ص)                                      */
/*   - حقل بحث كبير ومركزي                                                  */
/*   - إحصائيات (عدد الحزم/التنزيلات/المطورين)                              */
/*   - أمر التثبيت السريع (sad-pkg install)                                 */
/* الخلفية تدرج لوني من الأزرق الداكن للأسود لإعطاء عمق بصري              */
/* ======================================================================== */

.hero {
    background: linear-gradient(135deg, var(--bg) 0%, #1a1a4e 50%, #0c2340 100%);
    padding: 4rem 0 3rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 0.75rem;
}
.accent { color: var(--accent); }

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.hero-search {
    display: flex;
    max-width: 600px;
    margin: 0 auto 2rem;
    gap: 0.5rem;
}
.hero-search-input {
    flex: 1;
    padding: 0.85rem 1.25rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-ar);
    font-size: 1.1rem;
}
.hero-search-input:focus {
    outline: none;
    border-color: var(--primary);
}
.hero-search-btn {
    padding: 0.85rem 1.5rem;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-ar);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.hero-search-btn:hover { background: var(--accent-dark); }

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}
.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.hero-install {
    display: inline-block;
}
.install-code {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--success);
}

/* ======================================================================== */
/* 5. الأقسام العامة / Sections                                             */
/* ======================================================================== */
/* كل قسم (section) يحتوي على عنوان ومحتوى                                 */
/* section-alt يستخدم لوناً بديلاً لكسر الرتابة البصرية                    */
/* ======================================================================== */

.section {
    padding: 3rem 0;
}
.section-alt {
    background: var(--bg-alt);
}
.section-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    color: var(--text-bright);
}

/* ======================================================================== */
/* 6. شبكة الحزم / Packages Grid                                            */
/* ======================================================================== */
/* شبكة CSS Grid مع auto-fill: تتكيف تلقائياً مع عدد الأعمدة               */
/* الحد الأدنى لعرض البطاقة 320px — أي على شاشة 1200px تظهر 3 أعمدة       */
/* كل بطاقة تحتوي: اسم الحزمة + الإصدار + الوصف + إحصائيات                */
/* عند التمرير (hover): ارتفاع 2px + ظل + حد أزرق                         */
/* ======================================================================== */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.package-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.2s;
    color: var(--text);
}
.package-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    color: var(--text);
}

.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.package-name {
    font-size: 1.1rem;
    color: var(--primary-light);
    font-weight: 600;
}
.package-version {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.package-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.package-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ======================================================================== */
/* 7. قائمة الحزم / Package List (عرض أفقي)                                */
/* ======================================================================== */
/* يُستخدم في: نتائج البحث + قسم أحدث الحزم                               */
/* كل عنصر يعرض: الاسم | الإصدار | الوصف | التنزيلات | المؤلف | تاغات     */
/* ======================================================================== */

.packages-list { display: flex; flex-direction: column; gap: 0.75rem; }

.package-list-item {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.2s;
    color: var(--text);
}
.package-list-item:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
    color: var(--text);
}
.package-list-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.package-list-name { font-size: 1.15rem; color: var(--primary-light); }
.package-list-version { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem; }
.package-list-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; }
.package-list-meta { display: flex; gap: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }

/* ======================================================================== */
/* 8. شبكة التصنيفات / Categories Grid                                      */
/* ======================================================================== */
/* بطاقات صغيرة (150px min) تعرض: أيقونة + اسم عربي + اسم إنجليزي         */
/* عند الضغط: ينقل لصفحة البحث مع تصفية التصنيف                            */
/* ======================================================================== */

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
    color: var(--text);
}
.category-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    color: var(--text);
}
.category-icon { font-size: 1.5rem; }
.category-name { font-weight: 500; font-size: 0.95rem; }
.category-name-en { font-size: 0.75rem; color: var(--text-muted); }

/* ======================================================================== */
/* 9. أزرار التصفية / Filter Tags                                           */
/* ======================================================================== */
/* أزرار حبوب (pill buttons) لتصفية نتائج البحث حسب التصنيف               */
/* tag-active: الزر المحدد حالياً (خلفية زرقاء + نص أبيض)                  */
/* ======================================================================== */

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.tag {
    padding: 0.35rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.2s;
}
.tag:hover { border-color: var(--primary); color: var(--text); }
.tag-active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ======================================================================== */
/* 10. تفاصيل الحزمة / Package Detail Page                                  */
/* ======================================================================== */
/* صفحة تعرض كل معلومات حزمة واحدة بتخطيط عمودين:                        */
/*   - العمود الرئيسي (1fr): التبعيات + جدول الإصدارات                     */
/*   - الشريط الجانبي (300px): إحصائيات + معلومات + مالكين + تاغات        */
/* على الشاشات الصغيرة يتحول لعمود واحد                                  */
/* ======================================================================== */

.page-content { padding: 2rem 0; }

.package-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.package-detail-name { font-size: 2rem; color: var(--text-bright); margin-bottom: 0.5rem; }
.package-detail-desc { color: var(--text-muted); font-size: 1.1rem; }

.badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.package-detail-install {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}
.install-block {
    display: block;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--success);
    margin-top: 0.5rem;
}

.package-detail-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.deps-section, .versions-section, .readme-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.deps-section h3, .versions-section h3, .readme-section h3 { margin-bottom: 1rem; }
.deps-list { list-style: none; }
.deps-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.versions-table {
    width: 100%;
    border-collapse: collapse;
}
.versions-table th, .versions-table td {
    padding: 0.6rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.versions-table th {
    color: var(--text-muted);
    font-weight: 500;
}
.yanked { opacity: 0.5; }

.sidebar-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.sidebar-section h4 { margin-bottom: 0.75rem; color: var(--text-bright); }

.stats-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
.stats-dl dt { color: var(--text-muted); }
.stats-dl dd { text-align: left; }

.owners-list { list-style: none; }
.owners-list li { 
    display: flex; 
    justify-content: space-between; 
    padding: 0.35rem 0; 
    border-bottom: 1px solid var(--border);
}
.owner-role { font-size: 0.8rem; color: var(--text-muted); }

/* ======================================================================== */
/* 11. خطوات البدء السريع / Getting Started Steps                           */
/* ======================================================================== */
/* 3 بطاقات متساوية: (١) ثبّت  (٢) أضف  (٣) استخدم                              */
/* كل بطاقة فيها رقم دائري أزرق + عنوان + أمر باللون الذهبي                   */
/* ======================================================================== */

.getting-started {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.step {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step code { color: var(--accent); }

/* ======================================================================== */
/* 12. الأزرار / Buttons                                                    */
/* ======================================================================== */
/* btn-primary: زر أزرق أساسي للإجراءات الرئيسية (بحث، العودة، إلخ)            */
/* btn-sm: زر صغير للإجراءات الثانوية (نسخ، مزيد من التفاصيل)               */
/* ======================================================================== */

.btn-primary {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-ar);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-primary:hover { background: var(--primary-dark); color: white; }

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
}
.btn-sm:hover { border-color: var(--primary); color: var(--primary-light); }

/* ======================================================================== */
/* 13. الحالات الفارغة والأخطاء / Empty States & Error Pages               */
/* ======================================================================== */
/* تظهر عندما لا توجد نتائج بحث أو عند خطأ 404/500                           */
/* التصميم: مركزي مع رسالة ودية وأزرار للعودة                            */
/* ======================================================================== */

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.error-page {
    text-align: center;
    padding: 4rem 0;
}
.error-page h1 { font-size: 4rem; color: var(--accent); margin-bottom: 1rem; }
.error-page p { margin-bottom: 2rem; color: var(--text-muted); }

.text-muted { color: var(--text-muted); }
.results-count { color: var(--text-muted); margin-bottom: 1rem; }

.search-form-page {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.search-input-large {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-ar);
    font-size: 1.05rem;
}
.search-input-large:focus {
    outline: none;
    border-color: var(--primary);
}

/* ======================================================================== */
/* 14. التذييل / Footer                                                      */
/* ======================================================================== */
/* شبكة 3 أعمدة من الروابط:                                                  */
/*   عمود 1: لغة ص (رئيسية, تصفح, API)                                       */
/*   عمود 2: المجتمع (GitHub, منتدى, تواصل)                                 */
/*   عمود 3: أدوات (sad-pkg, sad-lsp, VS Code)                             */
/* margin-top: auto يدفع التذييل لأسفل الصفحة حتى إن كان المحتوى قصير*/
/* ======================================================================== */

.footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 2rem 0 1rem;
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 1.5rem;
}
.footer-col h4 { color: var(--text-bright); margin-bottom: 0.75rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.35rem; }
.footer-col a { color: var(--text-muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ======================================================================== */
/* 15. الاستجابة / Responsive Design                                       */
/* ======================================================================== */
/* نقطة الكسر: 768px (شاشات الجوال والتابلت)                                 */
/* التغييرات:                                                                */
/*   - شريط التنقل: البحث ينتقل لسطر جديد (flex-wrap)                     */
/*   - البطل: عنوان أصغر (2rem بدل 3rem)                                    */
/*   - شبكة الحزم: عمود واحد بدل 3                                        */
/*   - تفاصيل الحزمة: الشريط الجانبي أسفل بدل يمين                      */
/*   - التذييل: عمود واحد بدل 3                                           */
/* ======================================================================== */

@media (max-width: 768px) {
    .nav-content { flex-wrap: wrap; }
    .nav-search { order: 3; flex-basis: 100%; max-width: 100%; }
    .hero-title { font-size: 2rem; }
    .hero-stats { gap: 1.5rem; }
    .packages-grid { grid-template-columns: 1fr; }
    .package-detail-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .getting-started { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================== */
/* 16. تأثيرات حركية / Animations                                            */
/* ======================================================================== */
/* تأثيرات الدخول للبطاقات عند التمرير:                                       */
/*   card-hidden: حالة البداية (شفافة ومنزلقة لأسفل)                       */
/*   card-visible: حالة الظهور (معتمة وفي موضعها الطبيعي)                  */
/*   الانتقال يستخدم CSS transition لأداء GPU-accelerated سلس.             */
/*   نستخدم transform بدل top/margin لأنه لا يسبب layout reflow.           */
/*                                                                          */
/* تأثير النسخ (copied):                                                     */
/*   عند نسخ أمر التثبيت، يظهر وميض أخضر خفيف.                             */
/* ======================================================================== */

/* --- تأثير دخول البطاقات مع التمرير --- */
.card-hidden {
    opacity: 0;
    transform: translateY(20px);
}

.card-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* --- تأثير تأكيد النسخ على أوامر التثبيت --- */
.install-code.copied,
.install-block.copied {
    background: rgba(46, 160, 67, 0.2);
    border-color: #2ea043;
    transition: background 0.3s ease, border-color 0.3s ease;
}