/* ===== درۆوەری هاوبەش + ساید بار (Sidebar) ===== */

/* سکرین (پاشبنەمای تاریک) */
.scrim{
  position:fixed;
  inset:0;
  background:rgba(20,30,24,.42);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity 1s var(--ease);
  z-index:60;
}
.scrim.open{
  opacity:1;
  pointer-events:auto;
}

/* قاڵبی درۆوەر (بۆ ساید بار و پڕۆفایل هاوبەشە) */
.side{
  position:fixed;
  top:0;
  bottom:0;
  width:80%;
  max-width:320px;
  background:var(--card);
  z-index:70;
  display:flex;
  flex-direction:column;
  font-family:"UniSIRWAN Ping", 'Noto Kufi Arabic', system-ui, sans-serif;
  box-shadow:0 0 40px rgba(20,30,24,.2);
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1);
  will-change:transform;
}
.side-right{
  right:0;
  border-radius:26px 0 0 26px;
  transform:translateX(100%);
}
.side.open{transform:translateX(0)}

/* سەرێی درۆوەر */
.side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(44,64,51,.08);
}
.side-head .brand{display:flex;align-items:center;gap:9px}
.side-head .logo{
  width:32px;height:32px;border-radius:11px;background:var(--leaf);
  display:grid;place-items:center;flex:none;
}
.side-head .logo svg{width:19px;height:19px;fill:#fff}
.side-head .brand .brand-name{
  font-family:"MahanBrand", 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size:24px;font-weight:400;color:var(--leaf);letter-spacing:3px;line-height:1;padding-top:2px;
}
/* سەردێڕی بەشەکان (پڕۆفایل، دەستەی بەرنامە) — ستایلی ئاسایی */
.side-head > .brand-name{font-size:16px;font-weight:700;color:var(--bark)}

.close-btn{
  border:none;background:rgba(44,64,51,.06);color:var(--bark);
  width:32px;height:32px;border-radius:10px;font-size:15px;cursor:pointer;
  display:grid;place-items:center;
}
.close-btn:active{background:rgba(44,64,51,.14)}

/* لیستی مێنیو */
.side-menu{padding:12px 10px;flex:1;overflow-y:auto}
.side-menu a{
  display:flex;align-items:center;gap:13px;
  padding:12px 13px;border-radius:15px;
  color:var(--bark);text-decoration:none;
  font-size:14.5px;font-weight:600;margin-bottom:2px;
  transition:background .2s ease,
             opacity .8s cubic-bezier(.16,.84,.24,1),
             transform .9s cubic-bezier(.16,.84,.24,1);
}
.side-menu a:active{background:rgba(44,64,51,.06)}
.side-menu a.on{background:rgba(62,122,85,.12);color:var(--leaf)}
.side-menu a .mi{
  width:34px;height:34px;border-radius:11px;
  background:rgba(44,64,51,.06);
  display:grid;place-items:center;flex:none;
}
.side-menu a .mi svg{width:19px;height:19px;fill:var(--bark)}
.side-menu a.on .mi{background:rgba(62,122,85,.18)}
.side-menu a.on .mi svg{fill:var(--leaf)}
.side-menu a.danger{color:#C0503E}
.side-menu a.danger .mi svg{fill:#C0503E}

.side-div{height:1px;background:rgba(44,64,51,.08);margin:10px 13px}

/* گرووپەکانی مێنیو */
.menu-group{margin-bottom:6px}
.menu-group + .menu-group{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(44,64,51,.07);
}
.group-title{
  display:block;
  padding:8px 15px 6px;
  font-size:11px;
  font-weight:700;
  color:#9AA89E;
  letter-spacing:.2px;
}

/* بەج و بەها لای چەپی ئایتم */
.side-menu a .badge,
.side-menu a .value,
.side-menu a .live-dot{
  margin-inline-start:auto;
  flex:none;
}
.side-menu a .badge{
  min-width:20px;height:20px;padding:0 6px;
  background:#C0503E;color:#fff;
  border-radius:10px;font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
.side-menu a .value{
  font-size:12px;font-weight:600;color:#8A9C8C;
  background:rgba(44,64,51,.05);
  padding:3px 10px;border-radius:10px;
}

/* خاڵی سەوزی «ئۆنلاین» بۆ چاتی ڕاستەوخۆ */
.side-menu a.live .live-dot{
  width:9px;height:9px;border-radius:50%;
  background:#2FbF6B;
  box-shadow:0 0 0 0 rgba(47,191,107,.55);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0 rgba(47,191,107,.5)}
  70% {box-shadow:0 0 0 7px rgba(47,191,107,0)}
  100%{box-shadow:0 0 0 0 rgba(47,191,107,0)}
}
@media (prefers-reduced-motion:reduce){
  .side-menu a.live .live-dot{animation:none}
}

/* ئایکۆنی سۆشیاڵ لە خوارەوەی ساید بار */
.side-social{
  display:flex;
  justify-content:center;
  gap:14px;
  padding:14px 18px 6px;
}
.side-social .soc{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  text-decoration:none;
  background:rgba(44,64,51,.06);
  transition:transform .35s cubic-bezier(.16,.84,.24,1),
             background .35s ease,
             box-shadow .35s ease;
}
.side-social .soc svg{
  width:22px;
  height:22px;
  fill:var(--bark);
  transition:fill .35s ease;
}
.side-social .soc:active{transform:scale(.9)}
.side-social .soc:hover{transform:translateY(-3px)}
.side-social .soc-tg:hover{background:#229ED9;box-shadow:0 8px 18px rgba(34,158,217,.35)}
.side-social .soc-fb:hover{background:#1877F2;box-shadow:0 8px 18px rgba(24,119,242,.35)}
.side-social .soc-tt:hover{background:#111;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.side-social .soc:hover svg{fill:#fff}

/* ===== پێی درۆوەر — تەنها نووسین ===== */
.side-foot{
  flex:none;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

/* ناوی براند */
.side-foot .foot-brand{
  font-family:"MahanBrand", 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size:25px;
  font-weight:400;
  color:var(--leaf);
  letter-spacing:3px;
  line-height:1;
  padding-top:2px;
}

/* دێڕی وەشان و ساڵ */
.side-foot .foot-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.5px;
  color:#C79A3E;
  line-height:1;
}
.side-foot .foot-ver{
  color:#C79A3E;
}
.side-foot .foot-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(199,154,62,.55);
  flex:none;
}
.side-foot .foot-year{
  color:rgba(199,154,62,.78);
  direction:ltr;
  unicode-bidi:isolate;
}
.side-foot .foot-meta svg{
  width:11px;height:11px;fill:#C79A3E;flex:none;
}

/* دێڕی مافەکان */
.side-foot .foot-copy{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.6px;
  color:#B0BCB2;
  line-height:1;
}

/* دەرکەوتنی زنجیرەیی — هەر ئایتمێک بە نەرمی لە کەنارەوە دەخشێتە ژوورەوە */
.side .side-head,
.side .profile-card,
.side .group-title,
.side-menu a,
.side-menu .team-open,
.side .side-social,
.side .side-foot{
  opacity:0;
  transform:translateX(22px);
  transition:opacity .8s cubic-bezier(.16,.84,.24,1),
             transform .9s cubic-bezier(.16,.84,.24,1);
  transition-delay:calc(.20s + var(--i, 0) * .06s);
}
.side.open .side-head,
.side.open .profile-card,
.side.open .group-title,
.side.open .side-menu a,
.side.open .side-menu .team-open,
.side.open .side-social,
.side.open .side-foot{
  opacity:1;
  transform:translateX(0);
}

/* لە کاتی داخستندا ئایتمەکان خێرا ڕێکدەکەونەوە، تەنها پانێڵەکە دەخشێت */
.side:not(.open) .side-head,
.side:not(.open) .profile-card,
.side:not(.open) .group-title,
.side:not(.open) .side-menu a,
.side:not(.open) .side-menu .team-open,
.side:not(.open) .side-social,
.side:not(.open) .side-foot{
  transition:none;
}

@media (prefers-reduced-motion:reduce){
  .side,.scrim{transition:none !important}
}