/* ===== دکمه‌ها ===== */
.btn {
  display: inline-block;
  text-decoration: none;
  font: 900 19px Vazirmatn,sans-serif;
  border: 4px solid var(--ink);
  background: var(--sun);
  color: #14204f;
  padding: 10px 26px;
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}

.btn:active {
  transform: translate(3px,3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.btn.red {
  background: var(--red);
  color: #fff;
}

.bar .btn {
  display: block;
  text-align: center;
  width: 100%;
}

.btn {
  background: linear-gradient(#fff6a8,#ffe03a 45%,#ffb300);
  box-shadow: 0 6px 0 #a86f00,0 12px 18px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.9);
}

.btn.red {
  background: linear-gradient(#ff8a99,#ff2a45 50%,#c8001f);
  box-shadow: 0 6px 0 #7d0014,0 12px 18px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.6);
}

.btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #7d0014,inset 0 3px 0 rgba(255,255,255,.6);
}

@media (max-width:480px) {
  .btn {
    font-size: 16px;
    padding: 9px 18px;
  }
}

.btn {
  background: linear-gradient(145deg,rgba(255,240,160,.95),rgba(255,190,50,.8))!important;
  border: 1.5px solid rgba(255,255,255,.9)!important;
  color: #4a2f00!important;
  box-shadow: 0 10px 26px rgba(255,160,0,.45),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -4px 8px rgba(200,120,0,.25)!important;
}

.btn.red {
  background: linear-gradient(145deg,rgba(255,110,130,.94),rgba(224,17,47,.84))!important;
  color: #fff!important;
  box-shadow: 0 10px 26px rgba(255,42,69,.45),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 8px rgba(120,0,20,.3)!important;
}

.btn:active {
  transform: translateY(3px);
}