/*
Narengi fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com
--------------------------------------------------------------------------------------
This set of fonts are used in this project under the license: (KBMJU7GR)
--------------------------------------------------------------------------------------
*/
@font-face{
  font-family:"Narengi";
  src:url("/assets/fonts/NarengiVF.woff2") format("woff2-variations"),
      url("/assets/fonts/NarengiVF.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   همراه کلینیک — استایل پایه
   پالت از رنگ‌های لوگو: سرمه‌ای #24408D و فیروزه‌ای #4EC3A9

   نکته‌ی دسترس‌پذیری: فیروزه‌ی لوگو روی زمینه‌ی روشن کنتراست
   حدود ۲:۱ دارد. پس --teal فقط برای زمینه‌ی سرمه‌ای، دکمه‌ها و
   گرافیک است و متن و لینک روی زمینه‌ی روشن از --teal-d می‌آید.
   ============================================================ */

:root{
  --navy:#24408D; --navy-d:#1B3272; --navy-l:#2F4FA6;
  --teal:#4EC3A9; --teal-d:#1E8570; --teal-dd:#176B5A;
  --ground:#FFFFFF; --soft:#F2F5F8; --soft-2:#E7ECF2;
  --ink:#16203F; --ink-2:#4A5673; --ink-3:#7C88A3;
  --rule:#DCE3EC;
  --r:10px; --r-s:6px;
  --sh:0 2px 4px rgba(22,32,63,.05), 0 12px 32px -12px rgba(22,32,63,.18);
  --sh-lg:0 4px 10px rgba(22,32,63,.07), 0 24px 56px -20px rgba(22,32,63,.30);
  --maxw:1200px;
  --avatar-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2Zm0 1.9c-4 0-8 2-8 4.5V21h16v-2.4c0-2.5-4-4.5-8-4.5Z'/%3E%3C/svg%3E");
}
/*
 * سایت عمومی همیشه روشن است.
 *
 * قبلاً از تنظیم سیستم بازدیدکننده پیروی می‌کرد، ولی طراحی در
 * حالت روشن تأیید شده و ثبات برند مهم‌تر از تطبیق با تم دستگاه
 * تشخیص داده شد.
 *
 * بلوک‌های تاریک عمداً حذف شده‌اند نه خاموش: CSSای که هیچ‌وقت
 * اجرا نمی‌شود با هر تغییر بعدی از قافله عقب می‌افتد، و روزی که
 * کسی روشنش کند نیمه‌کاره از کار درمی‌آید. اگر دوباره لازم شد،
 * در تاریخچه‌ی گیت هست.
 *
 * color-scheme هم اعلام می‌شود تا اجزای خود مرورگر — نوار
 * پیمایش، منوی select، تقویم — روی دستگاهِ تاریک روشن بمانند.
 * بدون این خط، متن روی زمینه‌ی تیره‌ی آن‌ها ناخوانا می‌شود.
 */
:root{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Narengi","Vazirmatn","Segoe UI",Tahoma,sans-serif;
  font-weight:400;font-size:15px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.4}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.in{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.skip{position:absolute;right:-9999px;top:0;background:var(--teal);color:#0F2340;
  padding:10px 18px;z-index:100;border-radius:0 0 var(--r-s) var(--r-s);font-weight:600}
.skip:focus{right:20px}

/* ---- نشانه‌ی محیط آزمایشی --------------------------------- */
.staging-flag{
  background:#8A4B12;color:#FFF3E4;text-align:center;
  font-size:12.5px;font-weight:600;padding:7px 16px;letter-spacing:.01em;
}

/* ---- نوار بالا -------------------------------------------- */
.topbar{background:var(--navy-d);color:#BFCBE4;font-size:12.5px}
.topbar .in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:38px;flex-wrap:wrap;overflow:hidden}
.topbar .tel{display:inline-flex;align-items:center;gap:7px;color:#fff}
.topbar .tel b{font-size:15px;font-weight:700;letter-spacing:.02em}

/* ---- منو ---------------------------------------------------- */
.nav{background:var(--ground);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:30}
.nav .in{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;flex-shrink:0}
.menu{display:flex;gap:2px;margin-inline-start:auto}
.menu a{padding:9px 13px;font-size:14px;font-weight:500;color:var(--ink-2);
  border-radius:var(--r-s)}
.menu a:hover{color:var(--navy);background:var(--soft)}

/* ---- دکمه‌ها ------------------------------------------------ */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;padding:11px 20px;
  border-radius:var(--r-s);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;transition:filter .16s,background .16s,border-color .16s}
.b-teal{background:var(--teal);color:#0F2340;border-color:var(--teal)}
.b-teal:hover{filter:brightness(1.07)}
.b-out{background:transparent;color:var(--navy);border-color:var(--rule)}
.b-out:hover{border-color:var(--navy);background:var(--soft)}
.b-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.b-ghost:hover{background:rgba(255,255,255,.2)}

/* ---- مسیر راهنما -------------------------------------------- */
.crumb{background:var(--soft);border-bottom:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-3)}
.crumb .in{padding-block:9px}
.crumb a:hover{color:var(--teal-d)}
.crumb i{opacity:.5;margin:0 7px;font-style:normal}

/* ---- سربرگ صفحه -------------------------------------------- */
.phead{position:relative;background:var(--navy);overflow:hidden}
.phead .pic{position:absolute;inset:0;background:var(--navy-l);
  background-size:cover;background-position:45% center}
.phead .veil{position:absolute;inset:0;background:linear-gradient(to left,
  var(--navy-d) 0%, rgba(27,50,114,.95) 46%, rgba(27,50,114,.72) 72%, rgba(27,50,114,.5) 100%)}
.phead .in{position:relative;padding-block:32px 34px}
.phead .kick{margin:0 0 13px;font-size:12px;font-weight:600;color:var(--teal);
  display:inline-block;background:rgba(78,195,169,.14);
  border:1px solid rgba(78,195,169,.34);padding:5px 13px;border-radius:100px}
.phead h1{font-size:clamp(27px,3.9vw,42px);font-weight:800;color:#fff;
  letter-spacing:-.015em;max-width:22ch;margin-bottom:12px;text-wrap:balance}
.phead .lede{margin:0;font-size:16px;font-weight:300;line-height:2;
  color:#D6DFF2;max-width:54ch}

/* ---- متن ---------------------------------------------------- */
.prose{max-width:66ch;padding-block:34px 46px}
.prose h2{font-size:26px;font-weight:800;margin:34px 0 12px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;font-weight:700;margin:22px 0 6px}
.prose p{margin:0 0 15px;font-size:15.5px;line-height:2.1;color:var(--ink-2);font-weight:300}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{color:var(--teal-dd);font-weight:500;text-decoration:underline;
  text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 18px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
.prose li{position:relative;padding-inline-start:28px;font-size:15px;
  line-height:1.95;color:var(--ink-2);font-weight:300}
.prose li::before{content:"";position:absolute;inset-inline-start:0;top:10px;
  width:16px;height:16px;border-radius:50%;background:rgba(78,195,169,.2)}
.prose img{border-radius:var(--r);box-shadow:var(--sh);margin-block:8px 18px}
.prose table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14px}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--rule);text-align:right}
.prose th{background:var(--soft);font-weight:600}
.prose blockquote{margin:0 0 18px;padding:14px 18px;background:var(--soft);
  border-inline-start:3px solid var(--teal);border-radius:var(--r-s)}
.prose blockquote p:last-child{margin:0}

/* ---- یادداشت صفحه‌ی بدون محتوا ------------------------------ */
.empty-note{background:var(--soft);border:1px dashed var(--rule);
  border-radius:var(--r);padding:20px 24px}
.empty-note p{margin:0 0 8px;font-size:14.5px;color:var(--ink-2)}
.kv{margin:14px 0 0;display:grid;gap:0}
.kv div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:8px 0;
  border-top:1px solid var(--rule)}
.kv dt{font-size:12.5px;color:var(--ink-3)}
.kv dd{margin:0;font-size:13.5px;color:var(--ink-2);word-break:break-word}

/* ---- ۴۰۴ ---------------------------------------------------- */
.nf{padding-block:70px 90px;text-align:center;max-width:52ch;margin-inline:auto}
.nf .code{margin:0 0 6px;font-size:64px;font-weight:800;color:var(--teal);
  line-height:1;letter-spacing:-.03em}
.nf h1{font-size:29px;font-weight:800;margin-bottom:10px}
.nf .lede{margin:0 0 26px;color:var(--ink-2);font-weight:300;font-size:16px}
.nf-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- فوتر --------------------------------------------------- */
.site-foot{background:var(--navy-d);color:#B7C4DE;margin-top:40px;
  padding-block:40px 0;font-size:13.5px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;
  padding-bottom:32px}
.site-foot h4{font-size:14.5px;color:#fff;margin-bottom:14px}
.site-foot ul{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px}
.site-foot a:hover{color:var(--teal)}
.site-foot p{margin:0;line-height:2;font-weight:300}
.fname{font-size:19px;font-weight:800;color:#fff;display:block}
.fen{font-size:8px;letter-spacing:.19em;color:#8595B8;direction:ltr;
  display:block;margin-bottom:13px}
.ftel{font-size:21px;font-weight:800;color:var(--teal);display:block;
  margin-bottom:5px;letter-spacing:.02em}
.fbot{border-top:1px solid rgba(255,255,255,.11);padding-block:16px;
  font-size:12.5px;color:#8595B8}

/* ---- واکنش‌گرا ---------------------------------------------- */
@media (max-width:1000px){
  .menu{display:none}
  /* چهار ستون فوتر در این عرض تنگ می‌شود */
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:760px){
  .in{padding:0 16px}
  .topbar .hours{display:none}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .phead .in{padding-block:24px 26px}
  .prose{padding-block:26px 34px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   کامپوننت‌های صفحات — پورت ماکاپ تأییدشده
   ============================================================ */

/* ---- بنر صفحه‌ی اصلی --------------------------------------- */
.hero{position:relative;background:var(--navy);overflow:hidden}
.hero .pic{position:absolute;inset:0;background-size:cover;background-position:38% center}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to left,
  var(--navy-d) 0%, var(--navy-d) 30%, rgba(27,50,114,.94) 44%,
  rgba(27,50,114,.72) 58%, rgba(27,50,114,.34) 76%, rgba(27,50,114,.12) 100%)}
.hero .in{position:relative;padding-block:56px 92px}
.hero .kick{display:inline-block;margin:0 0 20px;font-size:12.5px;font-weight:600;
  color:var(--teal);background:rgba(78,195,169,.14);
  border:1px solid rgba(78,195,169,.34);padding:6px 14px;border-radius:100px}
.hero h1{font-size:clamp(31px,4.6vw,50px);font-weight:800;color:#fff;
  line-height:1.32;max-width:16ch;margin-bottom:16px;letter-spacing:-.015em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .lede{margin:0 0 26px;font-size:16.5px;font-weight:300;line-height:2.05;
  color:#D6DFF2;max-width:46ch}
.hero-acts{display:flex;gap:11px;flex-wrap:wrap}
.hero-acts .b{padding:14px 26px;font-size:15px}

/* پلاک‌های آمار روی سمتِ عکس می‌نشینند، نه روی متن.
   در راست‌چین متن سمت راست است، پس inline-end یعنی چپ — همان
   جایی که عکس است. با inline-start روی متن می‌افتادند. */
.chips{position:absolute;inset-inline-end:24px;bottom:116px;z-index:2;
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.chips li{background:rgba(255,255,255,.96);border-radius:var(--r);
  padding:11px 17px;box-shadow:var(--sh);min-width:172px}
.chips b{display:block;font-size:19px;font-weight:800;color:#24408D;line-height:1.25}
.chips span{display:block;font-size:11.5px;color:#5A6580;line-height:1.5}

.tiles{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;max-width:560px;margin-top:32px}
.tile{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);padding:16px 15px;color:#fff;
  transition:background .18s,border-color .18s}
.tile:hover{background:rgba(255,255,255,.19);border-color:rgba(78,195,169,.6)}
.tile b{display:block;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:3px}
.tile span{display:block;font-size:11.5px;color:#B9C6E0;line-height:1.55}

/* ---- نوار شناور اقدام سریع --------------------------------- */
.fbar{position:relative;z-index:5;margin-top:-44px;margin-bottom:54px}
.fbar .box{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh-lg);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.fbar a{display:flex;align-items:center;padding:19px 22px;
  border-inline-start:1px solid var(--rule);transition:background .18s}
.fbar a:first-child{border-inline-start:none}
.fbar a:hover{background:var(--soft)}
.fbar b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4}
.fbar a > span > span{display:block;font-size:12px;color:var(--ink-3);line-height:1.55}

/* ---- بخش‌ها ------------------------------------------------- */
.sec{padding-block:34px 44px}
.sec.alt{background:var(--soft)}
.shead{margin-bottom:24px}
.shead .lbl{display:block;font-size:12.5px;font-weight:700;color:var(--teal-dd);margin-bottom:7px}
.shead h2{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:-.015em;
  margin-bottom:8px;text-wrap:balance}
.shead h2 a:hover{color:var(--teal-dd)}
.shead p{margin:0;font-size:15px;color:var(--ink-2);max-width:64ch;
  line-height:1.95;font-weight:300}
.sec-more{margin:24px 0 0;text-align:center}

/* ---- کارت‌ها ------------------------------------------------ */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:18px}
.card{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--teal)}
.card .ph{display:block;height:140px;background-size:cover;background-position:center;
  background-color:var(--soft-2)}
.card .ph-empty{background:linear-gradient(135deg,var(--soft-2),var(--soft))}
.card .bd{display:flex;flex-direction:column;gap:7px;flex:1;padding:16px 18px 18px}
.card h3{font-size:17.5px;font-weight:700;color:var(--ink);line-height:1.5}
.card:hover h3{color:var(--navy)}
.card p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.8;font-weight:300;flex:1}
.card .ft{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-top:11px;border-top:1px solid var(--rule)}
.card .cnt{font-size:11.5px;color:var(--ink-3);font-weight:500}
.card .go{font-size:12.5px;color:var(--teal-dd);font-weight:600;white-space:nowrap}

/* ---- آمار --------------------------------------------------- */
.stats{background:var(--navy);border-radius:var(--r);padding:34px 30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:26px}
.stat{text-align:center}
.stat b{display:block;font-size:38px;font-weight:800;color:var(--teal);
  line-height:1.15;letter-spacing:-.02em}
.stat span{display:block;margin-top:3px;font-size:13px;color:#C3CEE6;font-weight:300}

/* ---- بخش دو ستونی رویکرد ----------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.split .art{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  aspect-ratio:4/3;background-size:cover;background-position:42% center;
  background-color:var(--soft-2)}
.feat{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.feat b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5}
.feat p{margin:2px 0 0;font-size:13px;color:var(--ink-2);line-height:1.85;font-weight:300}

/* ---- پزشکان ------------------------------------------------- */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:18px}
.doc{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:block;transition:box-shadow .2s,transform .2s,border-color .2s}
.doc:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--teal)}
.doc .ph{display:block;aspect-ratio:1/1;background-size:cover;
  background-position:center top;background-color:var(--soft-2)}
.doc .ph-empty{background:linear-gradient(135deg,var(--soft-2),var(--soft))}
/* عکس نرسیده: باکس خالی با نشانه‌ی سایه‌ی آدم، تا معلوم باشد جای
   عکس است نه یک انتخاب طراحی. با رسیدن عکس خودبه‌خود جایگزین می‌شود.
   رنگ نشانه از background-color می‌آید و با mask برش می‌خورد، پس روی
   کارت روشن و سربرگ سرمه‌ای هر کدام رنگ خودش را می‌گیرد. */
.doc .ph-empty,.dhero .por-empty{position:relative}
.doc .ph-empty::after,.dhero .por-empty::after{content:"";position:absolute;inset:0;
  background-color:var(--ink-3);
  -webkit-mask:no-repeat center/34% var(--avatar-glyph);
          mask:no-repeat center/34% var(--avatar-glyph);
  opacity:.45}
.dhero .por-empty::after{background-color:#fff;opacity:.4}
.doc .bd{display:block;padding:14px 16px 16px}
.doc h3{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:3px}
.doc .sp{display:block;font-size:12.5px;color:var(--teal-dd);font-weight:600;line-height:1.6}
.doc .sub{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3);line-height:1.65}
.doc .no{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--rule);
  font-size:11px;color:var(--ink-3)}

/* ---- مقالات ------------------------------------------------- */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:18px}
.art-c{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.art-c:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--teal)}
.art-c .ph{display:block;height:148px;background-size:cover;background-position:center;
  background-color:var(--soft-2)}
.art-c .ph-empty{background:linear-gradient(135deg,var(--soft-2),var(--soft))}
.art-c .bd{display:flex;flex-direction:column;gap:8px;flex:1;padding:15px 18px 18px}
.art-c h3{font-size:16.5px;font-weight:700;line-height:1.55;color:var(--ink);flex:1}
.art-c:hover h3{color:var(--navy)}
.art-c .dt{font-size:11.5px;color:var(--ink-3);padding-top:10px;border-top:1px solid var(--rule)}

/* ---- چیدمان دو ستونی صفحات درونی ---------------------------- */
.lay{display:grid;grid-template-columns:1fr 306px;gap:36px;
  padding-block:38px 8px;align-items:start}
.lay .prose{padding-block:0;max-width:none}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
.sbox{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--sh)}
.sbox.hi{background:var(--navy);border-color:var(--navy);color:#fff}
.sbox h4{font-size:15px;font-weight:700;margin-bottom:12px}
.sbox p{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.85;font-weight:300}
.sbox.hi p{color:#C3CEE6}
.sbox .b-full{width:100%}
.sbox-tel{display:block;margin-top:10px;text-align:center;font-size:20px;
  font-weight:800;color:var(--teal);letter-spacing:.02em}
.sbox-hours,.sbox-addr{margin:0}
.sbox-addr{margin-top:8px;color:var(--ink-3);font-size:12.5px}
.slist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.slist li{border-top:1px solid var(--rule)}
.slist li:first-child{border-top:none}
.slist a{display:block;padding:9px 0}
.slist b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5}
.slist span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.slist a:hover b{color:var(--teal-dd)}

/* ---- سربرگ صفحات درونی ------------------------------------- */
.phead-meta{display:flex;gap:28px;flex-wrap:wrap;margin:20px 0 0;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.phead-meta dt{font-size:11px;color:#9FB0D2;margin-bottom:1px}
.phead-meta dd{margin:0;font-size:14.5px;color:#fff;font-weight:600}
.phead.light{background:var(--soft)}
.phead.light .pic,.phead.light .veil{display:none}
.phead.light h1{color:var(--ink)}
.phead.light .lede{color:var(--ink-2)}
.phead.light .kick{color:var(--teal-dd)}
.phead.light .phead-meta{border-top-color:var(--rule)}
.phead.light .phead-meta dt{color:var(--ink-3)}
.phead.light .phead-meta dd{color:var(--ink)}

/* ---- سربرگ پزشک -------------------------------------------- */
.dhero{display:grid;grid-template-columns:242px 1fr;gap:34px;align-items:center}
.dhero .por{width:242px;aspect-ratio:4/5;border-radius:var(--r);
  background-size:cover;background-position:center top;background-color:var(--soft-2);
  border:3px solid rgba(255,255,255,.22);box-shadow:var(--sh-lg)}
.dhero .por-empty{background:linear-gradient(135deg,#33447A,#24408D)}
.tagrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.tag{font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:6px 14px}
.tag.teal{background:rgba(78,195,169,.2);border-color:rgba(78,195,169,.5);color:var(--teal)}
.dhero-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---- جدول سوابق -------------------------------------------- */
.rec{margin:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.rec div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 20px;
  border-top:1px solid var(--rule);align-items:baseline}
.rec div:first-child{border-top:none}
.rec div:nth-child(odd){background:var(--soft)}
.rec dt{font-size:12.5px;color:var(--ink-3);font-weight:500}
.rec dd{margin:0;font-size:14.5px;color:var(--ink-2);font-weight:300;line-height:1.8}
.rec dd b{color:var(--ink);font-weight:700}

/* ---- سؤالات متداول ----------------------------------------- */
.faq{display:flex;flex-direction:column;gap:10px;max-width:68ch}
.faq details{background:var(--ground);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;transition:box-shadow .18s}
.faq details[open]{box-shadow:var(--sh)}
.faq summary{list-style:none;cursor:pointer;position:relative;line-height:1.6;
  padding:15px 20px 15px 46px;font-size:15.5px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:18px;top:19px;
  width:9px;height:9px;border-inline-start:2px solid var(--teal-dd);
  border-bottom:2px solid var(--teal-dd);transform:rotate(-45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(135deg);top:22px}
.faq summary:hover{color:var(--navy)}
.faq .ans{padding:0 20px 17px;font-size:14.5px;line-height:2;
  color:var(--ink-2);font-weight:300}
.faq .ans p{margin:0 0 10px}
.faq .ans p:last-child{margin:0}

/* ---- امضای نویسنده ----------------------------------------- */
.byline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.byline .av{width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background-size:cover;background-position:center top;background-color:var(--soft-2)}
.byline .av-empty{background:linear-gradient(135deg,var(--soft-2),var(--soft))}
.byline b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5}
.byline span span,.byline .when span{display:block;font-size:12.5px;
  color:var(--ink-3);line-height:1.6}
.author{display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:start;
  margin-top:34px;padding:20px 22px;background:var(--soft);
  border:1px solid var(--rule);border-radius:var(--r)}
.author .av{width:86px;aspect-ratio:4/5;border-radius:var(--r-s);
  background-size:cover;background-position:center top;background-color:var(--soft-2)}
.author .av-empty{background:linear-gradient(135deg,var(--soft-2),var(--rule))}
.author h4{font-size:17px;font-weight:700;margin-bottom:2px}
.author .sp{margin:0 0 8px;font-size:12.5px;color:var(--teal-dd);font-weight:600}
.author p{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);line-height:1.9;font-weight:300}
.author .more{font-size:13px;color:var(--navy);font-weight:600}
.author .more:hover{color:var(--teal-dd)}

/* ---- تصویر شاخص مقاله -------------------------------------- */
.fig{margin:0 0 22px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.fig .ph{display:block;aspect-ratio:16/8;background-size:cover;
  background-position:center;background-color:var(--soft-2)}

/* ---- فهرست مشخصات ----------------------------------------- */
.facts{margin:0;display:flex;flex-direction:column}
.facts div{display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--rule);font-size:13px}
.facts div:first-child{border-top:none}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;color:var(--ink);font-weight:600;text-align:left}

/* ---- نوار فراخوان ------------------------------------------ */
.band{background:linear-gradient(105deg,var(--navy-d) 0%,var(--navy) 55%,var(--navy-l) 100%);
  border-radius:var(--r);padding:36px 34px;display:flex;align-items:center;
  justify-content:space-between;gap:26px;flex-wrap:wrap}
.band h2{font-size:clamp(21px,2.6vw,28px);font-weight:800;color:#fff;
  margin-bottom:6px;letter-spacing:-.015em}
.band p{margin:0;font-size:14.5px;color:#C3CEE6;font-weight:300;line-height:1.9}
.band .acts{display:flex;gap:11px;flex-wrap:wrap}
.band .b{padding:14px 26px;font-size:15px}

/* ---- واکنش‌گرا --------------------------------------------- */
@media (max-width:1150px){
  .lay{grid-template-columns:1fr;gap:26px}
  .side{position:static}
  .split{grid-template-columns:1fr;gap:28px}
  .chips{display:none}
  .dhero{grid-template-columns:1fr;gap:22px}
  .dhero .por{width:190px}
}
@media (max-width:760px){
  .hero .in{padding-block:36px 60px}
  .tiles{grid-template-columns:1fr;max-width:none}
  .fbar{margin-top:-22px;margin-bottom:36px}
  .fbar .box{grid-template-columns:1fr}
  .fbar a{border-inline-start:none;border-top:1px solid var(--rule)}
  .fbar a:first-child{border-top:none}
  .band{padding:26px 20px}
  .rec div{grid-template-columns:1fr;gap:2px}
  .author{grid-template-columns:1fr}
  .author .av{width:76px}
  .stats{padding:26px 20px;gap:20px}
}

/* ---- لوگو ---------------------------------------------------- */
.brand img{display:block;height:46px;width:auto}
.brand span{display:none}          /* لاک‌آپ متنی دیگر لازم نیست */
.fmark{display:block;height:46px;width:auto;margin-bottom:10px;border-radius:6px}
@media (max-width:760px){ .brand img{height:38px} }
.b-stack{margin-bottom:8px}
.b-stack:last-of-type{margin-bottom:0}

/* ---- عکس پروفایل چرخشی -------------------------------------
   وقتی یک پزشک یا بخش چند عکس پروفایل دارد، عکس‌ها روی هم چیده
   می‌شوند و نوبتی محو و ظاهر می‌شوند. کل کار با CSS انجام می‌شود
   چون انیمیشن محض است و مرورگر بهتر از جاوااسکریپت اجرایش می‌کند.

   هر عکس با تأخیر منفیِ متناسب با جایگاهش شروع می‌شود، پس در هر
   لحظه یکی دیده می‌شود. اگر کاربر «کاهش حرکت» را روشن کرده باشد،
   چرخش متوقف می‌شود و فقط عکس اول می‌ماند.
--------------------------------------------------------------- */
.rot{position:relative;overflow:hidden;background-color:var(--soft-2)}
.rot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;opacity:0;
  animation-duration:var(--cycle,15s);animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-delay:calc(var(--i) * var(--step,5s) * -1)}

.rot[data-n="2"]{--cycle:10s;--step:5s}
.rot[data-n="3"]{--cycle:15s;--step:5s}
.rot[data-n="4"]{--cycle:20s;--step:5s}
.rot[data-n="5"]{--cycle:25s;--step:5s}
.rot[data-n="6"]{--cycle:30s;--step:5s}

.rot[data-n="2"] img{animation-name:rot2}
.rot[data-n="3"] img{animation-name:rot3}
.rot[data-n="4"] img{animation-name:rot4}
.rot[data-n="5"] img{animation-name:rot5}
.rot[data-n="6"] img{animation-name:rot6}

@keyframes rot2{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes rot3{0%,30%{opacity:1}33.33%,96%{opacity:0}100%{opacity:1}}
@keyframes rot4{0%,22%{opacity:1}25%,97%{opacity:0}100%{opacity:1}}
@keyframes rot5{0%,17%{opacity:1}20%,97.6%{opacity:0}100%{opacity:1}}
@keyframes rot6{0%,14%{opacity:1}16.66%,98%{opacity:0}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .rot img{animation:none;opacity:0}
  .rot img:first-child{opacity:1}
}

/* ---- گالری --------------------------------------------------
   شبکه‌ی masonry نمی‌گذاریم: عکس‌های کلینیک نسبت‌های متفاوتی
   دارند و ستون‌های نامرتب بیشتر شلوغ به نظر می‌رسند تا زنده.
   نسبت ثابت ۴:۳ با object-fit، آرام‌تر و قابل پیش‌بینی‌تر است.
--------------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}

.gitem{margin:0;background:var(--ground);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.gitem > a{display:block;line-height:0}
.gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--soft-2);transition:transform .35s}
.gitem > a:hover img{transform:scale(1.03)}
.gitem video{width:100%;aspect-ratio:16/9;display:block;background:#000}

.gitem figcaption{display:block;padding:11px 14px 13px;font-size:13px;line-height:1.7}
.gitem figcaption b{display:block;font-weight:700;color:var(--ink)}
.gitem figcaption span{display:block;color:var(--ink-2);margin-top:2px}
.gitem figcaption time{display:block;color:var(--ink-3);font-size:12px;margin-top:5px}

/* دکمه‌ی پخش ویدیوی آپارات و یوتیوب — تا کلیک نشود iframe نمی‌آید */
.gitem.vid{position:relative}
.gitem iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.vplay{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:0;padding:0;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-d),var(--navy));
  font:inherit;color:#fff;
}
.vplay .vicon{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.7);
  transition:background .2s,transform .2s;
}
.vplay .vicon::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
html[dir="rtl"] .vplay .vicon::after{transform:translate(50%,-50%) scaleX(-1)}
.vplay:hover .vicon{background:rgba(78,195,169,.45);transform:translate(50%,-50%) scale(1.08)}
.vplay .vtxt{
  position:absolute;inset-inline:0;inset-block-end:0;
  padding:26px 14px 12px;font-size:13.5px;font-weight:600;text-align:start;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
}

/* نوار فیلتر گالری */
.galbar{
  display:flex;flex-direction:column;gap:11px;
  background:var(--soft);border:1px solid var(--rule);
  border-radius:var(--r);padding:15px 18px;margin:26px 0 18px;
}
.grow{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.glbl{font-size:12.5px;font-weight:700;color:var(--ink-3);min-width:52px}
.gchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:100px;
  border:1px solid var(--rule);background:var(--ground);
  font-size:13px;font-weight:600;color:var(--ink-2);
}
.gchip:hover{border-color:var(--teal);color:var(--teal-dd)}
.gchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gchip .gn{font-size:11.5px;font-weight:500;opacity:.7}
.gclear{font-size:12.5px;color:var(--ink-3);align-self:flex-start}
.gnote{font-size:13.5px;color:var(--ink-2);margin:0 0 18px}

/* قاب پرتره باید بلوک باشد چون profileBox یک span برمی‌گرداند */
.dhero .por{display:block}