/* ===========================================
   MODNIX — TUTORIALS LISTING PAGE
   منبع واحد استایل این صفحه. دیگر هیچ <style> داخلی
   در index.php وجود ندارد تا تداخل/دو-به-هم‌ریختگی
   استایل پیش نیاید. هر تغییری لازم بود فقط همینجا انجام شود.
   =========================================== */

.tutorials-page { background: transparent; min-height: 100vh; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 24px 0; position: relative; z-index: 1; }
.tutorials-page .container { max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.tutorials-layout { display: grid; grid-template-columns: 280px 1fr 320px; gap: 24px; align-items: start; }
.sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }

/* ===== Sidebar widgets ===== */
.sidebar-widget { background: #1a1a1c; border: 1px solid #2a2a2e; border-radius: 12px; padding: 18px; }
.sidebar-widget__title { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 14px 0; text-transform: uppercase; letter-spacing: .03em; }
.sidebar-widget__title--small { font-size: 13px; }

.tutorial-menu, .learning-paths { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tutorial-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #cbd5e1; text-decoration: none; font-size: 14px; transition: all .15s; }
.tutorial-menu a i { color: #6b7280; width: 18px; text-align: center; flex-shrink: 0; }
.tutorial-menu a:hover, .tutorial-menu a.active { background: rgba(16,185,129,.1); color: #10b981; }
.tutorial-menu a.active i, .tutorial-menu a:hover i { color: #10b981; }
/* آیکون تصویری دسته‌بندی (به‌جای فونت‌آیکون) — تناسب اندازه با <i> حفظ می‌شود */
.tutorial-menu a .cat-icon-img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }

.version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.version-list a { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; text-decoration: none; transition: background .15s; }
.version-list a:hover { background: rgba(255,255,255,.04); }
.version-badge { background: #2a2a2e; color: #e2e8f0; font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.version-badge--new { background: rgba(16,185,129,.15); color: #10b981; }
.version-count { font-size: 12px; color: #6b7280; }

.learning-paths a { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .15s; }
.learning-paths a:hover { background: rgba(255,255,255,.04); }
.learning-path__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.learning-path__icon--green { background: linear-gradient(135deg,#10b981,#059669); }
.learning-path__icon--yellow { background: linear-gradient(135deg,#fbbf24,#d97706); }
.learning-path__icon--purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.learning-path__name { font-size: 14px; color: #e2e8f0; font-weight: 600; }

/* ===== Newbie / Help promo cards =====
   رفع باگ: قبلاً عکس تزئینی روی دکمه/متن می‌افتاد چون هم‌سمتِ متن پوزیشن گرفته بود
   (متن max-width:75% فضا را برای سمت مقابل رزرو می‌کرد ولی عکس با left/right ثابت
   دقیقاً همان سمت متن قرار می‌گرفت). این‌بار با inset-inline-end عکس همیشه در فضای
   خالیِ رزرو‌شده می‌نشیند (در RTL/LTR خودکار جابه‌جا می‌شود) و با mask یک گرادیانِ
   محو به پس‌زمینه‌ی تیره‌ی کارت جوش می‌خورد (دیگر مثل یک عکسِ چهارگوش بی‌پس‌زمینه دیده نمی‌شود). */
.newbie-card, .help-card { background: linear-gradient(160deg,#132018,#0f0f10); border: 1px solid #1f3d2c; border-radius: 12px; padding: 20px; position: relative; overflow: hidden; }
.newbie-card__title, .help-card__title { position: relative; z-index: 2; font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px 0; }
.newbie-card__text, .help-card__text { position: relative; z-index: 2; font-size: 13px; color: #94a3b8; margin: 0 0 14px 0; line-height: 1.5; max-width: 72%; }
.newbie-card__btn, .help-card__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: #10b981; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 8px; text-decoration: none; transition: background .15s, transform .15s; }
.newbie-card__btn:hover, .help-card__btn:hover { background: #059669; transform: translateY(-1px); }
.newbie-card__image, .help-card__image {
    position: absolute;
    bottom: -12px;
    inset-inline-end: -12px;
    width: 118px;
    height: 118px;
    z-index: 1;
    opacity: .95;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 45%, transparent 78%);
            mask-image: radial-gradient(circle at 100% 100%, #000 45%, transparent 78%);
}
.newbie-card__image img, .help-card__image img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ===== Header ===== */
.tutorials-main { min-width: 0; }
.tutorials-header { margin-bottom: 18px; }
.tutorials-header__title { font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 8px 0; }
.tutorials-header__desc { font-size: 14px; color: #94a3b8; margin: 0; }

/* ===== Search & filters ===== */
.tutorial-search { position: relative; margin-bottom: 16px; }
.tutorial-search__icon { position: absolute; top: 50%; inset-inline-start: 18px; transform: translateY(-50%); color: #6b7280; pointer-events: none; }
.tutorial-search__input { width: 100%; background: #1a1a1c; border: 1px solid #2a2a2e; border-radius: 10px; padding: 13px 48px; color: #fff; font-size: 14px; text-align: start; }
.tutorial-search__input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }

.tutorial-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.tutorial-filters__group { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-select { background: #1a1a1c; border: 1px solid #2a2a2e; color: #e2e8f0; border-radius: 8px; padding: 9px 14px; font-size: 13px; cursor: pointer; }
.filter-select:focus { outline: none; border-color: #10b981; }
.filter-select--sort { background: transparent; border: none; padding: 0; font-weight: 600; color: #fff; }
.tutorial-filters__sort { display: flex; align-items: center; gap: 8px; }
.tutorial-filters__sort-label { font-size: 13px; color: #94a3b8; }

.btn { padding: 12px 22px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; transition: all .2s; }
.btn-primary { background: #10b981; color: #fff; }
.btn-primary:hover { background: #059669; transform: translateY(-1px); }
.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-telegram { background: #229ED9; color: #fff; font-size: 15px; }
.btn-telegram:hover { background: #1b87bd; transform: translateY(-1px); }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header__title { font-size: 19px; font-weight: 700; color: #fff; margin: 0; }
.view-all-link { font-size: 13px; color: #10b981; text-decoration: none; display: flex; align-items: center; gap: 6px; }

/* ===== Tutorial grid / cards ===== */
.tutorial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
.tutorial-grid--popular { grid-template-columns: repeat(2, 1fr); }
.tutorial-card { background: #1a1a1c; border: 1px solid #2a2a2e; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; display: block; box-shadow: 0 10px 26px -18px rgba(0,0,0,.6); }
.tutorial-card:hover { transform: translateY(-4px); border-color: #10b981; }
.tutorial-card__image { position: relative; aspect-ratio: 16/9; background: #0f0f10; }
.tutorial-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tutorial-card__badges { position: absolute; top: 8px; inset-inline: 8px; display: flex; justify-content: space-between; gap: 6px; }
.tutorial-card__badge { background: rgba(0,0,0,.75); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.tutorial-card__badge--version { background: rgba(16,185,129,.85); }
.tutorial-card__content { padding: 14px; }
.tutorial-card__author { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; margin: 0 0 6px 0; }
.tutorial-card__author i { color: #10b981; }
.tutorial-card__author a { color: #94a3b8; text-decoration: none; }
.tutorial-card__author a:hover { color: #10b981; text-decoration: underline; }
.tutorial-card__title { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 6px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tutorial-card__desc { font-size: 12px; color: #94a3b8; margin: 0 0 12px 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tutorial-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; font-size: 12px; color: #94a3b8; border-top: 1px solid #2a2a2e; padding-top: 10px; }
.tutorial-card__meta i { color: #10b981; margin-inline-end: 4px; }
.tutorial-card__rating { display: flex; align-items: center; gap: 4px; }
.tutorial-card__rating i { color: #fbbf24; }
.tutorial-card__rating-count { color: #6b7280; }
.no-results { color: #94a3b8; text-align: center; padding: 40px 0; grid-column: 1/-1; }

/* Save (bookmark) buttons on cards */
.tutorial-card__save { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; border: none; cursor: pointer; z-index: 3; transition: all .2s; }
.tutorial-card__save:hover { background: #10b981; }
.tutorial-card__save.is-saved { background: #10b981; }
.latest-item__save { width: 30px; height: 30px; border-radius: 50%; background: #0f0f10; border: 1px solid #2a2a2e; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.latest-item__save:hover, .latest-item__save.is-saved { background: #10b981; border-color: #10b981; color: #fff; }

/* ===== Categories ===== */
.categories-section { margin-bottom: 32px; }
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.category-card { background: #1a1a1c; border: 1px solid #2a2a2e; border-radius: 12px; padding: 20px 14px; text-align: center; text-decoration: none; color: inherit; transition: all .2s; }
.category-card:hover { border-color: #10b981; transform: translateY(-3px); }
.category-card__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 18px; color: #fff; }
.category-card__icon--green { background: linear-gradient(135deg,#10b981,#059669); }
.category-card__icon--purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.category-card__icon--orange { background: linear-gradient(135deg,#f97316,#c2410c); }
.category-card__icon--blue { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
/* آیکون تصویری دسته‌بندی داخل باکس گرادیانی */
.category-card__icon .cat-icon-img { width: 22px; height: 22px; object-fit: contain; }
.category-card__title { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 4px 0; }
.category-card__count { font-size: 11px; color: #6b7280; }

/* ===== Latest list ===== */
.latest-section { margin-bottom: 28px; }
.latest-list { display: flex; flex-direction: column; gap: 10px; }
.latest-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; background: #1a1a1c; border: 1px solid #2a2a2e; border-radius: 10px; padding: 10px; text-decoration: none; color: inherit; transition: border-color .2s; box-shadow: 0 10px 26px -18px rgba(0,0,0,.6); }
.latest-item:hover { border-color: #10b981; }
.latest-item__thumb { width: 90px; height: 60px; border-radius: 8px; overflow: hidden; background: #0f0f10; }
.latest-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-item__title { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 4px 0; }
.latest-item__desc { font-size: 12px; color: #94a3b8; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.latest-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.latest-item__readtime { font-size: 11px; color: #6b7280; }

/* ===== Tip bar ===== */
.tip-bar { display: flex; align-items: center; gap: 12px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: #cbd5e1; }
.tip-bar__icon { color: #fbbf24; font-size: 16px; }
.tip-bar__text a { color: #10b981; text-decoration: none; }
.tip-bar__close { background: transparent; border: none; color: #6b7280; cursor: pointer; margin-inline-start: auto; }

/* ===== Right sidebar widgets ===== */
.quick-guides, .popular-articles, .video-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.quick-guide-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px; border-radius: 8px; transition: background .15s; }
.quick-guide-item:hover { background: rgba(255,255,255,.04); }
.quick-guide-item__icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.quick-guide-item__icon--green { background: linear-gradient(135deg,#10b981,#059669); }
.quick-guide-item__title { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.quick-guide-item__steps { display: block; font-size: 11px; color: #6b7280; }

.popular-article__link { display: flex; gap: 10px; text-decoration: none; color: inherit; padding: 6px; border-radius: 8px; transition: background .15s; }
.popular-article__link:hover { background: rgba(255,255,255,.04); }
.popular-article__rank { width: 22px; height: 22px; border-radius: 50%; background: #2a2a2e; color: #94a3b8; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.popular-article__title { font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 3px 0; line-height: 1.3; }
.popular-article__desc { font-size: 11px; color: #6b7280; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.video-item__link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px; border-radius: 8px; transition: background .15s; }
.video-item__link:hover { background: rgba(255,255,255,.04); }
.video-item__thumb { position: relative; width: 70px; height: 46px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #0f0f10; }
.video-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-item__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; }
.video-item__title { display: block; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }
.video-item__duration { display: block; font-size: 11px; color: #6b7280; }

.community-card { background: linear-gradient(135deg, #1a1040, #2d1b69); border: 1px solid #4c1d95; border-radius: 12px; padding: 20px; text-align: center; }
.community-card__title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px 0; }
.community-card__text { font-size: 12px; color: rgba(255,255,255,.7); margin: 0 0 14px 0; line-height: 1.5; }
.community-card__actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.community-card__link { font-size: 12px; color: #cbd5e1; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ===== Saved tutorials widget ===== */
.saved-widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.saved-widget-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; transition: background .15s; }
.saved-widget-item:hover { background: rgba(255,255,255,.04); }
.saved-widget-item__link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.saved-widget-item__thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #0f0f10; flex-shrink: 0; }
.saved-widget-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saved-widget-item__title { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saved-widget-item__remove { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: none; color: #10b981; font-size: 12px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.saved-widget-item__remove:hover { background: rgba(239,68,68,.15); color: #ef4444; }
.saved-widget-empty { font-size: 12px; color: #6b7280; text-align: center; padding: 18px 0; }
.saved-widget--guest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.saved-widget--guest__icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(16,185,129,.12); color: #10b981; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.saved-widget--guest__text { font-size: 12px; color: #94a3b8; margin: 0 0 4px 0; line-height: 1.5; }

/* ===========================================
   PAGE HEADER — همان تکنیک overlay صفحه‌ی news (mask محو به سمت پایین)
   طول نمایش تصویر بیشتر شد (320→480) تا عکس واقعاً دیده بشه، نه فقط یک نوار باریک
   =========================================== */
/* تأیید شد: base.css (که روی همه‌ی صفحات لود می‌شه) یک قانون global برای `.page-header` داره:
   padding + text-align + border-bottom + margin-bottom مثبت.
   چون `.page-header--tutorials` هم دقیقاً هم‌سطح specificity (یک کلاس) با `.page-header` هست،
   هر کدوم آخر لود بشن برای خاصیت‌های مشترک (مخصوصاً margin-bottom و border-bottom) برنده می‌شن.
   دقیقاً همین margin-bottom مثبتِ base.css داشت مقدار منفیِ ما رو خنثی می‌کرد و نمی‌ذاشت
   عکس زیر کارت‌ها بره. برای همین *هر* خاصیتی که در base.css هم روی .page-header ست شده،
   اینجا !important گرفته تا صد در صد قطعی override بشه.
   همچنین background-position به «center top» برگشت (قبلاً به‌اشتباه center شده بود
   که باعث می‌شد وسط عکس نشون داده بشه، نه بالای عکس).
   نکته‌ی دوم و مهم‌تر: علت اینکه با وجود overlap محاسباتی، عکس زیر کارت‌ها اصلاً دیده نمی‌شد
   این بود که `.tutorials-page` یک بک‌گراند مات (#0f0f10) داشت که دقیقاً روی همون ناحیه‌ی
   محوشونده‌ی هدر می‌نشست و کاملاً می‌پوشوندش. اون بک‌گراند حذف شد (بالای همین فایل) تا عکس
   واقعاً از پشت کارت‌ها (توی فاصله‌ی بین‌شون) دیده بشه.
   مقدار overlap هم با واحد vh به ~۳۴٪ از ارتفاع صفحه رسید (یعنی واقعاً «یک‌سوم صفحه» طبق خواسته). */
.page-header--tutorials {
    position: relative;
    overflow: visible;
    height: auto !important;
    min-height: 0 !important;
    text-align: center;
    background-color: #0f1420;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 64px 0 calc(64px + 34vh) !important;
    margin-bottom: -34vh !important;
    border-bottom: none !important;
    -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.55) 45%, #000 80%, #000 100%);
            mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.55) 45%, #000 80%, #000 100%);
}
.page-header--tutorials__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,12,20,.82) 0%, rgba(10,12,20,.4) 50%, rgba(10,12,20,.65) 100%);
}
.page-header--tutorials .container { position: relative; z-index: 1; }
.page-header--tutorials .page-title { font-size: 34px; font-weight: 800; margin: 0 0 10px 0; }
.page-header--tutorials .page-subtitle { font-size: 15px; color: #cbd5e1; margin: 0 auto; max-width: 640px; line-height: 1.6; text-align: center; }
.page-header--tutorials ~ .tutorials-page { position: relative; z-index: 1; }
@media (max-width: 768px) {
    .page-header--tutorials {
        padding: 40px 0 calc(40px + 26vh) !important;
        margin-bottom: -26vh !important;
        -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.55) 45%, #000 80%, #000 100%);
                mask-image: linear-gradient(to top, transparent 0, rgba(0,0,0,.55) 45%, #000 80%, #000 100%);
    }
}

/* ===========================================
   TOAST NOTIFICATION — عیناً مطابق show.php
   =========================================== */
.toast-notification { position: fixed; top: 24px; inset-inline-end: 24px; background: #1a1a1c; border: 1px solid #2a2a2e; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 100050; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: all 0.3s ease; max-width: 400px; }
.toast-notification.show { opacity: 1; visibility: visible; transform: translateY(0); }
.toast-notification__body { display: flex; align-items: center; gap: 14px; padding: 18px; }
.toast-notification__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(16, 185, 129, 0.15); color: #10b981; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.toast-notification__content { flex: 1; }
.toast-notification__title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 4px 0; }
.toast-notification__message { font-size: 13px; color: #94a3b8; margin: 0; }
.toast-notification__close { background: transparent; border: none; color: #6b7280; font-size: 14px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.toast-notification__close:hover { background: #2a2a2e; color: #fff; }

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .tutorials-layout { grid-template-columns: 1fr 320px; }
    .sidebar--left { display: none; }
    .tutorial-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .tutorials-layout { grid-template-columns: 1fr; }
    .sidebar--right { display: none; }
}
@media (max-width: 700px) {
    .tutorial-grid--popular { grid-template-columns: 1fr; }
    .latest-item { grid-template-columns: 70px 1fr; }
    .latest-item__meta { display: none; }
}
@media (max-width: 600px) {
    .tutorial-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================
   RTL (فارسی) — چون بیشتر پوزیشن‌ها با inset-inline-* نوشته شده
   خودکار جابه‌جا می‌شوند؛ این چند مورد باقی‌مانده هستند که نیاز به override صریح دارند.
   =========================================== */
[dir="rtl"] .tutorial-card__meta i { margin-inline-end: 0; margin-inline-start: 4px; }