/* ═══════════════════════════════════════════════════════════════════
   نيكسس ميديا — أنماطُ صفحة الباقات   (6 نوفمبر 2026)

   **لماذا صفحةٌ بإخراجٍ خاص:** وكالةُ محتوًى تبيع محتوًى، وصفحتُها كانت
   خمسَ عشرةَ بطاقةً متطابقةَ النصّ: أربعةُ بنودٍ مكرَّرةٍ اثنتي عشرةَ مرّةً
   حرفيّاً، وصفرُ صورةٍ وصفرُ فيديو. فبدت «معدومة» وهي ممتلئة — الامتلاءُ
   تكرارٌ لا معلومة.

   ولا عملَ منشورٌ يُعرَض بعد، فلا تُفبرَك عيّنات. **البرهانُ هو الإخراجُ
   نفسُه**: صفحةٌ مصنوعةٌ بعنايةٍ تُثبت الحرفةَ أكثرَ من جملةٍ تدّعيها.

   وكلُّ لونٍ هنا من رموز site.css، فيعمل الوضعُ الليليُّ بلا سطرٍ إضافيّ —
   وما استُحدث من رموزٍ عُرّف في الوضعين (فخُّ المتغيّر غير المعرَّف).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --mk-ribbon:#F1E7DC;            /* أرضُ شريط الشهر على العاج */
  --mk-piece:rgba(107,51,82,.14); /* القطعةُ قبل أن تُنشَر */
  --mk-glow:rgba(122,95,34,.20);  /* وهجُ الذهبيّ */
  /* **حبرُ ما يجلس على --head:** الرمزُ ينقلب ليلاً (باذنجانيٌّ غامقٌ نهاراً،
     ورديٌّ فاتحٌ ليلاً)، فنصٌّ أبيضُ ثابتٌ فوقه يختفي. قِستُ التبويبَ الفعّال
     ليلاً: تباين 1.19 والمطلوب 4.5. فالحبرُ رمزٌ يُقلَب معه. */
  --mk-on-head:#FFFDF8;
}
:root[data-theme="dark"]{
  --mk-ribbon:#241A26;
  --mk-piece:rgba(243,230,236,.13);
  --mk-glow:rgba(216,192,138,.18);
  --mk-on-head:#2A1520;
}

/* ─────────── 1 · الافتتاحيّة ─────────── */
.mkx-hero{
  position:relative; overflow:hidden;
  background:var(--grad-plum); color:#F7F3EA;
  padding-block:clamp(44px,7vw,84px);
}
.mkx-hero::after{                    /* شعاعٌ ذهبيٌّ خافتٌ يكسر سطحَ اللون */
  content:""; position:absolute; inset-block:-40%; inset-inline-end:-10%;
  width:52%; background:radial-gradient(ellipse at center,var(--mk-glow),transparent 68%);
  pointer-events:none;
}
.mkx-hero > .wrap{position:relative; z-index:1}

.mkx-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--lat); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-peak); margin:0 0 14px;
}
.mkx-badge .tri{                     /* مثلّثُ التشغيل — علامةُ نيكسس ميديا */
  width:0; height:0; border-block:5px solid transparent;
  border-inline-end:8px solid var(--gold-peak);
}
:root:not([dir="rtl"]) .mkx-badge .tri{border-inline-end:0; border-inline-start:8px solid var(--gold-peak)}

.mkx-h1{
  font-family:var(--disp); font-weight:700; line-height:1.15;
  font-size:clamp(30px,5.2vw,58px); margin:0 0 14px; text-wrap:balance; color:#FFFDF8;
}
.mkx-h1 em{font-style:normal; color:var(--gold-peak)}
.mkx-lead{
  max-width:60ch; margin:0; color:#EADDE5; font-size:clamp(15px,1.5vw,18px); line-height:1.75;
}

/* ─────────── 2 · شريطُ الشهر المتحرّك ─────────── */
.mkx-ribbon{margin-block-start:clamp(26px,4vw,42px)}
.mkx-rib-cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 10px; color:#D9C7D3; font-size:.86rem;
}
.mkx-rib-cap b{color:var(--gold-peak); font-weight:600}

.mkx-weeks{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:14px; border-radius:16px;
  background:rgba(23,12,20,.30); border:1px solid rgba(232,217,174,.20);
}
.mkx-week{min-width:0}
.mkx-week > span{
  display:block; font-family:var(--lat); font-size:.68rem; letter-spacing:.12em;
  color:#C6B0BF; margin:0 0 8px; text-transform:uppercase;
}
.mkx-pieces{display:flex; flex-wrap:wrap; gap:5px}

/* القطعةُ: مربّعٌ منشورٌ أو شريطٌ ريلز — تُضيء بالتتابع فيُرى إيقاعُ الشهر */
.mkx-p{
  border-radius:5px; background:var(--mk-piece);
  animation:mkxLight 11s linear infinite;
}
.mkx-p.post{width:16px; height:16px}
.mkx-p.reel{width:10px; height:22px; border-radius:4px}

@keyframes mkxLight{
  0%,4%    {background:var(--mk-piece); box-shadow:none}
  9%,34%   {background:var(--gold-peak); box-shadow:0 0 10px rgba(232,217,174,.5)}
  44%,100% {background:rgba(232,217,174,.42); box-shadow:none}
}

/* المراحلُ الأربع تمشي تحت الشريط بالترتيب نفسِه */
.mkx-stages{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-block-start:12px; list-style:none; padding:0;
}
.mkx-stages li{
  position:relative; padding-block-start:14px; color:#D9C7D3; font-size:.84rem; line-height:1.5;
}
.mkx-stages li::before{                /* الخيطُ الذي يمتلئ */
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  border-radius:3px; background:rgba(232,217,174,.22); overflow:hidden;
}
.mkx-stages li::after{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0; height:3px; width:0;
  border-radius:3px; background:var(--gold-peak);
  animation:mkxFill 11s linear infinite;
}
.mkx-stages b{display:block; color:#FFFDF8; font-weight:600; font-size:.92rem}
@keyframes mkxFill{0%,2%{width:0} 20%,100%{width:100%}}

/* التتابع: أسبوعٌ بعد أسبوع، ومرحلةٌ بعد مرحلة */
.mkx-week:nth-child(1) .mkx-p{animation-delay:calc(var(--i,0) * .09s + 0s)}
.mkx-week:nth-child(2) .mkx-p{animation-delay:calc(var(--i,0) * .09s + 1.6s)}
.mkx-week:nth-child(3) .mkx-p{animation-delay:calc(var(--i,0) * .09s + 3.2s)}
.mkx-week:nth-child(4) .mkx-p{animation-delay:calc(var(--i,0) * .09s + 4.8s)}
.mkx-stages li:nth-child(1)::after{animation-delay:0s}
.mkx-stages li:nth-child(2)::after{animation-delay:1.6s}
.mkx-stages li:nth-child(3)::after{animation-delay:3.2s}
.mkx-stages li:nth-child(4)::after{animation-delay:4.8s}

/* **الحركةُ تُطفأ لمن طلب تقليلَها** — ويبقى المعنى كاملاً ساكناً */
@media (prefers-reduced-motion:reduce){
  .mkx-p{animation:none; background:rgba(232,217,174,.42)}
  .mkx-stages li::after{animation:none; width:100%}
}

/* ─────────── 3 · «في كل باقة» ─────────── */
.mkx-common{
  margin-block:clamp(28px,4vw,44px); padding:clamp(20px,3vw,30px);
  background:var(--surface); border:1px solid var(--edge); border-radius:18px;
}
.mkx-common > h2{
  font-family:var(--disp); font-size:clamp(19px,2.2vw,25px); margin:0 0 4px; color:var(--head);
}
.mkx-common > p.sub{margin:0 0 18px; color:var(--mute); font-size:.95rem}
.mkx-incl{
  display:grid; gap:12px 22px; list-style:none; padding:0; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.mkx-incl li{display:flex; gap:10px; align-items:flex-start; font-size:.95rem; line-height:1.6}
.mkx-incl .tick{
  flex:0 0 auto; width:19px; height:19px; margin-block-start:3px; border-radius:50%;
  background:var(--gold-wash); border:1px solid var(--gold);
  display:grid; place-items:center; color:var(--gold); font-size:11px; font-weight:700;
}
.mkx-incl b{display:block; color:var(--ink)}
.mkx-incl span{color:var(--mute); font-size:.88rem}

.mkx-money{
  margin-block-start:18px; padding-block-start:16px; border-block-start:1px dashed var(--edge);
  color:var(--mute); font-size:.92rem; line-height:1.75;
}
.mkx-money b{color:var(--ink)}

/* ─────────── 4 · تبويبُ القطاعات (يعمل بلا جافاسكربت) ─────────── */
.mkx-tabs{margin-block-start:clamp(26px,4vw,40px)}
.mkx-tabs > input{position:absolute; opacity:0; pointer-events:none}
.mkx-tabnav{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;
  border-block-end:1px solid var(--edge); padding-block-end:12px;
}
.mkx-tabnav label{
  cursor:pointer; padding:9px 18px; border-radius:999px; font-size:.95rem; font-weight:600;
  color:var(--mute); border:1px solid var(--edge); background:var(--surface);
  transition:background .18s, color .18s, border-color .18s;
}
.mkx-tabnav label:hover{border-color:var(--gold)}
.mkx-panel{display:none}
#mkt-0:checked ~ .mkx-tabnav label[for="mkt-0"],
#mkt-1:checked ~ .mkx-tabnav label[for="mkt-1"],
#mkt-2:checked ~ .mkx-tabnav label[for="mkt-2"],
#mkt-3:checked ~ .mkx-tabnav label[for="mkt-3"],
#mkt-4:checked ~ .mkx-tabnav label[for="mkt-4"],
#mkt-5:checked ~ .mkx-tabnav label[for="mkt-5"]{
  background:var(--head); color:var(--mk-on-head); border-color:var(--head);
}
#mkt-0:checked ~ .mkx-panes > .mkx-panel:nth-child(1),
#mkt-1:checked ~ .mkx-panes > .mkx-panel:nth-child(2),
#mkt-2:checked ~ .mkx-panes > .mkx-panel:nth-child(3),
#mkt-3:checked ~ .mkx-panes > .mkx-panel:nth-child(4),
#mkt-4:checked ~ .mkx-panes > .mkx-panel:nth-child(5),
#mkt-5:checked ~ .mkx-panes > .mkx-panel:nth-child(6){display:block}
/* بلا جافاسكربت **وبلا CSS** تبقى كلُّ الألواح ظاهرةً — لا محتوى يُحجَب */
.mkx-tabnav label:focus-within{outline:2px solid var(--gold); outline-offset:2px}
.mkx-tabs > input:focus-visible + .mkx-tabnav label,
.mkx-tabs > input:focus-visible ~ .mkx-tabnav label[for]{outline:none}

.mkx-panel > .lead{color:var(--mute); margin:0 0 18px; font-size:.95rem}

/* ─────────── 5 · البطاقةُ النحيفة ─────────── */
.mkx-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.mkx-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--edge); border-radius:18px;
  padding:22px 20px 20px; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.mkx-card:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:0 10px 26px rgba(42,21,32,.09)}
.mkx-card.is-top{border-color:var(--head); box-shadow:0 0 0 1px var(--head) inset}
.mkx-tag{
  position:absolute; inset-block-start:-10px; inset-inline-start:18px;
  background:var(--head); color:var(--mk-on-head); font-size:.72rem; font-weight:700;
  padding:3px 12px; border-radius:999px; letter-spacing:.02em;
}
.mkx-name{font-family:var(--disp); font-size:1.12rem; margin:0 0 12px; color:var(--ink); line-height:1.35}

.mkx-nums{display:flex; gap:8px; margin:0 0 14px}
.mkx-num{
  flex:1 1 0; min-width:0; text-align:center; padding:11px 6px; border-radius:12px;
  background:var(--taupe-wash); border:1px solid var(--edge-2);
}
.mkx-num b{display:block; font-family:var(--lat); font-size:1.45rem; line-height:1; color:var(--head)}
.mkx-num span{display:block; font-size:.74rem; color:var(--mute); margin-block-start:5px}
.mkx-only{
  margin:0 0 14px; padding:10px 12px; border-radius:12px; font-size:.86rem; line-height:1.55;
  background:var(--gold-wash); border:1px solid var(--edge-2); color:var(--ink);
}

.mkx-price{margin:auto 0 4px; padding-block-start:14px; border-block-start:1px solid var(--edge)}
.mkx-price .v{font-family:var(--lat); font-size:1.9rem; font-weight:600; color:var(--ink); line-height:1}
.mkx-price .c{font-size:.9rem; color:var(--mute); margin-inline-start:4px}
.mkx-price .t{display:block; font-size:.78rem; color:var(--faint); margin-block-start:5px}
.mkx-term{margin:8px 0 14px; font-size:.82rem; color:var(--mute)}
.mkx-term b{color:var(--ink)}
.mkx-card .btn{width:100%; justify-content:center}

/* ─────────── 6 · معرضُ الأعمال (يظهر حين تُرفَع أعمالٌ فقط) ─────────── */
.mkx-work{margin-block:clamp(30px,4vw,48px)}
.mkx-work h2{font-family:var(--disp); font-size:clamp(19px,2.2vw,25px); margin:0 0 4px; color:var(--head)}
.mkx-work p.sub{margin:0 0 18px; color:var(--mute); font-size:.95rem}
.mkx-wgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.mkx-wgrid figure{margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--edge); background:var(--surface)}
.mkx-wgrid img{display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover}

/* ─────────── الجوّال ─────────── */
@media (max-width:720px){
  .mkx-weeks,.mkx-stages{grid-template-columns:repeat(2,1fr)}
  .mkx-stages li{font-size:.8rem}
  .mkx-rib-cap{flex-direction:column; gap:4px}
}
@media (max-width:420px){
  .mkx-weeks{grid-template-columns:1fr 1fr; gap:8px; padding:11px}
  .mkx-p.post{width:14px; height:14px}
  .mkx-p.reel{width:9px; height:19px}
}