/* Общие стили для кнопок */
.tn-btn {
  position: relative;
  display: inline-block;
  padding: 14px 32px;
  font-weight: 500;
  text-decoration: none !important;
  border: none;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  box-shadow: none; /* Убираем стандартную тень */
}

/* Чёрная кнопка (на белом фоне) */
.tn-btn.black {
  background: #000;
  color: #fff;
}

/* Белая кнопка (на чёрном фоне) */
.tn-btn.white {
  background: #fff;
  color: #000;
}

/* Тень при наведении - общий псевдоэлемент */
.tn-btn:after {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  opacity: 0;
  transition: opacity 0.3s ease, top 0.3s ease;
  z-index: 1;
}

/* Белая тень для чёрной кнопки */
.tn-btn.black:after {
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
  box-shadow: 0 4px 8px rgba(255,255,255,0.2);
}

/* Чёрная тень для белой кнопки */
.tn-btn.white:after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Анимация тени при наведении */
.tn-btn:hover:after {
  opacity: 1;
  top: -4px;
}

/* Дополнительные эффекты при наведении */
.tn-btn:hover {
  transform: translateY(-3px);
}

.tn-btn:active {
  transform: translateY(1px);
}