/*
 * Mokaab Theme CSS
 * سیستم متغیر، تم Dark/Light، توکن‌های Glassmorphism
 * پالت: Cyan Neon (#00d4e8) + Red Neon (#e8003a) + Gold (#e8b84b)
 */

/* ============================================================
   1. DESIGN TOKENS — Dark Mode (Default)
   ============================================================ */
:root {
    /* رنگ‌های اصلی — پالت مرجع (بهبودیافته: کمتر اشباع، چشم‌نوازتر) */
    --mk-primary:         #00d4e8;
    --mk-primary-hover:   #00b8cc;
    --mk-primary-muted:   rgba(0, 212, 232, 0.10);
    --mk-primary-glow:    rgba(0, 212, 232, 0.20);

    --mk-secondary:       #e8003a;
    --mk-secondary-muted: rgba(232, 0, 58, 0.10);
    --mk-secondary-glow:  rgba(232, 0, 58, 0.18);

    --mk-gold:            #e8b84b;
    --mk-gold-muted:      rgba(232, 184, 75, 0.13);
    --mk-gold-glow:       rgba(232, 184, 75, 0.24);

    /* پس‌زمینه — کمی گرم‌تر، کمتر خالص سیاه */
    --mk-bg:              #080810;
    --mk-bg-elevated:     #10101a;
    --mk-bg-card:         rgba(18, 18, 28, 0.70);

    /* متن — کمی گرم‌تر از سفید خالص */
    --mk-text:            #ede9e3;
    --mk-text-muted:      #8896a8;
    --mk-text-subtle:     #404858;

    /* مرزها */
    --mk-border:          rgba(255, 255, 255, 0.06);
    --mk-border-strong:   rgba(255, 255, 255, 0.12);

    /* Glassmorphism */
    --mk-glass-bg:        rgba(16, 16, 26, 0.60);
    --mk-glass-border:    rgba(255, 255, 255, 0.07);
    --mk-glass-blur:      20px;
    --mk-glass-shadow:    0 8px 40px rgba(0, 0, 0, 0.55);

    /* سایه */
    --mk-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.40);
    --mk-shadow-md:       0 8px 28px rgba(0, 0, 0, 0.50);
    --mk-shadow-lg:       0 20px 56px rgba(0, 0, 0, 0.60);
    --mk-shadow-glow:     0 0 32px rgba(0, 212, 232, 0.15);
    --mk-shadow-glow-r:   0 0 32px rgba(232, 0, 58, 0.15);

    /* رنگ‌های سرویس */
    --mk-wa-color:        #25D366;
    --mk-call-color:      #2563eb;
    --mk-seen-color:      rgba(255, 255, 255, 0.18);

    /* تایپوگرافی */
    --mk-font-body:       'Vazirmatn', system-ui, sans-serif;
    --mk-font-display:    'Vazirmatn', system-ui, sans-serif;
    --mk-font-size-xs:    0.75rem;
    --mk-font-size-sm:    0.875rem;
    --mk-font-size-md:    1rem;
    --mk-font-size-lg:    1.125rem;
    --mk-font-size-xl:    1.25rem;
    --mk-font-size-2xl:   1.5rem;
    --mk-font-size-3xl:   2rem;
    --mk-font-size-4xl:   2.5rem;
    --mk-font-size-5xl:   3.5rem;

    /* فاصله‌گذاری */
    --mk-space-1:   0.25rem;
    --mk-space-2:   0.5rem;
    --mk-space-3:   0.75rem;
    --mk-space-4:   1rem;
    --mk-space-5:   1.25rem;
    --mk-space-6:   1.5rem;
    --mk-space-8:   2rem;
    --mk-space-10:  2.5rem;
    --mk-space-12:  3rem;
    --mk-space-16:  4rem;
    --mk-space-20:  5rem;
    --mk-space-24:  6rem;

    /* شعاع گوشه */
    --mk-radius-sm:   6px;
    --mk-radius-md:   12px;
    --mk-radius-lg:   20px;
    --mk-radius-xl:   32px;
    --mk-radius-full: 9999px;

    /* انیمیشن */
    --mk-transition-fast:   150ms ease;
    --mk-transition-base:   250ms ease;
    --mk-transition-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --mk-container-width: 1200px;
    --mk-header-height:   72px;
}

/* ============================================================
   2. LIGHT MODE OVERRIDES
   ============================================================ */
body.mk-light-mode {
    /* لایت مود — کرم گرم به‌جای سفید خالص، اشباع کمتر */
    --mk-primary:         #0284a8;
    --mk-primary-hover:   #026e8e;
    --mk-primary-muted:   rgba(2, 132, 168, 0.09);
    --mk-primary-glow:    rgba(2, 132, 168, 0.18);

    --mk-secondary:       #cc1a44;
    --mk-secondary-muted: rgba(204, 26, 68, 0.09);
    --mk-secondary-glow:  rgba(204, 26, 68, 0.14);

    --mk-gold:            #c27b0a;
    --mk-gold-muted:      rgba(194, 123, 10, 0.11);
    --mk-gold-glow:       rgba(194, 123, 10, 0.18);

    /* پس‌زمینه کرم گرم — کمتر خستگی چشم */
    --mk-bg:              #f8f5f0;
    --mk-bg-elevated:     #ffffff;
    --mk-bg-card:         rgba(255, 253, 250, 0.95);

    /* متن — تیره ولی نه سیاه خالص */
    --mk-text:            #14121e;
    --mk-text-muted:      #48546a;
    --mk-text-subtle:     #9aa3b0;

    --mk-border:          rgba(0, 0, 0, 0.07);
    --mk-border-strong:   rgba(0, 0, 0, 0.13);

    --mk-glass-bg:        rgba(255, 253, 250, 0.85);
    --mk-glass-border:    rgba(0, 0, 0, 0.07);
    --mk-glass-shadow:    0 8px 36px rgba(0, 0, 0, 0.09);

    --mk-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.07);
    --mk-shadow-md:       0 8px 28px rgba(0, 0, 0, 0.09);
    --mk-shadow-lg:       0 20px 52px rgba(0, 0, 0, 0.13);
    --mk-shadow-glow:     0 0 32px rgba(2, 132, 168, 0.18);
    --mk-shadow-glow-r:   0 0 32px rgba(204, 26, 68, 0.14);

    --mk-seen-color:      #c8d0da;
}

/* ============================================================
   3. BASE STYLES
   ============================================================ */
body {
    font-family: var(--mk-font-body);
    font-size: var(--mk-font-size-md);
    line-height: 1.7;
    color: var(--mk-text);
    background-color: var(--mk-bg);
    direction: rtl;
    transition: background-color var(--mk-transition-slow),
                color var(--mk-transition-slow);
}

/* ============================================================
   4. CONTAINER
   ============================================================ */
.mk-container {
    width: 100%;
    max-width: var(--mk-container-width);
    margin-inline: auto;
    padding-inline: var(--mk-space-6);
}

@media (max-width: 768px) {
    .mk-container { padding-inline: var(--mk-space-4); }
}

/* ============================================================
   5. GLASSMORPHISM UTILITY
   ============================================================ */
.mk-glass {
    background: var(--mk-glass-bg);
    border: 1px solid var(--mk-glass-border);
    backdrop-filter: blur(var(--mk-glass-blur));
    -webkit-backdrop-filter: blur(var(--mk-glass-blur));
    box-shadow: var(--mk-glass-shadow);
}

/* ============================================================
   6. CARD
   ============================================================ */
.mk-card {
    background: var(--mk-bg-card);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    padding: var(--mk-space-6);
    box-shadow: var(--mk-shadow-sm);
    transition: box-shadow var(--mk-transition-base),
                border-color var(--mk-transition-base),
                transform var(--mk-transition-base);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mk-card:hover {
    box-shadow: var(--mk-shadow-md);
    border-color: var(--mk-border-strong);
    transform: translateY(-2px);
}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mk-space-2);
    padding: var(--mk-space-3) var(--mk-space-6);
    border-radius: var(--mk-radius-full);
    font-size: var(--mk-font-size-md);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--mk-transition-base);
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--mk-font-body);
}

.mk-btn-primary {
    background: #ffffff;
    color: #060608;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.mk-btn-primary:hover {
    background: var(--mk-primary);
    color: #060608;
    box-shadow: 0 8px 32px var(--mk-primary-glow);
    transform: translateY(-2px);
}

body.mk-light-mode .mk-btn-primary {
    background: var(--mk-primary);
    color: #ffffff;
    box-shadow: 0 4px 16px var(--mk-primary-glow);
}

body.mk-light-mode .mk-btn-primary:hover {
    background: var(--mk-primary-hover);
    box-shadow: 0 8px 28px var(--mk-primary-glow);
}

.mk-btn-outline {
    background: transparent;
    color: var(--mk-text);
    border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(5px);
}

.mk-btn-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

body.mk-light-mode .mk-btn-outline {
    color: var(--mk-text);
    border-color: rgba(0, 0, 0, 0.15);
    font-weight: 800;
}

body.mk-light-mode .mk-btn-outline:hover {
    background: var(--mk-text);
    border-color: var(--mk-text);
    color: #fff;
}

.mk-btn-ghost {
    background: transparent;
    color: var(--mk-text-muted);
    border-color: transparent;
}

.mk-btn-ghost:hover {
    background: var(--mk-glass-bg);
    color: var(--mk-text);
}

.mk-btn--lg { padding: 14px 40px; font-size: var(--mk-font-size-lg); }

/* ============================================================
   8. TYPOGRAPHY UTILITIES
   ============================================================ */
.mk-text-primary  { color: var(--mk-primary); }
.mk-text-muted    { color: var(--mk-text-muted); }
.mk-text-subtle   { color: var(--mk-text-subtle); }

.mk-heading-xl {
    font-size: clamp(4rem, 13vw, 9rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -2px;
}

.mk-heading-lg {
    font-size: clamp(var(--mk-font-size-2xl), 3.5vw, var(--mk-font-size-4xl));
    font-weight: 700;
    line-height: 1.2;
}

.mk-heading-md {
    font-size: clamp(var(--mk-font-size-xl), 2.5vw, var(--mk-font-size-3xl));
    font-weight: 700;
    line-height: 1.25;
}

/* ============================================================
   9. DIVIDER & BADGE
   ============================================================ */
.mk-divider {
    width: 100%;
    height: 1px;
    background: var(--mk-border);
    margin-block: var(--mk-space-8);
}

.mk-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    border-radius: var(--mk-radius-full);
    font-size: var(--mk-font-size-sm);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    color: var(--mk-primary);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    letter-spacing: 0.5px;
}

body.mk-light-mode .mk-badge {
    background: var(--mk-primary-muted);
    border-color: var(--mk-primary-muted);
    color: var(--mk-primary);
}

/* ============================================================
   10. WORDPRESS CONTENT
   ============================================================ */
.mk-content { max-width: 72ch; }
.mk-content p          { margin-bottom: var(--mk-space-4); }
.mk-content h2         { font-size: var(--mk-font-size-2xl); font-weight: 700; margin-top: var(--mk-space-10); margin-bottom: var(--mk-space-4); }
.mk-content h3         { font-size: var(--mk-font-size-xl); font-weight: 600; margin-top: var(--mk-space-8); margin-bottom: var(--mk-space-3); }
.mk-content a          { color: var(--mk-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mk-content a:hover    { color: var(--mk-primary-hover); }
.mk-content ul,
.mk-content ol         { padding-right: var(--mk-space-6); margin-bottom: var(--mk-space-4); }
.mk-content ul         { list-style: disc; }
.mk-content ol         { list-style: decimal; }
.mk-content li         { margin-bottom: var(--mk-space-2); }
.mk-content blockquote { border-right: 3px solid var(--mk-primary); padding-right: var(--mk-space-4); margin: var(--mk-space-8) 0; color: var(--mk-text-muted); font-style: italic; }
.mk-content img        { border-radius: var(--mk-radius-md); margin-block: var(--mk-space-6); }
.mk-content code       { font-family: monospace; font-size: 0.875em; background: var(--mk-bg-elevated); padding: 0.1em 0.4em; border-radius: var(--mk-radius-sm); }
.mk-content pre        { background: var(--mk-bg-elevated); padding: var(--mk-space-4); border-radius: var(--mk-radius-md); overflow-x: auto; margin-bottom: var(--mk-space-4); }
.mk-content pre code   { background: none; padding: 0; }

/* ============================================================
   11. HEADER
   ============================================================ */
.mk-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    height: var(--mk-header-height);
    display: flex;
    align-items: center;
    background: rgba(6, 6, 8, 0.75);
    border-bottom: 1px solid var(--mk-glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: background var(--mk-transition-slow),
                border-color var(--mk-transition-slow);
}

body.mk-light-mode .mk-header {
    background: rgba(253, 251, 247, 0.85);
}

.mk-header.mk-header--scrolled {
    background: rgba(6, 6, 8, 0.95);
    border-bottom-color: var(--mk-border);
    box-shadow: 0 1px 0 rgba(0, 229, 245, 0.08);
}

body.mk-light-mode .mk-header.mk-header--scrolled {
    background: rgba(253, 251, 247, 0.97);
}

.mk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mk-header__logo {
    display: flex;
    align-items: center;
    gap: var(--mk-space-3);
    font-size: var(--mk-font-size-xl);
    font-weight: 800;
    color: var(--mk-text);
    text-decoration: none;
    transition: opacity var(--mk-transition-fast);
}

.mk-header__logo:hover { opacity: 0.8; }
.mk-header__logo img { height: 40px; width: auto; }

.mk-nav__list {
    display: flex;
    align-items: center;
    gap: var(--mk-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-nav__list a {
    display: block;
    padding: var(--mk-space-2) var(--mk-space-4);
    font-size: var(--mk-font-size-sm);
    font-weight: 500;
    color: var(--mk-text-muted);
    border-radius: var(--mk-radius-md);
    transition: color var(--mk-transition-fast),
                background var(--mk-transition-fast);
}

.mk-nav__list a:hover,
.mk-nav__list .current-menu-item > a {
    color: var(--mk-primary);
    background: var(--mk-primary-muted);
}

.mk-header__actions {
    display: flex;
    align-items: center;
    gap: var(--mk-space-3);
}

.mk-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mk-radius-full);
    background: var(--mk-glass-bg);
    border: 1px solid var(--mk-glass-border);
    color: var(--mk-gold);
    cursor: pointer;
    transition: all var(--mk-transition-fast);
}

.mk-theme-toggle:hover {
    color: var(--mk-primary);
    border-color: var(--mk-primary);
    box-shadow: 0 0 12px var(--mk-primary-glow);
}

.mk-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: var(--mk-glass-bg);
    border: 1px solid var(--mk-glass-border);
    border-radius: var(--mk-radius-md);
    cursor: pointer;
    padding: 0;
}

.mk-menu-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--mk-text);
    border-radius: 2px;
    transition: transform var(--mk-transition-base), opacity var(--mk-transition-base);
}

.mk-menu-toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mk-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.mk-menu-toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
    .mk-nav { display: none; }
    .mk-menu-toggle { display: flex; }

    /* toggle و CTA متنی در موبایل مخفی — به action-bar منتقل شده‌اند */
    .mk-theme-toggle { display: none !important; }
    .mk-header__actions .mk-btn-primary { display: none !important; }

    /* header actions فقط auth + hamburger */
    .mk-header__actions {
        gap: var(--mk-space-2);
    }

    /* auth btn فقط آیکون در موبایل */
    .mk-header__auth-btn span:not([aria-hidden]) {
        display: none;
    }

    /* لوگو کوچک‌تر */
    .mk-header__logo img { height: 32px; }

    .mk-nav.is-open {
        display: block;
        position: fixed;
        top: var(--mk-header-height);
        right: 0;
        left: 0;
        bottom: 0;
        background: var(--mk-bg);
        padding: var(--mk-space-6);
        overflow-y: auto;
        z-index: 99;
    }

    .mk-nav.is-open .mk-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mk-space-2);
    }

    .mk-nav.is-open .mk-nav__list a {
        font-size: var(--mk-font-size-lg);
        padding: var(--mk-space-4);
    }
}

/* ============================================================
   12. FOOTER
   ============================================================ */
.mk-footer {
    background: var(--mk-bg-elevated);
    border-top: 1px solid var(--mk-border);
    padding-block: var(--mk-space-16) var(--mk-space-8);
    margin-top: var(--mk-space-24);
}

.mk-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--mk-space-12);
    margin-bottom: var(--mk-space-12);
}

.mk-footer__brand-name {
    font-size: var(--mk-font-size-xl);
    font-weight: 800;
    color: var(--mk-text);
    margin-bottom: var(--mk-space-3);
}

.mk-footer__brand-desc {
    font-size: var(--mk-font-size-sm);
    color: var(--mk-text-muted);
    line-height: 1.8;
    max-width: 32ch;
}

.mk-footer__social {
    display: flex;
    gap: var(--mk-space-3);
    margin-top: var(--mk-space-5);
}

.mk-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mk-radius-full);
    border: 1px solid var(--mk-glass-border);
    background: var(--mk-glass-bg);
    color: var(--mk-text-muted);
    transition: all var(--mk-transition-base);
}

.mk-footer__social-link:hover {
    color: var(--mk-primary);
    border-color: var(--mk-primary);
    box-shadow: 0 0 12px var(--mk-primary-glow);
}

.mk-footer__col-title {
    font-size: var(--mk-font-size-sm);
    font-weight: 700;
    color: var(--mk-text);
    margin-bottom: var(--mk-space-4);
    letter-spacing: 0.03em;
}

.mk-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
}

.mk-footer__links a {
    font-size: var(--mk-font-size-sm);
    color: var(--mk-text-muted);
    transition: color var(--mk-transition-fast);
}

.mk-footer__links a:hover { color: var(--mk-primary); }

.mk-footer__bottom {
    border-top: 1px solid var(--mk-border);
    padding-top: var(--mk-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mk-space-4);
}

.mk-footer__copy {
    font-size: var(--mk-font-size-sm);
    color: var(--mk-text-subtle);
}

@media (max-width: 768px) {
    .mk-footer__grid { grid-template-columns: 1fr; gap: var(--mk-space-8); }
    .mk-footer__bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   13. PAGE WRAPPER
   ============================================================ */
#mk-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#mk-content {
    flex: 1;
    padding-top: var(--mk-header-height);
}

/* ============================================================
   14. LOADING STATE
   ============================================================ */
.mk-skeleton {
    background: linear-gradient(
        90deg,
        var(--mk-bg-elevated) 25%,
        var(--mk-bg-card) 50%,
        var(--mk-bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: mk-skeleton-shimmer 1.5s infinite;
    border-radius: var(--mk-radius-md);
}

@keyframes mk-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   15. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--mk-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--mk-primary), var(--mk-secondary));
    border-radius: var(--mk-radius-full);
}
::-webkit-scrollbar-thumb:hover { opacity: 0.8; }
/* ============================================================
   STYLING: کانتینر اختصاصی برای جدا کردن محتوای صفحات داخلی از پس‌زمینه
   ============================================================ */
/* mk-single-post — استایل‌های اصلی در mk-blog.css هستن */
/* این بلوک فقط transition رو نگه می‌داره تا override نشه */
.mk-single-post {
    transition: background-color var(--mk-transition-slow), border-color var(--mk-transition-slow), box-shadow var(--mk-transition-slow);
}

/* استایل تفکیک پس‌زمینه در حالت لایت‌مود (روشن) */
body.mk-light-mode .mk-single-post {
    background: var(--mk-bg-elevated);
    border-color: var(--mk-border);
    box-shadow: var(--mk-shadow-lg);
}

/* ── زیباسازی و پدینگ تصویر شاخص در صفحات داخلی ── */
.mk-single-post__thumb {
    margin-bottom: var(--mk-space-8) !important;
    overflow: hidden;
    border-radius: var(--mk-radius-lg);
}

.mk-single-post__thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    box-shadow: var(--mk-shadow-md);
    transition: transform 0.3s ease;
}

/* ── استایل تیتر اصلی (H1) ── */
.mk-single-post__title {
    color: var(--mk-text);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: var(--mk-space-6) !important;
    padding-bottom: var(--mk-space-4);
    border-bottom: 1px solid var(--mk-border);
}

/* ── بهینه‌سازی خوانایی محتوای متنی مقاله (the_content) ── */
.mk-single-post .mk-content {
    font-size: 1.1rem;
    line-height: 1.95;
    color: var(--mk-text);
    text-align: justify;
}

/* ایجاد فاصله اصولی بین پاراگراف‌های متنی */
.mk-single-post .mk-content p {
    margin-bottom: var(--mk-space-6);
}

/* استایل‌دهی به هدینگ‌های داخل متن کاربر (H2, H3) */
.mk-single-post .mk-content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: var(--mk-space-10);
    margin-bottom: var(--mk-space-4);
    color: var(--mk-text);
}

.mk-single-post .mk-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: var(--mk-space-8);
    margin-bottom: var(--mk-space-3);
    color: var(--mk-text);
}

/* ============================================================
   RESPONSIVE: هماهنگی پدینگ باکس در رزولوشن‌های مختلف موبایل
   ============================================================ */
@media (max-width: 768px) {
    .mk-single-post {
        padding: var(--mk-space-6) var(--mk-space-4);
        border-radius: var(--mk-radius-lg);
        margin-top: var(--mk-space-4);
    }
    .mk-single-post__title {
        font-size: 1.5rem !important;
    }
}