/* =====================================================================
   بەشەکانی لاپەڕەی ماڵەوە — لە پانێڵی «دیزاینی ماڵەوە»ـەوە
   ===================================================================== */

/* ماڵەوە لە شاشەی گەورەدا پانتر دەبێت */
@media (min-width:700px){
  .home{ max-width:680px; }
}

/* ---------------------------------------------------------------------
   بەخێرهاتن — پێش سلایدەر
   --------------------------------------------------------------------- */
.hb-welcome{
  padding:4px 6px 16px;
  animation:hbUp .5s var(--ease) both;
}
.hb-welcome[hidden]{ display:none; }
.hb-hello{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#5E6B63;
}
.hb-wave{
  font-style:normal;
  display:inline-block;
  transform-origin:70% 70%;
  animation:hbWave 2.4s ease-in-out 0.6s 2;
}
.hb-w-title{
  margin:4px 0 2px;
  font-size:23px;
  font-weight:800;
  line-height:1.45;
  color:var(--bark);
}
.hb-w-sub{
  margin:0;
  font-size:13.5px;
  line-height:1.85;
  color:#66756B;
}
@keyframes hbWave{
  0%,60%,100%{ transform:rotate(0); }
  10%,30%{ transform:rotate(16deg); }
  20%{ transform:rotate(-8deg); }
  40%{ transform:rotate(-4deg); }
  50%{ transform:rotate(10deg); }
}

/* ---------------------------------------------------------------------
   بنەمای بەشەکان
   --------------------------------------------------------------------- */
.hb{ display:flex; flex-direction:column; gap:30px; margin-top:26px; }
.hb:empty{ display:none; }

.hb-reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s var(--ease); }
.hb-reveal.is-in{ opacity:1; transform:none; }

@keyframes hbUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.hb-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
  padding-inline:2px;
}
.hb-head-txt{ min-width:0; }
.hb-head h2{
  margin:0;
  font-size:17px;
  font-weight:800;
  line-height:1.5;
  color:var(--bark);
}
.hb-head p{
  margin:1px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:#6F7D74;
}
.hb-more{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:2px;
  height:32px;
  padding:0 12px 0 8px;
  border:0;
  border-radius:99px;
  background:rgba(62,122,85,.10);
  color:var(--leaf);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease;
}
.hb-more svg{ width:16px; height:16px; fill:currentColor; }
.hb-more:active{ background:rgba(62,122,85,.2); }

[data-place], [data-story]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hb [data-place]:focus-visible, .hb [data-story]:focus-visible, .hb button:focus-visible, .hb a:focus-visible{
  outline:2.5px solid var(--leaf);
  outline-offset:2px;
}

/* وێنەی بێ وێنە — ئایکۆن لەسەر سەوزی کاڵ */
.hb .is-icon{
  display:grid !important;
  place-items:center;
  background:
    repeating-radial-gradient(circle at 20% 110%, rgba(62,122,85,.10) 0 1.5px, transparent 1.5px 14px),
    linear-gradient(150deg, #E6EFE8, #D3E2D7);
}
.hb .is-icon img{ width:34%; max-width:44px; height:auto; }
.hb img.is-broken{ object-fit:contain !important; padding:22%; background:#E6EFE8; }

/* ---------------------------------------------------------------------
   ١ — هەواڵەکان
   --------------------------------------------------------------------- */
.hb-news-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 6px;
  margin:0 -2px;
  align-items:flex-start;
}
.hb-news-track::-webkit-scrollbar{ display:none; }
.hb-news-card{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 18px;
  border-radius:22px;
  background:var(--card);
  border:1px solid rgba(36,64,47,.07);
  box-shadow:0 3px 16px rgba(36,64,47,.07);
  color:var(--bark);
  text-decoration:none;
  position:relative;
  overflow:hidden;
}
.hb-news-card::before{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:5px;
  background:var(--hb-tone);
}
.hb-news-card.tone-new{   --hb-tone:#3E9A62; --hb-tone-bg:#DDF1E4; --hb-tone-ink:#23633C; }
.hb-news-card.tone-info{  --hb-tone:#D9A33A; --hb-tone-bg:#FBEFD5; --hb-tone-ink:#7A560C; }
.hb-news-card.tone-event{ --hb-tone:#3F86C9; --hb-tone-bg:#DDEBF8; --hb-tone-ink:#1E5687; }
.hb-tone{
  align-self:flex-start;
  padding:2px 11px;
  border-radius:99px;
  font-size:11px;
  font-weight:800;
  background:var(--hb-tone-bg);
  color:var(--hb-tone-ink);
}
.hb-news-card b{ font-size:15px; font-weight:800; line-height:1.6; }
.hb-news-body{ font-size:13px; line-height:1.85; color:#5E6B63; }
.hb-news-more{ display:inline-flex; align-items:center; gap:2px; margin-top:2px; font-size:12px; font-weight:700; color:var(--hb-tone-ink); }
.hb-news-more svg{ width:15px; height:15px; fill:currentColor; }

.hb-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.hb-dots i{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(36,64,47,.2);
  cursor:pointer;
  transition:width .4s var(--ease), background .4s ease;
}
.hb-dots i.on{ width:18px; border-radius:4px; background:var(--leaf); }

/* ---------------------------------------------------------------------
   ٢ — دوگمەی خێرا
   --------------------------------------------------------------------- */
.hb-quick{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.hb-quick.n3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.hb-quick.n2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.hb-quick.n1{ grid-template-columns:minmax(0, 1fr); }
.hb-q{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:14px 6px 12px;
  border:1px solid rgba(36,64,47,.06);
  border-radius:20px;
  background:var(--card);
  box-shadow:0 3px 14px rgba(36,64,47,.06);
  font-family:inherit;
  color:var(--bark);
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  min-width:0;
}
.hb-q:active{ transform:scale(.95); }
@media (hover:hover){ .hb-q:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(36,64,47,.12); } }
.hb-q-ic{
  width:46px; height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  margin-bottom:5px;
  background:var(--hb-q-bg);
}
.hb-q-ic svg{ width:23px; height:23px; fill:var(--hb-q); }
.hb-q.tone-green{ --hb-q:#2F7A4E; --hb-q-bg:#DDF1E4; }
.hb-q.tone-blue{  --hb-q:#2D6FB0; --hb-q-bg:#DDEBF8; }
.hb-q.tone-amber{ --hb-q:#A06D0B; --hb-q-bg:#FBEFD5; }
.hb-q.tone-rose{  --hb-q:#B23F62; --hb-q-bg:#F9E0E8; }
.hb-q b{ font-size:13px; font-weight:800; }
.hb-q small{
  font-size:10.5px;
  line-height:1.5;
  color:#7A887F;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hb-fl-label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:16px 2px 9px;
  font-size:12.5px;
  font-weight:700;
  color:#5E6B63;
}
.hb-fl-label svg{ width:15px; height:15px; fill:var(--leaf); }
.hb-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px 2px 4px;
  margin:0 -2px;
}
.hb-chips::-webkit-scrollbar{ display:none; }
.hb-chip{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 14px;
  border-radius:99px;
  border:1px solid rgba(36,64,47,.12);
  background:var(--card);
  color:var(--bark);
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .15s var(--ease);
}
.hb-chip i{
  font-style:normal;
  min-width:20px; height:20px;
  padding:0 6px;
  display:inline-grid;
  place-items:center;
  border-radius:99px;
  font-size:11px;
  background:var(--stone);
  color:#4F5E55;
}
.hb-chip:active{ transform:scale(.95); background:var(--bark); color:#fff; }

/* ---------------------------------------------------------------------
   ٣ — گوندی ئەمڕۆ
   --------------------------------------------------------------------- */
.hb-daily{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:26px;
  min-height:300px;
  color:#fff;
  background:#24402F;
  box-shadow:0 12px 32px rgba(36,64,47,.24);
  isolation:isolate;
  transition:transform .2s var(--ease);
}
.hb-daily:active{ transform:scale(.985); }
.hb-daily-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform 6s ease;
}
.hb-sec.is-in .hb-daily-img{ transform:scale(1.06); }
.hb-daily-img.is-icon{
  background:
    repeating-radial-gradient(circle at 85% 0%, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 18px),
    linear-gradient(150deg, #4E8A63, #24402F);
}
.hb-daily-img.is-icon img{
  width:88px; max-width:none;
  opacity:.9;
  margin-bottom:90px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
.hb-daily::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg, rgba(14,26,18,.92) 0%, rgba(14,26,18,.55) 40%, rgba(14,26,18,0) 72%);
}
.hb-daily-badge{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px 5px 13px;
  border-radius:99px;
  font-size:11.5px;
  font-weight:800;
  background:#F2C14E;
  color:#4A3300;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.hb-daily-badge svg{ width:14px; height:14px; fill:currentColor; animation:hbSpin 14s linear infinite; }
@keyframes hbSpin{ to{ transform:rotate(360deg); } }
.hb-daily-txt{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hb-daily-cat{
  align-self:flex-start;
  padding:2px 10px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hb-daily h3{ margin:4px 0 0; font-size:24px; font-weight:800; line-height:1.4; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.hb-daily-where{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:rgba(255,255,255,.88); }
.hb-daily-where svg{ width:14px; height:14px; fill:#9FD8B0; }
.hb-daily p{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.85;
  color:rgba(255,255,255,.86);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hb-daily-go{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-top:10px;
  padding:8px 12px 8px 16px;
  border-radius:14px;
  font-size:12.5px;
  font-weight:800;
  background:#fff;
  color:var(--bark);
}
.hb-daily-go svg{ width:16px; height:16px; fill:currentColor; }

/* ---------------------------------------------------------------------
   ٤ — گوندە تایبەتەکان (ڕیزی ئاسۆیی)
   --------------------------------------------------------------------- */
.hb-rail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:2px 2px 10px;
  margin:0 -16px;
  padding-inline:16px;
  scroll-padding-inline:16px;
}
.hb-rail::-webkit-scrollbar{ display:none; }
.hb-feat{
  flex:0 0 44%;
  max-width:190px;
  scroll-snap-align:start;
  position:relative;
  aspect-ratio:3 / 4;
  border-radius:22px;
  overflow:hidden;
  background:#DDE5DE;
  box-shadow:0 6px 18px rgba(36,64,47,.14);
  transition:transform .2s var(--ease);
}
.hb-feat:active{ transform:scale(.97); }
.hb-feat-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hb-feat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(14,26,18,.85), rgba(14,26,18,0) 55%);
}
.hb-feat-star{
  position:absolute;
  top:10px; left:10px;
  z-index:2;
  width:28px; height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#F2C14E;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.hb-feat-star svg{ width:15px; height:15px; fill:#5A3F00; }
.hb-feat-txt{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:12px;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hb-feat-txt b{ font-size:14.5px; font-weight:800; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-feat-txt span{ display:flex; align-items:center; gap:3px; font-size:11px; color:rgba(255,255,255,.86); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-feat-txt svg{ flex:none; width:12px; height:12px; fill:#9FD8B0; }
@media (min-width:700px){ .hb-feat{ flex-basis:30%; } .hb-daily{ min-height:380px; } }

/* ---------------------------------------------------------------------
   ٥ — تازە زیادکراوەکان
   --------------------------------------------------------------------- */
.hb-latest{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
@media (min-width:700px){ .hb-latest{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.hb-lt{
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  background:var(--card);
  border:1px solid rgba(36,64,47,.05);
  box-shadow:0 3px 14px rgba(36,64,47,.07);
  transition:transform .2s var(--ease);
  min-width:0;
}
.hb-lt:active{ transform:scale(.97); }
.hb-lt-media{ position:relative; aspect-ratio:16 / 11; overflow:hidden; background:#DDE5DE; }
.hb-lt-img{ width:100%; height:100%; display:block; object-fit:cover; }
.hb-new{
  position:absolute;
  top:8px; right:8px;
  padding:2px 10px;
  border-radius:99px;
  font-size:10.5px;
  font-weight:800;
  background:var(--leaf);
  color:#fff;
  box-shadow:0 3px 10px rgba(36,64,47,.25);
  animation:hbPulse 2.4s ease-in-out infinite;
}
@keyframes hbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(62,122,85,.5); } 50%{ box-shadow:0 0 0 6px rgba(62,122,85,0); } }
.hb-lt-txt{ padding:9px 12px 11px; display:flex; flex-direction:column; gap:1px; min-width:0; }
.hb-lt-txt b{ font-size:14px; font-weight:800; color:var(--bark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-lt-txt span{ font-size:11.5px; color:#6F7D74; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------------------------------------------------------------------
   ٦ — چیرۆکەکان
   --------------------------------------------------------------------- */
.hb-st-big{
  display:block;
  border-radius:24px;
  overflow:hidden;
  background:var(--card);
  border:1px solid rgba(36,64,47,.05);
  box-shadow:0 4px 18px rgba(36,64,47,.08);
  transition:transform .2s var(--ease);
}
.hb-st-big:active{ transform:scale(.985); }
.hb-st-cover{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#DDE5DE; }
.hb-st-cover.is-empty, .hb-st-row .is-empty{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #E9DCC0, #C9B37E);
}
.hb-st-cover.is-empty svg{ width:44px; height:44px; fill:rgba(90,63,0,.45); }
.hb-st-txt{ padding:14px 16px 16px; }
.hb-st-txt h3{ margin:0 0 4px; font-size:16.5px; font-weight:800; line-height:1.55; color:var(--bark); }
.hb-st-txt p{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.85;
  color:#5E6B63;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hb-st-txt small, .hb-st-row small{ font-size:11.5px; color:#7A887F; }
.hb-st-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.hb-st-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px;
  border-radius:18px;
  background:var(--card);
  border:1px solid rgba(36,64,47,.05);
  box-shadow:0 2px 10px rgba(36,64,47,.05);
}
.hb-st-row > img, .hb-st-row > .is-empty{ flex:none; width:64px; height:64px; border-radius:14px; object-fit:cover; }
.hb-st-row .is-empty svg{ width:24px; height:24px; fill:rgba(90,63,0,.45); }
.hb-st-row > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hb-st-row b{ font-size:13.5px; font-weight:800; line-height:1.6; color:var(--bark); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hb-st-go{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(62,122,85,.1); }
.hb-st-go svg{ width:16px; height:16px; fill:var(--leaf); }

/* ---------------------------------------------------------------------
   ٧ — ژمارەکان
   --------------------------------------------------------------------- */
.hb-stats{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.hb-stats.n1{ grid-template-columns:minmax(0, 1fr); }
.hb-stats.n3 .hb-stat:first-child{ grid-column:1 / -1; }
@media (min-width:700px){
  .hb-stats.n4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .hb-stats.n3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .hb-stats.n3 .hb-stat:first-child{ grid-column:auto; }
}
.hb-stat{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:16px 16px 14px;
  border-radius:22px;
  background:var(--card);
  border:1px solid rgba(36,64,47,.05);
  box-shadow:0 3px 14px rgba(36,64,47,.06);
}
.hb-stat::after{
  content:"";
  position:absolute;
  width:110px; height:110px;
  left:-40px; bottom:-50px;
  border-radius:50%;
  background:var(--hb-s-bg);
  opacity:.55;
}
.hb-stat.s0{ --hb-s:#2F7A4E; --hb-s-bg:#DDF1E4; }
.hb-stat.s1{ --hb-s:#A06D0B; --hb-s-bg:#FBEFD5; }
.hb-stat.s2{ --hb-s:#2D6FB0; --hb-s-bg:#DDEBF8; }
.hb-stat.s3{ --hb-s:#B23F62; --hb-s-bg:#F9E0E8; }
.hb-stat-ic{
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  margin-bottom:8px;
  background:var(--hb-s-bg);
}
.hb-stat-ic svg{ width:20px; height:20px; fill:var(--hb-s); }
.hb-stat b{
  position:relative;
  z-index:1;
  direction:ltr;
  text-align:right;
  font-size:28px;
  font-weight:800;
  line-height:1.2;
  color:var(--bark);
  font-variant-numeric:tabular-nums;
}
.hb-stat > span:last-child{ position:relative; z-index:1; font-size:12.5px; font-weight:600; color:#6F7D74; }

/* ---------------------------------------------------------------------
   ٨ — بەشداری بکە
   --------------------------------------------------------------------- */
.hb-contrib{
  position:relative;
  overflow:hidden;
  padding:24px 22px 22px;
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.16), transparent 50%),
    linear-gradient(150deg, #4E8A63 0%, #2E5A3F 55%, #1E3627 100%);
  box-shadow:0 14px 34px rgba(36,64,47,.28);
}
.hb-contrib::before, .hb-contrib::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.hb-contrib::before{ width:220px; height:220px; left:-70px; bottom:-110px; }
.hb-contrib::after{ width:140px; height:140px; left:-30px; bottom:-70px; }
.hb-c-ic{
  width:52px; height:52px;
  display:grid;
  place-items:center;
  border-radius:17px;
  margin-bottom:12px;
  background:rgba(255,255,255,.16);
  animation:hbBeat 2.6s ease-in-out infinite;
}
.hb-c-ic svg{ width:26px; height:26px; fill:#FFB3C4; }
@keyframes hbBeat{ 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.1); } 24%{ transform:scale(1); } }
.hb-contrib h2{ margin:0 0 4px; font-size:20px; font-weight:800; line-height:1.45; }
.hb-contrib p{ margin:0; max-width:40ch; font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.88); }
.hb-c-btns{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.hb-c-btns a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 18px;
  border-radius:15px;
  font-size:13.5px;
  font-weight:800;
  text-decoration:none;
  transition:transform .15s var(--ease), filter .15s ease;
}
.hb-c-btns a:active{ transform:scale(.96); }
.hb-c-btns svg{ width:20px; height:20px; fill:currentColor; }
.hb-c-wa{ background:#25D366; color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.35); }
.hb-c-link{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); }

/* ---------------------------------------------------------------------
   تۆست
   --------------------------------------------------------------------- */
.hb-toast{
  position:fixed;
  left:50%;
  bottom:calc(120px + env(safe-area-inset-bottom, 0px));
  z-index:9999;
  transform:translate(-50%, 20px);
  padding:10px 18px;
  border-radius:14px;
  background:var(--bark);
  color:#fff;
  font-size:13px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s var(--ease);
}
.hb-toast.show{ opacity:1; transform:translate(-50%, 0); }

@media (max-width:479px){
  .hb-quick.n4 .hb-q small, .hb-quick.n3 .hb-q small{ display:none; }
  .hb-quick.n4 .hb-q{ padding:13px 4px 11px; }
}

/* ---------------------------------------------------------------------
   شاشەی زۆر بچووک
   --------------------------------------------------------------------- */
@media (max-width:359px){
  .hb-w-title{ font-size:20px; }
  .hb-quick{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hb-quick.n3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .hb-q small{ display:none; }
  .hb-daily{ min-height:270px; }
  .hb-daily h3{ font-size:20px; }
  .hb-stat b{ font-size:23px; }
}

@media (prefers-reduced-motion:reduce){
  .hb-reveal{ opacity:1; transform:none; transition:none; }
  .hb-welcome, .hb-wave, .hb-new, .hb-c-ic, .hb-daily-badge svg{ animation:none; }
  .hb-daily-img{ transition:none; }
}