/* ========================================================= الملف : mobile.css القسم : الاستجابة للجوال — مشترك المسؤوليات: ✓ @media overrides لجميع الأقسام ✓ يُحمَّل آخراً ليُلغي تصاميم الأقسام الفردية ممنوع: ✗ تصاميم غير متجاوبة (استخدم ملف القسم) يُحمَّل أخيراً دائماً بعد جميع ملفات CSS الأخرى. ========================================================= */ /* ================================================================================================= ☰ توثيق احترافي — Professional Documentation ================================================================================================= اسم الملف : الجوال.css وظيفة الملف : نظام التجاوب الكامل: تعديلات الأجهزة اللوحية والهواتف وتحسينات نافذة الاستعادة. الأقسام داخله : - TABLET (≤1200px) - MOBILE (≤768px) + ORB ANIMATION SYSTEM - AUTH CARD ENHANCEMENTS + RESET PASSWORD - FORM CONTROLS + AUTOFILL FIX + SCROLLBAR تاريخ التوثيق : 2026-06-05 (الخامس من يونيو 2026) ملاحظة : لم يُحذف أو يُختصر أي سطر من الكود الأصلي — أُضيفت الشروحات فقط. ================================================================================================= */ /* ================================================================================================= FILE NAME: responsive.css PROJECT: TRADIR AI / Leaders Of Trading TYPE: Responsive Design System ------------------------------------------------------------------------------------------------- العربية: هذا الملف مسؤول عن جعل الموقع متجاوباً مع جميع أحجام الشاشات. يحتوي على تعديلات خاصة بالأجهزة اللوحية والهواتف المحمولة. English: This file handles responsive behavior across desktops, tablets, and mobile devices. ================================================================================================= */ /* ================================================================================================= TABLET RESPONSIVE LAYOUT تصميم الأجهزة اللوحية ------------------------------------------------------------------------------------------------- العربية: يتم تفعيل هذه القواعد عندما يصبح عرض الشاشة 1200 بكسل أو أقل. English: Activated when the screen width is 1200px or smaller. ================================================================================================= */ @media (max-width: 1200px) { /* --------------------------------------------------------------------------------------------- HEADER LAYOUT تخطيط الهيدر --------------------------------------------------------------------------------------------- ملاحظة إصلاح توافقية (Safari/WebKit + Chromium): كانت هذه القاعدة تضبط position:relative على header، مما يُلغي بصمت position:sticky المُعرَّف في navbar.css (لأن mobile.css يُحمَّل أخيراً دوماً) — على كل عرض جوال/ تابلت (≤1200px). تحقّق فعلي عبر WebKit أثبت أن الهيدر لم يكن يلتصق بالأعلى إطلاقاً عند التمرير. flex-direction:column كانت بلا أي أثر أصلاً (header نفسه ليس display:flex — الحاوية الفعلية هي .navbar-inner) فأُزيلت معها. لا تغيير بصري آخر: الهيدر أفقي كما هو، فقط أصبح ثابتاً أعلى الشاشة فعلياً كما كان مقصوداً منذ إضافة position:sticky. --------------------------------------------------------------------------------------------- */ /* قواعد .hero/.hero-content/.hero p/.hero-cta/.stats/.hero h1 عند ≤1200px انتقلت إلى modules/home/home.mobile.css (Hero حصراً). .hero p كانت مجمَّعة مع .section-header (سطر واحد مشترك) — فُصلت: .section-header بقيت هنا (مشتركة مع Features/About)، و.hero p وحدها انتقلت مع نفس القيمة بلا أي تغيير. */ /* --------------------------------------------------------------------------------------------- CENTER ALIGNMENT توسيط العناصر --------------------------------------------------------------------------------------------- */ .section-header { margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------------------------------- FEATURES GRID شبكة المميزات --------------------------------------------------------------------------------------------- */ .features-grid { grid-template-columns: repeat(2, 1fr); } } /* ================================================================================================= MOBILE RESPONSIVE LAYOUT تصميم الهواتف المحمولة ------------------------------------------------------------------------------------------------- العربية: يتم تفعيل هذه القواعد عندما يصبح عرض الشاشة 768 بكسل أو أقل. English: Activated when the screen width is 768px or smaller. ================================================================================================= */ @media (max-width: 768px) { /* قواعد nav/.header-actions/.brand/.logo-icon (Navbar) وقواعد ORB ANIMATION SYSTEM/.hero h1/.hero p (Hero) عند ≤768px انتقلت إلى navbar.mobile.css وhome.mobile.css على التوالي. .stats كانت مجمَّعة مع .features-grid/.form-row (سطر واحد مشترك) — فُصلت: .stats (Hero) انتقلت، و.features-grid/.form-row بقيتا هنا (مشتركتان مع أقسام أخرى) بنفس القيمة بلا أي تغيير. */ /* --------------------------------------------------------------------------------------------- SINGLE COLUMN GRIDS تحويل جميع الشبكات إلى عمود واحد --------------------------------------------------------------------------------------------- */ .features-grid, .form-row { grid-template-columns: 1fr; } } /* ================================================================================================= MOBILE SECTION HEADER عنوان الأقسام على الجوال ------------------------------------------------------------------------------------------------- العربية: تصغير حجم العناوين الرئيسية داخل الأقسام لتحسين العرض على الهواتف. English: Reduces section heading size for mobile screens. ================================================================================================= */ .section-header h2 { /* حجم مناسب للجوال */ font-size: 34px; } /* End Mobile Responsive */ /* ================================================================================================= AUTH CARD ENHANCEMENTS تحسينات نافذة تسجيل الدخول واستعادة كلمة المرور ------------------------------------------------------------------------------------------------- العربية: تحسين الشكل العام للبطاقة وإضافة تأثيرات احترافية. English: Adds premium styling and shadow effects to authentication cards. ================================================================================================= */ .auth-card { overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(53, 217, 255, 0.08); } /* ================================================================================================= RESET PASSWORD HEADER عنوان استعادة كلمة المرور ================================================================================================= */ .auth-card.reset-mode .auth-header { /* محاذاة عربية */ text-align: right; padding-inline-end: 34px; margin-bottom: 22px; } /* ================================================================================================= LTR SUPPORT دعم اللغة الإنجليزية ================================================================================================= */ html[dir="ltr"] .auth-card.reset-mode .auth-header { text-align: left; } /* ================================================================================================= RESET TITLE عنوان صفحة الاستعادة ================================================================================================= */ .auth-card.reset-mode .auth-header h2 { /* حجم مرن حسب الشاشة */ font-size: clamp(28px, 4vw, 38px); line-height: 1.08; margin-bottom: 8px; } /* ================================================================================================= AUTH TABS تبويبات تسجيل الدخول والاستعادة ================================================================================================= */ .auth-card.reset-mode .auth-tabs { margin-bottom: 28px; } /* ================================================================================================= AUTH TAB BUTTON زر التبويب ================================================================================================= */ .auth-card.reset-mode .auth-tab { background: rgba(19, 31, 49, 0.72); border: 1px solid rgba(180, 210, 235, 0.13); min-height: 42px; } /* ================================================================================================= RESET STEPS خطوات استعادة كلمة المرور ================================================================================================= */ .auth-card.reset-mode .reset-steps { direction: rtl; max-width: 410px; margin: 4px auto 26px; } /* ================================================================================================= STEP CIRCLE دائرة رقم المرحلة ================================================================================================= */ .auth-card.reset-mode .reset-step { width: 38px; height: 38px; font-size: 17px; } /* ================================================================================================= STEP CONNECTOR الخط الواصل بين المراحل ================================================================================================= */ .auth-card.reset-mode .reset-line { height: 4px; background: rgba(140, 170, 195, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } /* ================================================================================================= INPUT ALIGNMENT محاذاة الحقول ================================================================================================= */ .auth-card.reset-mode .input-group { text-align: right; } /* ================================================================================================= INPUT ALIGNMENT FOR ENGLISH ================================================================================================= */ html[dir="ltr"] .auth-card.reset-mode .input-group { text-align: left; } /* ================================================================================================= INPUT DESIGN تصميم الحقول ================================================================================================= */ .auth-card.reset-mode .input-group input, .auth-card.reset-mode .otp-boxes input { border-radius: 14px; min-height: 48px; background: rgba(9, 28, 44, 0.92) !important; border-color: rgba(53, 217, 255, 0.38); } /* ================================================================================================= SUBMIT BUTTON زر المتابعة ================================================================================================= */ .auth-card.reset-mode .auth-submit { min-height: 48px; border-radius: 16px; font-weight: 900; box-shadow: 0 12px 36px rgba(0, 255, 240, 0.14); } /* ================================================================================================= FOOTER TEXT نص أسفل النموذج ================================================================================================= */ .auth-card.reset-mode .reset-footer { font-weight: 800; } /* ================================================================================================= FORM MESSAGE رسائل النجاح والخطأ ================================================================================================= */ .form-message { text-align: right; font-weight: 800; } /* ================================================================================================= FORM MESSAGE LTR ================================================================================================= */ html[dir="ltr"] .form-message { text-align: left; } /* ================================================================================================= DARK FORM CONTROLS دعم الوضع الداكن للحقول ================================================================================================= */ input, textarea, select { color-scheme: dark; } /* ================================================================================================= AUTOFILL FIX إصلاح ألوان التعبئة التلقائية في Chrome ================================================================================================= */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #f5fbff !important; caret-color: #f5fbff !important; -webkit-box-shadow: 0 0 0 1000px #0d1827 inset !important; box-shadow: 0 0 0 1000px #0d1827 inset !important; border-color: rgba(53, 217, 255, 0.34) !important; } /* ================================================================================================= MODAL SCROLL FIX إصلاح التمرير داخل نافذة الاستعادة ================================================================================================= */ .auth-modal.show { align-items: flex-start; overflow-y: auto; padding: 32px 0; /* حواف آمنة (Notch / Dynamic Island / Home Indicator) — env() تُقيَّم صفراً بأمان على الأجهزة التي لا تحتاجها أو حين لا يوجد viewport-fit=cover في وسم ؛ لا يظهر أثرها إلا عند إضافة viewport-fit=cover لوسم viewport في رأس الصفحة (خارج نطاق modules/shared — راجع التوصيات). */ padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); } /* ================================================================================================= AUTH CARD SCROLLING تمرير البطاقة عند صغر الشاشة ================================================================================================= */ .auth-card, .auth-card.reset-mode { max-height: calc(100vh - 64px) !important; /* dvh — يمنع قفز ارتفاع البطاقة عند ظهور/اختفاء شريط عنوان المتصفح على الجوال؛ يُتجاهل بأمان في المتصفحات التي لا تدعمه (يبقى السطر أعلاه) */ max-height: calc(100dvh - 64px) !important; overflow-y: auto !important; overflow-x: hidden !important; /* momentum scrolling على iOS القديم + منع تسرّب التمرير لصفحة الخلفية عند الوصول لحافة محتوى البطاقة على الجوال (Android/iOS) */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(53, 217, 255, 0.55) rgba(255, 255, 255, 0.06); } /* ================================================================================================= CUSTOM SCROLLBAR تخصيص شريط التمرير ================================================================================================= */ .auth-card::-webkit-scrollbar { width: 8px; } .auth-card::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; } .auth-card::-webkit-scrollbar-thumb { background: rgba(53, 217, 255, 0.55); border-radius: 999px; } /* ================================================================================================= AUTH TOUCH TARGETS — أهداف لمس 44px على الجوال ------------------------------------------------------------------------------------------------- زر الإغلاق (36px) وروابط النص (بلا ارتفاع أدنى) كانا تحت الحد الأدنى الموصى به (44px) للمس على الجوال. مُقيَّد بـ @media حتى لا يغيّر حجم هذه العناصر على سطح المكتب (فأر، لا حاجة لهامش لمس). ================================================================================================= */ @media (max-width: 768px) { .auth-close { width: 44px; height: 44px; } .forgot-link, .auth-link-btn { min-height: 44px; padding: 6px 10px; } } /* ================================================================================================= OTP BOXES — تصغير على الشاشات الضيقة جداً ------------------------------------------------------------------------------------------------- 6 خانات بعرض bit ثابت (repeat(6,1fr)) داخل بطاقة reset-mode (700px حد أقصى، لكن 94% فعلياً على الجوال) — على شاشة 320-375px تُصبح كل خانة ضيقة جداً لخط 24px. تُصغَّر الفجوة والحشو والخط فقط، بلا أي تغيير في حجم البطاقة نفسها (قرار مُعتمَد: تبقى نافذة منبثقة مركزية، لا تصبح شاشة كاملة على الجوال). ================================================================================================= */ @media (max-width: 380px) { .otp-boxes { gap: 6px; } .otp-boxes input { font-size: 18px; padding: 12px 2px; } } /* ================================================================================================= MOBILE APP POLISH — Header / Hero / Buttons / Stats / Orb ------------------------------------------------------------------------------------------------- قسم واحد جديد يجمّع كل تعديلات "مظهر تطبيق موبايل احترافي" لأعلى الصفحة الرئيسية (الهيدر + الهيرو). كل شيء هنا مقصور على media query للجوال — صفر تأثير على سطح المكتب. مكان هذه القواعد هنا (لا داخل navbar.css أو home.css نفسيهما) مقصود: .btn مُعرَّف بلا نطاق في كلا الملفين بقيم مختلفة (navbar.css يحمَّل أولاً، home.css يليه فيَغلب على .btn المشتركة) — وضع الكتابة الجديدة هنا (آخر ملف يُحمَّل دوماً) يوحّد مظهر الأزرار على الجوال بلا الحاجة لفهم/كسر ذلك التعارض القائم بين الملفين. ملاحظة عن Hamburger Menu: طُلب تحويل القائمة لـ Hamburger "إذا كانت مزدحمة"، لكن القيد الصريح المتكرر في هذه المهمة "ممنوع تعديل منطق JavaScript" يمنع إضافة تفاعل فتح/إغلاق قائمة جديد (JS) بأمان ضمن هذا النطاق. الحل المُعتمَد بدلاً منه: تصغير/ترتيب عناصر الهيدر نفسها (شعار أصغر، عنوان أصغر 15%، إخفاء الوصف الفرعي الطويل، تبويب أضيق) حتى لا يبقى مزدحماً بلا الحاجة لقائمة منسدلة جديدة. إن أردتم Hamburger حقيقي لاحقاً فهو ممكن، لكنه يتطلب تعديل JS صراحة خارج قيود هذه المهمة. ================================================================================================= */ @media (max-width: 480px) { /* قواعد الهيدر (navbar-inner/logo-icon/brand/brand-text/nav/nav a/ header-actions/header-actions .btn) انتقلت إلى navbar.mobile.css، وقواعد الهيرو (hero-cta/hero/badge/hero h1/hero p/stats/stat-box/ orb*) انتقلت إلى home.mobile.css. .lang-toggle (وحدة اللغة المستقلة) وقاعدة ANCHOR SCROLL OFFSET المشتركة (تخص home/features/about/contact معاً) و.btn/.btn:hover/.btn:active العامة (مشتركة صراحة بين الهيدر والهيرو وأي .btn آخر في الصفحة) بقيت هنا كما هي بلا أي تغيير. */ .lang-toggle { min-height: 44px; } /* ── ANCHOR SCROLL OFFSET — الهيدر أصبح فعلياً sticky؛ بلا هذا التعويض، النقر على رابط تنقّل (#features/#about/#contact) يُخفي جزءاً من عنوان القسم خلف الهيدر اللاصق. القيمة هنا تُضاف إلى scroll-padding-top:80px العام (base.css، غير مخصَّص للجوال) فيصبح الإزاحة الكلية ≈ ارتفاع الهيدر الفعلي + مسافة تنفّس صغيرة. قِيست ارتفاعات الهيدر الفعلية فعلياً (Playwright): 135px لأي عرض ≥340px، و183px فقط للعرض الضيق جداً ≤339px (التفاف أطول). القيمة القديمة (260px) كانت متبقية من تصميم هيدر أطول ولم تعد مطابقة، فكانت تترك حتى 205px من الفراغ الميت فوق كل قسم عند التنقّل — أُصلحت هنا لتطابق القياس الفعلي الحالي ── */ #home, #features, #about, #contact { scroll-margin-top: 70px; } /* ── BUTTONS (مشتركة: هيدر + هيرو + أي .btn آخر في الصفحة) ── يُلغي min-width:165px القادم من home.css على الجوال — كان يجبر زرّي الهيدر على عرض ~330px مجتمعين، أضيق بكثير من شاشة 320-390px */ .btn { min-width: 0; height: 50px; padding: 0 20px; border-radius: 16px; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.18s ease, opacity 0.18s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.98); opacity: 0.9; } } /* الهيدر عند ≤339px كان يلتف سابقاً لارتفاع أطول (183px بدل 135px) مع التصميم القديم بصفّين — يحتاج تعويضاً إضافياً حينها. بعد نقل مبدّل اللغة/ تسجيل الدخول/إنشاء الحساب إلى #navDrawerFooter، الهيدر صفّ واحد فقط ويبقى 73px ثابتاً حتى عند 320px (قِيس فعلياً عبر Playwright، بلا أي التفاف) — نفس قيمة الكتلة العامة أعلاه بالضبط الآن. تُبقى هذه الكتلة قائمة عمداً (بدل حذفها) للتوثيق ولتبقى شبكة أمان جاهزة إن عاد الهيدر للالتفاف مستقبلاً عند تغييرات محتوى لاحقة على أضيق الشاشات. */ @media (max-width: 339px) { #home, #features, #about, #contact { scroll-margin-top: 8px; } /* .header-actions .btn (تصغير أزرار الهيدر عند ≤339px) انتقلت إلى navbar.mobile.css بنفس القيمة بلا أي تغيير. */ } /* ================================================================================================= RESET BUTTON SPACING مسافات زر إعادة التعيين ================================================================================================= */ .auth-card.reset-mode #reset-submit { margin-top: 14px; margin-bottom: 8px; } /* ================================================================================================= ERROR MESSAGE COLOR لون رسالة الخطأ ================================================================================================= */ .auth-card.reset-mode .form-message.error { color: #ff8d8d; } /* ================================================================================================= SUCCESS MESSAGE COLOR لون رسالة النجاح ================================================================================================= */ .auth-card.reset-mode .form-message.success { color: #78ffcf; } /* ================================================================================================= MOBILE UI/UX FINAL POLISH — Production Ready (Binance/Bybit/OKX-level mobile density) ------------------------------------------------------------------------------------------------- نظام مسافات موحّد لكل ما يلي: 8 / 12 / 16 / 24 / 32 / 48px فقط — لا قيم عشوائية. كل شيء هنا داخل @media(max-width:480px) — صفر تأثير على سطح المكتب. مبني فوق تعديلات الجولتين السابقتين (Header/Hero compacting، Safari sticky fix) بلا التعارض معهما — كتلة جديدة مستقلة عمداً بدل التعديل داخل الكتل القديمة (تفادياً لخطأ إغلاق قوس مبكر حدث سابقاً). ================================================================================================= */ @media (max-width: 480px) { /* بنود 1 (NAVBAR) و2 (HERO) بالكامل انتقلتا إلى navbar.mobile.css/ home.mobile.css على التوالي. .lang-toggle (وحدة اللغة المستقلة) كانت مجمَّعة مع .header-actions .btn (سطر واحد مشترك) — فُصلت: .lang-toggle بقيت هنا بنفس القيمة بلا أي تغيير. */ .lang-toggle { height: 44px; min-height: 44px; } /* ── 3. STATISTICS — شبكة عمودين بدل التكديس العمودي الطويل (نفس المعالجة لـ Features و About — بنية متطابقة .stats-container/.ab-stats) ── */ .stats-container, .ab-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px 16px; } .stat-item, .ab-stat-item { padding: 12px 8px; border-radius: 14px; } .stat-divider, .ab-stat-divider { display: none; } /* ── 4. CARDS (عام) — تقليل الارتفاع/الحشو، تقريب الأيقونة من العنوان، العنوان من الوصف، عبر كل بطاقات الصفحة (Features/About/Contact) ── */ .feature-card, .ab-adv-card, .ab-bot-card { padding: 20px 18px; } .feature-icon, .ab-adv-icon, .ab-bot-icon { margin-bottom: 12px; } .feature-card h3, .ab-adv-card h3, .ab-bot-card h3 { margin-bottom: 8px; } .feature-accent, .ab-accent { margin-bottom: 10px; } .ct-card { padding: 20px 16px; } .ct-icon-wrap { margin-bottom: 14px; } .ct-card p { margin-bottom: 14px; } .info-box { padding: 20px 16px; } .info-box h3 { margin-bottom: 14px; } .info-box-desc { margin-bottom: 14px; } /* ── 5. SECTIONS — تقليل المسافات العمودية بين الأقسام ~30-40% ── */ .features { padding: 24px 0 32px; } .about { padding: 24px 0 32px; } .contact { padding: 24px 0 32px; } .features-header { margin-bottom: 24px; } .stats-container { margin-bottom: 32px; } /* شبكة عمودين بدل عمود واحد — 8 بطاقات بمحتوى قصير (أيقونة + عنوان قصير + جملة واحدة)، نفس منطق تحويل Statistics سابقاً: عمود واحد يعني ~8× ارتفاع البطاقة تمريراً متواصلاً، بينما عمودان يقلّصان الطول الكلي للقسم إلى النصف تقريباً بلا ازدحام (البطاقات لا تزال تتّسع للنص) */ .features-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; gap: 12px; } .info-row { margin-bottom: 0; gap: 12px; } .about-hero { margin-bottom: 32px; gap: 20px; } .about .section-header { margin-bottom: 24px; } .ab-stats { margin-bottom: 32px; } /* نفس معالجة .features-grid أعلاه — 8 بطاقات مزايا بمحتوى قصير مماثل */ .ab-advantages { grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; gap: 12px; } .ab-timeline-section { margin-bottom: 32px; } .ab-trust { margin-bottom: 24px; } .ct-header { margin-bottom: 24px; } /* ── 6. ABOUT SECTION — تصغير الرسم التوضيحي، تقريب النص منه ── */ .about-visual { height: 220px; } /* ── 7. FEATURES — تكبير الأيقونة قليلاً، تقليل الفراغ السفلي ── */ .feature-icon { width: 60px; height: 60px; } /* ── 8. WHY CANAAN — قسم الدائرة الرسومية في الهيرو انتقل بالكامل إلى home.mobile.css بنفس القيم بلا أي تغيير. ── */ /* ── 9. HOW IT WORKS — عناصر متساوية تماماً (موحّدة أصلاً عبر نفس صنف .tl-step لكل عنصر؛ هنا فقط تشديد المسافات) ── */ .timeline-h { gap: 6px; } .tl-circle { margin-bottom: 8px; } /* ── 10. FAQ — تقليل الارتفاع والحشو، تصغير علامة + ── */ .faq-question { padding: 12px 14px; } .faq-arrow { font-size: 11px; } .info-box .faq-list { gap: 6px; } /* ── 11. CONTACT — تقليل الفراغات (مكمّل لبند 4 أعلاه) ── */ .ct-grid { gap: 12px; } /* ── 12. TYPOGRAPHY — توحيد أحجام العناوين عبر كل الأقسام ── */ .features-header h2, .about .section-header h2, .ct-header h2, .about-content h2 { font-size: 24px; } .ab-tl-header h2 { font-size: 22px; } .ab-tl-header { margin-bottom: 24px; } .ct-card h3 { font-size: 17px; } } /* ================================================================================================= MOBILE NAVBAR REDESIGN — انتقل بالكامل إلى modules/navbar/navbar.mobile.css (كان هنا هيدر Grid بصفّين + Mobile Drawer كاملَين — Navbar حصراً). القاعدة الوحيدة المشتركة مع أقسام أخرى (#home/#features/#about/#contact) بقيت هنا بنفس القيمة بلا أي تغيير. ================================================================================================= */ @media (max-width: 768px) { /* ── ANCHOR SCROLL OFFSET — بعد نقل مبدّل اللغة/تسجيل الدخول/إنشاء الحساب إلى #navDrawerFooter، الهيدر أصبح صفّاً واحداً فقط (☰ | الشعار)، ارتفاع 73px ثابت فعلياً (Playwright) عبر كامل مدى 320-768px. القيمة هنا + 80px scroll-padding-top العام (base.css) = 88px إجمالي، يطابق 73px ارتفاع الهيدر + ~15px مسافة تنفّس. */ #home, #features, #about, #contact { scroll-margin-top: 8px; } } /* .nav-hamburger:focus-visible / .nav-drawer-close:focus-visible انتقلتا إلى navbar.mobile.css (داخل @media(max-width:768px) هناك) بنفس القيمة بلا أي تغيير. */