---
title: دليل علامة جنّي
brand: GINI
locale: ar-IQ
version: 1.7
updated: 2026-09
primary_color: #F05D25
font_family: Rubik
canonical: https://gini.iq/brand
json_manifest: https://gini.iq/brand.json
---

# دليل علامة جنّي

> **جنّي** — الواجهة العراقية للعلامات العالمية.

جنّي (GINI) شركة عراقية لأتمتة الأسواق والتجارة الرقمية تأسّست عام 2023، تهدف إلى ربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة. توفّر جنّي أدوات لإدارة الأعمال وعرض المنتجات والخدمات ومعالجة المدفوعات وإدارة الطلبات — مما يمكّن الشركات والتجار من النمو والوصول إلى ملايين المستخدمين بسهولة وكفاءة. مقرّها الرئيسي في بغداد، وتخدم التجار والمستهلكين في جميع المحافظات العراقية.

هذه الصفحة هي المصدر الرسمي لكل ما يخصّ تمثيل جنّي بصريّاً ولفظيّاً. لاستخدامات آليّة، الصيغة الـJSON متوفّرة على: `https://gini.iq/brand.json`.

## نبذة

- **الاسم الرسمي:** GINI
- **الاسم المحلّي:** GINI (جنّي)
- **الم��ر الرئيسي:** Baghdad, Iraq
- **سنة التأسيس:** 2023
- **النشاط:** تجارة إلكترونية وخدمات منصّة
- **الموقع:** https://gini.iq
- **الإعلام:** info@gini.iq

## الهويّة

### المبادئ

#### الرسالة — نبني البنية التحتية الرقمية للتجارة في العراق.

نربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة، ونوفّر أدوات لإدارة الأعمال ومعالجة المدفوعات وإدارة الطلبات — ليصل كل تاجر إلى ملايين المستخدمين بكفاءة.

#### الرؤية — تمكين كلّ تاجر من النمو رقمياً.

منظومة رقمية يعتمدها التاجر الصغير قبل الكبير، تُسهّل الانتقال إلى الاقتصاد الرقمي وتفتح أبواب أسواق أوسع بأدوات ذكية وبنية تحتية جاهزة.

#### التموضع — شركة أتمتة الأسواق والتجارة الرقمية في العراق.

لسنا متجراً إلكترونياً فحسب. نحن منظومة متكاملة تدمج المدفوعات واللوجستيات وإدارة الأعمال — تخدم المستهلك والتاجر معاً ضمن تجربة شفافة وفعّالة.

#### الوعد — تمكين التجار. تبسيط التجارة.

أدوات رقمية متقدّمة للتجار الصغار والكبار، شراكات استراتيجية في الدفع والتوصيل، ونظام بيئي يخلق فرص النمو للجميع.

### ما نحن عليه

- بنية تحتية رقمية للتجارة
- ممكّنون للتجار الصغار والكبار
- منظومة متكاملة للمدفوعات والتوصيل
- شركاء في نمو الأعمال

### ما لسنا عليه

- متجراً إلكترونياً فحسب
- حلولاً منفصلة وغير مترابطة
- منصّة للمستهلك فقط
- مقلّدون لنماذج خارجية

## النظام البصري

### لوحة الألوان

| المعرّف | الاسم | HEX | RGB | CMYK | Pantone | الدور |
|---|---|---|---|---|---|---|
| `gini-orange` | برتقالي جنّي | `#F05D25` | `rgb(240, 93, 37)` | `0, 70, 95, 0` | PANTONE 1655 C | اللون الأساسي للعلامة — الشعار والأزرار والعناصر التفاعلية. |
| `gini-ember` | جمري | `#D94E1A` | `rgb(217, 78, 26)` | `0, 76, 99, 10` | PANTONE 1665 C | نسخة أعمق للحالات التفاعلية والنصوص على الخلفيات الفاتحة. |
| `gini-ink` | حبر ليلي | `#1A1A1A` | `rgb(26, 26, 26)` | `0, 0, 0, 90` | — | اللون الأساسي للنصوص والعناوين على الخلفيات الفاتحة. |
| `gini-cream` | كريمي دافئ | `#FBF6F0` | `rgb(251, 246, 240)` | `0, 2, 4, 2` | — | الخلفية الأساسية للموقع ومواد التسويق. |
| `gini-sand` | رملي هادئ | `#EFE6DB` | `rgb(239, 230, 219)` | `0, 4, 8, 6` | — | خلفيات ثانوية للبطاقات وفواصل الأقسام. |

### الوصول والتباين

| النص | الخلفية | النسبة | WCAG | الاستخدام |
|---|---|---|---|---|
| `#1A1A1A` | `#FBF6F0` | 16.4 : 1 | AAA | الخيار الافتراضي للنصوص الطويلة. |
| `#1A1A1A` | `#EFE6DB` | 14.5 : 1 | AAA | نصوص على البطاقات الرمليّة. |
| `#FFFFFF` | `#F05D25` | 3.6 : 1 | AA | عناوين وأزرار كبيرة فقط (18px+). لا تستخدم للنصوص الطويلة. |
| `#D94E1A` | `#FBF6F0` | 5.1 : 1 | AA | استخدم درجة «جمري» لتلوين النصوص على الكريمي. |
| `#FFFFFF` | `#1A1A1A` | 17.3 : 1 | AAA | الوضع الداكن لصفحات المنتجات والفيديوهات. |
| `#FBF6F0` | `#1A1A1A` | 15.9 : 1 | AAA | لمسة دافئة على الخلفيات الداكنة. |

## الطباعة

### العائلة الخطّيّة

- **الخط الأساسي:** Rubik (Sans-serif)
- **الأوزان المعتمدة:** 400, 500, 700, 800
- **التصفّح:** https://fonts.google.com/specimen/Rubik
- **Fallback:** `Rubik, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Sans", sans-serif`

### السُلّم الطباعي

| المستوى | الحجم | الوزن | ارتفاع السطر | الاستخدام |
|---|---|---|---|---|
| **عرض** | 32–48 / 1.15 | 800 | 115% | العناوين البطولية في الصفحات الرئيسية والحملات. |
| **رئيسي** | 36–48 / 1.15 | 700 | 115% | عناوين الأقسام داخل الصفحات. |
| **فرعي** | 20–24 / 1.25 | 600 | 125% | عناوين البطاقات والمكوّنات الوسيطة. |
| **نصّ** | 16–18 / 1.6 | 400 | 160% | الفقرات والنصوص العامّة. |
| **تسمية** | 12–14 / 1.4 | 600 | tracked 0.18em | تسميات الأقسام والوسوم الصغيرة. |

## الشعار

- **تحميل (SVG):** https://gini.iq/logo.svg

### النسخ

- **الشعار الرئيسي** — الاستخدام الافتراضي على الخلفيات الفاتحة — المواد التسويقية والمطبوعات.
  - background: `light`, mode: `color`, SVG: https://gini.iq/brand/gini-logo-black.svg
- **على خلفية كريميّة** — الخلفية الافتراضيّة عبر الموقع والمواد الرسميّة.
  - background: `cream`, mode: `color`, SVG: https://gini.iq/brand/gini-logo-black.svg
- **على اللون الأساسي** — للحملات الإعلانيّة والعناصر عالية التركيز — نستخدم النسخة البيضاء الخالصة (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.
  - background: `brand`, mode: `mono`, SVG: https://gini.iq/brand/gini-wordmark-mono-white.svg
- **على خلفية داكنة** — للفيديوهات والإعلانات ذات الخلفيات الداكنة.
  - background: `dark`, mode: `white`, SVG: https://gini.iq/brand/gini-logo-white.svg
- **أحاديّة اللون — على أبيض خالص** — عند الطباعة أحاديّة اللون أو حين تتواجد ألوان أخرى قد تتعارض مع البرتقالي.
  - background: `pure-white`, mode: `mono`, SVG: https://gini.iq/brand/gini-wordmark-mono-black.svg
- **أحاديّة اللون — على أسود خالص** — الخلفيّات السوداء الخالصة، أو أيّ لون قويّ يتعارض مع البرتقالي.
  - background: `pure-black`, mode: `mono`, SVG: https://gini.iq/brand/gini-wordmark-mono-white.svg
- **الرمز الأحادي** — رمز جنّي المختصر — للأختام، الأفاتارات، والأيقونات المربّعة على الخلفيات الفاتحة.
  - background: `cream`, mode: `monogram`, SVG: https://gini.iq/brand/gini-monogram-black.svg
- **الرمز على اللون البرتقالي** — النسخة المفضّلة لأيقونة التطبيق والأفاتار على الشبكات الاجتماعيّة — نستخدم الرمز الأبيض الخالص (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.
  - background: `brand`, mode: `mono`, SVG: https://gini.iq/brand/gini-monogram-mono-white.svg
- **الرمز الأحادي — على أبيض خالص** — رمز أحاديّ اللون على الخلفيّات البيضاء الخالصة أو أيّ لون يتعارض مع البرتقالي.
  - background: `pure-white`, mode: `mono`, SVG: https://gini.iq/brand/gini-monogram-mono-black.svg
- **الرمز الأحادي — على أسود خالص** — رمز أحاديّ اللون على الخلفيّات السوداء الخالصة وعلى أيّ لون قويّ يتعارض مع البرتقالي.
  - background: `pure-black`, mode: `mono`, SVG: https://gini.iq/brand/gini-monogram-mono-white.svg

### التشريح

- **المسافة الحرّة (= 1× G)** — اترك مساحة حول الشعار بارتفاع حرف G كحدّ أدنى.
- **الحد الأدنى رقمياً (24 px)** — أصغر عرض يحافظ على قراءة الحروف على الشاشة.
- **الحد الأدنى طباعة (16 mm)** — لأي وسيط مطبوع: بطاقات، مغلفات، لافتات.
- **نسبة العرض للارتفاع (≈ 3.1 : 1)** — لا تعدّل النسبة — مطّها أو ضغطها ممنوع.

### ما يُسمح به

- اترك مساحة حرة حول الشعار بمقدار ارتفاع حرف G كحدّ أدنى.
- لا يقلّ عرض الشعار عن 24 بكسل على الشاشة و 16 مم في الطباعة.
- استخدم النسخة الأصلية باللون البرتقالي أو النسخة البيضاء فقط.
- على أيّ خلفية برتقاليّة أو من تدرّجاتها، استخدم النسخة البيضاء من الشعار فقط.
- تحقّق من تباين الخلفية قبل التصدير — استخدم الجدول في قسم الوصول.

### ما يُمنع

- لا تدوّر الشعار أو تغيّر اتجاهه.
- لا تضع الشعار الأسود أو المحدّد بالألوان على أيّ خلفية برتقاليّة.
- لا تستبدل ألوان الشعار بألوان أخرى غير معتمدة.
- لا تمطّ الشعار أو تضغطه — حافظ على نسبه الأصلية.
- لا تضف حدوداً أو ظلالاً أو تأثيرات حول الشعار.

## النظام البصري — اسكيومورفية حديثة (v1.0.0)

> كل عنصر يُبنى كما لو كان جسماً مادياً فعلياً: يُرفع، يُضغط، يُحفر أو يُضاء — لكن بانضباط منتج رقمي معاصر.

واجهة جنّي مستوحاة من الأجهزة الدقيقة عالية الجودة: سطح بوليمر مطفأ، ألواح سيراميكية مرفوعة، تحكّمات برتقالية مؤكسدة بسماكة ظاهرة، وأسطح غرافيتية للأدوات. الهدف ليس محاكاة الجلد والخشب كما في اسكيومورفية 2010، بل إعطاء المستخدم فهماً غريزياً لما يمكن ضغطه وما يحمل ماذا فوق ماذا — عبر الضوء والعمق والملمس لا عبر الزخرفة. ليست نيومورفية (كتل رمادية بظلين)، وليست زجاجية، وليست مجرد ظلال مضافة.

### المبادئ

- **منطق مادي حقيقي** — قبل تصميم أي عنصر نسأل: لو كان جسماً حقيقياً كيف سيتصرف؟ الزر يُضغط، المفتاح ينزلق، الحقل غائر، البطاقة تجلس فوق السطح، التبويب المختار مغروس في سكته.
- **مصدر ضوء واحد** — الضوء يأتي من الأعلى‑يسار بميل أمامي خفيف في كل الشاشات. كل ظل وكل حافة مضيئة تحترم هذا الاتجاه، فتتماسك الواجهة كجسم واحد.
- **ضبط النفس قبل الإبهار** — أربع عائلات خامات فقط، ثمانية مستويات ارتفاع فقط، حبيبات سطح تُحسّ ولا تُلاحظ. التسلسل الهرمي للعمق أهم من كمية الظلال.
- **تسلسل عمق واضح** — القاعدة ← المناطق الغائرة الوظيفية ← أسطح المحتوى المرفوعة ← التحكّمات المادية ← الطبقات العائمة. يفهمها المستخدم لا شعورياً.
- **الوضوح يفوز دائماً** — الطباعة تبقى حديثة ونظيفة بلا ظلال نصية، والكثافة المعلوماتية محفوظة. عندما يتعارض الجمال مع القراءة نختار القراءة مع لمسة مادية راقية.
- **الوصول لا يُساوَم عليه** — الحالة لا تُنقل بالظل وحده: حلقة تركيز مرئية على كل عنصر، خصائص ARIA على المجزّآت والقوائم، أهداف لمس ≥ 44px، واحترام تفضيل تقليل الحركة.

### نموذج الإضاءة

مصدر ضوء افتراضي واحد أعلى‑يسار. الأسطح المرفوعة تحصل على خط إضاءة علوي داخلي (inset 0 1px 0 أبيض)، ظل تماس قصير تحتها، وظل محيطي ناعم أبعد. الأسطح الغائرة تعكس المنطق: ظل داخلي داكن من الأعلى وشفة مضيئة من الأسفل.

- كل ظل يُزاح عمودياً للأسفل (y موجب)، ولا يُزاح أفقياً إلا بدرجة ضئيلة.
- لون الظل حبر دافئ (rgb 37 22 10) لا أسود محايد — ليتناغم مع الخلفية الكريمية.
- الحافة العلوية المضيئة إلزامية على كل سطح مرفوع؛ الحافة السفلية أغمق قليلاً لإظهار السماكة.
- التدرجات مسموحة فقط عندما تصف انحناءً أو ضوءاً أو خامة — لا تدرجات زخرفية.

### الخامات

| الخامة | الصنف | الاستخدام | الوصفة |
|---|---|---|---|
| بوليمر مطفأ | `body / .skeu-well` | قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال | لون كريمي دافئ (oklch 0.962 0.012 72) مع إضاءة شعاعية من الأعلى‑يسار، انحدار لوني خفيف نحو الأسفل، وطبقة حبيبات ثابتة بشفافية 4.5%. |
| سيراميك مرفوع | `.skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialog` | البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية | تدرج عمودي من الأبيض إلى الأبيض الدافئ، حد 1px بلون الحافة، خط إضاءة علوي داخلي، ظل تماس + ظل محيطي حسب مستوى الارتفاع. |
| برتقالي مؤكسد | `.skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solid` | الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل | تدرج من #ff7a44 أعلى إلى #e2531f أسفل (قبة خفيفة)، حد #c94a1b، لمعة علوية بيضاء 38%، حزام سفلي داكن 2px يكشف السماكة، وهج برتقالي ناعم للخارج. الحالة المضغوطة أغمق وغائرة. |
| غرافيت | `.skeu-dark / .skeu-btn-dark` | الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها | تدرج من #2a2624 إلى #171412 مع خطوط فرشاة أفقية بشفافية 1.2%، حافة علوية مضيئة 10%، حافة سفلية داكنة، وظل بعيد عميق. |

### سلّم الارتفاع

| المستوى | Token | الصنف | الاستخدام |
|---|---|---|---|
| غائر | `--skeu-shadow-recessed` | `.skeu-well` | صواني المحتوى الوظيفية، مسارات التقدم، التبويب المختار (نسخة ناعمة) |
| بئر | `--skeu-shadow-well` | `.skeu-input / .skeu-well-soft` | حقول الإدخال، الصناديق والمفاتيح، قوائم الصفوف |
| مستوٍ | `--skeu-shadow-flush` | `.skeu-btn-ghost / .skeu-list-item` | عناصر القوائم والأزرار الشبحية قبل التحويم — ترتفع عند التفاعل |
| مرفوع 1 | `--skeu-shadow-raised-1` | `.skeu-panel` | البطاقات القياسية، الشرائح الكبيرة، التنبيهات |
| مرفوع 2 | `--skeu-shadow-raised-2` | `.skeu-panel-2 / .skeu-rail` | لوحات الأبطال، الحاويات الكبرى، سكة الهيدر، البطاقة عند التحويم |
| عائم | `--skeu-shadow-floating` | `.skeu-floating` | القوائم المنسدلة، الرقائق العائمة، النوافذ المنبثقة الصغيرة |
| طبقة علوية | `--skeu-shadow-overlay` | `.skeu-dialog` | النوافذ الحوارية فوق خلفية معتمة قليلاً |
| مضغوط | `--skeu-shadow-pressed` | `:active / .skeu-tab-active` | لحظة الضغط على أي تحكم، والتبويب المختار |

### الأقطار

- `--skeu-radius-xs` = 6px — الشرائح الصغيرة والوسوم
- `--skeu-radius-sm` = 10px — الأزرار القياسية وحقول الإدخال والتحكمات الصغيرة
- `--skeu-radius-md` = 14px — البلاطات والتبويبات
- `--skeu-radius-lg` = 20px — البطاقات واللوحات
- `--skeu-radius-xl` = 26px — النوافذ الحوارية وسكة التنقل

### الحركة

- **ضغط الزر — 80ms** — ينزل 1px ويتحول ظله الخارجي إلى ظل داخلي؛ يعود خلال 150ms.
- **تحويم البطاقة — 260ms** — ترتفع 2px من مستوى «مرفوع 1» إلى «مرفوع 2» بمنحنى cubic-bezier(0.22, 1, 0.36, 1).
- **اختيار التبويب** — التبويب الجديد يغوص 1px بلون أغمق؛ السابق يعود لمستواه.
- **المفتاح** — الإبهام ينزلق 20px ميكانيكياً خلال 260ms وتُضاء السكة.
- **القائمة المنسدلة — 180ms** — تظهر بارتفاع صغير وتلاشٍ (animate-skeu-pop).
- **النافذة الحوارية — 260ms** — ترتفع من القاعدة بتكبير مضبوط 0.97 → 1 (animate-skeu-dialog).
- **تقليل الحركة** — كل الحركات تُطفأ عند prefers-reduced-motion؛ تبقى الحالات مقروءة بالشكل واللون.

### فهرس المكوّنات

**الأسطح**

- `skeu-panel` — لوح مرفوع: البطاقة القياسية
- `skeu-panel-2` — لوح مرفوع 2: الحاويات الكبرى والأبطال
- `skeu-panel-interactive` — لوح تفاعلي: بطاقة قابلة للنقر ترتفع وتجلس
- `skeu-panel-selected` — لوح مختار: بطاقة مقفلة/مختارة مغروسة بحافة برتقالية
- `skeu-floating` — سطح عائم: القوائم المنسدلة والرقائق
- `skeu-dialog + skeu-backdrop` — نافذة حوارية: الطبقة العلوية وخلفيتها
- `skeu-rail` — سكة تنقل: الهيدر وأشرطة الأدوات اللاصقة
- `skeu-well / -soft / -accent` — بئر غائر: الصواني الوظيفية والصفوف المميزة
- `skeu-dark` — سطح غرافيتي: الفوتر ونوافذ الكود

**التحكّمات**

- `skeu-btn-primary` — زر أساسي: الإجراء الرئيسي — برتقالي مؤكسد
- `skeu-btn-secondary` — زر ثانوي: زر سيراميكي مطفأ
- `skeu-btn-tint` — زر مصبوغ: إجراء ثانوي بهوية برتقالية
- `skeu-btn-ghost` — زر شبحي: مستوٍ حتى التحويم ثم يرتفع
- `skeu-btn-destructive` — زر حذف: أحمر مُشغَّل آلياً
- `skeu-input` — حقل إدخال: بئر غائر بحلقة إضاءة عند التركيز
- `skeu-check / skeu-radio` — صندوق اختيار / راديو: بئر محفور يُضاء عند التحديد
- `skeu-toggle` — مفتاح: سكة غائرة وإبهام مادي
- `skeu-tab / skeu-tab-active` — تبويب مجزّأ: مفتاح مرفوع؛ النشط مغروس بلون أغمق

**العناصر الصغيرة**

- `skeu-tile / -soft / -ceramic` — بلاطة أيقونة: مؤكسدة / بئر مصبوغ / سيراميك أبيض
- `skeu-chip / -solid / -neutral / -success` — شارة: شرائح بارزة بحافة شعرية
- `skeu-meter` — قارئ أرقام: الإحصائيات ومؤشرات الأداء
- `skeu-table / skeu-row` — جدول / صف: رأس مرفوع، جسم غائر، صفوف لمسية
- `skeu-alert-*` — تنبيه: أجسام نظام مرتفعة بحافة دلالية
- `skeu-skeleton` — هيكل تحميل: كتل غائرة بمسح ضوئي
- `skeu-track / skeu-fill` — مسار تقدم: سكة غائرة وتعبئة مؤكسدة
- `skeu-divider` — فاصل محفور: خط داكن فوق خط مضيء

### مكتبة المكوّنات (64)

64 مكوّناً جاهزاً للنسخ، مبنيّاً فقط من أصناف `skeu-*` المتاحة في `https://gini.iq/skeu.css` مع أدوات تخطيط Tailwind. التثبيت:

```html
<link rel="stylesheet" href="https://gini.iq/skeu.css">
```

أو `@import url("https://gini.iq/skeu.css");` — ويُقرن بـ `https://gini.iq/brand.css` للوحة الألوان. الأصناف تعمل مع HTML عادي أو React أو Vue أو Svelte أو أي إطار — لا تبعيّات. الاتجاه من اليمين إلى اليسار مدعوم تلقائياً عبر dir="rtl". أدوات التخطيط (h-10, px-4, gap-2…) هي Tailwind ويمكن استبدالها بـ CSS خاص بك.

#### الإجراءات

**الزر الأساسي — ثلاثة أحجام** — `skeu-btn`, `skeu-btn-primary`

الزر المؤكسد بارتفاع 32 / 40 / 44px. الحجم يتحدد بأدوات التخطيط فقط، الخامة واحدة.

```html
<button class="skeu-btn skeu-btn-primary h-8 px-3 rounded-[var(--skeu-radius-sm)] text-xs font-semibold">Small</button>
<button class="skeu-btn skeu-btn-primary h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Medium</button>
<button class="skeu-btn skeu-btn-primary h-11 px-5 rounded-[var(--skeu-radius-sm)] text-base font-semibold">Large</button>
```

**عائلة الأزرار** — `skeu-btn-secondary`, `skeu-btn-tint`, `skeu-btn-ghost`, `skeu-btn-destructive`, `skeu-btn-dark`

ثانوي سيراميكي، مصبوغ، شبحي، حذف، وداكن للأسطح الغرافيتية.

```html
<button class="skeu-btn skeu-btn-secondary h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Secondary</button>
<button class="skeu-btn skeu-btn-tint h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Tinted</button>
<button class="skeu-btn skeu-btn-ghost h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Ghost</button>
<button class="skeu-btn skeu-btn-destructive h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Delete</button>
<div class="skeu-dark inline-flex p-2 rounded-[var(--skeu-radius-md)]">
  <button class="skeu-btn skeu-btn-dark h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Dark</button>
</div>
```

**زر أيقونة** — `skeu-btn`, `skeu-btn-secondary`, `skeu-btn-primary`

مربع 40px بأيقونة فقط — لا تنسَ aria-label.

```html
<button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-10 h-10 rounded-[var(--skeu-radius-sm)]" aria-label="Search"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
<button class="skeu-btn skeu-btn-primary inline-flex items-center justify-center w-10 h-10 rounded-[var(--skeu-radius-sm)]" aria-label="Add"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button class="skeu-btn skeu-btn-ghost inline-flex items-center justify-center w-10 h-10 rounded-full" aria-label="More"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></button>
```

**زر بأيقونة أمامية** — `skeu-btn`, `skeu-btn-primary`

الأيقونة على جهة البداية، والنص بعدها — يقلب تلقائياً في RTL.

```html
<button class="skeu-btn skeu-btn-primary inline-flex items-center justify-center gap-2 h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.7 11.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 8H6"/></svg> Add to cart</button>
<button class="skeu-btn skeu-btn-secondary inline-flex items-center gap-2 h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Continue <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
```

**زر في حالة تحميل** — `skeu-btn`, `skeu-btn-primary`

مؤشر دوران داخل الزر مع aria-busy وتعطيل النقر.

```html
<button class="skeu-btn skeu-btn-primary inline-flex items-center justify-center gap-2 h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold" aria-busy="true" disabled><svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity=".3" stroke-width="3"/><path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg> Saving…</button>
```

**زر معطّل** — `skeu-btn`

شفافية 55% وإشباع أقل وبلا حركة — الخاصية disabled تكفي.

```html
<button class="skeu-btn skeu-btn-primary inline-flex items-center justify-center gap-2 h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold" disabled>Unavailable</button>
<button class="skeu-btn skeu-btn-secondary h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold" disabled>Unavailable</button>
```

**مجموعة أزرار / زر منقسم** — `skeu-btn-secondary`, `skeu-btn-primary`

مفاتيح متلاصقة بقطر مشترك، والزر المنقسم يفصل الإجراء الرئيسي عن قائمته.

```html
<div class="inline-flex rounded-[var(--skeu-radius-sm)]" role="group" aria-label="View">
  <button class="skeu-btn skeu-btn-secondary h-10 px-4 text-sm font-semibold rounded-s-[var(--skeu-radius-sm)] rounded-e-none" aria-pressed="true">Day</button>
  <button class="skeu-btn skeu-btn-secondary h-10 px-4 text-sm font-semibold rounded-none -ms-px">Week</button>
  <button class="skeu-btn skeu-btn-secondary h-10 px-4 text-sm font-semibold rounded-e-[var(--skeu-radius-sm)] rounded-s-none -ms-px">Month</button>
</div>
<div class="inline-flex">
  <button class="skeu-btn skeu-btn-primary h-10 px-4 text-sm font-semibold rounded-s-[var(--skeu-radius-sm)] rounded-e-none">Publish</button>
  <button class="skeu-btn skeu-btn-primary h-10 w-10 inline-flex items-center justify-center rounded-e-[var(--skeu-radius-sm)] rounded-s-none border-s-white/30" aria-label="More publish options" aria-haspopup="menu"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
</div>
```

**زر عائم (FAB)** — `skeu-btn`, `skeu-btn-primary`, `shadow-floating`

زر دائري مرفوع للإجراء الأهم على الشاشة — يعيش في المستوى العائم.

```html
<button class="skeu-btn skeu-btn-primary inline-flex items-center justify-center w-14 h-14 rounded-full shadow-floating" aria-label="New order"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button class="skeu-btn skeu-btn-primary inline-flex items-center gap-2 h-12 px-5 rounded-full text-sm font-semibold shadow-floating"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New order</button>
```

#### النماذج

**حقل نصي مع تسمية ومساعدة وخطأ** — `skeu-input`, `is-invalid`

الحقل بئر غائر؛ حالة الخطأ تضيف is-invalid ورسالة مرتبطة عبر aria-describedby.

```html
<div class="grid gap-1.5">
  <label for="name" class="text-sm font-semibold">Full name</label>
  <input id="name" class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm" placeholder="Ali Hassan" aria-describedby="name-help">
  <p id="name-help" class="text-xs text-muted-foreground">As printed on your ID.</p>
</div>
<div class="grid gap-1.5">
  <label for="email" class="text-sm font-semibold">Email</label>
  <input id="email" type="email" value="ali@" class="skeu-input is-invalid h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm" aria-invalid="true" aria-describedby="email-err">
  <p id="email-err" class="text-xs font-medium text-[var(--skeu-error)]">Enter a valid email address.</p>
</div>
```

**حقل بأيقونة أمامية** — `skeu-input`

الأيقونة مثبتة على جهة البداية بخصائص منطقية (start-3 / ps-9).

```html
<label class="relative block">
  <span class="sr-only">Phone</span>
  <span class="pointer-events-none absolute inset-y-0 start-3 flex items-center text-muted-foreground"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span>
  <input type="tel" class="skeu-input w-full h-10 ps-10 pe-3 rounded-[var(--skeu-radius-sm)] text-sm" placeholder="07xx xxx xxxx" dir="ltr">
</label>
```

**حقل بحث** — `skeu-input`, `skeu-chip-neutral`

حقل مستدير مع أيقونة بحث واختصار لوحة مفاتيح على جهة النهاية.

```html
<form role="search" class="relative">
  <span class="pointer-events-none absolute inset-y-0 start-3.5 flex items-center text-muted-foreground"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
  <input type="search" class="skeu-input w-full h-11 ps-10 pe-14 rounded-full text-sm" placeholder="Search products, merchants…" aria-label="Search">
  <kbd class="skeu-chip-neutral absolute inset-y-0 my-auto end-2 h-6 px-2 rounded-[var(--skeu-radius-xs)] text-[10px] font-mono inline-flex items-center">⌘K</kbd>
</form>
```

**قائمة اختيار** — `skeu-input`

select أصلي داخل بئر غائر مع سهم مرسوم يدوياً على جهة النهاية.

```html
<label class="grid gap-1.5">
  <span class="text-sm font-semibold">Governorate</span>
  <span class="relative">
    <select class="skeu-input appearance-none w-full h-10 ps-3 pe-9 rounded-[var(--skeu-radius-sm)] text-sm">
      <option>Baghdad</option><option>Basra</option><option>Erbil</option><option>Najaf</option>
    </select>
    <span class="pointer-events-none absolute inset-y-0 end-3 flex items-center text-muted-foreground"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span>
  </span>
</label>
```

**منطقة نص** — `skeu-input`

نفس البئر بارتفاع حر وعدّاد أحرف أسفلها.

```html
<label class="grid gap-1.5">
  <span class="text-sm font-semibold">Delivery notes</span>
  <textarea class="skeu-input min-h-24 p-3 rounded-[var(--skeu-radius-sm)] text-sm resize-y" placeholder="Leave at the reception…" maxlength="200"></textarea>
  <span class="text-xs text-muted-foreground text-end tabular-nums">0 / 200</span>
</label>
```

**قائمة صناديق اختيار** — `skeu-check`, `skeu-well-soft`

صفوف غائرة ناعمة، كل صف label كامل ليكون هدف اللمس ≥ 44px.

```html
<fieldset class="skeu-well-soft rounded-[var(--skeu-radius-md)] divide-y divide-[var(--skeu-edge)]">
  <legend class="sr-only">Notifications</legend>
  <label class="flex items-center gap-3 px-4 min-h-11 text-sm cursor-pointer"><input type="checkbox" class="skeu-check" checked> Order updates</label>
  <label class="flex items-center gap-3 px-4 min-h-11 text-sm cursor-pointer"><input type="checkbox" class="skeu-check" checked> Promotions</label>
  <label class="flex items-center gap-3 px-4 min-h-11 text-sm cursor-pointer"><input type="checkbox" class="skeu-check"> Weekly digest</label>
</fieldset>
```

**مجموعة راديو** — `skeu-check`, `skeu-radio`, `skeu-panel`, `skeu-panel-selected`

خيارات كبطاقات؛ البطاقة المختارة تُغرس بحافة برتقالية (skeu-panel-selected).

```html
<fieldset class="grid gap-2">
  <legend class="text-sm font-semibold mb-1">Delivery speed</legend>
  <label class="skeu-panel skeu-panel-selected flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)] cursor-pointer">
    <input type="radio" name="speed" class="skeu-check skeu-radio" checked>
    <span class="flex-1 text-sm font-semibold">Same day <span class="block text-xs font-normal text-muted-foreground">Baghdad only · before 2 pm</span></span>
    <span class="text-sm font-bold tabular-nums">5,000 IQD</span>
  </label>
  <label class="skeu-panel flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)] cursor-pointer">
    <input type="radio" name="speed" class="skeu-check skeu-radio">
    <span class="flex-1 text-sm font-semibold">Standard <span class="block text-xs font-normal text-muted-foreground">2–3 days</span></span>
    <span class="text-sm font-bold tabular-nums">3,000 IQD</span>
  </label>
</fieldset>
```

**صف مفتاح** — `skeu-toggle`, `skeu-panel`

مفتاح ميكانيكي role=switch مع aria-checked؛ الإبهام ينزلق 20px.

```html
<div class="skeu-panel rounded-[var(--skeu-radius-md)] divide-y divide-[var(--skeu-edge)]">
  <div class="flex items-center justify-between gap-4 px-4 py-3">
    <span class="text-sm"><span class="font-semibold block">Push notifications</span><span class="text-xs text-muted-foreground">Order status on your phone</span></span>
    <button type="button" role="switch" aria-checked="true" class="skeu-toggle" aria-label="Push notifications"></button>
  </div>
  <div class="flex items-center justify-between gap-4 px-4 py-3">
    <span class="text-sm"><span class="font-semibold block">Marketing emails</span><span class="text-xs text-muted-foreground">Offers and new merchants</span></span>
    <button type="button" role="switch" aria-checked="false" class="skeu-toggle" aria-label="Marketing emails"></button>
  </div>
</div>
```

**تحكم مجزّأ** — `skeu-well`, `skeu-tab`, `skeu-tab-active`

مفاتيح مرفوعة داخل بئر؛ المفتاح النشط مغروس بلون أغمق (skeu-tab-active).

```html
<div role="tablist" aria-label="Period" class="skeu-well inline-flex gap-1 p-1 rounded-[var(--skeu-radius-md)]">
  <button role="tab" aria-selected="true" class="skeu-tab skeu-tab-active h-8 px-3.5 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Today</button>
  <button role="tab" aria-selected="false" class="skeu-tab h-8 px-3.5 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Week</button>
  <button role="tab" aria-selected="false" class="skeu-tab h-8 px-3.5 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Month</button>
</div>
```

**شريط تمرير** — `skeu-well`, `skeu-meter`

range أصلي بلون التمييز داخل بئر، مع قراءة قيمة في عدّاد.

```html
<div class="skeu-well rounded-[var(--skeu-radius-md)] p-4 flex items-center gap-4">
  <label for="budget" class="text-sm font-semibold shrink-0">Budget</label>
  <input id="budget" type="range" min="0" max="500" value="320" step="10" class="flex-1 h-2 cursor-pointer" style="accent-color: var(--skeu-accent)">
  <output for="budget" class="skeu-meter rounded-[var(--skeu-radius-sm)] px-2.5 py-1 text-sm font-bold tabular-nums text-primary">320K</output>
</div>
```

**منطقة إسقاط ملفات** — `skeu-well`, `skeu-tile-soft`, `skeu-btn-secondary`

بئر غائر بحد متقطع داخلي وبلاطة أيقونة، والإدخال الحقيقي مخفي بصرياً.

```html
<label class="skeu-well block rounded-[var(--skeu-radius-lg)] p-2 cursor-pointer">
  <span class="flex flex-col items-center gap-2 rounded-[calc(var(--skeu-radius-lg)-6px)] border border-dashed border-[var(--skeu-edge-strong)] px-4 py-6 text-center">
    <span class="skeu-tile-soft inline-flex items-center justify-center w-11 h-11 rounded-[var(--skeu-radius-md)]"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg></span>
    <span class="text-sm font-semibold">Drop product photos here</span>
    <span class="text-xs text-muted-foreground">PNG or JPG · up to 5 MB</span>
    <span class="skeu-btn skeu-btn-secondary mt-1 h-8 px-3 rounded-[var(--skeu-radius-sm)] text-xs font-semibold inline-flex items-center">Browse files</span>
  </span>
  <input type="file" accept="image/*" multiple class="sr-only">
</label>
```

**صف رمز التحقق (OTP)** — `skeu-input`

ست خلايا غائرة بخانة واحدة، اتجاه LTR دائماً للأرقام.

```html
<div class="flex gap-2" dir="ltr" role="group" aria-label="Verification code">
  <input class="skeu-input w-11 h-12 text-center text-lg font-bold rounded-[var(--skeu-radius-sm)]" inputmode="numeric" maxlength="1" value="4" aria-label="Digit 1">
  <input class="skeu-input w-11 h-12 text-center text-lg font-bold rounded-[var(--skeu-radius-sm)]" inputmode="numeric" maxlength="1" value="8" aria-label="Digit 2">
  <input class="skeu-input w-11 h-12 text-center text-lg font-bold rounded-[var(--skeu-radius-sm)]" inputmode="numeric" maxlength="1" value="2" aria-label="Digit 3">
  <input class="skeu-input w-11 h-12 text-center text-lg font-bold rounded-[var(--skeu-radius-sm)]" inputmode="numeric" maxlength="1" aria-label="Digit 4">
  <input class="skeu-input w-11 h-12 text-center text-lg font-bold rounded-[var(--skeu-radius-sm)]" inputmode="numeric" maxlength="1" aria-label="Digit 5">
  <input class="skeu-input w-11 h-12 text-center text-lg font-bold rounded-[var(--skeu-radius-sm)]" inputmode="numeric" maxlength="1" aria-label="Digit 6">
</div>
```

**حقل تاريخ** — `skeu-input`

input[type=date] أصلي في نفس البئر — يحصل على منتقي المتصفح مجاناً.

```html
<div class="grid grid-cols-2 gap-3">
  <label class="grid gap-1.5"><span class="text-sm font-semibold">Pickup date</span><input type="date" value="2026-09-12" class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm"></label>
  <label class="grid gap-1.5"><span class="text-sm font-semibold">Time</span><input type="time" value="14:30" class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm"></label>
</div>
```

**تخطيط نموذج بعمودين** — `skeu-panel`, `skeu-input`, `skeu-btn-primary`, `skeu-btn-ghost`

لوح مرفوع، شبكة عمود واحد على الموبايل وعمودين من sm، وأزرار في صف أسفل.

```html
<form class="skeu-panel rounded-[var(--skeu-radius-lg)] p-5 grid gap-4">
  <h3 class="font-bold">Shipping address</h3>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    <label class="grid gap-1.5"><span class="text-sm font-semibold">First name</span><input class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm"></label>
    <label class="grid gap-1.5"><span class="text-sm font-semibold">Last name</span><input class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm"></label>
    <label class="grid gap-1.5 sm:col-span-2"><span class="text-sm font-semibold">Street</span><input class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm"></label>
    <label class="grid gap-1.5"><span class="text-sm font-semibold">City</span><input class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm" value="Baghdad"></label>
    <label class="grid gap-1.5"><span class="text-sm font-semibold">Phone</span><input type="tel" class="skeu-input h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm" dir="ltr"></label>
  </div>
  <div class="flex items-center justify-end gap-2 pt-1">
    <button type="button" class="skeu-btn skeu-btn-ghost h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Cancel</button>
    <button type="submit" class="skeu-btn skeu-btn-primary inline-flex items-center justify-center gap-2 h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Save address</button>
  </div>
</form>
```

**ملخص أخطاء النموذج** — `skeu-alert`, `skeu-alert-error`

تنبيه خطأ مرفوع أعلى النموذج يجمع الحقول الناقصة بروابط تقفز إليها.

```html
<div class="skeu-alert skeu-alert-error rounded-[var(--skeu-radius-md)] px-4 py-3" role="alert">
  <p class="text-sm font-bold text-[var(--skeu-error)]">Please fix 2 fields before continuing</p>
  <ul class="mt-1.5 text-sm text-muted-foreground list-disc ps-5 space-y-0.5">
    <li><a href="#email" class="underline underline-offset-2">Email</a> — not a valid address</li>
    <li><a href="#phone" class="underline underline-offset-2">Phone</a> — required</li>
  </ul>
</div>
```

#### التنقّل

**شريط تنقّل (سكة)** — `skeu-rail`, `skeu-tab`, `skeu-tab-active`, `skeu-btn-primary`

سكة سيراميكية مصنفرة: شعار، روابط، والإجراء الأساسي على جهة النهاية.

```html
<nav class="skeu-rail flex items-center gap-3 px-4 h-14 rounded-[var(--skeu-radius-xl)]" aria-label="Main">
  <a href="#" class="font-extrabold tracking-tight text-lg">GINI<span class="text-primary">.</span></a>
  <ul class="hidden sm:flex items-center gap-1 ms-4">
    <li><a href="#" class="skeu-tab skeu-tab-active inline-flex h-8 px-3 rounded-full text-sm font-semibold items-center" aria-current="page">Home</a></li>
    <li><a href="#" class="skeu-tab inline-flex h-8 px-3 rounded-full text-sm font-semibold items-center">Shop</a></li>
    <li><a href="#" class="skeu-tab inline-flex h-8 px-3 rounded-full text-sm font-semibold items-center">Orders</a></li>
  </ul>
  <a href="#" class="skeu-btn skeu-btn-primary ms-auto inline-flex items-center h-9 px-4 rounded-full text-sm font-semibold">Sign in</a>
</nav>
```

**مسار التنقّل** — `skeu-chip-neutral`, `skeu-chip`

شرائح سيراميكية مفصولة بأسهم؛ الصفحة الحالية aria-current.

```html
<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-sm flex-wrap">
    <li><a href="#" class="skeu-chip-neutral inline-flex items-center h-7 px-2.5 rounded-full text-xs font-semibold">Home</a></li>
    <li aria-hidden="true" class="text-muted-foreground [[dir=rtl]_&]:-scale-x-100"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
    <li><a href="#" class="skeu-chip-neutral inline-flex items-center h-7 px-2.5 rounded-full text-xs font-semibold">Electronics</a></li>
    <li aria-hidden="true" class="text-muted-foreground [[dir=rtl]_&]:-scale-x-100"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
    <li><span aria-current="page" class="skeu-chip inline-flex items-center h-7 px-2.5 rounded-full text-xs font-semibold">Headphones</span></li>
  </ol>
</nav>
```

**تبويبات — خطية ومجزّأة** — `skeu-divider`, `skeu-tab`, `skeu-tab-soft-active`

الخطية للصفحات (خط مضيء تحت النشط)، والمجزّأة للفلاتر.

```html
<div role="tablist" aria-label="Product" class="flex gap-6 border-b border-[var(--skeu-edge)]">
  <button role="tab" aria-selected="true" class="relative pb-3 text-sm font-semibold text-primary after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-full after:bg-primary">Overview</button>
  <button role="tab" aria-selected="false" class="pb-3 text-sm font-semibold text-muted-foreground hover:text-foreground">Specs</button>
  <button role="tab" aria-selected="false" class="pb-3 text-sm font-semibold text-muted-foreground hover:text-foreground">Reviews <span class="skeu-chip-neutral ms-1 px-1.5 py-0.5 rounded-full text-[10px]">12</span></button>
</div>
<div role="tablist" aria-label="Filter" class="mt-4 flex flex-wrap gap-1.5">
  <button role="tab" aria-selected="true" class="skeu-tab skeu-tab-soft-active h-8 px-3 rounded-full text-xs font-semibold">All</button>
  <button role="tab" aria-selected="false" class="skeu-tab h-8 px-3 rounded-full text-xs font-semibold">Phones</button>
  <button role="tab" aria-selected="false" class="skeu-tab h-8 px-3 rounded-full text-xs font-semibold">Laptops</button>
</div>
```

**ترقيم الصفحات** — `skeu-tab`, `skeu-tab-active`, `skeu-btn-secondary`

مفاتيح مربعة 36px؛ الصفحة الحالية مغروسة، والسابق/التالي أزرار أيقونة.

```html
<nav aria-label="Pagination" class="flex items-center gap-1.5">
  <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-9 h-9 rounded-[var(--skeu-radius-sm)] [[dir=rtl]_&]:-scale-x-100" aria-label="Previous page" disabled><svg class="w-4 h-4 rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg></button>
  <button class="skeu-tab skeu-tab-active w-9 h-9 rounded-[var(--skeu-radius-sm)] text-sm font-semibold" aria-current="page">1</button>
  <button class="skeu-tab w-9 h-9 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">2</button>
  <button class="skeu-tab w-9 h-9 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">3</button>
  <span class="px-1 text-muted-foreground">…</span>
  <button class="skeu-tab w-9 h-9 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">12</button>
  <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-9 h-9 rounded-[var(--skeu-radius-sm)] [[dir=rtl]_&]:-scale-x-100" aria-label="Next page"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</nav>
```

**خطوات التقدّم** — `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-track`, `skeu-fill`

الخطوة المنجزة بلاطة خضراء، الحالية مؤكسدة، والقادمة بئر غائر — الخط بينها مسار تقدم.

```html
<ol class="flex items-center gap-2 text-xs font-semibold">
  <li class="flex items-center gap-2"><span class="skeu-chip-success inline-flex items-center justify-center w-8 h-8 rounded-full"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span><span class="hidden sm:inline">Cart</span></li>
  <li class="flex-1 skeu-track h-1.5 rounded-full overflow-hidden" aria-hidden="true"><div class="skeu-fill h-full w-full"></div></li>
  <li class="flex items-center gap-2" aria-current="step"><span class="skeu-tile inline-flex items-center justify-center w-8 h-8 rounded-full tabular-nums">2</span><span class="hidden sm:inline">Address</span></li>
  <li class="flex-1 skeu-track h-1.5 rounded-full overflow-hidden" aria-hidden="true"><div class="skeu-fill h-full w-1/3"></div></li>
  <li class="flex items-center gap-2 text-muted-foreground"><span class="skeu-tile-soft inline-flex items-center justify-center w-8 h-8 rounded-full tabular-nums">3</span><span class="hidden sm:inline">Payment</span></li>
</ol>
```

**قائمة جانبية** — `skeu-panel`, `skeu-list-item`, `skeu-well-accent`

صفوف مستوية ترتفع عند التحويم (skeu-list-item)؛ العنصر النشط بئر مصبوغ.

```html
<nav class="skeu-panel w-full max-w-64 rounded-[var(--skeu-radius-lg)] p-2" aria-label="Account">
  <a href="#" class="skeu-well-accent flex items-center gap-3 px-3 h-10 rounded-[var(--skeu-radius-sm)] text-sm font-semibold text-primary" aria-current="page"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg> Dashboard</a>
  <a href="#" class="skeu-list-item flex items-center gap-3 px-3 h-10 rounded-[var(--skeu-radius-sm)] text-sm font-medium"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.7 11.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 8H6"/></svg> Orders <span class="skeu-chip-solid ms-auto px-1.5 py-0.5 rounded-full text-[10px] font-bold">3</span></a>
  <a href="#" class="skeu-list-item flex items-center gap-3 px-3 h-10 rounded-[var(--skeu-radius-sm)] text-sm font-medium"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg> Payments</a>
  <a href="#" class="skeu-list-item flex items-center gap-3 px-3 h-10 rounded-[var(--skeu-radius-sm)] text-sm font-medium"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg> Profile</a>
</nav>
```

**شريط تبويبات سفلي للموبايل** — `skeu-rail`, `skeu-tile`, `skeu-tile-soft`

سكة ثابتة أسفل الشاشة بأربع وجهات؛ الوجهة النشطة بلاطة مؤكسدة.

```html
<nav class="skeu-rail grid grid-cols-4 rounded-[var(--skeu-radius-xl)] px-2 py-1.5" aria-label="Primary">
  <a href="#" class="flex flex-col items-center gap-1 py-1 text-[11px] font-semibold text-primary" aria-current="page"><span class="skeu-tile inline-flex items-center justify-center w-9 h-7 rounded-full"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></span>Home</a>
  <a href="#" class="flex flex-col items-center gap-1 py-1 text-[11px] font-medium text-muted-foreground"><span class="inline-flex items-center justify-center w-9 h-7"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>Search</a>
  <a href="#" class="flex flex-col items-center gap-1 py-1 text-[11px] font-medium text-muted-foreground"><span class="relative inline-flex items-center justify-center w-9 h-7"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.7 11.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 8H6"/></svg><span class="skeu-chip-solid absolute -top-1 -end-1 min-w-4 h-4 px-1 rounded-full text-[9px] font-bold inline-flex items-center justify-center">2</span></span>Cart</a>
  <a href="#" class="flex flex-col items-center gap-1 py-1 text-[11px] font-medium text-muted-foreground"><span class="inline-flex items-center justify-center w-9 h-7"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span>Me</a>
</nav>
```

**زر رجوع** — `skeu-btn`, `skeu-btn-ghost`

زر شبحي بسهم يقلب في RTL عبر -scale-x-100 تحت [dir=rtl].

```html
<a href="#" class="skeu-btn skeu-btn-ghost inline-flex items-center gap-1.5 h-9 ps-2 pe-3 rounded-full text-sm font-semibold text-muted-foreground hover:text-foreground">
  <svg class="w-4 h-4 [[dir=rtl]_&]:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
  Back to orders
</a>
```

#### عرض البيانات

**بلاطة مؤشر أداء** — `skeu-meter`

قارئ أرقام (skeu-meter): تسمية صغيرة، رقم كبير جدولي، وسطر مساعد.

```html
<div class="skeu-meter rounded-[var(--skeu-radius-lg)] p-4">
  <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-muted-foreground">Orders today</div>
  <div class="mt-1.5 text-3xl font-extrabold tabular-nums text-primary">1,284</div>
  <div class="mt-1 text-xs text-muted-foreground">Updated 2 min ago</div>
</div>
```

**صف إحصاء مع شريحة فرق** — `skeu-meter`, `skeu-chip-success`, `skeu-chip-neutral`

ثلاثة قوارئ في شبكة، لكل منها شريحة خضراء أو محايدة للفرق.

```html
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
  <div class="skeu-meter rounded-[var(--skeu-radius-md)] p-4"><div class="text-xs text-muted-foreground">Revenue</div><div class="mt-1 flex items-baseline gap-2"><span class="text-2xl font-extrabold tabular-nums">48.2M</span><span class="skeu-chip-success px-1.5 py-0.5 rounded-full text-[10px] font-bold">+12%</span></div></div>
  <div class="skeu-meter rounded-[var(--skeu-radius-md)] p-4"><div class="text-xs text-muted-foreground">Orders</div><div class="mt-1 flex items-baseline gap-2"><span class="text-2xl font-extrabold tabular-nums">3,410</span><span class="skeu-chip-success px-1.5 py-0.5 rounded-full text-[10px] font-bold">+4%</span></div></div>
  <div class="skeu-meter rounded-[var(--skeu-radius-md)] p-4"><div class="text-xs text-muted-foreground">Returns</div><div class="mt-1 flex items-baseline gap-2"><span class="text-2xl font-extrabold tabular-nums">1.8%</span><span class="skeu-chip-neutral px-1.5 py-0.5 rounded-full text-[10px] font-bold">±0</span></div></div>
</div>
```

**بطاقة منتج** — `skeu-panel`, `skeu-panel-interactive`, `skeu-tile-ceramic`, `skeu-chip-solid`, `skeu-btn-primary`

لوح تفاعلي: صورة في بلاطة سيراميكية، شارة، سعر بالدينار، وزر إضافة للسلة.

```html
<article class="skeu-panel skeu-panel-interactive w-full max-w-64 rounded-[var(--skeu-radius-lg)] p-3">
  <div class="skeu-tile-ceramic relative aspect-square rounded-[var(--skeu-radius-md)] overflow-hidden flex items-center justify-center text-muted-foreground">
    <img src="/product.jpg" alt="Wireless headphones" class="object-cover w-full h-full">
    <span class="skeu-chip-solid absolute top-2 start-2 px-2 py-0.5 rounded-full text-[10px] font-bold">-20%</span>
  </div>
  <h3 class="mt-3 text-sm font-semibold leading-snug line-clamp-2">Wireless headphones ANC</h3>
  <div class="mt-1 flex items-baseline gap-2"><span class="text-base font-extrabold tabular-nums">89,000 IQD</span><s class="text-xs text-muted-foreground tabular-nums">112,000</s></div>
  <button class="skeu-btn skeu-btn-primary mt-3 w-full inline-flex items-center justify-center gap-2 h-9 rounded-[var(--skeu-radius-sm)] text-sm font-semibold"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.7 11.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 8H6"/></svg> Add to cart</button>
</article>
```

**بطاقة تسعير** — `skeu-panel-2`, `skeu-chip-solid`, `skeu-btn-primary`

لوح مرفوع 2 مع شارة «الأكثر طلباً»، سعر كبير، قائمة مزايا، وزر أساسي.

```html
<div class="skeu-panel-2 relative w-full max-w-72 rounded-[var(--skeu-radius-lg)] p-5">
  <span class="skeu-chip-solid absolute -top-3 start-5 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">Most popular</span>
  <div class="text-sm font-bold text-muted-foreground">GINI Plus</div>
  <div class="mt-1 flex items-baseline gap-1"><span class="text-3xl font-extrabold tabular-nums">15,000</span><span class="text-sm text-muted-foreground">IQD / month</span></div>
  <ul class="mt-4 space-y-2 text-sm">
    <li class="flex items-center gap-2"><span class="text-[var(--skeu-success)]"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span>Free delivery on every order</li>
    <li class="flex items-center gap-2"><span class="text-[var(--skeu-success)]"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span>Priority support</li>
    <li class="flex items-center gap-2"><span class="text-[var(--skeu-success)]"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span>2× loyalty points</li>
  </ul>
  <button class="skeu-btn skeu-btn-primary mt-5 w-full h-10 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Subscribe</button>
</div>
```

**بطاقة ميزة** — `skeu-panel`, `skeu-tile`

بلاطة أيقونة مؤكسدة، عنوان، وصف قصير — الوحدة الأساسية لأي شبكة مزايا.

```html
<div class="skeu-panel w-full max-w-72 rounded-[var(--skeu-radius-lg)] p-5">
  <span class="skeu-tile inline-flex items-center justify-center w-11 h-11 rounded-[var(--skeu-radius-md)]"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
  <h3 class="mt-4 font-bold">Same-day delivery</h3>
  <p class="mt-1.5 text-sm text-muted-foreground leading-relaxed">Order before 2 pm and receive it tonight anywhere in Baghdad.</p>
</div>
```

**بطاقة شهادة** — `skeu-panel`, `skeu-tile-ceramic`

اقتباس، نجوم، وصف المتحدث مع صورة رمزية سيراميكية.

```html
<figure class="skeu-panel w-full max-w-sm rounded-[var(--skeu-radius-lg)] p-5">
  <div class="flex gap-0.5 text-primary" aria-label="5 out of 5 stars"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg></div>
  <blockquote class="mt-3 text-sm leading-relaxed">“Ordered at noon, it was at my door by seven. Never using another app.”</blockquote>
  <figcaption class="mt-4 flex items-center gap-3">
    <span class="skeu-tile-ceramic inline-flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold text-primary">SA</span>
    <span class="text-sm"><span class="block font-semibold">Sara A.</span><span class="text-xs text-muted-foreground">Basra · verified buyer</span></span>
  </figcaption>
</figure>
```

**بطاقة مستخدم + مجموعة صور رمزية** — `skeu-panel`, `skeu-tile`, `skeu-tile-ceramic`, `skeu-chip-neutral`

صورة رمزية بحرفين، اسم ودور، ومجموعة صور متراكبة بحد أبيض.

```html
<div class="skeu-panel flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)] max-w-sm">
  <span class="skeu-tile inline-flex items-center justify-center w-11 h-11 rounded-full text-sm font-bold">AH</span>
  <span class="flex-1 min-w-0 text-sm"><span class="block font-semibold truncate">Ali Hassan</span><span class="text-xs text-muted-foreground">Merchant · Karrada</span></span>
  <span class="skeu-chip-neutral px-2 py-0.5 rounded-full text-[10px] font-bold">Admin</span>
</div>
<div class="mt-3 flex items-center">
  <span class="skeu-tile-ceramic inline-flex items-center justify-center w-8 h-8 rounded-full text-[10px] font-bold ring-2 ring-white">MK</span>
  <span class="skeu-tile-ceramic inline-flex items-center justify-center w-8 h-8 rounded-full text-[10px] font-bold ring-2 ring-white -ms-2">RS</span>
  <span class="skeu-tile inline-flex items-center justify-center w-8 h-8 rounded-full text-[10px] font-bold ring-2 ring-white -ms-2">ZA</span>
  <span class="skeu-chip-neutral inline-flex items-center justify-center h-8 px-2 rounded-full text-[10px] font-bold -ms-2 ring-2 ring-white">+6</span>
</div>
```

**جدول مع رأس وصفوف وإجراءات** — `skeu-table`, `skeu-chip-success`, `skeu-chip`, `skeu-btn-ghost`

skeu-table: رأس مرفوع لاصق، جسم غائر، صفوف تُضاء عند التحويم بحافة برتقالية.

```html
<div class="skeu-panel rounded-[var(--skeu-radius-lg)] overflow-hidden overflow-x-auto">
  <table class="skeu-table text-sm min-w-[480px]">
    <thead><tr><th class="text-start">Order</th><th class="text-start">Customer</th><th class="text-start">Status</th><th class="text-end">Total</th><th></th></tr></thead>
    <tbody>
      <tr><td class="font-mono text-xs">#48213</td><td>Sara A.</td><td><span class="skeu-chip-success px-2 py-0.5 rounded-full text-[10px] font-bold">Delivered</span></td><td class="text-end tabular-nums font-semibold">89,000</td><td class="text-end"><button class="skeu-btn skeu-btn-ghost inline-flex items-center justify-center w-8 h-8 rounded-full" aria-label="Row actions"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></button></td></tr>
      <tr><td class="font-mono text-xs">#48212</td><td>Omar K.</td><td><span class="skeu-chip px-2 py-0.5 rounded-full text-[10px] font-bold">Shipping</span></td><td class="text-end tabular-nums font-semibold">142,500</td><td class="text-end"><button class="skeu-btn skeu-btn-ghost inline-flex items-center justify-center w-8 h-8 rounded-full" aria-label="Row actions"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></button></td></tr>
    </tbody>
  </table>
</div>
```

**قائمة وصفية** — `skeu-well-soft`

أزواج مفتاح/قيمة في بئر ناعم بفواصل محفورة — لتفاصيل الطلب والفواتير.

```html
<dl class="skeu-well-soft rounded-[var(--skeu-radius-md)] divide-y divide-[var(--skeu-edge)] text-sm">
  <div class="flex justify-between gap-4 px-4 py-2.5"><dt class="text-muted-foreground">Order</dt><dd class="font-mono">#48213</dd></div>
  <div class="flex justify-between gap-4 px-4 py-2.5"><dt class="text-muted-foreground">Placed</dt><dd>12 Sep 2026, 14:02</dd></div>
  <div class="flex justify-between gap-4 px-4 py-2.5"><dt class="text-muted-foreground">Payment</dt><dd>Qi Card •• 4821</dd></div>
  <div class="flex justify-between gap-4 px-4 py-2.5"><dt class="font-semibold">Total</dt><dd class="font-extrabold tabular-nums">89,000 IQD</dd></div>
</dl>
```

**خط زمني** — `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-divider`

عمود نقاط: منجزة (خضراء)، حالية (مؤكسدة نابضة)، قادمة (بئر).

```html
<ol class="relative ps-8 space-y-5 text-sm before:absolute before:top-2 before:bottom-2 before:start-[11px] before:w-px before:bg-[var(--skeu-edge-strong)]">
  <li class="relative"><span class="skeu-chip-success absolute -start-8 top-0 inline-flex items-center justify-center w-6 h-6 rounded-full"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span><div class="font-semibold">Order confirmed</div><div class="text-xs text-muted-foreground">14:02</div></li>
  <li class="relative"><span class="skeu-tile absolute -start-8 top-0 inline-flex items-center justify-center w-6 h-6 rounded-full"><span class="w-2 h-2 rounded-full bg-white"></span></span><div class="font-semibold">Being packed</div><div class="text-xs text-muted-foreground">Now · Merchant: TechZone</div></li>
  <li class="relative text-muted-foreground"><span class="skeu-tile-soft absolute -start-8 top-0 inline-flex w-6 h-6 rounded-full"></span><div class="font-semibold">Out for delivery</div></li>
</ol>
```

**الشارات والشرائح** — `skeu-chip`, `skeu-chip-solid`, `skeu-chip-neutral`, `skeu-chip-success`

أربع خامات: مصبوغة، صلبة، محايدة، نجاح — مع شريحة عدّاد وشريحة قابلة للإزالة.

```html
<span class="skeu-chip px-3 py-1 rounded-full text-xs font-semibold">New</span>
<span class="skeu-chip-solid px-3 py-1 rounded-full text-xs font-semibold">Featured</span>
<span class="skeu-chip-neutral px-3 py-1 rounded-full text-xs font-semibold">Draft</span>
<span class="skeu-chip-success px-3 py-1 rounded-full text-xs font-semibold">Verified</span>
<span class="skeu-chip-solid inline-flex items-center justify-center min-w-6 h-6 px-1.5 rounded-full text-[11px] font-bold tabular-nums">99+</span>
<span class="skeu-chip-neutral inline-flex items-center gap-1 ps-3 pe-1 py-0.5 rounded-full text-xs font-semibold">Basra <button class="inline-flex items-center justify-center w-5 h-5 rounded-full hover:bg-black/5" aria-label="Remove Basra"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></span>
```

**شريط تقدّم + تقدّم دائري** — `skeu-track`, `skeu-fill`

مسار غائر وتعبئة مؤكسدة؛ الدائري SVG بنفس اللون مع قراءة في المنتصف.

```html
<div class="flex items-center gap-5">
  <div class="flex-1">
    <div class="flex justify-between text-xs mb-1.5"><span class="font-semibold">Uploading</span><span class="tabular-nums text-muted-foreground">68%</span></div>
    <div class="skeu-track h-2.5 rounded-full overflow-hidden" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"><div class="skeu-fill h-full rounded-full" style="width:68%"></div></div>
  </div>
  <div class="relative w-14 h-14 shrink-0" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" aria-label="Storage">
    <svg viewBox="0 0 48 48" class="w-full h-full -rotate-90"><circle cx="24" cy="24" r="18" fill="none" stroke="var(--skeu-well-deep)" stroke-width="6"/><circle cx="24" cy="24" r="18" fill="none" stroke="var(--skeu-accent)" stroke-width="6" stroke-linecap="round" stroke-dasharray="113" stroke-dashoffset="36"/></svg>
    <span class="absolute inset-0 flex items-center justify-center text-xs font-bold tabular-nums">68%</span>
  </div>
</div>
```

**عدّاد / مقياس** — `skeu-meter`

نصف دائرة داخل قارئ أرقام — لمعدلات الرضا أو الطاقة أو الحصص.

```html
<div class="skeu-meter rounded-[var(--skeu-radius-lg)] p-4 w-full max-w-56 text-center">
  <svg viewBox="0 0 100 56" class="w-full" role="meter" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" aria-label="Capacity"><path d="M10 50 A40 40 0 0 1 90 50" fill="none" stroke="var(--skeu-well-deep)" stroke-width="10" stroke-linecap="round"/><path d="M10 50 A40 40 0 0 1 90 50" fill="none" stroke="var(--skeu-accent)" stroke-width="10" stroke-linecap="round" stroke-dasharray="125.7" stroke-dashoffset="35.2"/></svg>
  <div class="-mt-6 text-2xl font-extrabold tabular-nums text-primary">72%</div>
  <div class="text-xs text-muted-foreground">Fleet capacity</div>
</div>
```

**حالة فارغة** — `skeu-well`, `skeu-tile-soft`, `skeu-btn-primary`

بئر غائر بحد متقطع، بلاطة أيقونة مصبوغة، نص قصير، وإجراء واحد.

```html
<div class="skeu-well rounded-[var(--skeu-radius-lg)] p-2">
  <div class="rounded-[calc(var(--skeu-radius-lg)-6px)] border border-dashed border-[var(--skeu-edge-strong)] px-6 py-8 text-center">
    <span class="skeu-tile-soft inline-flex items-center justify-center w-12 h-12 rounded-2xl"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.7 11.3a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L22 8H6"/></svg></span>
    <h3 class="mt-3 font-bold">Your cart is empty</h3>
    <p class="mt-1 text-sm text-muted-foreground">Browse 2,500+ merchants and add something you love.</p>
    <a href="#" class="skeu-btn skeu-btn-primary mt-4 inline-flex items-center h-9 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Start shopping</a>
  </div>
</div>
```

**مجموعة هياكل تحميل** — `skeu-panel`, `skeu-skeleton`

كتل غائرة بمسح ضوئي، بنفس هندسة البطاقة التي ستحل محلها.

```html
<div class="skeu-panel w-full max-w-64 rounded-[var(--skeu-radius-lg)] p-3" aria-busy="true" aria-label="Loading product">
  <div class="skeu-skeleton relative aspect-square rounded-[var(--skeu-radius-md)]"></div>
  <div class="skeu-skeleton relative mt-3 h-3.5 w-4/5 rounded-full"></div>
  <div class="skeu-skeleton relative mt-2 h-3.5 w-1/2 rounded-full"></div>
  <div class="skeu-skeleton relative mt-3 h-9 rounded-[var(--skeu-radius-sm)]"></div>
</div>
```

**صفوف قائمة بأسهم** — `skeu-panel`, `skeu-list-item`, `skeu-tile-soft`

لوح يحوي صفوفاً قابلة للنقر بأيقونة، عنوان، وصف، وسهم يقلب في RTL.

```html
<ul class="skeu-panel rounded-[var(--skeu-radius-lg)] p-1.5 max-w-sm">
  <li><a href="#" class="skeu-list-item flex items-center gap-3 px-3 py-2.5 rounded-[var(--skeu-radius-sm)]"><span class="skeu-tile-soft inline-flex items-center justify-center w-9 h-9 rounded-[var(--skeu-radius-sm)]"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg></span><span class="flex-1 min-w-0 text-sm"><span class="block font-semibold">Payment methods</span><span class="text-xs text-muted-foreground">Qi Card, ZainCash, cash</span></span><span class="text-muted-foreground [[dir=rtl]_&]:-scale-x-100"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></span></a></li>
  <li><a href="#" class="skeu-list-item flex items-center gap-3 px-3 py-2.5 rounded-[var(--skeu-radius-sm)]"><span class="skeu-tile-soft inline-flex items-center justify-center w-9 h-9 rounded-[var(--skeu-radius-sm)]"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span><span class="flex-1 min-w-0 text-sm"><span class="block font-semibold">Addresses</span><span class="text-xs text-muted-foreground">2 saved</span></span><span class="text-muted-foreground [[dir=rtl]_&]:-scale-x-100"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></span></a></li>
</ul>
```

#### التغذية الراجعة والطبقات

**التنبيهات الدلالية الأربعة** — `skeu-alert`, `skeu-alert-success`, `skeu-alert-error`, `skeu-alert-warning`, `skeu-alert-info`

جسم نظام مرفوع بحافة ملونة على جهة البداية — نجاح، خطأ، تحذير، معلومة.

```html
<div class="skeu-alert skeu-alert-success rounded-[var(--skeu-radius-md)] px-4 py-3 text-sm" role="status"><strong class="text-[var(--skeu-success)]">Saved.</strong> Your address is now the default.</div>
<div class="skeu-alert skeu-alert-error rounded-[var(--skeu-radius-md)] px-4 py-3 text-sm" role="alert"><strong class="text-[var(--skeu-error)]">Payment failed.</strong> The card was declined — try another method.</div>
<div class="skeu-alert skeu-alert-warning rounded-[var(--skeu-radius-md)] px-4 py-3 text-sm" role="status"><strong class="text-[var(--skeu-warning)]">Low stock.</strong> Only 3 left at this price.</div>
<div class="skeu-alert skeu-alert-info rounded-[var(--skeu-radius-md)] px-4 py-3 text-sm" role="status"><strong class="text-primary">Heads up.</strong> Deliveries pause during Friday prayer.</div>
```

**توست** — `skeu-floating`, `skeu-chip-success`, `animate-skeu-pop`

تنبيه عائم قصير بأيقونة وزر إجراء وإغلاق، يظهر بـ animate-skeu-pop.

```html
<div class="skeu-floating animate-skeu-pop flex items-center gap-3 ps-3 pe-2 py-2.5 rounded-[var(--skeu-radius-md)] max-w-sm text-sm" role="status" aria-live="polite">
  <span class="skeu-chip-success inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span>
  <span class="flex-1 min-w-0"><span class="block font-semibold">Added to cart</span><span class="text-xs text-muted-foreground">Wireless headphones ANC</span></span>
  <button class="skeu-btn skeu-btn-tint h-8 px-3 rounded-[var(--skeu-radius-sm)] text-xs font-semibold">View</button>
  <button class="skeu-btn skeu-btn-ghost inline-flex items-center justify-center w-8 h-8 rounded-full" aria-label="Dismiss"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
</div>
```

**لافتة مضمّنة** — `skeu-well-accent`

بئر مصبوغ بعرض كامل للإعلانات داخل الصفحة، مع رابط وإغلاق.

```html
<div class="skeu-well-accent flex items-center gap-3 ps-4 pe-2 py-2.5 rounded-[var(--skeu-radius-md)] text-sm">
  <span class="text-primary shrink-0"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg></span>
  <p class="flex-1"><strong>Free delivery</strong> on orders above 50,000 IQD until Friday. <a href="#" class="font-semibold text-primary underline underline-offset-2">Details</a></p>
  <button class="skeu-btn skeu-btn-ghost inline-flex items-center justify-center w-8 h-8 rounded-full" aria-label="Dismiss"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
</div>
```

**نافذة حوارية (حيّة)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`, `skeu-btn-primary`, `skeu-btn-secondary`

خلفية معتمة + لوح طبقة علوية بـ animate-skeu-dialog؛ Escape يغلق والتركيز محبوس داخلها.

```html
<div class="skeu-backdrop fixed inset-0 z-50 flex items-center justify-center p-4">
  <div role="dialog" aria-modal="true" aria-labelledby="dlg-title" class="skeu-dialog animate-skeu-dialog w-full max-w-md p-6">
    <h2 id="dlg-title" class="text-lg font-extrabold">Change delivery address?</h2>
    <p class="mt-2 text-sm text-muted-foreground">Your order will be re-routed to the new address. Delivery time may change.</p>
    <div class="mt-6 flex justify-end gap-2">
      <button class="skeu-btn skeu-btn-secondary h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Keep current</button>
      <button class="skeu-btn skeu-btn-primary h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Change address</button>
    </div>
  </div>
</div>
```

**قائمة منسدلة (حيّة)** — `skeu-floating`, `skeu-list-item`, `animate-skeu-pop`, `skeu-divider`

سطح عائم بـ animate-skeu-pop، عناصر role=menuitem تصعد عند التحويم، وعنصر حذف أحمر.

```html
<div class="relative inline-block">
  <button class="skeu-btn skeu-btn-secondary inline-flex items-center gap-2 h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold" aria-haspopup="menu" aria-expanded="true">Options <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  <div role="menu" class="skeu-floating animate-skeu-pop absolute start-0 top-full mt-2 w-52 p-1.5 rounded-[var(--skeu-radius-md)] z-20">
    <button role="menuitem" class="skeu-list-item w-full flex items-center gap-2 px-3 h-9 rounded-[var(--skeu-radius-sm)] text-sm text-start">Edit order</button>
    <button role="menuitem" class="skeu-list-item w-full flex items-center gap-2 px-3 h-9 rounded-[var(--skeu-radius-sm)] text-sm text-start">Duplicate</button>
    <hr class="skeu-divider my-1.5">
    <button role="menuitem" class="skeu-list-item w-full flex items-center gap-2 px-3 h-9 rounded-[var(--skeu-radius-sm)] text-sm text-start text-[var(--skeu-error)]">Cancel order</button>
  </div>
</div>
```

**تلميح** — `skeu-dark`

سطح غرافيتي صغير فوق العنصر، مرتبط عبر aria-describedby.

```html
<span class="relative inline-block group">
  <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-10 h-10 rounded-full" aria-describedby="tip-1" aria-label="Help"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg></button>
  <span id="tip-1" role="tooltip" class="skeu-dark absolute bottom-full start-1/2 -translate-x-1/2 mb-2 px-2.5 py-1.5 rounded-[var(--skeu-radius-xs)] text-xs whitespace-nowrap">Delivery fees explained</span>
</span>
```

**نافذة منبثقة** — `skeu-floating`, `animate-skeu-pop`, `skeu-btn-tint`

سطح عائم بمحتوى غني (عنوان، نص، إجراء) مرتبط بزر بـ aria-expanded.

```html
<div class="relative inline-block">
  <button class="skeu-btn skeu-btn-tint h-9 px-3 rounded-full text-sm font-semibold" aria-expanded="true" aria-controls="pop-1">Loyalty points</button>
  <div id="pop-1" class="skeu-floating animate-skeu-pop absolute start-0 top-full mt-2 w-64 p-4 rounded-[var(--skeu-radius-md)] z-20">
    <div class="text-xs font-bold uppercase tracking-wider text-muted-foreground">Balance</div>
    <div class="mt-1 text-2xl font-extrabold tabular-nums text-primary">2,480 pts</div>
    <p class="mt-1.5 text-xs text-muted-foreground">Redeem 1,000 pts for 5,000 IQD off your next order.</p>
    <button class="skeu-btn skeu-btn-primary mt-3 w-full h-9 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Redeem</button>
  </div>
</div>
```

**حوار تأكيد (حيّ)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`, `skeu-btn-destructive`

نفس النافذة الحوارية مع بلاطة تحذير وزر حذف أحمر — للإجراءات غير القابلة للتراجع.

```html
<div class="skeu-backdrop fixed inset-0 z-50 flex items-center justify-center p-4">
  <div role="alertdialog" aria-modal="true" aria-labelledby="cf-title" aria-describedby="cf-body" class="skeu-dialog animate-skeu-dialog w-full max-w-sm p-6 text-center">
    <span class="skeu-alert skeu-alert-error inline-flex items-center justify-center w-12 h-12 rounded-full text-[var(--skeu-error)]"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></span>
    <h2 id="cf-title" class="mt-3 text-lg font-extrabold">Cancel this order?</h2>
    <p id="cf-body" class="mt-1.5 text-sm text-muted-foreground">The merchant has already started packing. This can’t be undone.</p>
    <div class="mt-6 grid grid-cols-2 gap-2">
      <button class="skeu-btn skeu-btn-secondary h-10 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Keep order</button>
      <button class="skeu-btn skeu-btn-destructive h-10 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Cancel order</button>
    </div>
  </div>
</div>
```

**لوح سفلي (حيّ)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`

نافذة حوارية مثبتة أسفل الشاشة بمقبض سحب — للموبايل.

```html
<div class="skeu-backdrop fixed inset-0 z-50 flex items-end sm:items-center justify-center">
  <div role="dialog" aria-modal="true" aria-labelledby="sheet-title" class="skeu-dialog animate-skeu-dialog w-full sm:max-w-md rounded-b-none sm:rounded-b-[var(--skeu-radius-xl)] p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))]">
    <span class="block mx-auto w-10 h-1.5 rounded-full bg-[var(--skeu-edge-strong)] sm:hidden" aria-hidden="true"></span>
    <h2 id="sheet-title" class="mt-3 font-extrabold">Sort by</h2>
    <div class="mt-3 grid gap-1">
      <button class="skeu-well-accent flex items-center justify-between px-3 h-11 rounded-[var(--skeu-radius-sm)] text-sm font-semibold text-primary" aria-pressed="true">Recommended <span><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></span></button>
      <button class="skeu-list-item flex items-center px-3 h-11 rounded-[var(--skeu-radius-sm)] text-sm font-medium">Price: low to high</button>
      <button class="skeu-list-item flex items-center px-3 h-11 rounded-[var(--skeu-radius-sm)] text-sm font-medium">Newest</button>
    </div>
  </div>
</div>
```

#### التجارة

**حبوب حالة الطلب** — `skeu-chip`, `skeu-chip-solid`, `skeu-chip-success`, `skeu-chip-neutral`

الأربع حالات القياسية في جنّي: قيد التجهيز، جاري التوصيل، تم التسليم، ملغى.

```html
<span class="skeu-chip inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold"><span class="w-1.5 h-1.5 rounded-full bg-current"></span>Preparing · قيد التجهيز</span>
<span class="skeu-chip-solid inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>Out for delivery · جاري التوصيل</span>
<span class="skeu-chip-success inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg>Delivered · تم التسليم</span>
<span class="skeu-chip-neutral inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold text-muted-foreground line-through">Cancelled · ملغى</span>
```

**سطر في السلة** — `skeu-panel`, `skeu-tile-ceramic`, `skeu-btn-secondary`, `skeu-btn-ghost`

صورة، اسم، خيار، عدّاد كمية، سعر السطر، وزر حذف شبحي.

```html
<div class="skeu-panel flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)]">
  <span class="skeu-tile-ceramic w-16 h-16 rounded-[var(--skeu-radius-sm)] overflow-hidden shrink-0"><img src="/product.jpg" alt="" class="w-full h-full object-cover"></span>
  <div class="flex-1 min-w-0">
    <div class="text-sm font-semibold truncate">Wireless headphones ANC</div>
    <div class="text-xs text-muted-foreground">Black · 1 year warranty</div>
    <div class="mt-2 inline-flex items-center" role="group" aria-label="Quantity">
      <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-8 h-8 rounded-s-[var(--skeu-radius-sm)] rounded-e-none" aria-label="Decrease"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg></button>
      <span class="skeu-input h-8 w-10 inline-flex items-center justify-center text-sm font-bold tabular-nums rounded-none -mx-px">2</span>
      <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-8 h-8 rounded-e-[var(--skeu-radius-sm)] rounded-s-none" aria-label="Increase"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
    </div>
  </div>
  <div class="text-end shrink-0">
    <div class="text-sm font-extrabold tabular-nums">178,000 IQD</div>
    <button class="skeu-btn skeu-btn-ghost mt-1 h-7 px-2 rounded-[var(--skeu-radius-xs)] text-xs text-muted-foreground hover:text-[var(--skeu-error)]">Remove</button>
  </div>
</div>
```

**سعر مع خصم** — `skeu-chip-success`

السعر الحالي بارز، السعر القديم مشطوب، ونسبة الخصم في شريحة نجاح.

```html
<div class="flex items-baseline gap-2 flex-wrap">
  <span class="text-2xl font-extrabold tabular-nums">89,000 <span class="text-sm font-semibold text-muted-foreground">IQD</span></span>
  <s class="text-sm text-muted-foreground tabular-nums">112,000</s>
  <span class="skeu-chip-success px-2 py-0.5 rounded-full text-[11px] font-bold">Save 23,000</span>
</div>
<p class="mt-1 text-xs text-muted-foreground">Or 3 × 29,667 IQD with installments</p>
```

**عدّاد كمية** — `skeu-btn-secondary`, `skeu-input`

زران سيراميكيان يحيطان ببئر قراءة؛ الحد الأدنى يعطّل زر النقصان.

```html
<div class="inline-flex items-center" role="group" aria-label="Quantity">
  <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-10 h-10 rounded-s-[var(--skeu-radius-sm)] rounded-e-none" aria-label="Decrease" disabled><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg></button>
  <input class="skeu-input h-10 w-14 text-center text-sm font-bold tabular-nums rounded-none -mx-px" value="1" inputmode="numeric" aria-label="Quantity">
  <button class="skeu-btn skeu-btn-secondary inline-flex items-center justify-center w-10 h-10 rounded-e-[var(--skeu-radius-sm)] rounded-s-none" aria-label="Increase"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
</div>
```

**خط توصيل أفقي** — `skeu-panel`, `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-track`, `skeu-fill`

ثلاث محطات أفقية بمسار تقدم بينها — نسخة الموبايل من الخط الزمني.

```html
<div class="skeu-panel rounded-[var(--skeu-radius-lg)] p-4">
  <div class="flex items-center justify-between text-sm"><span class="font-semibold">Order #48213</span><span class="skeu-chip-solid px-2 py-0.5 rounded-full text-[10px] font-bold">Arrives today</span></div>
  <ol class="mt-4 flex items-center gap-2">
    <li class="skeu-chip-success inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0" aria-label="Confirmed"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg></li>
    <li class="flex-1 skeu-track h-1.5 rounded-full overflow-hidden"><div class="skeu-fill h-full w-full"></div></li>
    <li class="skeu-tile inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0" aria-current="step" aria-label="On the way"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></li>
    <li class="flex-1 skeu-track h-1.5 rounded-full overflow-hidden"><div class="skeu-fill h-full w-2/5"></div></li>
    <li class="skeu-tile-soft inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0" aria-label="Delivered"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></li>
  </ol>
  <div class="mt-2 flex justify-between text-[11px] text-muted-foreground"><span>Confirmed</span><span class="font-semibold text-primary">On the way</span><span>Delivered</span></div>
</div>
```

**بطاقة رأس التاجر** — `skeu-panel-2`, `skeu-tile-ceramic`, `skeu-chip-success`, `skeu-btn-primary`

شعار في بلاطة سيراميكية، اسم، شارة توثيق، تقييم، وزر متابعة.

```html
<div class="skeu-panel-2 flex items-center gap-4 p-4 rounded-[var(--skeu-radius-lg)]">
  <span class="skeu-tile-ceramic inline-flex items-center justify-center w-14 h-14 rounded-[var(--skeu-radius-md)] text-lg font-extrabold text-primary shrink-0">TZ</span>
  <div class="flex-1 min-w-0">
    <div class="flex items-center gap-2 flex-wrap"><h3 class="font-extrabold truncate">TechZone</h3><span class="skeu-chip-success inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 4 4L19 7"/></svg>Verified</span></div>
    <div class="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground"><span class="inline-flex items-center gap-1 text-primary"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg><span class="font-bold text-foreground">4.8</span></span><span>· 1.2K orders · Karrada</span></div>
  </div>
  <button class="skeu-btn skeu-btn-primary h-9 px-4 rounded-full text-sm font-semibold shrink-0">Follow</button>
</div>
```

**صف طريقة الدفع** — `skeu-panel`, `skeu-panel-selected`, `skeu-check`, `skeu-radio`, `skeu-tile-ceramic`

خيارات دفع كبطاقات راديو: Qi Card، ZainCash، الدفع عند الاستلام.

```html
<fieldset class="grid gap-2">
  <legend class="sr-only">Payment method</legend>
  <label class="skeu-panel skeu-panel-selected flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)] cursor-pointer">
    <input type="radio" name="pay" class="skeu-check skeu-radio" checked>
    <span class="skeu-tile-ceramic inline-flex items-center justify-center w-10 h-7 rounded-[var(--skeu-radius-xs)] text-[10px] font-extrabold text-primary">Qi</span>
    <span class="flex-1 text-sm font-semibold">Qi Card <span class="block text-xs font-normal text-muted-foreground" dir="ltr">•••• 4821</span></span>
    <span class="skeu-chip px-2 py-0.5 rounded-full text-[10px] font-bold">Default</span>
  </label>
  <label class="skeu-panel flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)] cursor-pointer">
    <input type="radio" name="pay" class="skeu-check skeu-radio">
    <span class="skeu-tile-ceramic inline-flex items-center justify-center w-10 h-7 rounded-[var(--skeu-radius-xs)] text-[10px] font-extrabold">Zain</span>
    <span class="flex-1 text-sm font-semibold">ZainCash</span>
  </label>
  <label class="skeu-panel flex items-center gap-3 p-3 rounded-[var(--skeu-radius-md)] cursor-pointer">
    <input type="radio" name="pay" class="skeu-check skeu-radio">
    <span class="skeu-tile-ceramic inline-flex items-center justify-center w-10 h-7 rounded-[var(--skeu-radius-xs)] text-muted-foreground"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg></span>
    <span class="flex-1 text-sm font-semibold">Cash on delivery</span>
  </label>
</fieldset>
```

**شريحة كوبون / نقاط ولاء** — `skeu-input`, `skeu-btn-tint`, `skeu-chip-solid`, `skeu-chip`

حقل كوبون مع زر تطبيق، وشريحة نقاط ولاء مؤكسدة برصيد جدولي.

```html
<form class="flex gap-2">
  <input class="skeu-input flex-1 h-10 px-3 rounded-[var(--skeu-radius-sm)] text-sm font-mono uppercase" placeholder="PROMO CODE" aria-label="Promo code">
  <button class="skeu-btn skeu-btn-tint h-10 px-4 rounded-[var(--skeu-radius-sm)] text-sm font-semibold">Apply</button>
</form>
<div class="mt-3 flex flex-wrap gap-2">
  <span class="skeu-chip-solid inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3 6.6 7 .8-5.2 4.8L18.2 21 12 17.5 5.8 21 7.2 14.2 2 9.4l7-.8z"/></svg>2,480 pts</span>
  <span class="skeu-chip inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold">WELCOME10 · -10%</span>
</div>
```

العيّنات الحيّة: https://gini.iq/brand#components

### قواعد الحالات

| الحالة | التمثيل المادي |
|---|---|
| افتراضي | مرفوع بخامته الطبيعية |
| تحويم | يرتفع 1–2px وتقوى إضاءته |
| ضغط | ينزل 1px، ظل داخلي، لون أغمق |
| تركيز | حلقة إضاءة برتقالية 3px — دائماً مرئية |
| مختار | مغروس في سكته مع لون تمييز + خاصية ARIA |
| معطّل | شفافية 55%، إشباع أقل، بلا حركة |
| تحميل | هياكل غائرة بمسح ضوئي أو مؤشر داخل الزر |
| خطأ | حافة حمراء + حلقة حمراء خفيفة + رسالة نصية |

### المنهجية

1 — التدقيق: جرد كل المسارات والمكوّنات والأنماط المتكررة قبل لمس أي صفحة، وفهم المنتج كنظام واحد.
2 — الأساس: التوكنات، الخامات، نموذج الإضاءة، الظلال، الحدود، الأقطار، الحركة — كلها مركزية في globals.css.
3 — الأوليات: ترقية الأزرار والمدخلات والتبويبات والمفاتيح والشارات والنوافذ قبل أي صفحة.
4 — الهيكل العام: الهيدر كسكة، خلفية القاعدة، الفوتر الغرافيتي، الحاويات.
5 — صفحة‑صفحة: ترحيل كل مسار مع حالات التحميل والفراغ والخطأ، دون حذف أي محتوى أو تغيير أي منطق.
6 — الاستجابة: فحص 1366px و390px بالعربية والإنكليزية: لا تجاوز أفقي، أهداف لمس مريحة، ظلال مبسّطة على الموبايل.
7 — الصقل: تدقيق اتساق شامل وكنس بقايا اللغة القديمة حتى يبدو كل شيء من فريق واحد ونظام واحد.

### افعل

- ابدأ بصنف الخامة (skeu-panel، skeu-btn-primary…) ثم أضف أدوات Tailwind للتخطيط فقط.
- اجعل المحتوى (صور المنتجات، الأرقام، النصوص) هو البطل، والأسطح تدعمه.
- استخدم الخصائص المنطقية (start/end) وتأكد من النسختين العربية والإنكليزية.
- أعطِ كل حالة (تحويم، ضغط، تركيز، معطّل) تمثيلاً مادياً واضحاً.
- احترم مستوى الارتفاع المناسب لدور العنصر — لا ترفع كل شيء.

### لا تفعل

- لا نيومورفية: كتل رمادية بظل فاتح أعلى‑يسار وظل داكن أسفل‑يمين.
- لا جلد ولا خشب ولا قوام صور ثقيل — الخامات مصقولة ومضبوطة.
- لا تدرجات زخرفية بلا سبب مادي، ولا ظلال عشوائية خارج التوكنات.
- لا تجعل كل شيء حبة دواء — لكل نوع كائن قطره.
- لا ظلال على النصوص، ولا تضحية بالتباين من أجل النعومة.
- لا متغيرات rtl:/ltr: في Tailwind — الجذر مثبّت على RTL وتتسرب إلى النسخة الإنكليزية.

### التوكنات الأساسية

| Token | Value | المعنى |
|---|---|---|
| `--skeu-bg` | `oklch(0.962 0.012 72)` | قاعدة البوليمر |
| `--skeu-surface` | `oklch(0.993 0.004 80)` | سطح السيراميك |
| `--skeu-well` | `oklch(0.955 0.01 72)` | لون البئر الغائر |
| `--skeu-accent` | `#f05d25` | برتقالي جنّي |
| `--skeu-accent-deep` | `#c9481a` | حافة التحكّمات المؤكسدة |
| `--skeu-edge` | `oklch(0.86 0.018 68)` | لون حواف الأسطح |
| `--skeu-highlight` | `rgba(255,255,255,0.92)` | الحافة العلوية المضيئة |
| `--skeu-ink` | `37, 22, 10` | حبر الظلال الدافئ (RGB) |
| `--skeu-shadow-raised-1` | `inset 0 1px 0 highlight, 0 1px 1px, 0 2px 4px -1px, 0 10px 24px -14px` | مكدّس البطاقة القياسية |
| `--skeu-shadow-control` | `inset 0 1px 0 white/38, inset 0 -2px 0 dark/32, 0 1px 2px, 0 6px 14px -6px orange/55` | مكدّس الزر الأساسي |
| `--skeu-focus-rim` | `0 0 0 3px rgba(240,93,37,.22) + inset` | حلقة التركيز المضيئة |
| `--skeu-transition-fast / -normal` | `150ms / 260ms` | زمن الضغط / زمن الارتفاع |

التنفيذ الحي في `app/globals.css`، والمتغيّرات الكاملة في `https://gini.iq/brand.css`، والعيّنات الحيّة على https://gini.iq/brand#design-system.

## الصوت والنبرة

- **دافئ** — نتحدّث بلغة بسيطة، قريبة من الناس، تعكس ثقافتنا العراقية.
- **واثق** — نقدّم وعوداً نفي بها، ونوضح ما نعرف وما لا نعرف.
- **مختصَر** — جمل قصيرة وأفكار واضحة. كل كلمة تستحق مكانها.
- **متفائل** — نرى الفرصة قبل العائق، ونصنع أدوات تُسهّل الخطوة التالية.

### أمثلة كتابيّة

**قل:** نمكّن التجار من النمو رقمياً — بأدوات إدارة ومدفوعات وتوصيل متكاملة.

**لا تقل:** ~~المنصّة الرائدة التي تقدّم تجربة تسوّق لا مثيل لها.~~

> **السبب:** نوضّح ما نفعله للتجار والمستهلكين معاً، لا ندّعي الريادة بلا دليل.

**قل:** لم نستطع إتمام الدفع. جرّب بطاقة أخرى أو تواصل معنا.

**لا تقل:** ~~حدث خطأ أثناء معالجة عمليتك. يرجى المحاولة لاحقاً.~~

> **السبب:** اشرح ما حدث، ثم اعرض الخطوة التالية. لا تُعلّق الزبون في المجهول.

## الإعلام

### نص صحفي جاهز

> جنّي (GINI) شركة عراقية لأتمتة الأسواق والتجارة الرقمية تأسّست عام 2023، تهدف إلى ربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة. توفّر جنّي أدوات لإدارة الأعمال وعرض المنتجات والخدمات ومعالجة المدفوعات وإدارة الطلبات — مما يمكّن الشركات والتجار من النمو والوصول إلى ملايين المستخدمين بسهولة وكفاءة. مقرّها الرئيسي في بغداد، وتخدم التجار والمستهلكين في جميع المحافظات العراقية.

### بطاقة حقائق

- **الاسم الرسمي:** GINI (جنّي)
- **سنة التأسيس:** 2023
- **المقر:** بغداد، العراق
- **النشاط:** أتمتة الأسواق والتجارة الرقمية
- **الموقع:** gini.iq
- **التواصل الإعلامي:** info@gini.iq

**التواصل:** `info@gini.iq`

## أسئلة شائعة

### هل يمكنني استخدام الشعار في مقال أو فيديو عن جنّي؟

نعم. الاستخدام التحريري (صحافة، مدوّنات، محتوى إخباري) مسموح به دون إذن مسبق، ما دام الشعار مُستخدماً كما هو موضّح هنا — بالنسب والألوان الأصلية.

### أرغب بعمل علامة مشتركة مع جنّي — ما الخطوة؟

راسلنا على info@gini.iq بتفاصيل المشروع والجدول الزمني. عادةً نردّ خلال 24 ساعة ونزوّدك بإرشادات إضافية وأصول خاصّة بالتعاون.

### هل يمكنني تعديل الألوان لتتماشى مع هويّتي؟

لا. استخدم الألوان الرسميّة فقط (برتقالي جنّي أو النسخة البيضاء). أي تعديل لوني يُعدّ إساءة استخدام للعلامة.

### هل لديكم صور عالية الجودة للإعلام؟

نعم. راسلنا على info@gini.iq وسنرسل لك حزمة صور مخصّصة تشمل لقطات منتجات، فريق العمل، والمقر الرئيسي.

### هل اسم «جنّي» و«GINI» علامات مسجّلة؟

نعم، كلاهما علامتان تجاريّتان تخصّان GINI. يجب تجنّب استخدامهما لأسماء منتجات أو شركات مشابهة قد تُسبّب التباساً.

## شروط الاستخدام

تُتاح أصول علامة جنّي على هذه الصفحة للاستخدام التحريري (صحافة، محتوى إخباري، مراجعات) وللشراكات المعتمدة. يُمنع تعديل الشعار أو ألوانه أو نسبه.

**مسموح به:**
- `editorial-use`
- `news-coverage`
- `product-reviews`
- `partner-marketing`
- `conference-presentations`

**ممنوع:**
- `logo-modification`
- `colour-substitution`
- `stretching-or-distortion`
- `outlines-shadows-effects`
- `merchandise-without-permission`
- `confusingly-similar-marks`

للاستثناءات أو الشراكات الرسمية، راسلنا على `info@gini.iq`.

## للمطوّرين والوكلاء الذكيّين

كلّ ما يحتاجه مشروع جديد لاعتماد هويّة جنّي بسطر استيراد واحد:

- **CSS** — `https://gini.iq/brand.css` (متغيّرات جاهزة)
- **أصناف المكوّنات** — `https://gini.iq/skeu.css` (كل أصناف skeu-* والتوكنات — مكتبة المكوّنات)
- **Tailwind v4** — `https://gini.iq/brand.tailwind.css` (كتلة @theme)
- **W3C Design Tokens** — `https://gini.iq/brand.tokens.json` (لـ Style Dictionary وFigma)
- **نظام تعليمات للنماذج** — `https://gini.iq/brand-prompt.md`
- **`.cursorrules`** — `https://gini.iq/cursorrules`
- **`AGENTS.md`** — `https://gini.iq/AGENTS.md`
- **JSON Schema** — `https://gini.iq/schemas/brand-manifest.json`

## الإصدار

**1.7** — 2026-09

### سجل التغييرات

- **v1.7** (2026-09) — نظام التصميم البصري (اسكيومورفية حديثة): الخامات، الإضاءة، سلّم الارتفاع، الحركة، فهرس المكوّنات والمنهجية — مع عيّنات حيّة.
- **v1.6** (2026-04) — الرمز الأحادي (حرف G) بلا نقطة برتقاليّة.
- **v1.5** (2026-04) — الشعار الكامل أحاديّ اللون — أسود وأبيض.
- **v1.4** (2026-04) — ملفّات الشعار الرسميّة وقسم الملكيّة التجاريّة.
- **v1.3** (2026-04) — تحسينات على بطاقات الشعار والنقش والعرض الرئيسي.
- **v1.2** (2026-04) — توسيع الدليل: أسس، تشريح، وصول، أسئلة شائعة.
- **v1.1** (2026-03) — نسخة الشعار الداكنة وقيم Pantone.
- **v1.0** (2026-02) — الإصدار الأول من الدليل.