/* ==========================================================================
   Cyber Gate — Ekip Sayfası (ekip.html)
   Üye kartı, LinkedIn butonu ve fotoğraf görüntüleyici ortak dosyadadır (style.css).
   ========================================================================== */
.team-hero { text-align: center; border-bottom: 0; padding-bottom: 40px; }
.team-hero .breadcrumb { justify-content: center; }
.team-hero h1 { font-family: var(--font-brand); letter-spacing: -0.01em; }
.team-hero p { margin: 0 auto; }

/* İkinci menü (Tubelight navbar) ortak dosyadadır: style.css → .tl-nav */

/* ---------- Bölüm içeriği ---------- */
.team-panel { padding: 48px 0 96px; }
.team-panel__inner { animation: teamFade .45s var(--ease); }
@keyframes teamFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.team-panel__title {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 44px;
  font-family: var(--font-brand); font-size: clamp(24px, 3vw, 34px); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: center;
}
.team-panel__title::before, .team-panel__title::after {
  content: ""; width: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--primary)); flex-shrink: 0;
}
.team-panel__title::after { transform: scaleX(-1); }

/* Satırlar: her satır ortalı, en fazla 4 kişi */
.team-rows { display: flex; flex-direction: column; gap: 48px; }
.team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.team-row .member { width: clamp(190px, calc((100% - 3 * 24px) / 4), 270px); }
.team-row--first .member__card { box-shadow: 0 18px 40px -18px rgba(4, 142, 211, .45); }
.team-row + .team-row { padding-top: 48px; border-top: 1px dashed rgba(150, 190, 225, .14); }


/* ---------- Etkinlik ve AR-GE'ye bağlı ekipler ---------- */
.subteams { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--border); }
.subteams__title {
  margin: 0 0 32px; text-align: center;
  font-family: var(--font-brand); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: .01em;
}
.subteams__list { display: grid; gap: 24px; }
.subteam {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--tc), .07), transparent 140px), var(--surface);
  border: 1px solid rgba(var(--tc), .28);
  scroll-margin-top: calc(var(--header-h) + 80px);
}
.subteam::before {                                                   /* üstte ekip renginde ince çizgi */
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--tc)), transparent); opacity: .7;
}
.subteam__head { display: flex; align-items: center; gap: 20px; padding: 24px 28px; }
.subteam__badge { position: relative; width: 56px; height: 64px; flex-shrink: 0; display: grid; place-items: center; }
.subteam__badge .team-badge__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.subteam__badge .team-badge__shape path { fill: rgba(var(--tc), .12); stroke: rgb(var(--tc)); stroke-width: 2.4; stroke-linejoin: round; }
.subteam__badge svg.team-badge__icon { position: relative; width: 24px; height: 24px; color: rgb(var(--tc)); margin-top: -3px; }
.subteam__badge--logo.team-logo { --logo-h: 64px; width: 96px; margin: 0; flex-shrink: 0; }
.subteam__badge--logo.team-logo img { max-width: 96px; filter: drop-shadow(0 4px 12px rgba(var(--tc), .3)); }
.subteam__badge img { position: relative; width: 32px; height: 32px; object-fit: contain; margin-top: -3px; }
.subteam__meta { flex: 1; min-width: 0; }
.subteam__title a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.subteam__title a svg { width: 18px; height: 18px; opacity: .6; transition: transform .2s, opacity .2s; }
.subteam__title a:hover { color: rgb(var(--tc)); }
.subteam__title a:hover svg { opacity: 1; transform: translateX(3px); }
.subteam__title { margin: 0; font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.subteam__desc { margin: 4px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.subteam__count {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: rgb(var(--tc)); background: rgba(var(--tc), .1); border: 1px solid rgba(var(--tc), .25);
}
.subteam__count svg { width: 15px; height: 15px; }
.subteam__body { padding: 0 28px 26px; }
/* ---------- Ekip personeli: profil kartı karuseli (profile-card-testimonial-carousel) ---------- */
.tc { width: 100%; max-width: 1024px; margin: 0 auto; padding-top: 22px; border-top: 1px dashed rgba(150, 190, 225, .14); }
.tc__stage { display: flex; align-items: center; justify-content: center; }
.tc__media {                                                         /* w-[470px] h-[470px] rounded-3xl */
  width: clamp(280px, 40vw, 440px); aspect-ratio: 1 / 1; flex-shrink: 0;
  border-radius: 24px; overflow: hidden; background: #262626;
}
.tc__photo.member__photo {
  width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.tc__photo img { user-select: none; -webkit-user-drag: none; }
.tc__photo .member__initials { font-size: 96px; }
.tc__card {                                                          /* bg-card rounded-3xl shadow-2xl p-8 ml-[-80px] z-10 max-w-xl */
  position: relative; z-index: 1; flex: 1; max-width: 576px; margin-left: -80px; padding: 32px;
  border-radius: 24px; background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
}
.tc__head { margin-bottom: 24px; }
.tc__name { margin: 0 0 8px; font-family: var(--font-brand); font-size: 26px; font-weight: 700; line-height: 1.2; color: #fff; }
.tc__role { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: pre-line; }
.tc__desc { margin: 0 0 32px; font-size: 16px; line-height: 1.65; color: var(--text); white-space: pre-line; }
.tc__socials { display: flex; flex-wrap: wrap; gap: 16px; }
.tc__social {                                                        /* w-12 h-12 rounded-full */
  width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  background: #f3f4f6; color: #111827;
  transition: background-color .2s, transform .2s;
}
.tc__social:hover { background: #e5e7eb; transform: scale(1.05); }
.tc__social:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 3px; }
.tc__social svg { width: 20px; height: 20px; }

/* Geçiş: önce eski kişi kaybolur, sonra yenisi belirir (AnimatePresence mode="wait") */
.tc__media > *, .tc__content { transition: opacity .3s ease-in-out; }
.tc.is-fading .tc__media > *, .tc.is-fading .tc__content { opacity: 0; }

/* Alt gezinme: oklar + noktalar */
.tc__nav { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 32px; }
.tc__arrow {
  width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: #f9fafb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .3); transition: background-color .2s, border-color .2s;
}
.tc__arrow:hover { background: #1a3150; border-color: var(--border-strong); }
.tc__arrow svg { width: 24px; height: 24px; }
.tc__dots { display: flex; gap: 8px; }
.tc__dot { width: 12px; height: 12px; padding: 0; border-radius: 999px; background: #4b5563; transition: background-color .2s; }
.tc__dot:hover { background: #6b7280; }
.tc__dot.is-active { background: #fff; }
.tc__arrow:focus-visible, .tc__dot:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 3px; }

/* Mobil: fotoğraf üstte kare, yazılar altında ortalı */
@media (max-width: 767px) {
  .tc__stage { flex-direction: column; max-width: 384px; margin: 0 auto; text-align: center; }
  .tc__media { width: 100%; margin-bottom: 24px; }
  .tc__card { margin: 0; padding: 0 16px; max-width: none; background: transparent; border: 0; box-shadow: none; }
  .tc__head { margin-bottom: 16px; }
  .tc__name { font-size: 22px; }
  .tc__desc { font-size: 14.5px; margin-bottom: 24px; }
  .tc__socials { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tc__media > *, .tc__content { transition: none; } }
.subteam__empty { margin: 0; padding-top: 18px; color: var(--text-muted); font-size: 15px; border-top: 1px dashed rgba(150, 190, 225, .14); }

@media (max-width: 640px) {
  .team-row { gap: 14px 12px; }
  .team-row .member { width: calc((100% - 12px) / 2); }
    .subteam__head { flex-wrap: wrap; padding: 20px; gap: 14px 16px; }
  .subteam__count { order: 3; }
  .subteam__body { padding: 0 20px 22px; }
}
