/* ============================================================
   کافه رینگ — سیستم طراحی (شاخه‌شده از افرا کافه)

   فاصله      شبکهٔ ۴ پیکسلی: 4 8 12 16 20 24 32 40 48 64
   تایپ       مقیاس ۱.۱۲۵ از پایهٔ ۱۶: 11 12 14 16 18 20
   ارتفاع     شبکهٔ ۸ پیکسلی: 40 (دکمه) 48 (ورودی) 96 (کاشی)
   آیکون      16 24 32 — ضخامت خط همیشه ۱.۵
   شعاع       4 8 12 + قرص
   ارتفاع خط  1.25 فشرده / 1.5 عادی / 1.75 باز

   نکته: روی عنصری که کلاس wrap دارد هرگز از padding خلاصه استفاده نکن،
   چون پدینگ افقی wrap را صفر می‌کند. از padding-block استفاده کن.
   ============================================================ */

/* رقم‌ها به سبک داشبورد: همهٔ رقم‌های فارسی و لاتین سایت با این فونت می‌آیند.
   RingDash همان فایل است، بدون محدودیت، برای نوشته‌های خود داشبورد. */
@font-face {
  font-family: "RingNum";
  src: url("fonts/RingNum.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+30-39, U+660-669, U+6F0-6F9;
}
@font-face {
  font-family: "RingDash";
  src: url("fonts/RingNum.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IRANSansXFaNum";
  src: url("fonts/IRANSansXFaNum-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IRANSansXFaNum";
  src: url("fonts/IRANSansXFaNum-DemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root{
  /* سرمه‌ای تابلو برای زمینه، عنابی برای سطح‌های پر، کرم برای متن */
  --ink:#0F1735; --bar:#0B1129; --raise:#151F45;
  --annab:#B5122D; --annab-2:#CF2A45; --line:#D8324A; --focus:#E5556B;
  --paper:#F1ECE2; --steel:#8E97B4; --dim:#7F8AAE; --warn:#E0A98C;
  --rule:rgba(221,228,255,.09);
  --rule-annab:rgba(216,50,74,.38);
  --tint-annab:rgba(181,18,45,.12);
  --tint-annab-2:rgba(181,18,45,.2);
  --on-annab:#FFF6EE;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --s12:48px; --s16:64px;

  --t-xs:11px; --t-sm:12px; --t-md:14px; --t-lg:16px; --t-xl:18px; --t-2xl:20px;
  --lh-tight:1.25; --lh-base:1.5; --lh-loose:1.75;

  --h-btn:40px; --h-input:48px; --h-tile:96px;
  --ic-sm:16px; --ic-md:24px; --ic-lg:32px;

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  --pad:var(--s4); --max:600px;
}

*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:IRANSansXFaNum,system-ui,sans-serif;
  font-size:var(--t-md); line-height:var(--lh-base);
}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:var(--s1);border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

.ic{
  width:var(--ic-md);height:var(--ic-md);
  stroke:var(--line);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.ic--sm{width:var(--ic-sm);height:var(--ic-sm)}
.ic--lg{width:var(--ic-lg);height:var(--ic-lg)}

/* نشان تکرارشونده: خط کوتاه عنابی */
.mark{width:var(--s8);height:2px;border:0;border-radius:1px;background:var(--annab);margin:0 auto}

/* ---------- سربرگ ---------- */
.hero{padding-block:var(--s6) var(--s4);text-align:center}
.logo{display:block;height:auto}
.lg-i{fill:var(--paper)}
.lg-r{fill:var(--annab)}
.hero .logo{width:248px;max-width:78%;margin:0 auto}
.hero__hours{margin:var(--s3) 0 0;font-size:var(--t-xs);color:var(--steel);line-height:var(--lh-loose)}
.acts{display:flex;gap:var(--s2);margin-top:var(--s4)}
.acts a{
  flex:1;height:var(--h-btn);
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid var(--rule);border-radius:var(--r-md);
  color:var(--steel);font-size:var(--t-sm);
  transition:border-color .16s ease,color .16s ease;
}
.acts a:hover{border-color:var(--rule-annab);color:var(--paper)}
.acts .ic{stroke:currentColor}
body.in-cat .hero{display:none}

/* ---------- جستجو ---------- */
.search{position:relative;padding-block:0 var(--s4)}
.search input{
  width:100%;height:var(--h-input);
  background:var(--raise);border:1px solid var(--rule);border-radius:var(--r-lg);
  color:var(--paper);font-family:inherit;font-size:var(--t-lg);
  padding:0 var(--s10) 0 var(--s4);outline:none;
}
.search input::placeholder{color:var(--steel);font-size:var(--t-md)}
.search input:focus{border-color:var(--rule-annab)}
.search .ic{
  position:absolute;right:var(--s4);top:var(--s4);
  width:var(--ic-sm);height:var(--ic-sm);stroke:var(--steel);pointer-events:none;
}

/* ---------- شبکهٔ دسته‌ها ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.tile{
  min-height:var(--h-tile);
  background:var(--raise);border:1px solid var(--rule);border-radius:var(--r-lg);
  color:inherit;padding:var(--s4) var(--s2);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  transition:border-color .16s ease,background .16s ease;
}
.tile:hover{border-color:var(--rule-annab);background:var(--tint-annab)}
.tile:active{background:var(--tint-annab-2)}
.tile b{
  font-size:var(--t-sm);font-weight:400;color:var(--paper);
  line-height:var(--lh-tight);text-align:center;
}
.tile i{font-style:normal;font-size:var(--t-xs);color:var(--dim);line-height:1}

/* ---------- نوار چسبان دسته ---------- */
.cbar{position:sticky;top:0;z-index:50;background:var(--bar);border-bottom:1px solid var(--rule)}
.cbar__in{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s2)}
.cbar__back{
  width:var(--h-btn);height:var(--h-btn);flex:none;
  display:grid;place-items:center;
  background:var(--raise);border:1px solid var(--rule);border-radius:var(--r-md);
  cursor:pointer;transition:border-color .16s ease;
}
.cbar__back:hover{border-color:var(--rule-annab)}
.cbar__t{margin:0;font-size:var(--t-xl);font-weight:600;color:var(--paper);line-height:var(--lh-tight)}
.cbar__n{font-size:var(--t-xs);color:var(--steel);line-height:var(--lh-base);margin-top:var(--s1)}
.cbar__c{margin-right:auto;font-size:var(--t-xs);color:var(--dim);white-space:nowrap}

/* ---------- پرسش دانه ---------- */
.ask{background:var(--tint-annab);border-top:1px solid var(--rule-annab);border-bottom:1px solid var(--rule-annab)}
.ask__in{padding-block:var(--s3) var(--s4)}
.ask__q{font-size:var(--t-sm);color:var(--paper);margin-bottom:var(--s3);line-height:var(--lh-base)}
.ask__opts{display:flex;gap:var(--s2)}
.ask__opts button{
  flex:1;height:var(--h-btn);
  background:none;border:1px solid var(--rule-annab);border-radius:var(--r-md);
  color:var(--steel);font-size:var(--t-md);cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.ask__opts button[aria-pressed="true"]{background:var(--annab);border-color:var(--annab);color:var(--on-annab);font-weight:600}

/* ---------- ردیف آیتم ---------- */
.rows{padding-top:var(--s1)}
.row{display:flex;align-items:baseline;gap:var(--s4);padding-block:var(--s4);border-top:1px solid var(--rule)}
.rows .row:first-child{border-top:0}
.rb{flex:1;min-width:0}
.rn{font-size:var(--t-md);color:var(--paper);line-height:var(--lh-base)}
.rs{font-size:var(--t-xs);color:var(--dim);margin-top:var(--s1);line-height:var(--lh-base)}
.rd{font-size:var(--t-sm);color:var(--steel);line-height:var(--lh-loose);margin-top:var(--s1);max-width:60ch}
.rw{
  display:inline-block;margin-top:var(--s2);
  font-size:var(--t-xs);color:var(--warn);line-height:var(--lh-base);
  border:1px solid rgba(224,169,140,.32);border-radius:var(--r-sm);padding:0 var(--s2);
}
.rp{
  font-size:var(--t-md);font-weight:600;color:var(--paper);
  white-space:nowrap;font-feature-settings:"tnum";
  border-radius:var(--r-sm);padding:0 var(--s1);margin:0 calc(var(--s1) * -1);
}
.rp.flash{animation:flash .9s ease}
@keyframes flash{0%,15%{background:rgba(216,50,74,.28)}100%{background:transparent}}
.bg{
  display:inline-block;margin-right:var(--s2);vertical-align:2px;
  font-size:var(--t-xs);color:var(--on-annab);line-height:var(--lh-base);
  background:var(--annab);border-radius:var(--r-pill);padding:0 var(--s2);
}

.pricenote{
  border-top:1px solid var(--rule);margin-top:var(--s3);padding-block:var(--s4) 0;
  font-size:var(--t-xs);color:var(--dim);line-height:var(--lh-loose);
}
.pricenote + .jump{border-top:0;margin-top:var(--s3)}

/* ---------- پرش بین دسته‌ها ---------- */
.jump{display:flex;gap:var(--s2);border-top:1px solid var(--rule);margin-top:var(--s3);padding-block:var(--s4) var(--s1)}
.jump button{
  flex:1;height:var(--h-btn);
  background:none;border:1px solid var(--rule);border-radius:var(--r-md);
  color:var(--steel);font-size:var(--t-sm);cursor:pointer;padding:0 var(--s2);
  transition:border-color .16s ease,color .16s ease;
}
.jump button:hover:not(:disabled){border-color:var(--rule-annab);color:var(--paper)}
.jump button:disabled{opacity:.28;cursor:default}

/* ---------- جستجو و حالت خالی ---------- */
.rescat{font-size:var(--t-sm);color:var(--dim);padding-block:var(--s5) 0;line-height:var(--lh-base)}
.empty{padding-block:var(--s12);text-align:center;color:var(--steel);font-size:var(--t-md);line-height:2}
.empty b{display:block;color:var(--paper);font-weight:400;font-size:var(--t-lg);margin-bottom:var(--s1)}

/* ---------- بستن صفحه ---------- */
.close{padding-block:var(--s16) 0;text-align:center}

.colophon{padding-block:0 calc(var(--s12) + env(safe-area-inset-bottom))}
.colophon .mark{margin-bottom:var(--s8)}
.colophon__text{margin:0 auto var(--s5);max-width:40ch;font-size:var(--t-sm);color:var(--paper);line-height:var(--lh-loose)}
.colophon .logo{width:132px;margin:0 auto var(--s5);opacity:.6}
.colophon__addr{
  margin:0 auto;max-width:38ch;font-style:normal;
  font-size:var(--t-sm);color:var(--steel);line-height:var(--lh-loose);
}
.colophon__hours{margin:var(--s4) 0 0;font-size:var(--t-sm);color:var(--steel);line-height:var(--lh-loose)}
.colophon__links{
  display:flex;justify-content:center;gap:var(--s6);flex-wrap:wrap;
  margin-top:var(--s5);font-size:var(--t-sm);
}
.colophon__links a{color:var(--paper);font-feature-settings:"tnum";border-bottom:1px solid var(--rule-annab);padding-bottom:1px}
.colophon__links a:hover{border-bottom-color:var(--line)}
.colophon__legal{
  margin:var(--s6) 0 0;
  font-size:var(--t-xs);color:var(--dim);line-height:var(--lh-base);
}

/* ---------- واکنش‌گرا ---------- */
@media (min-width:480px){
  :root{--pad:var(--s5);--max:640px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .hero .logo{width:280px}
}
@media (min-width:768px){
  :root{--max:840px;--t-md:16px;--t-sm:14px;--t-xs:12px;--h-tile:112px}
  .grid{grid-template-columns:repeat(5,1fr);gap:var(--s3)}
  .hero{padding-block:var(--s8) var(--s5)}
  .hero .logo{width:320px}
  .acts{max-width:480px;margin-inline:auto}
  .cbar__t{font-size:var(--t-2xl)}
  .tile .ic{width:var(--ic-lg);height:var(--ic-lg)}
}
@media (min-width:1024px){
  :root{--max:1000px}
  .grid{grid-template-columns:repeat(6,1fr)}
  .hero{padding-block:var(--s10) var(--s6)}
  .hero .logo{width:360px}
  .search{max-width:480px;margin-inline:auto}
  .rows--split{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s12)}
  .rows--split .row:nth-child(-n+2){border-top:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .cbar,.search,.jump,.ask,.acts,.close,.ph,.pop{display:none}
  body{background:#fff;color:#000}
  .rn,.rp,.cbar__t{color:#000}
  .rd{color:#444}
}




/* ============================================================
   درخشش رویدادی — بدون هیچ حلقهٔ جاوااسکریپت

   نور از سمت کاربر است و به‌صورت یک موج، فقط در سه لحظه اجرا می‌شود:
     ۱. وقتی شبکه یا فهرست وارد صفحه می‌شود  (یک بار، پلکانی)
     ۲. وقتی کاربر یک کاشی را لمس می‌کند       (فقط همان کاشی)
     ۳. وقتی وارد یک دسته می‌شود                (یک بار روی نوار)
   بعد از پایان، هزینه دقیقاً صفر است.
   ============================================================ */

/* ---------- جنس سطح: کاملاً ثابت ---------- */
.tile,.rows,.search input,.cbar__back,.acts a{
  position:relative;
  background:linear-gradient(168deg,rgba(221,228,255,.055),rgba(221,228,255,.018) 55%,rgba(0,0,0,.05));
  border:1px solid rgba(221,228,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(206,217,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 10px 24px rgba(0,0,0,.26);
}
.tile,.rows,.cbar__back{overflow:hidden;isolation:isolate}
.acts a{background:none;box-shadow:none;border-color:rgba(221,228,255,.10);color:var(--steel)}
.acts a:hover{border-color:var(--rule-annab);color:var(--paper)}

/* ---------- موج درخشش: یک لایه، فقط transform ---------- */
.tile::after,.rows::after{
  content:"";position:absolute;top:-70%;bottom:-70%;left:0;width:60%;
  pointer-events:none;z-index:0;opacity:0;
  background:linear-gradient(103deg,
    transparent 0%,
    rgba(206,217,255,.07) 40%,
    rgba(206,217,255,.16) 50%,
    rgba(206,217,255,.07) 60%,
    transparent 100%);
  transform:translate3d(-180%,0,0) skewX(-12deg);
}
.tile > *,.rows > *,.cbar__back > *{position:relative;z-index:1}

@keyframes sweep{
  0%  {opacity:0;transform:translate3d(-180%,0,0) skewX(-12deg)}
  12% {opacity:1}
  88% {opacity:1}
  100%{opacity:0;transform:translate3d(320%,0,0) skewX(-12deg)}
}

/* ۱. ورود: موج پلکانی از راست به چپ، یک بار */
.grid.sweep .tile::after{animation:sweep 1s cubic-bezier(.25,.6,.3,1) both;animation-delay:calc(var(--i) * 55ms + 160ms)}
.rows.sweep::after{animation:sweep 1.4s cubic-bezier(.25,.6,.3,1) .2s both}

/* ۲. لمس: فقط همان کاشی */
.tile.tap::after{animation:sweep .62s cubic-bezier(.25,.6,.3,1) both}
.tile{transition:transform .16s cubic-bezier(.2,.7,.2,1),border-color .16s ease}
.tile:active{transform:scale(.955)}
@media (hover:hover){.tile:hover{border-color:rgba(216,50,74,.30)}}

/* ---------- کاشی ---------- */
.tile{animation:rise .46s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 24ms)}
.tile .ic{filter:drop-shadow(0 0 6px rgba(216,50,74,.32))}
.tile b{text-shadow:0 1px 0 rgba(0,0,0,.45)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- نوار چسبان ---------- */
.cbar{
  background:rgba(11,17,41,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(206,217,255,.09);overflow:hidden;
}
.cbar::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(206,217,255,.45) 62%,transparent)}
.cbar::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:36%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(206,217,255,.15) 50%,transparent 100%);
  transform:translate3d(-160%,0,0) skewX(-14deg)}
html[data-dir="fwd"] .cbar::after{animation:barSheen 1.1s .15s cubic-bezier(.25,.6,.3,1) both}
@keyframes barSheen{to{transform:translate3d(440%,0,0) skewX(-14deg)}}
.cbar__ic{width:var(--ic-md);height:var(--ic-md);flex:none;filter:drop-shadow(0 0 8px rgba(216,50,74,.45))}
.cbar__back{transition:transform .16s ease}
.cbar__back:active{transform:scale(.93)}

/* ---------- پرسش دانه ---------- */
.ask{background:rgba(216,50,74,.07);border-color:rgba(216,50,74,.22)}
.ask__opts{position:relative}
.ask__opts::before{
  content:"";position:absolute;top:0;right:0;height:100%;width:calc(50% - var(--s1));
  border-radius:var(--r-md);background:linear-gradient(118deg,var(--annab),var(--annab-2) 50%,var(--annab));
  box-shadow:0 0 20px rgba(216,50,74,.32),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.ask__opts[data-bean="blend"]::before{transform:translateX(calc(-100% - var(--s2)))}
.ask__opts button{position:relative;z-index:1;background:none!important;border-color:transparent!important;transition:color .25s ease}
.ask__opts button[aria-pressed="true"]{color:var(--on-annab)}
.ask__opts button[aria-pressed="false"]{color:var(--steel)}

/* ---------- آیتم‌ها ---------- */
.rows{border-radius:var(--r-lg);padding:var(--s1) var(--s4);margin-top:var(--s3)}
.row{animation:focusIn .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 22ms)}
html[data-dir="still"] .row{animation:none}
@keyframes focusIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pricenote{border-top:0}
.jump button{transition:transform .16s ease,border-color .16s ease,color .16s ease}
.jump button:active:not(:disabled){transform:scale(.97)}

/* ---------- انتقال بین صفحه‌ها ---------- */
::view-transition-old(root){animation:200ms cubic-bezier(.4,0,1,1) both vtOut}
::view-transition-new(root){animation:240ms 50ms cubic-bezier(0,0,.2,1) both vtIn}
html[data-dir="fwd"]::view-transition-old(root){animation-name:vtOutFwd}
html[data-dir="fwd"]::view-transition-new(root){animation-name:vtInFwd}
html[data-dir="back"]::view-transition-old(root){animation-name:vtOutBack}
html[data-dir="back"]::view-transition-new(root){animation-name:vtInBack}
::view-transition-group(*){animation-duration:360ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
@keyframes vtOutFwd{to{opacity:0;transform:translateX(16px)}}
@keyframes vtInFwd{from{opacity:0;transform:translateX(-16px)}}
@keyframes vtOutBack{to{opacity:0;transform:translateX(-16px)}}
@keyframes vtInBack{from{opacity:0;transform:translateX(16px)}}

@media (prefers-reduced-motion:reduce){
  .tile,.row,.tile::after,.rows::after,.cbar::after,.ask__opts::before{animation:none!important;transition:none!important}
  .tile::after,.rows::after{opacity:0}
}


/* ============================================================
   کافه رینگ — افزوده‌ها روی بیس افرا
   ============================================================ */

/* ویژگی hidden نباید زیر display:flex دکمه‌ها گم شود */
[hidden]{display:none!important}

/* ---------- دکمهٔ عکس، قبل از نام آیتم ---------- */
.ph{
  position:relative;flex:none;align-self:flex-start;
  width:var(--ic-lg);height:var(--ic-lg);padding:0;
  margin-top:calc((var(--t-md) * var(--lh-base) - var(--ic-lg)) / 2);
  display:grid;place-items:center;
  background:var(--tint-annab);border:1px solid var(--rule-annab);border-radius:var(--r-md);
  cursor:pointer;transition:transform .16s ease,background .16s ease;
}
.ph::before{content:"";position:absolute;inset:-6px}   /* سطح لمس ۴۴ پیکسلی */
.ph:active{transform:scale(.93);background:var(--tint-annab-2)}
.ph .ic{position:relative;z-index:1}
.ph--none{visibility:hidden;pointer-events:none}
.row{gap:var(--s3)}
.rp{margin-right:var(--s1)}

/* ---------- پنجرهٔ عکس ---------- */
html.pop-open{overflow:hidden}
.pop{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(5,8,20,.8);
  animation:popFade .2s ease both;
}
.pop__card{
  position:relative;width:100%;max-width:520px;max-height:92vh;
  display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;
  background:var(--raise);border:1px solid var(--rule);border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.45);
  animation:popUp .26s cubic-bezier(.2,.7,.2,1) both;
}
.pop__img{
  position:relative;min-height:220px;background:var(--bar);
  display:grid;place-items:center;
}
.pop__img img{display:block;width:100%;height:auto;max-height:64vh;object-fit:contain}
.pop__st{font-size:var(--t-sm);color:var(--steel);padding:var(--s6);text-align:center}
.pop__img.is-error .pop__st{color:var(--warn)}
.pop__x{
  position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  width:var(--h-btn);height:var(--h-btn);display:grid;place-items:center;padding:0;
  background:rgba(11,17,41,.82);border:1px solid var(--rule);border-radius:var(--r-pill);
  cursor:pointer;
}
.pop__x .ic{stroke:var(--paper)}
.pop__b{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4);
  padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top:2px solid var(--annab);
}
.pop__n{flex:1;min-width:0;font-size:var(--t-lg);font-weight:600;color:var(--paper);line-height:var(--lh-base)}
.pop__p{font-size:var(--t-lg);font-weight:600;color:var(--paper);font-feature-settings:"tnum";white-space:nowrap}
.pop__d{flex-basis:100%;font-size:var(--t-sm);color:var(--steel);line-height:var(--lh-loose)}
@keyframes popFade{from{opacity:0}}
@keyframes popUp{from{transform:translateY(24px);opacity:0}}

@media (min-width:600px){
  .pop{align-items:center;padding:var(--s6)}
  .pop__card{border-bottom:1px solid var(--rule);border-radius:var(--r-lg)}
  .pop__b{padding-bottom:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  .pop,.pop__card{animation:none!important}
}

/* ============================================================
   نمای شروع — داشبورد دور موتور
   صفحه و خط‌ها و عددها زیر یک ثانیه می‌آیند، عقربه تا کات‌آف می‌رود، چهار بار
   به آن می‌خورد و به صفر برمی‌گردد، بعد کل داشبورد آرام بالا می‌رود و روی رینگِ لوگو
   می‌نشیند. فقط در باز شدن صفحهٔ اصلی؛ بعد از آن هیچ هزینه‌ای ندارد.
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background-color:var(--ink);touch-action:none;
  animation:introGone .45s ease 6.5s forwards;      /* پشتیبان، اگر اسکریپت اجرا نشود */
}
.intro--js{animation:none}
.no-intro .intro{display:none}
@keyframes introGone{to{opacity:0;visibility:hidden}}

.intro__g{
  position:relative;width:min(72vw,300px);will-change:transform;
  transition:transform 1.15s cubic-bezier(.65,0,.3,1),opacity .35s ease .85s;
}
/* لایه‌ها روی هم؛ هر کدام یک بار کشیده می‌شود و فقط transform یا opacity آن عوض می‌شود */
.i-l{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;display:block}
.i-base{position:relative;height:auto;transition:opacity .45s ease .25s}
.i-ring{opacity:0;transition:opacity .4s ease .3s}
#introD{transition:opacity .35s ease}

/* روشن شدن چراغ پشت صفحه، مثل باز کردن سوییچ: یک پرش کوتاه و بعد روشنِ کامل */
.i-lit{opacity:0;will-change:opacity;animation:iLit .6s linear .15s forwards}
@keyframes iLit{0%{opacity:0}18%{opacity:.55}30%{opacity:.2}55%{opacity:.85}100%{opacity:1}}

/* حرکت عقربه از یک مدل فیزیکی پخته شده: دور موتور تا کات‌آف بالا می‌رود،
   چهار بار جرقه قطع می‌شود، بعد گاز بسته می‌شود. عقربه جرم و فنر دارد. */
.i-ndl{transform:rotate(0deg);will-change:transform;animation:iSweep 2.06s linear .95s forwards}
@keyframes iSweep{0.00%{transform:rotate(0.0deg)}1.64%{transform:rotate(0.1deg)}3.28%{transform:rotate(1.7deg)}4.92%{transform:rotate(6.4deg)}6.56%{transform:rotate(14.3deg)}8.20%{transform:rotate(24.5deg)}9.84%{transform:rotate(35.1deg)}11.48%{transform:rotate(47.5deg)}13.11%{transform:rotate(61.7deg)}14.75%{transform:rotate(75.4deg)}16.39%{transform:rotate(90.4deg)}18.03%{transform:rotate(103.6deg)}19.67%{transform:rotate(116.6deg)}21.31%{transform:rotate(129.4deg)}22.95%{transform:rotate(142.0deg)}24.59%{transform:rotate(154.4deg)}26.23%{transform:rotate(166.6deg)}27.87%{transform:rotate(178.6deg)}29.51%{transform:rotate(190.5deg)}31.15%{transform:rotate(201.2deg)}32.79%{transform:rotate(196.9deg)}34.43%{transform:rotate(188.7deg)}36.07%{transform:rotate(187.0deg)}37.70%{transform:rotate(197.1deg)}39.34%{transform:rotate(200.8deg)}40.98%{transform:rotate(192.6deg)}42.62%{transform:rotate(185.9deg)}44.26%{transform:rotate(191.5deg)}45.90%{transform:rotate(201.3deg)}47.54%{transform:rotate(195.9deg)}49.18%{transform:rotate(187.9deg)}50.82%{transform:rotate(187.9deg)}52.46%{transform:rotate(198.5deg)}54.10%{transform:rotate(200.0deg)}55.74%{transform:rotate(191.6deg)}57.38%{transform:rotate(183.3deg)}59.02%{transform:rotate(161.8deg)}60.66%{transform:rotate(138.3deg)}62.30%{transform:rotate(119.5deg)}63.93%{transform:rotate(101.0deg)}65.57%{transform:rotate(86.4deg)}67.21%{transform:rotate(73.6deg)}68.85%{transform:rotate(62.3deg)}70.49%{transform:rotate(52.3deg)}72.13%{transform:rotate(43.5deg)}73.77%{transform:rotate(36.2deg)}75.41%{transform:rotate(31.3deg)}77.05%{transform:rotate(26.9deg)}78.69%{transform:rotate(22.5deg)}80.33%{transform:rotate(19.1deg)}81.97%{transform:rotate(16.1deg)}83.61%{transform:rotate(13.4deg)}85.25%{transform:rotate(11.0deg)}86.89%{transform:rotate(9.0deg)}88.52%{transform:rotate(7.1deg)}90.16%{transform:rotate(5.5deg)}91.80%{transform:rotate(4.1deg)}93.44%{transform:rotate(2.8deg)}95.08%{transform:rotate(1.6deg)}96.72%{transform:rotate(0.6deg)}98.36%{transform:rotate(0.0deg)}100.00%{transform:rotate(0.0deg)}}
.i-lamp{opacity:0;animation:iLamp 2.06s step-end .95s forwards}
@keyframes iLamp{0%{opacity:0}30.54%{opacity:1}34.18%{opacity:0}37.82%{opacity:1}41.46%{opacity:0}45.11%{opacity:1}48.75%{opacity:0}52.39%{opacity:1}56.03%{opacity:0}100%{opacity:0}}

/* لوگو تا لحظهٔ نشستن داشبورد پنهان است.
   ترتیب نشستن: اول عددها و عقربه خاموش می‌شوند، صفحهٔ سیاه محو می‌شود و فقط
   یک حلقهٔ کرم می‌ماند؛ حلقه بالا می‌رود و روی رینگِ لوگو می‌نشیند؛ آخر لوگو پیدا می‌شود. */
.intro-on .hero .logo{opacity:0}
.intro-go .hero .logo{opacity:1;transition:opacity .4s ease .85s}
.intro-go .intro{background-color:transparent;pointer-events:none;transition:background-color .6s ease .45s}
.intro-go .intro__g{opacity:0}
.intro-go #introD{opacity:0}
.intro-go .i-base{opacity:0}
.intro-go .i-ring{opacity:1}

@media (prefers-reduced-motion:reduce){.intro{display:none}}
@media print{.intro{display:none}}

/* فقط قیمت‌ها با رقم‌های داشبورد؛ رقم فارسیِ پنل هم به همین شکل نمایش داده می‌شود */
.rp,.pop__p{font-family:RingNum,IRANSansXFaNum,system-ui,sans-serif}

/* دکمهٔ تماس، مسیریابی یا اینستاگرامی که هنوز در پنل وارد نشده */
.acts a.is-off,.colophon__links a.is-off{opacity:.35;pointer-events:none;cursor:default}