/* ==========================================================================
   الاشتراك الذهبي — /unlimited/
   أسود دافئ وذهبي، والرمز ∞ هو الهوية.
   ========================================================================== */
.mkg {
  --bg: #080705; --bg2: #0E0C08; --card: #13110C; --line: rgba(246, 201, 69, .14); --line2: rgba(255, 249, 232, .08);
  --cream: #FFF9E8; --muted: rgba(255, 249, 232, .66); --gold: #F6C945; --gold2: #E3AE22; --gold3: #FFE08A;
  direction: rtl; text-align: right; color: var(--cream); background: var(--bg);
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.mkg *, .mkg *::before, .mkg *::after { box-sizing: border-box; }
.mkg :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
.mkg :where(h1, h2, h3) { font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; color: inherit !important; }
.mkg ul, .mkg ol { list-style: none; }
.mkg a { text-decoration: none !important; }
.mkg :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.mkg-page, body.mkg-page .uicore-body-content { background: #080705 !important; }
.mkg-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mkg h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; line-height: 1.28; }
.mkg-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.mkg-head span, .mkg-kicker { display: inline-block; font-size: 14px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }

/* الأزرار */
.mkg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 32px; border-radius: 999px; background: linear-gradient(135deg, var(--gold3), var(--gold) 45%, var(--gold2)); color: #120E04 !important; -webkit-text-fill-color: #120E04 !important; font-size: 17px; font-weight: 900; box-shadow: 0 18px 40px rgba(246, 201, 69, .28), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden; }
.mkg-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: mkgShine 3.2s ease-in-out infinite; }
@keyframes mkgShine { 0%, 60% { left: -80px; } 100% { left: 110%; } }
.mkg-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(246, 201, 69, .38), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mkg-btn svg { width: 18px !important; height: 18px !important; flex: none; }
.mkg-ghost { display: inline-flex; align-items: center; min-height: 58px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(255, 249, 232, .18); color: var(--cream) !important; -webkit-text-fill-color: var(--cream) !important; font-size: 16px; font-weight: 800; transition: border-color .2s ease; }
.mkg-ghost:hover { border-color: var(--gold); }

/* البطل */
.mkg-hero { position: relative; padding: 70px 0 40px; overflow: hidden; }
.mkg-aura { position: absolute; inset: -30% -20% auto; height: 130%; pointer-events: none; background: radial-gradient(32% 42% at 28% 42%, rgba(246, 201, 69, .2), transparent 70%), radial-gradient(28% 36% at 82% 20%, rgba(227, 174, 34, .1), transparent 70%); animation: mkgAura 10s ease-in-out infinite alternate; }
@keyframes mkgAura { to { transform: translate3d(0, 20px, 0) scale(1.06); } }
.mkg-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.mkg-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 999px; background: rgba(246, 201, 69, .1); border: 1px solid rgba(246, 201, 69, .35); color: var(--gold); font-size: 14px; font-weight: 900; }
.mkg-badge i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #120E04; font-style: normal; font-size: 18px; }
.mkg-copy h1 { margin-top: 18px !important; font-size: clamp(30px, 3.8vw, 50px) !important; font-weight: 900 !important; line-height: 1.16 !important; text-wrap: balance; }
.mkg-copy h1 em { display: block; font-style: normal; background: linear-gradient(90deg, var(--gold3), var(--gold) 50%, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mkg-lead { margin-top: 18px !important; max-width: 580px; font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); }
.mkg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mkg-price.is-center { justify-content: center; }
.mkg-price s { font-size: 22px; color: rgba(255, 249, 232, .38); font-weight: 700; direction: ltr; }
.mkg-price b { font-size: 56px; font-weight: 900; line-height: 1; color: var(--gold); direction: ltr; }
.mkg-price em { font-style: normal; padding: 5px 14px; border-radius: 999px; background: rgba(62, 207, 122, .14); color: #7BE3A0; font-size: 14px; font-weight: 900; }
.mkg-terms { margin-top: 8px !important; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.mkg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mkg-member { display: flex; align-items: center; gap: 8px; margin-top: 16px !important; font-size: 15px; font-weight: 800; color: #7BE3A0; }
.mkg-member i { width: 9px; height: 9px; border-radius: 50%; background: #3ECF7A; box-shadow: 0 0 0 4px rgba(62, 207, 122, .2); }

.mkg-visual { position: relative; height: 480px; }
.mkg-ring { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(246, 201, 69, .16), transparent 62%); }
.mkg-ring::before, .mkg-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(246, 201, 69, .28); }
.mkg-ring::after { inset: 40px; border-style: dashed; border-color: rgba(246, 201, 69, .2); animation: mkgSpin 40s linear infinite; }
@keyframes mkgSpin { to { transform: rotate(360deg); } }
.mkg-ring span { font-size: 150px; font-weight: 900; line-height: 1; color: rgba(246, 201, 69, .12); }
.mkg-fan { position: absolute; inset: 0; }
.mkg-fan-c { position: absolute; top: 50%; left: 50%; width: 190px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); border: 1px solid rgba(246, 201, 69, .25);
  transform: translate(-50%, -50%) translateX(calc((var(--i) - (var(--n) - 1) / 2) * -96px)) translateY(calc(max(var(--i) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--i)) * 22px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * -8deg));
  z-index: calc(10 - max(var(--i) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--i)));
  animation: mkgFloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes mkgFloat { 50% { margin-top: -8px; } }
.mkg-fan-c img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }

.mkg-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px !important; }
.mkg-stats li { padding: 18px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; }
.mkg-stats b { font-size: 30px; font-weight: 900; color: var(--gold); line-height: 1.1; direction: ltr; text-align: right; }
.mkg-stats span { font-size: 14px; font-weight: 700; color: var(--muted); }

/* لماذا */
.mkg-why { padding: 80px 0; border-top: 1px solid var(--line2); }
.mkg-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mkg-why-grid article { padding: 26px 24px; border-radius: 24px; background: linear-gradient(165deg, #16130D, #0F0D09); border: 1px solid var(--line); }
.mkg-why-grid i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(246, 201, 69, .12); color: var(--gold); font-style: normal; font-size: 26px; font-weight: 900; }
.mkg-why-grid i svg { width: 24px; height: 24px; }
.mkg-why-grid h3 { margin-top: 16px !important; font-size: 20px; font-weight: 900; }
.mkg-why-grid p { margin-top: 6px !important; font-size: 15px; color: var(--muted); }

/* المكتبة */
.mkg-lib { padding: 80px 0; background: var(--bg2); border-top: 1px solid var(--line2); scroll-margin-top: 80px; }
.mkg-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; margin: -12px auto 30px; padding: 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.mkg-filters button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px !important; border-radius: 11px !important; border: 0 !important; background: transparent !important; color: var(--muted) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 800 !important; cursor: pointer; box-shadow: none !important; }
.mkg-filters button small { font-size: 12px; opacity: .7; }
.mkg-filters button.is-on { background: var(--gold) !important; color: #120E04 !important; }
.mkg-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mkg-item { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line2); transition: transform .25s ease, border-color .25s ease; }
.mkg-item:hover { transform: translateY(-3px); border-color: rgba(246, 201, 69, .45); }
.mkg-item[hidden] { display: none !important; }
.mkg-item-img { position: relative; display: block; aspect-ratio: 4 / 5; padding: 8px; border-radius: 14px; overflow: hidden; background: radial-gradient(80% 70% at 50% 30%, rgba(246, 201, 69, .1), transparent 70%), #0A0907; }
.mkg-item-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.mkg-item-img em { position: absolute; top: 8px; right: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(8, 7, 5, .8); border: 1px solid rgba(246, 201, 69, .35); color: var(--gold); font-style: normal; font-size: 11.5px; font-weight: 800; }
.mkg-item h3 { padding: 0 4px; font-size: 14.5px; font-weight: 800; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1em; }
.mkg-item-val { padding: 0 4px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.mkg-item-val s { color: rgba(255, 249, 232, .5); direction: ltr; display: inline-block; }

/* الكورس */
.mkg-course { padding: 80px 0; border-top: 1px solid var(--line2); }
.mkg-course-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; padding: 34px; border-radius: 32px; background: radial-gradient(60% 100% at 100% 0%, rgba(246, 201, 69, .12), transparent 60%), var(--card); border: 1px solid var(--line); }
.mkg-course-img { display: block; border-radius: 22px; overflow: hidden; background: #0A0907; padding: 14px; }
.mkg-course-img img { width: 100% !important; height: auto !important; display: block; border-radius: 12px; }
.mkg-course h2 { font-size: clamp(24px, 2.8vw, 34px); }
.mkg-course p { margin-top: 12px !important; color: var(--muted); }
.mkg-course ul { display: grid; gap: 10px; margin-top: 20px !important; }
.mkg-course li { position: relative; padding-inline-start: 34px; font-weight: 700; }
.mkg-course li::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 22px; height: 22px; border-radius: 50%; background: rgba(246, 201, 69, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6C945' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat; }

/* الخطوات */
.mkg-how { padding: 80px 0; background: var(--bg2); border-top: 1px solid var(--line2); }
.mkg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mkg-steps li { padding: 26px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.mkg-steps b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--gold); color: #120E04; font-size: 20px; font-weight: 900; }
.mkg-steps h3 { margin-top: 14px !important; font-size: 20px; font-weight: 900; }
.mkg-steps p { margin-top: 6px !important; color: var(--muted); font-size: 15.5px; }

/* الختام */
.mkg-final { padding: 90px 0; }
.mkg-final-card { position: relative; max-width: 820px; margin: 0 auto; padding: 50px 40px; border-radius: 36px; text-align: center; overflow: hidden; background: radial-gradient(70% 90% at 50% 0%, rgba(246, 201, 69, .22), transparent 65%), linear-gradient(170deg, #1A150A, #0E0C08); border: 1px solid rgba(246, 201, 69, .4); box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.mkg-final-inf { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 220px; font-weight: 900; line-height: 1; color: rgba(246, 201, 69, .06); pointer-events: none; }
.mkg-final-card h2 { position: relative; font-size: clamp(24px, 3vw, 36px); }
.mkg-final-card .mkg-btn { margin-top: 24px; }
.mkg-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 22px !important; }
.mkg-trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--muted); }
.mkg-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* الأسئلة */
.mkg-faq { padding: 0 0 110px; }
.mkg-qs { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.mkg-qs details { border-radius: 18px; background: var(--card); border: 1px solid var(--line); padding: 0 22px; }
.mkg-qs summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 17px; font-weight: 800; display: flex; justify-content: space-between; gap: 14px; }
.mkg-qs summary::-webkit-details-marker { display: none; }
.mkg-qs summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.mkg-qs details[open] summary::after { transform: rotate(45deg); }
.mkg-qs p { padding: 0 0 18px; color: var(--muted); }
.mkg-qs a { color: var(--gold) !important; font-weight: 800; }

/* الشريط الثابت */
.mkg-sticky { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9990; max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 20px; padding-inline-start: 22px; border-radius: 999px; background: rgba(19, 16, 10, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(246, 201, 69, .4); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); color: var(--cream) !important; transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.mkg-sticky.is-on { transform: none; }
.mkg-sticky span { display: grid; }
.mkg-sticky b { font-size: 15px; font-weight: 900; }
.mkg-sticky small { font-size: 13px; color: var(--gold); font-weight: 800; }
.mkg-sticky em { font-style: normal; display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: var(--gold); color: #120E04; font-size: 15px; font-weight: 900; white-space: nowrap; }

/* الظهور */
.mkg-js .mkg-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.mkg-js .mkg-rv.in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .mkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mkg-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .mkg-hero { padding: 40px 0 30px; }
  .mkg-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .mkg-visual { order: -1; height: 330px; }
  .mkg-ring { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .mkg-ring span { font-size: 110px; }
  .mkg-fan-c { width: 140px; transform: translate(-50%, -50%) translateX(calc((var(--i) - (var(--n) - 1) / 2) * -62px)) translateY(calc(max(var(--i) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--i)) * 16px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * -8deg)); }
  .mkg-stats { grid-template-columns: 1fr 1fr; }
  .mkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkg-course-grid { grid-template-columns: 1fr; padding: 22px; gap: 24px; }
  .mkg-course-img { max-width: 320px; }
  .mkg-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mkg-wrap { padding: 0 16px; }
  .mkg-price b { font-size: 46px; }
  .mkg-actions .mkg-btn, .mkg-actions .mkg-ghost { width: 100%; justify-content: center; }
  .mkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mkg-why-grid { grid-template-columns: 1fr; }
  .mkg-why, .mkg-lib, .mkg-course, .mkg-how { padding: 56px 0; }
  .mkg-final-card { padding: 38px 20px; border-radius: 28px; }
  .mkg-stats b { font-size: 24px; }
  .mkg-sticky { left: 10px; right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mkg-aura, .mkg-ring::after, .mkg-fan-c, .mkg-btn::after { animation: none !important; }
  .mkg-js .mkg-rv { opacity: 1; transform: none; transition: none; }
}