@charset "UTF-8";
/* ============================================================
   abbasfadhil.com — نظام التصميم
   الفكرة: «ساحة مرقّمة» — دقّة لوجستية بدل لمعان معارض السيارات.
   خطوط هوائية، لوحات بيانات بأرقام متساوية العرض، وإشارة كهرمانية واحدة.
   كل المسافات بخصائص منطقية (inline/block) ليعمل الملف في RTL و LTR معاً.
   ============================================================ */

/* ── 1. الرموز ───────────────────────────────────────────── */
:root {
    /* الأرضيات — رمادي مائل للأزرق المخضرّ، لا رمادي محايد */
    --paper:        #F1F4F6;
    --paper-2:      #E7ECEF;
    --surface:      #FFFFFF;
    --surface-sunk: #F7F9FA;

    /* الحبر والفولاذ */
    --ink:          #0D151B;
    --steel-900:    #11212C;
    --steel-800:    #1A3040;
    --steel-700:    #27455B;
    --steel-500:    #4E6C82;
    --steel-400:    #70899E;
    --steel-300:    #9DB0BE;

    /* خطوط وحدود */
    --line:         #D7DEE3;
    --line-soft:    #E6EBEE;
    --line-dark:    #24404F;

    /* الإشارة — كهرماني معدّات الموانئ. اللون الجريء الوحيد في الصفحة */
    --signal:       #C8811A;
    --signal-hi:    #E09B2D;
    --signal-soft:  #FBF2E2;
    --signal-ink:   #6B4109;

    /* دلالات */
    --ok:           #2C6E52;
    --ok-soft:      #E4F1EA;
    --bad:          #A93129;
    --bad-soft:     #FAEAE8;

    /* نصوص */
    --fg:           var(--ink);
    --fg-muted:     #4A6274;
    --fg-faint:     #6E8494;
    --fg-invert:    #EEF3F6;

    /* خطوط — لا خطّ أحادي المسافة: الأرقام تُضبط بـ tabular-nums على الخط نفسه */
    --font-display: "Tajawal", "Segoe UI", Tahoma, sans-serif;
    --font-body:    "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, sans-serif;
    --font-mono:    "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, sans-serif;

    /* مقياس الطباعة — أكبر وأثقل ليقرأ بوضوح على شاشات الجوّال في الضوء */
    --t-xs:   0.8125rem;
    --t-sm:   0.9375rem;
    --t-base: 1.0625rem;
    --t-md:   1.1875rem;
    --t-lg:   1.4375rem;
    --t-xl:   1.875rem;
    --t-2xl:  2.375rem;
    --t-3xl:  3rem;
    --t-4xl:  3.75rem;

    /* إيقاع المسافات */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --container: 1200px;
    --gutter: 1.25rem;
    --radius: 4px;
    --radius-lg: 8px;

    --shadow-sm: 0 1px 2px rgba(13, 21, 27, .06), 0 1px 1px rgba(13, 21, 27, .04);
    --shadow-md: 0 6px 18px rgba(13, 21, 27, .09), 0 2px 5px rgba(13, 21, 27, .05);
    --shadow-lg: 0 18px 44px rgba(13, 21, 27, .16);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #0B1218;
        --paper-2:      #0F1922;
        --surface:      #121D26;
        --surface-sunk: #0E1821;

        --line:         #22333F;
        --line-soft:    #1A2A34;

        --signal:       #E3A33C;
        --signal-hi:    #F0B45A;
        --signal-soft:  #2A2010;
        --signal-ink:   #F4CE8C;

        --ok-soft:      #14291F;
        --bad:          #E08078;
        --bad-soft:     #2A1614;

        --fg:           #E7EEF2;
        --fg-muted:     #A8BCC9;
        --fg-faint:     #8399A8;
        --fg-invert:    #E7EEF2;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
        --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
    }
}

/* ── 2. الأساس ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 6rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.75;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--fg);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure, figcaption, dl, dt, dd, blockquote, fieldset { margin: 0; padding: 0; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--signal); color: #fff; }

.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── 3. مكوّنات التخطيط ─────────────────────────────────── */
.wrap {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--narrow { max-inline-size: 820px; }

.skip {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--sp-4);
    z-index: 100;
    padding: var(--sp-3) var(--sp-5);
    background: var(--signal);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
}
.skip:focus { inset-block-start: 0; }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--sunk { background: var(--surface-sunk); border-block: 1px solid var(--line-soft); }
.section--dark {
    background: var(--steel-900);
    color: var(--fg-invert);
    border-block: 1px solid var(--line-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

@media (min-width: 60rem) {
    .section { padding-block: var(--sp-9); }
    .section--tight { padding-block: var(--sp-8); }
}

.section__head { max-inline-size: 62ch; margin-block-end: var(--sp-6); }
.section__head--center { margin-inline: auto; text-align: center; }

/* شارة القسم: كلمة واحدة قوية بلون الإشارة */
.eyebrow {
    display: block;
    margin-block-end: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: 800;
    color: var(--signal);
}
.section--dark .eyebrow { color: var(--signal-hi); }

.h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, var(--t-4xl)); }
.h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, var(--t-2xl)); }
.h3 { font-size: var(--t-lg); font-weight: 800; }

.lead {
    margin-block-start: var(--sp-4);
    font-size: var(--t-md);
    line-height: 1.75;
    color: var(--fg-muted);
    max-inline-size: 62ch;
}
.section--dark .lead { color: var(--steel-300); }
.section__head--center .lead { margin-inline: auto; }

.prose { display: flex; flex-direction: column; gap: var(--sp-4); color: var(--fg-muted); max-inline-size: 66ch; }
.prose strong { color: var(--fg); font-weight: 600; }

/* ── 4. الأزرار ──────────────────────────────────────────── */
.btn {
    --btn-bg: var(--steel-900);
    --btn-fg: #fff;
    --btn-bd: var(--steel-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.8rem 1.4rem;
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--signal { --btn-bg: var(--signal); --btn-bd: var(--signal); --btn-fg: #fff; }
.btn--signal:hover { --btn-bg: var(--signal-hi); --btn-bd: var(--signal-hi); }

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    --btn-bd: var(--line);
}
.btn--ghost:hover { --btn-bd: var(--steel-400); }

.btn--onDark {
    --btn-bg: transparent;
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, .34);
}
.btn--onDark:hover { --btn-bd: #fff; }

.btn--sm { padding: 0.5rem 0.9rem; font-size: var(--t-sm); }
.btn--lg { padding: 1rem 1.75rem; font-size: var(--t-md); font-weight: 700; }
.btn--block { inline-size: 100%; }

.btn .ico { inline-size: 1.15em; block-size: 1.15em; flex: none; }
[dir="rtl"] .btn .ico--flip { transform: scaleX(-1); }

.ico { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.ico--sm { inline-size: 1rem; block-size: 1rem; }
.ico--lg { inline-size: 1.75rem; block-size: 1.75rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── 5. الشريط العلوي والقائمة ──────────────────────────── */
.topbar {
    background: var(--steel-900);
    color: var(--steel-300);
    font-size: var(--t-sm);
    border-block-end: 1px solid var(--line-dark);
}
.topbar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-block-size: 2.5rem;
    flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: var(--sp-5); list-style: none; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__item a { text-decoration: none; }
.topbar__item a:hover { color: #fff; }
.topbar .ico { inline-size: 0.95rem; block-size: 0.95rem; color: var(--signal); }

.lang {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius);
    color: var(--fg-invert);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: .06em;
    text-decoration: none;
}
.lang:hover { border-color: var(--signal); color: #fff; }

.masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--surface); /* بديل للمتصفحات التي لا تدعم color-mix */
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--line);
}
.masthead__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-block-size: 4.25rem;
}

.logo { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.logo__mark { inline-size: 2.6rem; block-size: 2.6rem; flex: none; }
.logo__text { display: flex; flex-direction: column; gap: 1px; }
.logo__name { font-family: var(--font-display); font-weight: 900; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -0.02em; }
.logo__sub {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg-faint);
}

.nav { display: flex; align-items: center; gap: var(--sp-1); list-style: none; }
.nav__link {
    display: inline-block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--fg-muted);
    white-space: nowrap;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav__link:hover { color: var(--fg); background: var(--surface-sunk); }
.nav__link[aria-current="page"] { color: var(--fg); font-weight: 600; }
.nav__link[aria-current="page"]::after {
    content: "";
    display: block;
    block-size: 2px;
    margin-block-start: 3px;
    background: var(--signal);
}

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
}
.burger .ico--close, .burger[aria-expanded="true"] .ico--menu { display: none; }
.burger[aria-expanded="true"] .ico--close { display: block; }

.nav-panel { display: none; }

@media (max-width: 63.99rem) {
    .nav { display: none; }
    .nav-panel[data-open="true"] {
        display: block;
        border-block-start: 1px solid var(--line);
        background: var(--surface);
    }
    .nav-panel .nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-block: var(--sp-3);
    }
    .nav-panel .nav__link { padding-block: 0.7rem; font-size: var(--t-md); }
    .nav-panel .nav__link[aria-current="page"]::after { inline-size: 2rem; }
    .nav-panel .actions { padding-block: var(--sp-3) var(--sp-5); }
}

@media (min-width: 64rem) {
    .burger { display: none; }
}

/* ── 6. البطل: صورة تملأ عرض الشاشة والنص فوقها ─────────── */
.hero {
    position: relative;
    background: #0A1017;
    color: #fff;
    isolation: isolate;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 55%;
}
/* تدرّج يضمن قراءة النص فوق أي صورة، وأقوى من جهة بداية السطر */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(8, 14, 20, .55) 0%, rgba(8, 14, 20, .34) 42%, rgba(8, 14, 20, .92) 100%),
        linear-gradient(to var(--hero-fade, left), rgba(8, 14, 20, .86) 0%, rgba(8, 14, 20, .34) 62%, rgba(8, 14, 20, .1) 100%);
}
/* التدرّج يبدأ داكناً من جهة بداية السطر: يمين في العربية، يسار في الإنجليزية */
[dir="rtl"] .hero { --hero-fade: left; }
[dir="ltr"] .hero { --hero-fade: right; }

.hero__in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--sp-8) var(--sp-8);
    min-block-size: min(84vh, 44rem);
    justify-content: center;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    margin-block-end: var(--sp-4);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.hero__title {
    font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.25rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
    max-inline-size: 17ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero__lead {
    margin-block-start: var(--sp-4);
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
    max-inline-size: 54ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.hero__actions { margin-block-start: var(--sp-6); }
.hero__note {
    margin-block-start: var(--sp-6);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
}
.hero__note .ico { color: var(--signal-hi); inline-size: 1.1rem; block-size: 1.1rem; }

@media (min-width: 64rem) {
    .hero__in { min-block-size: min(88vh, 48rem); padding-block: var(--sp-9); }
}

/* ── 7. لوحة البيانات — العنصر المميّز للهوية ───────────── */
.plate {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.plate__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    border-inline-start: 1px solid var(--line-soft);
    min-inline-size: 0;
}
.plate__item:first-child { border-inline-start: 0; }
.plate__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plate__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    line-height: 1.3;
}
.plate__unit { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; color: var(--fg-faint); }


/* ── 8. الشبكات والبطاقات ───────────────────────────────── */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.grid--split { gap: var(--sp-6); }
@media (min-width: 64rem) {
    .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .grid--split-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--steel-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card__link { display: flex; flex-direction: column; block-size: 100%; text-decoration: none; color: inherit; }
.card__media { position: relative; display: block; background: #101720; }
.card__media .media { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.card__badge {
    position: absolute;
    inset-block-start: var(--sp-3);
    inset-inline-start: var(--sp-3);
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    background: var(--signal);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: .01em;
}
.card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-3); flex: 1; }
.card__kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--signal);
}
.card__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
.card__lead { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.65; }

.plate--card { border-inline: 0; border-block-end: 0; border-radius: 0; background: var(--surface-sunk); }
.plate--card .plate__item { padding: var(--sp-3); }

.card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-block-start: 1px solid var(--line-soft);
    background: var(--surface);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--signal);
}
[dir="rtl"] .card__cta .ico { transform: scaleX(-1); }

/* بطاقة خدمة */
.svc {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.svc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius);
    background: var(--signal-soft);
    color: var(--signal-ink);
    border: 1px solid var(--line);
    border-color: color-mix(in srgb, var(--signal) 25%, transparent);
}
.svc__title { font-size: var(--t-md); font-weight: 700; font-family: var(--font-display); }
.svc__body { font-size: 0.9375rem; color: var(--fg-muted); }
.svc__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: auto; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--line-soft); }
.svc__list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--t-sm); color: var(--fg-muted); }
.svc__list li::before {
    content: "";
    inline-size: 5px;
    block-size: 5px;
    margin-block-start: .6em;
    background: var(--signal);
    flex: none;
}

/* ── 9. قائمة المراحل المرقّمة ──────────────────────────── */
.steps { list-style: none; display: grid; gap: 0; counter-reset: step; }
.step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-block-start: 1px solid var(--line);
    counter-increment: step;
}
.step:first-child { border-block-start: 0; padding-block-start: 0; }
.step__no {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--signal);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.step__no::before { content: counter(step); }
.step__title { font-size: var(--t-md); font-weight: 800; font-family: var(--font-display); }
.step__body { margin-block-start: var(--sp-2); font-size: var(--t-sm); color: var(--fg-muted); }
.section--dark .step { border-color: var(--line-dark); }
.section--dark .step__body { color: var(--steel-300); }

@media (min-width: 48rem) {
    .steps--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); }
    .steps--cols .step:nth-child(2) { border-block-start: 0; padding-block-start: 0; }
}

/* ── 10. قائمة تحقّق ────────────────────────────────────── */
.checks { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.checks li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.checks .ico { color: var(--signal); margin-block-start: 0.2rem; inline-size: 1.1rem; block-size: 1.1rem; }
.section--dark .checks li { color: var(--steel-300); }

/* ── 11. الأسئلة الشائعة ────────────────────────────────── */
.faq { display: flex; flex-direction: column; border-block-start: 1px solid var(--line); }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--signal); }
.faq__sign {
    position: relative;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 2px;
}
.faq__sign::before, .faq__sign::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background: var(--signal);
    translate: -50% -50%;
}
.faq__sign::before { inline-size: 9px; block-size: 1.5px; }
.faq__sign::after { inline-size: 1.5px; block-size: 9px; transition: opacity .2s var(--ease); }
.faq__item[open] .faq__sign::after { opacity: 0; }
.faq__a { padding-block-end: var(--sp-5); color: var(--fg-muted); max-inline-size: 72ch; }

/* ── 14. الفلاتر ────────────────────────────────────────── */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-block-end: var(--sp-5);
    margin-block-end: var(--sp-6);
    border-block-end: 1px solid var(--line);
}
.filter {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg-muted);
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.filter:hover { border-color: var(--steel-400); color: var(--fg); }
.filter[aria-current="true"] { background: var(--steel-900); border-color: var(--steel-900); color: #fff; }
.filter__n { font-family: var(--font-mono); font-size: 0.8125rem; opacity: .7; font-variant-numeric: tabular-nums; }

.is-hidden { display: none !important; }

.empty {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--fg-faint);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

/* ── 15. صفحة الموديل ───────────────────────────────────── */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
    list-style: none;
    font-size: var(--t-sm);
    color: var(--fg-faint);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--sp-2); color: var(--line); }

.mhero { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 64rem) { .mhero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-7); } }
.mhero__art { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #101720; }
.mhero__art .media { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* بديل يظهر فقط لو أُضيف موديل قبل رفع صورته */
.media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    background: linear-gradient(160deg, #16202B, #0D141B);
}
.media__mark { inline-size: 3.5rem; block-size: 3.5rem; opacity: .55; }

.spec-table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.spec-table th, .spec-table td { padding: var(--sp-3) 0; border-block-end: 1px solid var(--line-soft); text-align: start; vertical-align: baseline; }
.spec-table th {
    inline-size: 40%;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: .01em;
    font-weight: 500;
    color: var(--fg-faint);
}
.spec-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.spec-table thead th { inline-size: auto; border-block-end-width: 2px; border-block-end-color: var(--line); }
.spec-table--wide th, .spec-table--wide td { padding-inline-end: var(--sp-5); white-space: nowrap; }
.spec-table--wide td { font-weight: 500; }
.table-scroll { overflow-x: auto; }

.note {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--signal);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    font-size: var(--t-sm);
    color: var(--fg-muted);
}
.note .ico { color: var(--signal); flex: none; }

/* ── 16. النماذج ────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.field__label { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--t-sm); font-weight: 600; }
.field__hint { font-size: 0.8125rem; color: var(--fg-faint); font-weight: 500; }

.input, .select, .textarea {
    inline-size: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.5;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-400); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent);
}
/* ضمان حلقة تركيز مرئية لمستخدمي لوحة المفاتيح مهما كان دعم المتصفح */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 1px;
}
.textarea { min-block-size: 9rem; resize: vertical; }
.select { appearance: none; padding-inline-end: 2.25rem; background-image: none; }
.select-wrap { position: relative; }
.select-wrap .ico {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.75rem;
    translate: 0 -50%;
    rotate: 90deg;
    pointer-events: none;
    color: var(--fg-faint);
}

.field--err .input, .field--err .select, .field--err .textarea { border-color: var(--bad); }
.field__err { font-size: var(--t-sm); color: var(--bad); }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--t-sm); color: var(--fg-muted); cursor: pointer; }
.check input { inline-size: 1.15rem; block-size: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--signal); flex: none; }

.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 0.9375rem;
}
.alert__title { font-weight: 700; font-family: var(--font-display); }
.alert__body { margin-block-start: var(--sp-1); }
.alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.alert--err { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.alert .ico { flex: none; margin-block-start: 0.15rem; }

.panel {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
@media (min-width: 48rem) { .panel { padding: var(--sp-6); } }

/* ── 17. شريط الدعوة ────────────────────────────────────── */
.cta-band {
    display: grid;
    gap: var(--sp-5);
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
    background: var(--steel-900);
    color: var(--fg-invert);
    border: 1px solid var(--line-dark);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--steel-300); max-inline-size: 54ch; }
@media (min-width: 56rem) {
    .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--sp-7); gap: var(--sp-6); }
}

/* ── 18. التذييل ────────────────────────────────────────── */
.footer {
    background: var(--steel-900);
    color: var(--steel-300);
    border-block-start: 1px solid var(--line-dark);
    font-size: 0.9375rem;
}
.footer__top { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); }
@media (min-width: 56rem) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-6); } }

.footer__title {
    margin-block-end: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--t-sm);
    color: #fff;
    font-weight: 800;
}
.footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: #fff; }
.footer__about { max-inline-size: 40ch; }
.footer__logo { margin-block-end: var(--sp-4); }
.footer .logo__sub { color: var(--steel-400); }
.footer .logo__name { color: #fff; }

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-block: var(--sp-5);
    border-block-start: 1px solid var(--line-dark);
    font-size: var(--t-sm);
    color: var(--steel-400);
}
@media (min-width: 56rem) {
    .footer__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
}

/* ── 19. صفحة 404 ───────────────────────────────────────── */
.e404 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); padding-block: var(--sp-9); }
.e404__code {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 2rem + 6vw, 6rem);
    font-weight: 500;
    color: var(--signal);
    letter-spacing: .06em;
    line-height: 1;
}

/* ── 19b. أدوات مساعدة ──────────────────────────────────── */
.mt-3 { margin-block-start: var(--sp-3); }
.mt-4 { margin-block-start: var(--sp-4); }
.mt-5 { margin-block-start: var(--sp-5); }
.mt-6 { margin-block-start: var(--sp-6); }
.mt-7 { margin-block-start: var(--sp-7); }
.flush { padding-block: 0; }
.pt-0 { padding-block-start: 0; }
.muted { color: var(--fg-faint); }
.h1--md { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack--tight { gap: var(--sp-3); }
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── 20. حركة الظهور ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ── 21. الطباعة الورقية ────────────────────────────────── */
@media print {
    .topbar, .masthead, .footer, .cta-band, .btn, .filters { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 1rem; }
}