/* =====================================================================
   CARD TYPE 4 — Sadece Logo Sponsor Kartı  ·  .logo-card
   =====================================================================
   Diğer tiplerden bağımsız. İçerik yok — yalnızca ortalanmış logo.
   Accent renkli kenarlık + arkada accent ışık.
   Hover: logo büyüyüp hafif öne/yukarı gelir.

   Alanlar:  name · button_url · renk · logo

   HTML iskeleti:
   ---------------------------------------------------------------------
   <section class="logo-cards">
     <a class="logo-card" style="--c:#e8b23a;" href="BUTTON_URL" target="_blank" rel="noopener">
       <img class="logo-card__logo" src="LOGO_URL" alt="NAME" />
     </a>
     ... (daha fazla)
   </section>
   ---------------------------------------------------------------------
   renk       -> style="--c: #hex"  (kenarlık + arka ışık + hover glow)
   logo       -> .logo-card__logo src
   button_url -> <a href>  (tüm kart tıklanır)
   ===================================================================== */

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

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

  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(74px, 7vw, 94px);
  padding: clamp(12px, 2vw, 18px) clamp(20px, 4vw, 42px);
  border-radius: 14px;
  background:
    radial-gradient(62% 92% at 50% 50%, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--c) 55%, #1c2634);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px -22px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s var(--ease);
}
.logo-card:hover {
  border-color: color-mix(in srgb, var(--c) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 46px -22px rgba(0, 0, 0, 0.8),
    0 0 40px -14px color-mix(in srgb, var(--c) 55%, transparent);
}
.logo-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c) 70%, #fff);
  outline-offset: 3px;
}

.logo-card__logo {
  max-width: 100%;
  max-height: clamp(32px, 4.6vw, 48px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s var(--ease), filter 0.3s ease;
}
.logo-card:hover .logo-card__logo {
  transform: scale(1.08) translateY(-3px);
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55));
}

/* =====================================================================
   RESPONSIVE — Mobil: 3'lü logo satırı, kompakt
   ===================================================================== */
@media (max-width: 720px) {
  .logo-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .logo-card {
    min-height: clamp(54px, 15vw, 72px);
    padding: clamp(9px, 3vw, 15px) clamp(6px, 2.5vw, 14px);
    border-radius: 10px;
  }
  .logo-card__logo { max-height: clamp(20px, 6.5vw, 30px); }
}

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