:root {
  --card-width: 200px;
  --card-height: 330px;
  --card-radius: 16px;
  --card-border: 4px solid #fff;

  --yonetim-start: rgba(121,39,34,0.8);
  --yonetim-end: rgba(104,12,0,0.7);

  --mod-start: rgba(242,158,30,0.8);
  --mod-end: rgba(249,209,102,0.7);

  --haber-start: rgba(36,123,160,0.8);
  --haber-end: rgba(58,179,218,0.7);

  --mimar-start: rgba(255, 123, 0, 0.8);
  --mimar-end: rgba(255, 153, 36, 0.7);

  --düzenek-start: rgba(0, 195, 255, 0.8);
  --düzenek-end: rgba(0, 77, 128, 0.7);

  --oyunici-start: rgba(82, 0, 105, 0.8);
  --oyunici-end: rgba(87, 0, 128, 0.7);

  --mobi-start: rgba(187, 187, 187, 0.8);
  --mobi-end: rgba(31, 31, 31, 0.7);

  --grafik-start: rgba(104, 144, 255, 0.8);
  --grafik-end: rgba(15, 31, 255, 0.7);

  --NFT-start: rgba(18, 161, 218, 0.8);
  --NFT-end: rgba(13, 178, 255, 0.7);
}

@media (max-width: 1000px) {
  .team-section {
    margin: 0 auto 40px;
    padding-left: 0;
    padding-right: 0;
  }
  .team-grid {
    justify-content: center !important;
  }
  .heading {
    justify-content: center !important;
    margin-left: 0;
  }
}

.team-section {
  max-width: 70%;
  margin: 0 auto 40px;
  padding: 20px 0 40px 0%;
}

.heading {
    padding-bottom: 20px;
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1d1d1d 0%, #353535 100%);
  border: 4px solid #333333;
  border-radius: 15px;
  box-shadow:
    inset 0 1px 2px rgba(206, 206, 206, 0.3),
    inset 0 -1px 2px rgba(206, 206, 206, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-drag: none;
}

.heading-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.heading .heading-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 16px;
  margin-left: -12px; 
  background:
    linear-gradient(
      to top,
      rgba(255, 123, 0, 0.788),
      rgba(255, 123, 0, 0.801)
    ),
    url('../img/background2.gif') repeat;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
  z-index: -1; 
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: flex-start;
  margin-bottom: 40px;
}


.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.568);
}

.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: linear-gradient(to top, var(--yonetim-start), var(--yonetim-end)), url('img/background2.gif') repeat;;
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.yonetim-card {
  background: linear-gradient(to top, var(--yonetim-start), var(--yonetim-end)), url('../img/avatar-bg.png') repeat;
}

.mod-card {
  background: linear-gradient(to top, var(--mod-start), var(--mod-end)), url('../img/avatar-bg.png') repeat;
}

.haberci-card {
  background: linear-gradient(to top, var(--haber-start), var(--haber-end)), url('../img/avatar-bg.png') repeat;
}

.mimar-card {
  background: linear-gradient(to top, var(--mimar-start), var(--mimar-end)), url('../img/avatar-bg.png') repeat;
}

.düzenek-card {
  background: linear-gradient(to top, var(--düzenek-start), var(--düzenek-end)), url('../img/avatar-bg.png') repeat;
}

.oyunici-card {
  background: linear-gradient(to top, var(--oyunici-start), var(--oyunici-end)), url('../img/avatar-bg.png') repeat;
}

.mobi-card {
  background: linear-gradient(to top, var(--mobi-start), var(--mobi-end)), url('../img/avatar-bg.png') repeat;
}

.grafik-card {
  background: linear-gradient(to top, var(--grafik-start), var(--grafik-end)), url('../img/avatar-bg.png') repeat;
}

.NFT-card {
  background: linear-gradient(to top, var(--NFT-start), var(--NFT-end)), url('../img/avatar-bg.png') repeat;
}

.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(255,255,255,0.2), transparent 70%);
  pointer-events: none;
}

.avatar {
  position: absolute;
  bottom: 60px; left: 50%; transform: translateX(-50%);
  image-rendering: pixelated;
  object-fit: cover;
}

.team-name {
  position: absolute;
  top: 20px; width: 100%; text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(255,255,255,0.6);
}

.team-role {
  font-weight: 500;
  position: absolute;
  font-family: 'Poppins', sans-serif;
  bottom: 16px; width: 100%; text-align: center;
  font-size: 1.1rem;
  color: rgb(255, 255, 255);
}