/* ======================================
   Modern Social Icons with SVG
   ====================================== */

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-size: 24px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.social-link:hover::before {
  width: 300px;
  height: 300px;
}

.social-link svg {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.social-link:hover svg {
  transform: scale(1.2) rotate(12deg);
}

/* ========== Facebook ========== */
.social-facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0a66c2 100%);
  color: white;
}

.social-facebook:hover {
  box-shadow: 0 12px 32px rgba(24, 119, 242, 0.5);
  transform: translateY(-6px) scale(1.1);
}

/* ========== Instagram ========== */
.social-instagram {
  background: linear-gradient(135deg, #fd1d1d 0%, #833ab4 25%, #fd1d1d 50%, #feda75 75%, #f77737 100%);
  background-size: 200% 200%;
  color: white;
  animation: gradient-shift 3s ease infinite;
}

.social-instagram:hover {
  box-shadow: 0 12px 32px rgba(253, 29, 29, 0.6);
  transform: translateY(-6px) scale(1.1) rotate(-5deg);
  animation: gradient-shift 1s ease;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== LinkedIn ========== */
.social-linkedin {
  background: linear-gradient(135deg, #0077b5 0%, #004182 100%);
  color: white;
}

.social-linkedin:hover {
  box-shadow: 0 12px 32px rgba(0, 119, 181, 0.5);
  transform: translateY(-6px) scale(1.1);
}

/* ========== YouTube ========== */
.social-youtube {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  color: white;
}

.social-youtube:hover {
  box-shadow: 0 12px 32px rgba(255, 0, 0, 0.6);
  transform: translateY(-6px) scale(1.1);
}

/* ========== Telegram ========== */
.social-telegram {
  background: linear-gradient(135deg, #0088cc 0%, #1c5a96 100%);
  color: white;
}

.social-telegram:hover {
  box-shadow: 0 12px 32px rgba(0, 136, 204, 0.5);
  transform: translateY(-6px) scale(1.1);
}

/* ========== VKontakte ========== */
.social-vk {
  background: linear-gradient(135deg, #0077ff 0%, #2b5cdb 100%);
  color: white;
}

.social-vk:hover {
  box-shadow: 0 12px 32px rgba(0, 119, 255, 0.5);
  transform: translateY(-6px) scale(1.1);
}

/* ========== TikTok ========== */
.social-tiktok {
  background: linear-gradient(135deg, #000000 0%, #25f4ee 25%, #ff0050 75%, #000000 100%);
  background-size: 200% 200%;
  color: white;
  animation: gradient-shift-tiktok 4s ease infinite;
}

.social-tiktok:hover {
  box-shadow: 0 12px 32px rgba(255, 0, 80, 0.6);
  transform: translateY(-6px) scale(1.1) rotate(5deg);
  animation: gradient-shift-tiktok 1.5s ease;
}

@keyframes gradient-shift-tiktok {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== Max ========== */
.social-max {
  background: linear-gradient(135deg, #1a8917 0%, #15ab15 50%, #06a82d 100%);
  color: white;
}

.social-max:hover {
  box-shadow: 0 12px 32px rgba(26, 137, 23, 0.6);
  transform: translateY(-6px) scale(1.1);
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .social-link {
    width: 44px;
    height: 44px;
  }

  .social-links {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .social-link {
    width: 40px;
    height: 40px;
  }

  .social-links {
    gap: 8px;
  }

  .social-link svg {
    width: 20px;
    height: 20px;
  }
}

/* ========== Accessibility ========== */
.social-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* ========== Print ========== */
@media print {
  .social-link {
    display: none;
  }
}