/* =====================================================================
   CARD TYPE 2 — Özel (Special) Sponsor Kartı  ·  sade / editoryal
   =====================================================================
   Type 1'den bağımsız. Sınıf öneki: .special-card
   Alanlar:  name · baslik · alt_baslik · button_url · renk · logo · bg_image

   HTML iskeleti:
   ---------------------------------------------------------------------
   <article class="special-card" style="--c:#e0b64a;">
     <div class="special-card__media">
       <img class="special-card__art" src="BG_IMAGE" alt="" aria-hidden="true" />
     </div>
     <div class="special-card__body">
       <span class="special-card__badge">Özel Sponsor</span>

       <!-- logo: görsel -->
       <img class="special-card__logo" src="LOGO_URL" alt="NAME" />
       <!-- veya logo: metin -->
       <span class="special-card__logo special-card__logo--text">NAME</span>

       <h2 class="special-card__title">
         <span class="t-main">BASLIK</span>
         <span class="t-sub">ALT_BASLIK</span>   <!-- opsiyonel -->
       </h2>

       <a class="special-card__btn" href="BUTTON_URL" target="_blank" rel="noopener">
         <span>Hemen Katıl</span>
       </a>
     </div>
   </article>
   ---------------------------------------------------------------------
   renk       -> style="--c: #hex"  (sol kenar çubuğu, badge, alt başlık, buton)
   logo       -> .special-card__logo (img) veya .special-card__logo--text (span)
   bg_image   -> .special-card__art src
   baslik     -> .t-main (beyaz) ;  alt_baslik -> .t-sub (renkli)
   button_url -> .special-card__btn href
   ===================================================================== */

.special-card {
  --card-bg: #0b0f16;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: min(1300px, 94vw);
  min-height: clamp(96px, 8.6vw, 116px);
  display: flex;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(90deg, #0c1119, var(--card-bg));
  border: 1px solid #1a2431;
  box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.85);
  transition: transform 0.4s var(--ease), box-shadow 0.35s ease, background 0.35s ease;
}

/* sol accent kenar çubuğu */
.special-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 4;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 35%, transparent));
  transition: width 0.3s var(--ease), box-shadow 0.3s ease;
}
.special-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(90deg, #0e141d, #0c111a);
  box-shadow: 0 42px 82px -34px rgba(0, 0, 0, 0.9);
}
.special-card:hover::before {
  width: 6px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 60%, transparent);
}

/* --- sol: karakter görseli --- */
.special-card__media {
  position: relative;
  flex: 0 0 28%;
  max-width: 300px;
  align-self: stretch;
  overflow: hidden;
}
.special-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 80% at 42% 62%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.special-card__art {
  position: absolute;
  left: 50%;
  bottom: -6%;
  height: 108%;
  width: auto;
  max-width: 116%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55));
  animation: sc-float 6s ease-in-out infinite alternate;
}
@keyframes sc-float {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-8px); }
}
.special-card:hover .special-card__art { filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.6)); }

/* --- sağ: içerik --- */
.special-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(5px, 0.8vw, 8px);
  padding: clamp(10px, 1.5vw, 16px) clamp(16px, 2.6vw, 30px);
  border-left: 1px solid color-mix(in srgb, var(--c) 18%, #1a2431);
}

.special-card__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.special-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 0.95em;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 74%, #fff);
  background:
    linear-gradient(#0b1017, #0b1017) padding-box,
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--c) 72%, transparent),
      rgba(255, 255, 255, 0.2) 55%,
      transparent 88%
    ) border-box;
  transition: box-shadow 0.3s ease, color 0.3s ease;
}
.special-card:hover .special-card__badge {
  color: color-mix(in srgb, var(--c) 88%, #fff);
  box-shadow: 0 0 20px -6px color-mix(in srgb, var(--c) 45%, transparent);
}

.special-card__logo {
  height: clamp(24px, 3vw, 38px);
  width: auto;
  max-width: 54%;
  object-fit: contain;
  object-position: left center;
}
.special-card__logo--text {
  height: auto;
  font-weight: 800;
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.special-card__title {
  font-size: clamp(0.8rem, 1.15vw, 1.02rem);
  font-weight: 800;
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.special-card__title .t-main { color: #fff; display: block; }
.special-card__title .t-sub {
  color: var(--c);
  display: block;
  font-size: 0.8em;
  margin-top: 0.1em;
}

.special-card__btn {
  align-self: flex-start;
  margin-top: 0.3em;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.58em 1.25em;
  border-radius: 8px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0a0a;
  background: var(--c);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c) 60%, transparent);
  transition: transform 0.2s var(--ease), filter 0.2s ease, box-shadow 0.25s ease;
}
.special-card__btn::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.special-card__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--c) 78%, transparent);
}
.special-card__btn:hover::after { transform: translateX(3px); }
.special-card__btn:active { transform: translateY(0); }
.special-card__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* =====================================================================
   RESPONSIVE — Mobil: kompakt YATAY banner (dikey değil)
   ===================================================================== */
@media (max-width: 720px) {
  .special-card {
    min-height: 0;
    border-radius: 12px;
  }
  .special-card::before { width: 3px; }

  /* sol: karakter — dar panel */
  .special-card__media {
    flex: 0 0 34%;
    max-width: 140px;
  }
  .special-card__art {
    height: 116%;
    max-width: 124%;
  }

  /* sağ: içerik — sıkı */
  .special-card__body {
    gap: clamp(3px, 1.2vw, 6px);
    padding: clamp(10px, 3vw, 15px) clamp(11px, 3.4vw, 17px);
  }
  .special-card__badge {
    padding: 0.3em 0.6em;
    font-size: 0.46rem;
    letter-spacing: 0.13em;
  }
  .special-card__logo { height: clamp(18px, 5vw, 28px); }
  .special-card__title {
    font-size: clamp(0.64rem, 2.7vw, 0.88rem);
    line-height: 1.16;
  }
  .special-card__btn {
    margin-top: 0.2em;
    padding: 0.5em 1em;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    border-radius: 7px;
  }
}

/* =====================================================================
   HAREKET AZALTMA
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .special-card__art { animation-duration: 11s; }
}