/* ============================================================
 * قالب فرانت‌اند «بازی‌های فارسی» — نسخه‌ی تکمیل‌شده با جزئیات دقیق
 * ============================================================ */

html[data-theme="dark"] {
    --sf-bg: #000000; --sf-surface: #191919; --sf-surface-2: #121212; --sf-surface-3: #232323;
    --sf-text: #ffffff; --sf-text-muted: #9a9a9a; --sf-border: #272727;
    --sf-radius-xl: 40px; --sf-radius-lg: 20px; --sf-radius: 14px; --sf-radius-avatar: 1.25rem;
    --sf-shadow-btn: 6px 7px 14px 0 rgba(0,0,0,.35);
}
html[data-theme="light"] {
    --sf-bg: #ffffff; --sf-surface: #F4F4F4; --sf-surface-2: #E9E9E9; --sf-surface-3: #DBDBDB;
    --sf-text: #000000; --sf-text-muted: #6b6b6b; --sf-border: #E3E3E3;
    --sf-radius-xl: 40px; --sf-radius-lg: 20px; --sf-radius: 14px; --sf-radius-avatar: 1.25rem;
    --sf-shadow-btn: 6px 7px 14px 0 rgba(0,0,0,.15);
}
:root { --sf-accent: #6c5ce7; }

.sekaans-farsi-body { margin: 0; background: var(--sf-bg); color: var(--sf-text); font-family: 'Vazirmatn', Tahoma, sans-serif; direction: rtl; line-height: 1.9; }
.sekaans-farsi-body * { box-sizing: border-box; }
.sekaans-farsi-body a { color: inherit; text-decoration: none; }
.sekaans-farsi-body img { max-width: 100%; display: block; }
.sekaans-farsi-body button { font-family: inherit; }

/* هدر */
.sekaans-farsi-topbar { background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); }
.sekaans-farsi-topbar-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px; font-size: 12px; }
.sekaans-farsi-ticker { color: var(--sf-text-muted); overflow: hidden; white-space: nowrap; }
.sekaans-farsi-topnav { display: flex; align-items: center; gap: 18px; }
.sekaans-farsi-topnav a { font-weight: 600; opacity: .85; padding-left: 20px; }
.sekaans-farsi-topnav a:hover { color: var(--sf-accent); opacity: 1; }
.sekaans-farsi-theme-toggle { background: var(--sf-surface-3); border: none; color: var(--sf-text); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sekaans-farsi-theme-toggle .sekaans-icon-moon { display: none; }
html[data-theme="light"] .sekaans-farsi-theme-toggle .sekaans-icon-sun { display: none; }
html[data-theme="light"] .sekaans-farsi-theme-toggle .sekaans-icon-moon { display: inline; }

.sekaans-farsi-mainbar { background: var(--sf-bg); border-bottom: 1px solid var(--sf-border); position: sticky; top: 0; z-index: 60; }
.sekaans-farsi-mainbar-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 20px; }
/* مورد ۳: خوشه‌ی آیکون‌ها دیگر کاملاً دکوراتیو/غیرقابل‌کلیک نیست — آیکون
   جستجو باید واقعاً کلیک‌پذیر باشد؛ pointer-events روی کل خوشه حذف شد و
   فقط روی دو آیکون تزئینی باقی‌مانده (span، نه button) به‌صورت جداگانه
   اعمال می‌شود. */
.sekaans-farsi-deco-icons { display: flex; align-items: center; gap: 10px; }
.sekaans-farsi-deco-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--sf-surface); border: none; display: flex; align-items: center; justify-content: center; color: var(--sf-text); cursor: pointer; }
span.sekaans-farsi-deco-icon { opacity: .55; pointer-events: none; }
button.sekaans-farsi-deco-icon:hover { color: var(--sf-accent); }
.sekaans-farsi-cat-pills { display: flex; gap: 10px; flex: 1; justify-content: center; flex-wrap: wrap; }
.sekaans-farsi-cat-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--sf-surface); border-radius: var(--sf-radius); padding: 8px 18px; font-size: 13px; font-weight: 700; }
.sekaans-farsi-pill-icon { flex-shrink: 0; }
.sekaans-farsi-pill-chevron { font-size: 15px; opacity: .55; line-height: 1; }
.sekaans-farsi-cat-pill:hover { color: var(--sf-accent); }
.sekaans-farsi-logo { display: flex; flex-direction: column; align-items: flex-end; }
.sekaans-farsi-logo img { max-height: 40px; }
.sekaans-farsi-logo-text { font-size: 20px; font-weight: 800; }
.sekaans-farsi-logo-sub { font-size: 10px; color: var(--sf-text-muted); }
@media (max-width: 900px) { .sekaans-farsi-cat-pills { display: none; } .sekaans-farsi-topbar-inner { flex-direction: column; gap: 6px; align-items: flex-end; } }

.sekaans-farsi-main { max-width: 1440px; margin: 0 auto; padding: 28px 24px 60px; }

/* اسلایدر هیرو صفحه اصلی */
/* رفع باگ مورد ۱: metن اکنون هم مثل تصویر position:absolute است — نه
   دیگر فرزند فلکس — پس هیچ محاسبه‌ی عرض فلکسی وجود ندارد که بتواند به
   اشتباه به عرض کوچک جمع شود. تصویر با flex:0 0 100% تضمین می‌کند هر
   اسلاید دقیقاً به اندازه‌ی کل تراک عرض دارد، صرف‌نظر از محتوای داخلش. */
.sekaans-farsi-hero-slide { flex: 0 0 100%; width: 100%; direction: rtl; }
.sekaans-farsi-hero-slide-inner { position: relative; width: 100%; height: var(--sf-hero-height, 340px); border-radius: var(--sf-radius-xl); overflow: hidden; background: var(--sf-surface); }
.sekaans-farsi-hero-img { position: absolute; inset: 0; z-index: 0; }
.sekaans-farsi-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block;border-radius:45px; }

/* مورد ۲: گرادیان از سمت راست شروع می‌شود (opaque) و به سمت چپ محو
   می‌شود (transparent) — دقیقاً برعکس نسخه‌ی قبلی. رنگ پیش‌فرض
   var(--sf-bg) است که به‌طور خودکار بین تم روشن/تیره سوییچ می‌کند؛
   وقتی مدیر برای این اسلاید رنگ دستی تنظیم کرده باشد (data-gradient-custom
   روی خود اسلاید)، قوانین اختصاصی زیر آن را بازنویسی می‌کنند. */
.sekaans-farsi-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to left, var(--sf-bg) 10%, transparent 65%); }
html[data-theme="light"] .sekaans-farsi-hero-slide[data-gradient-custom] .sekaans-farsi-hero-overlay { background: linear-gradient(to left, var(--sf-hero-gradient-light, var(--sf-bg)) 10%, transparent 65%); }
html[data-theme="dark"] .sekaans-farsi-hero-slide[data-gradient-custom] .sekaans-farsi-hero-overlay { background: linear-gradient(to left, var(--sf-hero-gradient-dark, var(--sf-bg)) 10%, transparent 65%); }

/* متن اکنون absolute و همیشه در سمت راست فیزیکی (right:50px)، صرف‌نظر
   از direction، چون top/right/left در absolute positioning همیشه
   فیزیکی هستند نه منطقی — این‌طور از هرگونه ابهام RTL/LTR که در نسخه‌ی
   قبلی مشکل‌ساز شده بود، به‌طور کامل پرهیز می‌شود. */
.sekaans-farsi-hero-text { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; }
/* رنگ متن‌ها اکنون از متغیرهای عادی تم استفاده می‌کند (نه دیگر همیشه
   سفید) چون پس‌زمینه‌ی زیر متن دیگر همیشه تیره نیست — با گرادیان جدید،
   دقیقاً رنگ زمینه‌ی همان تم زیر متن قرار می‌گیرد، پس متن هم باید مثل
   بقیه‌ی متن‌های سایت (var(--sf-text-muted)) رفتار کند. */
.sekaans-farsi-hero-eng { font-size: 16px; color: var(--sf-text-muted); }
.sekaans-farsi-hero-title { margin: 0; font-size: clamp(24px, 5vw, 48px); font-weight: 800; color: var(--sf-accent); }

.sekaans-farsi-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
/* دکمه‌ها هم به رنگ‌های استاندارد تم برگشتند (به‌جای همیشه‌سفید قبلی)،
   چون زمینه‌ی زیرشان دیگر همیشه تصویر تیره نیست. */
.sekaans-farsi-btn-hero { display: inline-flex; align-items: center; gap: 8px; background: var(--sf-surface-3); color: var(--sf-text); padding: 12px 24px; border-radius: var(--sf-radius); font-weight: 700; box-shadow: var(--sf-shadow-btn); border: 1px solid var(--sf-border); }
.sekaans-farsi-btn-hero-outline { background: var(--sf-surface); }
.sekaans-farsi-btn-hero-outline:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.sekaans-farsi-btn-hero-icon { width: 16px; height: 16px; }
html[data-theme="dark"] .sekaans-farsi-btn-hero-outline .sekaans-farsi-btn-hero-icon { filter: invert(1); }

@media (max-width: 800px) {
    .sekaans-farsi-hero-text { right: 20px; left: 20px; max-width: none; }
}


.sekaans-farsi-hero-dots { display: flex; justify-content: center; gap: 15px; margin-top: 30px;margin-bottom: 20px; }
.sekaans-farsi-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-surface-3); border: none; cursor: pointer; }
.sekaans-farsi-hero-dot.sekaans-active { background: var(--sf-accent); width: 22px; border-radius: 5px; }
@media (max-width: 800px) { .sekaans-farsi-hero-slide-inner { flex-direction: column-reverse; } .sekaans-farsi-hero-img { flex: none; width: 100%; height: 220px; } .sekaans-farsi-hero-text { padding: 24px; }
.sekaans-farsi-hero-slide{--sf-hero-gradient-light: none !important;--sf-hero-gradient-dark: none !important;}
}
/* ردیف‌های دسته‌بندی صفحه اصلی */
.sekaans-farsi-cat-row { margin-bottom: 40px; }
.sekaans-farsi-cat-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.sekaans-farsi-cat-title { font-size: 22px; margin: 0; font-weight: 800; }
.sekaans-farsi-scroll-btn {
    display: inline-flex; align-items: center; gap: 8px; background: var(--sf-surface); border: 1px solid var(--sf-border);
    color: var(--sf-text); padding: 9px 18px; border-radius: 30px; cursor: pointer; font-size: 13px; font-weight: 700;
}
.sekaans-farsi-scroll-btn:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.sekaans-farsi-seeall-arrow { font-size: 16px; line-height: 1; }
.sekaans-farsi-cards-scroll { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; }
.sekaans-farsi-cards-scroll::-webkit-scrollbar { height: 6px; }
.sekaans-farsi-cards-scroll::-webkit-scrollbar-thumb { background: var(--sf-surface-3); border-radius: 10px; }

/* کارت نمایش عنوان — بازطراحی (موارد ۱ و ۲): بدون پس‌زمینه‌ی جعبه‌ای، رادیوس
   چهارگوش روی خود تصویر (نه کل کارت)، متن وسط‌چین، دکمه‌های دانلود/خرید. */
.sekaans-farsi-card { flex: 0 0 200px; transition: transform .18s; }
.sekaans-farsi-card-img:hover { box-shadow: -4px 5px 13px -2px #000000ad; }
.sekaans-farsi-card-img { position: relative; display: block; background: var(--sf-surface-2); border-radius: var(--sf-radius-lg); overflow: hidden; }
.sekaans-farsi-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sekaans-farsi-ribbon { position: absolute; top: 16px; right: -37px; transform: rotate(45deg); background: #D30C14; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 40px; z-index: 2; }
.sekaans-farsi-plat-corner { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 10px; padding: 3px 9px; border-radius: 8px; z-index: 2; }

/* آیکون SVG اختصاصی پلتفرم (مورد ۱): هر دو نسخه‌ی روشن/تاریک هم‌زمان
   رندر می‌شوند و فقط با CSS بر اساس data-theme فعلی جابه‌جا می‌شوند —
   چون تغییر تم سمت کاربر و لحظه‌ای است، محاسبه‌ی سمت سرور (PHP) امکان‌پذیر
   نیست. */
.sekaans-farsi-plat-svg-icon { position: absolute; left: -1px; top: 50%; transform: translateY(-50%); z-index: 2; height: 40%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.sekaans-farsi-plat-svg-icon img { height: 100%; width: auto; display: block; }
.sekaans-farsi-plat-icon-light { display: none; }
.sekaans-farsi-plat-icon-dark { display: block; }
html[data-theme="light"] .sekaans-farsi-plat-icon-light { display: block; }
html[data-theme="light"] .sekaans-farsi-plat-icon-dark { display: none; }

.sekaans-farsi-card-body { padding: 14px 10px 4px; text-align: center; }
.sekaans-farsi-card-eyebrow { font-size: 11px; color: var(--sf-text-muted); margin-bottom: 4px; }
.sekaans-farsi-card-title {
    font-weight: 700;
  font-size: 14px;
  color: var(--sf-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  direction: ltr;
}
.sekaans-farsi-card-title:hover { color: var(--sf-accent); }
.sekaans-farsi-card-subtitle { font-size: 12px; color: var(--sf-text-muted); margin-top: 4px; }

.sekaans-farsi-card-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.sekaans-farsi-card-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid var(--sf-border); flex-shrink: 0;
}
.sekaans-farsi-card-btn-icon { width: 16px; height: 16px; display: block; }
.sekaans-farsi-card-btn-download { background: var(--sf-surface); }
.sekaans-farsi-card-btn-download:hover { border-color: var(--sf-accent); }
/* فایل‌های SVG ارسالی تک‌رنگ سیاه هستند؛ در حالت تیره با invert به سفید
   تبدیل می‌شوند تا روی پس‌زمینه‌ی تیره‌ی دکمه خوانا بمانند. */
html[data-theme="dark"] .sekaans-farsi-card-btn-download .sekaans-farsi-card-btn-icon { filter: invert(1); }
.sekaans-farsi-card-btn-buy { background: var(--sf-accent); border-color: var(--sf-accent); }
.sekaans-farsi-card-btn-buy:hover { filter: brightness(1.08); }
.sekaans-farsi-banner { margin: 24px 0 40px; border-radius: var(--sf-radius-lg); overflow: hidden; height: 190px; }
.sekaans-farsi-banner a, .sekaans-farsi-banner > img { display: block; width: 100%; height: 100%; }
.sekaans-farsi-banner img { width: 100%; height: 100%; object-fit: cover; }

/* مورد ۲: حالت دو قسمتی — دو نیمه‌ی هم‌عرض کنار هم، هرکدام با لینک و
   object-fit:cover مستقل خودشان، با یک فاصله‌ی کوچک بین دو نیمه. */
.sekaans-farsi-banner-split { display: flex; gap: 8px; }
.sekaans-farsi-banner-half-wrap { flex: 1 1 50%; min-width: 0; height: 100%; }
.sekaans-farsi-banner-half-wrap a, .sekaans-farsi-banner-half-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sekaans-farsi-empty { text-align: center; color: var(--sf-text-muted); padding: 80px 0; }

/* ============== صفحه جزئیات: هدر سه‌ستونه ============== */
.sekaans-farsi-single-hero {border-radius: var(--sf-radius-xl); overflow: hidden; margin-bottom: 100px;margin-top:55px; }
.sekaans-farsi-single-hero-inner { display: flex; align-items: stretch; gap: 30px; flex-wrap: wrap; padding: 0; }
.sekaans-farsi-single-cover { flex: 0 0 260px; }
.sekaans-farsi-single-cover img { width: 100%; height: 100%; object-fit: cover;border-radius: var(--sf-radius-xl); }

.sekaans-farsi-hero-mid { flex: 1; min-width: 260px; padding: 32px 0; display: flex; flex-direction: column; gap: 40px; justify-content: center; }
.sekaans-farsi-hero-titles h1 { margin: 0; font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--sf-accent); }
.sekaans-farsi-hero-titles {margin-top: -37px;}
.sekaans-farsi-hero-eng-title { font-size: 14px; color: var(--sf-text-muted); }

.sekaans-farsi-hero-cols { display: flex; gap: 30px; flex-wrap: wrap; }
.sekaans-farsi-hero-badge-rows { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.sekaans-farsi-badge-row { display: flex; flex-wrap: wrap; gap: 11px;line-height: 25px; }
.sekaans-farsi-badge { background: var(--sf-surface-3); border-radius: 20px; padding: 5px 14px; font-size: 12px; margin-bottom: 25px;}
.sekaans-farsi-badge-accent { background: var(--sf-accent); color: #111; border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 700; }

.sekaans-farsi-devpub-box { flex: 0 0 200px; background: var(--sf-surface-2); border-radius: var(--sf-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;max-height: 150px; }
.sekaans-farsi-devpub-row { display: flex; flex-direction: column; gap: 2px; }
.sekaans-farsi-devpub-row span { font-size: 11px; color: var(--sf-text-muted); }
.sekaans-farsi-devpub-row strong { font-size: 13px; }

.sekaans-farsi-hero-sidebar { flex: 0 0 240px; padding: 26px 26px 26px 0; display: flex; align-items: center;left: 19px;position: relative; }
@media (max-width: 1000px) { .sekaans-farsi-single-hero-inner { flex-direction: column-reverse; padding: 0; } .sekaans-farsi-single-cover { width: 100%; flex: none; height: 280px; } .sekaans-farsi-hero-sidebar { width: 100%; padding: 20px 24px; } .sekaans-farsi-hero-mid { padding: 0 24px 24px; } }

/* جعبه‌ی اقدام (لینک دانلود/سازگاری/خرید) — استفاده‌ی مشترک در هدر و سایدبار چسبان */
.sekaans-farsi-action-box { display: flex; flex-direction: column; gap: 17px; width: 100%; }
.sekaans-farsi-action-item { display: flex; align-items: center; gap: 10px; background: var(--sf-accent); color: #111; border-radius: var(--sf-radius); padding: 12px 16px; font-size: 13px; box-shadow: var(--sf-shadow-btn); border: none; cursor: pointer; }
.sekaans-farsi-action-item strong { display: block; font-size: 13px; }
.sekaans-farsi-action-item small { display: block; font-size: 10px; opacity: .75; }
.sekaans-farsi-action-icon { font-size: 18px; }
.sekaans-farsi-action-secondary { background: var(--sf-bg); color: var(--sf-text); border: 0px solid var(--sf-border); }
.sekaans-farsi-action-buy { background: var(--sf-surface-3); color: var(--sf-text); }
.sekaans-farsi-sticky-sidebar { position: relative; }
.sekaans-farsi-action-box-sticky.sekaans-farsi-fixed { position: fixed; z-index: 40; }
.sekaans-farsi-action-box-sticky.sekaans-farsi-bottom-aligned { position: absolute; bottom: 0; inset-inline-start: 0; width: 100% !important; }

/* گالری */
/* گالری تصاویر — کاروسل ۳تایی هم‌عرض با ناوبری واقعی (مورد ۱). خط قبلی
   scroll-snap با overflow-x:auto حذف شد چون همان اسکرول‌بار ناخواسته‌ی
   گزارش‌شده را ایجاد می‌کرد؛ جایگزین آن transform:translateX روی یک
   viewport با overflow:hidden است که هیچ اسکرول‌بار بومی مرورگر ندارد. */
.sekaans-farsi-gallery-wrap { position: relative; margin-bottom: 40px; }
.sekaans-farsi-gallery-viewport { overflow: hidden; border-radius: var(--sf-radius-lg); direction: ltr; }
.sekaans-farsi-gallery-track { display: flex; direction: ltr; transition: transform .5s ease; will-change: transform; }
.sekaans-farsi-gallery-slide {
    position: relative; flex: 0 0 33.3334%; max-width: 33.3334%; border: none; padding: 0; margin: 0;
    background: none; cursor: pointer; display: block; direction: rtl;
}
.sekaans-farsi-gallery-slide + .sekaans-farsi-gallery-slide { border-inline-start: 3px solid var(--sf-bg); }
.sekaans-farsi-gallery-slide img { width: 100%; height: 360px; object-fit: cover; display: block; }
.sekaans-farsi-gallery-watermark { position: absolute; bottom: 14px; inset-inline-start: 14px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 8px; pointer-events: none; }
.sekaans-farsi-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; background: var(--sf-surface); border: 1px solid var(--sf-border); color: var(--sf-text); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* موقعیت فیزیکی ثابت (نه منطقی/RTL) طبق تصویر مرجع: پیکان «قبلی» همیشه
   سمت چپ ظاهری و «بعدی» همیشه سمت راست ظاهری قرار دارد. */
.sekaans-farsi-gallery-prev { left: -18px; }
.sekaans-farsi-gallery-next { right: -18px; }
.sekaans-farsi-gallery-caption { text-align: center; margin-top: 16px; font-size: 13px; color: var(--sf-text-muted); }
@media (max-width: 900px) {
    .sekaans-farsi-gallery-slide { flex: 0 0 100%; max-width: 100%; }
    .sekaans-farsi-gallery-slide img { height: 240px; }
    .sekaans-farsi-gallery-nav { display: none; }
}

/* نمایشگر تمام‌صفحه (لایت‌باکس) */
.sekaans-farsi-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: none; align-items: center; justify-content: center; }
.sekaans-farsi-lightbox.sekaans-open { display: flex; }
.sekaans-farsi-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.sekaans-farsi-lightbox-close { position: absolute; top: 24px; inset-inline-end: 24px; background: rgba(255,255,255,.12); border: none; color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; cursor: pointer; line-height: 1; }
.sekaans-farsi-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.sekaans-farsi-lightbox-prev { left: 26px; }
.sekaans-farsi-lightbox-next { right: 26px; }
.sekaans-farsi-lightbox-counter { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(255,255,255,.12); padding: 5px 14px; border-radius: 20px; }
@media (max-width: 700px) {
    .sekaans-farsi-lightbox-nav { width: 40px; height: 40px; font-size: 20px; }
    .sekaans-farsi-lightbox-prev { left: 10px; }
    .sekaans-farsi-lightbox-next { right: 10px; }
}
/* ستون‌بندی محتوا + سایدبار چسبان */
.sekaans-farsi-content-columns { display: flex; gap: 30px; }
.sekaans-farsi-main-content { flex: 1; min-width: 0; }
.sekaans-farsi-sticky-sidebar { flex: 0 0 240px; }
@media (max-width: 900px) { .sekaans-farsi-content-columns { flex-direction: column; } .sekaans-farsi-sticky-sidebar { width: 100%; } .sekaans-farsi-action-box-sticky { position: static; } }

.sekaans-farsi-description { line-height: 2; margin-bottom: 10px; }
.sekaans-farsi-section-title { font-size: 20px; font-weight: 800; margin: 34px 0 16px; }
.sekaans-farsi-panel { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 20px; margin: 16px 0; }
.sekaans-farsi-panel h3, .sekaans-farsi-panel h4 { margin-top: 0; }
.sekaans-farsi-panel-content { line-height: 2; }
.sekaans-farsi-sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .sekaans-farsi-sr-grid { grid-template-columns: 1fr; } }
.sekaans-farsi-sr-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.sekaans-farsi-sr-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--sf-border); }
.sekaans-farsi-sr-list li span:first-child { color: var(--sf-text-muted); }

.sekaans-farsi-dl-item { border: 1px solid var(--sf-border); border-radius: var(--sf-radius); margin-bottom: 10px; overflow: hidden; }
.sekaans-farsi-dl-toggle { width: 100%; display: flex; justify-content: space-between; background: var(--sf-surface); border: none; color: var(--sf-text); padding: 15px 18px; cursor: pointer; font-weight: 700; font-size: 14px; }
.sekaans-farsi-dl-count { color: var(--sf-text-muted); font-weight: 400; font-size: 12px; }
.sekaans-farsi-dl-panel { max-height: 0; overflow: hidden; padding: 0 18px; transition: max-height .35s ease, padding .35s ease; }
.sekaans-farsi-dl-item.sekaans-open .sekaans-farsi-dl-panel { padding: 12px 18px; }
.sekaans-farsi-dl-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--sf-border); font-size: 13px; }
.sekaans-farsi-btn-mini { background: var(--sf-accent); color: #111; padding: 6px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; }
#sekaans-farsi-downloads { scroll-margin-top: 110px; }
/* دیدگاه‌ها */
.sekaans-farsi-comments { max-width: 1000px; margin: 50px auto 0; }
.sekaans-farsi-comments-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sekaans-farsi-comments-header h2 { font-size: 22px; font-weight: 800; margin: 0; }
.sekaans-farsi-btn-dark { background: var(--sf-bg); color: var(--sf-text); border: 1px solid var(--sf-border); padding: 10px 24px; border-radius: var(--sf-radius); font-weight: 700; box-shadow: var(--sf-shadow-btn); cursor: pointer; display: inline-block; }
.sekaans-farsi-no-comments { color: var(--sf-text-muted); text-align: center; padding: 30px 0; }
.sekaans-farsi-comments-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.sekaans-farsi-comment-row { display: flex; align-items: flex-start; gap: 16px; }
.sekaans-farsi-comment-avatar-col { flex: 0 0 auto; }
.sekaans-farsi-comment-avatar { width: 48px; height: 48px; border-radius: var(--sf-radius-avatar); border: 1px solid var(--sf-border); object-fit: cover; }
.sekaans-farsi-comment-content { flex: 1; min-width: 0; }
.sekaans-farsi-comment-head { display: flex; align-items: center; gap: 10px; }
.sekaans-farsi-comment-author { font-weight: 700; font-size: 15px; }
.sekaans-farsi-comment-date { font-size: 12px; color: var(--sf-text-muted); }
.sekaans-farsi-comment-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; font-size: 12px; color: var(--sf-text-muted); }
.sekaans-farsi-comment-reply-link a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.sekaans-farsi-comment-reply-link a:hover { color: var(--sf-accent); }
.sekaans-farsi-comment-like { display: inline-flex; align-items: center; gap: 5px; opacity: .6; }
.sekaans-farsi-comment-text { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.sekaans-farsi-comment-reply { margin-inline-start: 64px; padding-inline-start: 20px; border-inline-start: 2px solid var(--sf-border); margin-top: 20px; }
.sekaans-farsi-comment-form-wrap { background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 26px; }
.sekaans-farsi-comment-form #reply-title { font-size: 18px; font-weight: 800; margin-top: 0; }
.sekaans-farsi-comment-field-row { margin-bottom: 12px; }
.sekaans-farsi-comment-input, .sekaans-farsi-comment-textarea { width: 100%; background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 12px 16px; color: var(--sf-text); font-family: inherit; font-size: 13px; }
.sekaans-farsi-comment-textarea { min-height: 120px; resize: vertical; margin-bottom: 12px; }
.sekaans-farsi-comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sf-text-muted); margin-bottom: 12px; }

.sekaans-farsi-footer { border-top: 1px solid var(--sf-border); margin-top: 50px; }
.sekaans-farsi-footer-inner { max-width: 1440px; margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; color: var(--sf-text-muted); font-size: 13px; }

/* ============================================================
 * نوار تب‌های ناوبری + محصولات مشابه (فیچرهای تکمیلی صفحه جزئیات)
 * ============================================================ */
.sekaans-farsi-tab-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 40px; }
.sekaans-farsi-tab-pill { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 30px; padding: 10px 22px; font-size: 13px; font-weight: 700; transition: color .15s, border-color .15s; }
.sekaans-farsi-tab-pill:hover { color: var(--sf-accent); border-color: var(--sf-accent); }

.sekaans-farsi-related { margin-top: 80px; }
.sekaans-farsi-related-header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sekaans-farsi-related-header h2 { font-size: 22px; font-weight: 800; margin: 0; }
.sekaans-farsi-related-header p { font-size: 12px; color: var(--sf-text-muted); margin: 0; }

/* اطمینان از فرود درست لنگرهای جدید زیر هدر چسبان، حتی اگر به هر دلیلی
   JS اسکرول نرم اجرا نشود. */
#sekaans-farsi-description, #sekaans-farsi-install-guide, #comments { scroll-margin-top: 110px; }
/* ============================================================
 * لینک‌دهی بج‌های تاکسونومی (مورد ۱)
 * ============================================================ */
a.sekaans-farsi-badge, a.sekaans-farsi-badge-accent { cursor: pointer; transition: color .15s, background .15s; }
a.sekaans-farsi-badge:hover { color: var(--sf-accent); }
a.sekaans-farsi-badge-accent:hover { filter: brightness(1.1); }
.sekaans-farsi-devpub-row strong a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sekaans-farsi-devpub-row strong a:hover { color: var(--sf-accent); }
.sekaans-farsi-seeall-btn { text-decoration: none; }

/* ============================================================
 * صفحه آرشیو فیلترشده (مورد ۱)
 * ============================================================ */
.sekaans-farsi-filtered-header { margin-bottom: 24px; }
.sekaans-farsi-back-link { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--sf-text-muted); }
.sekaans-farsi-back-link:hover { color: var(--sf-accent); }
.sekaans-farsi-filtered-header h1 { font-size: 24px; font-weight: 800; margin: 0; }
.sekaans-farsi-filtered-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-bottom: 30px; }
.sekaans-farsi-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px 0; font-size: 13px; }
.sekaans-farsi-pagination a { background: var(--sf-surface); border-radius: var(--sf-radius); padding: 8px 18px; }
.sekaans-farsi-pagination a:hover { color: var(--sf-accent); }

/* ============================================================
 * فیلتر باکس‌های دانلود (مورد ۳)
 * ============================================================ */
.sekaans-farsi-dl-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.sekaans-farsi-dl-filter-btn { background: var(--sf-surface); border: 1px solid var(--sf-border); color: var(--sf-text); border-radius: 30px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.sekaans-farsi-dl-filter-btn:hover { border-color: var(--sf-accent); }
.sekaans-farsi-dl-filter-btn.sekaans-active { background: var(--sf-accent); color: #111; border-color: var(--sf-accent); }
.sekaans-farsi-dl-item.sekaans-farsi-dl-hidden { display: none; }

/* اطمینان از فرود درست لنگرهای جدید زیر هدر چسبان */
#sekaans-farsi-update-info, #sekaans-farsi-system-requirements { scroll-margin-top: 110px; }
/* ============================================================
 * مودال جستجو (مورد ۳)
 * ============================================================ */
.sekaans-farsi-search-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9998; display: none; align-items: flex-start; justify-content: center; padding: 90px 20px; }
.sekaans-farsi-search-modal.sekaans-open { display: flex; }
.sekaans-farsi-search-modal-inner { position: relative; background: var(--sf-surface); border-radius: var(--sf-radius-lg); padding: 28px; width: 100%; max-width: 620px; }
.sekaans-farsi-search-modal-inner h3 { margin: 0 0 16px; font-size: 18px; }
.sekaans-farsi-search-close { position: absolute; top: 16px; inset-inline-end: 16px; background: var(--sf-surface-3); border: none; color: var(--sf-text); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.sekaans-farsi-search-form { display: flex; gap: 10px; }
.sekaans-farsi-search-input { flex: 1; background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 12px 16px; color: var(--sf-text); font-family: inherit; font-size: 14px; }
.sekaans-farsi-search-submit { background: var(--sf-accent); border: none; color: #111; width: 46px; border-radius: var(--sf-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sekaans-farsi-search-popular-label { font-size: 12px; color: var(--sf-text-muted); margin: 18px 0 8px; }
.sekaans-farsi-search-popular { display: flex; flex-wrap: wrap; gap: 8px; }
.sekaans-farsi-search-tag { background: var(--sf-surface-3); border: none; color: var(--sf-text); border-radius: 20px; padding: 7px 16px; font-size: 12.5px; cursor: pointer; }
.sekaans-farsi-search-tag:hover { color: var(--sf-accent); }
/* ============================================================
 * رفع قطعی و نهایی کاروسل اسلایدر هیرو — این بلوک تک‌منبع حقیقت
 * (single source of truth) برای چیدمان/برش/انیمیشن این کاروسل است.
 *
 * نکته‌ی فنی کلیدی که جا افتاده بود: در تکنیک استاندارد کاروسل فلکس،
 * وقتی چند فرزند فلکس هرکدام flex:0 0 100% دارند، این فرزندان از
 * مرزهای جعبه‌ی خودِ تراک بیرون می‌زنند (چون عرض خودِ تراک هنوز فقط
 * ۱۰۰٪ والدش است، نه ۳۰۰٪ برای سه اسلاید). این دقیقاً علت دیده‌شدن
 * لبه‌ی اسلایدهای مجاور در دو طرف بود. راه‌حل استاندارد: overflow:hidden
 * روی کانتینر بیرونی (.sekaans-farsi-hero-slider) که هرچه از مرز جعبه
 * بیرون زد را می‌برد و فقط اسلاید فعال (که دقیقاً هم‌عرض با جعبه‌ی
 * بیرونی است) نمایان می‌ماند.
 */
.sekaans-farsi-hero-slider {
    overflow: hidden !important;
    border-radius: var(--sf-radius-xl) !important;
}
.sekaans-farsi-hero-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    direction: ltr !important;
    /* انیمیشن روان جابجایی (هم دستی با کلیک روی نقطه‌ها، هم خودکار).
       cubic-bezier به‌جای ease ساده استفاده شد تا حرکت یک شتاب‌گیری و
       کندشدن طبیعی‌تر (نه یکنواخت) داشته باشد — حسی حرفه‌ای‌تر نسبت به
       easing پیش‌فرض مرورگر. */
    transition: transform .7s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform;
}
.sekaans-farsi-hero-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* چون border-radius اکنون روی خودِ .sekaans-farsi-hero-slider (کانتینر
   ثابت و غیرمتحرک) قرار دارد، نیازی نیست هر اسلاید یا تصویر داخلی هم
   جداگانه radius داشته باشد؛ اگر قانون قبلی روی sekaans-farsi-hero-slide-inner
   با radius دیگری تداخل داشت، همین‌جا صفر می‌شود تا فقط یک radius واحد
   (روی لبه‌ی بیرونی کل کاروسل) دیده شود، نه گوشه‌های نامنظم داخل هر اسلاید. */
.sekaans-farsi-hero-slide-inner {
    border-radius: 0 !important;
    background: none;
}
/* ============================================================
 * پچ‌های ریسپانسیو موبایل — بلوک مستقل و تضمینی (طبق تصمیم پروژه، برای
 * جلوگیری از هرگونه ناسازگاری با نسخه‌های قبلی همین بخش از فایل، این
 * قوانین در انتهای فایل و با اولویت بالا اضافه شده‌اند)
 * ============================================================ */

/* ---------- مورد ۱: منوی همبرگری نوار بالا ---------- */
.sekaans-farsi-topnav-toggle { display: none; }
@media (max-width: 700px) {
    .sekaans-farsi-ticker{display: none;}
    .sekaans-farsi-topbar { position: relative; }
    .sekaans-farsi-topbar-inner { flex-wrap: wrap; }
    .sekaans-farsi-topnav-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 30px; height: 32px; background: transparent; border: none; cursor: pointer; padding: 0;right: 10px;position: absolute;
    }
    .sekaans-farsi-topnav-toggle span { display: block; width: 100%; height: 2px; background: var(--sf-text); border-radius: 2px; }
    .sekaans-farsi-topnav-links {
        display: none; position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0;
        background: var(--sf-surface); border-bottom: 1px solid var(--sf-border);
        flex-direction: column; padding: 6px 20px; z-index: 70;
    }
    .sekaans-farsi-topnav-links.sekaans-open { display: flex; }
    .sekaans-farsi-topnav-links a { padding: 12px 0; border-bottom: 1px dashed var(--sf-border); font-size: 13px; }
    .sekaans-farsi-topnav-links a:last-child { border-bottom: none; }
}

/* ---------- مورد ۲: اسلایدر هیرو با ابعاد استاندارد در موبایل ---------- */
@media (max-width: 800px) {
    /* ارتفاع دستی انتخاب‌شده در تنظیمات (که می‌تواند تا ۸۰۰px هم باشد،
       مناسب دسکتاپ) در موبایل نادیده گرفته می‌شود و یک ارتفاع استاندارد
       جایگزین می‌شود؛ !important برای غلبه‌ی قطعی بر متغیر CSS اینلاین
       ست‌شده در PHP لازم است. */
    .sekaans-farsi-hero-slide-inner { height: 440px !important; }

    /* متن/دکمه‌ها از حالت «وسط عمودی، سمت راست» (طراحی‌شده برای عرض
       زیاد دسکتاپ) به یک پنل ثابت در پایین تصویر تغییر می‌کند تا هیچ
       فضای خالی حس‌نشده در وسط باقی نماند؛ گرادیان هم از پایین-به-بالا
       (به‌جای راست-به-چپ) تغییر جهت می‌دهد تا زیر همین پنل متن را
       خوانا نگه دارد. */
    .sekaans-farsi-hero-overlay {
        background: linear-gradient(to top, var(--sf-bg) 25%, transparent 70%) !important;
    }
    html[data-theme="light"] .sekaans-farsi-hero-slide[data-gradient-custom] .sekaans-farsi-hero-overlay {
        background: linear-gradient(to top, var(--sf-hero-gradient-light, var(--sf-bg)) 25%, transparent 70%) !important;
    }
    html[data-theme="dark"] .sekaans-farsi-hero-slide[data-gradient-custom] .sekaans-farsi-hero-overlay {
        background: linear-gradient(to top, var(--sf-hero-gradient-dark, var(--sf-bg)) 25%, transparent 70%) !important;
    }
    .sekaans-farsi-hero-dots{
        margin-top: 0px;
        margin-bottom: 55px;
    }
    .sekaans-farsi-hero-text {
        position: absolute !important; bottom: 0 !important;
        right: 0 !important; left: 0 !important; transform: none !important;
        max-width: none !important; padding: 18px !important; gap: 8px !important;
        align-items: stretch !important; text-align: center;
    }
    .sekaans-farsi-hero-eng { font-size: 13px; }
    .sekaans-farsi-hero-title { font-size: 22px !important; }
    .sekaans-farsi-hero-actions { justify-content: center !important; }
    .sekaans-farsi-btn-hero { flex: 1 1 auto; justify-content: center; padding: 10px 14px; font-size: 12.5px; }
}

/* ---------- مورد ۳: بنر دو قسمتی به‌صورت زیر هم در موبایل ---------- */
@media (max-width: 700px) {
    .sekaans-farsi-banner.sekaans-farsi-banner-split { height: auto !important; }
    .sekaans-farsi-banner-split { flex-direction: column !important; gap: 8px; }
    .sekaans-farsi-banner-split .sekaans-farsi-banner-half-wrap { width: 100%; height: 190px; }
}

/* ---------- مورد ۴: چیدمان Grid صفحه جزئیات (تصویر → عنوان → جعبه اقدام → بج‌ها) ---------- */
.sekaans-farsi-single-hero-inner {
    display: grid !important;
    grid-template-columns: 260px 1fr 240px;
    grid-template-rows: auto auto;
    grid-template-areas:
        "cover titles sidebar"
        "cover cols   sidebar";
    gap: 0 30px;
    align-items: stretch;
}
.sekaans-farsi-single-cover { grid-area: cover; }
.sekaans-farsi-hero-titles { grid-area: titles; align-self: center; padding-top: 32px; display: flex; flex-direction: column; gap: 6px; }
.sekaans-farsi-hero-titles h1 { margin: 0; font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--sf-accent); }
.sekaans-farsi-hero-eng-title { font-size: 14px; color: var(--sf-text-muted); }
.sekaans-farsi-hero-cols { grid-area: cols; padding-bottom: 32px; display: flex; gap: 30px; flex-wrap: wrap; }
.sekaans-farsi-hero-sidebar { grid-area: sidebar; align-self: center; padding: 26px 26px 26px 0; display: flex; align-items: center; }

@media (max-width: 1000px) {
    .sekaans-farsi-single-hero-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas:
            "cover"
            "titles"
            "sidebar"
            "cols" !important;
        gap: 0 !important;
    }
    .sekaans-farsi-single-cover { padding: 16px 16px 0; }
    /* مورد ۴ (بخش دوم): در موبایل تصویر به‌جای برش‌خوردن (object-fit:cover
       با ارتفاع ثابت که باعث بریده‌شدن پوستر عمودی بلند می‌شد)، کامل و
       بدون کراپ نمایش داده می‌شود؛ اگر نسبت ابعاد تصویر با کادر یکی
       نباشد، فضای خالی اطراف با رنگ سطح دوم پر می‌شود (letterbox) تا هیچ
       بخشی از تصویر گم نشود. */
    .sekaans-farsi-single-cover img {
        width: 100%; height: auto; max-height: 420px; object-fit: contain;
        background: var(--sf-surface-2); border-radius: var(--sf-radius-lg);
    }
    .sekaans-farsi-hero-titles { padding: 16px 24px 0; text-align: center; align-items: center;margin-top: 160px; }
    .sekaans-farsi-hero-sidebar { width: 100%; padding: 16px 24px; position: initial; }
    .sekaans-farsi-hero-cols { padding: 0 24px 24px; flex-direction: column; }
}
@media(min-width:1138px) and (max-width:1244px){
    .sekaans-farsi-single-cover img{height:77%;}
    .sekaans-farsi-devpub-box{max-height: 200px;}
}
@media(min-width:1000px) and (max-width:1137px){
    .sekaans-farsi-single-cover img{height:55%;}
    .sekaans-farsi-devpub-box{max-height: 200px;}
}