/* ===================== رنگیو — تجربهٔ عمومی (لندینگ + مراجعین) ===================== */
:root{
  --pri:#3d4757; --pri2:#c2703c; --pri-d:#232b38; --ink:#1e293b; --soft:#64748b;
  --line:#e7ebf3; --bg:#f6f7fb; --card:#fff;
  --grad:linear-gradient(120deg,#3d4757 0%,#5a4a3e 55%,#c2703c 100%);
  --radius:20px; --shadow:0 18px 50px -20px rgba(30,41,90,.28);
  /* همان دلیلِ ‎app.css‎: این پوسته حالتِ تاریک ندارد و باید صریح گفته شود،
     وگرنه کشویی‌های صفحه‌های عمومی (نوبت‌دهی، آگهی‌ها، یافتن مرکز) روی مرورگرِ
     تاریک فهرستِ ناخوانا باز می‌کنند. */
  color-scheme:light;
}
/* گزینه‌ها رنگِ صریحِ خودشان را می‌گیرند — کمربندِ دوم، مثل پنل. */
select{color-scheme:light}
select option{background:#fff;color:#1e293b}
/* سطرِ برجسته هم، به همان دلیلِ پنل: رنگِ «هایلایتِ» سیستم در تمِ تیره متن را
   می‌بلعد و ‎getComputedStyle‎ هم آن را نشان نمی‌دهد. */
select option:checked,select option:hover{background:#eef2f7;color:#0f172a}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:'Vazirmatn',Tahoma,sans-serif;color:var(--ink);background:var(--bg);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
a{text-decoration:none;color:inherit}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:plaintext}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* ---------- Navbar ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .in{max-width:1120px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:16px}
.nav .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px}
.nav .brand .lg{width:42px;height:42px;border-radius:13px;background:#fff;object-fit:cover;box-shadow:0 8px 20px -6px rgba(124,58,237,.55)}
.nav .brand b{background:linear-gradient(90deg,#3d4757,#c2703c);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .links{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.nav .links a{padding:9px 14px;border-radius:11px;font-weight:700;font-size:14px;color:#475569;transition:.15s}
.nav .links a:hover{background:#f3ede4;color:var(--pri-d)}
/* نشانهٔ صفحهٔ جاری؛ هم‌رنگِ حالت hover تا نوار یکدست بماند */
.nav .links a.on{background:#f3ede4;color:var(--pri-d);font-weight:800;box-shadow:inset 0 -2px 0 var(--pri)}
.nav .links a.dl{color:#0f172a;font-weight:800}
.nav .links a.dl i{color:#16a34a}
.nav .links a.dl:hover{background:#dcfce7;color:#15803d}
.nav .links a.cta{background:var(--grad);color:#fff;box-shadow:0 8px 18px -8px rgba(79,70,229,.6)}
.nav .links a.cta:hover{transform:translateY(-1px);color:#fff}
/* «ثبت شکایت» هم‌ردهٔ «ورود به پنل» است ولی نباید با آن رقابت کند: همان قالب،
   بدون پُری و با قابِ خاکستری، تا دیده شود و کنشِ اصلیِ نوار را نپوشاند. */
.nav .links a.cta.cmp{background:none;color:var(--ink,#334155);border:1.5px solid rgba(148,163,184,.55);box-shadow:none}
.nav .links a.cta.cmp:hover{color:#b45309;border-color:#fdba74;background:rgba(253,186,116,.12)}
.nav .burger{display:none;margin-inline-start:auto;background:#f3ede4;border:none;width:42px;height:42px;border-radius:11px;font-size:20px;color:var(--pri-d);cursor:pointer}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:13px 22px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:.18s;text-decoration:none}
.btn.pri{background:var(--grad);color:#fff;box-shadow:0 12px 26px -10px rgba(79,70,229,.7)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(79,70,229,.8)}
.btn.ghost{background:#fff;color:var(--pri-d);border:1.5px solid #dfe3ee}
.btn.ghost:hover{border-color:var(--pri);color:var(--pri)}
.btn.white{background:#fff;color:var(--pri-d)}
.btn.white:hover{transform:translateY(-2px)}
.btn.lg{padding:15px 28px;font-size:16px;border-radius:15px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(900px 420px at 90% -10%,rgba(124,58,237,.14),transparent 60%),
   radial-gradient(700px 400px at 0% 0%,rgba(79,70,229,.10),transparent 55%)}
.hero .in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 22px 54px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:7px;background:#f3ede4;color:var(--pri-d);font-weight:800;font-size:13px;padding:7px 14px;border-radius:30px;margin-bottom:18px}
.hero h1{font-size:clamp(28px,4.5vw,46px);font-weight:900;line-height:1.35;margin:0 0 16px}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* معرفی جایگاه پلتفرم، زیر تیتر اصلی */
.hero p.tagline{font-size:clamp(15px,1.9vw,19px);font-weight:800;margin:0 0 14px;max-width:600px;line-height:1.8;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:17px;color:var(--soft);margin:0 0 26px;max-width:540px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px}
.hero .trust .t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#475569}
.hero .trust .t i{color:#16a34a;font-size:18px}
/* دکمهٔ دانلود اپ اندروید */
.app-dl{display:inline-flex;align-items:center;gap:13px;margin-top:18px;background:linear-gradient(120deg,#0f172a,#1e293b);color:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 12px 26px -12px rgba(15,23,42,.6);transition:.18s;border:1px solid rgba(255,255,255,.06)}
.app-dl:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(15,23,42,.7);color:#fff}
.app-dl > .bi-android2{font-size:30px;color:#3ddc84}
.app-dl span{display:flex;flex-direction:column;line-height:1.35}
.app-dl span b{font-size:15px;font-weight:800}
.app-dl span small{font-size:11.5px;opacity:.75}
.app-dl .dl-ic{font-size:18px;margin-inline-start:6px;opacity:.85}
/* کارت گرافیک قهرمان */
.hero-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:22px;transform:rotate(-1.5deg)}
.hero-card::before{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(180deg,rgba(124,58,237,.05),transparent);pointer-events:none}
.hero-card .hc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.hero-card .hc-head b{font-weight:800}
.hero-card .hc-head .cn{font-size:12px;color:var(--soft)}
.hero-card .hc-body{display:grid;grid-template-columns:1fr 118px;gap:14px;align-items:center}
.hero-card .carbody{width:100%;max-width:150px;margin:0 auto;display:block}
.hero-card .hc-side{display:flex;flex-direction:column;gap:9px}
.hero-card .hc-badge{display:flex;align-items:center;gap:7px;background:#f0fdf4;color:#15803d;border:1px solid #a7f3d0;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:800}
.hero-card .hc-qr{width:96px;height:96px;align-self:center;border:5px solid #fff;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.1);background:
  repeating-conic-gradient(#1e293b 0% 25%, #fff 0% 50%) 50%/16px 16px}
.hero-card .float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px 14px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:8px}
.hero-card .float i{font-size:18px}
/* موقعیت نشان‌های شناور منطقی است تا در چیدمان چپ‌به‌راست هم قرینه شود (در فارسی همان چپ/راست قبلی می‌ماند) */
.hero-card .f1{top:-18px;inset-inline-end:-18px}
.hero-card .f1 i{color:#3d4757}
.hero-card .f2{bottom:-16px;inset-inline-start:-14px}
.hero-card .f2 i{color:#16a34a}

/* ---------- Section ---------- */
.sec{padding:56px 0}
.sec.alt{background:#fff;border-block:1px solid var(--line)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 40px}
.sec-head .kick{font-weight:800;color:var(--pri);font-size:13.5px;letter-spacing:1px}
.sec-head h2{font-size:clamp(24px,3.4vw,34px);font-weight:900;margin:8px 0 10px}
.sec-head p{color:var(--soft);font-size:15.5px;margin:0}

/* ---------- بخش مراجعین (کارت‌های اصلی) ---------- */
.visitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vcard{position:relative;overflow:hidden;border-radius:var(--radius);padding:30px;color:#fff;display:flex;flex-direction:column;gap:12px;min-height:210px;box-shadow:var(--shadow);transition:.25s}
.vcard:hover{transform:translateY(-5px)}
.vcard.a{background:linear-gradient(135deg,#3d4757,#c2703c)}
.vcard.b{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.vcard .ic{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:28px}
.vcard h3{font-size:21px;font-weight:800;margin:6px 0 0}
.vcard p{margin:0;font-size:14.5px;opacity:.92;flex:1}
.vcard .go{display:inline-flex;align-items:center;gap:8px;font-weight:800;background:#fff;color:#1e293b;padding:11px 18px;border-radius:12px;align-self:flex-start;transition:.15s}
.vcard:hover .go{gap:12px}
/* آیکن پس‌زمینه باید همیشه سمت پایانِ متن بنشیند تا روی متن انگلیسی نیفتد */
.vcard .bgic{position:absolute;inset-inline-end:-10px;bottom:-24px;font-size:130px;opacity:.12}

/* استعلام سریع درون‌خطی */
.quick{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.quick .qt{font-weight:800;display:flex;align-items:center;gap:9px;font-size:15px}
.quick .qt i{color:var(--pri);font-size:22px}
.quick form{display:flex;gap:10px;flex:1;min-width:260px}
.quick input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15px;background:#fbfcfe}
.quick input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 4px rgba(79,70,229,.14)}

/* ---------- مراحل ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;position:relative}
.step .n{width:46px;height:46px;margin:0 auto 14px;border-radius:14px;background:var(--grad);color:#fff;font-weight:900;font-size:20px;display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(79,70,229,.6)}
.step h4{margin:0 0 7px;font-size:17px;font-weight:800}
.step p{margin:0;color:var(--soft);font-size:14px}

/* ---------- ویژگی‌ها ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;transition:.2s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fcard .fi{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;margin-bottom:12px}
.fcard.c1 .fi{background:linear-gradient(135deg,#3d4757,#c2703c)}
.fcard.c2 .fi{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.fcard.c3 .fi{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.fcard.c4 .fi{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.fcard h4{margin:0 0 6px;font-size:16px;font-weight:800}
.fcard p{margin:0;color:var(--soft);font-size:13.5px}

/* ---------- بنر دانلود اپ ---------- */
.app-banner{display:flex;align-items:center;gap:28px;background:linear-gradient(120deg,#0f172a,#1e293b);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 34px;flex-wrap:wrap;position:relative;overflow:hidden}
.app-banner::before{content:"";position:absolute;inset-inline-end:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(61,220,132,.18),transparent 65%)}
.app-banner .ab-icon{width:104px;height:104px;border-radius:26px;flex:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);z-index:1}
.app-banner .ab-body{flex:1;min-width:250px;z-index:1}
.app-banner .kick{font-weight:800;color:#3ddc84;font-size:13px;letter-spacing:.5px}
.app-banner h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin:6px 0 8px}
.app-banner p{color:#cbd5e1;font-size:15px;margin:0 0 20px;max-width:560px}
.app-banner .ab-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.app-banner .ab-note{font-size:12.5px;color:#94a3b8;display:inline-flex;align-items:center;gap:6px}
.app-banner .ab-note i{color:#3ddc84}
/* هشدارِ نصبِ APK باید خوانده شود ولی هم‌وزنِ متنِ اصلی نباشد. حاشیهٔ پایینِ
   ‎p‎ بالا ۲۰px است و اینجا جمع می‌شود، وگرنه دو پاراگراف از هم جدا می‌افتند. */
.app-banner .ab-apk-note{font-size:12.5px;line-height:1.9;color:#94a3b8;margin:-12px 0 18px;max-width:560px}

/* ---------- CTA کسب‌وکار ---------- */
.biz{background:var(--grad);border-radius:var(--radius);padding:44px;color:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.biz::before{content:"";position:absolute;inset-inline-end:-40px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.09)}
.biz h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin:0 0 10px}
.biz p{opacity:.92;font-size:15.5px;margin:0 0 22px}
.biz .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.foot{background:#0e1220;color:#94a3b8;padding:34px 0 26px}
.foot .in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot .brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:18px}
.foot .brand .lg{width:38px;height:38px;border-radius:11px;background:#fff;object-fit:cover}
.foot .lnk{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.foot .lnk a:hover{color:#fff}
.foot .cp{width:100%;border-top:1px solid rgba(255,255,255,.08);margin-top:22px;padding-top:16px;text-align:center;font-size:12.5px}
.foot .cp .ver{display:inline-block;margin-inline-start:10px;padding:2px 10px;border-radius:20px;
  background:rgba(255,255,255,.08);font-size:11.5px;font-weight:700;opacity:.85}
.foot .cp .ver .verdate{opacity:.75;font-weight:600;margin-inline-start:3px}

/* ---------- کارت‌های عمومی (verify/centers) ---------- */
.pub{max-width:720px;margin:0 auto;padding:40px 22px}
.pub-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.pub-card .ph{background:var(--grad);color:#fff;padding:26px;text-align:center}
.pub-card .ph .ic{width:64px;height:64px;margin:0 auto 12px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:30px}
.pub-card .ph h1{margin:0;font-size:23px;font-weight:800}
.pub-card .ph p{margin:6px 0 0;opacity:.9;font-size:14px}
.pub-card .pb{padding:26px}
/* چیدمان منطقی است، نه فیزیکی؛ وگرنه در انگلیسی برچسب‌ها به راستِ ورودی چپ‌به‌راست می‌چسبند */
.fld{display:flex;flex-direction:column;gap:7px;text-align:start}
.fld label{font-size:13px;font-weight:700;color:#334155}
.fld input,.fld select{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15px;background:#fbfcfe;width:100%}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.result{margin-top:20px;text-align:start}
/* آیکن بالا می‌ماند نه وسط: وقتی متن دو خط می‌شود، align-items:center آیکن را
   بین دو خط معلق می‌گذاشت. متن هم باید بتواند خودش را بکشد، وگرنه در ظرف flex
   جمع می‌شود. */
.rbadge{border-radius:13px;padding:13px 16px;font-weight:700;font-size:14px;display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;line-height:1.9}
.rbadge>i{flex:none;margin-top:2px}
.rbadge>span{flex:1 1 auto}
.rbadge.ok{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.rbadge.warn{background:#fef9c3;color:#a16207;border:1px solid #fde047}
/* «منقضی» قرمز است نه زرد: خریدار باید در یک نگاه بفهمد به این برگه نباید
   استناد کند. رنگ با err یکی است چون پیام هر دو یک چیز است — نایست. */
.rbadge.err,.rbadge.expired{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .muted{color:var(--soft)}
.plate{display:inline-flex;align-items:stretch;border:1.5px solid #15489e;border-radius:6px;overflow:hidden;background:#fff;font-weight:800;font-size:14px;direction:ltr;vertical-align:middle;line-height:1.8}
.plate .pg{padding:2px 8px;border-right:1px solid #dbe3ef}
.plate .pg.last{border-right:none}
.plate .pi{background:#15489e;color:#fff;padding:2px 6px;font-size:9.5px;display:grid;place-items:center;border-right:1px solid #dbe3ef}
.center-item{border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin-bottom:11px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;transition:.15s}
.center-item:hover{border-color:#dcc9ad;box-shadow:var(--shadow-sm)}
.center-item .cname{font-weight:800;font-size:15.5px}
.center-item .cmeta{color:var(--soft);font-size:12.5px;margin-top:3px}
.center-item .cph{font-size:12.5px;margin-top:6px;color:#475569}
.center-item .cbtn{flex:none;display:inline-flex;align-items:center;gap:6px;background:#f3ede4;color:var(--pri-d);border-radius:10px;padding:8px 12px;font-weight:800;font-size:12.5px}
.center-item .cbtn:hover{background:var(--pri);color:#fff}
.backhome{display:inline-flex;align-items:center;gap:7px;color:var(--soft);font-weight:700;font-size:13.5px;margin-bottom:16px}
.backhome:hover{color:var(--pri)}

/* ---------- آگهی‌ها و تبلیغات مراکز ---------- */
/* عمداً همان زبان بصری .fcard است (کارت سفید، خط نازک، بالاآمدن در hover) تا بخشِ
   آگهی‌ها در صفحهٔ اصلی، کارت تازه‌ای وسط کارت‌های موجود به نظر نرسد. */
.adgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.adcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s}
.adcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.adcard .ph{position:relative;display:block;aspect-ratio:16/10;background:#eef2f7;overflow:hidden}
.adcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
/* آگهیِ بی‌عکس هم باید کارتِ درست‌قدی بسازد، نه کادر خالیِ فروریخته */
.adcard .ph.none{display:grid;place-items:center;color:#cbd5e1;font-size:38px;background:linear-gradient(135deg,#f3ede4,#f8fafc)}
.adcard .ph .more{position:absolute;inset-inline-end:9px;bottom:9px;background:rgba(15,23,42,.72);color:#fff;border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:5px}
.adcard .ph .kind{position:absolute;inset-inline-start:9px;top:9px;background:rgba(255,255,255,.94);color:var(--pri-d);border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:800}
.adcard .bd{padding:15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.adcard h3{margin:0;font-size:16px;font-weight:800;line-height:1.6}
.adcard .txt{margin:0;color:var(--soft);font-size:13.5px;line-height:1.85;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.adcard .who{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#334155;padding-top:9px;border-top:1px dashed var(--line);margin-top:auto}
.adcard .who i{color:var(--pri)}
.adcard .who .cty{font-weight:600;color:var(--soft)}

/* ریز-نشان‌های عملکرد — همان ظاهر .hero .trust .t */
.recs{display:flex;flex-wrap:wrap;gap:7px}
.rec{display:inline-flex;align-items:center;gap:5px;background:#f1f5f9;color:#475569;border-radius:20px;padding:4px 10px;font-size:11.5px;font-weight:800}
.rec i{font-size:13px}
.rec.ok{background:#f0fdf4;color:#15803d}
.rec.pri{background:#f3ede4;color:var(--pri-d)}
/* «هنوز داده‌ای ندارد» — عمداً خنثی و بدون رنگ مثبت */
.rec.none{background:#f8fafc;color:#94a3b8;font-weight:700}

/* صفحهٔ جزئیات آگهی */
.adwrap{max-width:920px;margin:0 auto;padding:40px 22px}
.adhead{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:18px}
.adhead h1{margin:0 0 10px;font-size:clamp(21px,3vw,28px);font-weight:900;line-height:1.5}
.adhead .body{white-space:pre-line;color:#334155;font-size:15px;margin:0}
.adshots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.adshot{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.adshot img{width:100%;display:block;background:#eef2f7}
.adshot .cap{padding:10px 13px;font-size:12.5px;color:var(--soft)}
.recbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.recbox h2{margin:0 0 4px;font-size:18px;font-weight:800}
.recbox .sub{margin:0 0 15px;color:var(--soft);font-size:13px}
.recbox .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.recrow{display:flex;justify-content:space-between;gap:10px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:13.5px}
.recrow b{font-weight:800}
.recrow .k{color:var(--soft);font-weight:700}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero .in{grid-template-columns:1fr;padding:44px 22px 36px}
  .hero-card{order:-1;max-width:420px;margin:0 auto 8px;transform:none}
  .visitor-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr 1fr}
  .adgrid{grid-template-columns:1fr 1fr}
  .recbox .grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* «ورود به پنل» روی موبایل هم بیرونِ کشو می‌ماند.
     پیش از این کلِ ‎.links‎ پنهان می‌شد و دکمهٔ ورود هم — که داخلِ همان ظرف است —
     با آن می‌رفت داخل کشو. یعنی مهم‌ترین کنشِ نوار، دو کلیک می‌شد: اول همبرگر،
     بعد ورود. حالا ظرف می‌ماند و فقط بچه‌هایش پنهان می‌شوند، جز خودِ دکمه. */
  .nav .links{display:flex;align-items:center;gap:8px}
  .nav .links > *:not(.cta){display:none}
  .nav .links.open{display:flex;position:absolute;top:66px;right:0;left:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;gap:8px}
  .nav .links.open > *{display:block}
  .nav .links.open > .cta{display:inline-flex;justify-content:center}
  .nav .links > .cta{font-size:12.5px;padding:7px 12px;white-space:nowrap}
  .nav .burger{display:grid;place-items:center}
  .feat{grid-template-columns:1fr}
  .hero .cta-row .btn{flex:1}
  .adgrid{grid-template-columns:1fr}
  .adshots{grid-template-columns:1fr}
}
/* موبایل کوچک: جمع‌وجورتر + جلوگیری از سرریز افقی */
@media(max-width:520px){
  .wrap{padding:0 16px}
  .hero .in{padding:34px 16px 30px;gap:22px}
  .hero h1{font-size:26px;line-height:1.4}
  .hero p.lead{font-size:14.5px;margin-bottom:20px}
  .hero-card{padding:16px;margin-inline:6px}
  .hero-card .float{font-size:11px;padding:8px 11px}
  .hero-card .f1{top:-10px;inset-inline-end:-6px}
  .hero-card .f2{bottom:-10px;inset-inline-start:-6px}
  .sec{padding:40px 0}
  .sec-head{margin-bottom:28px}
  .biz{padding:30px 20px}
  .quick{padding:16px}
  .quick form{min-width:0}
  .quick input{min-width:0}
}

/* ==================================================================
   منوی موبایلِ صفحات عمومی — گروه‌بندی، کادر و سایه‌روشن
   ==================================================================
   پیش‌تر یک ستونِ تختِ ۱۱ ردیفی بود، بدون سرفصل و بدون کادر، و روی گوشی
   تقریباً تمام صفحه را می‌گرفت. حالا سه گروه دارد و داخل یک کادرِ شناور
   می‌نشیند تا مرزش با محتوای پشتش معلوم باشد. */
@media(max-width:900px){
  .nav .links.open{
    /* بدون این، align-items:center از قاعدهٔ پایه ارث می‌رسد و هر ردیف و هر
       کارتِ گروه به اندازهٔ متنش جمع می‌شود — همان چیزی که منو را نامرتب
       نشان می‌داد. ستون باید کشیده باشد. */
    align-items:stretch;
    /* کادر: منو دیگر نوارِ چسبیده به لبه نیست، یک کارتِ مستقل است */
    top:60px; right:10px; left:10px; padding:10px;
    border:1px solid #e4d9c6; border-radius:18px;
    background:linear-gradient(180deg,#fffdf9,#f6efe2);
    box-shadow:0 22px 50px -18px rgba(90,70,40,.38), inset 0 1px 0 #fff;
    gap:4px; max-height:calc(100vh - 80px); overflow-y:auto;
  }
  .nav .links.open .grp{
    display:flex; flex-direction:column; gap:2px;
    padding:7px; margin:3px 0; border-radius:13px;
    background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
    box-shadow:inset 0 0 0 1px rgba(150,120,80,.14), inset 0 1px 0 #fff;
  }
  .nav .links.open .gt{
    display:block; font-size:10.5px; font-weight:800; letter-spacing:.5px;
    color:#96552c; padding:4px 10px 6px;
  }
  /* ردیف‌ها فشرده‌تر: با ارتفاع قبلی، ۱۱ ردیف بیش از یک صفحهٔ گوشی می‌شد */
  .nav .links.open a{padding:10px 12px;border-radius:10px;font-size:14px}
  .nav .links.open a.on{
    background:linear-gradient(180deg,#4a5567,#2f3846);
    color:#fff; box-shadow:0 6px 14px -7px rgba(35,43,56,.75), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .nav .links.open .grp.more{background:linear-gradient(180deg,#f2ece1,#e9e0d0)}
  .nav .links.open a.cta{margin-top:4px;justify-content:center}
}
/* روی دسکتاپ گروه‌ها نباید وجود داشته باشند: display:contents یعنی خودِ div
   از چیدمان حذف شود و لینک‌ها همان فرزندانِ فلکسِ قبلی بمانند. */
@media(min-width:901px){
  .nav .links .grp{display:contents}
  .nav .links .gt{display:none}
}

/* زبانهٔ انتخاب روش ورود (گذرواژه / کد پیامکی) */
.tabs{display:flex;gap:6px;margin-bottom:16px;padding:4px;border-radius:13px;
  background:linear-gradient(180deg,#f1eadf,#e7ddcd);box-shadow:inset 0 1px 3px rgba(120,95,60,.18)}
.tabs .tb{flex:1;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;
  padding:10px 8px;border-radius:10px;background:none;color:#8a7f70;display:flex;
  align-items:center;justify-content:center;gap:7px;transition:.15s}
.tabs .tb.on{background:linear-gradient(180deg,#fff,#f7f2e9);color:#96552c;
  box-shadow:0 2px 6px -3px rgba(90,70,40,.45),inset 0 1px 0 #fff}

/* ==================================================================
   مرتب‌کردن صفحهٔ اول روی موبایل
   ==================================================================
   سه ایراد که در رندر ۳۹۰ پیکسلی دیده شد و حسِ «بی‌نظم» را می‌ساخت. */
@media(max-width:560px){
  /* ۱) جعبهٔ استعلام سریع: برچسب، ورودی و دکمه هر سه در یک ردیف جا می‌شدند و
        ورودی به چند ده پیکسل له می‌شد — کاربر جای تایپِ شمارهٔ گواهی نداشت.
        این ایرادِ کارکردی بود نه ظاهری. حالا ستونی می‌شود و ورودی تمام‌عرض. */
  .quick{flex-direction:column;align-items:stretch;gap:12px;padding:18px}
  .quick form{min-width:0;width:100%}
  .quick input{min-width:0;width:100%}
  .quick form .btn{flex:none;white-space:nowrap}

  /* ۲) ردیف دکمه‌ها: «عضویت مراکز» کادردار و راست‌چین بود، «یافتن مراکز» بی‌کادر و
        چپ‌چین، و دکمهٔ دانلود تمام‌عرض — سه ظاهرِ متفاوت پشت سر هم. حالا هر سه
        تمام‌عرض و هم‌تراز می‌شوند. */
  .hero .cta-row{flex-direction:column;gap:10px}
  .hero .cta-row .btn{width:100%;justify-content:center}

  /* ۳) نشان‌های اعتماد دو تا در یک خط و سومی زیرشان می‌افتاد (پلکانِ ناهموار).
        یک ستونِ هم‌تراز خواناتر است و ترتیبشان هم حفظ می‌شود. */
  .hero .trust{flex-direction:column;align-items:flex-start;gap:9px}
  .hero .trust .t{width:100%}
}

/* دکمهٔ «کم‌صدا»: روی دسکتاپ کنارِ دکمهٔ اصلی می‌نشیند و باید کم‌رنگ‌تر باشد
   تا سلسله‌مراتب دیده شود. */
.btn.ghost.quiet{border-color:transparent;background:transparent;color:var(--soft)}
@media(max-width:560px){
  /* ولی روی موبایل که دکمه‌ها زیر هم می‌آیند، بی‌کادر بودن آن را یتیم نشان می‌داد
     و ردیف را نامرتب می‌کرد؛ کادر کم‌رنگ می‌گیرد تا هم‌تراز بماند و هم‌چنان
     ثانویه به نظر برسد. */
  .btn.ghost.quiet{border-color:var(--line);background:#fff}
}

/* ==================================================================
   نوار بالای صفحات عمومی
   ==================================================================
   روی دسکتاپ ده ردیف کنار هم بودند و همه دو خطی می‌شدند («استعلام / اصالت»)
   که نوار را شلوغ و ناخوانا می‌کرد. سه تغییر: شکستنِ خط ممنوع، گروه‌ها کشویی،
   و دکمهٔ ورود بزرگ‌تر و در سمت راست. */

/* موبایل: ظرفِ تازه نباید چیدمانِ ستونیِ قبلی را به هم بزند */
@media(max-width:900px){
  .nav .links.open .gitems{display:flex;flex-direction:column;gap:2px}
  .nav .links.open > a.cta{margin:4px 0 0}
}

@media(min-width:901px){
  /* دوخطی‌شدنِ برچسب‌ها ریشهٔ بی‌نظمی بود */
  .nav .links a,.nav .links .gt{white-space:nowrap}

  /* گروه در جریان می‌ماند (فقط سرفصلش دیده می‌شود) و کشویی از آن آویزان است،
     پس باز شدنش بقیهٔ نوار را جابه‌جا نمی‌کند. */
  .nav .links .grp{position:relative;display:block}
  .nav .links .gt{
    display:flex;align-items:center;gap:6px;cursor:default;
    padding:9px 14px;border-radius:11px;font-weight:700;font-size:14px;color:#475569;transition:.15s;
  }
  .nav .links .gt::after{content:"\F229";font-family:"bootstrap-icons";font-size:11px;opacity:.55}
  .nav .links .grp:hover > .gt,
  .nav .links .grp:focus-within > .gt{background:#f3ede4;color:#96552c}

  .nav .links .gitems{
    display:none;position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:200px;
    flex-direction:column;gap:2px;padding:7px;border-radius:14px;
    background:linear-gradient(180deg,#fffdf9,#f6efe2);
    box-shadow:0 20px 44px -18px rgba(90,70,40,.4),inset 0 0 0 1px rgba(150,120,80,.16);
    z-index:60;
  }
  /* ‎:focus-within‎ کنار ‎:hover‎ لازم است، وگرنه این لینک‌ها با کیبورد
     دسترس‌پذیر نیستند و برای صفحه‌خوان عملاً وجود ندارند. */
  .nav .links .grp:hover > .gitems,
  .nav .links .grp:focus-within > .gitems{display:flex}
  .nav .links .gitems a{padding:9px 12px;border-radius:9px;font-size:13.5px}

  /* دکمهٔ ورود: بزرگ‌تر و در ابتدای RTL یعنی سمت راست، کنار برند */
  .nav .links > a.cta{
    order:-1;margin-inline-end:8px;
    padding:12px 22px;font-size:15px;font-weight:800;border-radius:13px;
  }
  .nav .links > a.cta i{font-size:17px}
}

/* ---------- اسکن کد QR در کادر استعلام ---------- */
.quick .btn.qscan{flex:none;padding:0 14px;display:flex;align-items:center;justify-content:center}
.quick .btn.qscan i{font-size:20px}
.qscan-note{margin-top:8px;font-size:12.5px;color:#96552c;font-weight:600}

/* پوششِ دوربین. ‎fixed‎ و تمام‌صفحه است چون روی گوشی کاربر باید برگه را جلوی
   دوربین بگیرد و هر چیزِ دیگری روی صفحه فقط مزاحم است. */
.qcam{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.94);
  display:flex;align-items:center;justify-content:center;padding:16px}
.qcam[hidden]{display:none}
.qcam-box{position:relative;width:min(92vw,460px);display:flex;flex-direction:column;gap:12px;align-items:center}
.qcam video{width:100%;border-radius:16px;background:#000;aspect-ratio:3/4;object-fit:cover}
/* کادرِ هدف‌گیری: به کاربر می‌گوید کد را کجا بگیرد، وگرنه گوشی را بی‌هدف تکان می‌دهد */
.qcam-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  width:62%;aspect-ratio:1;border:3px solid rgba(255,255,255,.85);border-radius:18px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);pointer-events:none}
.qcam .btn{background:#fff}

/* ---------- رفع پریدنِ کشویی‌های نوار بالا ---------- */
@media(min-width:901px){
  /* ریشهٔ باگ: پنل با ‎top:calc(100% + 6px)‎ ۶ پیکسل پایین‌تر از سرفصل بود.
     ماوس که از سرفصل به سمت پنل می‌رفت وارد آن شکاف می‌شد، hover قطع می‌شد و
     منو بسته می‌شد — یعنی «می‌پرد و باز نمی‌شود».

     حالا پنل از ‎top:100%‎ شروع می‌شود (بدون شکاف) ولی حاشیهٔ بالاییِ شفاف
     همان فاصلهٔ بصری را نگه می‌دارد. آن حاشیه بخشی از خودِ عنصر است، پس
     ماوس رویش هم hover را زنده نگه می‌دارد. background-clip لازم است تا
     پس‌زمینه زیر حاشیه کشیده نشود و شکاف واقعاً شفاف بماند. */
  .nav .links .gitems{
    top:100%;
    border-top:9px solid transparent;
    background-clip:padding-box;
  }

  /* «بیشتر» آخرین ردیف نوار است؛ با inset-inline-start پنلش از لبهٔ صفحه
     بیرون می‌زد و عملاً دیده نمی‌شد. از سمت مقابل لنگر می‌گیرد. */
  .nav .links .grp.more .gitems{inset-inline-start:auto;inset-inline-end:0}

  /* ناحیهٔ امنِ سرفصل: بدون این، حرکت مورب ماوس از لبهٔ سرفصل هم منو را می‌بندد */
  .nav .links .grp{padding-bottom:2px}
}

/* ---------- کشویی‌ها باید با کیبورد هم باز شوند ---------- */
@media(min-width:901px){
  /* ‎display:none‎ عنصر را از درخت دسترسی حذف می‌کند، پس لینک‌های داخلش
     فوکوس‌پذیر نبودند و قاعدهٔ ‎:focus-within‎ عملاً هیچ‌وقت اجرا نمی‌شد —
     یعنی کاربر کیبورد و صفحه‌خوان هیچ راهی به این لینک‌ها نداشتند.
     با visibility عنصر در درخت می‌ماند و Tab به آن می‌رسد. */
  .nav .links .gitems{
    display:flex;visibility:hidden;opacity:0;pointer-events:none;
    transform:translateY(-4px);transition:opacity .13s,transform .13s;
  }
  .nav .links .grp:hover > .gitems,
  .nav .links .grp:focus-within > .gitems{
    visibility:visible;opacity:1;pointer-events:auto;transform:none;
  }
}

/* ---------- نوار استعلام زیر نوار بالا ---------- */
.vbar{background:linear-gradient(180deg,#fffdf9,#f6efe2);
  border-bottom:1px solid rgba(150,120,80,.16);padding:12px 0}
.vbar .quick{margin:0;box-shadow:none;background:none;border:0;padding:0}
.vbar .quick .qt{margin-bottom:8px}
/* روی موبایل عنوانِ کادر جا نمی‌گیرد و فقط یک سطر می‌خورد؛ خودِ فرم گویاست */
@media(max-width:620px){
  .vbar{padding:10px 0}
  .vbar .quick .qt{display:none}
}

/* ---------- بلوک پشتیبانی در پاورقی ---------- */
.foot .sup{display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.foot .sup b{color:#fff;font-weight:800;display:flex;align-items:center;gap:7px;font-size:13.5px}
.foot .sup b i{color:var(--pri2)}
.foot .sup a{color:#cbd5e1;font-weight:700;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:6px;width:max-content}
.foot .sup a:hover{color:#fff;text-decoration:underline}

/* ---------- نمونهٔ کد QR در کارت قهرمان ---------- */
/* الگوی قبلی یک شطرنجیِ ۱۶ پیکسلی بود. در وب، شطرنجیِ درشت نمادِ «تصویر
   بارگذاری نشد / شفاف» است، پس درست همان‌جا که باید اعتماد بسازد، خراب
   دیده می‌شد. حالا سه مربعِ گوشه (finder) دارد که چشم بی‌درنگ آن‌ها را
   «کد QR» می‌خواند، و ناحیهٔ داده با شطرنجیِ ریزتر پر می‌شود.

   عمداً CSS خالص است و نه تصویر: این صفحه در WebViewِ اپ هم باز می‌شود و
   نباید برای یک تزئین، فایل تازه‌ای دانلود شود. */
.hero-card .hc-qr{
  position:relative;overflow:hidden;background:#fff;
  background-image:repeating-conic-gradient(#1e293b 0% 25%, #fff 0% 50%);
  background-size:7px 7px;background-position:50%;
}
/* دو مربعِ بالا */
.hero-card .hc-qr::before,
.hero-card .hc-qr::after{
  content:"";position:absolute;width:26px;height:26px;
  border:6px solid #1e293b;background:#fff;
  box-shadow:0 0 0 4px #fff;
}
.hero-card .hc-qr::before{top:2px;left:2px}
.hero-card .hc-qr::after{top:2px;right:2px}
/* مربعِ سومِ گوشه: چون بیش از دو شبه‌عنصر نداریم، با گرادیان روی همان
   پس‌زمینه کشیده می‌شود و لایهٔ اول قرار می‌گیرد. */
.hero-card .hc-qr{
  background-image:
    linear-gradient(#1e293b,#1e293b), linear-gradient(#fff,#fff),
    repeating-conic-gradient(#1e293b 0% 25%, #fff 0% 50%);
  background-size:26px 26px, 38px 38px, 7px 7px;
  background-position:2px calc(100% - 2px), 0 100%, 50%;
  background-repeat:no-repeat, no-repeat, repeat;
}