/* ================================================================
   تعمیرکار 24 — Theme (tk-*)   نسخه ۲
   ایده: «کارت سرویس» — هر بلوک یک برگه کار است با لبه پرفراژ
   پالت: نفتی تیره + برنجی + کاغذ نعنایی سرد   |   RTL
   تایپ: Dana Black تیتر  |  Peyda متن
   بعد از main.css لود شود
   ================================================================ */

:root {
  --tk-ink:        #12211F;
  --tk-petrol:     #0E3A3C;
  --tk-petrol-2:   #14504F;
  --tk-brass:      #E39B2E;
  --tk-brass-dark: #B87A15;
  --tk-brass-soft: rgba(227, 155, 46, .14);
  --tk-signal:     #C2402F;
  --tk-paper:      #EDF1F0;
  --tk-card:       #FFFFFF;
  --tk-rule:       #D3DCDA;
  --tk-muted:      #5B6E6C;

  --tk-container:  1160px;
  --tk-header-h:   80px;
  --tk-r:          4px;
  --tk-r-lg:       10px;
  --tk-notch:      14px;
  --tk-t:          .2s cubic-bezier(.2,.7,.3,1);

  --tk-display: 'Dana', Tahoma, sans-serif;
  --tk-body:    'Peyda', 'Dana', Tahoma, sans-serif;

  --brand:      var(--tk-petrol);
  --brand-dark: var(--tk-ink);
  --accent:     var(--tk-brass);
  --accent-dark:var(--tk-brass-dark);
  --text:       var(--tk-ink);
  --text-muted: var(--tk-muted);
  --border:     var(--tk-rule);
  --bg:         var(--tk-card);
  --bg-alt:     var(--tk-paper);
  --container:  var(--tk-container);
  --font:       var(--tk-body);
}

/* ================================================================
   نگاشت توکن های tehranbosch.css
   صفحات داخلی (page_types و پارشال های tbs-*) استایلشان از
   tehranbosch.css می آید که تقریباً کامل با متغیر کار می کند.
   با بازنویسی همین متغیرها، همه آن اجزا رنگ تعمیرکار 24 می گیرند
   و دیگر لازم نیست ۴۴۰۰ خط CSS دوباره نوشته شود.
   ================================================================ */
:root {
  --tbs-red:          var(--tk-brass);
  --tbs-red-dark:     var(--tk-brass-dark);
  --tbs-red-soft:     var(--tk-brass-soft);
  --tbs-charcoal:     var(--tk-petrol);
  --tbs-charcoal-2:   var(--tk-petrol-2);
  --tbs-steel:        #DFE6E4;
  --tbs-offwhite:     var(--tk-paper);
  --tbs-white:        #FFFFFF;
  --tbs-accent:       var(--tk-petrol);
  --tbs-accent-soft:  rgba(14, 58, 60, .10);
  --tbs-text:         var(--tk-ink);
  --tbs-text-muted:   var(--tk-muted);
  --tbs-border:       var(--tk-rule);
  --tbs-radius:       var(--tk-r);
  --tbs-radius-md:    var(--tk-r-lg);
  --tbs-container:    var(--tk-container);
  --tbs-header-h:     var(--tk-header-h);
  --tbs-pattern-red:  rgba(227, 155, 46, .06);
  --tbs-pattern-line: rgba(14, 58, 60, .07);
  --tbs-shadow-soft:  0 1px 0 rgba(18,33,31,.04), 0 10px 26px rgba(14,58,60,.07);
  --font-display:     var(--tk-display);
  --font-body:        var(--tk-body);
}

/* هدر و فوتر قدیمی tbs خاموش — نسخه tk جای آنها را گرفته */
body.tk-site .tbs-topbar,
body.tk-site .tbs-head-bar,
body.tk-site .tbs-phone-float { display: none !important; }

/* ================================================================
   پایه
   ================================================================ */
body.tk-site {
  direction: rtl;
  text-align: right;
  font-family: var(--tk-body);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--tk-ink);
  background: var(--tk-paper);
  -webkit-font-smoothing: antialiased;
}
body.tk-site h1, body.tk-site h2, body.tk-site h3,
body.tk-site h4, body.tk-site .tk-display {
  font-family: var(--tk-display);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.35;
  color: inherit;
}

/* ---------------------------------------------------------------
   ★ نکته مهم: لینک ها رنگ را از والدشان ارث می برند.
   در نسخه اول یک قاعده کلی رنگ نفتی می داد و ویژگی اش از
   قاعده های هدر و فوتر بیشتر بود، پس لینک ها روی زمینه تیره
   نامرئی می شدند. با inherit این مشکل ریشه ای حل می شود.
   --------------------------------------------------------------- */
:where(body.tk-site) :where(a) { color: inherit; text-decoration: none; }
/* فقط برای غلبه بر  a { color: var(--accent) }  در main.css */
body.tk-site :where(a) { color: inherit; }

/* ★ اصلاح ریشه ای: هر عنصری که attribute hidden دارد باید پنهان بماند،
   حتی اگر کلاسش display دیگری ست کرده باشد. */
body.tk-site [hidden] { display: none !important; }

/* لینک های داخل متن، رنگ اختصاصی */
body.tk-site .section-content a,
body.tk-site .tk-about-text a,
body.tk-site .page-content a {
  color: var(--tk-brass-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.tk-site .section-content a:hover,
body.tk-site .tk-about-text a:hover,
body.tk-site .page-content a:hover { color: var(--tk-petrol); }

.tk-wrap { max-width: var(--tk-container); margin: 0 auto; padding: 0 20px; }

.tk-num {
  font-family: var(--tk-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.tk-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--tk-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--tk-muted);
  margin-bottom: 8px;
}
.tk-eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--tk-brass);
  flex-shrink: 0;
}

/* خط جدا شونده — امضای طرح */
.tk-tear {
  border: 0;
  border-top: 2px dashed var(--tk-rule);
  margin: 0;
  position: relative;
}
.tk-tear::before, .tk-tear::after {
  content: "";
  position: absolute; top: 50%;
  width: var(--tk-notch); height: var(--tk-notch);
  background: var(--tk-paper);
  border-radius: 50%;
  transform: translateY(-50%);
}
.tk-tear::before { right: calc(var(--tk-notch) * -0.5); }
.tk-tear::after  { left:  calc(var(--tk-notch) * -0.5); }

.tk-card {
  background: var(--tk-card);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-lg);
}

/* دکمه ها */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tk-display);
  font-weight: 800;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--tk-r);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--tk-t);
  line-height: 1;
  white-space: nowrap;
}
body.tk-site .tk-btn-primary { background: var(--tk-brass); color: var(--tk-ink); }
body.tk-site .tk-btn-primary:hover { background: #F0AC46; color: var(--tk-ink); }
body.tk-site .tk-btn-ghost { background: transparent; color: var(--tk-ink); border-color: var(--tk-ink); }
body.tk-site .tk-btn-ghost:hover { background: var(--tk-ink); color: #fff; }
body.tk-site .tk-btn-call { background: var(--tk-signal); color: #fff; }
body.tk-site .tk-btn-call:hover { background: #A83325; color: #fff; }
body.tk-site .tk-btn-light { background: #fff; color: var(--tk-petrol); }
.tk-btn:focus-visible { outline: 3px solid var(--tk-brass); outline-offset: 3px; }

/* ================================================================
   هدر
   ================================================================ */
.tk-header {
  background: var(--tk-petrol);
  color: #fff;
  position: sticky; top: 0; z-index: 60;
  border-bottom: 3px solid var(--tk-brass);
}
.tk-header-in {
  min-height: var(--tk-header-h);
  display: flex;
  align-items: center;
  gap: 22px;
}

.tk-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.tk-logo img { height: 46px; width: auto; display: block; }
body.tk-site .tk-logo-txt {
  font-family: var(--tk-display);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: #fff;
}
body.tk-site .tk-logo-sub {
  display: block;
  font-family: var(--tk-body);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--tk-brass);
}

.tk-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; padding: 0; margin-block: 0; }
.tk-nav > li { position: relative; list-style: none; }
body.tk-site .tk-nav > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 13px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  border-radius: var(--tk-r);
  transition: var(--tk-t);
}
body.tk-site .tk-nav > li > a:hover { background: rgba(255,255,255,.1); color: #fff; }
.tk-nav-arr { font-size: 9px; opacity: .7; }

.tk-nav .tk-sub {
  position: absolute; top: calc(100% + 3px); right: 0;
  /* --cols از PHP بر اساس تعداد آیتم ها ست می شود */
  --cols: 1;
  width: max-content;
  max-width: min(92vw, 900px);
  min-width: 250px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(210px, 1fr));
  gap: 0 4px;
  background: #fff;
  border: 1px solid var(--tk-rule);
  border-top: 3px solid var(--tk-brass);
  border-radius: var(--tk-r-lg);
  padding: 6px; margin: 0;
  box-shadow: 0 18px 40px rgba(14,58,60,.2);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: var(--tk-t);
}
.tk-nav > li:hover > .tk-sub,
.tk-nav > li:focus-within > .tk-sub { opacity: 1; visibility: visible; transform: none; }
.tk-sub li { list-style: none; break-inside: avoid; }
body.tk-site .tk-sub a {
  display: block; padding: 8px 12px;
  color: var(--tk-ink); font-size: 14px;
  border-radius: var(--tk-r);
}
body.tk-site .tk-sub a:hover { background: var(--tk-brass-soft); }

.tk-header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-inline-start: auto; }
.tk-nav + .tk-header-cta { margin-inline-start: 0; }
body.tk-site .tk-header-tel { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; color: #fff; }
body.tk-site .tk-header-tel span { font-size: 11px; color: rgba(255,255,255,.62); }
body.tk-site .tk-header-tel strong { font-size: 18.5px; color: #fff; }

.tk-burger {
  display: none;
  background: rgba(255,255,255,.1);
  border: 0; color: #fff;
  font-size: 20px; line-height: 1;
  padding: 10px 13px; border-radius: var(--tk-r);
  cursor: pointer; flex-shrink: 0;
}

/* ================================================================
   هیرو — کارت درخواست سرویس  ★ امضا
   ================================================================ */
.tk-hero { padding: 40px 0 52px; }
.tk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
  gap: 22px;
  align-items: start;
}

.tk-ticket {
  background: var(--tk-card);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(18,33,31,.04), 0 20px 44px rgba(14,58,60,.09);
}
.tk-ticket-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px;
  background: var(--tk-petrol);
  color: #fff;
}
.tk-ticket-head b { font-family: var(--tk-display); font-weight: 800; font-size: 13.5px; }
.tk-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.88); }
.tk-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--tk-brass); animation: tk-pulse 2.4s infinite; }
@keyframes tk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227,155,46,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(227,155,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,155,46,0); }
}

.tk-ticket-body { padding: 30px 26px 26px; }
.tk-ticket-body h1 { font-size: clamp(26px, 3.9vw, 40px); margin: 0 0 12px; }
.tk-ticket-lead { font-size: 16px; color: var(--tk-muted); margin: 0 0 24px; max-width: 56ch; }

.tk-quick { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.tk-field label {
  display: block;
  font-family: var(--tk-display);
  font-weight: 700; font-size: 12px;
  color: var(--tk-muted);
  margin-bottom: 6px;
}
.tk-field input, .tk-field textarea, .tk-field select {
  width: 100%;
  font-family: var(--tk-body);
  font-size: 15px;
  color: var(--tk-ink);
  background: var(--tk-paper);
  border: 1px solid var(--tk-rule);
  border-bottom: 2px solid var(--tk-rule);
  border-radius: var(--tk-r);
  padding: 12px 14px;
  transition: var(--tk-t);
}
.tk-field input::placeholder, .tk-field textarea::placeholder { color: #9AA9A7; }
.tk-field input:focus, .tk-field textarea:focus {
  outline: none; background: #fff; border-bottom-color: var(--tk-brass);
}
.tk-quick .tk-btn { height: 47px; }

.tk-or { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; color: var(--tk-muted); }
body.tk-site .tk-or a { font-size: 20px; color: var(--tk-signal); }
body.tk-site .tk-or a:hover { color: #A83325; }

.tk-ticket-foot { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 26px 24px; }
.tk-ticket-foot > div { text-align: center; }
.tk-ticket-foot > div + div { border-inline-start: 1px dashed var(--tk-rule); }
.tk-ticket-foot strong { display: block; font-size: 26px; color: var(--tk-petrol); }
.tk-ticket-foot span { font-size: 12.5px; color: var(--tk-muted); }

/* ستون کناری — فهرست دستگاه ها */
.tk-picker { padding: 20px 20px 16px; }
.tk-picker h2 { font-size: 17px; margin: 0 0 3px; }
.tk-picker > p { font-size: 13px; color: var(--tk-muted); margin: 0 0 14px; }
.tk-picker-list { display: flex; flex-direction: column; }
.tk-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  margin: 0 -10px;
  border-radius: var(--tk-r);
  font-size: 14.5px;
  border-bottom: 1px dashed var(--tk-rule);
  transition: var(--tk-t);
}
.tk-pick:last-of-type { border-bottom: 0; }
.tk-pick-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-rule);
  flex-shrink: 0;
  transition: var(--tk-t);
}
body.tk-site .tk-pick-arr { margin-inline-start: auto; color: var(--tk-rule); font-size: 13px; transition: var(--tk-t); }
.tk-pick:hover { background: var(--tk-brass-soft); }
.tk-pick:hover .tk-pick-dot { background: var(--tk-brass); transform: scale(1.5); }
.tk-pick:hover .tk-pick-arr { color: var(--tk-brass-dark); transform: translateX(-3px); }
body.tk-site .tk-picker-all {
  display: block; text-align: center;
  margin-top: 14px; padding: 11px;
  border: 1px dashed var(--tk-rule);
  border-radius: var(--tk-r);
  font-family: var(--tk-display); font-weight: 800; font-size: 14px;
  color: var(--tk-petrol);
}
.tk-picker-all:hover { border-color: var(--tk-brass); background: var(--tk-brass-soft); }

/* ================================================================
   بلوک عمومی
   ================================================================ */
.tk-block { padding: 52px 0; }
.tk-block-head { margin-bottom: 26px; }
.tk-block-head h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; }
.tk-block-head p { color: var(--tk-muted); margin: 0; font-size: 15px; }

/* ================================================================
   خدمات
   ================================================================ */
.tk-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--tk-card);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
}
.tk-service {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 18px;
  border-inline-start: 1px dashed var(--tk-rule);
  border-top: 1px dashed var(--tk-rule);
  position: relative; overflow: hidden;
  min-width: 0;
}
.tk-services > .tk-service:nth-child(-n+3) { border-top: 0; }
.tk-services > .tk-service:nth-child(3n+1) { border-inline-start: 0; }
.tk-service::after {
  content: "";
  position: absolute; inset: 0 100% 0 0;
  background: var(--tk-brass-soft);
  transition: inset .3s cubic-bezier(.2,.7,.3,1);
}
.tk-service:hover::after { inset: 0; }
.tk-service > * { position: relative; z-index: 1; }
.tk-service-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--tk-rule);
  border-radius: 50%;
  color: var(--tk-petrol);
  font-size: 17px;
  flex-shrink: 0;
  background: #fff;
  transition: var(--tk-t);
}
.tk-service:hover .tk-service-icon { border-color: var(--tk-brass); color: var(--tk-brass-dark); }
.tk-service-txt { min-width: 0; }
.tk-service-txt b {
  font-family: var(--tk-display); font-weight: 800; font-size: 15.5px;
  display: block; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-service-txt span { font-size: 12.5px; color: var(--tk-muted); }
body.tk-site .tk-service-go { margin-inline-start: auto; color: var(--tk-rule); flex-shrink: 0; transition: var(--tk-t); }
.tk-service:hover .tk-service-go { color: var(--tk-brass-dark); transform: translateX(-4px); }

/* ================================================================
   معرفی + ویدیو
   ================================================================ */
.tk-about { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: center; }
.tk-about--nomedia { grid-template-columns: 1fr; max-width: 880px; }
.tk-about-media { position: relative; }
.tk-about-media::before {
  content: "";
  position: absolute; inset: 16px -16px -16px 16px;
  border: 2px solid var(--tk-brass);
  border-radius: var(--tk-r-lg);
  z-index: 0;
}
.tk-about-media video, .tk-about-media img, .tk-about-media iframe {
  position: relative; z-index: 1;
  width: 100%; display: block;
  border-radius: var(--tk-r-lg);
  background: var(--tk-ink);
}
.tk-about-text h2 { font-size: clamp(21px, 2.6vw, 28px); margin: 0 0 14px; }
.tk-about-text p { margin: 0 0 14px; }
.tk-about-text > .tk-btn { margin-top: 6px; }

/* ================================================================
   فرایند
   ================================================================ */
.tk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: tkstep; }
.tk-step {
  padding: 26px 20px 24px;
  background: var(--tk-card);
  border: 1px solid var(--tk-rule);
  border-inline-start: 0;
  position: relative;
}
.tk-step:first-child { border-inline-start: 1px solid var(--tk-rule); border-radius: 0 var(--tk-r-lg) var(--tk-r-lg) 0; }
.tk-step:last-child  { border-radius: var(--tk-r-lg) 0 0 var(--tk-r-lg); }
.tk-step::before {
  counter-increment: tkstep;
  content: counter(tkstep);
  font-family: var(--tk-display); font-weight: 900;
  font-size: 44px; line-height: 1;
  color: var(--tk-brass); opacity: .22;
  position: absolute; top: 14px; left: 18px;
}
.tk-step h3 { font-size: 16px; margin: 0 0 7px; }
.tk-step p { font-size: 13.5px; color: var(--tk-muted); margin: 0; line-height: 1.85; }

/* ================================================================
   مقالات
   ================================================================ */
.tk-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tk-post {
  background: var(--tk-card);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: var(--tk-t);
}
.tk-post:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,58,60,.11); border-color: var(--tk-brass); }
.tk-post-img { aspect-ratio: 16/10; background: var(--tk-paper); overflow: hidden; display: block; }
.tk-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-post-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tk-post-date { font-size: 11.5px; color: var(--tk-muted); }
.tk-post h3 { font-size: 15px; margin: 0; line-height: 1.6; }
.tk-post p { font-size: 13px; color: var(--tk-muted); margin: 0; }
body.tk-site .tk-post-more { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--tk-brass-dark); }
.tk-posts-more { text-align: center; margin-top: 26px; }

/* ================================================================
   فرم درخواست
   ================================================================ */
.tk-request { background: var(--tk-petrol); padding: 54px 0; color: #fff; }
.tk-request .tk-block-head p { color: rgba(255,255,255,.72); }
.tk-request .tk-eyebrow { color: rgba(255,255,255,.72); }
.tk-request-card { padding: 26px; color: var(--tk-ink); }
.tk-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tk-form-grid .tk-field-full { grid-column: 1 / -1; }
.tk-form-actions { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tk-form-note { font-size: 13px; color: var(--tk-muted); }

/* ================================================================
   فوتر
   ================================================================ */
.tk-footer { background: var(--tk-petrol); color: rgba(255,255,255,.8); padding: 46px 0 0; }
body.tk-site .tk-footer a:hover { color: var(--tk-brass); }
.tk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 34px; }
.tk-footer h3 {
  color: #fff; font-size: 15px; margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px dashed rgba(255,255,255,.2);
}
.tk-footer p { margin: 0 0 12px; font-size: 14px; }
.tk-footer ul { list-style: none; padding: 0; margin: 0; }
.tk-footer li { padding: 5px 0; font-size: 14px; }
.tk-footer-bar {
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 16px 0;
  font-size: 13px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: rgba(255,255,255,.6);
}
.tk-social { display: flex; gap: 9px; margin-top: 6px; }
body.tk-site .tk-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff; font-size: 15px;
  transition: var(--tk-t);
}
body.tk-site .tk-social a:hover { background: var(--tk-brass); border-color: var(--tk-brass); color: var(--tk-ink); }

/* ================================================================
   کشوی موبایل — در RTL از راست باز می شود
   ================================================================ */
.tk-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 330px);
  background: var(--tk-card);
  z-index: 100;
  overflow-y: auto;
  padding-bottom: 24px;
  box-shadow: -8px 0 34px rgba(14,58,60,.26);
  animation: tk-slide-in .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes tk-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.tk-drawer[hidden] { display: none; }
.tk-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  background: var(--tk-petrol); color: #fff;
  font-family: var(--tk-display); font-weight: 900;
  position: sticky; top: 0;
}
.tk-drawer-close { background: none; border: 0; color: #fff; font-size: 19px; cursor: pointer; padding: 4px 8px; }
.tk-drawer ul { list-style: none; padding: 0; margin: 0; }
body.tk-site .tk-drawer > ul > li > a {
  display: block; padding: 13px 18px;
  font-family: var(--tk-display); font-weight: 800; font-size: 15px;
  border-bottom: 1px dashed var(--tk-rule);
  color: var(--tk-ink);
}
body.tk-site .tk-drawer ul ul a {
  display: block; padding: 10px 32px;
  font-size: 14px; color: var(--tk-muted);
  border-bottom: 1px dashed var(--tk-rule);
}
.tk-drawer-foot { padding: 18px; display: grid; gap: 10px; }
.tk-drawer-veil { position: fixed; inset: 0; background: rgba(14,58,60,.55); z-index: 99; }
.tk-drawer-veil[hidden] { display: none; }

body.tk-site .tk-skip-link {
  position: absolute; right: -9999px; top: 0;
  background: var(--tk-brass); color: var(--tk-ink);
  padding: 10px 18px; z-index: 200; font-weight: 800;
}
.tk-skip-link:focus { right: 12px; top: 12px; }

/* نوار تماس چسبان موبایل */
.tk-mobilebar { display: none; }

/* ================================================================
   ریسپانسیو
   ================================================================ */
@media (max-width: 1100px) {
  .tk-nav > li > a { padding: 10px 9px; font-size: 13.5px; }
  .tk-header-tel { display: none; }
}

@media (max-width: 1024px) {
  .tk-hero-grid { grid-template-columns: 1fr; }
  .tk-services  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-services > .tk-service { border-inline-start: 1px dashed var(--tk-rule); border-top: 1px dashed var(--tk-rule); }
  .tk-services > .tk-service:nth-child(-n+2) { border-top: 0; }
  .tk-services > .tk-service:nth-child(2n+1) { border-inline-start: 0; }
  .tk-about { grid-template-columns: 1fr; gap: 26px; }
  .tk-about-media::before { inset: 12px -12px -12px 12px; }
  .tk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tk-step, .tk-step:first-child, .tk-step:last-child {
    border: 1px solid var(--tk-rule); border-radius: var(--tk-r-lg);
  }
  .tk-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-footer-grid { grid-template-columns: 1fr 1fr; }
  .tk-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .tk-nav { display: none; }
  .tk-burger { display: block; order: -1; }
  .tk-logo { margin-inline-end: auto; }
  .tk-header-cta { margin-inline-start: 0; }
  .tk-header-cta .tk-btn { padding: 11px 16px; font-size: 14px; }
}

@media (max-width: 640px) {
  :root { --tk-header-h: 64px; }
  .tk-logo-txt { font-size: 18px; }
  .tk-logo img { height: 38px; }

  .tk-hero { padding: 22px 0 30px; }
  .tk-ticket-head { padding: 10px 16px; }
  .tk-ticket-body { padding: 22px 18px 20px; }
  .tk-ticket-body h1 { font-size: 25px; }
  .tk-ticket-lead { font-size: 15px; margin-bottom: 20px; }
  .tk-quick { grid-template-columns: 1fr; gap: 14px; }
  .tk-quick .tk-btn { width: 100%; }
  .tk-ticket-foot { padding: 16px 14px 20px; }
  .tk-ticket-foot strong { font-size: 22px; }
  .tk-ticket-foot span { font-size: 11.5px; }

  .tk-services { grid-template-columns: 1fr; }
  .tk-services > .tk-service { border-inline-start: 0; border-top: 1px dashed var(--tk-rule); }
  .tk-services > .tk-service:first-child { border-top: 0; }

  .tk-steps, .tk-posts, .tk-footer-grid, .tk-form-grid { grid-template-columns: 1fr; }
  .tk-block { padding: 34px 0; }
  .tk-request { padding: 36px 0; }
  .tk-request-card { padding: 18px; }
  .tk-footer-bar { flex-direction: column; gap: 6px; }

  .tk-mobilebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0 0;
    z-index: 90;
    box-shadow: 0 -6px 20px rgba(14,58,60,.18);
  }
  .tk-mobilebar a {
    padding: 15px 8px; text-align: center;
    font-family: var(--tk-display); font-weight: 800; font-size: 15px;
  }
  body.tk-site .tk-mobilebar a.tk-mb-call { background: var(--tk-signal); color: #fff; }
  body.tk-site .tk-mobilebar a.tk-mb-form { background: var(--tk-brass); color: var(--tk-ink); }
  body.tk-site { padding-bottom: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  body.tk-site *, body.tk-site *::before, body.tk-site *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ================================================================
   بخش های داخلی صفحه (page_sections)
   ================================================================ */
body.tk-site .page-section { margin: 0 0 30px; }
body.tk-site .section-title {
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 0 0 12px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--tk-brass);
}
body.tk-site .section-content img { max-width: 100%; height: auto; border-radius: var(--tk-r); }
body.tk-site .section-video video,
body.tk-site .section-video iframe { width: 100%; border-radius: var(--tk-r-lg); background: var(--tk-ink); }

body.tk-site .faq2-item { border-bottom: 1px dashed var(--tk-rule); }
body.tk-site .faq2-q {
  width: 100%; text-align: right; background: none; border: 0; cursor: pointer;
  font-family: var(--tk-display); font-weight: 800; font-size: 15.5px;
  padding: 15px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--tk-ink);
}
body.tk-site .faq2-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--tk-rule); border-radius: 50%;
  position: relative; transition: var(--tk-t);
}
body.tk-site .faq2-icon::before,
body.tk-site .faq2-icon::after {
  content: ""; position: absolute; inset: 50% 25%; height: 1.5px;
  background: var(--tk-petrol); transform: translateY(-50%); transition: var(--tk-t);
}
body.tk-site .faq2-icon::after { transform: translateY(-50%) rotate(90deg); }
body.tk-site .faq2-q[aria-expanded="true"] .faq2-icon { border-color: var(--tk-brass); background: var(--tk-brass); }
body.tk-site .faq2-q[aria-expanded="true"] .faq2-icon::after { transform: translateY(-50%) rotate(0deg); }

/* ================================================================
   محتوای مقاله — یکسان سازی تایپوگرافی و تصاویر
   دو رَپر وجود دارد: .page-content (متن اصلی صفحه) و
   .section-content (بخش های dakheli). قبلاً استایلشان یکی نبود.
   ================================================================ */
body.tk-site .page-content,
body.tk-site .section-content {
  font-family: var(--tk-body);
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--tk-ink);
}
body.tk-site .page-content p,
body.tk-site .section-content p,
body.tk-site .page-content div,
body.tk-site .section-content div { margin: 0 0 14px; }
body.tk-site .page-content li,
body.tk-site .section-content li { margin: 0 0 8px; }
body.tk-site .page-content strong,
body.tk-site .page-content b,
body.tk-site .section-content strong,
body.tk-site .section-content b { font-weight: 800; color: var(--tk-petrol); }
body.tk-site .page-content h2,
body.tk-site .section-content h2 { font-size: clamp(19px, 2.3vw, 23px); margin: 26px 0 12px; }
body.tk-site .page-content h3,
body.tk-site .section-content h3 { font-size: 17px; margin: 20px 0 10px; }

/* خنثی کردن سایز و رنگ های inline محتوای سایت قدیم
   (علت اختلاف سایز و رنگ متن ها در بعضی صفحات) */
body.tk-site .page-content [style*="font-size"],
body.tk-site .section-content [style*="font-size"],
body.tk-site .page-content font[size],
body.tk-site .section-content font[size] { font-size: inherit !important; }
body.tk-site .page-content [style*="font-family"],
body.tk-site .section-content [style*="font-family"],
body.tk-site .page-content font[face],
body.tk-site .section-content font[face] { font-family: inherit !important; }
body.tk-site .page-content :not(a)[style*="color"],
body.tk-site .section-content :not(a)[style*="color"],
body.tk-site .page-content font[color],
body.tk-site .section-content font[color] { color: inherit !important; }
body.tk-site .page-content [style*="line-height"],
body.tk-site .section-content [style*="line-height"] { line-height: inherit !important; }

/* تصاویر داخل محتوا — همیشه وسط چین */
body.tk-site .page-content img,
body.tk-site .section-content img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 22px auto;
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-lg);
  background: var(--tk-card);
}
body.tk-site .page-content img[align],
body.tk-site .section-content img[align],
body.tk-site .page-content img[style*="float"],
body.tk-site .section-content img[style*="float"] { float: none !important; }
body.tk-site .page-content p:has(> img),
body.tk-site .section-content p:has(> img),
body.tk-site .page-content div:has(> img),
body.tk-site .section-content div:has(> img) { text-align: center; }
body.tk-site .page-content figure,
body.tk-site .section-content figure { margin: 22px auto; text-align: center; }
body.tk-site .page-content figcaption,
body.tk-site .section-content figcaption {
  font-size: 13px; color: var(--tk-muted); margin-top: 8px;
}
/* جدول ها */
body.tk-site .page-content table,
body.tk-site .section-content table {
  width: 100%; border-collapse: collapse; margin: 20px 0;
  font-size: 14.5px; display: block; overflow-x: auto;
}
body.tk-site .page-content th, body.tk-site .page-content td,
body.tk-site .section-content th, body.tk-site .section-content td {
  border: 1px solid var(--tk-rule); padding: 9px 12px;
}
body.tk-site .page-content th,
body.tk-site .section-content th { background: var(--tk-paper); font-weight: 800; }

/* ================================================================
   فرم مشترک
   ================================================================ */
.tk-form-err {
  margin-top: 12px; padding: 11px 14px;
  background: #FBEAE7; border-inline-start: 4px solid var(--tk-signal);
  border-radius: var(--tk-r); font-size: 14px; color: #8E2B1F;
}
.tk-form-ok {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 18px 20px;
  background: #E8F3EC; border-inline-start: 4px solid #2E7D4F;
  border-radius: var(--tk-r-lg);
}
.tk-form-ok-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #2E7D4F; color: #fff; border-radius: 50%;
  font-size: 15px; font-weight: 700;
}
.tk-form-ok b { display: block; font-family: var(--tk-display); font-size: 16px; }
.tk-form-ok p { margin: 4px 0 0; font-size: 14px; color: #2F4A3B; }
.tk-cap-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px;
}
.tk-cap-row input[type=number] { width: 82px; }
.tk-cap-new {
  background: var(--tk-paper); border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r); width: 38px; height: 38px;
  cursor: pointer; font-size: 17px; color: var(--tk-petrol);
}

/* ================================================================
   مدال درخواست
   ================================================================ */
.tk-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.tk-modal[hidden] { display: none; }
.tk-modal-veil { position: absolute; inset: 0; background: rgba(9, 30, 31, .62); backdrop-filter: blur(2px); }
.tk-modal-box {
  position: relative;
  width: 100%; max-width: 620px;
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--tk-card);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(9, 30, 31, .4);
  animation: tk-modal-in .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes tk-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.tk-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 15px 20px;
  background: var(--tk-petrol); color: #fff;
  flex-shrink: 0;
}
.tk-modal-eyebrow { display: block; font-size: 11.5px; color: var(--tk-brass); }
.tk-modal-head b { font-family: var(--tk-display); font-weight: 900; font-size: 18px; }
.tk-modal-close {
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  width: 34px; height: 34px; border-radius: var(--tk-r);
  font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.tk-modal-close:hover { background: rgba(255,255,255,.24); }
.tk-modal-body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tk-modal-lead { margin: 0 0 18px; font-size: 14.5px; color: var(--tk-muted); }
.tk-modal .tk-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-modal .tk-form-actions { margin-top: 18px; }

@media (max-width: 640px) {
  .tk-modal { padding: 0; place-items: end stretch; }
  .tk-modal-box {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--tk-r-lg) var(--tk-r-lg) 0 0;
    animation: tk-sheet-in .24s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes tk-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
  .tk-modal .tk-form-grid { grid-template-columns: 1fr; }
  .tk-modal-body { padding: 16px 16px 26px; }
  .tk-modal .tk-form-actions { flex-direction: column; align-items: stretch; }
  .tk-modal .tk-form-actions .tk-btn { width: 100%; }
}

/* دکمه CTA صفحات خدمات — حالا button است نه a */
body.tk-site button.tbs-svc-cta-btn { cursor: pointer; border: 0; font: inherit; }

/* ================================================================
   سوالات متداول — طرح «قلم های برگه کار»
   یک کارت با ردیف های جدا شده، شماره برنجی سمت راست
   ================================================================ */
body.tk-site .tk-faq-sec { margin: 34px 0; }

body.tk-site .tk-faq {
  background: var(--tk-card);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-lg);
  overflow: hidden;
}
body.tk-site .tk-faq-item + .tk-faq-item { border-top: 1px dashed var(--tk-rule); }

body.tk-site .tk-faq-h { margin: 0; font-size: inherit; font-weight: inherit; }

body.tk-site .tk-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 14px;
  min-height: 62px;
  background: none;
  border: 0;
  border-inline-start: 3px solid transparent;
  cursor: pointer;
  text-align: right;
  font-family: var(--tk-display);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tk-ink);
  transition: background var(--tk-t), border-color var(--tk-t);
}
body.tk-site .tk-faq-q:hover { background: #F7FAF9; }
body.tk-site .tk-faq-q:focus-visible { outline: 3px solid var(--tk-brass); outline-offset: -3px; }

/* شماره ردیف — مربع برنجی */
body.tk-site .tk-faq-n {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 3px;
  background: var(--tk-brass-soft);
  color: var(--tk-brass-dark);
  font-size: 13.5px;
  font-weight: 700;
  transition: var(--tk-t);
}
body.tk-site .tk-faq-t { flex: 1; min-width: 0; }

/* آیکون + / − */
body.tk-site .tk-faq-i {
  flex-shrink: 0;
  position: relative;
  width: 26px; height: 26px;
  border: 1.5px solid var(--tk-rule);
  border-radius: 50%;
  transition: var(--tk-t);
}
body.tk-site .tk-faq-i::before,
body.tk-site .tk-faq-i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  background: var(--tk-petrol);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), opacity .18s;
}
body.tk-site .tk-faq-i::after { transform: translate(-50%, -50%) rotate(90deg); }

/* حالت باز */
body.tk-site .tk-faq-item.is-open > .tk-faq-h > .tk-faq-q {
  background: #F3F8F7;
  border-inline-start-color: var(--tk-brass);
  color: var(--tk-petrol);
}
body.tk-site .tk-faq-item.is-open .tk-faq-n {
  background: var(--tk-brass);
  color: var(--tk-ink);
}
body.tk-site .tk-faq-item.is-open .tk-faq-i {
  border-color: var(--tk-brass);
  background: var(--tk-brass);
}
body.tk-site .tk-faq-item.is-open .tk-faq-i::before,
body.tk-site .tk-faq-item.is-open .tk-faq-i::after { background: var(--tk-ink); }
body.tk-site .tk-faq-item.is-open .tk-faq-i::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* پاسخ */
body.tk-site .tk-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.2,.7,.3,1);
  background: #FBFDFC;
}
body.tk-site .tk-faq-a-in {
  padding: 4px 62px 20px 20px;   /* تو رفتگی هم اندازه شماره تا متن زیر آن بنشیند */
  font-family: var(--tk-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  color: #334745;
  border-top: 1px dashed var(--tk-rule);
  margin-top: 0;
}
body.tk-site .tk-faq-a-in > *:first-child { margin-top: 14px; }
body.tk-site .tk-faq-a-in p { margin: 0 0 12px; }
body.tk-site .tk-faq-a-in > *:last-child { margin-bottom: 0; }
body.tk-site .tk-faq-a-in a { color: var(--tk-brass-dark); text-decoration: underline; }
body.tk-site .tk-faq-a-in ul,
body.tk-site .tk-faq-a-in ol { margin: 0 0 12px; padding-inline-start: 20px; }

@media (max-width: 640px) {
  body.tk-site .tk-faq-q {
    gap: 10px;
    padding: 0 13px 0 10px;
    min-height: 58px;
    font-size: 14.5px;
  }
  body.tk-site .tk-faq-n { width: 26px; height: 26px; font-size: 12.5px; }
  body.tk-site .tk-faq-i { width: 24px; height: 24px; }
  body.tk-site .tk-faq-a-in { padding: 4px 14px 18px; font-size: 14.5px; line-height: 1.95; }
}

/* اگر کاربر انیمیشن نمی خواهد، پاسخ فوری باز شود */
@media (prefers-reduced-motion: reduce) {
  body.tk-site .tk-faq-a { transition: none; }
}

/* ================================================================
   فیلد نامعتبر فرم
   ================================================================ */
body.tk-site .tk-field input.is-bad,
body.tk-site .tk-field textarea.is-bad {
  border-color: var(--tk-signal);
  border-bottom-color: var(--tk-signal);
  background: #FDF4F2;
}
body.tk-site .tk-form-err ul { margin: 0; padding-inline-start: 18px; }
body.tk-site .tk-form-err li { margin: 2px 0; }