/* ================================================================
   هواشناسی گلستان — پایه‌ی مشترک همه‌ی صفحات (منو، شیشه، دکمه‌ها)
   ================================================================ */
:root{
  --font:'Vazirmatn',Tahoma,sans-serif;
  --gold:#e3b866; --gold-2:#f6d999; --gold-deep:#b98a3a;
  --ink:#fff; --ink-2:rgba(255,255,255,.74); --ink-3:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.16);
  /* شیشه‌ی مات (frosted) مثل slop2 — رنگش از صحنه‌ی هوا می‌آید */
  --tint:38,52,58;
  --glass:rgba(var(--tint),.34);
  --glass-hi:rgba(255,255,255,.14);
  --blur:28px;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --rail-w:84px; --gutter:20px;
  --ease:cubic-bezier(.65,0,.35,1); --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:#141c20;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
img{display:block;max-width:100%}
.num{font-feature-settings:"tnum";direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- شیشه‌ی مات ---------- */
.glass{position:relative;background:linear-gradient(160deg,var(--glass-hi),rgba(255,255,255,.03) 60%),var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22)}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ---------- دکمه‌های گرد آیفونی بالا-راست ---------- */
.ios{position:fixed;top:var(--gutter);right:var(--gutter);z-index:60;display:flex;gap:10px;direction:ltr}
.ios a,.ios button{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .35s var(--ease-out),background .3s}
.ios a:hover,.ios button:hover{transform:translateY(-2px);background:rgba(255,255,255,.26)}
.ios svg{width:20px;height:20px}
.ios .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff5a4e;color:#fff;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.ios .bell svg{transform-origin:50% 10%;animation:ring 6s 2s var(--ease) infinite}
@keyframes ring{0%,88%,100%{transform:none}90%{transform:rotate(14deg)}92%{transform:rotate(-12deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.ios .tip{position:absolute;top:54px;right:0;white-space:nowrap;font-size:11.5px;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.55);
  opacity:0;transform:translateY(-4px);transition:.25s;pointer-events:none;direction:rtl}
.ios a:hover .tip,.ios button:hover .tip{opacity:1;transform:none}

/* ================================================================
   منوی کناری (rail) — باز: مثل slop2 / جمع‌شده: لوگو مثل close-menu
   ================================================================ */
.rail{position:fixed;z-index:80;left:var(--gutter);top:var(--gutter);width:var(--rail-w);height:calc(100vh - 2*var(--gutter));
  display:flex;flex-direction:column;align-items:center;padding:12px 0 14px;border-radius:calc(var(--rail-w)/2);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 50%,rgba(255,255,255,.12)),rgba(var(--tint),.28);
  border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3);
  clip-path:inset(0 0 0 0 round calc(var(--rail-w)/2));
  transition:clip-path .7s var(--ease),height .7s var(--ease),left .45s var(--ease-out),top .45s var(--ease-out),box-shadow .4s;
  touch-action:none;user-select:none}
.rail .logo{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.72));box-shadow:0 0 0 6px rgba(255,255,255,.14),0 10px 24px -8px rgba(0,0,0,.45);
  transition:transform .4s var(--ease-out)}
.rail .logo svg{width:38px;height:38px}
.rail nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:14px;min-height:0;overflow:hidden}
.rail nav a,.rail .out{position:relative;width:68px;padding:8px 0 7px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--ink-2);transition:background .3s,color .3s,opacity .35s,transform .45s var(--ease-out)}
.rail nav a svg,.rail .out svg{width:21px;height:21px;stroke-width:1.6}
.rail nav a span,.rail .out span{font-size:10.5px;font-weight:500;line-height:1.2;text-align:center;white-space:nowrap}
.rail nav a:hover,.rail .out:hover{color:#fff;background:rgba(255,255,255,.12)}
.rail nav a.on{color:#fff;background:rgba(255,255,255,.18)}
.rail nav a.on::before{content:"";position:absolute;left:-8px;top:50%;width:3px;height:22px;margin-top:-11px;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff}
.rail .out{flex:0 0 auto;margin-top:6px}
.rail .grip{display:none}

/* حالت جمع‌شده: از پایین به بالا بسته می‌شود و فقط لوگو می‌ماند */
.rail.mini{height:86px;clip-path:inset(0 0 0 0 round 43px);cursor:grab;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.12)),rgba(var(--tint),.2)}
.rail.mini nav a,.rail.mini .out{opacity:0;transform:translateY(-16px);pointer-events:none}
.rail.mini nav a{transition-delay:calc((8 - var(--i,0)) * 25ms)}
.rail.mini.peek{height:min(calc(100vh - 2*var(--gutter)),660px);cursor:default;box-shadow:0 30px 70px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.rail.mini.peek nav a,.rail.mini.peek .out{opacity:1;transform:none;pointer-events:auto;transition-delay:calc(var(--i,0) * 30ms)}
.rail.mini .logo:hover{transform:scale(1.05)}
.rail.dragging{transition:clip-path .7s var(--ease),height .7s var(--ease);cursor:grabbing;box-shadow:0 30px 60px -10px rgba(0,0,0,.7)}
.rail.dragging .logo{transform:scale(1.08)}
.rail .hint-drag{position:absolute;top:96px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:var(--ink-2);opacity:0;transition:.3s;pointer-events:none}

/* پانویس اعتبار */
.credit{font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.credit a{color:var(--ink-2);font-weight:600}
.credit a:hover{color:var(--gold)}

/* ---------- دکمه‌ها ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--r-pill);font-weight:600;font-size:14px;
  transition:transform .3s var(--ease-out),background .3s,box-shadow .3s}
.btn svg{width:18px;height:18px}
.btn-w{background:#fff;color:#1a2226}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.btn-g{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-g:hover{background:rgba(255,255,255,.2)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2b1f08;box-shadow:0 10px 26px -12px rgba(227,184,102,.9)}
.btn-gold:hover{transform:translateY(-2px)}

@media (max-width:1100px){
  :root{--gutter:12px}
  .rail{width:64px;border-radius:32px}
  .rail .logo{width:50px;height:50px}
  .rail .logo svg{width:32px;height:32px}
  .rail.mini{height:66px}
  .rail nav a,.rail .out{width:56px}
  .ios a,.ios button{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}

/* ================================================================
   صحنه‌ی هوا (پس‌زمینه‌ی تمام‌صفحه)
   ================================================================ */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:#1b2629;--cl:.3;--cd:0;--sp:1}
#scene>*{position:absolute;inset:0;pointer-events:none}
#scene .ph{inset:-3%;background-size:cover;background-position:center 62%;opacity:0;transition:opacity 1.8s ease,filter 1.8s ease;animation:kb 46s ease-in-out infinite alternate;will-change:transform}
#scene .ph.on{opacity:1}
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1) translate3d(-1.2%,0,0)}}
#scene .tint{background:linear-gradient(180deg,rgba(var(--tint),.42) 0,rgba(var(--tint),.08) 46%,rgba(var(--tint),.3) 100%);transition:background 1.8s}
#scene.night .tint{background:linear-gradient(180deg,rgba(10,16,40,.55),rgba(14,22,48,.25) 50%,rgba(6,10,24,.55))}
#scene .clouds{bottom:auto;height:72%;background-image:var(--cloudtex);background-size:1600px 700px;background-repeat:repeat;opacity:var(--cl);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.85) 35%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.85) 35%,transparent 100%);
  filter:brightness(calc(1 - var(--cd) * .62)) blur(.4px);animation:drift calc(170s / var(--sp)) linear infinite;transition:opacity 1.8s,filter 1.8s}
#scene .clouds.b{height:92%;background-size:2600px 1140px;background-position:0 -260px;opacity:calc(var(--cl) * .75);animation:drift2 calc(300s / var(--sp)) linear infinite;filter:brightness(calc(1 - var(--cd) * .5)) blur(2px)}
@keyframes drift{to{background-position-x:-1600px}}
@keyframes drift2{to{background-position-x:-2600px}}
#scene .fogband{top:auto;left:-15%;right:-15%;bottom:4%;height:62%;opacity:0;transition:opacity 1.8s;
  background:radial-gradient(ellipse 60% 55% at 40% 62%,rgba(236,240,240,.6),transparent 70%),radial-gradient(ellipse 50% 45% at 78% 58%,rgba(236,240,240,.45),transparent 70%);
  filter:blur(26px);animation:fogm 36s ease-in-out infinite alternate}
@keyframes fogm{to{transform:translate3d(6%,-2%,0) scale(1.05)}}
#scene .glare{background:radial-gradient(circle at 80% -8%,rgba(255,226,166,.6),rgba(255,206,140,.16) 26%,transparent 56%);mix-blend-mode:screen;transition:opacity 1.8s}
#scene .flash{opacity:0;background:radial-gradient(circle at var(--fx,50%) 12%,rgba(236,242,255,.95),rgba(190,208,255,.3) 38%,transparent 72%);mix-blend-mode:screen}
#scene .flash.go{animation:flash 1.2s ease-out}
@keyframes flash{0%{opacity:0}3%{opacity:.9}8%{opacity:.08}13%{opacity:.65}28%{opacity:0}100%{opacity:0}}
#scene .shade{background:linear-gradient(90deg,rgba(8,13,15,.62) 0,rgba(8,13,15,.3) 28%,transparent 52%),
  linear-gradient(0deg,rgba(6,10,12,.78) 0,rgba(6,10,12,.32) 20%,transparent 38%),linear-gradient(180deg,rgba(6,10,12,.4) 0,transparent 16%)}