/* =====================================================================
   CARD TYPE 5 — Logo + Kısa Bilgi Sponsor Kartı  ·  .promo-card
   =====================================================================
   Ortada logo, altında 2 satır yazı (baslik renkli · alt_baslik beyaz),
   kartın altında ince gradyan accent çizgi.
   Hover: logo büyüyüp öne gelir, yazılar aşağı kayıp kaybolur.

   Alanlar:  name · baslik · alt_baslik · button_url · renk · logo
   (bg_image bu tipte kullanılmaz)

   HTML iskeleti:
   ---------------------------------------------------------------------
   <section class="promo-cards">
     <a class="promo-card" style="--c:#3fd06a;" href="BUTTON_URL" target="_blank" rel="noopener">
       <img class="promo-card__logo" src="LOGO_URL" alt="NAME" />
       <span class="promo-card__text">
         <span class="promo-card__title">BASLIK</span>
         <span class="promo-card__sub">ALT_BASLIK</span>
       </span>
     </a>
     ... (daha fazla)
   </section>
   ---------------------------------------------------------------------
   renk       -> style="--c: #hex"  (baslik rengi + alt çizgi + hover glow)
   logo       -> .promo-card__logo src
   baslik     -> .promo-card__title
   alt_baslik -> .promo-card__sub
   button_url -> <a href>  (tüm kart tıklanır)
   ===================================================================== */

.promo-cards {
  width: min(1300px, 94vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.promo-card {
  --card-bg: #0e1118;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 12px);
  min-height: clamp(108px, 11vw, 130px);
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.5vw, 24px) clamp(18px, 2.5vw, 24px);
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid #1b2431;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s var(--ease);
}

/* alt gradyan accent çizgi */
.promo-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  transition: left 0.3s var(--ease), right 0.3s var(--ease), height 0.3s ease, box-shadow 0.3s ease;
}

.promo-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 42%, #1b2431);
  box-shadow:
    0 24px 46px -24px rgba(0, 0, 0, 0.75),
    0 0 40px -16px color-mix(in srgb, var(--c) 42%, transparent);
}
.promo-card:hover::after {
  left: 4%;
  right: 4%;
  height: 3px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent);
}
.promo-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c) 70%, #fff);
  outline-offset: 3px;
}

/* logo — kartın üst kısmında */
.promo-card__logo {
  max-width: 82%;
  max-height: clamp(30px, 3.8vw, 42px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.32s var(--ease), filter 0.32s ease;
  z-index: 1;
}
.promo-card:hover .promo-card__logo {
  transform: scale(1.08);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

/* yazılar — logonun hemen altında */
.promo-card__text {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.promo-card__title {
  font-size: clamp(0.72rem, 1vw, 0.84rem);
  font-weight: 700;
  line-height: 1.32;
  color: var(--c);
}
.promo-card__sub {
  font-size: clamp(0.68rem, 0.95vw, 0.78rem);
  line-height: 1.32;
  color: #c8d2dd;
}

/* =====================================================================
   RESPONSIVE — Mobil: 2'li DİKEY kart (logo üstte, yazı altta)
   ===================================================================== */
@media (max-width: 720px) {
  .promo-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .promo-card {
    min-height: clamp(100px, 28vw, 126px);
    padding: 14px 10px 18px;
    border-radius: 12px;
    gap: 6px;
  }
  .promo-card__logo {
    max-height: clamp(24px, 6.5vw, 32px);
    max-width: 85%;
  }
  .promo-card__title {
    font-size: clamp(0.6rem, 2.4vw, 0.74rem);
    line-height: 1.28;
  }
  .promo-card__sub {
    font-size: clamp(0.54rem, 2vw, 0.66rem);
  }
  .promo-card::after { left: 18%; right: 18%; }
}

/* =====================================================================
   HAREKET AZALTMA
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .promo-card:hover { transform: none; }
  .promo-card:hover .promo-card__logo { transform: none; }
}