@tailwind base;
@tailwind components;
@tailwind utilities;

/* --------------------------------------------------------------------------------
| BASE LAYER
| تم تصحيح الأقواس المتعرجة المفقودة حول محددات H1-H4
-------------------------------------------------------------------------------- */
@layer base {
  /* أنماط الجسم الأساسية */
  body {
    font-family: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif;
    @apply text-[17px] leading-[1.9];
  }

  /* تطبيق كلاسات الشاشات الكبيرة (lg) على الجسم */
  @screen lg {
    body {
      @apply text-[18px];
    }
  }

  /* أنماط العناوين الأساسية */
  h1 {
    /* تم التأكد من وجود الأقواس هنا */
    font-size: 2.4rem;
  }
  h2 {
    /* تم التأكد من وجود الأقواس هنا */
    font-size: 1.9rem;
  }
  h3 {
    /* تم التأكد من وجود الأقواس هنا */
    font-size: 1.4rem;
  }
  h4 {
    /* تم التأكد من وجود الأقواس هنا */
    font-size: 1.1rem;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    /* تم التأكد من وجود الأقواس هنا */
    font-family: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
  }

  /* تفعيل وضع الألوان الداكن/الفاتح */
  body.theme-dark {
    @apply bg-slate-950 text-slate-100;
  }

  body.theme-light {
    @apply bg-slate-50 text-slate-900;
  }
}

/* --------------------------------------------------------------------------------
| COMPONENTS LAYER
-------------------------------------------------------------------------------- */
@layer components {
  /* 1. site-nav (شريط التنقل) */
  .site-nav {
    @apply bg-white/90 text-slate-900 shadow-lg;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 999px;
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .site-nav {
    background: rgba(15, 23, 42, 0.95); /* slate-900 */
    border: 1px solid rgba(51, 65, 85, 0.9); /* slate-700 */
    color: #e5e7eb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
  }

  body.theme-light .site-nav {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 1); /* slate-200 */
    color: #0f172a;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  }

  .nav-links a {
    @apply text-slate-900;
  }

  body.theme-dark .nav-links a {
    @apply text-slate-100;
  }

  .mobile-nav-panel {
    @apply bg-white/95 text-slate-900 shadow-lg;
  }

  body.theme-dark .mobile-nav-panel {
    @apply bg-slate-900/95 text-slate-100;
  }

  .theme-toggle-btn {
    @apply border-slate-300/70 bg-slate-100/80 text-slate-900 text-xs font-semibold;
  }

  .theme-toggle-btn:hover {
    @apply bg-white border-[#ea7725] text-slate-900;
  }

  body.theme-dark .theme-toggle-btn {
    @apply border-slate-600 bg-slate-900/80 text-slate-100;
  }

  body.theme-dark .theme-toggle-btn:hover {
    @apply bg-slate-800 border-[#ea7725] text-slate-100;
  }

  /* 2. site-footer (الفوتر) */
  .site-footer {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  /* Footer – Dark Mode */
  body.theme-dark .site-footer {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
  }

  /* Footer – Light Mode - (تم إزالة الظل) */
  body.theme-light .site-footer {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  /* عناوين الأعمدة */
  .footer-title {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #e5e7eb;
  }

  body.theme-light .footer-title {
    color: #0f172a;
  }

  /* روابط الفوتر */
  .footer-link {
    font-size: 0.9rem;
    color: #e5e7eb;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  body.theme-light .footer-link {
    color: #0f172a;
  }

  .footer-link:hover {
    color: #ea7725;
  }

  /* نصوص خفيفة */
  .footer-muted {
    color: #9ca3af; /* slate-400 */
  }

  body.theme-light .footer-muted {
    color: #6b7280; /* slate-500 */
  }

  /* نص بارز */
  .footer-strong {
    color: #f9fafb;
  }

  body.theme-light .footer-strong {
    color: #0f172a;
  }

  /* خط فاصل سفلي */
  .footer-bottom-border {
    border-top: 1px solid rgba(148, 163, 184, 0.45);
  }

  body.theme-light .footer-bottom-border {
    border-top-color: rgba(148, 163, 184, 0.5);
  }

  /* أزرار السوشال */
  .footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 999px;
    background: transparent;
    transition: background 0.2s ease, transform 0.1s ease;
  }

  body.theme-dark .footer-social-btn {
    background: rgba(15, 23, 42, 0.9);
  }

  body.theme-light .footer-social-btn {
    background: rgba(15, 23, 42, 0.9); /* slate-50 */
  }

  .footer-social-btn:hover {
    background: rgba(234, 119, 37, 0.14);
    transform: translateY(-1px);
  }

  /* HERO SECTION - (تم إزالة الظل) */
  .theme-hero {
    @apply relative overflow-hidden pt-28 pb-20 transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-hero {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
  }

  body.theme-light .theme-hero {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  body.theme-dark .hero-title,
  body.theme-dark .hero-subtitle {
    @apply text-slate-100;
  }

  body.theme-light .hero-title {
    @apply text-slate-900;
  }

  body.theme-light .hero-subtitle {
    @apply text-slate-600;
  }

  body.theme-light .hero-secondary-btn {
    @apply border-slate-300 text-slate-900;
  }

  body.theme-dark .hero-secondary-btn {
    @apply border-white/30 text-slate-100;
  }

  /* SERVICES SECTION - (تم إزالة الظل) */
  .theme-services {
    @apply transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-services {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.4);
    color: #e5e7eb;
  }

  body.theme-light .theme-services {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  body.theme-dark .section-title {
    @apply text-slate-50;
  }

  body.theme-light .section-title {
    @apply text-slate-900;
  }

  body.theme-dark .section-subtitle {
    @apply text-slate-300;
  }

  body.theme-light .section-subtitle {
    @apply text-slate-600;
  }

  /* SYSTEMS SECTION - (تم إزالة الظل) */
  .theme-systems {
    @apply transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-systems {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.4);
    color: #e5e7eb;
  }

  body.theme-light .theme-systems {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  /* CTA SECTION - (تم إزالة الظل) */
  .theme-cta {
    @apply transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-cta {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.4);
    color: #e5e7eb;
  }

  body.theme-light .theme-cta {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  /* FAQ SECTION - (تم إزالة الظل) */
  .theme-faq {
    @apply transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-faq {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.4);
    color: #e5e7eb;
  }

  body.theme-light .theme-faq {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  body.theme-dark .faq-title {
    @apply text-slate-50;
  }

  body.theme-light .faq-title {
    @apply text-slate-900;
  }

  body.theme-dark .faq-subtitle {
    @apply text-slate-300;
  }

  body.theme-light .faq-subtitle {
    @apply text-slate-600;
  }

  /* CONTACT SECTION - (تم إزالة الظل) */
  .theme-contact {
    @apply transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-contact {
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.4);
    color: #e5e7eb;
  }

  body.theme-light .theme-contact {
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* تم الإزالة */
    color: #0f172a;
  }

  body.theme-dark .contact-title {
    @apply text-slate-50;
  }

  body.theme-light .contact-title {
    @apply text-slate-900;
  }

  body.theme-dark .contact-subtitle {
    @apply text-slate-300;
  }

  body.theme-light .contact-subtitle {
    @apply text-slate-600;
  }

  /* بطاقات الخدمات (service-card) */
  .service-card {
    @apply relative rounded-3xl border shadow-lg hover:shadow-xl transition-all duration-300;
  }

  body.theme-dark .service-card {
    @apply bg-[#001d4d] border-[#00306d];
  }

  body.theme-light .service-card {
    @apply bg-white border-slate-200;
  }

  body.theme-dark .service-title {
    @apply text-slate-50;
  }

  body.theme-dark .service-text {
    @apply text-slate-300;
  }

  body.theme-light .service-title {
    @apply text-slate-900;
  }

  body.theme-light .service-text {
    @apply text-slate-600;
  }

  /* حركة النقطة */
  @keyframes moveDot {
    0%,
    100% {
      top: 10%;
      right: 10%;
    }
    25% {
      top: 10%;
      right: calc(100% - 1rem);
    }
    50% {
      top: calc(100% - 1rem);
      right: calc(100% - 1rem);
    }
    75% {
      top: calc(100% - 1rem);
      right: 10%;
    }
  }

  .animate-dot {
    animation: moveDot 6s linear infinite;
  }

  /* بطاقات الأنظمة */
  .systems-section {
    @apply relative overflow-hidden;
    min-height: 100svh;
  }

  .systems-layout {
    @apply relative grid gap-10 items-center justify-center;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    min-height: 100svh;
  }

  @media (max-width: 1024px) {
    .systems-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .systems-hero {
    @apply relative z-[2];
  }

  .systems-eyebrow {
    @apply inline-block px-3 py-1 rounded-full border text-xs font-semibold tracking-[0.2em];
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(226, 232, 240, 0.85);
    backdrop-filter: blur(3px);
  }

  .systems-title {
    @apply mt-3 mb-2 font-bold;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
  }

  .systems-desc {
    @apply mt-2;
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    max-width: 46ch;
  }

  body.theme-dark .systems-title {
    @apply text-slate-50;
  }
  body.theme-light .systems-title {
    @apply text-slate-900;
  }
  body.theme-dark .systems-desc {
    @apply text-slate-300;
  }
  body.theme-light .systems-desc {
    @apply text-slate-600;
  }

  .systems-art {
    @apply relative z-[2] flex justify-center lg:justify-end;
  }

  .systems-rocketWrap {
    position: relative;
    width: clamp(220px, 40vw, 420px);
    filter: drop-shadow(0 12px 36px rgba(99, 210, 255, 0.25))
      drop-shadow(0 0 30px rgba(143, 255, 255, 0.12));
  }

  .systems-rocketGlow {
    position: absolute;
    inset: -10% -5% auto auto;
    width: 120%;
    height: 120%;
    translate: 8% -4%;
    pointer-events: none;
    background: radial-gradient(
        60% 60% at 40% 35%,
        rgba(99, 210, 255, 0.35),
        transparent 60%
      ),
      radial-gradient(
        45% 45% at 60% 60%,
        rgba(154, 247, 255, 0.25),
        transparent 70%
      );
    filter: blur(30px);
    z-index: -1;
    opacity: 0.85;
    animation: systemsGlowPulse 2.2s ease-in-out infinite alternate;
  }

  @keyframes systemsGlowPulse {
    from {
      opacity: 0.65;
      filter: blur(26px);
    }
    to {
      opacity: 0.95;
      filter: blur(34px);
    }
  }

  /* طبقة الكروت للـ GSAP */
  .systems-cardsLayer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }

  .systems-card {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(320px, 82vw);
    height: 310px;
    pointer-events: auto;
  }

  /* نخلي الـ group يأخذ مساحة الكرت */
  .systems-card .group {
    @apply w-full h-full;
  }

  .system-card-front {
    @apply absolute inset-0 rounded-3xl p-6 flex flex-col items-center justify-center space-y-3
      shadow-xl border transition-colors duration-300 [backface-visibility:hidden];
  }

  body.theme-dark .system-card-front {
    @apply bg-[#001d4d] text-slate-50 border-slate-900/60;
  }

  body.theme-light .system-card-front {
    @apply bg-white text-slate-900 border-slate-200;
  }

  .system-card-back {
    @apply absolute inset-0 rounded-3xl p-6 flex flex-col justify-center text-center space-y-4
      shadow-xl border transition-colors duration-300
      [transform:rotateY(180deg)] [backface-visibility:hidden];
  }

  body.theme-dark .system-card-back {
    @apply bg-[#ea7725] text-white border-[#ea7725]/60;
  }

  body.theme-light .system-card-back {
    @apply bg-[#ea7725] text-slate-900 border-[#ea7725]/60;
  }

  /* FAQ CARDS */
  .faq-card {
    @apply text-xs font-semibold rounded-2xl border overflow-hidden transition-colors duration-300;
  }

  body.theme-dark .faq-card {
    @apply bg-slate-950 border-slate-700;
  }

  body.theme-light .faq-card {
    @apply bg-white border-slate-200;
  }

  body.theme-dark .faq-card button {
    @apply text-slate-50;
  }

  body.theme-light .faq-card button {
    @apply text-slate-900;
  }

  body.theme-dark .faq-card .faq-answer {
    @apply text-slate-200 border-slate-700;
  }

  body.theme-light .faq-card .faq-answer {
    @apply text-slate-600 border-slate-200;
  }

  /* CONTACT CARDS */
  .contact-card {
    @apply rounded-2xl p-4 text-center shadow-sm border transition-colors duration-300;
  }

  body.theme-dark .contact-card {
    @apply bg-slate-900 border-slate-700;
  }

  body.theme-light .contact-card {
    @apply bg-white border-slate-200;
  }

  body.theme-dark .contact-card p {
    @apply text-slate-100;
  }

  body.theme-dark .contact-card span {
    @apply text-slate-400;
  }

  body.theme-light .contact-card p {
    @apply text-slate-700;
  }

  body.theme-light .contact-card span {
    @apply text-slate-500;
  }

  /* زر واتساب العائم */
  .mg-float {
    @apply fixed bottom-5 left-7 w-[60px] h-[60px] rounded-full text-center text-[30px] shadow-md z-[100];
    background-color: #25d366;
    animation: 2s infinite bounceIn;
  }

  /* =============================================
  SCROLL ANIMATION CLASSES
  ============================================= */
  .scroll-in-from-bottom {
    @apply opacity-0 translate-y-8 transition-all duration-1000 ease-out;
  }

  .scroll-in-from-bottom-visible {
    @apply opacity-100 translate-y-0;
  }

  .scroll-animate {
    @apply opacity-0 translate-y-6 transition-all duration-700 ease-out;
  }

  .scroll-animate-visible {
    @apply opacity-100 translate-y-0;
  }
}

/* أنيميشن للواتساب */
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
/* --------------------------------------------------------------------------------
| ABOUT SECTION - (قسم من نحن)
-------------------------------------------------------------------------------- */
@layer components {
  /* ... الكلاسات السابقة تبقى كما هي ... */

  /* إضافة قسم من نحن (About) */
  .theme-about {
    @apply transition-colors duration-300;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease, color 0.25s ease;
  }

  body.theme-dark .theme-about {
    /* تطبيق نفس خلفية الوضع الداكن (Deep Blue Gradient) */
    background: radial-gradient(
      circle at top,
      #020617,
      #020617 35%,
      #020617 80%
    );
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.4);
    color: #e5e7eb; /* نص فاتح */
  }

  body.theme-light .theme-about {
    /* تطبيق نفس خلفية الوضع الفاتح (Slate-50 Solid) */
    @apply bg-slate-50; /* لون صلب */
    box-shadow: none; /* إزالة الظل */
    color: #0f172a; /* نص داكن */
  }

  /* أنماط البطاقات/القصص داخل قسم من نحن */
  .about-card {
    @apply relative rounded-3xl p-8 border shadow-lg transition-all duration-300;
  }

  body.theme-dark .about-card {
    /* نفس نمط بطاقات الخدمات الداكنة (Dark Blue) */
    @apply bg-[#001d4d] border-[#00306d] text-slate-50;
  }

  body.theme-light .about-card {
    /* نفس نمط بطاقات الخدمات الفاتحة (White) */
    @apply bg-white border-slate-200 text-slate-900;
  }

  /* أنماط العنوان الفرعي (مثل عنوان المهمة/الرؤية) */
  .about-subtitle {
    @apply text-lg font-semibold mb-3;
  }

  body.theme-dark .about-subtitle {
    @apply text-slate-50;
  }

  body.theme-light .about-subtitle {
    @apply text-slate-900;
  }

  /* أنماط النص العادي */
  .about-text {
    @apply text-base;
  }

  body.theme-dark .about-text {
    @apply text-slate-300;
  }

  body.theme-light .about-text {
    @apply text-slate-600;
  }
}