
/*
 Steel Axis v1.089 — Premium Home Visual Experience
 تحويل الرئيسية لتجربة بصرية أقوى بدل شكل القوائم فقط.
*/

html.sa-v1089-premium-home .sa-home{
  gap:10px!important;
}

/* هيرو أوسع وأفخم */
html.sa-v1089-premium-home .sa-home-hero{
  min-height:680px!important;
  background:
    linear-gradient(90deg,rgba(2,7,13,.96),rgba(2,7,13,.68) 42%,rgba(2,7,13,.28)),
    radial-gradient(circle at 72% 45%,rgba(0,168,255,.20),transparent 30%),
    url('../assets/visual-v1088/warehouse-clean-v1088.webp') center/cover no-repeat!important;
}

html.sa-v1089-premium-home .sa-titlebox{
  transform-origin:center!important;
}

html.sa-v1089-premium-home .sa-titlebox h1{
  background:linear-gradient(180deg,#fff 0%,#d9f5ff 38%,#72dfff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

html.sa-v1089-premium-home .sa-titlebox p span{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 10px!important;
  border:1px solid rgba(142,234,255,.18)!important;
  background:rgba(3,14,24,.48)!important;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)!important;
}

/* شاشة عرض المنتجات الكبيرة */
.sa-v1089-spotlight{
  width:min(1900px,calc(100% - 18px));
  margin:0 auto 8px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:10px;
}

.sa-v1089-feature{
  position:relative;
  min-height:440px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:22px;
  color:#fff;
  text-decoration:none;
  background:
    linear-gradient(180deg,rgba(2,7,13,.03),rgba(2,7,13,.88)),
    var(--img) center/cover no-repeat;
  border:1px solid rgba(142,234,255,.30);
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px),0 26px);
  box-shadow:0 28px 72px rgba(0,0,0,.45),0 0 54px rgba(0,168,255,.08);
}

.sa-v1089-feature:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.10) 50%,transparent 58% 100%);
  transform:translateX(75%);
  animation:saV1089Sweep 5.6s ease-in-out infinite;
}

.sa-v1089-feature .content{
  position:relative;
  z-index:2;
  max-width:640px;
}

.sa-v1089-feature small{
  display:inline-flex;
  margin-bottom:10px;
  padding:5px 10px;
  color:#06131f;
  background:#8eeaff;
  font-weight:1000;
  border-radius:0;
}

.sa-v1089-feature h2{
  margin:0;
  font-size:clamp(34px,5vw,70px);
  line-height:.95;
  text-shadow:0 8px 30px rgba(0,0,0,.75);
}

.sa-v1089-feature p{
  max-width:560px;
  margin:12px 0 0;
  color:#d9eff9;
  font-weight:900;
  line-height:1.8;
  text-shadow:0 2px 16px rgba(0,0,0,.72);
}

.sa-v1089-stack{
  display:grid;
  gap:10px;
}

.sa-v1089-mini{
  min-height:136px;
  display:flex;
  align-items:flex-end;
  padding:14px;
  color:#fff;
  text-decoration:none;
  background:
    linear-gradient(180deg,rgba(2,7,13,.04),rgba(2,7,13,.74)),
    var(--img) center/cover no-repeat;
  border:1px solid rgba(142,234,255,.24);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  box-shadow:0 18px 42px rgba(0,0,0,.34);
  transition:.22s ease;
}

.sa-v1089-mini:hover,
.sa-v1089-feature:hover{
  transform:translateY(-4px);
  border-color:rgba(142,234,255,.55);
  box-shadow:0 30px 74px rgba(0,0,0,.48),0 0 42px rgba(0,168,255,.12);
}

.sa-v1089-mini b{
  display:block;
  font-size:18px;
  text-shadow:0 3px 18px rgba(0,0,0,.85);
}

.sa-v1089-mini span{
  display:block;
  margin-top:4px;
  color:#cfe8f6;
  font-size:12px;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}

/* شريط منتجات متحرك */
.sa-v1089-motion-strip{
  width:min(1900px,calc(100% - 18px));
  margin:0 auto 8px;
  overflow:hidden;
  padding:12px;
  background:
    linear-gradient(180deg,rgba(12,28,43,.96),rgba(3,10,17,.98));
  border:1px solid rgba(0,168,255,.22);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}

.sa-v1089-motion-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:saV1089Marquee 38s linear infinite;
}

.sa-v1089-motion-strip:hover .sa-v1089-motion-track{
  animation-play-state:paused;
}

.sa-v1089-motion-card{
  width:230px;
  min-height:130px;
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  padding:12px;
  color:#fff;
  text-decoration:none;
  background:
    linear-gradient(180deg,rgba(2,7,13,.06),rgba(2,7,13,.76)),
    var(--img) center/cover no-repeat;
  border:1px solid rgba(142,234,255,.20);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}

.sa-v1089-motion-card b{
  font-size:14px;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}

/* مسار التوريد */
.sa-v1089-flow{
  width:min(1900px,calc(100% - 18px));
  margin:0 auto 8px;
  padding:16px;
  background:
    radial-gradient(circle at 20% 0,rgba(0,168,255,.16),transparent 34%),
    linear-gradient(180deg,rgba(18,40,58,.96),rgba(4,14,23,.98));
  border:1px solid rgba(0,168,255,.26);
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
  box-shadow:0 22px 54px rgba(0,0,0,.36);
}

.sa-v1089-flow-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,168,255,.14);
}

.sa-v1089-flow-head h2{
  margin:0;
  font-size:28px;
}

.sa-v1089-flow-head p{
  margin:5px 0 0;
  color:#b7d3e4;
  font-size:13px;
}

.sa-v1089-flow-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.sa-v1089-step{
  position:relative;
  min-height:132px;
  padding:18px;
  background:
    radial-gradient(circle at 88% 0,rgba(142,234,255,.14),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  border:1px solid rgba(142,234,255,.20);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}

.sa-v1089-step em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:32px;
  margin-bottom:10px;
  color:#06131f;
  background:#8eeaff;
  font-style:normal;
  font-weight:1000;
}

.sa-v1089-step b{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}

.sa-v1089-step span{
  color:#b6d2e4;
  font-size:13px;
  line-height:1.7;
}

/* أخفِ معرض v1088 من الرئيسية لو تكرر */
html.sa-v1089-premium-home .sa-v1088-clean-gallery{
  margin-top:0;
}

/* حركات */
@keyframes saV1089Sweep{
  0%,45%{transform:translateX(75%)}
  65%{transform:translateX(-75%)}
  100%{transform:translateX(-75%)}
}

@keyframes saV1089Marquee{
  from{transform:translateX(0)}
  to{transform:translateX(50%)}
}

@media(max-width:1100px){
  .sa-v1089-spotlight{
    grid-template-columns:1fr;
  }
  .sa-v1089-stack{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sa-v1089-flow-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  html.sa-v1089-premium-home .sa-home-hero{
    min-height:520px!important;
  }
  .sa-v1089-spotlight,
  .sa-v1089-motion-strip,
  .sa-v1089-flow{
    width:calc(100% - 8px);
  }
  .sa-v1089-feature{
    min-height:360px;
    padding:16px;
  }
  .sa-v1089-stack,
  .sa-v1089-flow-grid{
    grid-template-columns:1fr;
  }
  .sa-v1089-motion-track{
    animation-duration:50s;
  }
}
