/* =========================================================
   affiran — public site
   Spacing scale (4px base): 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 72
   Every section uses the same container + vertical rhythm.
   ========================================================= */
:root{
  --ink:#161829;        /* navy */
  --ink-2:#2b2d3d;
  --accent:#e6402c;     /* red */
  --accent-hover:#d2361f;
  --green:#20b356;
  --paper:#f3f4f7;      /* page canvas */
  --line:#e3e4ea;
  --line-strong:#c7c9d4;
  --white:#ffffff;
  --muted:#6b6e7f;
  --muted-2:#8a8d9c;
  --body-text:#454a5e;
  --laser:#00d4ff;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --container:920px;
  --gutter:28px;
  --section-y:72px;      /* space above every section */
  --head-gap:28px;       /* section title → content */
  --radius:14px;
  --radius-sm:10px;
}
@media (max-width:640px){
  :root{ --gutter:20px; --section-y:56px; --head-gap:20px; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:16px; }
html,body{
  min-height:100%;
  background:var(--paper);
  font-family:'Vazirmatn', Tahoma, sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline:2px solid var(--laser); outline-offset:2px; border-radius:6px;
}

.skip-link{
  position:absolute; top:-100px; right:var(--sp-4); z-index:100;
  background:var(--ink); color:var(--white); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:var(--sp-4); }

/* ===== Site frame ===== */
.site-frame{ min-height:100vh; display:flex; flex-direction:column; position:relative; }

.edge-line{
  position:absolute; bottom:0; width:1px;
  background:var(--laser);
  box-shadow:0 0 3px var(--laser), 0 0 7px rgba(0,212,255,.55);
  z-index:5; pointer-events:none;
}
.edge-line.left{ left:0; }
.edge-line.right{ right:0; }

.top-strip{ height:8px; background:var(--ink-2); flex:0 0 auto; }

/* ===== Header ===== */
header{
  flex:0 0 auto;
  background:linear-gradient(180deg, #f4f5f7 0%, #e7e9ed 100%);
  border-bottom:1px solid var(--line);
  position:relative; z-index:10;
}
.header-inner{
  max-width:1200px; margin:0 auto;
  padding:var(--sp-3) var(--gutter);
  display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:var(--sp-5);
}
.logo{ display:flex; align-items:center; }
.logo img{ height:58px; width:auto; display:block; }

.menu-btn{
  appearance:none; background:none; border:none;
  width:44px; height:44px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.menu-btn:hover{ background:var(--paper); }
.menu-btn .bars{ width:24px; height:18px; position:relative; }
.menu-btn .bars span{
  position:absolute; right:0; left:0; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-btn .bars span:nth-child(1){ top:0; }
.menu-btn .bars span:nth-child(2){ top:8px; }
.menu-btn .bars span:nth-child(3){ top:16px; }
.site-frame.nav-open .menu-btn .bars span:nth-child(1){ top:8px; transform:rotate(45deg); }
.site-frame.nav-open .menu-btn .bars span:nth-child(2){ opacity:0; }
.site-frame.nav-open .menu-btn .bars span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* slide-down nav */
.nav-panel{
  max-height:0; overflow:hidden; background:var(--white);
  border-bottom:1px solid transparent;
  transition:max-height .3s ease, border-color .3s ease;
}
.site-frame.nav-open .nav-panel{ max-height:560px; border-bottom-color:var(--line); }
.site-frame.nav-instant .nav-panel{ transition:none; }
.nav-panel ul{
  list-style:none; max-width:1200px; margin:0 auto;
  padding:var(--sp-2) var(--gutter) var(--sp-5);
  display:flex; flex-direction:column; gap:2px;
}
.nav-panel a{
  display:block; padding:var(--sp-3) var(--sp-2);
  color:var(--ink); text-decoration:none; font-weight:500; font-size:15px;
  border-radius:var(--radius-sm);
  transition:background .15s ease, color .15s ease;
}
.nav-panel a:hover{ background:var(--paper); color:var(--accent); }

/* ===== Layout primitives ===== */
main{ flex:1 1 auto; background:var(--paper); }

/* every content section: same width, same gutters, same top rhythm */
.operators, .faq, .contact, .page-head, .blog-list, .section-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.operators, .faq, .contact{ padding-top:var(--section-y); }
main > :last-child{ padding-bottom:var(--section-y); }

/* one heading style for every section */
.operators h2, .faq h2, .contact h2, .section-head h2{
  font-size:clamp(24px, 4.6vw, 34px);
  font-weight:800;
  line-height:1.3;
  margin-bottom:var(--head-gap);
}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--head-gap);
}
.section-head h2{ margin-bottom:0; }
.section-link{
  flex:0 0 auto; font-size:14px; font-weight:700; color:var(--accent); text-decoration:none;
  padding:var(--sp-1) 0;
}
.section-link:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:var(--radius-sm);
  font:inherit; font-size:14.5px; font-weight:700; text-decoration:none; white-space:nowrap;
  cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:var(--white); box-shadow:0 8px 20px -8px rgba(230,64,44,.6); }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-outline{ background:var(--white); color:var(--accent); border-color:var(--accent); }
.btn-outline:hover{ background:#fff5f4; }

/* ===== Hero ===== */
.hero{
  max-width:1080px; margin:0 auto;
  padding:var(--sp-8) var(--gutter) var(--sp-7);
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-7); align-items:center;
}
.hero h1{
  font-size:clamp(30px, 4.3vw, 44px);
  font-weight:800; line-height:1.4; text-wrap:balance;
  margin-bottom:var(--sp-4);
}
.hero h1 .highlight{
  background:linear-gradient(180deg, transparent 60%, rgba(0,212,255,.35) 60%);
  padding:0 2px;
}
.hero-sub{
  font-size:17px; line-height:2; color:var(--body-text);
  max-width:46ch; margin-bottom:var(--sp-6);
}
.hero-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.hero-actions .btn{ min-width:170px; }
.hero-trust{
  list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-5); font-size:13.5px; font-weight:600; color:var(--muted);
}
.hero-trust li{ display:flex; align-items:center; gap:6px; }
.hero-trust svg{
  width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:#e3f6ea;
  fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}

/* brand board: real brands from the database, doubles as the hero visual */
.hero-board{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 30px 60px -36px rgba(22,24,41,.45);
  overflow:hidden; position:relative;
}
.hero-board::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--laser), var(--accent)); }
.board-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--sp-5) var(--sp-5) var(--sp-3); font-size:14px; font-weight:800;
}
.board-live{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted-2); }
.board-live i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(32,179,86,.18); }
.board-list{ list-style:none; padding:0 var(--sp-3); }
.board-list li{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-2); border-top:1px solid var(--line);
}
.board-list li:first-child{ border-top:none; }
.board-list img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--line); flex:0 0 auto; }
.board-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.board-info b{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-info span{ font-size:12.5px; color:var(--green); font-weight:700; }
.board-rate{ font-size:13.5px; font-weight:800; display:flex; gap:4px; align-items:center; }
.board-rate span{ color:#fbbf24; }
.board-foot{
  display:block; text-align:center; padding:var(--sp-3); margin-top:var(--sp-2);
  background:var(--paper); border-top:1px solid var(--line);
  font-size:13.5px; font-weight:700; color:var(--ink); text-decoration:none;
}
.board-foot:hover{ color:var(--accent); }

.hero-logos{ display:none; }

/* ===== Stats ===== */
.stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:var(--sp-7); padding-top:var(--sp-6);
  border-top:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column-reverse; align-items:center; text-align:center; padding:0 var(--sp-2); }
.stat + .stat{ border-right:1px solid var(--line); }
.stat .stat-num{ display:flex; align-items:baseline; justify-content:center; gap:3px; font-size:clamp(22px, 4.4vw, 32px); font-weight:800; white-space:nowrap; line-height:1.3; }
.stat-plus{ color:var(--accent); }
.stat-unit{ font-size:.55em; font-weight:700; color:var(--body-text); margin-right:3px; }
.stat .stat-label{ margin-top:var(--sp-1); font-size:13px; color:var(--muted-2); white-space:nowrap; }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .hero-board{ display:none; }
  .hero-logos{
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    font-size:13px; font-weight:600; color:var(--muted-2);
  }
  .hero-logos span{ margin-left:var(--sp-1); }
  .hero-logos img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--white); box-shadow:0 0 0 1px var(--line); }
}
@media (max-width:640px){
  .header-inner{ padding:var(--sp-3) var(--gutter); }
  .logo img{ height:44px; }
  .hero{ padding:var(--sp-7) var(--gutter) var(--sp-6); }
  .hero-sub{ font-size:15.5px; margin-bottom:var(--sp-5); }
  .hero-actions .btn{ flex:1 1 0; min-width:0; padding:14px 10px; font-size:14px; }
  .hero-trust{ flex-direction:column; gap:var(--sp-2); }
  .stats{ margin-top:var(--sp-6); padding-top:var(--sp-5); }
  .stat .stat-num{ font-size:20px; }
  .stat .stat-label{ font-size:11.5px; }
}

/* ===== Ticker ===== */
.ticker-bar{
  overflow:hidden; position:relative;
  background:linear-gradient(90deg, #161829 0%, #232640 100%);
  border-top:1px solid var(--laser); border-bottom:1px solid var(--laser);
  padding:13px 0;
}
.ticker-track{
  display:inline-block; white-space:nowrap;
  color:var(--white); font-size:14px; font-weight:600;
  animation:ticker-move 16s linear infinite;
}
@keyframes ticker-move{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100vw); } }
@media (max-width:640px){ .ticker-track{ font-size:12.5px; animation-duration:13s; } }

/* ===== Brands ===== */
.op-item:last-child .op-row{ border-bottom:1px solid var(--line); }
.op-row{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-2);
  border-top:1px solid var(--line);
  cursor:pointer; border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.op-row:hover, .op-item.open .op-row{ background:var(--white); }

.op-details{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.op-item.open .op-details{ max-height:640px; }
.op-tags{ display:flex; gap:var(--sp-2); padding:var(--sp-4) var(--sp-2) 0; flex-wrap:wrap; }
.op-tag{
  font-size:12px; font-weight:700; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px;
}
.op-facts{ display:flex; flex-direction:column; padding:var(--sp-3) var(--sp-2) 0; }
.op-fact{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--sp-2) 0; border-bottom:1px dashed var(--line); font-size:13.5px;
}
.op-fact:last-child{ border-bottom:none; }
.op-fact-label{ color:var(--muted); font-weight:600; }
.op-fact-value{ font-weight:700; }
.op-actions{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-2) var(--sp-5); }
.op-register-green, .op-secondary-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; font-size:14px; font-weight:700; text-decoration:none; border-radius:9px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.op-register-green{ background:var(--green); color:var(--white); box-shadow:0 8px 18px -9px rgba(32,179,86,.6); }
.op-register-green:hover{ background:#1a9548; transform:translateY(-1px); }
.op-secondary-btn{ background:var(--white); color:var(--ink); border:2px solid var(--line); }
.op-secondary-btn:hover{ border-color:var(--line-strong); transform:translateY(-1px); }

.op-rank{ flex:0 0 auto; width:22px; font-size:14px; font-weight:700; color:#9698a6; text-align:center; }
.op-logo{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.op-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.op-info{ flex:1 1 auto; min-width:0; }
.op-name{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-commission{ font-size:12.5px; color:var(--muted-2); margin-top:2px; }
.op-rating{ flex:0 0 auto; display:flex; align-items:center; gap:5px; font-size:14px; font-weight:700; }
.op-rating .star{ color:#fbbf24; font-size:15px; line-height:1; }
@media (max-width:420px){
  .op-name{ font-size:13.5px; }
  .op-commission{ font-size:11px; }
  .op-logo{ width:38px; height:38px; }
}

/* ===== Articles band (homepage) ===== */
.articles{
  margin-top:var(--section-y);
  padding-block:var(--section-y);
  background:var(--white);
  border-block:1px solid var(--line);
}

/* auto-moving card rail */
.rail-track{
  --cols:3;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--sp-5)) / var(--cols));
  gap:var(--sp-5);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:var(--sp-1) 0 var(--sp-2);   /* room for focus ring + hover lift */
  margin:calc(var(--sp-1) * -1) 0 0;
}
.rail-track::-webkit-scrollbar{ display:none; }
.rail-item{ scroll-snap-align:start; display:flex; }
.rail-item > .post-card{ flex:1 1 auto; }
@media (max-width:860px){ .rail-track{ --cols:2; gap:var(--sp-4); grid-auto-columns:calc((100% - var(--sp-4)) / 2); } }
@media (max-width:560px){ .rail-track{ grid-auto-columns:84%; } }

.rail-controls{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.rail-controls[hidden]{ display:none; }
.rail-btn{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.rail-btn:hover{ border-color:var(--ink); }
.rail-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.rail-dots{ display:flex; gap:6px; align-items:center; }
.rail-dot{
  width:8px; height:8px; padding:0; border:none; border-radius:999px; cursor:pointer;
  background:var(--line-strong); transition:width .25s ease, background .25s ease;
}
.rail-dot[aria-current="true"]{ width:22px; background:var(--accent); }

/* ===== Article card ===== */
.post-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex;
  transition:border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 14px 28px -18px rgba(22,24,41,.35); }
.post-card-link{ display:flex; flex-direction:column; width:100%; color:inherit; text-decoration:none; }
.post-card-media{ aspect-ratio:16/9; background:var(--ink); overflow:hidden; position:relative; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-ph{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 49.5%, rgba(0,212,255,.45) 50%, transparent 50.5%) center/100% 100% no-repeat,
    linear-gradient(135deg, #161829 0%, #2b2d3d 100%);
}
.post-card-body{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-4) var(--sp-5); flex:1 1 auto; }
.post-card-title{
  font-size:16px; font-weight:800; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card-excerpt{
  font-size:13.5px; line-height:1.85; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card-meta{
  margin-top:auto; padding-top:var(--sp-2);
  display:flex; gap:var(--sp-3); flex-wrap:wrap;
  font-size:12.5px; color:var(--muted-2);
}
.post-card-meta span::before{ content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; vertical-align:middle; margin-left:var(--sp-3); }

/* ===== FAQ ===== */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:none; font-family:inherit; text-align:right; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-1); cursor:pointer;
}
.faq-q span.q-text{ font-size:16px; font-weight:700; line-height:1.6; }
.faq-q .q-icon{ flex:0 0 auto; width:22px; height:22px; position:relative; }
.faq-q .q-icon::before, .faq-q .q-icon::after{
  content:""; position:absolute; background:#9698a6; border-radius:2px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-q .q-icon::before{ width:14px; height:2px; }
.faq-q .q-icon::after{ width:2px; height:14px; transition:transform .25s ease, opacity .25s ease; }
.faq-item.open .q-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:600px; }
.faq-a p{ padding:0 var(--sp-1) var(--sp-5); font-size:14.5px; line-height:1.95; color:#565a6e; }

/* ===== Contact ===== */
.contact{ text-align:center; }
.contact-cards{ display:flex; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; }
.contact-card{
  flex:1 1 220px; max-width:280px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-4); text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-card:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 24px -12px rgba(0,0,0,.15); }
.contact-card .c-icon{ font-size:26px; margin-bottom:var(--sp-3); }
.contact-card .c-label{ font-size:13px; color:#9698a6; margin-bottom:var(--sp-1); }
.contact-card .c-value{ font-size:15px; font-weight:700; direction:ltr; unicode-bidi:plaintext; }

/* ===== Blog list page ===== */
.page-head{ padding-top:var(--sp-7); padding-bottom:var(--sp-6); }
.crumbs{ display:flex; flex-wrap:wrap; gap:var(--sp-2); font-size:13px; color:var(--muted-2); margin-bottom:var(--sp-4); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }
.page-head h1{ font-size:clamp(26px, 5.5vw, 40px); font-weight:800; line-height:1.3; margin-bottom:var(--sp-3); }
.lede{ font-size:15.5px; line-height:1.9; color:var(--muted); max-width:62ch; }

.post-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-5); }
@media (max-width:860px){ .post-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-4); } }
@media (max-width:560px){ .post-grid{ grid-template-columns:1fr; } }

.pager{ display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-7); font-size:14px; color:var(--muted); }
.pager a{
  padding:10px 18px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); color:var(--ink); font-weight:700; text-decoration:none;
}
.pager a:hover{ border-color:var(--ink); }

.empty-state{
  background:var(--white); border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:var(--sp-7) var(--sp-5); text-align:center; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
}

/* ===== Single article ===== */
.draft-bar{
  background:#fdf7e6; border-bottom:1px solid #f1dfa6; color:#7a5a00;
  padding:var(--sp-3) var(--gutter); text-align:center; font-size:14px; font-weight:600;
}
.draft-bar a{ color:inherit; }

.article{ max-width:760px; margin:0 auto; padding:var(--sp-7) var(--gutter) 0; }
.article-head h1{ font-size:clamp(26px, 5.4vw, 38px); font-weight:800; line-height:1.45; margin-bottom:var(--sp-4); }
.article-meta{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:13.5px; color:var(--muted-2); }
.article-meta > * + *::before{ content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; vertical-align:middle; margin-left:var(--sp-4); }

.article-cover{ margin:var(--sp-6) 0 0; border-radius:var(--radius); overflow:hidden; background:var(--line); aspect-ratio:16/9; }
.article-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.article-layout{ padding-top:var(--sp-6); }

.toc{ margin-bottom:var(--sp-6); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.toc summary{
  list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-5);
  font-weight:800; font-size:15px; display:flex; justify-content:space-between; align-items:center;
}
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{ content:""; width:8px; height:8px; border-left:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2); transform:rotate(-45deg); transition:transform .2s ease; }
.toc details[open] summary::after{ transform:rotate(135deg); }
.toc ol{ list-style-type:persian; padding:0 var(--sp-7) var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); font-size:14.5px; line-height:1.8; }
.toc a{ color:var(--body-text); text-decoration:none; }
.toc a:hover{ color:var(--accent); }

/* long-form typography (~65 characters per line) */
.prose{ font-size:17px; line-height:2.05; color:var(--body-text); overflow-wrap:break-word; }
.prose > * + *{ margin-top:var(--sp-5); }
.prose h2{ font-size:clamp(21px, 3.6vw, 25px); line-height:1.6; font-weight:800; color:var(--ink); margin-top:var(--sp-7); scroll-margin-top:var(--sp-5); }
.prose h3{ font-size:19px; line-height:1.7; font-weight:800; color:var(--ink); margin-top:var(--sp-6); }
.prose h4{ font-size:17px; font-weight:800; color:var(--ink); margin-top:var(--sp-5); }
.prose h2 + *, .prose h3 + *, .prose h4 + *{ margin-top:var(--sp-3); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.prose strong{ color:var(--ink); }
.prose ul, .prose ol{ padding-right:var(--sp-5); }
.prose ol{ list-style-type:persian; }
.prose li + li{ margin-top:var(--sp-2); }
.prose li::marker{ color:var(--accent); }
.prose blockquote{
  border-right:3px solid var(--laser); background:var(--white);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-sm); color:var(--ink);
}
.prose img{ display:block; height:auto; border-radius:var(--radius-sm); margin-inline:auto; }
.prose figure figcaption{ font-size:13px; color:var(--muted-2); text-align:center; margin-top:var(--sp-2); }
.prose hr{ border:none; border-top:1px solid var(--line); margin-block:var(--sp-7); }
.prose table{ display:block; overflow-x:auto; border-collapse:collapse; font-size:14.5px; line-height:1.8; }
.prose th, .prose td{ border:1px solid var(--line); padding:var(--sp-2) var(--sp-3); text-align:right; }
.prose th{ background:var(--white); color:var(--ink); }
.prose code{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.9em; }
.prose pre{ background:var(--ink); color:#e8e9f0; padding:var(--sp-4); border-radius:var(--radius-sm); overflow-x:auto; direction:ltr; text-align:left; }
.prose pre code{ background:none; border:none; padding:0; color:inherit; }

.article-cta{
  margin-top:var(--sp-7);
  background:var(--ink); color:var(--white);
  border-radius:var(--radius); padding:var(--sp-6) var(--sp-5);
  border-top:2px solid var(--laser);
}
.article-cta h2{ font-size:20px; font-weight:800; margin-bottom:var(--sp-2); }
.article-cta p{ font-size:14.5px; line-height:1.9; color:#c9cbd8; margin-bottom:var(--sp-5); }
.article-cta-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.article-cta .btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.article-cta .btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }

.related{ padding-top:var(--section-y); }
@media (max-width:560px){
  .article-cta-actions .btn{ flex:1 1 100%; }
}

/* ===== Footer ===== */
footer{
  background:linear-gradient(180deg, #eceef1 0%, #e3e5ea 100%);
  border-top:1px solid var(--line);
  padding:var(--sp-7) var(--gutter) var(--sp-6);
  text-align:center;
}
footer .footer-logo img{ height:34px; width:auto; margin:0 auto var(--sp-5); display:block; }
.footer-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-bottom:var(--sp-5); }
.footer-links a{ font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; padding:var(--sp-1) 0; }
.footer-links a:hover{ color:var(--accent); }
footer p{ max-width:520px; margin:0 auto; font-size:13.5px; line-height:1.9; color:#7c7f8f; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition-duration:.01ms !important; }
  .ticker-track{ animation:none; white-space:normal; display:block; text-align:center; padding:0 var(--gutter); }
}

/* ===== Marketplace (بازارچه تبلیغات) ===== */
.mp-section{ max-width:var(--container); margin-inline:auto; padding:var(--sp-7) var(--gutter) 0; }
.page-head + .mp-section{ padding-top:var(--sp-2); }
.mp-h2{ font-size:clamp(20px, 3.6vw, 24px); font-weight:800; margin-bottom:var(--sp-5); }
.mp-steps{
  list-style:none; counter-reset:step;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-4);
}
.mp-steps li{
  counter-increment:step; position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
}
.mp-steps li::before{
  content:counter(step, persian); width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:var(--white);
  font-weight:800; font-size:15px; margin-bottom:var(--sp-1);
}
.mp-steps b{ font-size:16px; }
.mp-steps span{ font-size:14px; line-height:1.9; color:var(--muted); }
.mp-skills{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.mp-skills a{
  display:inline-block; padding:9px 16px; border-radius:999px;
  background:var(--white); border:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.mp-skills a:hover{ border-color:var(--accent); color:var(--accent); }
.mp-note{ margin-top:var(--sp-4); font-size:13.5px; color:var(--muted); }
@media (max-width:760px){ .mp-steps{ grid-template-columns:1fr; } }

/* shared form card */
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:var(--sp-6); border-top:3px solid var(--accent);
}
.form-card h2{ font-size:clamp(20px, 3.6vw, 24px); font-weight:800; margin-bottom:var(--sp-2); }
.form-sub{ font-size:14px; color:var(--muted); line-height:1.8; margin-bottom:var(--sp-5); }
.form-card fieldset{ border:none; padding:0; margin:0 0 var(--sp-5); }
.form-card legend{
  width:100%; font-size:13px; font-weight:800; color:var(--muted-2);
  padding-bottom:var(--sp-2); margin-bottom:var(--sp-4); border-bottom:1px solid var(--line);
}
.f-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-4); }
.f-field{ margin-bottom:var(--sp-4); }
.f-field > label{ display:block; font-size:14px; font-weight:700; margin-bottom:var(--sp-2); }
.f-field .req{ color:var(--accent); }
.f-field .opt{ font-weight:400; font-size:12.5px; color:var(--muted-2); }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=tel], .form-card input[type=url], .form-card select, .form-card textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; outline:none; transition:border-color .15s ease, background .15s ease;
}
.form-card textarea{ resize:vertical; min-height:120px; line-height:1.9; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{ border-color:var(--accent); background:var(--white); }
.form-card input[dir=ltr]{ text-align:left; }
.form-card input[dir=ltr]::placeholder{ text-align:left; }
.f-file{
  display:flex; align-items:center; justify-content:center; text-align:center; position:relative;
  min-height:64px; padding:var(--sp-3); border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm);
  background:var(--paper); cursor:pointer; font-size:14px; color:var(--muted);
  transition:border-color .15s ease;
}
.f-file:hover, .f-file:focus-within{ border-color:var(--accent); }
.f-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.f-file.has-file .f-file-text{ color:var(--accent); font-weight:700; }
.f-submit{ width:100%; padding:16px; font-size:16px; }
.f-submit:disabled{ opacity:.6; cursor:wait; transform:none; }
.form-errors{
  background:#fdeeec; border:1px solid #f5c7c0; color:#9b2615;
  border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5);
  font-size:14px; line-height:1.9;
}
.hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@media (max-width:640px){
  .form-card{ padding:var(--sp-5) var(--sp-4); }
  .f-grid{ grid-template-columns:1fr; }
}

.done-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:var(--sp-7) var(--sp-5); text-align:center; max-width:560px; margin:0 auto;
}
.done-card svg{ width:56px; height:56px; margin-bottom:var(--sp-4); fill:#e3f6ea; stroke:var(--green); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.done-card h1{ font-size:24px; font-weight:800; margin-bottom:var(--sp-3); }
.done-card p{ font-size:15px; line-height:1.95; color:var(--muted); margin-bottom:var(--sp-5); }
.done-actions{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }