/* ═══════════════════════════════════════════════════════════════════
   پرشین میزبان — استایل صفحه‌ی «تماس با ما»
   /assets/css/contact.css
   ───────────────────────────────────────────────────────────────────
     ۰۰  فونت‌ها
     ۰۱  توکن‌های مشترک
     ۰۲  هیرو و راه‌های ارتباطی    .pct-
     ۰۳  نظرات کاربران             .pcm-
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ ۰۰ · فونت‌ها ═══════════════════════════════════════════════════ */
@font-face{font-family:'PMNum';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/fonts/IRANSansXFaNum-Regular.woff2') format('woff2');
  unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C}
@font-face{font-family:'PMNum';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/IRANSansXFaNum-Bold.woff2') format('woff2');
  unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C}
@font-face{font-family:'PMMono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  unicode-range:U+0020-002B,U+002D,U+002F-007E}
@font-face{font-family:'PMMono';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  unicode-range:U+0020-002B,U+002D,U+002F-007E}
@font-face{font-family:'Morabba';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Morabba-Bold.woff2') format('woff2')}
@font-face{font-family:'Morabba';font-weight:900;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Morabba-Black.woff2') format('woff2')}


/* ═══ ۰۱ · توکن‌های مشترک ═══════════════════════════════════════════
   🔴 توکن‌ها روی خودِ سکشن‌ها تعریف می‌شوند، نه فقط روی body.
   اگر body_class عوض شود، var(--pad) تعریف‌نشده می‌ماند و مرورگر
   کل اعلان width را دور می‌اندازد — نتیجه‌اش تمام‌عرض شدن سکشن‌هاست.
   ═══════════════════════════════════════════════════════════════════ */
.pct,.pcm,
.page-contact{
  --mono:'PMNum','PMMono',ui-monospace,'SFMono-Regular','Roboto Mono',monospace;
  --display:'Morabba','IRANSansX','IRANSans',system-ui,sans-serif;
  --pad:clamp(18px,4vw,40px);
}

.pct *,.pct *::before,.pct *::after,
.pcm *,.pcm *::before,.pcm *::after{box-sizing:border-box}
.pct img,.pcm img{max-width:100%;height:auto;display:block}

.pcm-num,.pct-num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.pcm-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}



/* ═══ ۰۲ · هیرو و راه‌های ارتباطی  .pct- ════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   ۰. پایه
   ═══════════════════════════════════════════════════════════════════ */
.pct{
  --ink:#04070E; --ink-2:#07131C;
  --paper:#FFFFFF; --paper-2:#F6FAFC; --paper-3:#EAF2F6;
  --line:#E2EDF2; --line-2:#C6D9E2;
  --tx:#0C1620; --tx-2:#4E606C; --tx-3:#8698A4;
  --br:#0E7490; --br-2:#22D3EE; --br-3:#67E8F9; --br-4:#A5F3FC;
  --br-s:rgba(34,211,238,.12);
  position:relative;overflow:hidden;isolation:isolate;color:var(--tx);
  background:linear-gradient(180deg,#FCFDFE 0%,#F1F6F9 100%);
  display:block;
}
.pct-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2}
.pct :is(a,button):focus-visible{outline:2px solid var(--br-2);outline-offset:3px;border-radius:10px}

.pct [data-c=cy]  {--c:#0E7490;--c2:#22D3EE;--cs:rgba(34,211,238,.13)}
.pct [data-c=gold]{--c:#C2760A;--c2:#F5A524;--cs:rgba(245,165,36,.14)}
.pct [data-c=em]  {--c:#0F766E;--c2:#34D399;--cs:rgba(52,211,153,.13)}
.pct [data-c=nil] {--c:#312E81;--c2:#6366F1;--cs:rgba(99,102,241,.12)}

/* ═══════════════════════════════════════════════════════════════════
   ۱. هیرو
   ═══════════════════════════════════════════════════════════════════ */
.pct-hero{position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:#EEF6FA;
  padding-block:clamp(40px,5.6vw,72px) clamp(56px,7vw,96px)}
.pct-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(56% 64% at 50% 26%,rgba(34,211,238,.20),transparent 68%),
             linear-gradient(180deg,var(--ink-2),var(--ink))}
.pct-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.32;
  background-image:linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 26%,#000,transparent 74%);
          mask-image:radial-gradient(62% 58% at 50% 26%,#000,transparent 74%)}
.pct-hero > .pct-wrap{position:relative;z-index:3}

.pct-crumb{margin-bottom:20px}
.pct-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;font-size:.79rem;color:#7A929E}
.pct-crumb li{display:flex;align-items:center;gap:8px}
.pct-crumb li+li::before{content:"›";color:#4E6270}
.pct-crumb a{color:var(--br-3);text-decoration:none}
.pct-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pct-crumb [aria-current]{color:#DCEDF3}

.pct-hero-in{max-width:60ch}
.pct-flag{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;
  font-size:.75rem;font-weight:700;color:var(--br-3);
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.26);margin:0 0 16px}
.pct-flag i{width:7px;height:7px;border-radius:50%;background:var(--br-2);flex:none;
  box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:pctPulse 2.6s infinite}
@keyframes pctPulse{70%{box-shadow:0 0 0 9px rgba(34,211,238,0)}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}

.pct-hero h1{font-family:var(--display);font-size:clamp(1.75rem,4.2vw,2.8rem);
  font-weight:900;line-height:1.3;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.pct-hero h1 b{font-weight:inherit;color:var(--br-2)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .pct-hero h1 b{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(100deg,#A5F3FC,#22D3EE 48%,#0E7490)}}
.pct-hero p{font-size:clamp(.94rem,1.5vw,1.05rem);line-height:2.05;color:#A3BCC7;margin:0}
.pct-hero p strong{color:#fff;font-weight:700}

/* ═══════════════════════════════════════════════════════════════════
   ۱‑ب · ⭐ تصویر هیرو — نشان «در دسترس بودن»
   ───────────────────────────────────────────────────────────────────
   عکس در قاب طاقی، با حلقه‌های سیگنال که از پشتش منتشر می‌شوند —
   استعاره‌ی مستقیم «در دسترس بودن»، که پیام اصلی صفحه‌ی تماس است.
   ═══════════════════════════════════════════════════════════════════ */
.pct-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(16px,3vw,44px);align-items:center}

.pct-fig{position:relative;margin:0;min-width:0;display:grid;place-items:center;
  padding-block:clamp(8px,2vw,20px) clamp(16px,2.6vw,30px)}

/* ── حلقه‌های سیگنال ── */
.pct-waves{position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;place-items:center}
.pct-waves i{position:absolute;width:min(300px,72%);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(34,211,238,.42);
  animation:pctWave 4.2s cubic-bezier(.25,.6,.35,1) infinite}
.pct-waves i:nth-child(2){animation-delay:1.4s}
.pct-waves i:nth-child(3){animation-delay:2.8s}
@keyframes pctWave{
  0%  {transform:scale(.62);opacity:0}
  18% {opacity:.55}
  100%{transform:scale(1.65);opacity:0}}

/* هاله‌ی ثابت پشت پرتره */
.pct-fig::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(280px,68%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.26),rgba(14,116,144,.08) 48%,transparent 72%);
  filter:blur(30px);animation:pctAura 8s ease-in-out infinite}
@keyframes pctAura{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* ── قاب طاقی ── */
/* ⭐ ظرف بدون overflow — تا نشان بریده نشود */
.pct-frame{position:relative;z-index:2;width:min(100%,282px);
  padding-block-end:28px}

.pct-portrait{position:relative;display:block;
  border-radius:50% 50% 22px 22px / 42% 42% 22px 22px;
  overflow:hidden;isolation:isolate;
  border:1px solid rgba(103,232,249,.3);
  background:linear-gradient(180deg,#0D2430,#061019);
  box-shadow:0 26px 56px -26px rgba(0,0,0,.85),
             inset 0 1px 0 rgba(255,255,255,.1)}

/* پایه‌ی نوری زیر قاب */
.pct-frame::after{content:"";position:absolute;z-index:0;pointer-events:none;
  inset-block-end:16px;inset-inline-start:50%;translate:-50% 0;
  width:74%;height:22px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(34,211,238,.34),transparent 70%);
  filter:blur(10px)}
.pct-portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 14%;
  filter:contrast(1.04) saturate(.94)}
/* دوتون ملایم برای هماهنگی با پالت */
.pct-portrait::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(165deg,rgba(34,211,238,.18),transparent 60%);
  mix-blend-mode:color;opacity:.6}
/* محو شدن لبه‌ی پایین */
.pct-portrait::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,rgba(4,7,14,.55) 84%,rgba(4,7,14,.95) 100%)}

/* ── نشان آنلاین ── */
.pct-live{position:absolute;z-index:8;inset-block-end:0;inset-inline-start:50%;
  translate:-50% 0;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:99px;white-space:nowrap;
  font-size:.78rem;font-weight:800;color:#04231C;
  background:linear-gradient(135deg,#6EE7B7,#10B981);
  box-shadow:0 12px 26px -12px rgba(16,185,129,.9)}
.pct-live i{width:7px;height:7px;border-radius:50%;background:#04231C;flex:none;
  animation:pctBlink 1.8s ease-in-out infinite}
@keyframes pctBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── کارت شناور ── */
.pct-fchip{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;
  max-width:min(250px,86%);padding:11px 15px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(6,16,25,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
  animation:pctFloat 6.5s ease-in-out infinite}
@keyframes pctFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.pct-fchip b{display:block;font-size:.83rem;font-weight:800;color:#fff;line-height:1.5}
.pct-fchip small{display:block;font-size:.71rem;color:#7A929E;margin-top:2px}
.pct-fchip-ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;
  place-items:center;color:#03212A;
  background:linear-gradient(140deg,var(--br-3),var(--br-2))}
.pct-fchip--a{inset-block-start:4%;inset-inline-start:-13%}
.pct-fchip--b{inset-block-start:44%;inset-inline-end:-15%;animation-delay:1.9s}
.pct-fchip--b .pct-fchip-ic{color:#2A1B00;
  background:linear-gradient(140deg,#FFD27A,#F5A524)}

@media (max-width:1040px){
  .pct-hero-grid{grid-template-columns:1fr;gap:8px}
  .pct-fig{order:-1;padding-block:0 6px}
  .pct-frame{width:min(58%,210px)}
  .pct-waves i{width:min(230px,58%)}
  .pct-fig::before{width:min(210px,54%)}
  .pct-fchip--a{inset-block-start:2%;inset-inline-start:-2%}
  .pct-fchip--b{inset-block-start:46%;inset-inline-end:-2%}
}
@media (max-width:600px){
  .pct-frame{width:min(64%,182px)}
  .pct-fchip--b{display:none}
  .pct-fchip--a{inset-block-start:auto;inset-block-end:-14px;
    inset-inline-start:50%;translate:-50% 0;animation:none}
  .pct-live{font-size:.72rem;padding:7px 13px}
}
@media (prefers-reduced-motion:reduce){
  .pct-waves i{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   ۲. ⭐ راهنمای انتخاب کانال
   ═══════════════════════════════════════════════════════════════════ */
.pct-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,16px);
  margin-block:clamp(-30px,-3vw,-22px) clamp(30px,4vw,44px);position:relative;z-index:5}

.pct-way{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;padding:clamp(18px,2.2vw,22px);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(12,22,32,.05),0 18px 34px -28px rgba(12,22,32,.3);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
.pct-way:hover{transform:translateY(-5px);border-color:var(--c2);
  box-shadow:0 2px 4px rgba(12,22,32,.05),0 28px 52px -26px var(--c)}
.pct-way::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-46%;inset-inline-end:-24%;width:66%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--cs),transparent 68%)}
.pct-way > *{position:relative;z-index:1}

/* کارت پیشنهادی */
.pct-way--best{border-color:var(--c2);
  box-shadow:0 0 0 1px var(--cs),0 24px 46px -26px var(--c)}
.pct-best{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:clamp(16px,2vw,20px);
  padding:5px 12px 6px;border-radius:0 0 9px 9px;font-size:.66rem;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--c2),var(--c))}

.pct-way-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:14px;color:#fff;background:linear-gradient(140deg,var(--c2),var(--c));
  box-shadow:0 10px 22px -12px var(--c);
  transition:transform .3s cubic-bezier(.22,1.5,.5,1)}
.pct-way:hover .pct-way-ic{transform:scale(1.08) rotate(-6deg)}

.pct-way h2{font-family:var(--display);font-size:1.06rem;font-weight:900;color:var(--tx);
  margin:0 0 9px;line-height:1.5}

/* ⭐ برای چه کاری */
.pct-for{display:block;font-size:.75rem;font-weight:700;color:var(--c);
  padding:6px 12px;border-radius:99px;background:var(--cs);
  margin-bottom:11px;line-height:1.7}

.pct-way p{margin:0 0 14px;font-size:.83rem;line-height:1.95;color:var(--tx-2);flex:1}
.pct-way p b{color:var(--tx);font-weight:800}

.pct-meta{display:flex;align-items:center;gap:7px;font-size:.73rem;color:var(--tx-3);
  margin-bottom:13px}
.pct-meta svg{flex:none;opacity:.7}

.pct-go{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.84rem;font-weight:800;padding:12px 16px;border-radius:11px;
  text-decoration:none;color:var(--c);background:var(--cs);transition:.2s}
.pct-go:hover{color:#fff;background:linear-gradient(135deg,var(--c2),var(--c));
  box-shadow:0 10px 22px -11px var(--c)}
.pct-go svg{flex:none}

/* ═══════════════════════════════════════════════════════════════════
   ۳. نقشه و آدرس
   ═══════════════════════════════════════════════════════════════════ */
.pct-place{display:grid;grid-template-columns:1fr .82fr;gap:clamp(14px,2vw,20px);
  padding-block-end:clamp(44px,6vw,76px)}

/* ⭐ نمای نقشه — با کلیک بارگذاری می‌شود */
.pct-map{position:relative;overflow:hidden;border-radius:22px;min-height:340px;
  background:var(--paper-3);border:1px solid var(--line);box-shadow:0 1px 2px rgba(12,22,32,.05),0 18px 34px -28px rgba(12,22,32,.3)}
.pct-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

.pct-map-face{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;
  padding:24px;cursor:pointer;border:0;width:100%;font:inherit;
  background:
    radial-gradient(70% 70% at 50% 42%,rgba(34,211,238,.12),transparent 70%),
    repeating-linear-gradient(0deg,var(--paper-3) 0 26px,var(--paper-2) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 26px,var(--line) 26px 27px);
  transition:background .3s}
.pct-map-face:hover{background:
    radial-gradient(70% 70% at 50% 42%,rgba(34,211,238,.2),transparent 70%),
    repeating-linear-gradient(0deg,var(--paper-3) 0 26px,var(--paper-2) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 26px,var(--line) 26px 27px)}

.pct-pin{position:relative;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--br-2),var(--br));
  box-shadow:0 14px 30px -12px var(--br)}
.pct-pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid var(--br-2);opacity:.5;animation:pctPing 2.4s ease-out infinite}
@keyframes pctPing{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}}

.pct-map-face b{font-family:var(--display);font-size:1.02rem;font-weight:900;color:var(--tx)}
.pct-map-face small{display:block;font-size:.79rem;color:var(--tx-2);
  margin-top:6px;line-height:1.85;max-width:34ch}
.pct-map-btn{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;
  font-weight:800;padding:12px 22px;border-radius:11px;color:#03212A;
  background:linear-gradient(135deg,var(--br-4),var(--br-2) 48%,var(--br));
  box-shadow:0 12px 26px -12px var(--br)}
.pct-map-btn svg{flex:none}

/* اطلاعات */
.pct-info{border-radius:22px;padding:clamp(20px,2.6vw,28px);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(12,22,32,.05),0 18px 34px -28px rgba(12,22,32,.3)}
.pct-info h2{font-family:var(--display);font-size:1.14rem;font-weight:900;
  color:var(--tx);margin:0 0 18px;line-height:1.5}

.pct-rows{list-style:none;margin:0;padding:0}
.pct-rows li{display:flex;gap:13px;align-items:flex-start;padding-block:14px;
  border-block-start:1px solid var(--line)}
.pct-rows li:first-child{border-block-start:0;padding-block-start:0}
.pct-row-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;
  place-items:center;color:var(--br);background:var(--br-s)}
.pct-rows small{display:block;font-size:.74rem;font-weight:600;color:var(--tx-3);
  margin-bottom:4px}
.pct-rows b,.pct-rows a{display:block;font-size:.88rem;font-weight:800;color:var(--tx);
  line-height:1.75;text-decoration:none}
.pct-rows a:hover{color:var(--br)}
.pct-rows p{margin:0;font-size:.84rem;line-height:1.85;color:var(--tx-2)}

/* شبکه‌های اجتماعی */
.pct-social{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;
  padding-block-start:18px;border-block-start:1px dashed var(--line-2)}
.pct-social a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
  border-radius:11px;font-size:.83rem;font-weight:800;text-decoration:none;
  color:var(--tx-2);background:var(--paper-2);border:1px solid var(--line);transition:.2s}
.pct-social a:hover{color:var(--br);border-color:var(--br-2);background:var(--br-s)}
.pct-social svg{flex:none}

/* هویت شرکت */
.pct-legal{display:flex;gap:11px;align-items:flex-start;margin:18px 0 0;
  padding-block-start:16px;border-block-start:1px dashed var(--line-2);
  font-size:.79rem;line-height:1.95;color:var(--tx-3)}
.pct-legal svg{flex:none;margin-top:4px}
.pct-legal b{color:var(--tx-2);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════
   ۴. واکنش‌گرایی
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1040px){
  .pct-ways{grid-template-columns:repeat(2,1fr)}
  .pct-place{grid-template-columns:1fr}
  .pct-map{min-height:300px}
  .pct-map iframe{min-height:300px}
}
@media (max-width:560px){
  .pct-ways{grid-template-columns:1fr;margin-block-start:-20px}
  .pct-map{min-height:260px}
  .pct-map iframe{min-height:260px}
  .pct-social a{flex:1 1 100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════
   ۵. کاهش حرکت
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pct *,.pct *::before,.pct *::after{
    animation:none !important;transition-duration:.001ms !important}
}


/* ═══ ۰۳ · نظرات کاربران  .pcm- ═════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   فونت‌ها — اگر بلوک دیگری در همین صفحه هست، این را حذف کنید
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   ۰. پایه
   ═══════════════════════════════════════════════════════════════════ */
.pcm{
  --paper:#FFFFFF; --paper-2:#F6FAFC; --paper-3:#EAF2F6;
  --line:#E2EDF2; --line-2:#C6D9E2;
  --tx:#0C1620; --tx-2:#4E606C; --tx-3:#8698A4;
  --br:#0E7490; --br-2:#22D3EE; --br-3:#67E8F9; --br-4:#A5F3FC;
  --br-s:rgba(34,211,238,.12);
  --ok:#0F766E; --ok-2:#34D399; --ok-bg:#F0FDFA; --ok-bd:#A7F3D0;
  --no:#9F1239; --no-bg:#FFF5F7; --no-bd:#FBCFE0;
  position:relative;overflow:hidden;isolation:isolate;color:var(--tx);
  background:linear-gradient(180deg,#F1F6F9 0%,#FCFDFE 100%);
  padding-block:clamp(48px,7vw,88px);
}
.pcm-wrap{width:min(1180px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2}
.pcm :is(a,button,input,textarea):focus-visible{outline:2px solid var(--br-2);
  outline-offset:3px;border-radius:10px}

.pcm::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(12,22,32,.05) 1px,transparent 0);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 46%);
          mask-image:linear-gradient(180deg,#000,transparent 46%)}

/* ═══════════════════════════════════════════════════════════════════
   ۱. سرتیتر
   ═══════════════════════════════════════════════════════════════════ */
.pcm-head{text-align:center;max-width:60ch;margin:0 auto clamp(24px,3.2vw,34px)}
.pcm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;
  color:var(--tx-3);margin:0 0 14px}
.pcm-eyebrow::before,.pcm-eyebrow::after{content:"";width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--br-2))}
.pcm-h2{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:900;
  line-height:1.36;letter-spacing:-.016em;margin:0 0 12px;color:var(--tx);position:relative;z-index:0}
.pcm-h2 em{font-style:normal;color:var(--br);position:relative}
.pcm-h2 em::after{content:"";position:absolute;inset-inline:-3px;inset-block-end:.05em;height:.34em;
  z-index:-1;border-radius:3px;background:linear-gradient(90deg,var(--br-s),transparent)}
.pcm-lead{font-size:clamp(.93rem,1.5vw,1.03rem);line-height:2;color:var(--tx-2);margin:0}
.pcm-lead strong{color:var(--tx);font-weight:800}

/* ═══════════════════════════════════════════════════════════════════
   ۲. پیام‌های وضعیت
   ═══════════════════════════════════════════════════════════════════ */
.pcm-flash{display:flex;gap:12px;align-items:flex-start;margin:0 auto clamp(18px,2.4vw,24px);
  max-width:760px;padding:16px 20px;border-radius:16px;
  font-size:.9rem;line-height:1.95;font-weight:600}
.pcm-flash svg{flex:none;margin-top:4px}
.pcm-flash--ok{color:#0A4A44;background:var(--ok-bg);border:1px solid var(--ok-bd)}
.pcm-flash--ok svg{color:var(--ok)}
.pcm-flash--no{color:#7A0E2C;background:var(--no-bg);border:1px solid var(--no-bd)}
.pcm-flash--no svg{color:var(--no)}

/* ═══════════════════════════════════════════════════════════════════
   ۳. فرم
   ═══════════════════════════════════════════════════════════════════ */
.pcm-form{max-width:860px;margin:0 auto clamp(34px,4.6vw,58px);
  border-radius:22px;padding:clamp(20px,2.8vw,30px);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(12,22,32,.05),0 28px 54px -34px rgba(12,22,32,.32)}

.pcm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,16px)}
.pcm-fld{display:flex;flex-direction:column;gap:7px}
.pcm-fld--wide{grid-column:1 / -1}
.pcm-fld label{display:flex;align-items:center;gap:8px;
  font-size:.83rem;font-weight:800;color:var(--tx)}
.pcm-fld label svg{flex:none;color:var(--br)}
.pcm-fld label i{font-style:normal;color:var(--no);font-weight:900}
.pcm-fld small{font-size:.74rem;font-weight:600;color:var(--tx-3)}

.pcm .pcm-fld :is(input[type="text"],input[type="email"],textarea){
  width:100%;font:inherit;font-size:.92rem;font-weight:600;
  color:var(--tx) !important;-webkit-text-fill-color:var(--tx) !important;
  background:var(--paper-2) !important;
  padding:14px 16px;border-radius:13px;
  border:1.5px solid var(--line) !important;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s}
.pcm .pcm-fld :is(input,textarea)::placeholder{
  color:var(--tx-3) !important;-webkit-text-fill-color:var(--tx-3) !important;font-weight:500}
.pcm .pcm-fld :is(input,textarea):focus{
  border-color:var(--br-2) !important;background:var(--paper) !important;
  box-shadow:0 0 0 3px var(--br-s)}
.pcm .pcm-fld :is(input,textarea):-webkit-autofill{
  -webkit-text-fill-color:var(--tx) !important;
  -webkit-box-shadow:0 0 0 60px #F6FAFC inset !important;
  transition:background-color 9999s ease-in-out 0s}
.pcm-fld textarea{min-height:148px;resize:vertical;line-height:2}

/* ⭐ تله‌ی ربات — برای انسان نامرئی */
.pcm-trap{position:absolute !important;inset-inline-start:-9999px !important;
  width:1px;height:1px;opacity:0;pointer-events:none}

/* شمارنده */
.pcm-count{display:flex;justify-content:flex-end;font-size:.74rem;font-weight:700;
  color:var(--tx-3);margin-top:2px}
.pcm-count.is-near{color:var(--no)}

/* ارسال */
.pcm-send{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:clamp(14px,2vw,18px);
  padding-block-start:16px;border-block-start:1px solid var(--line)}
.pcm-note{display:flex;gap:9px;align-items:flex-start;flex:1;min-width:230px;
  font-size:.78rem;line-height:1.9;color:var(--tx-3)}
.pcm-note svg{flex:none;margin-top:4px;color:var(--br)}
.pcm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:800;font-size:.93rem;cursor:pointer;
  padding:15px 30px;border-radius:13px;border:0;color:#03212A;white-space:nowrap;
  background:linear-gradient(135deg,var(--br-4),var(--br-2) 48%,var(--br));
  box-shadow:0 12px 28px -12px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .14s,box-shadow .24s}
.pcm-btn:active{transform:translateY(1px)}
.pcm-btn:hover{box-shadow:0 18px 38px -12px rgba(34,211,238,1)}
.pcm-btn svg{flex:none}

/* ═══════════════════════════════════════════════════════════════════
   ۴. ⭐ نظرات — رندر سمت سرور
   ═══════════════════════════════════════════════════════════════════ */
.pcm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(16px,2.2vw,22px)}
.pcm-bar h3{font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.4rem);
  font-weight:900;color:var(--tx);margin:0}
.pcm-tally{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;
  padding:7px 14px;border-radius:99px;color:var(--br);background:var(--br-s)}
.pcm-tally svg{flex:none}

.pcm-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,16px)}
.pcm-item.is-hidden{display:none}

.pcm-item{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px;padding:clamp(17px,2.2vw,21px);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(12,22,32,.04),0 16px 30px -26px rgba(12,22,32,.28);
  transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s}
.pcm-item:hover{transform:translateY(-4px);border-color:var(--br-2);
  box-shadow:0 2px 4px rgba(12,22,32,.05),0 26px 48px -26px rgba(14,116,144,.35)}

/* گیومه‌ی پس‌زمینه */
.pcm-item::before{content:"”";position:absolute;z-index:0;pointer-events:none;user-select:none;
  inset-block-start:-.3em;inset-inline-end:.04em;
  font-family:var(--display);font-size:5.4rem;line-height:1;color:var(--br-2);opacity:.09}
.pcm-item > *{position:relative;z-index:1}

.pcm-who{display:flex;align-items:center;gap:11px;margin-bottom:13px}

/* ⭐ آواتار حرف اول — بدون آپلود فایل */
.pcm-ava{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--display);font-size:1.14rem;font-weight:900;color:#fff;
  background:linear-gradient(140deg,
    hsl(var(--h) 62% 52%), hsl(calc(var(--h) + 26) 58% 38%));
  box-shadow:0 10px 20px -12px hsl(var(--h) 60% 34%)}

.pcm-who b{display:block;font-size:.9rem;font-weight:800;color:var(--tx);line-height:1.5}
.pcm-who small{display:block;font-size:.75rem;color:var(--tx-3);margin-top:3px}

.pcm-item p{margin:0;font-size:.86rem;line-height:2.05;color:var(--tx-2);flex:1}

.pcm-foot{display:flex;align-items:center;gap:9px;margin-top:14px;
  padding-block-start:12px;border-block-start:1px solid var(--line);
  font-size:.73rem;color:var(--tx-3)}
.pcm-foot svg{flex:none;color:var(--ok)}
.pcm-foot time{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;
  margin-inline-start:auto}

/* حالت خالی */
.pcm-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;padding:clamp(34px,5vw,54px) 24px;border-radius:20px;
  background:var(--paper);border:1px dashed var(--line-2)}
.pcm-empty-ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
  color:var(--br);background:var(--br-s)}
.pcm-empty b{font-family:var(--display);font-size:1.02rem;font-weight:900;color:var(--tx)}
.pcm-empty p{margin:0;font-size:.86rem;line-height:1.95;color:var(--tx-2);max-width:44ch}

/* بیشتر */
.pcm-more{display:flex;justify-content:center;margin-top:clamp(16px,2.2vw,22px)}
.pcm-more[hidden]{display:none !important}
.pcm-more button{display:inline-flex;align-items:center;gap:9px;font:inherit;
  font-size:.87rem;font-weight:800;cursor:pointer;padding:14px 26px;border-radius:13px;
  color:var(--br);background:var(--paper);border:1px solid var(--line-2);transition:.2s}
.pcm-more button:hover{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--br-2),var(--br));
  box-shadow:0 12px 26px -12px var(--br)}
.pcm-more svg{flex:none;transition:transform .24s}
.pcm-more button:hover svg{transform:translateY(2px)}

/* ═══════════════════════════════════════════════════════════════════
   ۵. واکنش‌گرایی
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
  .pcm-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .pcm-grid{grid-template-columns:1fr}
  .pcm-list{grid-template-columns:1fr}
  .pcm-btn{width:100%}
  .pcm-more button{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════
   ۶. کاهش حرکت
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pcm *,.pcm *::before,.pcm *::after{
    animation:none !important;transition-duration:.001ms !important}
}