/* ==========================================================================
   KH Premium Academy — Portfolio & SEO Case Studies
   --------------------------------------------------------------------------
   دو نوع نمایش با یک ساختار مشترک:
     • طراحی سایت → قاب مرورگر با اسکرین‌شات
     • سئو        → متریک قبل/بعد با رشد واقعی

   همه توکن‌ها از kh-design-system.css می‌آیند.
   بارگذاری شرطی: فقط صفحات نمونه‌کار و هر صفحه‌ای که ویجت آن را دارد.

   ساختار:
     01. Grid
     02. Project card
     03. Browser frame
     04. Card body
     05. Featured (کارت بزرگ)
     06. SEO metrics (قبل/بعد)
     07. Single project
     08. Testimonial
     09. Marquee لوگوها
     10. Responsive
   ========================================================================== */

/* ==========================================================================
   01. GRID
   ========================================================================== */

.kh-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kh-s-6);
}

.kh-projects--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-projects--1 { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   02. PROJECT CARD
   ========================================================================== */

.kh-project {
  --_tint: rgba(75, 124, 255, .35);
  --_bg-a: #0E1C2F;
  --_bg-b: #21466E;

  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
  overflow: hidden;
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base),
              border-color var(--kh-t-base);
}

.kh-project--gold   { --_tint: rgba(225, 176, 93, .4);  --_bg-a: #241D16; --_bg-b: #5D4931; }
.kh-project--purple { --_tint: rgba(150, 130, 220, .35); --_bg-a: #221F38; --_bg-b: #4A4370; }
.kh-project--green  { --_tint: rgba(45, 183, 125, .35); --_bg-a: #10241F; --_bg-b: #1B4537; }

.kh-project:hover {
  transform: translateY(-6px);
  border-color: #DCDCD4;
  box-shadow: var(--kh-shadow-card);
}

/* --- صحنه (پس‌زمینه رنگی + قاب مرورگر) --- */
.kh-project__stage {
  position: relative;
  padding: var(--kh-s-7) var(--kh-s-7) 0;
  background:
    radial-gradient(circle at 72% 22%, var(--_tint), transparent 42%),
    linear-gradient(140deg, var(--_bg-a), var(--_bg-b));
  overflow: hidden;
}

/* نشان رشد سئو */
.kh-project__badge {
  position: absolute;
  inset-block-start: var(--kh-s-5);
  inset-inline-start: var(--kh-s-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--kh-r-pill);
  background: var(--kh-success);
  color: #fff;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  line-height: 1.6;
  box-shadow: 0 8px 20px rgba(47, 181, 126, .3);
}

/* ==========================================================================
   03. BROWSER FRAME
   قاب مرورگر با CSS ساخته می‌شود — بدون تصویر اضافه.
   ========================================================================== */

.kh-browser-frame {
  border-start-start-radius: var(--kh-r-md);
  border-start-end-radius: var(--kh-r-md);
  background: var(--kh-paper);
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .12), 0 24px 50px rgba(6, 16, 30, .38);
  overflow: hidden;
  transform: translateY(0);
  transition: transform var(--kh-t-base);
}
.kh-project:hover .kh-browser-frame { transform: translateY(-6px); }

.kh-browser-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  block-size: 34px;
  padding-inline: var(--kh-s-4);
  background: #F1F2F3;
  border-block-end: 1px solid #E3E5E7;
}

.kh-browser-frame__dots { display: flex; gap: 5px; flex: none; }
.kh-browser-frame__dots i {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: #D5D8DB;
}
.kh-browser-frame__dots i:nth-child(1) { background: #F0685E; }
.kh-browser-frame__dots i:nth-child(2) { background: #F4BE4F; }
.kh-browser-frame__dots i:nth-child(3) { background: #61C554; }

.kh-browser-frame__url {
  flex: 1;
  min-inline-size: 0;
  padding: 3px 12px;
  border-radius: var(--kh-r-pill);
  background: #FFF;
  color: #8B93A0;
  font-size: var(--kh-fs-nano);
  line-height: 1.7;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-browser-frame__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #F5F6F6;
  overflow: hidden;
}
.kh-browser-frame__screen img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  /* اسکرول آرام تصویر هنگام hover — حس «مرور سایت» */
  transition: object-position 1.6s cubic-bezier(.4, 0, .2, 1);
}
.kh-project:hover .kh-browser-frame__screen img { object-position: bottom center; }

/* بدون تصویر، قاب نباید ۱۶:۱۰ بماند — کارت بی‌دلیل بلند و خالی می‌شود.
   یک «اسکلت صفحه» ساده با CSS نمایش می‌دهیم که عمدی به نظر برسد. */
.kh-browser-frame__screen:has(.kh-browser-frame__placeholder) { aspect-ratio: 16 / 7; }

.kh-browser-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kh-s-3);
  padding: var(--kh-s-5);
  color: #7E8896;
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-bold);
  text-align: center;
}
/* خطوط اسکلت‌وار بالای متن */
.kh-browser-frame__placeholder::before {
  content: "";
  inline-size: 46%;
  block-size: 8px;
  border-radius: 4px;
  background: #E3E6EA;
}
.kh-browser-frame__placeholder::after {
  content: "";
  inline-size: 30%;
  block-size: 8px;
  border-radius: 4px;
  background: #ECEFF2;
}

/* ==========================================================================
   04. CARD BODY
   ========================================================================== */

.kh-project__body {
  display: flex;
  flex-direction: column;
  gap: var(--kh-s-2);
  flex: 1;
  padding: var(--kh-s-6);
}

.kh-project__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-3);
}
.kh-project__year {
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  font-variant-numeric: tabular-nums;
}

.kh-project__title {
  font-size: var(--kh-fs-h3);
  line-height: 1.65;
  color: var(--kh-navy);
}
.kh-project__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.kh-project:hover .kh-project__title { color: var(--kh-gold); }

.kh-project__client {
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
}

/* --- آمار کوتاه داخل کارت --- */
.kh-project__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kh-s-3);
  margin-block-start: auto;
  padding-block-start: var(--kh-s-4);
  border-block-start: 1px solid var(--kh-line);
}
.kh-project__stats b {
  display: block;
  font-size: var(--kh-fs-lg);
  font-weight: var(--kh-fw-black);
  line-height: 1.4;
  color: var(--kh-navy);
  font-variant-numeric: tabular-nums;
}
.kh-project__stats span {
  font-size: var(--kh-fs-nano);
  color: var(--kh-muted);
}

/* --- چیپ خدمات --- */
.kh-project__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: auto;
  padding-block-start: var(--kh-s-4);
  border-block-start: 1px solid var(--kh-line);
}
.kh-project__services span {
  padding: 4px 10px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-pill);
  background: var(--kh-bg);
  font-size: var(--kh-fs-nano);
  color: var(--kh-tag-text);
  line-height: 1.7;
}

/* ==========================================================================
   05. FEATURED (کارت دو برابر)
   ========================================================================== */

.kh-projects .kh-project--featured { grid-column: span 2; }
.kh-projects--1 .kh-project--featured { grid-column: auto; }

.kh-project--featured {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
}
.kh-project--featured .kh-project__stage {
  padding: var(--kh-s-8) 0 var(--kh-s-8) var(--kh-s-8);
  display: flex;
  align-items: center;
}
.kh-project--featured .kh-browser-frame {
  inline-size: 100%;
  border-radius: var(--kh-r-md);
}
.kh-project--featured .kh-project__body {
  justify-content: center;
  padding: var(--kh-s-8);
}
/*
 * `margin-block-start: auto` روی آمار، برای کارت عادی درست است: بدنه
 * ارتفاع باقی‌مانده را پر می‌کند و آمار به کف می‌چسبد.
 *
 * ولی در کارت شاخص، بدنه بلند است و محتوایش کم — و این `auto` با
 * `justify-content: center` بالا می‌جنگید: مارجین به ۱۳۷px باز می‌شد و
 * بین نام مشتری و ردیف آمار یک حفره ۱۴۶ پیکسلی می‌ماند. اینجا آمار باید
 * ادامه همان گروه متن باشد، نه چسبیده به کف.
 */
.kh-project--featured .kh-project__stats { margin-block-start: var(--kh-s-6); }
.kh-project--featured .kh-project__title { font-size: 25px; }

/* ==========================================================================
   06. SEO METRICS — قبل / بعد
   ========================================================================== */

.kh-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: var(--kh-s-4);
}

.kh-metric-card {
  position: relative;
  padding: var(--kh-s-6);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-paper);
  overflow: hidden;
}
.kh-metric-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-gold-light));
}

.kh-metric-card__label {
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  line-height: 1.7;
}

.kh-metric-card__row {
  display: flex;
  align-items: baseline;
  gap: var(--kh-s-3);
  margin-block-start: var(--kh-s-3);
}

.kh-metric-card__before {
  font-size: var(--kh-fs-md);
  color: var(--kh-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.kh-metric-card__arrow { color: var(--kh-gold); flex: none; }
.kh-metric-card__after {
  font-size: 30px;
  font-weight: var(--kh-fw-black);
  line-height: 1.2;
  color: var(--kh-navy);
  font-variant-numeric: tabular-nums;
}

.kh-metric-card__growth {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block-start: var(--kh-s-3);
  padding: 4px 10px;
  border-radius: var(--kh-r-pill);
  background: #E7F7F0;
  color: #17654A;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  line-height: 1.6;
}
.kh-metric-card__growth--down { background: #FDECEA; color: #922B21; }

/* نوار پیشرفت بصری زیر متریک */
.kh-metric-card__bar {
  block-size: 5px;
  margin-block-start: var(--kh-s-4);
  border-radius: 3px;
  background: var(--kh-line);
  overflow: hidden;
}
.kh-metric-card__bar > i {
  display: block;
  block-size: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-gold-light));
}

/* --- نسخه تیره (روی سکشن Navy) --- */
.kh-metrics--dark .kh-metric-card {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
}
.kh-metrics--dark .kh-metric-card__label  { color: #9EABBA; }
.kh-metrics--dark .kh-metric-card__before { color: #7E8B9B; }
.kh-metrics--dark .kh-metric-card__after  { color: #fff; }
.kh-metrics--dark .kh-metric-card__bar    { background: rgba(255, 255, 255, .1); }

/* ==========================================================================
   07. SINGLE PROJECT
   ========================================================================== */

.kh-project-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center;
  padding: 46px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-section);
  background: linear-gradient(135deg, #FFF, #F4EFE6);
  overflow: hidden;
}
.kh-project-hero__frame { min-inline-size: 0; }

.kh-project-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--kh-s-3);
  margin-block-start: var(--kh-s-7);
}
.kh-project-fact {
  padding: var(--kh-s-4);
  border-radius: var(--kh-r-md);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--kh-line);
}
.kh-project-fact b {
  display: block;
  font-size: var(--kh-fs-md);
  color: var(--kh-navy);
  line-height: 1.5;
}
.kh-project-fact span { font-size: var(--kh-fs-nano); color: var(--kh-muted); }

/* بلوک چالش / راهکار / نتیجه */
.kh-case-blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kh-s-5);
}
.kh-case-block {
  padding: var(--kh-s-6);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-paper);
}
.kh-case-block__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--kh-s-4);
  border-radius: var(--kh-r-sm);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
}
.kh-case-block h3 { font-size: var(--kh-fs-md); margin-block-end: var(--kh-s-2); }
.kh-case-block p  { font-size: var(--kh-fs-sm); color: var(--kh-body-text); }

/* ==========================================================================
   08. TESTIMONIAL
   ========================================================================== */

.kh-testimonial {
  position: relative;
  padding: 42px;
  border-radius: var(--kh-r-panel);
  background:
    radial-gradient(circle at 88% 18%, rgba(211, 162, 83, .16), transparent 30%),
    linear-gradient(135deg, #0D1B2E, #091421);
  color: #fff;
  overflow: hidden;
}
.kh-testimonial__quote {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 24px;
  color: rgba(255, 255, 255, .07);
}
.kh-testimonial__quote svg { inline-size: 78px; block-size: 78px; }
.kh-testimonial p {
  position: relative;
  font-size: var(--kh-fs-md);
  line-height: 2;
  color: #E4EAF1;
  max-inline-size: 62ch;
}
.kh-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  margin-block-start: var(--kh-s-6);
}
.kh-testimonial__author b { font-size: var(--kh-fs-sm); color: #fff; }
.kh-testimonial__author span { font-size: var(--kh-fs-micro); color: #9EABBA; }

/* ==========================================================================
   09. LOGO MARQUEE (نوار لوگوی کارفرمایان)
   ========================================================================== */

.kh-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kh-s-8);
  padding-block: var(--kh-s-6);
}
.kh-logos__item {
  font-size: var(--kh-fs-lg);
  font-weight: var(--kh-fw-black);
  color: #A9B2BD;
  letter-spacing: .5px;
  opacity: .75;
  transition: color var(--kh-t-fast), opacity var(--kh-t-fast);
}
.kh-logos__item:hover { color: var(--kh-navy); opacity: 1; }
.kh-logos__item img {
  block-size: 34px;
  inline-size: auto;
  filter: grayscale(1);
  opacity: .6;
  transition: filter var(--kh-t-fast), opacity var(--kh-t-fast);
}
.kh-logos__item:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   10. SERVICES
   ========================================================================== */

/* min(280px, 100%) عمدی است.
   با minmax(280px, 1fr) خالی، اگر عرض ظرف از ۲۸۰px کمتر شود ستون‌ها
   کوچک نمی‌شوند و از صفحه بیرون می‌زنند — منشأ اسکرول افقی در موبایل. */
.kh-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--kh-s-5);
}
.kh-services--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kh-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kh-s-3);
  padding: var(--kh-s-7);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-paper);
  overflow: hidden;
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base),
              border-color var(--kh-t-base);
}
/* خط طلایی که با hover از راست باز می‌شود */
.kh-service::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-gold-light));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--kh-t-base);
}
.kh-service:hover {
  transform: translateY(-6px);
  border-color: #DCDCD4;
  box-shadow: var(--kh-shadow-card);
}
.kh-service:hover::before { transform: scaleX(1); }

.kh-service__badge {
  position: absolute;
  inset-block-start: var(--kh-s-5);
  inset-inline-start: var(--kh-s-5);
  padding: 4px 11px;
  border-radius: var(--kh-r-pill);
  background: var(--kh-gold-soft);
  color: #8A6421;
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-bold);
  line-height: 1.7;
}

.kh-service__icon {
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  margin-block-end: var(--kh-s-2);
  border-radius: var(--kh-r-md);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  transition: background-color var(--kh-t-base), color var(--kh-t-base);
}
.kh-service__icon svg { inline-size: 25px; block-size: 25px; }
.kh-service:hover .kh-service__icon { background: var(--kh-navy); color: var(--kh-gold-light); }

.kh-service__title { font-size: var(--kh-fs-h3); line-height: 1.6; color: var(--kh-navy); }
.kh-service__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.kh-service:hover .kh-service__title { color: var(--kh-gold); }

.kh-service__tagline {
  font-size: var(--kh-fs-sm);
  line-height: 1.9;
  color: var(--kh-muted);
}

.kh-service__list {
  list-style: none;
  margin: var(--kh-s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.kh-service__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--kh-fs-sm);
  line-height: 1.8;
  color: var(--kh-body-text);
}
.kh-service__list svg { color: var(--kh-success); flex: none; margin-block-start: .35em; }

.kh-service__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kh-s-3);
  margin-block-start: auto;
  padding-block-start: var(--kh-s-5);
  border-block-start: 1px solid var(--kh-line);
}
.kh-service__price span {
  display: block;
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-black);
  color: var(--kh-navy);
}
.kh-service__price small {
  display: block;
  margin-block-start: 2px;
  font-size: var(--kh-fs-nano);
  color: var(--kh-muted);
}
.kh-service__cta {
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
  white-space: nowrap;
}
.kh-service__cta span { color: var(--kh-gold); }
.kh-service:hover .kh-service__cta { color: var(--kh-gold); }

/* --- کارت شاخص: تیره --- */
.kh-service--featured {
  border-color: transparent;
  background:
    radial-gradient(circle at 85% 12%, rgba(211, 162, 83, .16), transparent 32%),
    linear-gradient(140deg, #0D1B2E, #091421);
}
.kh-service--featured .kh-service__title,
.kh-service--featured .kh-service__title a { color: #fff; }
.kh-service--featured .kh-service__tagline { color: #9EABBA; }
.kh-service--featured .kh-service__list li { color: #C9D3DE; }
.kh-service--featured .kh-service__icon { background: rgba(255, 255, 255, .08); color: var(--kh-gold-light); }
.kh-service--featured:hover .kh-service__icon { background: var(--kh-gold); color: #fff; }
.kh-service--featured .kh-service__foot { border-block-start-color: rgba(255, 255, 255, .1); }
.kh-service--featured .kh-service__price span { color: #fff; }
.kh-service--featured .kh-service__price small { color: #8494A6; }
.kh-service--featured .kh-service__cta { color: var(--kh-gold-light); }
.kh-service--featured .kh-service__badge { background: var(--kh-gold); color: #fff; }

/* --- مراحل انجام کار (صفحه تک‌خدمت) --- */
.kh-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--kh-s-5);
  counter-reset: kh-step;
}
.kh-process__item {
  position: relative;
  padding: var(--kh-s-6);
  padding-block-start: var(--kh-s-8);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-paper);
}
.kh-process__item::before {
  counter-increment: kh-step;
  content: counter(kh-step, persian);
  position: absolute;
  inset-block-start: var(--kh-s-5);
  inset-inline-end: var(--kh-s-5);
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-black);
}
.kh-process__item h3 { font-size: var(--kh-fs-md); margin-block-end: 6px; }
.kh-process__item p  { font-size: var(--kh-fs-sm); color: var(--kh-body-text); }

/* ==========================================================================
   10.5. LEARNING PATHS
   ========================================================================== */

.kh-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--kh-s-5);
}
.kh-paths--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-paths--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
 * کارت مسیر.
 *
 * نسخه قبلی «ساده» نبود، «بی‌تفاوت» بود: چهار عنصر با وزن یکسان زیر هم
 * چیده شده بودند و هیچ‌کدام نمی‌گفت کجا را نگاه کن. سه چیز اضافه شد که
 * هر سه کارکردی‌اند نه تزیینی:
 *
 *   ۱. نوار رنگی بالای کارت — مرز بالایی می‌دهد و کارت را از پس‌زمینه
 *      سفید جدا می‌کند (مشکل اصلی در پوسته مرجع).
 *   ۲. شماره ترتیب مسیر — به کاربر می‌گوید این‌ها یک دنباله‌اند نه یک
 *      لیست، که کل ایده «مسیر یادگیری» است.
 *   ۳. آیکن بزرگ‌تر با پس‌زمینه توپر در حالت hover.
 */
.kh-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kh-s-3);
  padding: var(--kh-s-7);
  padding-block-start: calc(var(--kh-s-7) + 4px);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-paper);
  overflow: hidden;
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base),
              border-color var(--kh-t-base);
}

/* نوار بالای کارت. در حالت عادی خاکستری کم‌رنگ است و فقط مرز می‌سازد؛
   با hover رنگ اکسنت می‌گیرد. */
.kh-path::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: var(--kh-line);
  transition: background var(--kh-t-base);
}
.kh-path:hover::before {
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-accent-2));
}

/* شماره ترتیب — بزرگ، کم‌رنگ، پشت محتوا. عدد است نه تزیین: ترتیب مسیر
   را نشان می‌دهد. با CSS counter شمرده می‌شود تا در PHP دست نبریم. */
.kh-paths { counter-reset: kh-path; }
.kh-path { counter-increment: kh-path; }
.kh-path::after {
  content: counter(kh-path);
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: var(--kh-s-5);
  z-index: 0;
  font-size: 88px;
  font-weight: var(--kh-fw-black);
  line-height: 1;
  color: var(--kh-line);
  opacity: .5;
  pointer-events: none;
}
.kh-path > * { position: relative; z-index: 1; }

.kh-path:hover {
  transform: translateY(-3px);
  border-color: var(--kh-gold);
  box-shadow: var(--kh-shadow-card);
}

.kh-path__icon {
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--kh-r-md);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  transition: background-color var(--kh-t-base), color var(--kh-t-base),
              transform var(--kh-t-base);
}
.kh-path__icon svg { inline-size: 25px; block-size: 25px; }
.kh-path:hover .kh-path__icon {
  background: var(--kh-gold);
  color: #fff;
  transform: scale(1.06);
}

.kh-path__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-3);
}
.kh-path__count { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

.kh-path__title {
  font-size: var(--kh-fs-h3);
  line-height: var(--kh-lh-heading);
  color: var(--kh-navy);
  transition: color var(--kh-t-fast);
}
.kh-path__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.kh-path:hover .kh-path__title { color: var(--kh-gold); }

.kh-path__desc {
  font-size: var(--kh-fs-sm);
  line-height: var(--kh-lh-body);
  color: var(--kh-body-text);
}

.kh-path__foot {
  margin-block-start: auto;
  padding-block-start: var(--kh-s-5);
  border-block-start: 1px solid var(--kh-line);
}
.kh-path__cta {
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
}
.kh-path__cta span { color: var(--kh-gold); }
.kh-path:hover .kh-path__cta { color: var(--kh-gold); }

.kh-path__progress span {
  display: block;
  margin-block-start: 7px;
  font-size: var(--kh-fs-nano);
  color: var(--kh-muted);
}
.kh-path__bar {
  block-size: 6px;
  border-radius: 3px;
  background: var(--kh-line);
  overflow: hidden;
}
.kh-path__bar > i {
  display: block;
  block-size: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-accent-2));
}

/* چیپ سطح — قبلاً یک متن خاکستری ساده بود و اصلاً دیده نمی‌شد */
.kh-path__meta .kh-tag {
  background: var(--kh-bg-soft);
  border: 1px solid var(--kh-line);
}
.kh-path__count {
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
}

/* --- نوار وضعیت بالای صفحه مسیر --- */
.kh-path-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-6);
  padding: var(--kh-s-6);
  margin-block-end: var(--kh-s-6);
  border: 1px solid #F0E2C6;
  border-radius: var(--kh-r-card);
  background: linear-gradient(135deg, var(--kh-gold-soft), #FFF);
}
.kh-path-status b { display: block; font-size: var(--kh-fs-md); color: var(--kh-navy); }
.kh-path-status > div > span {
  display: block;
  margin-block: 4px 10px;
  font-size: var(--kh-fs-micro);
  color: #6E6350;
}
.kh-path-status .kh-path__bar { inline-size: min(320px, 100%); }
.kh-path-status .kh-btn { flex: none; }

/* --- فهرست دروس --- */
.kh-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
  overflow: hidden;
}

.kh-lesson {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  padding: var(--kh-s-5) var(--kh-s-6);
  border-block-end: 1px solid var(--kh-line);
  transition: background-color var(--kh-t-fast);
}
.kh-lesson:last-child { border-block-end: 0; }
.kh-lesson:hover { background: #FCFCFA; }

.kh-lesson__num {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--kh-line);
  border-radius: 50%;
  background: var(--kh-bg);
  color: var(--kh-muted);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.kh-lesson.is-done .kh-lesson__num {
  background: #E7F7F0;
  border-color: #BCE6D6;
  color: var(--kh-success);
}

.kh-lesson__body { flex: 1; min-inline-size: 0; }
.kh-lesson__body a {
  display: block;
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-semi);
  line-height: 1.7;
  color: var(--kh-navy);
}
.kh-lesson__body a::after { content: ""; position: absolute; inset: 0; }
.kh-lesson:hover .kh-lesson__body a { color: var(--kh-gold); }

.kh-lesson__meta {
  display: block;
  margin-block-start: 3px;
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
}

.kh-lesson__badge {
  flex: none;
  padding: 4px 11px;
  border-radius: var(--kh-r-pill);
  background: #E7F7F0;
  color: #17654A;
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-semi);
}

/* --- خروجی مسیر --- */
.kh-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--kh-s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kh-outcomes li {
  display: flex;
  align-items: flex-start;
  gap: var(--kh-s-3);
  padding: var(--kh-s-4) var(--kh-s-5);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  background: var(--kh-paper);
  font-size: var(--kh-fs-sm);
  line-height: 1.9;
  color: var(--kh-body-text);
}
.kh-outcomes svg { color: var(--kh-success); flex: none; margin-block-start: .4em; }

/* ==========================================================================
   10.6. GLOSSARY
   ========================================================================== */

.kh-glossary__search {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  padding: 9px var(--kh-s-5);
  margin-block-end: var(--kh-s-5);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  background: var(--kh-paper);
  box-shadow: var(--kh-shadow-xs);
  transition: border-color var(--kh-t-fast), box-shadow var(--kh-t-fast);
}
.kh-glossary__search:focus-within { border-color: var(--kh-gold); box-shadow: var(--kh-focus); }

.kh-glossary__search input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 42px;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: var(--kh-fs-base);
  color: var(--kh-ink);
  -webkit-appearance: none;
  appearance: none;
}
.kh-glossary__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kh-glossary__count {
  flex: none;
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  font-variant-numeric: tabular-nums;
}

/* --- نوار حروف --- */
.kh-glossary__index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--kh-s-4);
  margin-block-end: var(--kh-s-7);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  background: var(--kh-bg);
}
.kh-glossary__index a {
  display: grid;
  place-items: center;
  min-inline-size: 36px;
  min-block-size: 36px;
  padding-inline: 8px;
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
  border: 1px solid var(--kh-line);
  transition: background-color var(--kh-t-fast), color var(--kh-t-fast),
              border-color var(--kh-t-fast);
}
.kh-glossary__index a:hover {
  background: var(--kh-navy);
  border-color: var(--kh-navy);
  color: #fff;
}
.kh-glossary__index a.is-hidden { opacity: .3; pointer-events: none; }

/* --- گروه حرف --- */
.kh-glossary__group {
  margin-block-end: var(--kh-s-8);
  scroll-margin-top: var(--kh-sticky-top);
}
.kh-glossary__letter {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--kh-s-4);
  border-radius: var(--kh-r-sm);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  font-size: var(--kh-fs-lg);
  font-weight: var(--kh-fw-black);
}

.kh-glossary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--kh-s-4);
}
.kh-glossary__grid--1 { grid-template-columns: minmax(0, 1fr); }
.kh-glossary__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-glossary__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- کارت واژه --- */
.kh-term {
  position: relative;
  padding: var(--kh-s-5);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  background: var(--kh-paper);
  transition: border-color var(--kh-t-fast), box-shadow var(--kh-t-fast);
}
.kh-term:hover { border-color: var(--kh-gold); box-shadow: var(--kh-shadow-sm); }

.kh-term__title { font-size: var(--kh-fs-md); line-height: 1.6; color: var(--kh-navy); }
.kh-term__title a::after { content: ""; position: absolute; inset: 0; }
.kh-term:hover .kh-term__title { color: var(--kh-gold); }

.kh-term__en {
  display: block;
  margin-block-start: 3px;
  font-size: var(--kh-fs-micro);
  color: var(--kh-gold);
  direction: ltr;
  text-align: start;
}
.kh-term__short {
  margin-block-start: var(--kh-s-2);
  font-size: var(--kh-fs-sm);
  line-height: 1.85;
  color: var(--kh-muted);
}

.kh-glossary__empty {
  padding: var(--kh-s-8);
  border: 1px dashed var(--kh-line);
  border-radius: var(--kh-r-md);
  text-align: center;
  color: var(--kh-muted);
}

/* --- لینک خودکار داخل مقاله --- */
.kh-site .kh-prose a.kh-glossary-link {
  color: var(--kh-navy);
  text-decoration: none;
  border-block-end: 1px dashed var(--kh-gold);
  padding-block-end: 1px;
}
.kh-site .kh-prose a.kh-glossary-link:hover {
  color: var(--kh-gold);
  border-block-end-style: solid;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .kh-projects,
  .kh-projects--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kh-project-hero { grid-template-columns: 1fr; padding: var(--kh-s-7); }
  .kh-case-blocks  { grid-template-columns: 1fr; }

  .kh-services--3,
  .kh-services--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kh-paths--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .kh-projects,
  .kh-projects--3,
  .kh-projects--1 { grid-template-columns: 1fr; gap: var(--kh-s-5); }

  /* کارت شاخص در موبایل مثل بقیه می‌شود */
  .kh-projects .kh-project--featured {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .kh-project--featured .kh-project__stage {
    padding: var(--kh-s-6) var(--kh-s-6) 0;
    display: block;
  }
  .kh-project--featured .kh-project__body { padding: var(--kh-s-6); }
  .kh-project--featured .kh-project__title { font-size: var(--kh-fs-h3); }

  .kh-project__stage { padding: var(--kh-s-5) var(--kh-s-5) 0; }
  .kh-project__body  { padding: var(--kh-s-5); }

  .kh-browser-frame__bar { block-size: 28px; }
  .kh-browser-frame__url { display: none; }

  .kh-metrics { grid-template-columns: 1fr; }
  .kh-metric-card__after { font-size: 26px; }

  .kh-project-hero { padding: var(--kh-s-6); border-radius: var(--kh-r-panel); }
  .kh-testimonial  { padding: var(--kh-s-6); }
  .kh-testimonial p { font-size: var(--kh-fs-base); }
  .kh-testimonial__quote svg { inline-size: 54px; block-size: 54px; }

  .kh-logos { gap: var(--kh-s-5); }

  .kh-services,
  .kh-services--2,
  .kh-services--3,
  .kh-services--4 { grid-template-columns: 1fr; }
  .kh-service { padding: var(--kh-s-6); }
  .kh-service__icon { inline-size: 46px; block-size: 46px; }
  .kh-service__foot { flex-direction: column; align-items: flex-start; gap: var(--kh-s-3); }

  .kh-process { grid-template-columns: 1fr; }

  /* --- مسیرهای یادگیری --- */
  .kh-paths,
  .kh-paths--2,
  .kh-paths--3 { grid-template-columns: 1fr; }
  .kh-path { padding: var(--kh-s-6); }
  .kh-path:hover { transform: none; }

  .kh-path-status { flex-direction: column; align-items: stretch; }
  .kh-path-status .kh-btn { inline-size: 100%; }
  .kh-path-status .kh-path__bar { inline-size: 100%; }

  .kh-lesson {
    flex-wrap: wrap;
    padding: var(--kh-s-4) var(--kh-s-5);
    gap: var(--kh-s-3);
  }
  .kh-lesson__badge { order: 3; }
  .kh-lessons { border-radius: var(--kh-r-card); }

  /* --- واژه‌نامه --- */
  .kh-glossary__grid,
  .kh-glossary__grid--2,
  .kh-glossary__grid--3 { grid-template-columns: 1fr; }

  .kh-glossary__search { flex-wrap: wrap; }
  .kh-glossary__search input { font-size: 16px; }
  .kh-glossary__count { inline-size: 100%; padding-block-start: 4px; }

  .kh-glossary__index { gap: 5px; padding: var(--kh-s-3); }
  .kh-glossary__index a { min-inline-size: 40px; min-block-size: 40px; }

  .kh-glossary__letter { inline-size: 38px; block-size: 38px; font-size: var(--kh-fs-md); }
}

@media (prefers-reduced-motion: reduce) {
  .kh-project:hover { transform: none; }
  .kh-project:hover .kh-browser-frame { transform: none; }
  .kh-browser-frame__screen img,
  .kh-project:hover .kh-browser-frame__screen img {
    transition: none;
    object-position: top center;
  }
}

/* ==========================================================================
   12. MOBILE — بازبینی تکمیلی
   ========================================================================== */

@media (max-width: 768px) {

  /* --- نمونه‌کار --- */

  /* افکت‌های hover در لمسی معنی ندارند و باعث «چسبیدن» حالت hover می‌شوند */
  .kh-project:hover,
  .kh-project:hover .kh-browser-frame,
  .kh-service:hover { transform: none; }
  .kh-project:hover .kh-browser-frame__screen img { object-position: top center; }

  /* نشان رشد نباید روی قاب بیفتد */
  .kh-project__badge {
    inset-block-start: var(--kh-s-4);
    inset-inline-start: var(--kh-s-4);
    padding: 4px 10px;
    font-size: var(--kh-fs-nano);
  }

  /* دو آمار کنار هم در عرض کم فشرده می‌شوند */
  .kh-project__stats { grid-template-columns: 1fr 1fr; gap: var(--kh-s-2); }
  .kh-project__stats b { font-size: var(--kh-fs-md); }

  /* --- متریک سئو --- */
  .kh-metric-card { padding: var(--kh-s-5); }
  .kh-metric-card__row { flex-wrap: wrap; gap: var(--kh-s-2); }
  .kh-metric-card__after { font-size: 24px; }

  /* --- مراحل انجام کار --- */
  .kh-process__item {
    padding: var(--kh-s-5);
    padding-block-start: var(--kh-s-7);
  }
  .kh-process__item::before {
    inset-block-start: var(--kh-s-4);
    inset-inline-end: var(--kh-s-4);
    inline-size: 30px;
    block-size: 30px;
    font-size: var(--kh-fs-micro);
  }

  /* --- نظر کارفرما --- */
  .kh-testimonial p { max-inline-size: none; }

  /* --- لوگوها --- */
  .kh-logos { gap: var(--kh-s-5); justify-content: center; }
  .kh-logos__item { font-size: var(--kh-fs-base); }
}

@media (max-width: 380px) {
  .kh-project__title { font-size: var(--kh-fs-md); }
  .kh-service__title { font-size: var(--kh-fs-md); }
  .kh-metric-card__after { font-size: 22px; }
  .kh-project__stats { grid-template-columns: 1fr; }
}