حالة الفراغ والبداية الأولى Empty State

<!-- Qahera UI Kit - Empty State Pattern (Native HTML) -->
<div class="qhr-card qhr-empty-state" style="text-align: center; padding: var(--qhr-space-12) var(--qhr-space-6);">
  <div style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--qhr-radius-full); background: var(--qhr-color-neutral-100); color: var(--qhr-color-neutral-500); margin-bottom: var(--qhr-space-4);">
    <svg class="qhr-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  </div>
  <h3 style="font-size: var(--qhr-font-size-xl); font-weight: var(--qhr-font-weight-bold); margin: 0 0 var(--qhr-space-2) 0;">لا توجد سجلات مطابقة</h3>
  <p style="font-size: var(--qhr-text-sm); color: var(--qhr-color-neutral-600); max-width: 420px; margin: 0 auto var(--qhr-space-6) auto;">
    لم نتمكن من العثور على أي نتائج تطابق معايير البحث المحددة. جرب تعديل الفلاتر أو إضافة عنصر جديد.
  </p>
  <button type="button" class="qhr-btn qhr-btn--primary qhr-btn--md">
    <span>إضافة عنصر جديد</span>
  </button>
</div>