/* ============================================================
   ورشة الفارس المتنقلة - style.css
   Transparent Glass + Yellow/Black + Visible Cover Background
   ============================================================ */

/* ===== المتغيرات ===== */
:root{
  --y:#FFC107;
  --b:#0a0a0a;
  --c:#161616;
  --l:#2b2b2b;
  --t:#ffffff;
  --m:#b8b8b8;

  /* ألوان الزجاج الشفاف */
  --glass-bg:rgba(22,22,22,.58);
  --glass-bg-hover:rgba(22,22,22,.7);
  --glass-border:rgba(255,255,255,.12);
  --glass-border-strong:rgba(255,255,255,.2);
  --glass-shadow:0 8px 32px rgba(0,0,0,.3);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.08);
  --glass-blur:blur(14px) saturate(140%);

  --txt-shadow:none;
}

/* ===== إعادة التعيين ===== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
}

/* ===== الخلفية العامة ===== */
body{
  font-family:Cairo,sans-serif;
  color:var(--t);
  line-height:1.7;
  padding-bottom:96px;
  animation:fi .7s both;
  overflow-x:clip;
  overscroll-behavior-y:none;
  background:var(--b);
  position:relative;
  text-shadow:var(--txt-shadow);
}
@keyframes fi{from{opacity:0}}

/* الخلفية الثابتة */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.66)),
    url(../images/cover4.jpeg) center/cover no-repeat;
  pointer-events:none;
}

a{color:inherit;text-decoration:none}
.w{max-width:1100px;margin:auto;padding:0 16px}

/* ============================================================
   زجاجية موحدة (Glassmorphism)
   ============================================================ */
.top,
.bn,
footer,
.tile,
.card,
.row,
.ct,
.det,
.ck li,
details.q,
input,
textarea,
.tag,
.live,
.snd{
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}

/* ===== الهيدر ===== */
.top{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,10,10,.6);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  padding-top:env(safe-area-inset-top);
}
.top .w{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--y);font-size:1.1rem}
.brand img{height:38px}
.dn{display:none;gap:26px}
.dn a{font-weight:600;color:var(--m);transition:.2s}
.dn a.on,.dn a:hover{color:var(--y)}
.ci{
  width:42px;height:42px;border-radius:50%;
  background:var(--y);color:#000;
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(255,193,7,.4);
  text-shadow:none;
}

/* ===== الأزرار ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:14px;
  font:700 1rem Cairo;
  border:2px solid var(--y);
  cursor:pointer;
  transition:.2s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn:active{transform:scale(.96)}
.btn.p{background:var(--y);color:#000;text-shadow:none}
.btn.o{color:var(--y);background:rgba(0,0,0,.35)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btns .btn{flex:1;min-width:150px}

/* ===== الهيرو ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:44px 0 52px;
  background:radial-gradient(circle at 80% 0,rgba(255,193,7,.14),transparent 55%);
}
.gear{
  position:absolute;
  left:-60px;
  bottom:-60px;
  font-size:15rem;
  color:rgba(255,193,7,.07);
  animation:sp 40s linear infinite;
  pointer-events:none;
}
@keyframes sp{to{transform:rotate(360deg)}}

.tag{
  display:inline-block;
  border:1px solid var(--y);
  color:var(--y);
  padding:6px 16px;
  border-radius:30px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:16px;
  background:rgba(0,0,0,.4);
}

h1{font-size:2.1rem;line-height:1.35;font-weight:900;margin-bottom:12px}
h1 b{color:var(--y)}
.hero p{color:var(--m);max-width:520px;margin-bottom:24px}

.st{height:10px;background:repeating-linear-gradient(45deg,var(--y) 0 14px,#000 14px 28px)}

/* ============================================================
   فيديو الهيرو
   ============================================================ */
.vh{
  position:relative;
  height:74vh;
  min-height:430px;
  max-height:780px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#2e2300,#000);
}
.vh video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.vh:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.4),transparent 35%,rgba(10,10,10,.9));
  pointer-events:none;
  z-index:1;
}
.vt{
  position:absolute;
  z-index:3;
  bottom:28px;
  right:0;
  left:0;
}
.vt .w{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}

.live{
  background:rgba(0,0,0,.55);
  border:1px solid var(--y);
  padding:8px 16px;
  border-radius:30px;
  font-weight:700;
  font-size:.9rem;
}
.live:before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--y);
  margin-left:8px;
  animation:bk 1.2s infinite;
}
@keyframes bk{50%{opacity:.2}}

.snd{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--y);
  background:rgba(0,0,0,.55);
  color:var(--y);
  font-size:1.1rem;
  cursor:pointer;
  transition:.2s;
  flex:none;
}
.snd:hover{background:rgba(255,193,7,.22)}

/* ============================================================
   الأقسام والعناوين
   ============================================================ */
.sec{padding:40px 0}
h2{font-size:1.5rem;font-weight:900;margin-bottom:6px}
h2:before{
  content:"";
  display:inline-block;
  width:6px;
  height:1.2em;
  background:var(--y);
  border-radius:4px;
  margin-left:10px;
  vertical-align:-4px;
}
.sub{color:var(--m);margin-bottom:22px}

/* ===== الشبكات ===== */
.g{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.list{display:grid;gap:12px}

/* ============================================================
   البطاقات الزجاجية الأساسية
   ============================================================ */
.tile,
.card,
.row,
.ct,
.det,
.ck li,
details.q{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),var(--glass-inset);
  border-radius:20px;
  padding:18px;
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;
  position:relative;
}

.tile{text-align:center}

/* تأثير hover ضوئي */
.tile:hover,
.row:hover,
.card:hover,
.ct:hover{
  border-color:var(--y);
  transform:translateY(-3px);
  background:
    radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,193,7,.28),transparent 70%),
    var(--glass-bg-hover);
  box-shadow:0 14px 40px rgba(255,193,7,.2),var(--glass-inset);
}

.tile i,
.row .ic{font-size:1.7rem;color:var(--y)}
.tile h3{margin:8px 0 2px;font-size:1.05rem}
.tile small,.pr{color:var(--y);font-weight:700;font-size:.85rem}

.tile i{
  width:62px;
  height:62px;
  border-radius:20px;
  background:rgba(255,193,7,.14);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  margin:0 auto;
  transition:.4s;
}
.tile:hover i{background:var(--y);color:#000;transform:rotate(-8deg) scale(1.12)}

/* القوائم */
.row{display:flex;align-items:center;gap:14px;padding:16px}
.row .ic{
  width:54px;
  height:54px;
  border-radius:16px;
  background:rgba(255,193,7,.14);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  flex:none;
}
.row div{flex:1}
.row h3{font-size:1.05rem}
.row p{color:var(--m);font-size:.88rem;line-height:1.5}
.row>i{color:var(--y)}

.card h3{color:var(--y);margin:8px 0 4px}
.card p{color:var(--m);font-size:.92rem}
.card>i{font-size:1.6rem;color:var(--y)}

.num{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--y);
  color:#000;
  font-weight:900;
  display:grid;
  place-items:center;
  animation:pl 2.4s infinite;
  text-shadow:none;
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  background:linear-gradient(120deg,rgba(255,193,7,.88),rgba(255,224,122,.88),rgba(255,193,7,.88));
  background-size:200%;
  animation:sh 6s linear infinite;
  color:#000;
  border-radius:24px;
  padding:28px 20px;
  text-align:center;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 40px rgba(255,193,7,.3),var(--glass-inset);
  text-shadow:none;
}
.cta h2:before{display:none}
.cta h2{background:none;color:#000;animation:none}
.cta p{margin-bottom:16px}
.cta .btn{border-color:#000;background:#000;color:var(--y)}
.cta .btn.o{background:transparent;color:#000;border-color:#000}

/* ============================================================
   التفاصيل
   ============================================================ */
.det{
  border:1px solid var(--y);
  border-radius:24px;
  padding:24px;
  text-align:center;
  margin-bottom:20px;
}
.det .big{font-size:3rem;color:var(--y)}
.det .pr{font-size:1.5rem}

.ck{list-style:none;display:grid;gap:10px;margin:14px 0}
.ck li{border-radius:14px;padding:12px 14px}
.ck i{color:var(--y);margin-left:10px}

.note{
  border-right:4px solid var(--y);
  background:rgba(255,193,7,.1);
  padding:12px 14px;
  border-radius:10px;
  margin:14px 0;
  color:var(--m);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ============================================================
   النماذج
   ============================================================ */
form{display:grid;gap:12px}
input,
textarea{
  width:100%;
  background:rgba(20,20,20,.6);
  border:1px solid var(--glass-border);
  color:var(--t);
  padding:13px 14px;
  border-radius:14px;
  font:1rem Cairo;
  text-shadow:none;
  box-shadow:var(--glass-inset);
}
input:focus,textarea:focus{outline:0;border-color:var(--y);background:rgba(255,255,255,.12)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.6)}

/* ============================================================
   الفوتر
   ============================================================ */
footer{
  border-top:1px solid var(--glass-border);
  padding:22px 0;
  text-align:center;
  color:var(--m);
  font-size:.85rem;
  background:rgba(0,0,0,.55);
}
footer b{color:var(--y)}

/* ============================================================
   الشريط السفلي للموبايل
   ============================================================ */
.bn{
  position:fixed;
  bottom:0;
  right:0;
  left:0;
  z-index:60;
  background:rgba(12,12,12,.68);
  border-top:1px solid var(--glass-border-strong);
  box-shadow:0 -6px 24px rgba(0,0,0,.3),var(--glass-inset);
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;
}
.bn a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:.72rem;
  color:var(--m);
  font-weight:600;
  flex:1;
}
.bn a i{font-size:1.25rem}
.bn a.on{color:var(--y)}
.bn a.mid{
  flex:none;
  width:62px;
  height:62px;
  margin-top:-34px;
  border-radius:50%;
  background:var(--y);
  color:#000;
  justify-content:center;
  border:5px solid rgba(255,255,255,.18);
  animation:pl 2s infinite;
  position:relative;
  text-shadow:none;
}
.bn a.mid i{font-size:1.7rem}
.bn a.mid:after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:2px solid var(--y);
  animation:rg 2s ease-out infinite;
}
@keyframes pl{
  0%{box-shadow:0 0 0 0 rgba(255,193,7,.6)}
  70%{box-shadow:0 0 0 14px rgba(255,193,7,0)}
}
@keyframes rg{
  from{transform:scale(.95);opacity:.9}
  to{transform:scale(1.4);opacity:0}
}

/* ===== FAB ===== */
.fab{display:none}

/* ===== الأنيميشن عند التمرير ===== */
.rv{
  opacity:0;
  transform:translateY(30px) scale(.97);
  transition:.6s;
}
.rv.in{opacity:1;transform:none}

/* ===== شريط التحميل ===== */
.pb{
  position:fixed;
  top:0;
  right:0;
  height:3px;
  width:0;
  background:var(--y);
  z-index:99;
  box-shadow:0 0 12px var(--y);
}

/* ============================================================
   النصوص المتدرجة والأنيميشن
   ============================================================ */
.hero h1 b,
.cta h2{
  background:linear-gradient(90deg,var(--y),#fff0a6,var(--y));
  background-size:200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:sh 3s linear infinite;
}
.hero h1 b{text-shadow:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@keyframes sh{to{background-position:-200% 0}}

.hero .tag{animation:fl 3s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-6px)}}

/* ============================================================
   الشريط المتحرك (Marquee)
   ============================================================ */
.mq{
  overflow:hidden;
  background:var(--y);
  color:#000;
  font-weight:900;
  font-size:1.1rem;
  padding:12px 0;
  transform:rotate(-1.5deg);
  margin:22px 0;
  direction:ltr;
  text-shadow:none;
}
.mq div{
  display:flex;
  gap:34px;
  width:max-content;
  animation:mq 28s linear infinite;
  white-space:nowrap;
}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============================================================
   قسم الإحصائيات
   ============================================================ */
.cs{
  background:linear-gradient(transparent,rgba(255,193,7,.1),transparent);
}
.ct{
  text-align:center;
  padding:22px 8px;
  border-radius:24px;
}
.ct i{color:var(--y);font-size:1.5rem}
.ct b{
  display:block;
  font-size:2.7rem;
  font-weight:900;
  color:var(--y);
  line-height:1.2;
  text-shadow:0 0 24px rgba(255,193,7,.5),0 2px 4px rgba(0,0,0,.5);
}
.ct span{color:var(--m)}

/* ============================================================
   الأسئلة الشائعة
   ============================================================ */
details.q{
  border-radius:18px;
  margin-bottom:10px;
  transition:.3s;
}
details.q[open]{border-color:var(--y)}
.q summary{
  list-style:none;
  cursor:pointer;
  padding:16px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.q summary::-webkit-details-marker{display:none}
.q summary:after{
  content:"+";
  color:var(--y);
  font-size:1.6rem;
  line-height:1;
  transition:.3s;
}
.q[open] summary:after{transform:rotate(135deg)}
.q p{
  padding:0 16px 16px;
  color:var(--m);
  animation:dn .4s;
}
@keyframes dn{from{opacity:0;transform:translateY(-8px)}}

/* ============================================================
   نموذج الطلب المخفي
   ============================================================ */
.of{display:none;margin-top:22px}
.of.open{display:grid;gap:12px;animation:dn .4s}
.of label{display:grid;gap:4px;color:var(--m);font-size:.9rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ============================================================
   صور الخدمات (Tiles) - بنسبة 16:9
   ============================================================ */
.dn{display:none !important}

.tile{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px;
}

.tile-img{
  width:100%;
  aspect-ratio:16 / 9;
  margin:0 auto 12px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
  position:relative;
  transition:border-color .3s,box-shadow .3s;
}

.tile-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .4s ease;
}

.tile:hover .tile-img{
  border-color:var(--y);
  box-shadow:0 8px 24px rgba(255,193,7,.28);
}
.tile:hover .tile-img img{
  transform:scale(1.06);
}

/* ضبط نصوص البطاقة مع الصور */
.tile h3{
  font-size:.98rem;
  margin:4px 0 2px;
  text-align:center;
  line-height:1.3;
}
.tile small{
  font-size:.8rem;
}

/* ============================================================
   Media Queries
   ============================================================ */
@media(min-width:800px){
  body{padding-bottom:0}
  .bn{display:none}
  .dn{display:flex}
  .ci{display:none}
  .fab{
    display:grid;
    position:fixed;
    bottom:24px;
    left:24px;
    z-index:60;
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--y);
    color:#000;
    place-items:center;
    font-size:1.8rem;
    animation:pl 2s infinite;
  }
  h1{font-size:3.2rem}
  .hero{padding:90px 0}
  .g{grid-template-columns:repeat(3,1fr)}
  .g.f{grid-template-columns:repeat(4,1fr)}
  .list{grid-template-columns:1fr 1fr}
  .ck{grid-template-columns:1fr 1fr}
  .pg{max-width:760px;margin:auto}
  .vh{height:80vh}
}

@media(max-width:799px){
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .bn{
    display:grid;
    grid-template-columns:1fr 1fr 84px 1fr 1fr;
    align-items:center;
    height:calc(66px + env(safe-area-inset-bottom));
    padding:0 4px env(safe-area-inset-bottom);
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    will-change:transform;
    contain:layout;
  }
  .bn a{flex:none;height:100%;justify-content:center;gap:2px;white-space:nowrap}
  .bn a.mid{
    align-self:start;
    width:62px;
    height:62px;
    margin:-26px auto 0;
    animation:none;
    position:relative;
    box-shadow:0 6px 20px rgba(255,193,7,.5);
  }

  /* شبكة الخدمات على الموبايل - عمودين */
  .g{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .tile{
    padding:10px;
  }
  .tile-img{
    border-radius:12px;
    margin-bottom:10px;
  }
  .tile h3{
    font-size:.88rem;
  }
  .tile small{
    font-size:.74rem;
  }
}

@media(max-width:380px){
  .g{grid-template-columns:1fr}
  .tile-img{aspect-ratio:16 / 9}
}

/* ============================================================
   Fallback: متصفحات لا تدعم backdrop-filter
   ============================================================ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top,.bn,footer,.tile,.card,.row,.ct,.det,.ck li,details.q,input,textarea{
    background:rgba(22,22,22,.7);
  }
}