/* ===== HERO INTRO ===== */
.intro-hero {
  position: relative;
  padding: 48px 0 0px; /* sabit header altı güvenli boşluk */
  text-align: center;
  font-family: Manrope;
}

.intro-hero__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pill (üstte "Ben kimim?") -> Workshop ile aynı */
.intro-hero__pill {
  width: 150px;
  height: 40px;
  border-radius: 20px;
  background: var(--pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Manrope;
  font-weight: 700;
  color: #19171C; /* siyah */
  margin: 0 auto 16px;
  user-select: none;
}

/* Başlık */
.intro-hero__title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
}
.intro-hero__title .accent {
  color: #111827;
  font-weight: 800;
}

/* Açıklama */
.intro-hero__desc {
  max-width: 760px;
  color: var(--sub);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.65;
  margin: 6px auto 26px;
}

/* Butonlar */
.intro-hero__actions {
  display: flex;
  gap: 14px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 14px;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
  will-change: transform;
}

.btn--fill {
  background: #111;
  color: #fff;
  border-color: #111;
}
.btn--ghost {
  background: #fff;
  color: #111;
  border-color: #111;
}

.btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 20px rgba(17,17,17,.10);
}
.btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 3px 8px rgba(17,17,17,.08);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(56, 42, 117, .20);
}

/* Sosyal ikon şeridi */
.intro-hero__social {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 16px;
  padding: 14px 0;
  opacity: 0;          /* animasyon için */
  transform: translateY(6px);
}

.intro-hero__social::before,
.intro-hero__social::after {
  content: "";
  display: block;
  height: 1px;
  background: #E5E7EB; /* gri çizgi */
  width: min(22vw, 180px);
}

/* İkon linki */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;              /* görünmez tıklama alanı */
  border: none;
  background: transparent;
  border-radius: 9999px;     /* invisible hitbox */
  transition: transform .22s ease, opacity .22s ease;
}

.social-link img {
  display: block;
  width: 30px;               /* biraz daha büyük */
  height: 30px;
  opacity: .65;              /* normalde gri */
  filter: grayscale(1);
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}

/* Hover: siyah ve hafif büyüsün */
.social-link:hover img,
.social-link:focus-visible img {
  opacity: 1;
  filter: grayscale(1) brightness(0); /* siyah */
  transform: scale(1.08);
}

.social-link:active img {
  transform: scale(0.96);
}

/* Küçük ekranlar */
@media (max-width: 520px) {
  .intro-hero__actions { gap: 10px; }
  .intro-hero__actions .btn { width: 100%; }

  .intro-hero__social {
    gap: 18px;
  }
  .intro-hero__social::before,
  .intro-hero__social::after {
    width: 24px; /* mobilde çizgiler daha kısa */
  }
}