/* =========================================================
   Khobregan Portal – CLEAN CONSOLIDATED CSS
   ---------------------------------------------------------
   نکته: این فایل باید آخر از همه لود شود تا override ها اعمال شوند
   ========================================================= */

/* ---------- Root & Base ---------- */
:root{
  --kh-primary:#667eea;
  --kh-primary-dark:#5a67d8;
  --kh-secondary:#764ba2;
  --kh-accent:#f093fb;
  --kh-accent-alt:#f5576c;
  --kh-dark:#111827;
  --kh-muted:#6b7280;
  --kh-surface:#ffffff;
  --kh-surface-alt:#f7fafc;
  --kh-border:rgba(226,232,240,.8);
  --kh-radius:20px;
  --kh-radius-lg:24px;
  --kh-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  --kh-shadow-lg:0 25px 50px -12px rgba(0,0,0,.25);
  --kh-gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --kh-gradient-accent:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
  --kh-backdrop-blur:saturate(180%) blur(12px);
}

html[dir="rtl"] body, body{
  font-family: Vazirmatn, "IRANSans", "IranYekan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--kh-dark);
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  background-attachment:fixed;
  margin:0; line-height:1.6;
  overflow-x:hidden;
}
*{ box-sizing:border-box; }
a{ color:var(--kh-primary); text-decoration:none; transition:.25s ease; }
a:hover{ color:var(--kh-primary-dark); transform:translateY(-1px); }
img{ max-width:100%; height:auto; transition:opacity .3s ease; }
img:not([src]){ opacity:0; }
.container{ width:min(1200px,96%); margin:0 auto; position:relative; }
html{ scroll-behavior:smooth; }
::selection{ background:var(--kh-accent); color:#fff; }
a:focus, button:focus{ outline:2px solid var(--kh-accent); outline-offset:2px; }

/* =========================================================
   HEADER / MENU  (ساده، پایدار، بدون تداخل)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1200;
  background:#fff; border-bottom:1px solid var(--kh-border);
  backdrop-filter:var(--kh-backdrop-blur);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; }
.site-logo{ font-weight:700; font-size:18px; color:var(--kh-dark); text-decoration:none; }
.site-nav .nav-links{ display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0; }

/* لینک‌های منو – هاور لطیف */
.site-header .nav-links a{
  display:inline-block; padding:.65rem 1.05rem; border-radius:var(--kh-radius);
  position:relative; transition:transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.site-header .nav-links a::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--kh-gradient-primary); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.site-header .nav-links a:hover{ transform:translateY(-1px); color:var(--kh-primary); box-shadow:0 3px 10px rgba(102,126,234,.14); }
.site-header .nav-links a:hover::before{ opacity:.06; }

/* دکمه سه‌خطی موبایل */
.mobile-menu-toggle{
  display:none; width:40px; height:34px; border:0; background:transparent; position:relative; cursor:pointer;
}
.mobile-menu-toggle .bar{ position:absolute; left:8px; right:8px; height:2px; background:#111827; }
.mobile-menu-toggle .bar:nth-child(1){ top:9px; }
.mobile-menu-toggle .bar:nth-child(2){ top:16px; }
.mobile-menu-toggle .bar:nth-child(3){ top:23px; }

/* اوورلی پشت منو */
#kh-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:900;
}
body.menu-open #kh-nav-overlay{ display:block; }
body.no-scroll, body.menu-open{ overflow:hidden; }

/* دسکتاپ */
@media (min-width:981px){
  .site-header .nav-links{ position:static !important; display:flex !important; box-shadow:none; border:0; }
}

/* موبایل */
@media (max-width:980px){
  .mobile-menu-toggle{ display:inline-flex; z-index:1210; }
  .site-header .nav-wrap{ position:relative; }
  .site-header .nav-links{
    position:absolute !important; top:calc(100% + 8px) !important; right:12px !important; left:12px !important;
    display:none !important; flex-direction:column !important; gap:.9rem !important;
    padding:12px !important; background:#fff !important; border:1px solid #e5e7eb !important;
    border-radius:12px !important; box-shadow:0 16px 32px rgba(0,0,0,.12) !important;
    max-height:70vh !important; overflow:auto !important; z-index:1220 !important;
  }
  .site-header .nav-links.mobile-open{ display:flex !important; }
}

/* سرچ فقط داخل منوی هدر نمایش داده شود */
.kh-search{ display:none; }
.site-header .nav-links .kh-search{ display:block; }
.kh-search{ min-width:240px; position:relative; }
.kh-search__box{ display:flex; gap:6px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.kh-search__input{ flex:1; border:0; outline:0; font-size:14px; direction:rtl; text-align:right; }
.kh-search__btn{ border:0; background:transparent; cursor:pointer; font-size:16px; line-height:1; }
.kh-suggest{ position:absolute; inset-inline-start:0; top:100%; margin-top:6px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.08); padding:6px; z-index:99; width:280px; max-height:60vh; overflow:auto; }
.kh-suggest[hidden]{ display:none; }
.kh-suggest__item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; text-decoration:none; color:#111827; }
.kh-suggest__item:hover{ background:#f3f4f6; }

/* فاصله امن بعد از هدر */
.site-header + .site-main .section:first-of-type,
.site-header + .site-main .container.section:first-of-type{ margin-top:8px; }

/* =========================================================
   SLIDER (بدون تداخل با بنر)
   ========================================================= */
.kh-slider{ position:relative; overflow:hidden; border-radius:12px; }
.kh-slide{ position:relative; }
.kh-slide-img,.kh-cover img{ width:100%; height:400px; object-fit:cover; display:block; }
@media (max-width:980px){ .kh-slide-img,.kh-cover img{ height:280px; } }
.kh-meta{
  position:absolute; inset:auto 0 0 0; padding:12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)); color:#fff;
}

/* =========================================================
   CATEGORY TILES (refined hover + nicer spacing)
   ========================================================= */
.kh-cats{
  --cols-d:2; --cols-t:2; --cols-m:1;
  display:grid;
  gap:18px; /* قبلاً 14px بود */
  grid-template-columns:repeat(var(--cols-d),1fr);
}
@media (max-width:992px){ .kh-cats{ grid-template-columns:repeat(var(--cols-t),1fr); } }
@media (max-width:640px){ .kh-cats{ grid-template-columns:repeat(var(--cols-m),1fr); } }

.kh-cat{
  position:relative; display:block;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden;
  min-height:120px; /* محدودیت max حذف شد تا فشرده نشه */
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  transform:translateY(0) scale(1);
  transform-origin:center center;
  will-change:transform, box-shadow;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}

/* نسبت تصویر؛ همون رفتار قبلی */
.kh-cat::before{
  content:""; display:block; padding-top:38%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* های‌لایت لطیف */
.kh-cat::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 60% 10%, rgba(255,255,255,.25), transparent 60%);
  mix-blend-mode:soft-light; opacity:.3;
  transition:opacity .28s, transform .28s;
}

/* بدنه پایین با فاصله‌ی بیشتر از لبه‌ها */
.kh-cat__body{
  position:absolute; inset:auto 0 0 0;
  padding:1.15rem 1.1rem 1.2rem; /* کمی بیشتر از قبل */
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  color:#fff; z-index:1;
}
.kh-cat__body h3{
  font-size:16px; margin:.2rem 0 .45rem;
  text-shadow:0 2px 6px rgba(0,0,0,.5); color:#fff !important;
}
.kh-cat__body p{
  font-size:13px; margin:0; opacity:.9; color:#e8eef7;
}
.kh-chip{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:2px 8px; font-size:12px;
}

/* هاور نرم‌تر و کم‌حرکت‌تر تا به لبه‌ها نزدیک نشه */
@media (hover:hover){
  .kh-cat:hover{
    transform:translateY(-4px) scale(1.005); /* قبلاً -6px و 1.01 بود */
    box-shadow:0 18px 38px rgba(0,0,0,.18);
    border-color:rgba(255,255,255,.55);
  }
  .kh-cat:hover::after{ opacity:.45; transform:translateY(-2px); }
}

/* اگر کاربر motion-off داره */
@media (prefers-reduced-motion:reduce){
  .kh-cat, .kh-cat::after{ transition:none !important; }
}

/* کمی padding کناری ظرف برای اینکه حتی در اسکرین‌های تنگ هم به لبه‌ی container نچسبه */
.section .kh-cats,
.container .kh-cats{ padding-inline:4px; }


/* =========================================================
   ARCHIVE GRID / CARDS
   ========================================================= */
.kh-grid{ display:grid; gap:16px; }
@media (min-width:641px){ .kh-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:981px){ .kh-grid{ grid-template-columns:repeat(3,1fr); } }

.kh-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.kh-card:hover{ transform:translateY(-5px); box-shadow:var(--kh-shadow-lg); }
.kh-card__thumb img{ width:100%; height:200px; object-fit:cover; transition:transform .35s; }
.kh-card:hover .kh-card__thumb img{ transform:scale(1.06); }
.kh-card__body{ padding:12px; }
.kh-card__title{ font-size:16px; margin:0 0 8px; }
.kh-card__meta{ font-size:12px; color:var(--kh-muted); }

/* =========================================================
   MEDIA FABs & CTA (صفحه تکی)
   ========================================================= */
.kh-media{ position:relative; display:block; border-radius:var(--kh-radius); overflow:hidden; }
.kh-media .kh-cover{ display:block; position:relative; z-index:1; }
.kh-fabs{ position:absolute; inset:auto 10px 12px auto; display:flex; gap:10px; z-index:4; }
.kh-fab{ width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:#111827; color:#fff; text-decoration:none; box-shadow:0 10px 18px rgba(0,0,0,.18); transition:transform .15s, box-shadow .2s, background .2s; }
.kh-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 22px rgba(0,0,0,.22); }
.kh-fab--view{ background:#2563eb; }
.kh-fab--download{ background:#16a34a; }

.kh-media-cta{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:.75rem 0 1.25rem; }
.kh-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border-radius:14px; font-weight:700; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s, background .2s, color .2s; }
.kh-btn--view{ background:#fff; color:#334155; border:1px solid rgba(226,232,240,.9); }
.kh-btn--view:hover{ background:#f8fafc; transform:translateY(-2px); }
.kh-btn--download{ background:linear-gradient(135deg,#f093fb 0%, #f5576c 100%); color:#fff; }
.kh-btn--download:hover{ filter:brightness(1.05); transform:translateY(-2px); }

/* لینک دانلود تکراری بیرون CTA را پنهان کن */
.single .entry-content a[href*="kh_download="]:not(.kh-media-cta a){ display:none !important; }
.kh-dup-hidden{ display:none !important; }

/* =========================================================
   PAGINATION
   ========================================================= */
.kh-pagination ul{ display:flex; gap:6px; list-style:none; padding:0; }
.kh-pagination a,.kh-pagination span{ border:1px solid #e5e7eb; padding:6px 10px; border-radius:8px; text-decoration:none; }

/* =========================================================
   AD BANNER ABOVE SLIDER – HARD FIX (دسکتاپ و موبایل)
   ========================================================= */
.kh-ad-above-slider,
.kh-sponsor-strip,
.kh-rotator{
  position:relative !important;
  z-index:50 !important;           /* بالاتر از اسلایدر */
  display:block !important;
  width:100%;
  margin:12px 0 28px !important;
  padding:0 !important;
  clear:both !important;
}
.kh-ad-above-slider .widget,
.kh-sponsor-strip .widget{ margin:0 !important; padding:0 !important; }
.kh-ad-above-slider img,
.kh-sponsor-strip img{
  display:block; width:100% !important; height:auto !important;
  border-radius:14px; box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* اسلایدر همیشه زیر بنر و بدون جابه‌جایی */
.kh-slider,
.section .kh-slider,
.container .kh-slider,
.home .kh-slider{
  position:relative !important;
  z-index:1 !important;          /* زیر بنر */
  top:auto !important;
  margin-top:0 !important;
  transform:none !important;
}
/* اگر inline-style مارجین منفی داشت، خنثی */
.kh-slider[style*="margin-top:-"]{ margin-top:0 !important; }

/* والدها محتوا را قطع نکنند */
.container, .section, header, .site-header{ overflow:visible !important; }

/* اگر بنر مستقیماً قبل از اسلایدر است */
.kh-ad-above-slider + .container .kh-slider,
.kh-ad-above-slider + .section  .kh-slider,
.kh-sponsor-strip   + .container .kh-slider,
.kh-sponsor-strip   + .section  .kh-slider,
.kh-rotator         + .container .kh-slider,
.kh-rotator         + .section  .kh-slider{ margin-top:0 !important; }

/* عناصر داخل اسلایدر از بنر بالاتر نپرند */
.kh-slider *{ z-index:1 !important; }
/* ==== Mobile menu: kill horizontal overflow ==== */
@media (max-width: 980px){
  html, body, .site-main, .container { overflow-x: hidden !important; }

  .site-header .nav-wrap{ position: relative; overflow: visible !important; }

  .site-header .nav-links{
    /* تمام‌عرض ولی داخل viewport */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;

    /* جلوگیری از اضافه‌شدن عرض به‌خاطر بوردر */
    border-left-width: 0 !important;
    border-right-width: 0 !important;

    /* گوشه‌ها و سایه بدون ایجاد اسکرول */
    border-radius: 0 0 var(--kh-radius) var(--kh-radius) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,.12) !important;
    overflow-x: hidden !important;
  }

  /* آیتم‌ها تمام‌عرض و بدون فشار افقی */
  .site-header .nav-links > li{ width: 100% !important; }
  .site-header .nav-links > li > a{
    width: 100% !important;
    text-align: center !important;
    padding-inline: 1rem !important;
  }
}
[style*="width: 100vw"] { max-width: 100% !important; }
/* Search suggest: only titles, no thumbs */
.kh-suggest__item img{ display:none !important; }
.kh-suggest__item{ gap:0 !important; }
.kh-dup-hidden{ display:none !important; }
/* Hide FABs (eye/download) on related posts only */
.single .related-posts .kh-fabs,
.single .kh-related .kh-fabs,
.single .section--related .kh-fabs,
.single .kh-grid .kh-card .kh-fabs { 
  display: none !important;
}
/* دکمهٔ مشاهده فقط داخل محتوای پست اصلی؛ در لیست/کارت‌ها مخفی */
.kh-related .kh-btn--view,
.kh-grid    .kh-btn--view,
.kh-card    .kh-btn--view {
  display: none !important;
}
/* Live Suggest: title + divider + excerpt */
.kh-suggest__item{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:#111827}
.kh-suggest__item:hover{background:#f3f4f6}
.kh-suggest__title{display:block;font-weight:700;font-size:14px;line-height:1.5}
.kh-suggest__excerpt{
  display:block;
  margin-top:6px; padding-top:6px;
  border-top:1px solid #e5e7eb;   /* همون "یه خط فاصله" */
  color:#6b7280; font-size:12px; line-height:1.6;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; /* دو خط بیشینه */
}
/* ساجست دوخطی تمیز */
.kh-suggest{ /* همون استایل قبلیت */ }
.kh-suggest__item{ display:block; padding:8px 10px; border-radius:10px; text-decoration:none; color:#111827; }
.kh-suggest__item:hover{ background:#f3f4f6; }
.kh-suggest__title{ font-size:14px; font-weight:700; line-height:1.5; margin:0 0 2px; }
.kh-suggest__sub{ font-size:12px; color:#6b7280; line-height:1.5; }










/* ==========================
   SLIDER — 6 breakpoints (only slider)
   ========================== */

/* پایه: همه‌ی اجزای اسلایدر هم‌قد هستند و تصویر کش نمی‌آید */
.kh-slider{ position:relative; overflow:hidden; border-radius:12px; }
.kh-slider .kh-slide,
.kh-slider .kh-cover,
.kh-slider .kh-slide > a{ position:relative; display:block; height:var(--kh-slide-h,240px) !important; }
.kh-slider .kh-slide-img,
.kh-slider .kh-cover img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
  background:#e5e7eb; /* برای وقتی تصویر دیر لود می‌شود */
}

/* کارت عنوان/تاریخ همیشه داخل اسلاید و پایین */
.kh-slider .kh-meta{
  position:absolute; inset:auto 12px 12px 12px;
  padding:12px 14px; color:#fff;
  background:linear-gradient(135deg, rgba(59,130,246,.5), rgba(99,102,241,.5));
  backdrop-filter:blur(6px) saturate(120%);
  border:1px solid rgba(255,255,255,.25); border-radius:14px;
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}

/* --- 6 سایز: فقط ارتفاع اسلایدر را می‌چینیم --- */

/* 1) ≤ 360px (خیلی کوچک) */
@media (max-width:360px){
  .kh-slider{ --kh-slide-h:220px; }
}

/* 2) 361–480px (موبایل معمولی) */
@media (min-width:361px) and (max-width:480px){
  .kh-slider{ --kh-slide-h:240px; }
}

/* 3) 481–640px (موبایل بزرگ / فبلت) */
@media (min-width:481px) and (max-width:640px){
  .kh-slider{ --kh-slide-h:280px; }
}

/* 4) 641–768px (تبلت کوچک / عرض عمودی) */
@media (min-width:641px) and (max-width:768px){
  .kh-slider{ --kh-slide-h:320px; }
}

/* 5) 769–1366px (تبلت افقی تا لپ‌تاپ‌های رایج) */
@media (min-width:769px) and (max-width:1366px){
  .kh-slider{ --kh-slide-h:400px; }  /* اگر کم/زیاد بود این عدد را تنظیم کن */
}

/* 6) ≥ 1367px (نمایشگرهای بزرگ) */
@media (min-width:1367px){
  .kh-slider{ --kh-slide-h:480px; }
}

/* جلوگیری از سفیدی زیر اسلایدر (در بعضی تم‌ها) */
.kh-slider *{ z-index:1; }

/* ==== SLIDER: fixed heights per breakpoint + safe overlay ==== */

/* خود اسلایدر یه پس‌زمینه خنثی داشته باشه تا اسلایدِ بعدی سیاه نشه */
.kh-slider{ background:#e5e7eb; border-radius:12px; overflow:hidden; }

/* تضمین کنیم عکس کش نمیاد؛ فقط کراپ تمیز */
.kh-slide{ position:relative; }
.kh-slide-img,
.kh-cover img{
  display:block;
  width:100%;
  height:300px;              /* مقدار پایه – پایین‌تر با مدیاکوئری‌ها دقیق‌تر می‌کنیم */
  object-fit:cover;
  object-position:center;    /* وسط تصویر؛ نه فقط بالای تصویر */
}

/* باکس عنوان/تاریخ ثابت در پایین اسلاید بماند و پایین نرود */
.kh-meta{
  position:absolute; left:16px; right:16px; bottom:14px;
  padding:12px 14px;
  color:#fff;
  background:rgba(17,24,39,.45);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

/* --------- 6 breakpoint height steps --------- */

/* ≤420px */
@media (max-width:420px){
  .kh-slide-img,.kh-cover img{ height:220px; }
}

/* 421–640px */
@media (min-width:421px) and (max-width:640px){
  .kh-slide-img,.kh-cover img{ height:260px; }
}

/* 641–820px (فبلت/تبلت کوچک) */
@media (min-width:641px) and (max-width:820px){
  .kh-slide-img,.kh-cover img{ height:300px; }
}

/* 821–1024px (تبلت افقی/لپ‌تاپ ریز) */
@media (min-width:821px) and (max-width:1024px){
  .kh-slide-img,.kh-cover img{ height:340px; }
}

/* 1025–1280px (دسکتاپ معمولی) */
@media (min-width:1025px) and (max-width:1280px){
  .kh-slide-img,.kh-cover img{ height:380px; }
}

/* ≥1281px (دسکتاپ عریض) */
@media (min-width:1281px){
  .kh-slide-img,.kh-cover img{ height:420px; }
}

/* جلوگیری از فاصله‌ی سفید زیر اسلایدر به‌خاطر line-height یا margin داخلی */
.kh-slide *{ vertical-align:middle; }




/* ==== Slider desktop fix (only >=981px) ==== */
@media (min-width: 981px){
  .kh-slider{ position:relative; overflow:hidden; border-radius:12px; }

  /* هر اسلاید خودش ارتفاع بده (بر اساس عرض)، نه خودِ img */
  .kh-slide{
    position:relative;
    overflow:hidden;
    aspect-ratio: 16 / 6;          /* نسبتِ پایدار؛ بدون کشیدگی */
    background:#e5e7eb;            /* تا لود تصویر، خاکستری دیده شود */
    border-radius:12px;
  }

  /* تصویر کل ظرف را بپوشاند */
  .kh-slide .kh-cover,
  .kh-slide-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block; line-height:0;
  }

  /* باکس عنوان/تاریخ همیشه ته اسلاید */
  .kh-slide .kh-meta{
    position:absolute; left:16px; right:16px; bottom:14px;
    background:rgba(17,24,39,.48);
    -webkit-backdrop-filter:saturate(120%) blur(6px);
    backdrop-filter:saturate(120%) blur(6px);
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px; padding:12px 14px; color:#fff;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
  }
}

/* کمی ریز‌تنظیم نسبت برای عرض‌های خیلی بزرگ‌تر */
@media (min-width: 1200px){ .kh-slide{ aspect-ratio: 16 / 5.6; } }
@media (min-width: 1440px){ .kh-slide{ aspect-ratio: 16 / 5.2; } }

/* فقط برای انتهای CSS - اصلاح موقعیت متن اسلایدر */
.kh-slider .kh-meta {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
  .kh-slider .kh-meta {
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100% - 32px) !important;
  }
}

.kh-slider .kh-meta * {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* KH Portal – SINGLE SOURCE JS (clean + stable) */

/* ===== helpers ===== */
function $all(sel, root){ return Array.prototype.slice.call((root||document).querySelectorAll(sel)); }







/* ===== live search (titles only – no thumbnails) ===== */
/* ===== live search (title + second line, robust) ===== */
(function(){
  var cfg = window.KH_AJAX || {};
  function $$all(s,r){ return (r||document).querySelectorAll(s); }
  function escapeHTML(s){ return (''+s).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])); }

  function render(box, items, q){
    if(!q || !items || !items.length){ box.hidden = true; box.innerHTML=''; return; }

    // فقط پست‌ها
    items = items.filter(function(it){
      return !(typeof it.id === 'string' && it.id.indexOf('tag-') === 0);
    });
    if(!items.length){ box.hidden = true; box.innerHTML=''; return; }

    var qSafe = escapeHTML(q);
    box.hidden = false;
    box.innerHTML = items.map(function(it){
      var line2 = (it.excerpt && (''+it.excerpt).trim())
                  ? escapeHTML(it.excerpt)
                  : ('اطلاعات مربوط به ' + qSafe);
      return (
        '<a class="kh-suggest__item" href="'+it.url+'">' +
          '<span class="kh-suggest__title">'+ escapeHTML(it.title) +'</span>' +
          '<span class="kh-suggest__excerpt">'+ line2 +'</span>' +
        '</a>'
      );
    }).join('');
  }

  function initSuggest(form){
    if(!cfg.url) return;
    var input = form.querySelector('.kh-search__input');
    var box   = form.querySelector('.kh-suggest');
    var typing, lastQ = '';
    var inFlight; // AbortController

    function clearAll(){ box.hidden = true; box.innerHTML = ''; lastQ=''; }

    input.addEventListener('input', function(){
      var q = input.value.trim();

      // ورودی خالی → خروجی خالی و لغو درخواست قبلی
      if(q.length === 0){
        if(inFlight){ try{ inFlight.abort(); }catch(e){} inFlight=null; }
        clearTimeout(typing);
        clearAll();
        return;
      }

      if(q.length < (cfg.min||2)){ clearAll(); return; }
      if(q === lastQ) return;
      lastQ = q;

      clearTimeout(typing);
      typing = setTimeout(function(){
        // هر بار درخواست قبلی را کنسل کن تا نتایج قدیمی نچسبند
        if(inFlight){ try{ inFlight.abort(); }catch(e){} }
        inFlight = ('AbortController' in window) ? new AbortController() : null;

        var url = cfg.url + '?action=kh_suggest&_ajax_nonce='+
                  encodeURIComponent(cfg.nonce)+'&q='+encodeURIComponent(q)+
                  '&limit='+(cfg.limit||6);

        fetch(url, {credentials:'same-origin', signal: inFlight ? inFlight.signal : undefined})
          .then(function(r){ return r.json(); })
          .then(function(j){
            var items = (j && j.success && j.data && j.data.items) ? j.data.items : [];
            render(box, items, q);
          })
          .catch(function(err){
            // اگر کنسل شد، سکوت؛ وگرنه خالی کن
            if(!(inFlight && err && err.name==='AbortError')) render(box, [], q);
          });
      }, 180);
    });

    // کلیک بیرون/ESC → بسته شود
    document.addEventListener('click', function(e){ if(!form.contains(e.target)) box.hidden = true; });
    input.addEventListener('keydown', function(e){ if(e.key === 'Escape'){ box.hidden = true; } });
  }

  document.addEventListener('DOMContentLoaded', function(){
    $$all('form.kh-search[data-kh-suggest]').forEach(initSuggest);
  });
})();




/* ===== search fallback inject + cleanup ===== */
(function(){
  var headerUL = document.querySelector('.site-header .nav-links');
  if (!headerUL) return;

  // هر فرم سرچِ بیرون از منو حذف
  document.querySelectorAll('.kh-search').forEach(function(f){
    if (!f.closest('.site-header .nav-links')) { f.parentNode && f.parentNode.removeChild(f); }
  });

  if (headerUL.querySelector('.kh-search')) return; // هست، کاری نکن
  if (!window.KH_SEARCH_HTML || !KH_SEARCH_HTML.html) return;

  var li = document.createElement('li');
  li.className = 'menu-item menu-item--search';
  li.innerHTML = KH_SEARCH_HTML.html;
  headerUL.insertBefore(li, headerUL.firstChild);
})();

/* ===== de-dupe links outside CTA (مشاهده + دانلود) ===== */
(function () {
  function runOnce() {
    var cta = document.querySelector('.kh-media-cta');
    if (!cta) return;

    // hrefهای دکمه‌های داخل CTA
    var ctaHrefs = Array.prototype.map.call(cta.querySelectorAll('a[href]'), function(a){
      try { return new URL(a.getAttribute('href'), location.href).href; }
      catch(e){ return a.getAttribute('href'); }
    });

    // هر لینک هم‌متن/هم‌لینک بیرون از CTA مخفی شود
    document.querySelectorAll('.entry-content a[href]').forEach(function(a){
      if (cta.contains(a)) return;
      var hrefAbs;
      try { hrefAbs = new URL(a.getAttribute('href'), location.href).href; }
      catch(e){ hrefAbs = a.getAttribute('href'); }
      var t = (a.textContent || '').trim();
      if (ctaHrefs.indexOf(hrefAbs) !== -1 || t === 'دانلود محتوا' || t === 'مشاهده') {
        a.classList.add('kh-dup-hidden');
      }
    });
  }
  function safeRun(){ try{ runOnce(); }catch(e){} }

  document.addEventListener('DOMContentLoaded', safeRun);
  window.addEventListener('load', safeRun);

  // اگر محتوای صفحه بعداً تزریق شد
  var obs;
  document.addEventListener('DOMContentLoaded', function(){
    if (obs) return;
    var root = document.querySelector('.entry-content') || document.body;
    obs = new MutationObserver(function(muts){
      var should = muts.some(function(m){
        return Array.prototype.some.call(m.addedNodes||[], function(n){
          return (n.nodeType===1) && (
            n.matches('.kh-media-cta, .entry-content a') ||
            (n.querySelector && (n.querySelector('.kh-media-cta') || n.querySelector('.entry-content a')))
          );
        });
      });
      if (should) safeRun();
    });
    obs.observe(root, {childList:true, subtree:true});
  });
})();

/* ===== overlay (once) ===== */
(function(){
  if (!document.getElementById('kh-nav-overlay')) {
    var ov = document.createElement('div');
    ov.id = 'kh-nav-overlay';
    ov.style.display = 'none';
    document.body.appendChild(ov);
  }
})();

/* ===== mobile menu (single, bound to #primary-menu) ===== */
(function(){
  function $(s,r){ return (r||document).querySelector(s); }

  document.addEventListener('DOMContentLoaded', function(){
    var btn = $('.mobile-menu-toggle');
    var nav = $('#primary-menu') || $('.site-header .nav-links');
    var ov  = $('#kh-nav-overlay');
    if(!btn || !nav) return;

    // اتصال ARIA
    if(!nav.id) nav.id = 'primary-menu';
    btn.setAttribute('aria-controls', nav.id);
    btn.setAttribute('aria-expanded','false');

    function open(){
      nav.classList.add('mobile-open');
      btn.classList.add('active');
      btn.setAttribute('aria-expanded','true');
      document.body.classList.add('menu-open','no-scroll');
      if (ov) ov.style.display='block';
    }
    function close(){
      nav.classList.remove('mobile-open');
      btn.classList.remove('active');
      btn.setAttribute('aria-expanded','false');
      document.body.classList.remove('menu-open','no-scroll');
      if (ov) ov.style.display='none';
    }
    function isOpen(){ return nav.classList.contains('mobile-open'); }

    btn.addEventListener('click', function(e){ e.preventDefault(); isOpen()?close():open(); });
    if (ov) ov.addEventListener('click', close);
    nav.addEventListener('click', function(e){ if(e.target.closest('a')) close(); });
    document.addEventListener('keydown', function(e){ if (e.key==='Escape' && isOpen()) close(); });
    window.addEventListener('resize', function(){ if (window.innerWidth > 980) close(); });
  });
})();

/* ===== ad rotator (fade every N ms; default 8000) ===== */
(function(){
  function init(root){
    var el = root || document.querySelector('.kh-rotator,[data-rotator],.kh-ad-rotator');
    if (!el) return;

    var slides = Array.prototype.slice.call(el.children).filter(function(n){ return n.nodeType===1; });
    if (slides.length < 2) return;

    var dur = parseInt(el.getAttribute('data-duration')||'8000',10);
    if (isNaN(dur) || dur < 1200) dur = 8000;

    // stabilize height
    var h = el.offsetHeight;
    if (h < 60) h = 80;
    el.style.position = 'relative';
    el.style.minHeight = h + 'px';

    slides.forEach(function(s, i){
      s.style.position = 'absolute';
      s.style.inset = '0';
      s.style.transition = 'opacity .5s ease';
      s.style.opacity = (i===0?'1':'0');
      s.style.pointerEvents = (i===0?'auto':'none');
    });

    var i = 0;
    setInterval(function(){
      var prev = i;
      i = (i+1) % slides.length;
      slides[prev].style.opacity = '0';
      slides[prev].style.pointerEvents = 'none';
      slides[i].style.opacity = '1';
      slides[i].style.pointerEvents = 'auto';
    }, dur);
  }
  document.addEventListener('DOMContentLoaded', function(){ init(); });
})();
/* ===== slider (auto + prev/next + swipe) ===== */
function initSlider(root){
  var el = root || document.querySelector('.kh-slider');
  if (!el) return;

  var track  = el.querySelector('.kh-track');
  var slides = track ? Array.prototype.slice.call(track.children) : [];
  var prev   = el.querySelector('.kh-prev');
  var next   = el.querySelector('.kh-next');

  if (!track || slides.length === 0) return;

  // پایه
  track.style.position = 'relative';
  track.style.minHeight = (track.offsetHeight || 220) + 'px';

  slides.forEach(function(s,i){
    s.style.position = 'absolute';
    s.style.inset = '0';
    s.style.opacity = (i===0 ? '1' : '0');
    s.style.transition = 'opacity .4s ease';
    s.style.pointerEvents = (i===0 ? 'auto' : 'none');
    s.classList.toggle('is-active', i===0);
  });

  var i = 0, n = slides.length, timer = null, dur = 5000;
  function show(idx){
    slides.forEach(function(s,k){
      var on = (k===idx);
      s.style.opacity = on ? '1' : '0';
      s.style.pointerEvents = on ? 'auto' : 'none';
      s.classList.toggle('is-active', on);
    });
    i = idx;
  }
  function go(dir){ show((i + (dir||1) + n) % n); }
  function start(){ if(timer || n<2) return; timer = setInterval(go, dur); }
  function stop(){ clearInterval(timer); timer = null; }

  if (prev) prev.addEventListener('click', function(e){ e.preventDefault(); stop(); go(-1); start(); });
  if (next) next.addEventListener('click', function(e){ e.preventDefault(); stop(); go(+1); start(); });

  // سوایپ موبایل
  var sx=0, dx=0;
  el.addEventListener('touchstart', function(e){ sx = e.touches[0].clientX; stop(); }, {passive:true});
  el.addEventListener('touchmove',  function(e){ dx = e.touches[0].clientX - sx; }, {passive:true});
  el.addEventListener('touchend',   function(){ if (Math.abs(dx) > 40) go(dx>0 ? -1 : +1); dx=0; start(); });

  el.addEventListener('mouseenter', stop);
  el.addEventListener('mouseleave', start);

  show(0);
  start();
}
document.addEventListener('DOMContentLoaded', function () {
  try { $all('.kh-slider').forEach(initSlider); } catch(e){ console.warn(e); }
});




/* ===== SLIDER ===== */
.kh-slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.kh-track {
  display: flex;
  transition: transform 0.3s ease;
}

.kh-slide {
  position: relative;
  width: 100%;
  opacity: 0; /* تمامی اسلایدها شفاف هستند */
  transition: opacity 0.3s ease;
}

.kh-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* تنظیمات مختلف برای اندازه اسلایدر */
@media (max-width: 480px) {
  .kh-slide {
    height: 220px;
  }
}

@media (max-width: 640px) {
  .kh-slide {
    height: 260px;
  }
}

@media (max-width: 768px) {
  .kh-slide {
    height: 300px;
  }
}

@media (max-width: 1024px) {
  .kh-slide {
    height: 350px;
  }
}

@media (min-width: 1280px) {
  .kh-slide {
    height: 420px;
  }
}

/* تنظیمات دکمه‌های قبلی و بعدی */
.kh-prev, .kh-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.kh-prev { left: 10px; }
.kh-next { right: 10px; }



/* ==== Slider responsive height (no JS) ==== */
:root{ --kh-slide-h: 400px; }                 /* پایه دسکتاپ */
@media (max-width:980px){ :root{ --kh-slide-h: 280px; } }  /* موبایل */

@media (min-width:1200px){ :root{ --kh-slide-h: 460px; } }
@media (min-width:1366px){ :root{ --kh-slide-h: 500px; } }
@media (min-width:1536px){ :root{ --kh-slide-h: 540px; } }
@media (min-width:1680px){ :root{ --kh-slide-h: 560px; } }
@media (min-width:1920px){ :root{ --kh-slide-h: 600px; } }

/* ارتفاع track و خود اسلایدها را همگام کن */
.kh-slider .kh-track{
  min-height: var(--kh-slide-h) !important;
  height: var(--kh-slide-h) !important;
}

/* تصویرها دقیقاً به همان ارتفاع – بدون کشیدگیِ عرضی */
.kh-slide-img,
.kh-cover img{
  width: 100% !important;
  height: var(--kh-slide-h) !important;
  object-fit: cover !important;
  display: block;
}

/* باکس عنوان/تاریخ داخل خود اسلاید بماند */
.kh-slide .kh-meta{
  position: absolute;
  inset: auto 12px 12px 12px;
  max-width: calc(100% - 24px);
  z-index: 3;
}

/* === SLIDER: MOBILE PORTRAIT HARD FIX (<=980px) === */
@media (max-width:980px){
  /* ظرف‌ها حتماً ارتفاع داشته باشن و relative باشن */
  .kh-slider{ background:#e5e7eb; border-radius:12px; overflow:hidden !important; }
  .kh-slider .kh-track{
    position:relative !important;
    height: var(--kh-mob-h, 280px) !important;
    min-height: var(--kh-mob-h, 280px) !important;
  }
  .kh-slide,
  .kh-cover,
  .kh-slide > a{
    position:relative !important;
    height: var(--kh-mob-h, 280px) !important;
    overflow:hidden !important;
  }

  /* تصویر تمام‌قد بدون کشیدگیِ عجیب */
  .kh-slide-img,
  .kh-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }

  /* عنوان/تاریخ همیشه داخل اسلاید بماند (absolute + z-index بالا) */
  .kh-slide .kh-meta{
    position:absolute !important;
    inset:auto 12px 12px 12px !important; /* پایینِ اسلاید */
    max-width: calc(100% - 24px) !important;
    z-index:10 !important;
    margin:0 !important;

    /* خنثی‌کردن هر انیمیشن/ترنسفورم که ممکنه هلش بده بیرون */
    transform:none !important;
    translate:none !important;
  }

  /* متن‌ها توی باکس بریده نشه و بیرون نزنه */
  .kh-slide .kh-meta *{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* ===== SLIDER: 6-size hard fix (put at the VERY END) ===== */

/* پیش‌فرض دسکتاپ متوسط */
:root{ --kh-slide-h: 400px; }

/* 1) ≤360px — موبایل خیلی کوچک */
@media (max-width:360px){
  :root{ --kh-slide-h: 220px; }
}

/* 2) 361–480px — موبایل معمولی */
@media (min-width:361px) and (max-width:480px){
  :root{ --kh-slide-h: 250px; }
}

/* 3) 481–640px — موبایل بزرگ/فبلت */
@media (min-width:481px) and (max-width:640px){
  :root{ --kh-slide-h: 280px; }
}

/* 4) 641–768px — تبلت عمودی */
@media (min-width:641px) and (max-width:768px){
  :root{ --kh-slide-h: 320px; }
}

/* 5) 769–1024px — تبلت افقی/لپ‌تاپ ریز */
@media (min-width:769px) and (max-width:1024px){
  :root{ --kh-slide-h: 360px; }
}

/* 6) ≥1025px — دسکتاپ‌ها (اگر بزرگ‌تر شد بعدی‌ها اعمال می‌شن) */
@media (min-width:1280px){
  :root{ --kh-slide-h: 420px; }
}
@media (min-width:1366px){
  :root{ --kh-slide-h: 460px; }
}
@media (min-width:1536px){
  :root{ --kh-slide-h: 500px; }
}
@media (min-width:1680px){
  :root{ --kh-slide-h: 540px; }
}
@media (min-width:1920px){
  :root{ --kh-slide-h: 580px; }
}

/* ارتفاع ظرف اسلایدر در همه‌ی سایزها یکدست */
.kh-slider,
.kh-slider .kh-track{
  position:relative !important;
  height: var(--kh-slide-h) !important;
  min-height: var(--kh-slide-h) !important;
  overflow:hidden !important;
}

/* هر اسلاید دقیقاً هم‌قد ظرف باشد (تا عنوان «زیر» نرود) */
.kh-slider .kh-slide,
.kh-slider .kh-slide > a,
.kh-slider .kh-cover{
  position:relative !important;
  height: 100% !important;
  overflow:hidden !important;
}

/* تصویر بدون کشیدگی؛ تمام ظرف را تمیز بپوشاند */
.kh-slider .kh-slide-img,
.kh-slider .kh-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* باکس عنوان/تاریخ همیشه داخل اسلاید، پایین */
.kh-slider .kh-slide .kh-meta{
  position:absolute !important;
  left:12px !important; right:12px !important; bottom:12px !important;
  max-width: calc(100% - 24px) !important;
  z-index:10 !important;
  margin:0 !important;
  transform:none !important;
}

/* جلوگیری از بیرون‌زدگی متن داخل باکس */
.kh-slider .kh-slide .kh-meta *{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* پس‌زمینهٔ خنثی برای حذف سفیدی/سیاهی اسلاید بعدی هنگام فِید */
.kh-slider{ background:#e5e7eb; border-radius:12px; }
/* ===== EXTRA-XS Portrait fix (put at the VERY END) ===== */

/* ≤320px — موبایل خیلی خیلی کوچک */
@media (max-width:320px){
  :root{ --kh-slide-h: 200px; }             /* قبلی 220 بود؛ شد 200 */
  .kh-slider .kh-meta{
    left:8px; right:8px; bottom:8px;         /* کمی فشرده‌تر */
    padding:10px 12px;
  }
  .kh-slider .kh-meta h3{ font-size:.95rem; line-height:1.35; }
  .kh-slider .kh-meta time{ font-size:.8rem; }
}

/* 321–360px — موبایل کوچک معمولی (برای سازگاری با قاعده‌ی ≤360 قبلی) */
@media (min-width:321px) and (max-width:360px){
  :root{ --kh-slide-h: 220px; }             /* همان مقدار قبلی، فقط بازتعریف دقیق بازه */
}





/* ==== MOBILE PORTRAIT: title/date fix (put at the VERY end) ==== */
:root{ --khMslideH: 360px; }                 /* ارتفاع بیشتر برای موبایل عمودی */
@media (max-width:360px){ :root{ --khMslideH: 380px; } }  /* خیلی کوچک‌ها */

@media (max-width:420px){
  /* همه‌ی لایه‌ها هم‌قد */
  .kh-slider,
  .kh-slider .kh-track,
  .kh-slider .kh-slide,
  .kh-slider .kh-cover{
    height: var(--khMslideH) !important;
    min-height: var(--khMslideH) !important;
    overflow: hidden !important;
  }
  .kh-slider .kh-cover img,
  .kh-slider .kh-slide-img{
    width: 100% !important;
    height: var(--khMslideH) !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* باکس عنوان/تاریخ بالاتر بیاد تا تاریخ زیرِ عکس گم نشه */
  .kh-slider .kh-slide .kh-meta{
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 64px !important;                 /* اگر باز کم بود: 72px/80px کن */
    padding: 10px 12px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
    border-radius: 12px !important;
    z-index: 5 !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }

  /* عنوان یک‌خطه + جا برای تاریخ */
  .kh-slider .kh-meta h3{
    margin: 0 0 6px !important;
    font-size: .98rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* تاریخ حتماً روی خط خودش و خوانا */
  .kh-slider .kh-meta time{
    display: block !important;
    margin: 0 !important;
    font-size: .85rem !important;
    line-height: 1.3 !important;
    opacity: .9 !important;
  }
}
/* ==== Mobile: just move nav buttons up (no resize) ==== */
@media (max-width: 420px){
  .kh-prev, .kh-next{
    top: 36% !important;                 /* از وسط بیاد بالاتر */
    transform: translateY(-50%) !important;
    /* اندازه‌ها دست‌نخورده می‌مونه */
  }
  .kh-prev{ right: 10px !important; }
  .kh-next{ left: 10px !important; }

  /* باکس عنوان/تاریخ کمی بالاتر که زیر دکمه‌ها نره */
  .kh-slider .kh-slide .kh-meta{
    bottom: 72px !important;             /* اگر هنوز مماس بود 80px کن */
  }
}

/* اگه گوشی‌هات بزرگ‌ترن، این یکی هم کمک می‌کنه */
@media (min-width: 421px) and (max-width: 640px){
  .kh-prev, .kh-next{ top: 38% !important; }
  .kh-slider .kh-slide .kh-meta{ bottom: 68px !important; }
}
/* ==== MOBILE PORTRAIT HARD-FIX (always wins) ==== */
/* خیلی کوچک (تا 360px) */
@media (max-width: 360px){
  /* دکمه‌های دایره‌ای: فقط بالاتر، بدون تغییر سایز */
  .kh-slider .kh-prev, .kh-slider .kh-next,
  button.kh-prev, button.kh-next {
    top: 34% !important;                 /* بالاتر از قبل */
    transform: translateY(-50%) !important;
    z-index: 12 !important;
  }
  .kh-slider .kh-prev{ right: 10px !important; }
  .kh-slider .kh-next{ left: 10px !important; }

  /* باکس عنوان/تاریخ: خیلی بالاتر که زیر نره */
  .kh-slider .kh-slide .kh-meta{
    bottom: 92px !important;             /* اگر هنوز نزدیک بود 100px کن */
    left: 12px !important; right: 12px !important;
    z-index: 13 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .kh-slider .kh-slide .kh-meta h3{
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-height: calc(1.35em * 2) !important; /* دو خط */
    overflow: hidden !important;
  }
  .kh-slider .kh-slide .kh-meta time{
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* موبایل عمودی رایج (361–420px) */
@media (min-width: 361px) and (max-width: 420px){
  .kh-slider .kh-prev, .kh-slider .kh-next,
  button.kh-prev, button.kh-next {
    top: 36% !important;
    transform: translateY(-50%) !important;
    z-index: 12 !important;
  }
  .kh-slider .kh-prev{ right: 12px !important; }
  .kh-slider .kh-next{ left: 12px !important; }

  .kh-slider .kh-slide .kh-meta{
    bottom: 84px !important;             /* اگر تداخل داشت 90px کن */
    left: 14px !important; right: 14px !important;
    z-index: 13 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  .kh-slider .kh-slide .kh-meta h3{
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-height: calc(1.35em * 2) !important;
    overflow: hidden !important;
  }
  .kh-slider .kh-slide .kh-meta time{
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* اطمینان از زمینه و لایه‌ها */
.kh-slider{ background:#e5e7eb !important; position:relative !important; }
.kh-slider .kh-slide{ position:relative !important; }
.kh-slider .kh-cover img, .kh-slide-img{
  object-position: center !important;    /* تصویر از وسط کراپ شود */
}
/* === FINAL OVERRIDE (put at the very end) === */
@media (max-width: 480px){
  :root{ --khMslideH: clamp(320px, 62vw, 380px); } /* ارتفاع کمی بیشتر برای موبایل عمودی */

  /* همه‌ی لایه‌های اسلایدر هم‌قد و داخل قاب */
  .kh-slider,
  .kh-slider .kh-track,
  .kh-slider .kh-slide,
  .kh-slider .kh-slide > a,
  .kh-slider .kh-cover{
    position: relative !important;
    height: var(--khMslideH) !important;
    min-height: var(--khMslideH) !important;
    overflow: hidden !important;
  }

  /* تصویر کل قاب را تمیز بپوشاند */
  .kh-slider .kh-cover img,
  .kh-slider .kh-slide-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* دکمه‌های قبلی/بعدی فقط کمی بالاتر بروند (کوچک نمی‌شوند) */
  .kh-slider .kh-prev, .kh-slider .kh-next,
  button.kh-prev, button.kh-next{
    top: 34% !important;                 /* اگر باز مزاحم بود 32% کن */
    transform: translateY(-50%) !important;
    z-index: 11 !important;
  }

  /* باکس عنوان/تاریخ بالاتر بیاد تا تاریخ زیر نره */
  .kh-slider .kh-slide .kh-meta{
    position: absolute !important;
    left: 12px !important; right: 12px !important;
    bottom: 78px !important;             /* اگر هنوز نزدیک دکمه‌ها بود 86px کن */
    padding: 10px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
    border-radius: 12px !important;
    z-index: 12 !important;              /* روی دکمه‌ها قرار نگیرد */
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    transform: none !important;
  }

  /* عنوان یک‌خطه + جا برای تاریخ */
  .kh-slider .kh-meta h3{
    margin: 0 0 4px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* تاریخ روی خط خودش و خوانا */
  .kh-slider .kh-meta time{
    display: block !important;
    margin: 0 !important;
    font-size: .88rem !important;
    line-height: 1.3 !important;
    opacity: .95 !important;
  }
}

/* یک گارد کلی: هر جا چیزی دوباره bottom رو عوض کرد، این یکی برنده باشه */
@media (max-width: 420px){
  .kh-slider .kh-slide .kh-meta{ bottom: 84px !important; }
  .kh-slider .kh-prev, .kh-slider .kh-next{ top: 33% !important; }
}
@media (max-width: 360px){
  .kh-slider .kh-slide .kh-meta{ bottom: 92px !important; }
  .kh-slider .kh-prev, .kh-slider .kh-next{ top: 32% !important; }
}


/* ==== MODERN CATEGORY TILES (enhanced design + mobile slider fix) ==== */

/* دسته‌بندی‌ها: طراحی مدرن با گرادیان و انیمیشن */
.kh-cats{
  --cols-d:2; --cols-t:2; --cols-m:1;
  display:grid;
  gap:20px;
  grid-template-columns:repeat(var(--cols-d),1fr);
  padding:8px;
}
@media (max-width:992px){ .kh-cats{ grid-template-columns:repeat(var(--cols-t),1fr); } }
@media (max-width:640px){ .kh-cats{ grid-template-columns:repeat(var(--cols-m),1fr); gap:16px; } }

.kh-cat{
  position:relative; display:block;
  border:0; border-radius:20px; background:#fff; overflow:hidden;
  min-height:140px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  transform:translateY(0) scale(1);
  transition:all .35s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

/* تصویر پس‌زمینه با اورلی گرادیان */
.kh-cat::before{
  content:""; display:block; padding-top:42%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative;
}

/* اورلی گرادیان مدرن روی تصویر */
.kh-cat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, 
    rgba(102,126,234,.75) 0%, 
    rgba(118,75,162,.65) 40%, 
    rgba(240,147,251,.55) 100%
  );
  mix-blend-mode:multiply;
  transition:opacity .35s ease;
}

/* محتوای متنی با فونت مدرن */
.kh-cat__body{
  position:absolute; inset:auto 0 0 0;
  padding:1.4rem 1.3rem 1.5rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.8));
  color:#fff; z-index:2;
}

.kh-cat__body h3{
  font-size:17px; font-weight:700; margin:.2rem 0 .6rem;
  text-shadow:0 2px 8px rgba(0,0,0,.6); color:#fff !important;
  font-family:'Vazirmatn', 'IRANSans', system-ui, sans-serif;
  letter-spacing:-0.02em;
  line-height:1.4;
}

.kh-cat__body p{
  font-size:13.5px; margin:0; opacity:.92; color:#f1f5f9;
  font-weight:400; line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

.kh-chip{
  background:rgba(255,255,255,.2); 
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:3px 10px; font-size:11.5px;
  font-weight:500; backdrop-filter:blur(8px);
  color:#fff; text-shadow:none;
}

/* هاور مدرن با اسکیل و سایه */
@media (hover:hover){
  .kh-cat:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 24px 48px rgba(0,0,0,.2);
  }
  .kh-cat:hover::after{ opacity:.7; }
  .kh-cat:hover .kh-cat__body h3{ transform:translateY(-2px); }
}

/* ==== MOBILE SLIDER: higher height + buttons/text moved up ==== */
@media (max-width:640px){
  /* اسلایدر موبایل: ارتفاع بیشتر */
  :root{ --kh-slide-h: 320px !important; }
  
  .kh-slider,
  .kh-slider .kh-track{
    height:320px !important;
    min-height:320px !important;
  }
  
  .kh-slider .kh-slide,
  .kh-slider .kh-cover{
    height:320px !important;
  }
  
  .kh-slider .kh-slide-img,
  .kh-slider .kh-cover img{
    height:320px !important;
  }
  
  /* دکمه‌های جابجایی: بالاتر */
  .kh-slider .kh-prev, 
  .kh-slider .kh-next{
    top:30% !important;
    transform:translateY(-50%) !important;
    z-index:15 !important;
  }
  
  /* باکس عنوان/تاریخ: خیلی بالاتر */
  .kh-slider .kh-slide .kh-meta{
    bottom:80px !important;
    left:14px !important; 
    right:14px !important;
    z-index:14 !important;
    padding:12px 16px !important;
    background:linear-gradient(135deg, rgba(0,0,0,.7), rgba(0,0,0,.5)) !important;
    backdrop-filter:blur(12px) saturate(120%) !important;
    border:1px solid rgba(255,255,255,.2) !important;
    border-radius:16px !important;
  }
}

@media (max-width:480px){
  /* موبایل خیلی کوچک: ارتفاع کمتر ولی متن بالاتر */
  :root{ --kh-slide-h: 300px !important; }
  
  .kh-slider,
  .kh-slider .kh-track,
  .kh-slider .kh-slide,
  .kh-slider .kh-cover{
    height:300px !important;
    min-height:300px !important;
  }
  
  .kh-slider .kh-slide-img,
  .kh-slider .kh-cover img{
    height:300px !important;
  }
  
  /* دکمه‌ها بالاتر */
  .kh-slider .kh-prev, 
  .kh-slider .kh-next{
    top:28% !important;
  }
  
  /* متن خیلی بالاتر */
  .kh-slider .kh-slide .kh-meta{
    bottom:85px !important;
    left:12px !important; 
    right:12px !important;
    padding:10px 14px !important;
  }
  
  .kh-slider .kh-slide .kh-meta h3{
    font-size:15px !important;
    line-height:1.35 !important;
  }
  
  .kh-slider .kh-slide .kh-meta time{
    font-size:12px !important;
  }
}

/* حذف motion برای کاربران حساس */
@media (prefers-reduced-motion:reduce){
  .kh-cat, .kh-cat::after, .kh-cat__body h3{ 
    transition:none !important; 
  }
}




/* === HARD FIX: layering + mobile positions (must be last) === */

/* 1) خنثی کردن z-indexِ سراسریِ مشکل‌ساز داخل اسلایدر */
.kh-slider *{ z-index:auto !important; }

/* 2) لایه‌بندی صحیح: متن زیر دکمه‌ها نباشه، ولی هر دو روی عکس باشن */
.kh-slider .kh-prev, .kh-slider .kh-next{ z-index: 30 !important; }
.kh-slider .kh-meta{ z-index: 20 !important; }

/* 3) موبایل عمودی: دکمه‌ها بالاتر + متن خیلی بالاتر تا تاریخ زیر نره */
@media (max-width: 480px){
  .kh-slider,
  .kh-slider .kh-track,
  .kh-slider .kh-slide,
  .kh-slider .kh-cover{
    height: 340px !important;
    min-height: 340px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .kh-slider .kh-cover img,
  .kh-slider .kh-slide-img{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center !important;
  }

  /* دکمه‌های ناوبری فقط بالاتر برن (کوچیک نشن) */
  .kh-slider .kh-prev, .kh-slider .kh-next{ 
    top: 32% !important; 
    transform: translateY(-50%) !important;
  }

  /* باکس عنوان/تاریخ بالاتر که زیر دکمه‌ها/تصویر گم نشه */
  .kh-slider .kh-slide .kh-meta{
    left:12px !important; right:12px !important; bottom: 90px !important;
    padding: 10px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
    border-radius: 12px !important;
  }

  .kh-slider .kh-meta h3{
    margin: 0 0 6px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .kh-slider .kh-meta time{
    display:block !important;
    font-size:.88rem !important;
    line-height:1.3 !important;
  }
}

/* 4) گوشی‌های خیلی کوچک یک پله بالاتر */
@media (max-width:360px){
  .kh-slider .kh-prev, .kh-slider .kh-next{ top: 30% !important; }
  .kh-slider .kh-slide .kh-meta{ bottom: 98px !important; }
}
/* === KH SLIDER • FINAL HARD OVERRIDE (put at the VERY END) === */
@media (max-width:480px){
  /* ارتفاع یکدستِ همه‌ی لایه‌ها */
  .kh-slider,
  .kh-slider .kh-track,
  .kh-slider .kh-slide,
  .kh-slider .kh-slide > a,
  .kh-slider .kh-cover{
    position:relative !important;
    height:340px !important;        /* اگر هنوز کم/زیاد بود: 320/360 تست کن */
    min-height:340px !important;
    overflow:hidden !important;
  }

  /* تصویر تمام قاب را تمیز بپوشاند */
  .kh-slider .kh-cover img,
  .kh-slider .kh-slide-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }

  /* دکمه‌های گرد جابه‌جایی فقط بالاتر بروند (کوچک نمی‌شوند) */
  .kh-slider .kh-prev,
  .kh-slider .kh-next{
    top:30% !important;             /* اگر مزاحم بود 28% کن */
    transform:translateY(-50%) !important;
    z-index:12 !important;
  }

  /* باکس عنوان/تاریخ بالاتر بیاید تا «زیر» نرود */
  .kh-slider .kh-slide .kh-meta{
    position:absolute !important;
    left:12px !important; right:12px !important;
    bottom:92px !important;          /* اگر هنوز نزدیک بود 100px کن */
    padding:10px 12px !important;
    background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
    border-radius:12px !important;
    z-index:13 !important;           /* بالاتر از دکمه‌ها */
    max-width:calc(100% - 24px) !important;
    box-sizing:border-box !important;
  }

  /* تیتر یک‌خطه + جای کافی برای تاریخ */
  .kh-slider .kh-meta h3{
    margin:0 0 6px !important;
    font-size:1rem !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .kh-slider .kh-meta time{
    display:block !important;
    margin:0 !important;
    font-size:.88rem !important;
    line-height:1.35 !important;
    opacity:.95 !important;
  }
}

/* کمی گارد برای خیلی‌کوچک‌ها */
@media (max-width:360px){
  .kh-slider .kh-prev, .kh-slider .kh-next{ top:28% !important; }
  .kh-slider .kh-slide .kh-meta{ bottom:100px !important; }
}



/* ==== ULTIMATE CSS FIX - HIGHEST PRIORITY (put at very end) ==== */

/* دسته‌بندی‌ها: طراحی مدرن با بالاترین اولویت */
.kh-cats{
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: repeat(2, 1fr) !important;
  padding: 8px !important;
}
@media (max-width: 992px){ 
  .kh-cats{ grid-template-columns: repeat(2, 1fr) !important; } 
}
@media (max-width: 640px){ 
  .kh-cats{ 
    grid-template-columns: repeat(1, 1fr) !important; 
    gap: 16px !important; 
  } 
}

.kh-cat{
  position: relative !important; 
  display: block !important;
  border: 0 !important; 
  border-radius: 20px !important; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
  overflow: hidden !important;
  min-height: 140px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  transform: translateY(0) scale(1) !important;
  transition: all .35s cubic-bezier(.2,.7,.2,1) !important;
}

/* تصویر پس‌زمینه */
.kh-cat::before{
  content: "" !important; 
  display: block !important; 
  padding-top: 42% !important;
  background-size: cover !important; 
  background-position: center !important; 
  background-repeat: no-repeat !important;
  position: relative !important;
}

/* اورلی گرادیان مدرن */
.kh-cat::after{
  content: "" !important; 
  position: absolute !important; 
  inset: 0 !important;
  background: linear-gradient(135deg, 
    rgba(102,126,234,.75) 0%, 
    rgba(118,75,162,.65) 40%, 
    rgba(240,147,251,.55) 100%
  ) !important;
  mix-blend-mode: multiply !important;
  transition: opacity .35s ease !important;
}

/* محتوای متنی */
.kh-cat__body{
  position: absolute !important; 
  inset: auto 0 0 0 !important;
  padding: 1.4rem 1.3rem 1.5rem !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8)) !important;
  color: #fff !important; 
  z-index: 2 !important;
}

.kh-cat__body h3{
  font-size: 17px !important; 
  font-weight: 700 !important; 
  margin: .2rem 0 .6rem !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.6) !important; 
  color: #fff !important;
  font-family: 'Vazirmatn', 'IRANSans', system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
}

.kh-cat__body p{
  font-size: 13.5px !important; 
  margin: 0 !important; 
  opacity: .92 !important; 
  color: #f1f5f9 !important;
  font-weight: 400 !important; 
  line-height: 1.5 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}

.kh-chip{
  background: rgba(255,255,255,.2) !important; 
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 999px !important; 
  padding: 3px 10px !important; 
  font-size: 11.5px !important;
  font-weight: 500 !important; 
  backdrop-filter: blur(8px) !important;
  color: #fff !important; 
  text-shadow: none !important;
}

/* هاور مدرن */
@media (hover: hover){
  .kh-cat:hover{
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 24px 48px rgba(0,0,0,.2) !important;
  }
  .kh-cat:hover::after{ 
    opacity: .7 !important; 
  }
  .kh-cat:hover .kh-cat__body h3{ 
    transform: translateY(-2px) !important; 
  }
}

/* ==== اسلایدر موبایل: ارتفاع بیشتر + دکمه‌ها و متن بالاتر ==== */
@media (max-width: 640px){
  /* ارتفاع اسلایدر بیشتر */
  .kh-slider,
  .kh-slider .kh-track{
    height: 320px !important;
    min-height: 320px !important;
  }
  
  .kh-slider .kh-slide,
  .kh-slider .kh-cover{
    height: 320px !important;
  }
  
  .kh-slider .kh-slide-img,
  .kh-slider .kh-cover img{
    height: 320px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  
  /* دکمه‌های جابجایی بالاتر */
  .kh-slider .kh-prev, 
  .kh-slider .kh-next,
  .kh-prev,
  .kh-next{
    top: 30% !important;
    transform: translateY(-50%) !important;
    z-index: 15 !important;
    position: absolute !important;
  }
  
  .kh-slider .kh-prev,
  .kh-prev{ 
    right: 10px !important; 
  }
  
  .kh-slider .kh-next,
  .kh-next{ 
    left: 10px !important; 
  }
  
  /* باکس عنوان/تاریخ خیلی بالاتر */
  .kh-slider .kh-slide .kh-meta,
  .kh-slider .kh-meta,
  .kh-meta{
    position: absolute !important;
    bottom: 80px !important;
    left: 14px !important; 
    right: 14px !important;
    z-index: 14 !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, rgba(0,0,0,.7), rgba(0,0,0,.5)) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 16px !important;
    color: #fff !important;
    max-width: calc(100% - 28px) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px){
  /* موبایل کوچک */
  .kh-slider,
  .kh-slider .kh-track,
  .kh-slider .kh-slide,
  .kh-slider .kh-cover{
    height: 300px !important;
    min-height: 300px !important;
  }
  
  .kh-slider .kh-slide-img,
  .kh-slider .kh-cover img{
    height: 300px !important;
  }
  
  /* دکمه‌ها بالاتر */
  .kh-slider .kh-prev, 
  .kh-slider .kh-next,
  .kh-prev,
  .kh-next{
    top: 28% !important;
  }
  
  /* متن خیلی بالاتر */
  .kh-slider .kh-slide .kh-meta,
  .kh-slider .kh-meta,
  .kh-meta{
    bottom: 85px !important;
    left: 12px !important; 
    right: 12px !important;
    padding: 10px 14px !important;
    max-width: calc(100% - 24px) !important;
  }
  
  .kh-slider .kh-slide .kh-meta h3,
  .kh-slider .kh-meta h3,
  .kh-meta h3{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
  }
  
  .kh-slider .kh-slide .kh-meta time,
  .kh-slider .kh-meta time,
  .kh-meta time{
    font-size: 12px !important;
    opacity: 0.9 !important;
  }
}

/* اطمینان از اعمال تغییرات */
.kh-slider{ 
  background: #e5e7eb !important; 
  position: relative !important; 
  border-radius: 12px !important;
  overflow: hidden !important;
}

.kh-slider .kh-slide{ 
  position: relative !important; 
}

.kh-slider .kh-cover img, 
.kh-slide-img{
  object-position: center !important;
  display: block !important;
}


/* ==== KH SLIDER — SAME BEHAVIOR AS CATEGORY TILES (clean, final) ==== */

/* 1) نسبت ثابت + ارتفاع واکنش‌گرا شیک (مثل باکس دسته‌بندی) */
.kh-slider { position: relative; overflow: hidden; border-radius: 12px; background:#e5e7eb; }
.kh-slider .kh-track { position: relative; }

/* ظرف هر اسلاید با نسبت و/یا ارتفاع تمیز */
.kh-slider .kh-slide{
  position: relative;
  width: 100%;
  /* اگر aspect-ratio ساپورت شود، از نسبت ثابت استفاده کن */
  aspect-ratio: 16 / 9;
  /* و برای مرورگرهای قدیمی‌تر ارتفاع واکنش‌گرا بده */
  height: clamp(260px, 38vw, 480px);
  overflow: hidden;
}

/* 2) تصویر دقیقاً کل قاب را بپوشاند (مثل هفته‌نامه) */
.kh-slider .kh-cover,
.kh-slider .kh-slide > a { position:absolute; inset:0; display:block; }
.kh-slider .kh-cover img,
.kh-slider .kh-slide-img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  display:block !important;
}

/* 3) کارت عنوان/تاریخ همیشه داخل قاب بماند */
.kh-slider .kh-meta{
  position:absolute !important;
  left:12px !important; right:12px !important;
  bottom:16px !important;
  padding:10px 12px !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:12px !important;
  z-index:12 !important;
  max-width:calc(100% - 24px) !important;
  box-sizing:border-box !important;
  transform:none !important;
}

/* 4) دکمه‌های قبلی/بعدی: توی موبایل فقط «بالاتر» برن، اندازه‌شون عوض نشه */
.kh-prev, .kh-next{
  position:absolute; z-index:13;
  top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); color:#fff;
  padding:10px; border-radius:50%; cursor:pointer;
}
.kh-prev{ left:10px; } .kh-next{ right:10px; }

/* موبایل عمودی: دکمه‌ها کمی بالاتر، تا با متن تداخل نکنن */
@media (max-width:480px){
  .kh-prev, .kh-next{ top:34% !important; }
  .kh-slider .kh-meta{ bottom:72px !important; } /* جا برای دکمه‌ها */
  .kh-slider .kh-meta h3{
    margin:0 0 4px !important; font-size:1rem !important; line-height:1.35 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .kh-slider .kh-meta time{
    display:block !important; font-size:.88rem !important; line-height:1.3 !important;
  }
}
/* ==== SIMPLE MODERN CATEGORIES - فقط ظاهر مدرن‌تر ==== */

/* ایکون‌های بزرگ‌تر و مدرن */
.kh-cat i,
.kh-cat .fa,
.kh-cat [class*="fa-"],
.kh-cat .icon{
  font-size: 42px !important;
  color: #4f46e5 !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

/* رنگ‌های مدرن برای عناوین */
.kh-cat h3,
.kh-cat .title{
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 8px 0 4px 0 !important;
  transition: color 0.3s ease !important;
}

/* پس‌زمینه مدرن */
.kh-cat{
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* انیمیشن هاور ساده */
.kh-cat:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border-color: #4f46e5 !important;
}

.kh-cat:hover i,
.kh-cat:hover .fa,
.kh-cat:hover [class*="fa-"],
.kh-cat:hover .icon{
  color: #6366f1 !important;
  transform: scale(1.1) !important;
}

.kh-cat:hover h3,
.kh-cat:hover .title{
  color: #4f46e5 !important;
}

/* تعداد مطالب مدرن */
.kh-cat .count,
.kh-chip{
  background: #4f46e5 !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
}

/* رسپانسیو */
@media (max-width: 768px){
  .kh-cat i,
  .kh-cat .fa,
  .kh-cat [class*="fa-"],
  .kh-cat .icon{
    font-size: 36px !important;
  }
  
  .kh-cat{
    padding: 20px 12px !important;
  }
}

/* === KH SLIDER • FINAL OVERRIDE PACK (must be last) === */

/* ارتفاع واکنش‌گرا با یه متغیر محلی (دیگه با :root قاطی نشه) */
.kh-slider{ --sH: clamp(260px, 38vw, 520px); }

@media (max-width:640px){ .kh-slider{ --sH: 320px; } }
@media (max-width:480px){ .kh-slider{ --sH: 300px; } }
@media (max-width:360px){ .kh-slider{ --sH: 300px; } }

/* همه‌ی لایه‌ها هم‌قد و داخل قاب */
.kh-slider,
.kh-slider .kh-track,
.kh-slider .kh-slide,
.kh-slider .kh-slide > a,
.kh-slider .kh-cover{
  position: relative !important;
  height: var(--sH) !important;
  min-height: var(--sH) !important;
  overflow: hidden !important;
}

/* تصویر/کاور دقیقاً قاب را بپوشاند */
.kh-slider .kh-cover img,
.kh-slider .kh-slide-img,
.kh-slider picture img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* هر z-index عمومی قبلی را خنثی کن */
.kh-slider *{ z-index: auto !important; }

/* دکمه‌ها همیشه روی همه‌چیز، کارت متن زیرِ دکمه‌ها */
.kh-slider .kh-prev, .kh-slider .kh-next{ z-index: 30 !important; }
.kh-slider .kh-slide .kh-meta{ z-index: 20 !important; }

/* موقعیت دکمه‌ها: دسکتاپ وسط، موبایل کمی بالاتر */
.kh-slider .kh-prev, .kh-slider .kh-next{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.kh-slider .kh-prev{ left: 10px !important; }
.kh-slider .kh-next{ right: 10px !important; }

@media (max-width:640px){ .kh-slider .kh-prev, .kh-slider .kh-next{ top: 34% !important; } }
@media (max-width:480px){ .kh-slider .kh-prev, .kh-slider .kh-next{ top: 32% !important; } }
@media (max-width:360px){ .kh-slider .kh-prev, .kh-slider .kh-next{ top: 30% !important; } }

/* کارت عنوان/تاریخ: پایین قاب، ولی تو موبایل بیاد بالاتر */
.kh-slider .kh-slide .kh-meta{
  position: absolute !important;
  left: 12px !important; right: 12px !important; bottom: 16px !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  color:#fff !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
  transform: none !important;
}
@media (max-width:640px){ .kh-slider .kh-slide .kh-meta{ bottom: 82px !important; } }
@media (max-width:480px){ .kh-slider .kh-slide .kh-meta{ bottom: 90px !important; } }
@media (max-width:360px){ .kh-slider .kh-slide .kh-meta{ bottom: 100px !important; } }

/* درخواست خودت: در کوچک‌ترین حالت، تصویر 95% اسکیل شود تا فضای پایین بازتر شود */
@media (max-width:360px){
  .kh-slider .kh-cover img,
  .kh-slider .kh-slide-img,
  .kh-slider picture img{
    transform: scale(.95) !important;
    transform-origin: center top !important;
  }
}

/* تیتر/تاریخ خواناتر در موبایل */
@media (max-width:480px){
  .kh-slider .kh-meta h3{
    margin: 0 0 4px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .kh-slider .kh-meta time{
    display: block !important;
    font-size: .88rem !important;
    line-height: 1.3 !important;
    opacity: .95 !important;
  }
}
/* ==== SIMPLE MODERN CATEGORIES - فقط ظاهر مدرن‌تر ==== */

/* ایکون‌های بزرگ‌تر و مدرن */
.kh-cat i,
.kh-cat .fa,
.kh-cat [class*="fa-"],
.kh-cat .icon{
  font-size: 42px !important;
  color: #4f46e5 !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

/* رنگ‌های مدرن برای عناوین */
.kh-cat h3,
.kh-cat .title{
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 8px 0 4px 0 !important;
  transition: color 0.3s ease !important;
}

/* پس‌زمینه مدرن */
.kh-cat{
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* انیمیشن هاور ساده */
.kh-cat:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border-color: #4f46e5 !important;
}

.kh-cat:hover i,
.kh-cat:hover .fa,
.kh-cat:hover [class*="fa-"],
.kh-cat:hover .icon{
  color: #6366f1 !important;
  transform: scale(1.1) !important;
}

.kh-cat:hover h3,
.kh-cat:hover .title{
  color: #4f46e5 !important;
}

/* تعداد مطالب مدرن */
.kh-cat .count,
.kh-chip{
  background: #4f46e5 !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
}

/* رسپانسیو */
@media (max-width: 768px){
  .kh-cat i,
  .kh-cat .fa,
  .kh-cat [class*="fa-"],
  .kh-cat .icon{
    font-size: 36px !important;
  }
  
  .kh-cat{
    padding: 20px 12px !important;
  }
}


/* کانتینر اسلاید باید relative باشد */
.kh-slider .slide {
  position: relative;
}

/* لایه متن روی عکس در موبایل */
@media (max-width: 768px) {
  .kh-slider .slide-caption {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 2;
    padding: 8px 10px;
    line-height: 1.4;
    background: linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,0) );
    color: #fff;
    border-radius: 8px;
  }
  .kh-slider .slide-caption .title {
    margin: 0 0 4px 0;
    font-size: 15px; font-weight: 700;
  }
  .kh-slider .slide-caption .slide-date {
    margin: 0;
    font-size: 12px; opacity: .9;
    display: inline-block;
  }
  /* خودِ تصویر زیر متن بماند */
  .kh-slider .slide img {
    display: block;
    width: 100%; height: auto;
  }
}