/* ==========================================================================
           1. متغیرها و تنظیمات پایه (Reset & Variables)
           ========================================================================== */
        @font-face {
            font-family: 'IRANSans';
            src: local('IRANSans'), local('Tahoma');
        }

        :root {
            --c-primary: #1A65FF; /* رنگ آبی اصلی دکمه‌ها */
            --c-primary-hover: #0052F5;
            --c-text-dark: #111827;
            --c-text-gray: #4B5563;
            --c-text-light: #6B7280;
            --c-text-muted: #9CA3AF;
            --c-border: #E5E7EB;
            --c-bg-light: #F9FAFB;
            --c-coral: #E68A78;
            --c-coral-text: #F56565;
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.04);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
            
            --font-stack: 'IRANSans', system-ui, -apple-system, sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-stack);
            background-color: #fff;
            color: var(--c-text-dark);
            line-height: 1.6;
            font-size: 14px;
            -webkit-font-smoothing: antialiased;
        }

        body.mokh-event-single {
            overflow-x: clip;
            width: 100%;
        }

        body.mokh-event-single img,
        body.mokh-event-single video,
        body.mokh-event-single svg {
            max-width: 100%;
            height: auto;
        }

        body.mokh-event-single svg[width][height] {
            height: auto;
        }

        ul { list-style: none; }
        a { text-decoration: none; color: inherit; }
        button { cursor: pointer; font-family: inherit; border: none; background: none; }

        /* ==========================================================================
           2. ساختار کلی لایوت (Layout)
           ========================================================================== */
        .page-wrapper {
            width: 100%;
            max-width: 1280px;
            margin: 24px auto 40px;
            padding: 0 24px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            grid-template-rows: auto minmax(0, 1fr);
            column-gap: 32px;
            row-gap: 0;
            align-items: start;
            box-sizing: border-box;
            overflow-x: clip;
        }

        .main-content {
            grid-column: 1;
            grid-row: 2;
            flex: 1;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 64px;
        }

        .main-content > * {
            min-width: 0;
            max-width: 100%;
        }

        .event-breadcrumb {
            grid-column: 1;
            grid-row: 1;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 10px;
            direction: rtl;
            text-align: right;
            margin: 0 0 12px;
            font-size: 13px;
            line-height: 1.5;
            color: var(--c-text-muted);
            font-weight: 500;
        }

        .event-breadcrumb__item {
            color: var(--c-text-muted);
        }

        .event-breadcrumb__link {
            color: var(--c-text-muted);
            text-decoration: none;
            transition: color 0.2s;
        }

        .event-breadcrumb__link:hover {
            color: var(--c-primary);
        }

        .event-breadcrumb__item.is-current {
            color: var(--c-text-gray);
            font-weight: 600;
        }

        .event-breadcrumb__sep {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--c-primary);
            flex-shrink: 0;
        }

        .event-breadcrumb__sep svg {
            width: 14px;
            height: 14px;
        }

        .sidebar-wrapper {
            width: 360px;
            max-width: 100%;
            flex-shrink: 0;
            min-width: 0;
            position: sticky;
            top: 124px;
        }

        .sidebar-wrapper--desktop {
            display: block;
            grid-column: 2;
            grid-row: 2;
            align-self: start;
        }

        .sidebar-wrapper--mobile {
            display: none;
        }

        /* کاور ویدیو ابتدای صفحه */
        .video-cover {
            width: 100%;
            aspect-ratio: 16/9;
            background-color: var(--c-border);
            border-radius: var(--radius-lg);
            margin-bottom: 3px;
        }

        /* عناوین سکشن‌ها */
        .section-title {
            font-size: 22px;
            font-weight: 800;
            color: var(--c-text-dark);
            margin-bottom: 32px;
        }

        .section-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            margin-bottom: 24px;
            direction: rtl;
            text-align: right;
        }

        .section-head::after {
            content: '';
            flex: 0 0 100%;
            width: 100%;
            height: 1px;
            background-color: color-mix(in srgb, var(--c-border) 90%, #000 10%);
        }

        .section-head .section-title {
            margin-bottom: 0;
            text-align: right;
        }

        .section-head__icon {
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            color: #4B5563;
        }

        .section-head__icon svg {
            width: 24px;
            height: 24px;
            display: block;
        }

        /* ==========================================================================
           3. بخش هدر و توضیحات (Hero Section)
           ========================================================================== */
        .hero-section {
            text-align: right;
            direction: rtl;
        }

        .hero-section .video-cover {
            margin-bottom: 9px;
            border-radius: var(--radius-lg);
        }

        .hero-section .hero-top-row {
            padding-top: 0;
        }

        .hero-top-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .hero-titles {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
            min-width: 0;
            text-align: right;
        }

        .hero-title {
            font-size: 28px;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin: 0;
            line-height: 1.35;
        }

        .hero-subtitle {
            font-size: 16px;
            font-weight: 600;
            color: var(--c-text-dark);
            margin: 0;
            line-height: 1.45;
        }

        .hero-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
        .badge {
            display: flex; align-items: center; gap: 6px; padding: 8px 14px;
            border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
        }
        .badge svg { width: 16px; height: 16px; }
        .badge-gray { background-color: var(--c-bg-light); color: var(--c-text-gray); border: 1px solid var(--c-border); }
        .badge-rating {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            min-width: 0;
            padding: 8px 14px;
            background-color: #FFF;
            color: var(--c-text-gray);
            border: 1px solid var(--c-border);
            direction: rtl;
        }
        .badge-rating__text {
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
        }
        .badge-coral { background-color: #F59E8B; color: #FFF; }
        .badge-black { background-color: var(--c-text-dark); color: #FFF; }

        .hero-paragraph {
            font-size: 15px;
            color: var(--c-text-light);
            line-height: 2;
            text-align: justify;
            direction: rtl;
            margin: 0 0 16px;
        }

        .hero-desc-title {
            display: none;
        }

        .section-head--hero-desc {
            display: none;
        }

        @media (min-width: 1025px) {
            .hero-section .hero-paragraph {
                margin-top: 28px;
            }
        }

        .hero-bottom-row {
            display: flex;
            justify-content: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 0;
        }
        .stat-box {
            border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 12px 16px;
            background-color: #FFF; display: flex; align-items: center; gap: 12px;
        }
        .stat-registrations {
            direction: rtl;
            text-align: right;
        }
        .stat-registrations .stat-text {
            text-align: right;
            direction: rtl;
            flex: 1;
            min-width: 0;
        }
        .avatars-group { display: flex; align-items: center; padding-right: 12px; padding-left: 0; direction: ltr; flex-shrink: 0; }
        .avatar-circle {
            width: 32px; height: 32px; border-radius: 50%; background-color: #FFF; border: 2px solid #FFF;
            display: flex; align-items: center; justify-content: center; margin-right: -12px; position: relative;
            flex-shrink: 0;
        }
        .avatar-circle:first-child {  z-index: 3; }
        .avatar-circle:nth-child(2) { z-index: 2; }
        .avatar-circle:nth-child(3) { z-index: 1; }
        .stat-text { font-size: 13px; font-weight: 600; color: var(--c-text-gray); }
        .stat-rating {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;
            min-width: 100px;
            text-align: center;
        }
        .stars-group {
            display: inline-flex;
            gap: 2px;
            direction: ltr;
        }
        .star-item {
            position: relative;
            display: inline-block;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            line-height: 0;
        }
        .star-item svg {
            width: 14px;
            height: 14px;
            display: block;
        }
        .star-item .star-empty {
            color: #D1D5DB;
        }
        .star-item .star-filled {
            position: absolute;
            inset: 0;
            color: #F59E0B;
            clip-path: inset(0 calc(100% - var(--star-fill, 0%)) 0 0);
        }
        .stars-box {
            display: inline-flex;
            align-items: center;
        }

        /* ==========================================================================
           4. در این وبینار چه خواهیم آموخت
           ========================================================================== */
        .section-learning {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        .section-learning > .section-head {
            text-align: right;
            direction: rtl;
        }

        .learning-viewport {
            overflow: hidden;
            touch-action: pan-y;
            direction: rtl;
            cursor: default;
            user-select: none;
            width: 100%;
            max-width: 100%;
        }

        .learning-viewport.is-draggable {
            touch-action: none;
            cursor: grab;
        }

        .learning-viewport.is-dragging {
            cursor: grabbing;
        }

        .learning-track {
            display: flex;
            flex-direction: row;
            direction: rtl;
            transition: transform 0.35s ease;
            will-change: transform;
        }

        .learning-track > .learning-card {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        .learning-slide {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            min-width: 0;
            box-sizing: border-box;
            direction: rtl;
        }

        .section-learning .carousel-dots {
            margin-top: 28px;
        }

        @media (min-width: 1025px) {
            .section-learning .learning-card {
                padding: 28px 12px;
            }

            .section-learning .card-icon svg {
                width: 40px;
                height: 40px;
            }

            .section-learning .learning-card h3 {
                font-size: 14px;
            }

            .section-learning .learning-card p {
                font-size: 12px;
                line-height: 1.7;
            }
        }

        .learning-slide .learning-card {
            direction: rtl;
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        .learning-card {
            border: 1px solid #8A9DF8; border-radius: var(--radius-lg); padding: 32px 16px;
            display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #FFF;
        }
        .card-icon { margin-bottom: 20px; }
        .card-icon svg { width: 48px; height: 48px; stroke: var(--c-text-dark); }
        .learning-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
        .learning-card p { font-size: 13px; color: var(--c-text-muted); line-height: 1.8; }

        /* ==========================================================================
           5. مخاطبین وبینار
           ========================================================================== */
        .audience-list { display: flex; flex-direction: column; gap: 16px; }
        .audience-item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
        .audience-item svg { width: 8px; height: 14px; }

        /* ==========================================================================
           6. اساتید وبینار
           ========================================================================== */
        .section-instructors {
            text-align: right;
        }

        .instructors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .instructors-grid.is-single .instructor-card {
            grid-column: 1;
        }
        .instructor-card {
            background-color: var(--c-bg-light); border-radius: var(--radius-lg); padding: 24px;
            display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px;
            direction: ltr;
        }
        .instructor-info {
            flex: 1; display: flex; flex-direction: column; min-width: 0;
            direction: rtl; text-align: right;
        }
        .instructor-name { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
        .instructor-role-wrapper { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 16px;flex-direction: row-reverse }
        .instructor-role { font-size: 13px; font-weight: 500; color: var(--c-text-gray); }
        .instructor-divider { height: 1px; background-color: var(--c-text-dark); border: none; margin-bottom: 16px; opacity: 0.8; }
        .instructor-resume { display: flex; flex-direction: column; gap: 10px; }
        .instructor-resume li { font-size: 12px; color: var(--c-text-gray); position: relative; padding-right: 14px; }
        .instructor-resume li::before { content: ''; position: absolute; right: 0; top: 6px; width: 4px; height: 4px; background-color: var(--c-text-dark); border-radius: 50%; }
        .instructor-media { width: 120px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
        .instructor-img { width: 100%; height: 120px; border-radius: var(--radius-md); background: linear-gradient(180deg, #F5D3C8 0%, #E8EBE9 100%); object-fit: cover; }
        .profile-btn { width: 100%; background-color: var(--c-text-dark); color: #FFF; padding: 10px 0; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; }

        /* ==========================================================================
           7. برنامه رویداد و مزایا
           ========================================================================== */
        .details-layout {
            display: flex;
            gap: 40px;
            align-items: flex-end;
            direction: rtl;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
        .benefits-col {
            flex: 0 1 320px;
            min-width: 0;
            max-width: 100%;
            text-align: right;
        }
        .details-layout .section-head {
            margin-bottom: 24px;
        }
        .details-layout .section-head .section-title {
            font-size: 18px;
        }
        .benefits-box { background-color: var(--c-bg-light); border-radius: var(--radius-lg); padding: 32px 24px; }
        .benefits-box ul { display: flex; flex-direction: column; gap: 20px; }
        .benefits-box li { display: flex; align-items: center; justify-content: flex-start; gap: 12px; font-size: 14px; font-weight: 500; text-align: right; }

        .schedule-col { flex: 1; text-align: right; min-width: 0; }
        .details-layout--single .schedule-col,
        .details-layout--single .benefits-col {
            flex: 1 1 100%;
            max-width: 100%;
            width: 100%;
        }
        .schedule-col > .section-head { text-align: right; }
        .schedule-box { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 32px; background-color: #FFF; }
        .timeline-grid {
            display: grid;
            grid-template-columns: 110px 30px 1fr;
            row-gap: 32px;
            position: relative;
            direction: ltr;
        }
        .timeline-grid::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 124px; width: 2px; background-color: var(--c-border); z-index: 1; }
        .tl-text { font-size: 14px; font-weight: 500; align-self: center; text-align: right; direction: rtl; }
        .tl-node { display: flex; justify-content: center; align-items: center; z-index: 2; }
        .tl-circle { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #60A5FA; background-color: #FFF; }
        .tl-time { display: flex; justify-content: flex-start; align-items: center; }
        .time-pill { background-color: var(--c-bg-light); color: var(--c-text-gray); font-size: 12px; font-weight: 500; padding: 6px 16px; border-radius: 20px; white-space: normal; word-break: break-word; }

        /* ==========================================================================
           8. نظرات
           ========================================================================== */
        .section-testimonials,
        .section-gallery {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        .section-testimonials > .section-head,
        .section-gallery > .section-head {
            text-align: right;
            direction: rtl;
        }

        .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
        .testimonial-card {
            border: 1px solid var(--c-border);
            border-radius: var(--radius-md);
            padding: 24px;
            background-color: #FFF;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }
        .section-testimonials .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            direction: rtl;
        }
        .section-testimonials .user-profile {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1;
        }
        .avatar-box { width: 48px; height: 48px; border-radius: 50%; background-color: var(--c-bg-light); border: 1px solid var(--c-border); display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
        .user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: right; align-items: flex-start; }
        .user-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
        .user-role {
            font-size: 12px;
            color: var(--c-text-light);
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        .section-testimonials .stars-box {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
        }
        .section-testimonials .card-body {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            direction: rtl;
        }
        .quote-icon { width: 20px; height: 20px; flex-shrink: 0; fill: var(--c-text-dark); margin-top: 2px; }
        .section-testimonials .review-text {
            flex: 1;
            min-width: 0;
            margin: 0;
            font-size: 13px;
            color: var(--c-text-light);
            line-height: 2;
            text-align: justify;
            direction: rtl;
        }
        .testimonials-slide .testimonial-card {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }
        .testimonials-viewport {
            overflow: hidden;
            touch-action: pan-y;
            direction: rtl;
            cursor: default;
            user-select: none;
            width: 100%;
            max-width: 100%;
        }

        .testimonials-viewport.is-draggable {
            touch-action: none;
            cursor: grab;
        }

        .testimonials-viewport.is-dragging {
            cursor: grabbing;
        }

        .testimonials-track {
            display: flex;
            flex-direction: row;
            direction: rtl;
            transition: transform 0.35s ease;
            will-change: transform;
        }

        .testimonials-track > .testimonial-card,
        .gallery-track > .gallery-item {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        .testimonials-slide {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            min-width: 0;
            box-sizing: border-box;
            direction: rtl;
        }

        .testimonials-slide .testimonial-card {
            direction: rtl;
        }

        @media (min-width: 1025px) {
            .section-testimonials .testimonial-card {
                padding: 20px 16px;
                gap: 16px;
            }

            .section-testimonials .avatar-box {
                width: 40px;
                height: 40px;
            }

            .section-testimonials .star-item {
                width: 12px;
                height: 12px;
            }

            .section-testimonials .star-item svg {
                width: 12px;
                height: 12px;
            }
        }

        .slider-pagination {
            margin-top: 32px;
        }

        /* ==========================================================================
           9. سوالات متداول و بنر
           ========================================================================== */
        .faq-list { display: flex; flex-direction: column; gap: 16px; }
        .faq-question-box { background-color: var(--c-bg-light); border-radius: var(--radius-md); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.3s ease; border: 1px solid transparent; }
        .faq-question-text { font-size: 14px; font-weight: 600; }
        .faq-question-box svg {
            flex-shrink: 0;
            color: #111827;
            stroke: currentColor;
        }
        .faq-item.active .faq-question-box svg {
            color: var(--c-primary);
        }
        .faq-item.active .faq-question-box { background-color: #FFF; border-color: var(--c-border); box-shadow: var(--shadow-sm); }
        .faq-answer-box { padding: 16px 24px 8px 24px; display: none; }
        .faq-item.active .faq-answer-box { display: block; }
        .faq-answer-text { font-size: 13px; color: var(--c-text-light); line-height: 2.2; }

        .consultation-banner { background-color: var(--c-coral); border-radius: var(--radius-lg); padding: 32px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; width: 100%; max-width: 100%; box-sizing: border-box; }
        .banner-content { display: flex; align-items: center; gap: 24px; min-width: 0; max-width: 100%; }
        .banner-content > svg { flex-shrink: 0; max-width: 84px; }
        .banner-texts { display: flex; flex-direction: column; gap: 8px; color: #FFF; }
        .banner-title { font-size: 22px; font-weight: 800; }
        .banner-subtitle { font-size: 15px; opacity: 0.9; }
        .banner-btn { background-color: var(--c-primary); color: #FFF; padding: 14px 32px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; transition: background-color 0.2s; }
        .banner-btn:hover { background-color: var(--c-primary-hover); }

        /* ==========================================================================
           10. طراحی سایدبار جدید (Sidebar)
           ========================================================================== */
        .sidebar {
            background-color: var(--c-bg-light);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(0,0,0,0.02);
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .sidebar-list {
            display: flex;
            flex-direction: column;
        }

        .sb-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
            padding: 20px 0;
            border-bottom: 1px solid var(--c-border);

        }

        .sb-item:first-child { padding-top: 0; }
        .sb-item:last-of-type { border-bottom: none; padding-bottom: 0; }

        .sb-icon {
            width: 24px;
            height: 24px;
            color: #374151; /* رنگ آیکون‌ها خاکستری تیره */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sb-text {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
        }

        .sb-label {
            font-size: 12px;
            color: var(--c-text-light);
            font-weight: 500;
        }

        .sb-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--c-text-dark);
        }

        .sb-value.color-coral {
            color: var(--c-coral-text);
            font-size: 16px;
        }

        .sb-capacity {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .capacity-main {
            font-size: 15px;
            font-weight: 800;
            color: var(--c-text-dark);
        }

        .capacity-sub {
            font-size: 13px;
            font-weight: 600;
            color: var(--c-primary);
        }

        .btn-register {
            width: 100%;
            background-color: var(--c-primary);
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 700;
            padding: 16px;
            border-radius: var(--radius-sm);
            margin-top: 32px;
            transition: background-color 0.2s;
        }

        .btn-register:hover {
            background-color: var(--c-primary-hover);
        }

        .mokh-event-ended {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            margin-top: 32px;
            border: 2px solid var(--c-border);
            border-radius: var(--radius-sm);
            background-color: #FFFFFF;
            color: var(--c-text-gray);
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 1.4;
        }

        .guarantee-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
            margin-bottom: 32px;
        }

        .guarantee-box svg { width: 16px; height: 16px; color: var(--c-text-light); }
        .guarantee-box span { font-size: 12px; color: var(--c-text-light); font-weight: 500; }

        .sb-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 24px;
            border-top: 1px solid var(--c-border);
        }

        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: #374151;
            transition: color 0.2s;
        }

        .action-btn:hover { color: var(--c-primary); }
        .action-btn svg { width: 22px; height: 22px; }
        .action-btn span { font-size: 12px; font-weight: 500; }

        /* سایدبار دسکتاپ — فشرده‌تر برای دیده شدن دکمه ثبت‌نام */
        @media (min-width: 1025px) {
            .sidebar {
                padding: 18px 16px;
            }

            .sb-item {
                gap: 10px;
                padding: 8px 0;
            }

            .sb-icon {
                width: 20px;
                height: 20px;
            }

            .sb-icon svg {
                width: 20px;
                height: 20px;
            }

            .sb-text,
            .sb-capacity {
                gap: 2px;
            }

            .sb-label {
                font-size: 11px;
                line-height: 1.3;
            }

            .sb-value {
                font-size: 13px;
                line-height: 1.45;
            }

            .sb-value.color-coral {
                font-size: 14px;
            }

            .capacity-main {
                font-size: 13px;
            }

            .capacity-sub {
                font-size: 11px;
            }

            .btn-register {
                margin-top: 14px;
                padding: 13px 14px;
                font-size: 15px;
            }

            .guarantee-box {
                margin-top: 10px;
                margin-bottom: 14px;
            }

            .guarantee-box span {
                font-size: 11px;
            }

            .sb-actions {
                padding-top: 14px;
            }

            .action-btn {
                gap: 6px;
            }

            .action-btn svg {
                width: 20px;
                height: 20px;
            }

            .action-btn span {
                font-size: 11px;
            }
        }

        /* نوار ثبت‌نام چسبان موبایل */
        .mokh-sticky-enroll {
            display: none;
        }

        @media (max-width: 1024px) {
            .event-breadcrumb {
                margin-top: 16px;
                margin-bottom: 4px;
                font-size: 12px;
                gap: 8px;
            }

            .event-breadcrumb__sep svg {
                width: 12px;
                height: 12px;
            }

            .sidebar-wrapper--mobile {
                display: block;
                width: 100%;
                position: static;
                top: auto;
                margin: 24px 0 16px;
            }

            .sidebar-wrapper--desktop {
                display: none;
            }

            .hero-section .hero-top-row {
                margin-bottom: 5px;
                gap: 10px;
            }

            .hero-section .hero-titles {
                gap: 2px;
            }

            .hero-section .hero-paragraph {
                margin-bottom: 5px;
                line-height: 1.85;
            }

            .hero-section .hero-desc-title,
            .hero-section .section-head--hero-desc {
                display: flex;
                margin-top: 40px;
                margin-bottom: 12px;
            }

            .hero-section .section-head--hero-desc .section-title {
                font-size: 18px;
            }

            .hero-section .sidebar-wrapper--mobile {
                margin: 16px 0 8px;
            }

            .sidebar-wrapper--mobile .sidebar {
                padding: 0;
                background: transparent;
                border: none;
                box-shadow: none;
                border-radius: 0;
            }

            .sidebar-wrapper--mobile .sidebar-list {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .sidebar-wrapper--mobile .sb-item {
                padding: 4px 0;
                gap: 10px;
                border-bottom: none;
            }

            .sidebar-wrapper--mobile .sb-icon {
                width: 18px;
                height: 18px;
            }

            .sidebar-wrapper--mobile .sb-icon svg {
                width: 18px;
                height: 18px;
            }

            .sidebar-wrapper--mobile .sb-text,
            .sidebar-wrapper--mobile .sb-capacity {
                gap: 2px;
            }

            .sidebar-wrapper--mobile .sb-label {
                font-size: 10.5px;
                line-height: 1.2;
            }

            .sidebar-wrapper--mobile .sb-value {
                font-size: 13.5px;
                line-height: 1.35;
                font-weight: 600;
            }

            .sidebar-wrapper--mobile .sb-value.color-coral {
                font-size: 14.5px;
            }

            .sidebar-wrapper--mobile .capacity-main {
                font-size: 13.5px;
            }

            .sidebar-wrapper--mobile .capacity-sub {
                font-size: 10.5px;
            }

            .sidebar-wrapper--mobile .btn-register {
                margin-top: 10px;
                padding: 12px 14px;
                font-size: 14px;
            }

            .sidebar-wrapper--mobile .mokh-event-ended {
                margin-top: 10px;
                padding: 12px 14px;
                font-size: 14px;
            }

            .sidebar-wrapper--mobile .guarantee-box,
            .sidebar-wrapper--mobile .sb-actions {
                display: none;
            }

            .mokh-sticky-enroll {
                position: fixed;
                inset-inline: 0;
                bottom: 0;
                z-index: 120;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
                background: rgba(255, 255, 255, 0.96);
                border-top: 1px solid var(--c-border);
                box-shadow: 0 -8px 32px rgba(17, 24, 39, 0.12);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                transform: translateY(110%);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
            }

            .mokh-sticky-enroll.is-visible {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .mokh-sticky-enroll__btn,
            .mokh-event-ended--sticky {
                flex: 0 0 auto;
                min-width: 0;
            }

            .mokh-sticky-enroll__meta {
                display: flex;
                flex-direction: column;
                gap: 2px;
                min-width: 0;
                flex: 1;
            }

            .mokh-sticky-enroll__date {
                font-size: 11px;
                color: var(--c-text-light);
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mokh-sticky-enroll__price {
                font-size: 14px;
                font-weight: 800;
                color: var(--c-text-dark);
                white-space: nowrap;
            }

            .mokh-sticky-enroll__price.is-free {
                color: var(--c-coral-text);
            }

            .mokh-sticky-enroll__btn {
                position: relative;
                isolation: isolate;
                flex-shrink: 0;
                min-width: 214px;
                max-width: 66%;
                background-color: var(--c-primary);
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                padding: 12px 18px;
                border-radius: var(--radius-sm);
                border: none;
                transition: background-color 0.2s;
            }

            .mokh-sticky-enroll__btn.is-free-register::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: inherit;
                box-shadow: 0 0 0 0 rgba(26, 101, 255, 0.28);
                opacity: 0;
                animation: mokh-sticky-enroll-glow 3.6s ease-in-out infinite;
                pointer-events: none;
                z-index: -1;
            }

            @keyframes mokh-sticky-enroll-glow {
                0%, 100% {
                    opacity: 0;
                    box-shadow: 0 0 0 0 rgba(26, 101, 255, 0);
                    transform: scale(1);
                }

                50% {
                    opacity: 1;
                    box-shadow: 0 0 0 5px rgba(26, 101, 255, 0.14);
                    transform: scale(1.012);
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .mokh-sticky-enroll__btn.is-free-register::after {
                    animation: none;
                }
            }

            .mokh-sticky-enroll__btn:hover:not(:disabled) {
                background-color: var(--c-primary-hover);
            }

            .mokh-sticky-enroll__btn:disabled {
                opacity: 0.55;
                cursor: not-allowed;
            }

            .mokh-event-ended--sticky {
                flex-shrink: 0;
                min-width: 214px;
                max-width: 66%;
                width: auto;
                margin-top: 0;
                padding: 12px 18px;
                font-size: 14px;
            }

            body.mokh-sticky-enroll-active {
                padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
            }
        }

        /* ==========================================================================
           10b. گالری تصاویر
           ========================================================================== */
        .gallery-carousel {
            position: relative;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        .gallery-viewport {
            overflow: hidden;
            margin-bottom: 20px;
            touch-action: pan-y;
            direction: rtl;
            cursor: default;
            user-select: none;
            width: 100%;
            max-width: 100%;
        }

        .gallery-viewport.is-draggable {
            touch-action: none;
            cursor: grab;
        }

        .gallery-viewport.is-dragging {
            cursor: grabbing;
        }

        .gallery-viewport img {
            -webkit-user-drag: none;
            user-select: none;
            pointer-events: none;
        }

        .gallery-track {
            display: flex;
            flex-direction: row;
            direction: rtl;
            transition: transform 0.35s ease;
            will-change: transform;
        }

        .gallery-slide {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            min-width: 0;
            box-sizing: border-box;
            direction: rtl;
        }

        .gallery-slide .gallery-item {
            direction: rtl;
        }

        .gallery-item {
            min-width: 0;
            width: 100%;
        }

        .gallery-item__media {
            display: block;
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: var(--radius-md);
            background-color: var(--c-border);
        }

        .gallery-item__zoom,
        .gallery-item__link {
            display: block;
            width: 100%;
            padding: 0;
            border: none;
            background: none;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .gallery-item__zoom {
            cursor: zoom-in;
        }

        .gallery-item__link--video {
            cursor: pointer;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: var(--radius-md);
            background-color: var(--c-border);
        }

        .gallery-item__play {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
            pointer-events: none;
        }

        .gallery-item__play::after {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 16px;
            border-color: transparent transparent transparent #111827;
            transform: translateX(2px);
        }

        .mokh-gallery-lightbox {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            box-sizing: border-box;
            background: #000;
        }

        .mokh-gallery-lightbox[hidden] {
            display: none !important;
        }

        .mokh-gallery-lightbox__backdrop {
            position: absolute;
            inset: 0;
            border: none;
            padding: 0;
            margin: 0;
            background: #000;
            cursor: zoom-out;
        }

        .mokh-gallery-lightbox__backdrop:hover,
        .mokh-gallery-lightbox__backdrop:focus,
        .mokh-gallery-lightbox__backdrop:active {
            background: #000;
        }

        .mokh-gallery-lightbox__stage {
            position: relative;
            z-index: 1;
            max-width: min(1200px, 100%);
            max-height: calc(100vh - 48px);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .mokh-gallery-lightbox__image {
            max-width: 100%;
            max-height: calc(100vh - 48px);
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: var(--radius-md);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
        }

        .mokh-gallery-lightbox__close,
        .mokh-gallery-lightbox__nav {
            position: absolute;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: rgba(255, 255, 255, 0.92);
            color: #111827;
            cursor: pointer;
        }

        .mokh-gallery-lightbox__close:hover,
        .mokh-gallery-lightbox__close:focus,
        .mokh-gallery-lightbox__close:active,
        .mokh-gallery-lightbox__nav:hover,
        .mokh-gallery-lightbox__nav:focus,
        .mokh-gallery-lightbox__nav:active {
            background: rgba(255, 255, 255, 0.92);
        }

        .mokh-gallery-lightbox__close {
            top: 16px;
            left: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }

        .mokh-gallery-lightbox__nav {
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }

        .mokh-gallery-lightbox__nav--prev {
            right: 16px;
        }

        .mokh-gallery-lightbox__nav--next {
            left: 16px;
        }

        .mokh-gallery-lightbox__nav.is-hidden {
            display: none;
        }

        body.mokh-gallery-lightbox-open {
            overflow: hidden;
        }

        .carousel-dots,
        .slider-pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            direction: rtl;
        }

        .carousel-dots .dot,
        .slider-pagination .dot {
            width: 8px;
            height: 8px;
            background-color: var(--c-border);
            border-radius: 4px;
            transition: width 0.3s, background-color 0.3s;
            cursor: pointer;
            border: none;
            padding: 0;
        }

        .carousel-dots .dot.active,
        .slider-pagination .dot.active {
            width: 24px;
            background-color: #8BA9F9;
        }

        .testimonials-viewport:not(.is-carousel-ready) .testimonials-track,
        .gallery-viewport:not(.is-carousel-ready) .gallery-track,
        .learning-viewport:not(.is-carousel-ready) .learning-track {
            flex-direction: column;
            width: 100%;
            max-width: 100%;
        }

        .section-learning.is-peek-carousel .learning-track {
            gap: 12px;
        }

        .section-learning.is-peek-carousel .learning-track > .learning-card {
            flex: none;
            width: auto;
            max-width: none;
            margin-inline: 0;
        }

        .gallery-carousel.is-carousel-ready .gallery-track > .gallery-item,
        .section-testimonials.is-carousel-ready .testimonials-track > .testimonial-card,
        .section-learning.is-carousel-ready .learning-track > .learning-card {
            flex: none;
            width: auto;
            max-width: none;
        }

        .carousel-dots.is-hidden {
            display: none;
        }

        /* ==========================================================================
           11. ریسپانسیو (Responsive)
           ========================================================================== */
        @media (max-width: 1024px) {
            .page-wrapper {
                display: flex;
                flex-direction: column;
                gap: 0;
                margin: 20px auto 40px;
            }

            .main-content {
                grid-column: auto;
                grid-row: auto;
            }

            .sidebar-wrapper--desktop {
                grid-column: auto;
                grid-row: auto;
            }

            .sidebar-wrapper {
                width: 100%;
                position: static;
            }

            .sidebar-wrapper--desktop {
                display: none;
            }

            .details-layout {
                flex-direction: column;
                align-items: stretch;
                gap: 28px;
            }

            .benefits-col {
                flex: 1 1 auto;
                width: 100%;
            }

            .instructors-grid {
                grid-template-columns: 1fr;
            }

            .timeline-grid {
                grid-template-columns: minmax(0, 96px) 24px minmax(0, 1fr);
            }

            .timeline-grid::before {
                left: 108px;
            }
        }

        @media (max-width: 768px) {
            .page-wrapper {
                margin: 12px auto 28px;
                padding: 0 16px;
                gap: 20px;
            }

            .event-breadcrumb {
                margin-top: 14px;
                margin-bottom: 2px;
            }

            .main-content {
                gap: 36px;
            }

            .hero-section .video-cover {
                margin-bottom: 15px;
                border-radius: var(--radius-md);
            }

            .hero-section .hero-top-row {
                padding-top: 0;
            }

            .hero-top-row,
            .consultation-banner,
            .banner-content {
                flex-direction: column;
                align-items: stretch;
            }

            .hero-bottom-row {
                flex-direction: row;
                align-items: stretch;
                gap: 10px;
                flex-wrap: nowrap;
            }

            .hero-title {
                font-size: 22px;
                word-break: break-word;
            }

            .hero-subtitle {
                font-size: 14px;
            }

            .hero-badges,
            .banner-btn {
                width: 100%;
            }

            .badge-rating {
                width: auto;
                align-self: flex-start;
            }

            .badge-rating .star-item,
            .badge-rating .star-item svg {
                width: 12px;
                height: 12px;
            }

            .hero-bottom-row .stat-box {
                width: auto;
                flex: 1 1 0;
                min-width: 0;
                padding: 10px 8px;
                justify-content: center;
            }

            .hero-bottom-row .stat-rating {
                min-width: 0;
            }

            .hero-bottom-row .stat-registrations {
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: 8px;
                text-align: right;
                direction: rtl;
            }

            .hero-bottom-row .stat-registrations .stat-text {
                text-align: right;
            }

            .hero-bottom-row .stat-registrations .avatars-group {
                padding-right: 8px;
                padding-left: 0;
            }

            .hero-bottom-row .stat-text {
                font-size: 11px;
                line-height: 1.5;
            }

            .section-title {
                font-size: 18px;
                margin-bottom: 0;
            }

            .section-head {
                margin-bottom: 18px;
            }

            .learning-grid,
            .instructors-grid {
                grid-template-columns: 1fr;
            }

            .instructor-card {
                padding: 14px;
                gap: 12px;
            }

            .instructor-media {
                width: 84px;
                gap: 8px;
            }

            .instructor-img {
                height: 84px;
            }

            .profile-btn {
                padding: 8px 0;
                font-size: 11px;
            }

            .instructor-role-wrapper {
                margin-bottom: 12px;
            }

            .instructor-divider {
                margin-bottom: 12px;
            }

            .learning-slide {
                grid-template-columns: 1fr;
                direction: rtl;
            }

            .section-learning.is-peek-carousel .learning-card {
                width: auto;
                max-width: none;
                margin-inline: 0;
                padding: 20px 16px;
            }

            .section-learning:not(.is-peek-carousel) .learning-card {
                width: min(100%, 280px);
                max-width: 280px;
                margin-inline: auto;
                padding: 20px 16px;
            }

            .section-learning .card-icon {
                margin-bottom: 8px;
            }

            .section-learning .card-icon svg {
                width: 40px;
                height: 40px;
            }

            .section-learning .learning-card h3 {
                margin-bottom: 6px;
            }

            .gallery-slide {
                grid-template-columns: 1fr;
                direction: rtl;
            }

            .testimonials-slide {
                grid-template-columns: 1fr;
                direction: rtl;
            }



            .schedule-box,
            .sidebar,
            .benefits-box {
                padding: 20px 16px;
            }

            .timeline-grid {
                grid-template-columns: auto minmax(0, 1fr);
                direction: ltr;
                column-gap: 12px;
                align-items: center;
                row-gap: 0;
            }

            .timeline-grid::before,
            .tl-node {
                display: none;
            }

            .tl-time {
                margin-bottom: 0;
                justify-content: flex-start;
                align-self: center;
            }

            .tl-text {
                margin-bottom: 0;
                padding-block: 12px;
                border-bottom: 1px solid var(--c-border);
                line-height: 1.5;
            }

            .timeline-grid .time-pill {
                white-space: nowrap;
                font-size: 11px;
                padding: 4px 10px;
            }

            .timeline-grid > .tl-text:last-of-type {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }

            .consultation-banner {
                padding: 20px 16px;
                text-align: center;
            }

            .faq-question-box,
            .faq-answer-box {
                padding-inline: 16px;
            }

            .faq-question-text,
            .sb-value,
            .section-testimonials .review-text {
                word-break: break-word;
            }

            .section-testimonials .card-header {
                flex-direction: row;
                align-items: center;
            }

            .sb-actions {
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px 16px;
            }
        }

        @media (max-width: 480px) {
            .page-wrapper {
                padding: 0 12px;
            }

            .hero-title {
                font-size: 19px;
            }

            .badge {
                font-size: 11px;
                padding: 6px 10px;
            }

            .testimonial-card {
                padding: 16px;
            }
        }