/* ════════════════════════════════════════════════════════════════ Goustenu · menu — «نقش ناعم» (PLAN-V1 §2.3) ================================================================ المنيو كلّه منحوت من **مادّة واحدة**: لا حدود، لا بطاقات بيضاء على خلفية رمادية — نتوء وغور فقط، من ضوءٍ واحد ثابت. هذا هو أصل النمط المختار (`design-lab/02-neumorphism.html`) وما تحفظه كل قاعدة هنا. ─── قرار 1: النمط من المعمل، واللون من `PRODUCT.md` ─────────── نموذج المعمل مبنيّ على رماديّ **أزرق بارد** (#E9ECF2). وهذا مضادّ منصوص في `PRODUCT.md §3` («لا أزرق تقنيّ ولا رمادي بارد») — لأنّ المنتج طعامٌ جزائريّ لا لوحة تحكّم SaaS. فالمنقول هو **التقنية** (سطح واحد · نتوء/غور · ضوء ثابت)، والمطبَّق عليها **كريميّ دافئ** من لوحة «دار الزيتون». تبديل السطح كلّه = كتلة الرموز أدناه وحدها. ─── قرار 2: مَن يملك أيّ لون ───────────────────────────────── `app.mjs` يحقن ثيم المطعم كـ**سمة نمط مباشرة على ** — وهي تسبق كل ورقة أنماط. فلو بنينا السطح من `--bg` المحقون لاستحال الوضع الداكن (لا قاعدة تستطيع تجاوز inline). القسمة إذن صريحة: • **المستأجر يملك** `--primary` / `--primaryLight` / `--secondary` — هويّته، وتظهر كلكنة (سعر · زرّ · تمييز). • **القالب يملك** السطح والحبر والظلال — `--surface`, `--hi`, `--lo`, `--ink`… ولذلك يستطيع الوضع الداكن قلبها بحرّيّة. وهذا نفسه ما يأمر به `PRODUCT.md §4`: «الكريميّ والنصّ ثابتان — هما ما يمنع اللوحات الرديئة التي يختارها العملاء من تدمير الصفحة». ⇒ `--bg` و`--bgCard` و`--border` غير مستهلكة هنا **عن قصد** (وليست منسيّة): `site-meta.mjs` لا يسمح للمطعم إلا بلونَين أصلاً. ─── قرار 3: سُلَّم اللكنة — ثلاث إعلانات لخاصّيّة واحدة ──────── اختبار القبول الثالث في `PRODUCT.md §8` هو لوحة رديئة (`#00FF00`). لون كهذا **غير مقروء** على كريميّ بأيّ حال. فـ`--accent-ink` تُعلَن ثلاث مرّات، والمتصفّح يأخذ آخر ما يفهم (تحسين تدريجيّ خالص): 1) اللون كما هو ← أيّ محرّك (السلوك الحالي، بلا انحدار) 2) `color-mix` نحو الحبر ← يشدّ الصارخ إلى داخل اللوحة 3) `oklch(from … min(l,…))` ← **سقف إضاءة**: يضمن التباين رياضيّاً في الوضع الداكن يُعكس الاتّجاه (`max(l, …)`) فتُرفَع اللكنة لا تُخفَض. ─── قرار 4: النمط لا يستطيع رسم زرٍّ أساسيّ — فيُخرَج منه ────── ضعف النيومورفيزم بنيويّ: تباين العنصر مع خلفيته يقارب الصفر بحكم التعريف. مقبول للمقابض والأسطح، **مرفوض** للسعر ولزرّ الطلب. فهذان يخرجان من المادّة بتباين حقيقي (لون ممتلئ + حبر معاكس). نفس القرار اتّخذه نموذج المعمل، ولنفس السبب. ─── قرار 5: الضوء فيزيائيّ لا منطقيّ ───────────────────────── `--nm-*` تستعمل إزاحات فيزيائية (يمين/أسفل) ولا تنقلب مع RTL. مصدر ضوء واحد أعلى-يسار للصفحة كلّها؛ لو انقلب مع الاتجاه لظهرت الأسطح منحوتة من مادّتَين. أمّا المواضع والحوافّ فمنطقيّة (`inset-inline`, `padding-inline`) — فتلك تتبع اللغة بحقّ. ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════ 1. الرموز — نهار ════════════════════════════════════════════════ */ :root { /* ─── مقاسُ النصّ ─── كان يُستهلَك بلا تعريف: `font-size: var(--t-md)` ورمزٌ مجهول ⇒ الإعلانُ **باطلٌ عند الحساب** فيَرِث العنصرُ قياسَ أبيه بدل المقصود — بلا خطأٍ في أيّ سجلّ. ونفسُ السلّم المستعمل في `saff`/`shabaka`/`sikka` كي تتّفق القوالبُ على نسبةٍ واحدة. */ --t-xs: .75rem; --t-sm: .86rem; --t-md: .96rem; --t-lg: 1.12rem; --t-xl: 1.3rem; color-scheme: light; /* السطح: كريميّ **متوسّط الإضاءة** لا أبيض. النيومورفيزم يحتاج مدىً فوق السطح وتحته؛ على #FBF7F2 (قيمة --bg) يختفي النتوء لأنّ الأبيض لا يكاد يفرق عنه. فالسطح هنا قيمة القالب لا قيمة المستأجر. */ --surface: #F1EBE1; --surface-2: #EAE3D7; --hi: #FFFCF6; /* الضوء (أعلى-يسار) */ --lo: #D3C8B7; /* الظلّ (أسفل-يمين) */ --ink: var(--text, #2A211C); --ink-2: #6F6259; --ink-3: #9A8C80; --accent: var(--primary, #A63D2F); --accent-2: var(--primaryLight, #C4574A); --gold: var(--secondary, #D9A441); --on-accent: #FFF7F3; /* سُلَّم اللكنة (قرار 3) — الترتيب مقصود، لا تُعِد ترتيبه. */ --accent-ink: var(--accent); --accent-ink: color-mix(in srgb, var(--accent) 84%, var(--ink)); --accent-ink: oklch(from var(--accent) min(l, 0.5) c h); --accent-wash: rgba(166, 61, 47, .10); --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent); --ok: #2E6B41; --warn: #8A5A12; --vac: #5B4794; --closed: #C0392B; /* الشعاع: كبير للألواح، صغير للمقابض — الفرق يبني هرميّة بلا حدود. */ --r-lg: 26px; --r-md: 18px; --r-sm: 12px; --maxw-col: 640px; /* عمود الهاتف */ --maxw: 1180px; /* إطار سطح المكتب */ --nav-h: 3.6rem; /* ارتفاع شريط الفئات اللاصق (الهاتف) */ /* معادلة النمط — ضوء من أعلى-يسار دائماً (قرار 5) */ --nm-out: 6px 6px 14px var(--lo), -6px -6px 14px var(--hi); --nm-out-s: 3px 3px 8px var(--lo), -3px -3px 8px var(--hi); --nm-in: inset 5px 5px 11px var(--lo), inset -5px -5px 11px var(--hi); --nm-in-s: inset 3px 3px 6px var(--lo), inset -3px -3px 6px var(--hi); /* 🔴 **ظلٌّ بلا إزاحةٍ أفقيّة — للألواح العريضة وحدها** (شكوى 2026-09-10: «في الجانبين ظلّان طويلان لا أريدهما، أريد ظلال الأزرار فقط»). لوحٌ بعرض العمود يُسقِط ظلَّه يميناً ويساراً؛ وخاناتُ الفئات مرصوصةٌ من أعلى الشاشة إلى أسفلها ⇒ خطّان متّصلان ينزلان مع الصفحة. والزرُّ قرصٌ صغيرٌ لا يفعل ذلك، فيحتفظ بـ`--nm-out`/`--nm-out-s` كاملةً. ⚠️ والانتشارُ السالبُ يساوي نصفَ التمويه ⇒ صفرُ نزيفٍ جانبيّ — لا بتصغير الظلّ بل بإلغاء امتداده الأفقيّ وحده. */ --nm-flat: 0 8px 16px -8px var(--lo), 0 -6px 12px -6px var(--hi); --nm-flat-s: 0 4px 10px -5px var(--lo), 0 -3px 8px -4px var(--hi); } /* ─── ليل ─── ثلاث حالات لا اثنتان: (أ) بلا اختيار ⇒ تفضيل النظام، (ب) اختيار صريح `light` يجب أن يغلب تفضيل النظام الداكن — ومن هنا `:not([data-theme="light"])`، (ج) اختيار صريح `dark` يغلب في الاتّجاهَين. القيم مكرَّرة في الكتلتَين عن قصد: قائمة رموز واحدة موزّعة على استعلامَين تنكسر عند أوّل تعديل يُنسى في إحداهما. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface: #221E1B; --surface-2: #1D1917; --hi: #2C2724; --lo: #131110; --ink: #EFE7DF; --ink-2: #B3A79C; --ink-3: #857a71; --on-accent: #201B18; --accent-ink: var(--accent-2); --accent-ink: color-mix(in srgb, var(--accent) 55%, #FFF3EC); --accent-ink: oklch(from var(--accent) max(l, 0.76) c h); --accent-wash: rgba(229, 130, 112, .12); --accent-wash: color-mix(in srgb, var(--accent) 22%, transparent); --ok: #67C68C; --warn: #DCAE68; --vac: #A594E4; --closed: #F0857A; } } :root[data-theme="dark"] { color-scheme: dark; --surface: #221E1B; --surface-2: #1D1917; --hi: #2C2724; --lo: #131110; --ink: #EFE7DF; --ink-2: #B3A79C; --ink-3: #857a71; --on-accent: #201B18; --accent-ink: var(--accent-2); --accent-ink: color-mix(in srgb, var(--accent) 55%, #FFF3EC); --accent-ink: oklch(from var(--accent) max(l, 0.76) c h); --accent-wash: rgba(229, 130, 112, .12); --accent-wash: color-mix(in srgb, var(--accent) 22%, transparent); --ok: #67C68C; --warn: #DCAE68; --vac: #A594E4; --closed: #F0857A; } /* ════════════════════════════════════════════════ 2. الأساس ════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--surface); /* للنقر على شرائح الفئات — يُعطَّل تحت prefers-reduced-motion (§7) */ scroll-behavior: smooth; } body { margin: 0; padding: 0 1rem 6.5rem; max-width: var(--maxw-col); margin-inline: auto; background: var(--surface); color: var(--ink); font-family: var(--font-text, system-ui, sans-serif); font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; } /* الأرقام لاتينية قاعدةً في المشروع (`formatPrice`)؛ والعرض الجدوليّ يمنع «رقصة» الأسعار عند تغيّر الكمّيّة — 1 و7 بنفس العرض. */ body { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } h1, h2, h3 { font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; margin: 0; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; color: inherit; } /* السبرايت: خارج التدفّق تماماً — لولا ذلك احتلّ خلية في شبكة سطح المكتب (هو ابن body مباشرةً) فأزاح التخطيط. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 1em; height: 1em; flex: none; } .hidden { display: none !important; } /* حلقة تركيز واحدة لكل الواجهة — إلزاميّة (`PRODUCT.md §6`) */ :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; } /* ════════════════════════════════════════════════ 3. زرّ الوضع (نهار/ليل) ════════════════════════════════════════════════ */ .theme-toggle { position: fixed; top: max(.7rem, env(safe-area-inset-top)); inset-inline-end: .7rem; z-index: 30; width: 44px; height: 44px; /* هدف لمس ≥44px (`PRODUCT.md §5`) */ display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--nm-out-s); cursor: pointer; transition: box-shadow .18s ease, color .18s ease; } .theme-toggle:hover { color: var(--accent-ink); } .theme-toggle:active { box-shadow: var(--nm-in-s); } .theme-toggle .icon { width: 20px; height: 20px; } /* رمزان في زرٍّ واحد: الظاهر هو **الوجهة** لا الحالة — هلال ليلاً؟ لا: هلال نهاراً (اضغط لتُظلم) وشمس ليلاً (اضغط لتُنير). */ .theme-toggle .tt-sun { display: none; } .theme-toggle[aria-pressed="true"] .tt-moon { display: none; } .theme-toggle[aria-pressed="true"] .tt-sun { display: block; } /* ════════════════════════════════════════════════ 4. الترويسة — غلاف (صورة أو بديل مصمَّم) + هويّة ════════════════════════════════════════════════ */ .header { padding-top: 1rem; } /* الغلاف يمتدّ إلى حافّة الشاشة على الهاتف (يعادل padding الجسم) */ .r-hero { margin-inline: -1rem; margin-bottom: -1.6rem; /* لوح الهويّة يركب أسفله */ /* ⚠️ **نسبة الصندوق تتبع الصورة، محصورةً بحدَّين** (بند 2.10، بملاحظتك «مشكلة الصورة الكبيرة قائمة»). التصريح الأوّل احتياطٌ لمتصفّح لا يفهم الدوالّ الحسابيّة داخل `aspect-ratio` — وبلا ذلك الاحتياط تُهمَل القاعدة كلّها فينهار الغلاف إلى ارتفاع صفر (فشلٌ صامت في هاتفٍ قديم وحده). الحدّان: 1.25 كي لا يصير الغلاف نصف الصفحة لصورة مربّعة، و1.9 كي لا يصير شريطاً لصورة بانوراميّة. */ aspect-ratio: 16 / 9; aspect-ratio: clamp(1.25, var(--hero-ar, 1.78), 1.9); max-height: 42vh; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface-2); box-shadow: var(--nm-in); } .r-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── البديل المصمَّم: **لا مستطيل رمادي** (بند 2.3) ─── شبكة خطوط متصالبة من الضوء والظلّ نفسهما ⇒ تُقرأ **منقوشة في المادّة** لا مطبوعة عليها، فتنتمي للنمط بلا صورة. وزاوية الشبك تشتقّ من اسم المطعم (`--seed` من app.mjs) فلا يتشابه مطعمان — بينما اللوحة تبقى لوحة المطعم، فلا مفاجآت لونية. */ .r-hero.is-fallback { --seed: 0; aspect-ratio: auto; min-height: 132px; background-color: var(--surface-2); background-image: repeating-linear-gradient(calc(58deg + var(--seed) * 1deg), var(--hi) 0 2px, transparent 2px 15px), repeating-linear-gradient(calc(-58deg - var(--seed) * 1deg), var(--lo) 0 2px, transparent 2px 15px), radial-gradient(130% 100% at 50% 0%, var(--accent-wash), transparent 68%); } .r-headwrap { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 1.15rem 1.25rem 1.3rem; box-shadow: var(--nm-flat); text-align: center; } .header:not(.has-hero) .r-headwrap { margin-top: .4rem; } .r-logo { width: 76px; height: 76px; margin: -2.6rem auto .7rem; /* يعبر حافّة اللوح — يمسك الغلاف باللوح */ border-radius: 50%; overflow: hidden; background: var(--surface); box-shadow: var(--nm-out-s); padding: 5px; } .r-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .r-name { font-size: clamp(1.35rem, 5.2vw, 1.85rem); line-height: 1.25; /* ⚠️ **لا `letter-spacing` هنا** (عقد القوالب §7-3): هذا اسم المطعم، عربيّ في كل الحالات. التتبيع — حتى السالب الطفيف — يزيد فرص فكّ الوصل بين الحروف ويُبطل الكيرننج المُعَدّ في خطّ العناوين. كان هنا `-.01em` منقولاً بعادة لاتينية، وأزالَه فحص بند 2.4. (بلا ذكر اسم العائلة: فحص 2.2 يمنعه في هذا الملفّ ولو في تعليق.) */ color: var(--ink); /* اسم من 40 محرفاً لا يجوز أن يُقصّ (اختبار القبول الرابع) — يلتفّ. */ overflow-wrap: break-word; } .r-bio { margin: .5rem auto 0; max-width: 46ch; color: var(--ink-2); font-size: .95rem; line-height: 1.7; } .r-metarow { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .95rem; } .r-link, .r-meta { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; min-height: 40px; border-radius: 999px; background: var(--surface); box-shadow: var(--nm-out-s); color: var(--ink-2); font-size: .875rem; transition: box-shadow .18s ease, color .18s ease; } .r-link .icon, .r-meta .icon { color: var(--accent-ink); } /* المقبض يُضغَط إلى الداخل — هذه هي «الوظيفة» في هذا النمط */ .r-link:hover { box-shadow: var(--nm-in-s); color: var(--ink); } .r-link:active { box-shadow: var(--nm-in); } /* ════════════════════════════════════════════════ 5. شارة الحالة ════════════════════════════════════════════════ */ .status-wrap { display: flex; justify-content: center; margin: 1.1rem 0 .2rem; } /* حوض غائر يحمل نقطة **ناتئة** — تضادّ الغور والنتوء داخل عنصر واحد هو ما يُقرأ كنمط، لا الظلّ وحده. */ .status-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; border-radius: 999px; background: var(--surface); box-shadow: var(--nm-in-s); font-size: .875rem; color: var(--ink-2); max-width: 100%; flex-wrap: wrap; justify-content: center; } .status-title { font-weight: 700; color: var(--ink); } .status-detail { color: var(--ink-3); } .status-detail::before { content: '·'; margin-inline-end: .4rem; } .status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-3); box-shadow: var(--nm-out-s); flex: none; } .status-open .status-dot { background: var(--ok); } /* أحمر مستقلّ لا لكنة المطعم: لكنة «الأصالة» طوبيّة-حمراء أصلاً فلا يفرّق الزبون بين «مغلق» وهويّة المكان (طلبك 2026-08-22). */ .status-closed .status-dot { background: var(--closed); } .status-vacation .icon { color: var(--vac); width: 1.05em; height: 1.05em; } /* ─── `.s-*` على body: توقيع قوالب «موعد» (بند 2.3) ─── الحالة تُلوّن **الصفحة** لا الشارة وحدها: مطعم مغلق يجب أن يُحَسّ مغلقاً قبل قراءة كلمة. وتبقى الفروق هادئة — إشباع وإضاءة فقط، بلا لون جديد يكسر اللوحة. */ body.s-closed .r-hero img, body.s-vacation .r-hero img { filter: saturate(.6) brightness(.95); } body.s-closed .r-hero.is-fallback, body.s-vacation .r-hero.is-fallback { --accent-wash: transparent; } body.s-closed .status-badge { color: var(--ink); } body.s-vacation .status-badge { color: var(--vac); } /* ════════════════════════════════════════════════ 6. شريط الفئات اللاصق ════════════════════════════════════════════════ */ .cat-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: .5rem; margin-inline: -1rem; padding: .6rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; /* السطح مصمت وممتدّ إلى حافّتَي الشاشة — وإلا سبح المحتوى تحته */ background: var(--surface); box-shadow: 0 10px 18px -14px var(--lo); } .cat-nav::-webkit-scrollbar { display: none; } .cat-nav:empty { display: none; } .cat-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .95rem; border-radius: 999px; background: var(--surface); box-shadow: var(--nm-out-s); color: var(--ink-2); font-size: .875rem; white-space: nowrap; transition: box-shadow .18s ease, color .18s ease; } .cat-chip:hover { color: var(--ink); } /* الفئة الحاليّة **غائرة**: القسم مفتوح أمامك = المقبض مضغوط */ .cat-chip.is-active { box-shadow: var(--nm-in-s); color: var(--accent-ink); font-weight: 700; } /* ════════════════════════════════════════════════ 7. المنيو — الفئات والأطباق ════════════════════════════════════════════════ */ .menu { padding-top: 1.4rem; } .cat { margin-bottom: 2.2rem; } /* الشريط اللاصق يغطّي العنوان عند القفز إليه — إلا بهذا الهامش */ .cat { scroll-margin-top: calc(var(--nav-h) + .8rem); } /* عنوان الفئة **محفور** في السطح: نصّ غائر لا نصّ فوق خطّ ذهبيّ */ .cat-title { display: inline-block; font-size: 1.06rem; padding: .5rem 1.1rem; margin-bottom: 1rem; border-radius: 999px; background: var(--surface); box-shadow: var(--nm-in-s); color: var(--ink); } .cat-dishes { display: grid; gap: 1rem; } /* ─── لوح الطبق: ناتئ من نفس المادّة ─── */ .dish { display: grid; grid-template-columns: 1fr auto; gap: .55rem .9rem; align-items: start; padding: 1rem 1.05rem; border-radius: var(--r-md); background: var(--surface); /* 🔴 **بلا إزاحةٍ أفقيّة** (شكوى 2026-09-10: «في الجانبين ظلّان طويلان لا أريدهما، أريد ظلال الأزرار فقط»). لوحٌ بعرض العمود يُسقِط ظلَّه يميناً ويساراً، وعشرةُ ألواحٍ متراصّة تصنع خطَّين متّصلين ينزلان مع الصفحة. فالإزاحةُ عموديّةٌ فقط، والانتشارُ السالب يساوي نصفَ التمويه ⇒ صفرُ نزيفٍ جانبيّ (ولا قصَّ لظلٍّ عند حافّة عمود `.kh-track` كذلك). والأزرارُ تحتفظ بـ`--nm-out`/`--nm-out-s` كاملةً — هي المطلوبة. */ box-shadow: 0 8px 16px -8px var(--lo), 0 -6px 12px -6px var(--hi); transition: box-shadow .2s ease; } /* اللمس يُنقص النتوء (يقترب من السطح) — أصدق فيزيائيّاً من رفعه */ .dish:hover { box-shadow: 0 4px 10px -5px var(--lo), 0 -3px 8px -4px var(--hi); } .dish.has-img { grid-template-columns: 96px 1fr auto; } .dish-thumb { grid-row: span 2; width: 96px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); box-shadow: var(--nm-in-s); } .dish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── صورةٌ واحدة بمقاس واحد — **قرار مُعاد بملاحظتك (2026-08-20)** ─── كان أوّل طبق مصوَّر في كل فئة يأخذ صورة عريضة 16:9 والباقي مربّعاً 96px. سمّيتُه «إيقاعاً» (`PRODUCT.md §5`)، وقلتَ عنه: «بعض الأكلات صورها كبيرة وبعض صغيرة وغير منظّمة». وأنت محقّ: الإيقاع يحتاج **قاعدة يراها الناظر**، وقاعدةُ «الأوّل ذي الصورة» غير مرئيّة — فتُقرأ عشوائيّةً لا نظاماً، خاصّةً في فئة كل أطباقها مصوَّرة (فيبدو الفرق بلا سبب). فصار كل طبق مصوَّر **بنفس المقاس بالضبط**: صفٌّ واحد، مربّع 4:3 في المقدّمة، وعمود أسعار مستقيم من أعلى الفئة إلى أسفلها. (أُزيل «الطبق المميَّز» بطلب صاحب المشروع 2026-09-01 — البطاقاتُ متساوية.) **مطابقةً** لـ`.has-img` — فلا تغيير في JS ولا في العقد، والقرار بصريّ خالص يستطيع أيّ قالب آخر أن يخالفه. */ .dish-info { min-width: 0; } .dish-head { display: flex; align-items: baseline; gap: .6rem; justify-content: space-between; flex-wrap: wrap; } .dish-name { font-weight: 700; font-size: 1.02rem; line-height: 1.35; overflow-wrap: break-word; } /* السعر يخرج من النمط بتباين حقيقي (قرار 4) — أهمّ رقم في الصفحة */ .dish-price { font-weight: 700; color: var(--accent-ink); white-space: nowrap; font-size: 1rem; } .dish-desc { margin: .4rem 0 0; color: var(--ink-2); font-size: .89rem; line-height: 1.65; } .dish-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; } .tag { padding: .2rem .6rem; border-radius: 999px; background: var(--surface); box-shadow: var(--nm-in-s); color: var(--ink-3); font-size: .74rem; } .dish-action { display: flex; align-items: center; } .add-btn { min-width: 44px; min-height: 44px; /* هدف لمس (`PRODUCT.md §5`) */ padding: .55rem 1rem; border: 0; border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-weight: 700; font-size: .875rem; white-space: nowrap; box-shadow: var(--nm-out-s); cursor: pointer; transition: box-shadow .16s ease, transform .16s ease; } .add-btn:hover { box-shadow: var(--nm-out); } .add-btn:active { box-shadow: var(--nm-in-s); transform: scale(.97); } /* حوض غائر يحمل مقبضَين ناتئَين */ .qty { display: inline-flex; align-items: center; gap: .15rem; padding: .22rem; border-radius: 999px; background: var(--surface); box-shadow: var(--nm-in-s); } .qty-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.15rem; line-height: 1; box-shadow: var(--nm-out-s); cursor: pointer; transition: box-shadow .14s ease; } .qty-btn:active { box-shadow: var(--nm-in-s); } .qty-num { min-width: 2ch; text-align: center; font-weight: 700; font-size: .95rem; } .empty-note { padding: 2.2rem 1rem; text-align: center; color: var(--ink-3); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--nm-in-s); } /* ════════════════════════════════════════════════ 8. التذييل ════════════════════════════════════════════════ */ .foot { margin-top: 1.5rem; padding: 1.5rem 0 .5rem; text-align: center; color: var(--ink-3); font-size: .8rem; } .foot strong { color: var(--ink-2); } /* ════════════════════════════════════════════════ 9. زرّ السلّة العائم ════════════════════════════════════════════════ */ /* التمركز بـ`inset-inline: 0` + `margin-inline: auto` لا بـtransform: الإخفاء يستعمل الإعدام البصريّ (صنف `.hidden` في JS)، فلو تمركز الزرّ بـtransform تضاربت الخاصّيّتان عند أوّل انتقال نضيفه لاحقاً. */ .cart-button { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 2rem); z-index: 25; display: flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border: 0; border-radius: 999px; /* يخرج من المادّة (قرار 4): لون ممتلئ — هو الفعل الرئيس في الصفحة */ background: var(--accent-ink); color: var(--on-accent); font-weight: 700; font-size: .95rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px -10px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .16s ease; } .cart-button:active { transform: translateY(1px); } .cart-icon { width: 1.25em; height: 1.25em; } /* ═══ لفتُ العين إلى زرّ السلّة — أُعيد بناؤه 2026-09-10 ═══ 🔴 **والنسخةُ الأولى كانت ميّتة — وموتُها مَقيسٌ لا مستنتَج:** جُرّبت على شخصٍ فاختار طعامَه ثمّ سأل «كيف أرسل؟». لم يرَ الزرَّ أصلاً. والسببُ سطرٌ واحد: التوهّجُ كان `color-mix(… var(--accent-ink) …)` — أي **بلون الزرّ نفسِه**. وهالةٌ حمراءُ حول زرٍّ أحمر لا تُرى: تزيد حافّتَه ضبابيّةً وكفى. وهذا معنى «يموت مع الثيم» بالحرف — وكلّما اشتدّ لونُ المطعم ازداد اختفاؤها. ✅ **والبديلُ لا يراهن على لونٍ إطلاقاً — ثلاثُ طبقاتٍ مستقلّة:** ① **حركة**: نبضةُ تكبيرٍ خفيفة. الرؤيةُ المحيطيّة تلتقط **الحركة** قبل اللون بمراحل — وزرُّ السلّة يقع في محيط نظر من يقرأ الأطباق لا في مركزه، وهناك بالضبط تفشل الهالةُ وتنجح الحركة. ② **لمعانٌ يعبر** (`::after`): شريطٌ مائلٌ يمسح الزرّ — وهذا حرفيّاً «يلمع» الذي طلبتَه، لا هالةً ساكنة. ③ **ولونُ اللمعان `--on-accent` لا `--accent`:** هو اللونُ المضمونُ تبايُنُه مع أرضيّة الزرّ **بالبناء** (فهو لونُ نصِّه أصلاً) — كريميٌّ فوق أحمرَ في الفاتح، وداكنٌ فوق أحمرَ فاتحٍ في الداكن. فيُرى في الوضعَين ومع أيّ لونِ مطعمٍ، بلا استثناءٍ يُكتَب يوماً. ⚠️ **و`:active` يُطفئ الحركة:** الحركةُ تغلب أيَّ `transform` عاديّ ما دامت تعمل، فبلا هذا السطر يفقد الزرُّ ردَّ فعل الضغط تحت الإصبع. */ .cart-button { overflow: hidden; } /* كلمةُ الفعل — انظر تعليقَها في `index.html`. تُخفى بـ`hidden` وحدها. */ .cart-cta { font-weight: 800; white-space: nowrap; } .cart-button::after { content: ""; position: absolute; top: -60%; bottom: -60%; inset-inline-start: 0; width: 34%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--on-accent) 60%, transparent), transparent); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { @keyframes cart-attention { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(1.075); } 83% { transform: scale(.975); } 90% { transform: scale(1.035); } } /* ⏱️ **السرعة أُبطئت بأمرك (2026-09-10): «سرعة اللمعان كبيرة قللها».** السحبةُ كانت 26% من 4.4ث ≈ **1.14ث** — ومضةٌ تُلمَح ولا تُتابَع. صارت 36% من 5.6ث ≈ **2.0ث** (أبطأ 76%): تكفي العينَ لتتبع الشريطَ وهو يعبر، وهذا هو الفرق بين «شيءٌ ومض» و«هذا الزرُّ ينادي». و`linear` للسحبة لا `ease-in-out`: الأخيرة تُبطئ الطرفَين وتُسرع الوسط، فيمرّ اللمعانُ فوق **النصّ** (وسطِ الزرّ) في أسرع لحظاته — أي يختفي بالضبط حيث يجب أن يُرى. والنبضةُ تبقى `ease-in-out` (حركةٌ حيّة لا آليّة)، وبنفس المدّة فيبقيان **حدثاً واحداً** لا اثنَين متزاحمَين. */ @keyframes cart-sheen { 0% { transform: translateX(-300%) rotate(18deg); opacity: 0; } 4% { opacity: 1; } 36% { transform: translateX(300%) rotate(18deg); opacity: 1; } 37%, 100% { transform: translateX(300%) rotate(18deg); opacity: 0; } } .cart-button:not(.hidden) { animation: cart-attention 5.6s ease-in-out infinite; } .cart-button:not(.hidden)::after { animation: cart-sheen 5.6s linear infinite; } .cart-button:active { animation: none; transform: translateY(1px); } } .cart-badge { min-width: 1.5em; padding: .05em .35em; border-radius: 999px; background: var(--on-accent); color: var(--accent-ink); font-size: .8rem; text-align: center; } .cart-btn-total { white-space: nowrap; } /* ════════════════════════════════════════════════ 10. الدرج + الطبقة المعتمة ════════════════════════════════════════════════ */ .backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(20, 15, 12, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .backdrop.show { opacity: 1; visibility: visible; } /* `visibility` لا `display`: تُخرِج الدرج من شجرة قارئ الشاشة **و** من ترتيب الجدولة وهو مغلق، وتُبقي الانتقال ناعماً (خلاف display). */ .cart-drawer { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; max-width: 520px; margin-inline: auto; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, .4); transform: translateY(101%); visibility: hidden; transition: transform .28s cubic-bezier(.22, .8, .3, 1), visibility .28s; } .cart-drawer.open { transform: none; visibility: visible; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .drawer-head h2 { font-size: 1.15rem; } .close-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--nm-out-s); cursor: pointer; } .close-btn:active { box-shadow: var(--nm-in-s); } .close-btn .icon { width: 18px; height: 18px; } .cart-list { display: grid; gap: .7rem; } .cart-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem .9rem; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--nm-flat-s); } .cart-row-info { display: grid; gap: .15rem; min-width: 0; } .cart-row-name { font-weight: 700; font-size: .95rem; overflow-wrap: break-word; } .cart-row-price { color: var(--accent-ink); font-size: .85rem; font-weight: 700; } .cart-total-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding: .9rem 1.05rem; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--nm-in-s); font-size: 1rem; } .cart-total-row strong { color: var(--accent-ink); font-size: 1.08rem; } .order-form { display: grid; gap: .6rem; margin-top: 1.1rem; } /* حقل غائر — الكتابة «داخل» المادّة */ .field { width: 100%; padding: .8rem 1rem; border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--ink); box-shadow: var(--nm-in-s); resize: vertical; } .field::placeholder { color: var(--ink-3); } /* ═══ حالةُ الخانة (طلبُك 2026-09-08) ═══ «كل حقل يملا يتغير محيطه الى اللون الاخضر» · و«بعد التقاط الموقع … تتوهج او يتغير لونها لتصبح واضحة». 🔴 وعلّتُه تشغيليّة لا زينة: نموذجُ الطلب يُملأ على هاتفٍ بيدٍ واحدة في الشارع، ومن لا يرى أيَّ خانةٍ أتمّها يُرسل ناقصاً فيُردّ عليه بخطأ. ⚠️ **الصنفُ يضعه JS لا `:not(:placeholder-shown)`:** الهاتفُ «ممتلئٌ» بثلاثة أرقامٍ وهو **غيرُ صالح** — وأخضرُ يَعِد ثمّ يرفضه الإرسالُ أسوأ من لا شيء. فالمعيارُ `isCompletePhone` نفسُها التي يفحص بها الإرسال. ⚠️ **و`--ok` لا أخضرُ مكتوب:** معرَّفٌ في القوالب الستّة وبدرجةٍ أفتحَ في الوضع الداكن — وأخضرُ ثابتٌ يبتلعه سطحٌ داكن. ⚠️ **وحلقةٌ داخليّة (`inset`) لا `outline`:** الأخيرةُ هي بالضبط ما يرسم حلقةَ التركيز، فخانةٌ ممتلئةٌ كانت ستمحو دليلَ التركيز عمّن يتنقّل بلوحة المفاتيح. */ .field.is-filled { box-shadow: var(--nm-in-s), 0 0 0 2px var(--ok) inset; } /* سطرُ «تمّ التقاط موقعك» — يلبس `empty-note` أيضاً فيرث حشوَ القالب وسطحَه (عقدُ القوالب §4: أصنافٌ قائمةٌ لا جديدة)، ويضيف هذا اللونَ والحلقة. والنبضُ **ثلاثُ مرّاتٍ ثمّ يسكن**: هو إقرارُ لحظةٍ لا زينةٌ دائمة — وحلقةٌ خضراءُ ثابتةٌ تبقى بعده تقول «هذا تمّ» بلا حركةٍ تشدّ العين إلى الأبد. */ .geo-ok { padding: .75rem 1rem; color: var(--ok); font-weight: 700; box-shadow: var(--nm-in-s), 0 0 0 2px var(--ok) inset; } @media (prefers-reduced-motion: no-preference) { @keyframes geo-ok-pulse { 0%, 100% { box-shadow: var(--nm-in-s), 0 0 0 2px var(--ok) inset; } 50% { box-shadow: var(--nm-in-s), 0 0 0 2px var(--ok) inset, 0 0 16px 3px color-mix(in srgb, var(--ok) 55%, transparent); } } .geo-ok { animation: geo-ok-pulse 1.4s ease-in-out 3; } } .field:focus { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .form-err { margin: 0; color: var(--accent-ink); font-size: .85rem; min-height: 1.2em; font-weight: 700; } /* زرّ الإرسال يخرج من النمط (قرار 4). ⚠️ **ليس أخضر واتساب** (#25D366) — مضادّ منصوص في `PRODUCT.md §3-13`: لون منصّة أخرى يقتحم لوحة المطعم ويجعل الصفحة تبدو ملحقاً بواتساب. الفعل يُوصَف بالنصّ العربيّ على الزرّ، لا بلون شركة. */ .send-btn { width: 100%; min-height: 52px; padding: .9rem 1.2rem; border: 0; border-radius: 999px; background: var(--accent-ink); color: var(--on-accent); font-weight: 700; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--nm-out-s); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .send-btn:active { transform: scale(.99); box-shadow: var(--nm-in-s); } .send-btn:disabled { background: var(--surface); color: var(--ink-3); box-shadow: var(--nm-in-s); cursor: not-allowed; } /* ════════════════════════════════════════════════ 11. سطح المكتب — تخطيط لا تكبير (بند 2.3) ================================================ عمود واحد بعرض 640px على شاشة 1440px هو مضادّ `PRODUCT.md §3-11`. الشبكة على `body` مباشرةً: أبناؤه هي المناطق، فلا يحتاج تغليفاً في DOM — وهذا شرط عقد القوالب (بند 2.4): القالب ينمّط، ولا يُعيد هيكلة ما يبنيه `app.mjs`. `#menu-zone` يمتدّ صفَّين ⇒ يصير عمود الفئات طويلاً فيسافر فيه `sticky` مسافة حقيقيّة (لولا الامتداد لالتصق بلا حركة). ════════════════════════════════════════════════ */ @media (min-width: 900px) { :root { --nav-h: 1.2rem; } body { max-width: var(--maxw); padding: 0 1.6rem 4rem; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "hero hero" "status menu" "nav menu" "foot foot"; column-gap: 2rem; align-items: start; } #header-zone { grid-area: hero; } #status-zone { grid-area: status; margin: 1.3rem 0 .9rem; justify-content: stretch; } #status-zone .status-badge { width: 100%; } #cat-nav { grid-area: nav; } #menu-zone { grid-area: menu; } .foot { grid-area: foot; } /* ⚠️ **نسبةٌ تتبع الصورة لا تُفرَض عليها — بند 2.10 (2026-08-21).** التاريخ هنا درسٌ في نفسه: أوّلاً كان `aspect-ratio: 16/9` مع `max-height: 46vh`، و`max-height` **يُبطِل النسبة** فصار الغلاف 3.34:1 على شاشة قصيرة ⇒ قصٌّ نصفيّ. فثُبِّتت 21:9 «نسبةً سينمائيّة مقصودة». وبقيت الشكوى — لأنّ العلّة **ليست الرقم بل فرضُ رقم واحد**: غلاف الديمو 735×579 (1.27:1)، وفي صندوق 2.33:1 يقتطع `cover` **46% من ارتفاع الصورة** (مُقاس، لا مُقدَّر). فالنسبة الآن من الصورة نفسها (`--hero-ar` يضبطها `app.mjs` بـCSSOM) محصورةً بين 1.7 و2.6: صورةٌ عريضة (16:9) تُعرَض بلا قصٍّ يُذكَر، وشبه مربّعة تُقصّ ~25% بدل 46%. و`max-height` يبقى **أماناً لنوافذ قصيرة جدّاً** لا حاكماً — وحين يبلغ فهو يُبطِل النسبة عن قصد (شريطٌ قصير أهون من غلافٍ يأكل الشاشة). */ /* 🔴 **عطبٌ أبلغ عنه صاحب المشروع بصورة سطح مكتب (2026-08-24):** «الغلاف غير متناظر». والسبب أنّ `margin-inline` السالب كان **يساوي حَشو الجسم بالضبط** فيمتدّ الغلاف إلى حدّ صندوق الجسم. وعلى الهاتف حدُّ الصندوق **هو حدّ الشاشة** فالامتداد نزفٌ مقصود؛ أمّا على سطح المكتب فالجسم عمودٌ محدودُ العرض متمركز، فصار الغلاف وحده أعرضَ من كلّ ما تحته بـ1.6rem من كلّ جهة: رفٌّ ناتئ لا شيء يبرّره (لا حافّة شاشة يبلغها). الآن يحاذي العمود ⇒ حدُّ الغلاف وحدُّ لوح الهويّة وحدُّ الحالة وحدُّ المنيو **واحد**. ودائرةٌ كاملة لأنّه لم يبقَ ملاصقاً لأيّ حافّة، وفجوةٌ علويّة لنفس السبب. ⚠️ والدرس عامّ: **نزفٌ مقاسه حَشوُ الجسم يصحّ حيث الجسم يملأ الشاشة وحدها** — كلّ قاعدة نزف تحتاج إبطالاً في طيّة العمود المحدود. */ .r-hero { margin-inline: 0; margin-top: 1rem; border-radius: var(--r-lg); aspect-ratio: 21 / 9; aspect-ratio: clamp(1.7, var(--hero-ar, 2.33), 2.6); max-height: 62vh; } /* والبديل بنفس النسبة: كان 168px ثابتاً بجانب غلافٍ 505px — تفاوتٌ يُقرأ خللاً في التخطيط لا خياراً. */ .r-hero.is-fallback { aspect-ratio: 21 / 9; min-height: 0; } .r-headwrap { padding: 1.4rem 1.8rem 1.6rem; } /* الشريط الأفقيّ يصير قائمة عمودية لاصقة في الحاشية */ .cat-nav { position: sticky; top: 1.2rem; flex-direction: column; align-items: stretch; margin-inline: 0; padding: .6rem; overflow: visible; border-radius: var(--r-md); box-shadow: var(--nm-in-s); } .cat-chip { justify-content: flex-start; } .menu { padding-top: 1.3rem; } .cat-title { font-size: 1.15rem; } } /* عمودان للأطباق حين يتّسع العمود فعلاً — لا قبل ذلك */ @media (min-width: 1100px) { .cat-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } /* ⚠️ حُذف هنا تجاوزان كانا يُعيدان التفاوت على الشاشة الكبيرة وحدها العطب الذي أبلغتَ عنه ظاهراً في الحاسوب بعد إصلاح الهاتف — وهو بالضبط شكل «أصلحتُه ولم يتغيّر شيء». */ .dish-thumb { width: 112px; } /* الدرج يصير لوحاً جانبيّاً: مساحة أطول لسلّة كبيرة على شاشة عريضة */ .cart-drawer { inset-inline-start: 0; inset-inline-end: auto; top: 0; bottom: 0; width: 420px; max-width: 92vw; max-height: none; margin-inline: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); padding-top: 1.4rem; transform: translateX(101%); box-shadow: -16px 0 44px -14px rgba(0, 0, 0, .4); } .cart-drawer.open { transform: none; } .cart-button { inset-inline: auto 0; margin-inline: 0 2rem; } } /* الهاتف الصغير: صورة أعرض قليلاً تبقى ≥44px هدفاً */ @media (min-width: 480px) and (max-width: 899px) { .dish.has-img { grid-template-columns: 118px 1fr auto; } .dish-thumb { width: 118px; } } /* ════════════════════════════════════════════════ 12. احترام تفضيلات الزائر (`PRODUCT.md §6`) ════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* تباين عالٍ: الظلال الناعمة هي أوّل ما يسقط — تُستبدل بحدود صريحة */ @media (prefers-contrast: more) { .dish, .r-headwrap, .cart-row, .cat-chip, .add-btn, .qty-btn, .status-badge, .cat-title, .field, .r-link, .r-meta, .theme-toggle, .close-btn { box-shadow: none; outline: 1px solid var(--ink-2); } } /* ════════════════════════════════════════════════ حالة المطعم بلونها (2026-08-22) ════════════════════════════════════════════════ */ /* 🔴 **نسخةٌ ثانية بحكمك: «اللون الخاص بالحالة فاتح»** (2026-08-22). كانت الأرضيّة `18%` من اللون على الورق وحبرُها ملوَّناً — فبدت وردةً باهتة لا حمرة، وضاع اللون الذي اخترتَه في اللوحة. فانقلب المبدأ: **الشارة ممتلئة باللون والحبر أبيضٌ عليها** — تُقرأ من طرف العين. ⚠️ **والنِسَب من `MIX` في `shared/theme-roles.mjs`** لا أرقاماً مكتوبة هنا: معاينةُ اللوحة تقرأ الثابتَ نفسه، فما تراه هناك هو ما يراه الزبون (وهذا سبب شكواك السابقة «أجعله أفتح فيظهر داكناً»). ⚠️ **و78% لا 100% عن قصد:** الأبيض على أخضرَ متوسّط (`#22A75B`) يبلغ 3:1 وهو تحت حدّ العقد (`CONTRACT §7.5` = 4.5:1)؛ وهذه النسبة تُنزِل الإضاءة حتى يعبُر الحدّ ويبقى اللون لونَه. واللوحة تحذّرك إن اخترتَ لوناً باهتاً لا يحمل حبراً أبيض. ⚠️ و`--closed` **مستقلّ عن لكنة المطعم**: لكنة «الأصالة» طوبيّة-حمراء أصلاً، فلو استعملناها لما فرّق الزبون بين «مغلق» وهويّة المكان. */ .status-badge.status-open { --st: var(--ok); } .status-badge.status-closed { --st: var(--closed); } .status-badge.status-vacation { --st: var(--vac); } /* ⚠️ الوزن هنا مقصود (`body.s-…` داخل القائمة): قاعدةٌ سابقة تلوّن الشارة بـ`body.s-closed .status-badge` بوزن (0,2,1) — فلولا إدخال `body` هنا لدهست الحبرَ الأبيض وأعادت النصّ إلى لون الورق على أرضيّةٍ ملوّنة. */ .status-badge.status-open, .status-badge.status-closed, .status-badge.status-vacation, body.s-closed .status-badge.status-closed, body.s-vacation .status-badge.status-vacation { background-color: color-mix(in srgb, var(--st) 78%, #000); /* البريق والظلّ بالأبيض والأسود الشفّافَين لا بمزيج لون: يعملان مع أيّ لون يختاره المطعم بلا حساب ثانٍ. */ background-image: linear-gradient(to bottom, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, .12) 100%); border: 1px solid color-mix(in srgb, var(--st) 46%, #000); color: #FFFAF7; font-weight: 700; text-shadow: 0 1px 1.5px rgba(0, 0, 0, .28); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--st) 78%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(0, 0, 0, .12); } .status-badge.status-open .status-title, .status-badge.status-closed .status-title, .status-badge.status-vacation .status-title, .status-badge.status-open .status-detail, .status-badge.status-closed .status-detail, .status-badge.status-vacation .status-detail { color: inherit; } .status-badge.status-open .status-detail, .status-badge.status-closed .status-detail, .status-badge.status-vacation .status-detail { opacity: .84; } /* النقطة بيضاء كذلك: نقطةٌ بلون الأرضيّة تختفي فيها. */ .status-badge.status-open .status-dot, .status-badge.status-closed .status-dot { background: #FFFAF7; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); } .status-badge.status-vacation .icon { color: #FFFAF7; } /* التبايُن العالي: لا ظلال — لكن الأرضيّة الممتلئة تبقى (هي المعنى)، ويحلّ إطارٌ أبيض محلّ الهالة. */ @media (prefers-contrast: more) { .status-badge.status-open, .status-badge.status-closed, .status-badge.status-vacation { box-shadow: none; outline: 1px solid #FFFAF7; } } /* رابط «مصادر الصور»: صغيرٌ باهت لا يُلاحَظ (طلبك). ⚠️ **ولا معدوم:** صور الديمو بتراخيص CC BY تُلزِم بالإسناد، والإعدام البصريّ أو شفافيّةٌ صفر يُبطِلانه ويصيران خدعةً بصريّة. ولم أُنزِل التبايُن تحت حدّ العقد (`CONTRACT §7.5`: 4.5:1) — رابطٌ لا يُقرأ أصلاً إسنادٌ باطل قانوناً وخرقٌ لعقدنا معاً. فالإخفاء بالمقاس والوزن لا بالتبايُن. */ /* ─── لا مستطيل أزرق عند اللمس (طلبك 2026-08-22) ─── تظليل اللمس الافتراضيّ يرسم مربّعاً شبه شفّاف **فوق** المقبض لحظةَ الضغط، فيقطع المادّة المنحوتة ويظهر كعطب. وإزالتُه آمنة هنا لأنّ البديل موجود أصلاً: لكل مقبض حالة `:active`/`:hover` تُنقص النتوء — أي أنّ التغذية الراجعة **من النمط** لا من طبقة النظام. ⚠️ ولا يُمَسّ `:focus-visible`: ذاك للوصول بلوحة المفاتيح، وإسقاطه يعمي من لا يستعمل إصبعاً (شرط `CONTRACT §7.5`). */ html { -webkit-tap-highlight-color: transparent; } /* ════════════════════════════════════════════════ شرائح الأحجام (بند 3.13) — الشريحة **زرُّ الإضافة نفسه** ──────────────────────────────────────────────── 🔵 لماذا في البطاقة لا في مودال: الطلب نقرةٌ واحدة لا ثلاث (افتح · اختر · أضف)، ومودالٌ لكل طبق يحبس التركيز ويُعتِم منيو الغرضُ منه التصفّح. والكمّيّة على الشريحة نفسها فيرى الزبون اختياره بلا فتح السلّة. ⚠️ و44px حدُّ هدف اللمس (`PRODUCT.md §5`) — شريحةٌ أصغر تُخطئها الإصبع في منيو يُقرأ واقفاً. ولا `letter-spacing` (يكسر وصل العربيّة). ════════════════════════════════════════════════ */ .dish-sizes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } /* الشريحة: ناتئة كزرّ «أضف»، وغائرةٌ ملوّنة حين تُختار — نفس نحو المادّة. */ .size-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .8rem; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: var(--t-sm); white-space: nowrap; box-shadow: var(--nm-out-s); cursor: pointer; transition: box-shadow .16s ease, transform .16s ease; } .size-chip:hover { box-shadow: var(--nm-out); } .size-chip:active { transform: scale(.97); } /* المختارة **غائرة**: هي داخل السلّة الآن لا نابتةً تنتظر. */ .size-chip.is-on { box-shadow: var(--nm-in-s); color: var(--accent-ink); } .size-name { font-weight: 700; } .size-price { color: var(--ink-3); font-size: var(--t-xs); } .size-chip.is-on .size-price { color: var(--accent-ink); } /* عدّادُ الشريحة: قرصٌ باللكنة — الرقم على السطح لا في حوضٍ ثانٍ. */ .size-qty { display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); font-weight: 700; } /* الإنقاص يظهر **بعد** أوّل إضافة وحدها: بطاقةٌ بثلاثة أحجام لا تُريك ستّة أزرار قبل أن تلمسها. */ .size-pair { display: inline-flex; align-items: center; gap: .2rem; } .size-minus { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: var(--t-lg); line-height: 1; box-shadow: var(--nm-out-s); cursor: pointer; } .size-minus:active { box-shadow: var(--nm-in-s); } /* ════════════════════════════════════════════════ مبدّل اللغة (بند 2.15) — زرٌّ واحد يجاور زرّ الوضع ──────────────────────────────────────────────── يرث `.theme-toggle` كاملاً (الدائرة · المادّة · الظلّ · `:active`)، فلا يبقى إلا ما يختلف: الإزاحة ومقاس الخطّ. ولا يُكتَب عليه `direction` أبداً — والسبب مشروحٌ داخل الكتلة نفسها. ════════════════════════════════════════════════ */ .lang-toggle { inset-inline-end: calc(.7rem + 44px + .45rem); font-family: var(--font-text); font-size: var(--t-sm); font-weight: 700; /* ⚠️ **لا `direction` هنا.** كانت `direction: ltr` لأجل «FR»، فقلبت معنى `inset-inline-end` **لهذا العنصر وحده** (تُحلّ باتّجاه العنصر لا صفحته) ⇒ الزرّ يمينَ الشاشة وزرّ الوضع يسارَها. وbidi تعرض المقطع اللاتينيّ صحيحاً بلا تدخّل، فالتصريح كان ضرراً بلا مقابل. */ } /* ▼▼▼ مضمار قشرة «خانات» — مولَّدٌ من apps/menu/shell-khanat.css ▼▼▼ ⚠️ لا تُعدّله هنا: عدّل المصدر ثمّ نفّذ node tools/sync-shell.mjs */ /* ════════════════════════════════════════════════════════════════ مضمارُ قشرة «خانات» — الهيكلُ المشترك لكلّ القوالب (بند 2.11) ---------------------------------------------------------------- **مصدرٌ واحد** لهذا المضمار: `apps/menu/shell-khanat.css`، ويُولَّد في `style.css` لكلّ قالبٍ يقول سجلُّه `"shell": "khanat"` — لأنّ الهيكلَ واحدٌ للجميع بطلبِ صاحب المشروع، **والمظهرُ لكلٍّ خصائصُه**. 🔴 **مصدر الهيكل:** صورةٌ أرسلها صديق صاحب المشروع (بروفايل: صفّ أيقونات، ثمّ خانات عريضة كلٌّ بسهم دخول، ثمّ دوائر شبكات في القاع). ⚠️ **وتصحيحٌ صريح من صاحب المشروع (2026-08-21):** «طبّق ثيمنا الحالي على الموجود في الصورة، لا تعتمد الصورة مباشرة» — فالصورة مرجعُ هيكلٍ لا مظهر. ⚠️ **ولا لونَ مثبَّتاً واحداً هنا:** كلُّ قيمةٍ `var()` يعرّفها القالبُ نفسُه. فقالبُ الصلصال يجسر الرموزَ بقيمِ الصلصال فيحصل على الدخول والرجوع والتصفّح الأفقيّ **بظلالِه هو** لا بظلال «نقش». وهذا شرطُ الطلب: هيكلٌ مشترك ومظهرٌ خاصّ. 📐 **الفرق البنيويّ في سطر:** الكلاسيكيّةُ صفحةٌ واحدة تُمرَّر وفيها كل الفئات؛ وهذه **بروفايل يُدخَل منه** إلى شاشة لكل فئة. ولذلك: • عمود واحد على كل المقاسات (لا شبكة سطح مكتب) — البروفايل شكلٌ عموديّ بطبيعته، وتمديدُه إلى 1180px يجعله ترويسةً عريضة بلا محتوى. • `.cat-nav` لا يُستعمل أصلاً (JS يتركه فارغاً) فيُخفى بـ`:empty`. • المشاهد الداخليّة تُقصّر الترويسة: البروفايل مكانه الواجهة وحدها. ════════════════════════════════════════════════════════════════ */ /* إعلان القشرة — يقرؤه app.mjs (لا ميتا ولا ملفّ إعداد: العقد يقول إنّ القالب يملك هذا الملفّ وحده). قيمةٌ مجهولة تسقط إلى الكلاسيكيّة. */ :root { --shell: khanat; --kh-gap: .85rem; --kh-pad: 1.05rem; /* 📐 **شريطُ الأزرار الثابتة أعلى الشاشة** (اللغة + الوضع): كلاهما `position: fixed` بارتفاع 44px وz-index 30. فأيّ عنصرٍ لاصقٍ بـ`top: 0` يمرّ **تحتهما** (z أقلّ) فيُغطّى أوّلُه. */ --toggle-band: calc(max(.7rem, env(safe-area-inset-top)) + 44px + .5rem); } /* ─── 📐 شريط الفئات يلصق **تحت** زرَّي اللغة والوضع لا تحتهما بصريّاً ─── 🔴 **عطبٌ في صورةٍ أرسلها صاحب المشروع (2026-09-05):** «أيقونة اللغة والثيم يغطّيان على الصنف — أريد شريط الفئات لا يصعد إلى ذلك العلو». وسببُه أنّ `.cat-nav` لاصقٌ بـ`top: 0` وz-index 20، والزرّان ثابتان بـz-index 30 ⇒ عند التمرير يصل الشريطُ إلى أعلى الشاشة فيقف **خلف** الزرّين، فيُقرأ أوّلُ صنفٍ نصفَ مغطّى. وليس تراكبَ ألوانٍ ولا شفافيّة: ترتيبُ طبقاتٍ صحيحٌ في مكانٍ خاطئ. ⚠️ **وقيمةٌ واحدة مشتقّةٌ من مقاس الزرّ نفسه** (`--toggle-band`) لا رقمٌ مكتوبٌ بالعين: لو تغيّر مقاسُ الزرّ تبعَه الشريطُ تلقائيّاً. ومعها `env(safe-area-inset-top)` فلا يقع تحت نتوء الشاشة على iPhone. ⚠️ **والمُحدِّدُ الثاني لازمٌ لا زائد:** `sikka` تحمل `.status-wrap:empty + .cat-nav { top: 0 }` (خصوصيّةٌ أعلى) — فبلا مطابقتِها يبقى العطبُ في ذلك القالب وحده، وهو أسوأُ صنفٍ من العطب: مُصلَحٌ في خمسةٍ وباقٍ في واحد. */ .cat-nav { top: var(--toggle-band); } .status-wrap:empty + .cat-nav { top: var(--toggle-band); } /* ─── 🔴 لوحٌ معتمٌ فوق شرائح الفئات (شكوى 2026-09-10 بصورة) ─── «فوق خنات الفئات عند التمرير أريد ألّا يظهر ما هو في الخلف. أريد ظهور زرّ الثيم واللغة والتنزيل فقط، لا الأطباق وتلك الأمور.» الشريطُ `0 … --toggle-band` **شفّاف**: الزرّان الثابتان قرصان صغيران يطفوان فيه، وما حولهما فراغٌ تمرّ تحته بطاقاتُ الأطباق مرئيّةً حتّى تصطدم بحافّة الشريط اللاصق. فاللوحُ يملأ ذلك الفراغ بلون السطح. ⚠️ **وصنفٌ لا قاعدةٌ دائمة:** لوحٌ معتمٌ دائمٌ يقصّ أعلى صورة الغلاف — أوّلَ ما يراه الزبون. فـ`app.mjs` يضيف `nav-stuck` **لحظةَ التصاق الشريط وحدها** (انظر `syncNavStuck`)، وهو نصُّ الطلب: «عند التمرير». ⚠️ **وz-index 28 رقمٌ محسوبٌ لا مرتفعٌ عشوائيّ:** فوق الشرائح (20) وزرّ السلّة (25)، وتحت الأزرار الثابتة (30) والدرج (45) والمكبّر (60) — فالثلاثةُ التي طلبها وحدَها تبقى فوقه. ⚠️ **و+1px لا صفر:** `env(safe-area-inset-top)` كسريّةٌ في أجهزة، وحافّتان متلاصقتان تماماً تكشفان خيطاً من المحتوى بينهما. */ body.nav-stuck::before { content: ''; position: fixed; inset-block-start: 0; inset-inline: 0; height: calc(var(--toggle-band, 0px) + 1px); background: var(--surface); z-index: 28; pointer-events: none; } /* ─── عمود واحد دائماً: يُبطِل شبكة سطح المكتب التي يبنيها القسم 11 ─── */ @media (min-width: 900px) { body { display: block; max-width: var(--maxw-col); padding: 0 1.15rem 4rem; } /* الغلاف يعود إلى نسبة الهاتف: عمودٌ بعرض 640px لا يحتاج نسبةً سينمائيّة، وبها يُقتَطع من الصورة بلا سبب (بند 2.10). */ /* لا `margin-inline` هنا: القسم 11 صار يحاذي العمود (عطب 2026-08-24)، وهذا العمود أضيق فتبقى المحاذاة صحيحة بلا إعادة قيمة. */ .r-hero { max-height: 46vh; } /* 🔴 **إبطالٌ لازم — عطبٌ حقيقيّ أبلغ عنه صاحب المشروع (2026-08-22):** «أريد شريط التمرير أفقيّاً مثل الأوّل وليس عموديّاً». مادّة `naqsh` تحوّل الشريط على سطح المكتب إلى **قائمة عموديّة لاصقة** في حاشية شبكةٍ ذات عمودَين (سطر 795 هناك). وكتلة الهيكل هذه أبطلت الشبكة (`display: block`) **ولم تُبطِل** تلك القاعدة ⇒ فبقي الشريط عموديّاً بينما المسار أفقيّ: تناقضٌ في اتّجاهَين على شاشة واحدة، ومعه يفقد الشريط معناه (هو أداة الانتقال الأفقيّ نفسها). ⚠️ والدرس: **نسخُ مادّةٍ يورّث قواعدها البنيويّة أيضاً** — فكل قاعدة في `@media` تخصّ شبكة سطح المكتب يجب أن يُبطِلها من ألغى الشبكة. القيم أدناه هي قيم الهاتف في `naqsh` حرفاً بحرف (لا اجتهاد). */ .cat-nav { position: sticky; top: var(--toggle-band); flex-direction: row; align-items: center; margin-inline: -1.15rem; padding: .6rem 1.15rem; overflow-x: auto; border-radius: 0; box-shadow: 0 10px 18px -14px var(--lo); } .cat-chip { justify-content: center; } .cart-drawer { inset-inline: 0 auto; width: min(420px, 94vw); } } /* ─── الترويسة في المشاهد الداخليّة: هويّة مختصرة لا بروفايل كامل ─── */ body.kh-inner .r-hero, body.kh-inner .r-bio, body.kh-inner .r-metarow { display: none; } body.kh-inner .r-headwrap { padding: .7rem .9rem; box-shadow: var(--nm-flat-s); } body.kh-inner .r-name { font-size: var(--t-lg); } body.kh-inner .r-logo { width: 42px; height: 42px; margin: 0 auto .3rem; } /* ─── صفّ الأفعال السريعة (أربع أيقونات في مرجع الهيكل) ─── */ .kh-quick { display: grid; /* auto-fit لا 4 ثابتة: مطعمٌ بلا واتساب يعطي ثلاثة أفعال، والعمود الرابع الفارغ يُقرأ عطلاً. auto-fit يطوي المسار الفارغ. */ grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .55rem; margin: 1.15rem 0 var(--kh-gap); } .kh-q { display: flex; flex-direction: column; align-items: center; gap: .4rem; /* ≥44px هدف لمس (PRODUCT.md §6) — والحشو هو ما يضمنه لا المقاس المعلَن. */ min-height: 76px; padding: .7rem .35rem; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--nm-out-s); color: var(--ink); text-decoration: none; text-align: center; } .kh-q-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-size: 1.05rem; } .kh-q-label { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.3; } .kh-q:hover, .kh-q:focus-visible { box-shadow: var(--nm-in-s); outline: none; } .kh-q:focus-visible .kh-q-label { color: var(--accent-ink); } /* ─── الخانة: بطاقة عريضة تُدخَل ─── */ .khanat { display: grid; gap: var(--kh-gap); } .khana { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: var(--kh-pad); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--nm-flat); color: var(--ink); text-decoration: none; min-height: 68px; } /* اللمس يُنقص النتوء (نفس فيزياء naqsh: يقترب من السطح لا يرتفع عنه) */ .khana:hover { box-shadow: var(--nm-flat-s); } .khana:active { box-shadow: var(--nm-in-s); } .khana:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; } .khana-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent-wash); color: var(--accent-ink); font-size: 1.25rem; } .khana-text { display: grid; gap: .16rem; min-width: 0; } .khana-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; line-height: 1.35; } .khana-note { font-size: var(--t-xs); color: var(--ink-3); /* اسم فئة طويل أو عنوان طويل لا يجوز أن يكسر البطاقة إلى ثلاثة أسطر. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .khana-go { color: var(--ink-3); font-size: 1.15rem; display: grid; place-items: center; } .khana:hover .khana-go, .khana:focus-visible .khana-go { color: var(--accent-ink); } /* ─── الخانة الأولى: المنيو بارزاً (بند 2.18 · أمرُ 2026-09-08) ─── 🔴 **الطلبُ بالحرف:** «اريد ان تكون زر المينيو هو الاول قبل صور من مطعمنا و ايضا اريده بارز قليلا اعني واضح». و«قليلاً» قيدٌ لا تهويناً: بطاقةُ المكافأة تأخذ لوناً ممتلئاً وحدّاً ذهبيّاً، فلو أخذ المنيو مثلَها تنافَس فعلان على العين وضاع كلاهما. فالبروزُ هنا ثلاثُ درجاتٍ محسوبة — هالةٌ حول البطاقة · أيقونةٌ أكبر بلونٍ ممتلئ · وارتفاعٌ أعلى قليلاً — فتبقى من نفس العائلة ويُرى فوراً أنّها الأولى. ⚠️ ولا لونَ مكتوبٌ بالعين: كلُّه مشتقٌّ من `--accent` الذي يحرّره المطعم من تبويب الألوان، فمطعمٌ أزرق يأخذ هالةً زرقاء بلا سطرٍ إضافيّ. */ .khana-primary { --kh-pri: color-mix(in srgb, var(--accent) 44%, transparent); min-height: 80px; background: color-mix(in srgb, var(--accent-wash) 58%, var(--surface)); box-shadow: var(--nm-flat), 0 0 0 3px var(--kh-pri), 0 12px 26px -12px var(--kh-pri); } .khana-primary:hover { box-shadow: var(--nm-flat-s), 0 0 0 4px var(--kh-pri), 0 14px 30px -12px var(--kh-pri); } .khana-primary:active { box-shadow: var(--nm-in-s), 0 0 0 3px var(--kh-pri); } .khana-primary .khana-icon { width: 52px; height: 52px; background: var(--accent); color: var(--on-accent); font-size: 1.45rem; } .khana-primary .khana-title { font-size: calc(var(--t-md) * 1.08); } .khana-primary .khana-go { color: var(--accent-ink); } /* ─── رأس المشهد الداخليّ ─── */ .kh-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 1rem 0 .85rem; } .kh-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem .8rem; border-radius: 99px; background: var(--surface); box-shadow: var(--nm-out-s); color: var(--ink-2); text-decoration: none; font-size: var(--t-xs); font-weight: 600; } /* 🔴 **توهّجٌ خلف الزرّ وحده** (طلبك 2026-08-22: «أضف توهّجاً بسيطاً في خلف الزرّ فقط») — لا لونَ ممتلئ ولا حجماً أكبر: الزرُّ يبقى هادئاً وتحته هالة من لكنة المطعم فيُرى فوراً بلا أن ينافس عنوان المشهد. `--kh-back-glow` رمزٌ مستقلّ فيستطيع قالبٌ لاحق تعديل شدّته وحدها. */ .kh-back { /* `--backGlow` يكتبه المطعم من تبويب الألوان (بند 3.9)؛ وبلا ضبطٍ يسقط إلى لكنته — فالافتراضيّ يبقى كما كان بلا حقلٍ مطلوب. */ --kh-back-glow: color-mix(in srgb, var(--backGlow, var(--accent)) 55%, transparent); position: relative; box-shadow: var(--nm-out-s), 0 0 0 4px var(--kh-back-glow), 0 6px 18px -6px var(--kh-back-glow); } .kh-back:hover, .kh-back:focus-visible { --kh-back-glow: color-mix(in srgb, var(--backGlow, var(--accent)) 78%, transparent); color: var(--accent-ink); box-shadow: var(--nm-in-s), 0 0 0 5px var(--kh-back-glow), 0 8px 22px -6px var(--kh-back-glow); outline: none; } @media (prefers-contrast: more) { .kh-back { box-shadow: none; outline: 2px solid var(--accent-ink); } } /* السهم يشير للخلف = ضدّ اتّجاه الدخول. الصفحة RTL فالرجوع نحو اليمين. */ .kh-back-icon { transform: scaleX(-1); } .kh-title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; margin: 0; } /* الدخول ينزلق قليلاً — إشارةُ تنقّل لا زينة، ومُعطَّلة عند تقليل الحركة. */ @media (prefers-reduced-motion: no-preference) { body.kh-inner #menu-zone { animation: kh-slide-in .22s ease-out both; } @keyframes kh-slide-in { from { transform: translateX(22px); opacity: .55; } to { transform: none; opacity: 1; } } } /* ─── المعرض ─── */ .kh-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } @media (min-width: 560px) { .kh-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 🔴 **صارت الصورةُ زرّاً لا `
`** (بند 2.18 · 2026-09-08): المكبّر يُفتح منها، وعنصرٌ غيرُ تفاعليّ بمستمعِ نقرٍ لا يُركَّز بـTab ولا يُفتح بـEnter ولا يُنطَق دورُه — أي أنّ المعرضَ يصير محجوباً عن لوحة المفاتيح وقارئ الشاشة. فإعادةُ تصفير سمات الزرّ إلزاميّةٌ هنا (المتصفّح يضع له حدّاً وخطّاً وحشواً)، و`cursor: zoom-in` يقول ما سيحدث **قبل** الضغط. ⚠️ وتبدّلت `figcaption` إلى `.kh-shot-cap`: `
` لا يجوز داخل `