/*
Theme Name: SPOMEXA Ultimate
Theme URI: https://spomexa.com
Author: SPOMEXA Newsroom
Author URI: https://spomexa.com
Description: منصة الذكاء الرياضي العالمي — تحليل فني، إحصاءات حية، أخبار من 148 دولة. هوية كونية: فضاء عميق + ذهب حي + أخضر ميدان + نيون تقني. RTL بالكامل.
Version: 4.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spomexa
Tags: rtl-language, arabic, news, magazine, sports, dark, custom-colors, custom-menu, featured-images, responsive-layout, full-width-template
*/

/* ================================================================
   SPOMEXA ULTIMATE — منصة الذكاء الرياضي العالمي
   الهوية: ليل عميق + ذهب حي + أخضر ميدان + نيون تقني
   ================================================================ */
:root{
  /* --- الخلفيات --- */
  --void:#050810;        /* فضاء ما وراء الملعب */
  --deep:#080D1A;        /* خلفية أساسية */
  --layer1:#0C1222;      /* طبقة أولى */
  --layer2:#111A30;      /* طبقة ثانية */
  --layer3:#172040;      /* طبقة ثالثة */

  /* --- الألوان الحية --- */
  --gold:#F0C040;        /* ذهب الكأس */
  --gold2:#D4A020;
  --gold-glow:rgba(240,192,64,.18);
  --gold-line:rgba(240,192,64,.22);

  --green:#00FF88;       /* نيون الميدان */
  --green2:#00CC6A;
  --green-glow:rgba(0,255,136,.12);

  --cyan:#00CFFF;        /* أزرق التقنية */
  --cyan-glow:rgba(0,207,255,.12);

  --red:#FF3B5C;         /* أحمر الخطر / LIVE */
  --red-glow:rgba(255,59,92,.15);

  --purple:#8B5CF6;      /* بنفسجي التحليل */

  /* --- النصوص --- */
  --white:#F0F4FF;
  --white2:rgba(240,244,255,.7);
  --white3:rgba(240,244,255,.4);
  --white4:rgba(240,244,255,.15);

  --font-display:'Changa',sans-serif;
  --font-body:'IBM Plex Sans Arabic',sans-serif;
  --font-mono:'Space Grotesk',monospace;
  --maxw:1380px;
  --r:6px;
}

/* --- Reset --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--deep);color:var(--white);font-family:var(--font-body);font-weight:300;line-height:1.7;overflow-x:hidden}
::selection{background:var(--gold);color:#000}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;object-fit:cover}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================================================================
   الخلفية الكونية — نجوم + شبكة + هالات
   ================================================================ */
.cosmos{position:fixed;inset:0;z-index:-3;overflow:hidden}
.cosmos::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(0,207,255,.06) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 0% 50%,   rgba(139,92,246,.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 80%,  rgba(0,255,136,.04) 0%, transparent 55%),
    var(--deep);
}
.cosmos::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle 1px at 20% 20%, rgba(240,244,255,.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 80% 15%, rgba(240,244,255,.3) 0%, transparent 100%),
    radial-gradient(circle 1px at 45% 50%, rgba(240,244,255,.5) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 70% 70%, rgba(240,192,64,.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 15% 75%, rgba(0,255,136,.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 90% 40%, rgba(0,207,255,.3) 0%, transparent 100%),
    radial-gradient(circle 1px at 60% 90%, rgba(240,244,255,.3) 0%, transparent 100%),
    radial-gradient(circle 1px at 30% 85%, rgba(240,244,255,.2) 0%, transparent 100%);
}
.grid-bg{
  position:fixed;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(240,244,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,244,255,.03) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 30%, black 20%, transparent 75%);
}

/* ================================================================
   شريط الخبر العاجل
   ================================================================ */
.breaking-bar{
  background:linear-gradient(90deg, var(--red) 0%, #CC1A35 100%);
  padding:.3rem 0;overflow:hidden;
  display:flex;align-items:center;
}
.breaking-label{
  flex:0 0 auto;background:rgba(0,0,0,.3);padding:.2rem 1.1rem;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.08em;
  color:#fff;white-space:nowrap;display:flex;align-items:center;gap:.4rem;
}
.blip{width:7px;height:7px;border-radius:50%;background:#fff;animation:blip 1.2s infinite}
@keyframes blip{50%{opacity:.2;transform:scale(.7)}}
.breaking-track{
  display:flex;align-items:center;gap:3rem;animation:marquee 35s linear infinite;
  white-space:nowrap;padding-inline-start:2rem;font-size:.82rem;font-weight:500;
}
.breaking-bar:hover .breaking-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================================================================
   شريط النتائج الحي
   ================================================================ */
.live-ticker{
  background:var(--layer1);border-bottom:1px solid var(--white4);
  display:flex;align-items:stretch;overflow:hidden;
}
.lt-label{
  flex:0 0 auto;background:var(--red);color:#fff;
  padding:.5rem 1rem;font-family:var(--font-display);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;gap:.45rem;white-space:nowrap;
}
.lt-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blip 1.3s infinite}
.lt-track{
  display:flex;align-items:center;animation:ticker 55s linear infinite;
  padding-inline-start:1rem;white-space:nowrap;
}
.live-ticker:hover .lt-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(50%)}}
.lt-item{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.2rem;font-size:.8rem;color:var(--white2)}
.lt-item b{color:var(--white);font-weight:600}
.lt-score{font-family:var(--font-mono);color:var(--gold);font-weight:700;font-size:.9rem;letter-spacing:.05em}
.lt-sep{color:var(--white4);padding:0 .2rem}
.lt-live{color:var(--red);font-weight:600;font-size:.72rem;display:flex;align-items:center;gap:.3rem}
.lt-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);animation:blip 1s infinite}

/* ================================================================
   الترويسة
   ================================================================ */
.masthead{
  max-width:var(--maxw);margin:0 auto;padding:1.2rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-bottom:1px solid var(--white4);
}
.brand-logo{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,5vw,3rem);line-height:1;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--white) 30%,var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  flex:0 0 auto;
}
.brand-logo .accent{
  -webkit-text-fill-color:var(--gold);
}
.brand-sub{font-size:.75rem;color:var(--white3);font-family:var(--font-mono);letter-spacing:.05em;margin-top:.15rem}
.masthead-center{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.sport-pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;
  border:1px solid var(--white4);border-radius:999px;font-size:.74rem;
  color:var(--white2);transition:all .2s;cursor:pointer;
}
.sport-pill:hover,.sport-pill.on{background:var(--gold-glow);border-color:var(--gold-line);color:var(--gold)}
.sport-pill span{font-size:.9rem}
.masthead-right{display:flex;align-items:center;gap:.5rem}
.ai-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--green-glow);color:var(--green);border:1px solid rgba(0,255,136,.25);
  padding:.2rem .75rem;border-radius:999px;font-size:.73rem;font-family:var(--font-mono);
}
.ai-badge::before{content:'●';font-size:.55rem;animation:blip 2s infinite}

/* شريط المتابعة الاجتماعي */
.social-row{display:flex;align-items:center;gap:.4rem}
.s-ico{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--white4);border-radius:var(--r);
  color:var(--white3);transition:all .2s;
}
.s-ico:hover{border-color:var(--gold-line);color:var(--gold);background:var(--gold-glow)}
.s-ico svg{width:13px;height:13px;fill:currentColor}

/* ================================================================
   التنقل
   ================================================================ */
.nav-bar{
  position:sticky;top:0;z-index:100;
  background:rgba(8,13,26,.94);backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--white4);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;
}
.nav-inner::-webkit-scrollbar{display:none}
.nav-link{
  display:flex;align-items:center;gap:.4rem;
  padding:.6rem 1rem;font-family:var(--font-display);font-weight:600;
  font-size:.88rem;color:var(--white3);white-space:nowrap;
  position:relative;transition:color .2s;
}
.nav-link:hover{color:var(--white)}
.nav-link.on{color:var(--gold)}
.nav-link.on::after{
  content:'';position:absolute;bottom:0;left:.8rem;right:.8rem;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.nav-link .ni{font-size:.85rem}
.nav-ai{color:var(--green)!important}
.nav-special{
  margin-inline-start:auto;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--void)!important;font-weight:700;padding:.45rem 1.1rem;
  margin-block:.35rem;border-radius:var(--r);font-size:.82rem;
}

/* ================================================================
   الهيرو الضخم — ملعب كامل
   ================================================================ */
.hero-stage{
  max-width:var(--maxw);margin:1.5rem auto 0;padding:0 1.5rem;
  display:grid;grid-template-columns:1fr 380px;gap:1.3rem;
  min-height:600px;
}
.hero-main{
  position:relative;border:1px solid var(--white4);border-radius:var(--r);
  overflow:hidden;background:var(--layer1);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-bg-art{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,207,255,.1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(0,255,136,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(139,92,246,.08) 0%, transparent 50%),
    var(--layer2);
}
/* خطوط الملعب كفن خلفي */
.pitch-art{
  position:absolute;inset:0;overflow:hidden;opacity:.12;
}
.pitch-art svg{width:100%;height:100%}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s;
}
.hero-img.loaded{opacity:.45}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(5,8,16,.99) 0%, rgba(5,8,16,.6) 50%, rgba(5,8,16,.1) 100%);
}

/* لوحة النتيجة المثبتة */
.hero-score-board{
  position:absolute;top:1.2rem;right:1.2rem;
  background:rgba(5,8,16,.92);border:1px solid var(--gold-line);border-radius:var(--r);
  padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem;
  backdrop-filter:blur(10px);
}
.score-team{font-family:var(--font-display);font-weight:700;font-size:1rem}
.score-num{
  font-family:var(--font-mono);font-weight:700;font-size:1.8rem;
  color:var(--gold);letter-spacing:.05em;font-variant-numeric:tabular-nums;
}
.score-div{font-size:.7rem;color:var(--white3);text-align:center;line-height:1.3}
.score-live-tag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--red);color:#fff;font-size:.62rem;font-weight:700;
  padding:.1rem .5rem;border-radius:999px;letter-spacing:.06em;
}

/* المحتوى الرئيسي */
.hero-content{position:relative;padding:2rem;z-index:2}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.73rem;font-weight:600;
  color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.7rem;
}
.hero-kicker::before{content:'';width:24px;height:1.5px;background:var(--gold)}
.hero-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.25;
  margin-bottom:.7rem;
}
.hero-title a:hover{color:var(--gold);transition:.2s}
.hero-excerpt{color:var(--white2);font-size:.93rem;max-width:65ch;margin-bottom:1.1rem;line-height:1.75}
.hero-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;color:var(--white3);flex-wrap:wrap}
.ai-tag{color:var(--green);display:flex;align-items:center;gap:.3rem}
.ai-tag::before{content:'◆';font-size:.55rem}
.hero-share{
  display:flex;align-items:center;gap:.5rem;margin-top:1rem;
}
.share-btn-sm{
  display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .75rem;
  font-size:.73rem;font-family:var(--font-display);font-weight:600;
  border:1px solid var(--white4);color:var(--white2);border-radius:var(--r);transition:all .2s;
}
.share-btn-sm svg{width:12px;height:12px;fill:currentColor}
.share-btn-sm:hover{border-color:var(--gold-line);color:var(--gold);background:var(--gold-glow)}

/* ================================================================
   لوحة الذكاء الاصطناعي (العمود الجانبي)
   ================================================================ */
.ai-hub{
  display:flex;flex-direction:column;gap:1rem;
}
/* مؤشر الذكاء الحي */
.ai-live-card{
  background:var(--layer1);border:1px solid rgba(0,255,136,.22);border-radius:var(--r);
  overflow:hidden;flex:0 0 auto;
}
.ai-live-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;border-bottom:1px solid rgba(0,255,136,.15);
  background:rgba(0,255,136,.05);
}
.ai-live-head h3{font-family:var(--font-display);font-weight:700;font-size:.93rem;color:var(--green);display:flex;align-items:center;gap:.4rem}
.ai-pulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blip 1.5s infinite}
.ai-conf{font-family:var(--font-mono);font-size:.7rem;color:var(--white3)}
.ai-conf b{color:var(--green)}
.ai-live-body{padding:.9rem 1rem}
.ai-point{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.65rem;font-size:.83rem;color:var(--white2)}
.ai-point:last-child{margin-bottom:0}
.ai-point::before{content:'▸';color:var(--green);font-size:.6rem;margin-top:.42rem;flex:0 0 auto}
.ai-point b{color:var(--white);font-weight:500}
.ai-actions{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgba(0,255,136,.15);flex-wrap:wrap}
.ai-btn-sm{
  background:transparent;border:1px solid rgba(0,255,136,.3);color:var(--green);
  padding:.28rem .8rem;font-size:.75rem;font-family:var(--font-body);border-radius:var(--r);
  cursor:pointer;transition:all .2s;
}
.ai-btn-sm:hover{background:var(--green);color:var(--void)}

/* مؤشر التوقعات */
.prediction-card{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);overflow:hidden;flex:0 0 auto;
}
.pred-head{padding:.7rem 1rem;border-bottom:1px solid var(--white4);display:flex;align-items:center;justify-content:space-between}
.pred-head h3{font-family:var(--font-display);font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:.38rem}
.pred-head h3::before{content:'⬡';color:var(--purple);font-size:.75rem}
.pred-tag{font-size:.65rem;background:rgba(139,92,246,.15);color:var(--purple);padding:.1rem .5rem;border-radius:999px}
.pred-body{padding:.85rem 1rem}
.pred-match{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;font-family:var(--font-display);font-weight:600;font-size:.9rem}
.pred-pct{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--gold)}
.pred-bars{display:flex;flex-direction:column;gap:.4rem}
.pred-bar-row{display:flex;align-items:center;gap:.5rem;font-size:.73rem;color:var(--white2)}
.pred-bar-track{flex:1;height:5px;background:var(--layer3);border-radius:3px;overflow:hidden}
.pred-bar-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.fill-w{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.fill-d{background:rgba(240,244,255,.3)}
.fill-l{background:var(--red)}

/* ================================================================
   القسم العام
   ================================================================ */
.section{max-width:var(--maxw);margin:2.5rem auto 0;padding:0 1.5rem}
.sec-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.sec-head h2{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--white);white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.sec-icon{font-size:1.1rem}
.sec-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent)}
.sec-more{font-size:.78rem;color:var(--gold);white-space:nowrap}
.sec-more:hover{text-decoration:underline}

/* ================================================================
   مركز المباريات العالمي
   ================================================================ */
.matches-hub{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;
}
.match-card{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);
  overflow:hidden;transition:all .25s;cursor:pointer;
}
.match-card:hover{border-color:var(--gold-line);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.mc-league{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;background:rgba(0,0,0,.25);border-bottom:1px solid var(--white4);
  font-size:.68rem;font-family:var(--font-mono);color:var(--white3);
}
.mc-league .flag{font-size:.9rem}
.mc-league .status{margin-inline-start:auto}
.mc-live{color:var(--red);font-weight:600;display:flex;align-items:center;gap:.28rem}
.mc-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);animation:blip 1s infinite}
.mc-body{padding:.85rem .9rem}
.mc-row{display:flex;align-items:center;justify-content:space-between;padding:.22rem 0}
.mc-team{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.95rem}
.mc-flag{font-size:1.1rem}
.mc-score{font-family:var(--font-mono);font-weight:700;font-size:1.2rem;color:var(--gold);letter-spacing:.05em}
.mc-ai-tip{
  margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--white4);
  font-size:.72rem;color:var(--cyan);display:flex;align-items:center;gap:.35rem;
}
.mc-ai-tip::before{content:'◆';font-size:.5rem}

/* ================================================================
   لوحة الإحصاءات العالمية
   ================================================================ */
.stats-dashboard{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.stat-big{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);
  padding:1.3rem 1.1rem;text-align:center;transition:all .25s;position:relative;overflow:hidden;
}
.stat-big::before{
  content:'';position:absolute;inset:0;opacity:0;transition:.3s;
}
.stat-big:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.stat-big:hover::before{opacity:1;background:var(--gold-glow)}
.stat-big .num{
  font-family:var(--font-mono);font-weight:700;font-size:2.2rem;
  color:var(--gold);line-height:1;margin-bottom:.3rem;
  font-variant-numeric:tabular-nums;
}
.stat-big .lbl{font-size:.77rem;color:var(--white3);line-height:1.4}
.stat-big .trend{font-size:.7rem;color:var(--green);margin-top:.25rem;font-family:var(--font-mono)}
.stat-big .trend.down{color:var(--red)}

/* ================================================================
   شبكة الأخبار العالمية — التصميم الكبير
   ================================================================ */
.world-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto;
  gap:1rem;
}
/* بطاقة ضخمة - تمتد عرضاً وارتفاعاً */
.wc-feat{grid-column:span 8;grid-row:span 2;min-height:480px}
.wc-tall{grid-column:span 4;grid-row:span 2;min-height:480px}
.wc-wide{grid-column:span 6}
.wc-med{grid-column:span 4}
.wc-sm{grid-column:span 3}
.wc-third{grid-column:span 4}

.news-card{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:all .25s;
}
.news-card:hover{border-color:var(--white4);transform:translateY(-2px);border-color:rgba(240,192,64,.3)}
.news-card:hover .nc-img-wrap img{transform:scale(1.04)}

.nc-img-wrap{
  position:relative;overflow:hidden;
  background:var(--layer2);
}
.wc-feat .nc-img-wrap,.wc-tall .nc-img-wrap{aspect-ratio:unset;flex:1;min-height:240px}
.wc-wide .nc-img-wrap,.wc-med .nc-img-wrap{aspect-ratio:16/9}
.wc-sm .nc-img-wrap,.wc-third .nc-img-wrap{aspect-ratio:16/9}

.nc-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
/* صور مولّدة بـ CSS بديلاً */
.nc-art-1{background:linear-gradient(135deg,#0a1f2e 0%,#0d3040 50%,#052030 100%),url("data:image/svg+xml,%3Csvg%20viewBox='0%200%20400%20225'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='200'%20cy='113'%20r='80'%20fill='none'%20stroke='rgba(240%2C192%2C64%2C.2)'%20stroke-width='1'/%3E%3C/svg%3E")}
.nc-art-2{background:linear-gradient(225deg,#1a0a2e 0%,#2d1040 50%,#100820 100%)}
.nc-art-3{background:linear-gradient(160deg,#0a200e 0%,#0d3020 50%,#052010 100%)}
.nc-art-4{background:linear-gradient(135deg,#1a1020 0%,#2a1535 50%,#150a25 100%)}
.nc-art-5{background:linear-gradient(200deg,#200a10 0%,#3a0f1f 50%,#180510 100%)}
.nc-art-6{background:linear-gradient(160deg,#0a1520 0%,#0f2535 50%,#051018 100%)}

.nc-art-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.nc-art-overlay svg{width:70%;height:70%;opacity:.15}

/* الشارة */
.nc-badge{
  position:absolute;top:.7rem;right:.7rem;
  font-size:.63rem;font-family:var(--font-mono);font-weight:600;letter-spacing:.04em;
  background:rgba(5,8,16,.9);padding:.12rem .55rem;border-radius:3px;
  backdrop-filter:blur(4px);
}
.nc-badge.live{color:var(--red);border:1px solid rgba(255,59,92,.4)}
.nc-badge.ai{color:var(--green);border:1px solid rgba(0,255,136,.3)}
.nc-badge.hot{color:var(--gold);border:1px solid var(--gold-line)}
.nc-badge.analysis{color:var(--purple);border:1px solid rgba(139,92,246,.35)}
.nc-badge.world{color:var(--cyan);border:1px solid rgba(0,207,255,.3)}

/* محتوى البطاقة */
.nc-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:0 0 auto}
.wc-feat .nc-body,.wc-tall .nc-body{padding:1.2rem 1.3rem 1.3rem}
.nc-sport{font-size:.68rem;color:var(--gold);font-family:var(--font-mono);font-weight:600;letter-spacing:.05em}
.nc-title{font-family:var(--font-display);font-weight:700;line-height:1.4}
.wc-feat .nc-title{font-size:1.5rem}
.wc-tall .nc-title{font-size:1.2rem}
.wc-wide .nc-title,.wc-med .nc-title{font-size:1.05rem}
.wc-sm .nc-title,.wc-third .nc-title{font-size:.95rem}
.nc-title a:hover{color:var(--gold);transition:.2s}
.nc-excerpt{font-size:.82rem;color:var(--white2);line-height:1.7}
.nc-meta{
  margin-top:auto;padding-top:.6rem;font-size:.68rem;color:var(--white3);
  display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--white4);
}
.nc-time{display:flex;align-items:center;gap:.28rem}
.nc-read{color:var(--cyan);display:flex;align-items:center;gap:.28rem}
.nc-read::before{content:'◆';font-size:.5rem}
.nc-country{display:flex;align-items:center;gap:.3rem}

/* ================================================================
   التحليل الفني — رادار + إحصاءات
   ================================================================ */
.analysis-strip{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;
}
.analysis-card{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);
  overflow:hidden;
}
.ac-head{
  padding:.75rem 1rem;border-bottom:1px solid var(--white4);
  display:flex;align-items:center;justify-content:space-between;
}
.ac-head h3{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--white)}
.ac-sub{font-size:.68rem;color:var(--white3)}
.ac-body{padding:1rem}

/* رادار مشاة --- SVG داخلي */
.radar-wrap{display:flex;justify-content:center;margin:.5rem 0}
.radar-wrap svg{width:160px;height:160px}

/* أشرطة الإحصاءات */
.stat-bar-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem;font-size:.78rem}
.stat-bar-row .slbl{width:80px;color:var(--white2);text-align:right;flex:0 0 auto}
.stat-bar-row .strack{flex:1;height:6px;background:var(--layer3);border-radius:3px;overflow:hidden}
.stat-bar-row .sfill{height:100%;border-radius:3px}
.stat-bar-row .sval{width:35px;text-align:left;font-family:var(--font-mono);font-size:.75rem;color:var(--white);flex:0 0 auto}
.fill-gold{background:linear-gradient(90deg,var(--gold2),var(--gold))}
.fill-cyan{background:linear-gradient(90deg,#0080CC,var(--cyan))}
.fill-green{background:linear-gradient(90deg,var(--green2),var(--green))}
.fill-purple{background:linear-gradient(90deg,#5B21B6,var(--purple))}
.fill-red{background:linear-gradient(90deg,#CC1A35,var(--red))}

/* ================================================================
   خريطة الأخبار العالمية
   ================================================================ */
.world-map-section{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);
  overflow:hidden;
}
.wms-head{
  padding:1rem 1.3rem;border-bottom:1px solid var(--white4);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.wms-head h2{font-family:var(--font-display);font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:.45rem}
.wms-body{display:grid;grid-template-columns:1fr 320px}
.wms-map{padding:1.3rem;display:flex;align-items:center;justify-content:center}
.wms-map svg{width:100%;max-width:680px;height:auto}
.wms-list{border-inline-start:1px solid var(--white4);padding:1rem}
.region-item{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .6rem;
  border-radius:var(--r);cursor:pointer;transition:background .2s;
}
.region-item:hover{background:rgba(240,192,64,.07)}
.region-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.region-info{flex:1}
.region-name{font-family:var(--font-display);font-weight:600;font-size:.88rem}
.region-count{font-size:.7rem;color:var(--white3)}
.region-bar-track{width:60px;height:3px;background:var(--layer3);border-radius:2px;overflow:hidden}
.region-bar-fill{height:100%;border-radius:2px}

/* ================================================================
   الأكثر تداولاً — الدوري الذكي
   ================================================================ */
.trending-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:start}
.trend-table{background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);overflow:hidden}
.tt-head{
  display:grid;grid-template-columns:48px 1fr 100px 80px;
  padding:.6rem 1.1rem;border-bottom:1px solid var(--white4);
  font-size:.68rem;color:var(--white3);font-family:var(--font-mono);letter-spacing:.05em;
}
.tt-row{
  display:grid;grid-template-columns:48px 1fr 100px 80px;align-items:center;
  padding:.75rem 1.1rem;border-bottom:1px solid var(--white4);transition:background .2s;cursor:pointer;
}
.tt-row:last-child{border-bottom:0}
.tt-row:hover{background:rgba(240,192,64,.05)}
.tt-rank{font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:transparent;-webkit-text-stroke:1px var(--gold)}
.tt-title{font-family:var(--font-display);font-weight:600;font-size:.9rem;line-height:1.4}
.tt-title a:hover{color:var(--gold)}
.tt-cat{font-size:.68rem;color:var(--white3);margin-top:.15rem;display:flex;align-items:center;gap:.3rem}
.tt-cat::before{content:'●';font-size:.5rem}
.tt-bar-wrap{padding-inline-end:.5rem}
.tt-bar-t{height:4px;background:var(--layer3);border-radius:2px;overflow:hidden;margin-bottom:.2rem}
.tt-bar-t i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:2px}
.tt-trend-num{font-family:var(--font-mono);font-size:.72rem;color:var(--white3)}
.tt-vel{font-family:var(--font-mono);font-size:.8rem;font-weight:600}
.tt-vel.up{color:var(--green)}
.tt-vel.down{color:var(--red)}

/* جانب النشرة الذكية */
.smart-newsletter{
  background:var(--layer1);border:1px solid var(--white4);border-radius:var(--r);overflow:hidden;
}
.sn-head{
  padding:1rem 1.1rem;border-bottom:1px solid var(--white4);
  background:linear-gradient(135deg,rgba(240,192,64,.08),transparent);
}
.sn-head h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.sn-head h3 span{color:var(--gold)}
.sn-head p{font-size:.78rem;color:var(--white2)}
.sn-body{padding:1.1rem}
.sn-prefs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.pref-tag{
  display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .65rem;
  border:1px solid var(--white4);border-radius:999px;font-size:.72rem;cursor:pointer;transition:all .2s;
}
.pref-tag:hover,.pref-tag.on{background:var(--gold-glow);border-color:var(--gold-line);color:var(--gold)}
.sn-form{display:flex;flex-direction:column;gap:.55rem}
.sn-input{
  background:var(--deep);border:1px solid var(--white4);color:var(--white);
  padding:.55rem .85rem;font-family:var(--font-body);font-size:.82rem;border-radius:var(--r);
}
.sn-input:focus{outline:none;border-color:var(--gold-line)}
.sn-submit{
  background:linear-gradient(135deg,var(--gold),var(--gold2));border:0;
  color:var(--void);font-family:var(--font-display);font-weight:700;font-size:.9rem;
  padding:.58rem;border-radius:var(--r);cursor:pointer;transition:opacity .2s;
}
.sn-submit:hover{opacity:.85}
.sn-note{font-size:.67rem;color:var(--white3);text-align:center}

/* ================================================================
   شريط بروموشن رئيس التحرير
   ================================================================ */
.editor-banner{
  max-width:var(--maxw);margin:2.5rem auto 0;padding:0 1.5rem;
}
.eb-inner{
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(0,207,255,.06),rgba(240,192,64,.08));
  border:1px solid rgba(139,92,246,.25);border-radius:var(--r);
  padding:1.8rem 2rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.eb-inner::before{
  content:'✒';position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);
  font-size:6rem;opacity:.06;pointer-events:none;
}
.eb-avatar{
  width:70px;height:70px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--purple),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:#fff;
  border:2px solid rgba(139,92,246,.4);box-shadow:0 0 30px rgba(139,92,246,.2);
}
.eb-text{flex:1}
.eb-tag{font-family:var(--font-mono);font-size:.7rem;color:var(--purple);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem;display:block}
.eb-text h2{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-bottom:.35rem;line-height:1.35}
.eb-text p{font-size:.85rem;color:var(--white2);max-width:62ch}
.eb-cta{
  flex:0 0 auto;background:linear-gradient(135deg,var(--purple),#6D28D9);
  color:#fff;padding:.65rem 1.4rem;border-radius:var(--r);
  font-family:var(--font-display);font-weight:700;font-size:.88rem;white-space:nowrap;transition:.2s;
}
.eb-cta:hover{opacity:.85;transform:translateY(-1px)}

/* ================================================================
   التذييل
   ================================================================ */
footer{
  margin-top:3.5rem;border-top:1px solid var(--white4);background:var(--void);
}
.foot-top{
  max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.5rem;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:2rem;
}
.foot-brand h2{
  font-family:var(--font-display);font-weight:900;font-size:1.8rem;
  background:linear-gradient(135deg,var(--white) 30%,var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:.4rem;
}
.foot-brand p{font-size:.78rem;color:var(--white3);max-width:30ch;line-height:1.75;margin-bottom:.8rem}
.foot-social-full{display:flex;gap:.4rem;flex-wrap:wrap}
.fsc{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--white4);border-radius:var(--r);
  color:var(--white3);transition:all .2s;
}
.fsc:hover{border-color:var(--gold-line);color:var(--gold);background:var(--gold-glow)}
.fsc svg{width:14px;height:14px;fill:currentColor}
.foot-col h4{font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--gold);margin-bottom:.7rem;letter-spacing:.03em}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.foot-col ul a{font-size:.78rem;color:var(--white3);transition:color .2s}
.foot-col ul a:hover{color:var(--white)}
.foot-bottom{
  border-top:1px solid var(--white4);padding:.8rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  font-size:.7rem;color:var(--white3);max-width:var(--maxw);margin:0 auto;
}
.foot-bottom b{color:var(--gold)}
.foot-badges{display:flex;align-items:center;gap:.5rem}
.fbadge{
  display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;
  border:1px solid var(--white4);border-radius:3px;font-family:var(--font-mono);font-size:.65rem;
}
.fbadge.green{color:var(--green);border-color:rgba(0,255,136,.25)}
.fbadge.gold{color:var(--gold);border-color:var(--gold-line)}

/* ================================================================
   التجاوب
   ================================================================ */
@media(max-width:1200px){
  .stats-dashboard{grid-template-columns:repeat(2,1fr)}
  .analysis-strip{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:980px){
  .hero-stage{grid-template-columns:1fr}
  .ai-hub{flex-direction:row;flex-wrap:wrap}
  .ai-hub > *{flex:1 1 280px}
  .wc-feat{grid-column:span 12}
  .wc-tall{grid-column:span 6}
  .wc-wide{grid-column:span 6}
  .wc-med{grid-column:span 6}
  .wc-sm{grid-column:span 6}
  .wc-third{grid-column:span 6}
  .trending-grid{grid-template-columns:1fr}
  .wms-body{grid-template-columns:1fr}
  .analysis-strip{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .masthead-center{display:none}
  .wc-feat,.wc-tall,.wc-wide,.wc-med,.wc-sm,.wc-third{grid-column:span 12}
  .tt-head,.tt-row{grid-template-columns:40px 1fr 70px}
  .tt-vel{display:none}
  .stats-dashboard{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

              .r-ax{stroke:rgba(240,244,255,.12);fill:none;stroke-width:.8}.r-mx{fill:rgba(240,192,64,.15);stroke:var(--gold);stroke-width:1.5;opacity:.85}.r-op{fill:rgba(255,59,92,.1);stroke:var(--red);stroke-width:1;opacity:.7}
            </defs>
            <!-- شبكة الرادار -->
            <polygon class="r-ax" points="100,10 172,55 172,145 100,190 28,145 28,55"/>
            <polygon class="r-ax" points="100,33 154,62 154,138 100,167 46,138 46,62"/>
            <polygon class="r-ax" points="100,57 136,70 136,130 100,143 64,130 64,70"/>
            <polygon class="r-ax" points="100,80 118,87 118,113 100,120 82,113 82,87"/>
            <!-- محاور -->
            <line class="r-ax" x1="100" y1="10" x2="100" y2="190"/>
            <line class="r-ax" x1="28" y1="55" x2="172" y2="145"/>
            <line class="r-ax" x1="172" y1="55" x2="28" y2="145"/>
            <!-- بيانات المكسيك -->
            <polygon class="r-mx" points="100,18 162,68 155,138 100,172 50,132 45,65"/>
            <!-- بيانات جنوب أفريقيا -->
            <polygon class="r-op" points="100,45 140,80 138,128 100,155 65,122 62,78"/>
            <!-- تسميات -->
            <text x="100" y="7" text-anchor="middle" fill="rgba(240,244,255,.6)" font-size="9" font-family="IBM Plex Sans Arabic">الاستحواذ</text>
            <text x="180" y="55" text-anchor="start" fill="rgba(240,244,255,.6)" font-size="9" font-family="IBM Plex Sans Arabic">التسديدات</text>
            <text x="180" y="150" text-anchor="start" fill="rgba(240,244,255,.6)" font-size="9" font-family="IBM Plex Sans Arabic">الدفاع</text>
            <text x="100" y="200" text-anchor="middle" fill="rgba(240,244,255,.6)" font-size="9" font-family="IBM Plex Sans Arabic">السرعة</text>
            <text x="18" y="150" text-anchor="end" fill="rgba(240,244,255,.6)" font-size="9" font-family="IBM Plex Sans Arabic">الضغط</text>
            <text x="18" y="55" text-anchor="end" fill="rgba(240,244,255,.6)" font-size="9" font-family="IBM Plex Sans Arabic">الكرات</text>
            <!-- مفتاح -->
            <rect x="10" y="185" width="10" height="6" fill="rgba(240,192,64,.7)" rx="1"/>
            <text x="23" y="191" fill="rgba(240,244,255,.7)" font-size="8" font-family="IBM Plex Sans Arabic">المكسيك</text>
            <rect x="80" y="185" width="10" height="6" fill="rgba(255,59,92,.6)" rx="1"/>
            <text x="93" y="191" fill="rgba(240,244,255,.7)" font-size="8" font-family="IBM Plex Sans Arabic">ج. أفريقيا</text>
          </svg>
        </div>
        <div style="margin-top:.5rem">
          <div class="stat-bar-row">
            <span class="slbl">استحواذ</span>
            <div class="strack"><div class="sfill fill-gold" style="width:61%"></div></div>
            <span class="sval">61٪</span>
          </div>
          <div class="stat-bar-row">
            <span class="slbl">تسديدات</span>
            <div class="strack"><div class="sfill fill-cyan" style="width:73%"></div></div>
            <span class="sval">14</span>
          </div>
          <div class="stat-bar-row">
            <span class="slbl">دقة التمرير</span>
            <div class="strack"><div class="sfill fill-green" style="width:87%"></div></div>
            <span class="sval">87٪</span>
          </div>
        </div>
      </div>
    </div>

    <!-- إحصاءات اللاعبين -->
    <div class="analysis-card">
      <div class="ac-head">
        <h3>أبرز اللاعبين</h3>
        <span class="ac-sub">تقييم SPOMEXA AI</span>
      </div>
      <div class="ac-body">
        <div style="display:flex;flex-direction:column;gap:.8rem">
          <div style="background:var(--layer2);border-radius:var(--r);padding:.75rem .9rem;border:1px solid var(--gold-line)">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem">
              <div style="font-family:var(--font-display);font-weight:700;font-size:.95rem">سانتياغو خيمينيز</div>
              <div style="font-family:var(--font-mono);font-weight:700;font-size:1.2rem;color:var(--gold)">8.7</div>
            </div>
            <div style="font-size:.72rem;color:var(--white3);margin-bottom:.5rem">🇲🇽 المكسيك · مهاجم</div>
            <div class="stat-bar-row" style="margin-bottom:.35rem">
              <span class="slbl" style="font-size:.68rem">التسديد</span>
              <div class="strack"><div class="sfill fill-gold" style="width:90%"></div></div>
              <span class="sval">9.0</span>
            </div>
            <div class="stat-bar-row">
              <span class="slbl" style="font-size:.68rem">الحركة</span>
              <div class="strack"><div class="sfill fill-cyan" style="width:85%"></div></div>
              <span class="sval">8.5</span>
            </div>
          </div>
          <div style="background:var(--layer2);border-radius:var(--r);padding:.75rem .9rem;border:1px solid var(--white4)">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem">
              <div style="font-family:var(--font-display);font-weight:700;font-size:.95rem">روبن ديكلان</div>
              <div style="font-family:var(--font-mono);font-weight:700;font-size:1.2rem;color:var(--gold)">7.8</div>
            </div>
            <div style="font-size:.72rem;color:var(--white3);margin-bottom:.5rem">🇿🇦 جنوب أفريقيا · حارس</div>
            <div class="stat-bar-row" style="margin-bottom:.35rem">
              <span class="slbl" style="font-size:.68rem">الإنقاذات</span>
              <div class="strack"><div class="sfill fill-purple" style="width:92%"></div></div>
              <span class="sval">9.2</span>
            </div>
            <div class="stat-bar-row">
              <span class="slbl" style="font-size:.68rem">التوزيع</span>
              <div class="strack"><div class="sfill fill-green" style="width:65%"></div></div>
              <span class="sval">6.5</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- التحليل التكتيكي -->
    <div class="analysis-card">
      <div class="ac-head">
        <h3>التحليل التكتيكي</h3>
        <span class="ac-sub">النموذج الذكي v4.1</span>
      </div>
      <div class="ac-body">
        <div style="margin-bottom:1rem">
          <div style="font-size:.78rem;color:var(--white2);margin-bottom:.6rem;line-height:1.7">
            اعتمد المنتخب المكسيكي على تشكيلة <b style="color:var(--gold)">4-3-3</b> بضغط عالٍ في الثلث الأمامي. الحصيلة: 14 تسديدة، 7 في المرمى، نسبة تحويل 28٪ — أعلى من المتوسط العالمي في الافتتاحيات.
          </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.6rem">
          <div style="background:var(--layer2);padding:.7rem;border-radius:var(--r);text-align:center">
            <div style="font-family:var(--font-mono);font-weight:700;font-size:1.4rem;color:var(--green)">61%</div>
            <div style="font-size:.68rem;color:var(--white3)">استحواذ</div>
          </div>
          <div style="background:var(--layer2);padding:.7rem;border-radius:var(--r);text-align:center">
            <div style="font-family:var(--font-mono);font-weight:700;font-size:1.4rem;color:var(--cyan)">14</div>
            <div style="font-size:.68rem;color:var(--white3)">تسديدة</div>
          </div>
          <div style="background:var(--layer2);padding:.7rem;border-radius:var(--r);text-align:center">
            <div style="font-family:var(--font-mono);font-weight:700;font-size:1.4rem;color:var(--gold)">87%</div>
            <div style="font-size:.68rem;color:var(--white3)">دقة التمرير</div>
          </div>
          <div style="background:var(--layer2);padding:.7rem;border-radius:var(--r);text-align:center">
            <div style="font-family:var(--font-mono);font-weight:700;font-size:1.4rem;color:var(--purple)">8.4</div>
            <div style="font-size:.68rem;color:var(--white3)">تقييم الأداء</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- ===== خريطة التغطية العالمية ===== -->
<section class="section" aria-label="خريطة الرياضة العالمية">
  <div class="world-map-section">
    <div class="wms-head">
      <h2><span style="color:var(--gold)">🗺</span> خريطة الرياضة العالمية — التغطية الحية</h2>
      <span style="font-size:.75rem;color:var(--white3)">148 دولة · 623 رياضة · 24/7</span>
    </div>
    <div class="wms-body">
      <div class="wms-map">
        <svg viewBox="0 0 680 380" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          </defs>
          <!-- خلفية الخريطة -->
          <rect width="680" height="380" fill="var(--layer2)" rx="6"/>
          <!-- شبكة خفيفة -->
          <line x1="0" y1="190" x2="680" y2="190" stroke="rgba(240,244,255,.06)"/>
          <line x1="340" y1="0" x2="340" y2="380" stroke="rgba(240,244,255,.06)"/>
          <!-- نقاط الحضور العالمي (تمثيلية) -->
          <!-- أوروبا -->
          <circle cx="330" cy="120" r="18" fill="rgba(240,192,64,.15)" stroke="var(--gold)" stroke-width="1" filter="url(#glow)"/>
          <circle cx="330" cy="120" r="6" fill="var(--gold)" opacity=".8"/>
          <text x="330" y="105" text-anchor="middle" fill="rgba(240,244,255,.7)" font-size="9" font-family="Changa">أوروبا</text>
          <text x="330" y="145" text-anchor="middle" fill="var(--gold)" font-size="8" font-family="Space Grotesk">284 خبر</text>
          <!-- آسيا -->
          <circle cx="510" cy="140" r="14" fill="rgba(0,207,255,.12)" stroke="var(--cyan)" stroke-width="1" filter="url(#glow)"/>
          <circle cx="510" cy="140" r="5" fill="var(--cyan)" opacity=".8"/>
          <text x="510" y="125" text-anchor="middle" fill="rgba(240,244,255,.7)" font-size="9" font-family="Changa">آسيا</text>
          <text x="510" y="158" text-anchor="middle" fill="var(--cyan)" font-size="8" font-family="Space Grotesk">198 خبر</text>
          <!-- أمريكا الشمالية -->
          <circle cx="155" cy="145" r="16" fill="rgba(0,255,136,.12)" stroke="var(--green)" stroke-width="1" filter="url(#glow)"/>
          <circle cx="155" cy="145" r="5" fill="var(--green)" opacity=".8"/>
          <text x="155" y="130" text-anchor="middle" fill="rgba(240,244,255,.7)" font-size="9" font-family="Changa">أمريكا الشمالية</text>
          <text x="155" y="164" text-anchor="middle" fill="var(--green)" font-size="8" font-family="Space Grotesk">176 خبر</text>
          <!-- الشرق الأوسط -->
          <circle cx="420" cy="180" r="20" fill="rgba(139,92,246,.2)" stroke="var(--purple)" stroke-width="1.5" filter="url(#glow)"/>
          <circle cx="420" cy="180" r="7" fill="var(--purple)" opacity=".9"/>
          <text x="420" y="163" text-anchor="middle" fill="rgba(240,244,255,.8)" font-size="9" font-family="Changa">الشرق الأوسط</text>
          <text x="420" y="200" text-anchor="middle" fill="var(--purple)" font-size="8" font-family="Space Grotesk">156 خبر</text>
          <!-- أفريقيا -->
          <circle cx="340" cy="230" r="12" fill="rgba(255,59,92,.12)" stroke="var(--red)" stroke-width="1" filter="url(#glow)"/>
          <circle cx="340" cy="230" r="4" fill="var(--red)" opacity=".8"/>
          <text x="340" y="250" text-anchor="middle" fill="rgba(240,244,255,.6)" font-size="9" font-family="Changa">أفريقيا</text>
          <!-- أمريكا الجنوبية -->
          <circle cx="205" cy="255" r="13" fill="rgba(240,192,64,.12)" stroke="var(--gold)" stroke-width="1" filter="url(#glow)"/>
          <circle cx="205" cy="255" r="5" fill="var(--gold)" opacity=".7"/>
          <text x="205" y="275" text-anchor="middle" fill="rgba(240,244,255,.6)" font-size="9" font-family="Changa">أمريكا الجنوبية</text>
          <!-- أستراليا -->
          <circle cx="570" cy="265" r="9" fill="rgba(0,207,255,.1)" stroke="var(--cyan)" stroke-width=".8"/>
          <circle cx="570" cy="265" r="3" fill="var(--cyan)" opacity=".7"/>
          <!-- نبضات دائرية -->
          <circle cx="420" cy="180" r="25" fill="none" stroke="rgba(139,92,246,.3)" stroke-width=".6"><animate attributeName="r" values="20;35;20" dur="3s" repeatCount="indefinite"/><animate attributeName="opacity" values=".5;0;.5" dur="3s" repeatCount="indefinite"/></circle>
          <circle cx="330" cy="120" r="25" fill="none" stroke="rgba(240,192,64,.3)" stroke-width=".6"><animate attributeName="r" values="18;30;18" dur="3.5s" repeatCount="indefinite"/><animate attributeName="opacity" values=".5;0;.5" dur="3.5s" repeatCount="indefinite"/></circle>
          <!-- عنوان -->
          <text x="340" y="25" text-anchor="middle" fill="rgba(240,244,255,.4)" font-size="11" font-family="Changa">خريطة التغطية الرياضية الحية · SPOMEXA</text>
        </svg>
      </div>
      <div class="wms-list">
        <div style="font-size:.78rem;color:var(--white3);margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--white4)">التغطية حسب المنطقة</div>
        <div class="region-item">
          <span class="region-dot" style="background:var(--gold)"></span>
          <div class="region-info">
            <div class="region-name">⚽ أوروبا</div>
            <div class="region-count">284 خبر · 38 دولة</div>
          </div>
          <div><div class="region-bar-track"><div class="region-bar-fill" style="width:100%;background:var(--gold)"></div></div></div>
        </div>
        <div class="region-item">
          <span class="region-dot" style="background:var(--cyan)"></span>
          <div class="region-info">
            <div class="region-name">🏆 آسيا والمحيط الهادئ</div>
            <div class="region-count">198 خبر · 28 دولة</div>
          </div>
          <div><div class="region-bar-track"><div class="region-bar-fill" style="width:70%;background:var(--cyan)"></div></div></div>
        </div>
        <div class="region-item">
          <span class="region-dot" style="background:var(--green)"></span>
          <div class="region-info">
            <div class="region-name">🌎 أمريكا الشمالية</div>
            <div class="region-count">176 خبر · 3 دول</div>
          </div>
          <div><div class="region-bar-track"><div class="region-bar-fill" style="width:62%;background:var(--green)"></div></div></div>
        </div>
        <div class="region-item">
          <span class="region-dot" style="background:var(--purple)"></span>
          <div class="region-info">
            <div class="region-name">🌙 الشرق الأوسط</div>
            <div class="region-count">156 خبر · 18 دولة</div>
          </div>
          <div><div class="region-bar-track"><div class="region-bar-fill" style="width:55%;background:var(--purple)"></div></div></div>
        </div>
        <div class="region-item">
          <span class="region-dot" style="background:var(--gold)"></span>
          <div class="region-info">
            <div class="region-name">🌍 أفريقيا</div>
            <div class="region-count">89 خبر · 22 دولة</div>
          </div>
          <div><div class="region-bar-track"><div class="region-bar-fill" style="width:31%;background:var(--gold)"></div></div></div>
        </div>
        <div class="region-item">
          <span class="region-dot" style="background:var(--red)"></span>
          <div class="region-info">
            <div class="region-name">🌎 أمريكا اللاتينية</div>
            <div class="region-count">112 خبر · 17 دولة</div>
          </div>
          <div><div class="region-bar-track"><div class="region-bar-fill" style="width:39%;background:var(--red)"></div></div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== الأكثر تداولاً ===== -->
<section class="section" aria-label="الأكثر تداولاً">
  <div class="sec-head">
    <h2><span class="sec-icon">🔥</span> ترتيب التداول العالمي</h2>
    <div class="sec-rule"></div>
    <a href="#" class="sec-more">التصنيف الكامل ←</a>
  </div>
  <div class="trending-grid">
    <div class="trend-table">
      <div class="tt-head">
        <span>#</span>
        <span>القصة</span>
        <span>الزخم</span>
        <span>النمو</span>
      </div>
      <div class="tt-row">
        <span class="tt-rank">1</span>
        <div>
          <div class="tt-title"><a href="#">عودة على التغطية المباشرة لافتتاح مونديال 2026 ومواجهة المكسيك وجنوب أفريقيا</a></div>
          <div class="tt-cat"><span style="color:var(--gold)">●</span> مونديال 2026 · المكسيك</div>
        </div>
        <div class="tt-bar-wrap">
          <div class="tt-bar-t"><i style="width:96%"></i></div>
          <div class="tt-trend-num">96,200 مشاهدة</div>
        </div>
        <span class="tt-vel up">▲ +340٪</span>
      </div>
      <div class="tt-row">
        <span class="tt-rank">2</span>
        <div>
          <div class="tt-title"><a href="#">ريال مدريد يُعلن تعيين مورينيو مدرباً لثلاثة مواسم قادمة</a></div>
          <div class="tt-cat"><span style="color:var(--green)">●</span> انتقالات · إسبانيا</div>
        </div>
        <div class="tt-bar-wrap">
          <div class="tt-bar-t"><i style="width:81%"></i></div>
          <div class="tt-trend-num">81,500 مشاهدة</div>
        </div>
        <span class="tt-vel up">▲ +215٪</span>
      </div>
      <div class="tt-row">
        <span class="tt-rank">3</span>
        <div>
          <div class="tt-title"><a href="#">المنتخب السعودي وأوروغواي: التحليل التكتيكي الكامل قبل 24 ساعة من الانطلاق</a></div>
          <div class="tt-cat"><span style="color:var(--purple)">●</span> مونديال 2026 · السعودية</div>
        </div>
        <div class="tt-bar-wrap">
          <div class="tt-bar-t"><i style="width:74%"></i></div>
          <div class="tt-trend-num">74,300 مشاهدة</div>
        </div>
        <span class="tt-vel up">▲ +189٪</span>
      </div>
      <div class="tt-row">
        <span class="tt-rank">4</span>
        <div>
          <div class="tt-title"><a href="#">من هما السباعي وسعدان؟ الوجهان الجديدان في قائمة أسود الأطلس</a></div>
          <div class="tt-cat"><span style="color:var(--cyan)">●</span> مونديال 2026 · المغرب</div>
        </div>
        <div class="tt-bar-wrap">
          <div class="tt-bar-t"><i style="width:67%"></i></div>
          <div class="tt-trend-num">67,100 مشاهدة</div>
        </div>
        <span class="tt-vel up">▲ +156٪</span>
      </div>
      <div class="tt-row">
        <span class="tt-rank">5</span>
        <div>
          <div class="tt-title"><a href="#">فيرستابن يُحقق البولبوزيشن الـ50: رقم قياسي تاريخي في عالم الفورمولا 1</a></div>
          <div class="tt-cat"><span style="color:var(--red)">●</span> فورمولا 1 · موناكو</div>
        </div>
        <div class="tt-bar-wrap">
          <div class="tt-bar-t"><i style="width:52%"></i></div>
          <div class="tt-trend-num">52,800 مشاهدة</div>
        </div>
        <span class="tt-vel up">▲ +98٪</span>
      </div>
      <div class="tt-row">
        <span class="tt-rank">6</span>
        <div>
          <div class="tt-title"><a href="#">يوكيتش يحسم لقب MVP رابع مرة — أرقام تاريخية تُبهر الـNBA</a></div>
          <div class="tt-cat"><span style="color:var(--gold)">●</span> كرة السلة · NBA</div>
        </div>
        <div class="tt-bar-wrap">
          <div class="tt-bar-t"><i style="width:44%"></i></div>
          <div class="tt-trend-num">44,600 مشاهدة</div>
        </div>
        <span class="tt-vel down">▼ -3٪</span>
      </div>
    </div>

    <!-- جانب: النشرة الذكية -->
    <div class="smart-newsletter">
      <div class="sn-head">
        <h3>نشرة <span>الصافرة الذكية</span></h3>
        <p>موجز يومي مخصص لاهتماماتك — تكتبه خوارزمية SPOMEXA وتراجعه غرفة التحرير، كل صباح في بريدك.</p>
      </div>
      <div class="sn-body">
        <div style="font-size:.73rem;color:var(--white3);margin-bottom:.5rem">اختر اهتماماتك:</div>
        <div class="sn-prefs">
          <span class="pref-tag on">⚽ كرة القدم</span>
          <span class="pref-tag">🏀 السلة</span>
          <span class="pref-tag on">🏆 مونديال</span>
          <span class="pref-tag">🎾 التنس</span>
          <span class="pref-tag">🏎 F1</span>
          <span class="pref-tag">🥊 ملاكمة</span>
          <span class="pref-tag on">🌙 عربي</span>
          <span class="pref-tag">🏋 ألعاب القوى</span>
        </div>
        <form class="sn-form" onsubmit="event.preventDefault();this.querySelector('.sn-submit').textContent='تم الاشتراك ✓';this.querySelector('.sn-submit').style.background='var(--green)';this.querySelector('.sn-submit').style.color='var(--void)';">
          <label for="sn-email" style="position:absolute;width:1px;height:1px;overflow:hidden">البريد الإلكتروني</label>
          <input id="sn-email" class="sn-input" type="email" placeholder="بريدك الإلكتروني" required>
          <button type="submit" class="sn-submit">اشترك مجاناً</button>
          <p class="sn-note">رسالة واحدة يومياً · لا إزعاج · إلغاء في أي وقت</p>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- ===== بروموشن رئيس التحرير ===== -->
<div class="editor-banner">
  <div class="eb-inner">
    <div class="eb-avatar">ر.ت</div>
    <div class="eb-text">
      <span class="eb-tag">مقال رئيس التحرير · يونيو 2026</span>
      <h2>الصحافة الرياضية لم تمُت — لكنها تتحوّل أمام أعيننا</h2>
      <p>لماذا بنينا SPOMEXA؟ وكيف نرى مستقبل الصحافة في عالم تكتب فيه الخوارزميات بسرعة البرق؟ وما الخط الأحمر الذي لن نتجاوزه بين الآلة والإنسان؟</p>
    </div>
    <a href="editor.html" class="eb-cta">اقرأ المقال كاملاً ←</a>
  </div>
</div>

</main>

<!-- التذييل -->
<footer>
  <div class="foot-top">
    <div class="foot-brand">
      <h2>SPOMEXA</h2>
      <p>أول منصة رياضية عالمية تعتمد الذكاء الاصطناعي كاملاً في غرفة أخبارها مع مراجعة بشرية تضمن الدقة والمصداقية.</p>
      <nav class="foot-social-full" aria-label="حساباتنا الاجتماعية">
        <a href="https://x.com/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="X"><svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.763l7.737-8.835L2.418 2.25H8.08l4.261 5.636L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
        <a href="https://instagram.com/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="إنستغرام"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></a>
        <a href="https://tiktok.com/@spomexa" class="fsc" target="_blank" rel="noopener" aria-label="تيك توك"><svg viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.15 8.15 0 004.77 1.52V6.72a4.85 4.85 0 01-1-.03z"/></svg></a>
        <a href="https://youtube.com/@spomexa" class="fsc" target="_blank" rel="noopener" aria-label="يوتيوب"><svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></a>
        <a href="https://facebook.com/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="فيسبوك"><svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg></a>
        <a href="https://wa.me/channel/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="واتساب"><svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></a>
        <a href="https://t.me/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="تيليجرام"><svg viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg></a>
        <a href="https://linkedin.com/company/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="لينكدإن"><svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
        <a href="https://snapchat.com/add/spomexa" class="fsc" target="_blank" rel="noopener" aria-label="سناب شات"><svg viewBox="0 0 24 24"><path d="M12.206.793c.99 0 4.347.276 5.93 3.821.5 1.17.385 3.269.288 4.745-.084 1.332.23 1.218 1.188 1.071.433-.067.88-.132 1.29-.07.73.11 1.095.702 1.095 1.112 0 .43-.312.74-1.177 1.006-.402.122-.952.24-1.26.36-.124.048-.312.12-.312.35 0 .234.165.54.467.856.604.63 1.548 1.548 1.548 2.702 0 1.018-.738 1.665-1.834 1.665-.432 0-.836-.095-1.19-.281-.427-.218-.762-.28-1.08-.28-.507 0-.794.21-.88.272-.518.378-1.084 1.283-2.37 1.748a4.783 4.783 0 01-1.64.277c-.58 0-1.138-.087-1.64-.262-.43-.151-.875-.517-.875-1.163 0-.484.356-.855.785-.855a.56.56 0 01.21.04c.39.144.8.233 1.275.233.454 0 .935-.088 1.307-.26.286-.132.517-.342.517-.667 0-.463-.41-.638-.793-.784-.357-.135-.74-.279-.962-.51-.173-.181-.225-.37-.225-.53 0-.48.436-.83.891-.83.096 0 .188.015.276.043.167.054.386.143.62.143a.55.55 0 00.363-.133l.025-.024a3.8 3.8 0 00-.018-.318c-.133-1.528-.296-3.426.193-4.727C9.49 1.046 12.207.793 12.207.793z"/></svg></a>
        <a href="https://threads.net/@spomexa" class="fsc" target="_blank" rel="noopener" aria-label="ثريدز"><svg viewBox="0 0 24 24"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 013.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.583-1.313-.877-2.39-.882h-.018c-.87 0-1.952.239-2.685 1.307l-1.699-1.13c.994-1.487 2.594-2.306 4.384-2.306h.023c3.737.02 5.958 2.315 5.958 6.165v.037c0 1.215-.154 2.316-.46 3.302.418.387.748.828.978 1.317C20.43 18.143 20.478 21.066 18 23.43 16.45 24.942 14.537 24.99 12.186 24z"/></svg></a>
      </nav>
    </div>
    <div class="foot-col">
      <h4>الرياضات</h4>
      <ul>
        <li><a href="#">⚽ كرة القدم</a></li>
        <li><a href="#">🏀 كرة السلة</a></li>
        <li><a href="#">🎾 التنس</a></li>
        <li><a href="#">🏎 الفورمولا 1</a></li>
        <li><a href="#">🥊 الملاكمة</a></li>
        <li><a href="#">🏊 السباحة</a></li>
        <li><a href="#">🏋 ألعاب القوى</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>المحتوى</h4>
      <ul>
        <li><a href="#">📊 إحصاءات وتحليل</a></li>
        <li><a href="#">🔄 انتقالات</a></li>
        <li><a href="#">🏆 مونديال 2026</a></li>
        <li><a href="#">🌙 كرة عربية</a></li>
        <li><a href="#">📹 فيديو وتقارير</a></li>
        <li><a href="#">◆ SPOMEXA Intelligence</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>عن SPOMEXA</h4>
      <ul>
        <li><a href="editor.html">✒ مقال رئيس التحرير</a></li>
        <li><a href="#">سياسة الذكاء الاصطناعي</a></li>
        <li><a href="#">ميثاق الدقة</a></li>
        <li><a href="#">تواصل معنا</a></li>
        <li><a href="#">الخصوصية</a></li>
        <li><a href="#">المحور الاجتماعي</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>الخدمات</h4>
      <ul>
        <li><a href="#">نشرة الصافرة الذكية</a></li>
        <li><a href="#">دليل كأس العالم 2026</a></li>
        <li><a href="#">حاسبة التأهل</a></li>
        <li><a href="#">مقارنة اللاعبين</a></li>
        <li><a href="#">أرشيف الإحصاءات</a></li>
      </ul>
    </div>
  </div>
  <div class="foot-bottom">
    <span>© 2026 SPOMEXA · المحتوى بواسطة <b>◆ SPOMEXA AI</b> وخاضع للمراجعة البشرية · جميع الحقوق محفوظة</span>
    <div class="foot-badges">
      <span class="fbadge green">◆ AI POWERED</span>
      <span class="fbadge gold">🏆 AWARD 2026</span>
      <span class="fbadge">RTL ✓</span>
    </div>
  </div>
</footer>

<script>
/* ===== عدادات الإحصاءات ===== */
function countUp(id, target, suffix, duration) {
  const el = document.getElementById(id);
  if (!el) return;
  let start = 0;
  const step = target / (duration / 16);
  const timer = setInterval(() => {
    start += step;
    if (start >= target) { start = target; clearInterval(timer); }
    el.textContent = Math.floor(start).toLocaleString('ar') + (suffix || '');
  }, 16);
}

// تشغيل العدادات عند الظهور
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      countUp('cnt-matches',  1247, '+', 1800);
      countUp('cnt-goals',    388,  '+', 1600);
      countUp('cnt-countries',148,  '',  2000);
      countUp('cnt-readers',  24700,'+', 2200);
      observer.disconnect();
    }
  });
}, { threshold: 0.3 });
const statsEl = document.getElementById('cnt-matches');
if (statsEl) observer.observe(statsEl.closest('.stats-dashboard'));

/* ===== مضاعفة الأشرطة ===== */
['bkTrack','ltTrack'].forEach(id => {
  const el = document.getElementById(id);
  if (el) el.innerHTML += el.innerHTML;
});

/* ===== أزرار الرياضة ===== */
document.querySelectorAll('.sport-pill').forEach(btn => {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.sport-pill').forEach(b => b.classList.remove('on'));
    this.classList.add('on');
  });
});

/* ===== تفضيلات النشرة ===== */
document.querySelectorAll('.pref-tag').forEach(tag => {
  tag.addEventListener('click', function() {
    this.classList.toggle('on');
  });
});

/* ===== تحريك الأشرطة عند التمرير ===== */
const statBars = document.querySelectorAll('.sfill, .pred-bar-fill, .tt-bar-t i, .region-bar-fill');
const barObserver = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.style.transition = 'width 1s cubic-bezier(.4,0,.2,1)';
    }
  });
}, { threshold: 0.1 });
statBars.forEach(b => barObserver.observe(b));
</script>
</body>
</html>

/* ===== WordPress Dynamic Elements ===== */
.wp-post-image{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.news-card:hover .wp-post-image{transform:scale(1.04)}
.aligncenter{display:block;margin:1.5rem auto}
.alignleft{float:right;margin:0 0 1rem 1.5rem}
.alignright{float:left;margin:0 1.5rem 1rem 0}
.wp-caption{margin-bottom:1rem}
.wp-caption-text{font-size:.75rem;color:var(--white3);margin-top:.3rem;text-align:center}
.entry-content p{margin-bottom:1.5rem;font-size:1rem;line-height:1.85;color:var(--white2)}
.entry-content p:first-of-type{font-size:1.08rem;color:var(--white)}
.entry-content h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--white);margin:2.5rem 0 .8rem;padding-inline-start:.9rem;border-inline-start:3px solid var(--gold)}
.entry-content h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--white);margin:2rem 0 .6rem}
.entry-content blockquote{margin:2rem 0;padding:1.2rem 1.5rem;background:rgba(240,192,64,.06);border-inline-start:4px solid var(--gold);border-radius:0 var(--r) var(--r) 0}
.entry-content a{color:var(--gold);text-decoration:underline}
.entry-content a:hover{color:var(--gold2)}
.entry-content strong{color:var(--white);font-weight:600}
.entry-content img{border:1px solid var(--white4);border-radius:var(--r);margin:1.5rem auto;max-width:100%}
.entry-content ul,.entry-content ol{margin:1rem 0 1rem 1.5rem;color:var(--white2)}
.entry-content li{margin-bottom:.4rem}
nav.fieldline .current-menu-item>a{color:var(--gold)}
nav.fieldline .current-menu-item>a::after{content:'';position:absolute;bottom:0;left:.8rem;right:.8rem;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* single article */
.article-wrap{max-width:880px;margin:2rem auto;padding:0 1.5rem}
.article-header{margin-bottom:2rem}
.article-kicker{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.article-kicker::before{content:'';width:22px;height:1.5px;background:var(--gold)}
.article-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.25;margin-bottom:.8rem}
.article-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;color:var(--white3);flex-wrap:wrap;margin-bottom:1.5rem}
.article-meta .ai-tag{color:var(--green)}
.article-feat-img{border:1px solid var(--white4);border-radius:var(--r);overflow:hidden;margin-bottom:2rem;max-height:500px}
.article-feat-img img{width:100%;height:auto;max-height:500px;object-fit:cover}