/* =========================================================
   مصنع بديا - BIDYA FACTORY
   ملف التنسيق الرئيسي للموقع

   FINAL-01
   الهيدر + القسم الرئيسي Hero + شريط المميزات

   ملاحظات:
   - اتجاه الصفحة عربي RTL.
   - التوزيع الفيزيائي للهيدر والـ Hero ثابت حسب التصميم المعتمد.
   - الشعار على اليسار.
   - اختيار اللغة على اليمين.
   - نص الـ Hero على اليسار.
   - صورة الـ Hero على اليمين.
========================================================= */


/* =========================================================
   المتغيرات الرئيسية للموقع
========================================================= */
/* =========================================================
   خط Tajawal
========================================================= */

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/Tajawal-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bidya-primary: #036674;
    --bidya-secondary: #0c4c76;

    /*   لون الكتابة داخل زر شاهد فيديو */
    --bidya-navy: #061724;
    --bidya-navy-light: #082432;

    --bidya-ivory: #f3efe7;
    --bidya-white: #ffffff;

    /* ألوان الهيدر */ 
    --bidya-text-dark: #7db5bd;
    --bidya-text-muted: #53616b;

   /*  ارتفاع الهيدر  */
    --header-height: 100px;

    /* أقصى عرض للتصميم على الشاشات الواسعة أو عند Zoom Out */
    --site-max-width: 1920px;
}


/* =========================================================
   إعادة ضبط العناصر الأساسية
========================================================= */

* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Tajawal", Arial, Tahoma, sans-serif;
    background: var(--bidya-ivory);
    color: var(--bidya-text-dark);
    overflow-x: hidden;
}

img {
    display: block;

    max-width: 100%;
}

a {
    color: inherit;

    text-decoration: none;
}

button {
    font: inherit;
}


/* =========================================================
   الهيدر الرئيسي
========================================================= */

.site-header {
    position: relative;

    z-index: 1000;

    width: 100%;
    max-width: var(--site-max-width);

    margin-inline: auto;

    background:
        linear-gradient(
            90deg,
            #f3efe7 0%,
            #1d4e5a 55%,
            #05131e 100%
        );
}


/*
   الاتجاه الفيزيائي للهيدر LTR حتى نحافظ على:
   الشعار = يسار
   اللغة = يمين

   ثم نعيد RTL للعناصر العربية داخله.
*/

.header-container {
    width: 100%;
    height: var(--header-height);
    padding-inline: clamp(44px, 4.4vw, 84px);
    display: flex;
    align-items: center;
    gap: clamp(28px, 3vw, 54px);
    direction: ltr;
}


/* =========================================================
   شعار مصنع بديا
========================================================= */

.site-logo {
    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin-right: auto;

    direction: rtl;
}

.site-logo img {
    width: clamp(205px, 15vw, 255px);
    height: 88px;
    object-fit: contain;
    object-position: left center;
    transition: transform 260ms ease, filter 260ms ease;
}

/* =========================================================
   القائمة الرئيسية
========================================================= */

.main-navigation {
    height: 100%;

    display: flex;
    align-items: center;

    gap: clamp(12px, 1.45vw, 28px);

    direction: rtl;

    /* إبقاء جميع روابط القائمة في سطر واحد */
    flex-wrap: nowrap;
    white-space: nowrap;
}


/* =========================================================
   روابط القائمة الرئيسية
========================================================= */
.nav-link {
    font-family: "Tajawal", Arial, sans-serif;

    position: relative;
    height: 100%;
    padding-inline: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.88);

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    /* الرابط نفسه يبقى ثابتًا داخل الهيدر */
    perspective: 650px;
}


/* ========================================
   جسم القطعة ثلاثية الأبعاد
   ======================================== */

.nav-cap {
    position: relative;

    min-width: max-content;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform-style: preserve-3d;
    transform-origin: 50% 100%;

    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 320ms ease;

    will-change: transform;
}


/* ========================================
   الوجه الأمامي للقطعة
   ======================================== */

.nav-cap-face {
    position: relative;
    z-index: 2;

    height: 48px;
    padding-inline: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 8px;

    color: inherit;

    backface-visibility: hidden;

    transition:
        color 220ms ease,
        background 320ms ease,
        box-shadow 320ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ========================================
   العمق الموجود خلف الوجه
   ======================================== */

.nav-cap-depth {
    position: absolute;
    z-index: 1;

    inset: 5px 3px 0px;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(47, 131, 173, 0.55),
            rgba(3, 102, 116, 0.22)
        );

    opacity: 0;

    transform:
        translateY(5px)
        translateZ(-14px);

    transition:
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms ease;

    pointer-events: none;
}


/* ========================================
   القطعة الموجودة عليها الماوس
   ======================================== */

.nav-link:hover {
    color: var(--bidya-white);
    z-index: 10;
}


.nav-link:hover .nav-cap {
    transform:
        translateY(-10px)
        translateZ(38px)
        scale(1.13)
        rotateX(-8deg);
}


.nav-link:hover .nav-cap-face {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        0 13px 22px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    transform: translateZ(14px);
}


.nav-link:hover .nav-cap-depth {
    opacity: 1;

    transform:
        translateY(1px)
        translateZ(-14px);

    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.25);
}


/* ========================================
   موجة الحركة للعناصر المجاورة
   ======================================== */

/* العنصر التالي */
.main-navigation > .nav-link:hover + .nav-link .nav-cap {
    transform:
        translateY(-4px)
        translateZ(12px)
        scale(1.045)
        rotateX(-3deg);
}


/* العنصر السابق */
.main-navigation > .nav-link:has(+ .nav-link:hover) .nav-cap {
    transform:
        translateY(-4px)
        translateZ(12px)
        scale(1.045)
        rotateX(-3deg);
}


/* الرابط الموجود بعد المنتجات */
.main-navigation > .nav-dropdown:has(.nav-link:hover) + .nav-link .nav-cap {
    transform:
        translateY(-4px)
        translateZ(12px)
        scale(1.045)
        rotateX(-3deg);
}


/* الرابط الموجود قبل المنتجات */
.main-navigation > .nav-link:has(+ .nav-dropdown .nav-link:hover) .nav-cap {
    transform:
        translateY(-4px)
        translateZ(12px)
        scale(1.045)
        rotateX(-3deg);
}


/* زر المنتجات عندما يكون الرابط المجاور له نشطًا */
.main-navigation > .nav-dropdown:has(+ .nav-link:hover) > .nav-link .nav-cap {
    transform:
        translateY(-4px)
        translateZ(12px)
        scale(1.045)
        rotateX(-3deg);
}

/* رابط الصفحة النشطة */

.nav-link.active {
    color: var(--bidya-white);

    font-weight: 700;
}


/* الخط الموجود أسفل الصفحة النشطة */

.nav-link.active::after {
    content: "";
    position: absolute;
    right: 4px;
    left: 4px;
    bottom: 20px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--bidya-primary), #2f83ad);
}


/* =========================================================
   قائمة المنتجات المنسدلة
========================================================= */

.nav-dropdown {
    position: relative;

    height: 100%;

    display: flex;

    align-items: center;
}

/* =========================================================
   القائمة المنسدلة للمنتجات
========================================================= */

.products-dropdown {
    position: absolute;

    top: calc(100% - 20px);
    right: -14px;

    width: 270px;
    padding: 10px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;

    background: rgba(6, 23, 36, 0.98);

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.30);

    opacity: 0;
    visibility: hidden;

    transform:
        perspective(700px)
        translateY(10px)
        rotateX(-4deg)
        scale(0.985);

    transform-origin: top right;
    transform-style: preserve-3d;

    pointer-events: none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   حالة فتح القائمة
========================================================= */

.products-dropdown.is-open {
    opacity: 1;
    visibility: visible;

    transform:
        perspective(700px)
        translateY(0)
        rotateX(0deg)
        scale(1);

    pointer-events: auto;
}


/* =========================================================
   روابط قائمة المنتجات
========================================================= */

.products-dropdown a {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    min-height: 48px;
    padding: 12px 14px;

    border-radius: 9px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 17px;

    transform:
        perspective(650px)
        translateY(0)
        translateZ(0)
        scale(1)
        rotateX(0deg);

    transform-origin: 50% 100%;
    transform-style: preserve-3d;

    transition:
        color 180ms ease,
        background 260ms ease,
        box-shadow 280ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 260ms ease;

    will-change: transform;
}



/* =========================================================
   العنصر الموجود عليه الماوس
   حركة ثلاثية الأبعاد متساوية من اليمين والشمال
========================================================= */

.products-dropdown a:hover {
    z-index: 10;

    color: var(--bidya-white);

    background:
        linear-gradient(
            180deg,
            rgba(47, 131, 173, 0.34),
            rgba(3, 102, 116, 0.18)
        );

    transform:
        perspective(650px)
        translateX(8)
        translateY(-5px)
        translateZ(24px)
        scaleX(0.90)
        scaleY(0.98)
        rotateX(-5deg);

    transform-origin: center center;

    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* =========================================================
   العنصر الموجود مباشرة بعد العنصر النشط
========================================================= */

.products-dropdown a:hover + a {
    z-index: 4;

    transform:
        perspective(650px)
        translateY(-2px)
        translateZ(10px)
        scale(1.025)
        rotateX(-2deg);
}


/* =========================================================
   العنصر الموجود مباشرة قبل العنصر النشط
========================================================= */

.products-dropdown a:has(+ a:hover) {
    z-index: 4;

    transform:
        perspective(650px)
        translateY(-2px)
        translateZ(10px)
        scale(1.025)
        rotateX(-2deg);
}


/* =========================================================
   تخفيف العناصر البعيدة أثناء الحركة
========================================================= */

.products-dropdown:has(a:hover) a:not(:hover) {
    opacity: 0.72;
}


/* إعادة وضوح العنصرين المجاورين */

.products-dropdown:has(a:hover) a:hover + a,
.products-dropdown:has(a:hover) a:has(+ a:hover) {
    opacity: 0.92;
}


/* =========================================================
   اختيار اللغة
========================================================= */

.language-selector {
    position: relative;

    flex-shrink: 0;

    direction: rtl;
}

.language-button {
    min-width: 128px;
    height: 58px;
    padding-inline: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(255,255,255,.015);
    color: var(--bidya-white);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

/* علم اللغة */

.language-flag {
    width: 28px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.language-flag img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.language-code {
    font-size: 15px;

    letter-spacing: 0.04em;
}


/* قائمة اللغات */

.language-menu {
    position: absolute;

    top: calc(100% + 10px);

    left: 0;

    width: 170px;

    padding: 8px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    background: #071b29;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.28);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    pointer-events: none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}


/* حالة فتح قائمة اللغات */

.language-menu.is-open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}

.language-menu button {
    width: 100%;

    padding: 11px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: var(--bidya-white);

    text-align: right;

    cursor: pointer;
}

.language-menu button:hover {
    background:
        rgba(255, 255, 255, 0.07);
}

.language-menu button img {
    width: 28px;
    height: 20px;
    object-fit: cover;
    flex-shrink: 0;
}


/* =========================================================
   زر قائمة الموبايل

   مخفي على Desktop
========================================================= */

.mobile-menu-button {
    display: none;

    width: 48px;
    height: 48px;

    padding: 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 8px;

    background: transparent;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    margin-block: 5px;

    background: var(--bidya-white);
}

.mobile-navigation {
    display: none;
}


/* =========================================================
   القسم الرئيسي HERO

   على الشاشات الواسعة يبقى القسم كتلة واحدة بحد أقصى ثابت.
   ارتفاع القسم محسوب من عرض عمود الصورة ونسبتها الأصلية
   1601 × 850، لذلك الصورة هي التي تحدد الحافة السفلية.
========================================================= */

.hero {
    position: relative;
    width: 100%;
    max-width: var(--site-max-width);
    height: clamp(520px, 40.4vw, 620px);
    margin-inline: auto;
    display: grid;

    /* مساحة الكتابة | مساحة الصورة */
    grid-template-columns: 40% 60%;

    direction: ltr;
    background: var(--bidya-navy);
    overflow: hidden;
}


/* =========================================================
   الجزء النصي من HERO

   المحتوى يملأ ارتفاع الـ Hero فقط ولا يستطيع زيادة ارتفاعه.
========================================================= */

.hero-content {
    position: relative;
    z-index: 3;
    grid-column: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: clamp(48px,4.2vw,78px) clamp(52px,5.3vw,102px) clamp(82px,6vw,112px);
    direction: rtl;
    background:
        radial-gradient(circle at 28% 45%, rgba(3,102,116,.23), transparent 48%),

        /* الوان مساحة الكتابة  */
        linear-gradient(135deg, #589da7cb 0%, #071d2a 100%);
    overflow: hidden;
}


/* الحاوية الداخلية للنص */

.hero-content-inner {
    width: 100%;
    max-width: 590px;
    margin: 0;
}


/* النص الإنجليزي الصغير */

.hero-eyebrow {
    margin-bottom: 18px;

    direction: ltr;

    color: #b2cccb;

    font-size: 20px;
    font-weight: 500;

    letter-spacing: 0.16em;

    text-align: left;

    transform: translateY(-30px);
}


/* =========================================================
   عنوان HERO
========================================================= */

.hero-title {
    color: var(--bidya-white);
    font-size: clamp(43px, 3.55vw, 44px);
    font-weight: 800;
    line-height: 1.27;
    letter-spacing: -0.02em;
}

/* ========================================
   ضبط عنوان Hero لكل لغة بشكل مستقل
   ======================================== */

/* العربية */
html[lang="ar"] .hero-title {
    font-size: clamp(44px, 3.55vw, 42px);
    line-height: 1.27;
}

/* الإنجليزية */
html[lang="en"] .hero-title {
    font-size: clamp(38px, 2.8vw, 50px);
    line-height: 1.18;
}

/* العبرية */
html[lang="he"] .hero-title {
    font-size: clamp(38px, 2.8vw, 45px);
    line-height: 1.18;
}


/* السطر الثاني الملون */

.hero-title span {
    display: block;

    margin-top: 5px;

    color: #6db1c2;
}


/* الخط الأزرق الصغير */

.hero-title-line {
    width: 50px;
    height: 2px;

    margin-top: 17px;
    margin-bottom: 20px;

    background: #168dbd;
}


/* =========================================================
   وصف HERO
========================================================= */

.hero-description {
    max-width: 540px;
    color: rgba(255,255,255,.84);
    font-size: clamp(15px, 1.08vw, 19px);
    font-weight: 800;
    line-height: 2;
}


/* =========================================================
   أزرار HERO
========================================================= */

.hero-actions {
    margin-top: clamp(22px, 2vw, 38px);

    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;

    /* تنزيل الزرين فقط بدون التأثير على باقي محتوى الهيرو */
    transform: translateY(15px);
}


/* التنسيق المشترك للأزرار */

.button {
    position: relative;
    min-height: 68px;
    padding-inline: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    border-radius: 7px;
    font-size: 17px;
    font-weight: 800;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover {
    transform: translateY(-3px);
}


/* زر شاهد فيديو */

.button-primary {
    min-width: 238px;

    border:
        1px solid
        var(--bidya-ivory);

    background: var(--bidya-ivory);

    color: var(--bidya-navy);
}

.button-primary:hover {
    background: var(--bidya-white);
}


/* زر تعرف على قدراتنا */

.button-outline {
    min-width: 220px;

    border:
        1px solid
        rgba(255, 255, 255, 0.88);

    background: transparent;

    color: var(--bidya-white);
}

.button-outline:hover {
    background:
        rgba(255, 255, 255, 0.07);
}


/* =========================================================
   حاوية صورة القسم الرئيسي
========================================================= */

.hero-image {
    position: relative;
    z-index: 1;
    grid-column: 2;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bidya-navy);
}


/* =========================================================
   صورة القسم الرئيسي

   نسبة الحاوية مطابقة للصورة الأصلية 1601 × 850،
   لذلك تظهر كاملة بدون قص أو تشويه.
========================================================= */

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    max-width: none;
}


/* تدرج بسيط فوق الصورة */

.hero-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(6,23,36,.20) 0%, rgba(6,23,36,.04) 12%, transparent 24%);
}


/* =========================================================
   العنصر الزخرفي في خلفية HERO
========================================================= */

.hero-decoration {
    position: absolute;

    left: -100px;
    bottom: -130px;

    width: 420px;
    height: 420px;

    border:
        1px solid
        rgba(49, 121, 150, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   حاوية شريط المميزات

   الشريط يتداخل بين HERO والقسم التالي.
========================================================= */

.hero-features-wrapper {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: var(--site-max-width);
    margin-inline: auto;
    padding-inline: clamp(46px, 6vw, 118px);
    background: transparent;
}


/* =========================================================
   شريط المميزات
========================================================= */

.hero-features {
    position: relative;
    width: 100%;
    min-height: 120px;
    margin-inline: auto;
    margin-top: -60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    direction: ltr;
    border-radius: 15px;
    background: linear-gradient(110deg, #f7f2ea 0%, #f1ede5 100%);
    box-shadow: 0 20px 50px rgba(6,23,36,.13);
    overflow: hidden;
}


/* =========================================================
   كل ميزة داخل الشريط
========================================================= */

.feature-item {
    position: relative;
    min-width: 0;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    direction: rtl;
    transition: background 180ms ease;
}


/* الخط الفاصل بين المميزات */

.feature-item:not(:first-child)::after {
    content: "";

    position: absolute;

    top: 25px;
    bottom: 25px;

    left: 0;

    width: 1px;

    background:
        rgba(11, 55, 66, 0.438);
}


/* =========================================================
   أيقونة الميزة
========================================================= */

.feature-icon {
    width: 66px;

    min-width: 66px;

    color: #0a2940;
}

.feature-icon svg {
    width: 100%;

    height: auto;
}


/* =========================================================
   نص الميزة
========================================================= */

.feature-content {
    min-width: 0;
}

.feature-content h2 {
    margin-bottom: 8px;

    color: #071a2a;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.5;
}

.feature-content p {
    color: #4e5a62;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   قسم مؤقت مكان FINAL-02

   هذا القسم موجود فقط حتى نرى نهاية FINAL-01
   والفراغ بعد شريط المميزات.

   سيتم حذفه عندما نبدأ بناء أحدث المنتجات FINAL-02.
========================================================= */

.next-section-placeholder {
    min-height: 500px;

    padding:
        115px
        30px
        80px;

    background: var(--bidya-ivory);

    text-align: center;
}

.next-section-placeholder p {
    margin-bottom: 10px;

    color: var(--bidya-primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.15em;
}

.next-section-placeholder h2 {
    color: var(--bidya-navy);

    font-size: 42px;
}

.site-logo:hover img { transform: translateY(-2px); filter: brightness(1.06); }

.language-button:hover {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
}
.nav-dropdown-button svg,
.language-button svg { transition: transform 180ms ease; }
.nav-dropdown-button[aria-expanded="true"] svg,
.language-button[aria-expanded="true"] svg { transform: rotate(180deg); }

.feature-item:hover { background: rgba(255,255,255,.38); }
.feature-item:hover .feature-icon { transform: translateY(-3px) scale(1.035); color: var(--bidya-primary); }
.feature-icon { transition: transform 220ms ease, color 180ms ease; }