/* =========================================================
   SPONSORLAR — kart listesi
   Kart: logo, altın Başlık 1, beyaz Başlık 2, altın düğme.
   Satırda 2 kart; renkler sitenin diğer kartlarıyla aynı dil
   (lacivert gradyan, ince çizgi, altın vurgu, hap düğme).

   Sürekli çalışan animasyon YOK. Önceki tasarımın dönen ışık
   katmanları ve kayan parıltısı telefonda sayfayı donduruyordu
   (bkz. sponsorlar.php başındaki ölçüm notu). Yalnızca üzerine
   gelince / dokununca kısa bir geçiş var.
   ========================================================= */

/* ---------------- başlık ---------------- */
.spk-hero {
    margin: 26px 0 20px;
    padding: 4px 2px 0;
}
.spk-hero__uzeri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--gold);
}
.spk-hero__uzeri::before {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
/* Durağan altın gradyan yazı — hareket yok, boşta maliyeti de yok. */
.spk-hero__t {
    margin: 10px 0 0;
    font-size: clamp(30px, 6.4vw, 54px);
    font-weight: 900;
    letter-spacing: clamp(1px, .6vw, 5px);
    line-height: 1.02;
    background: linear-gradient(180deg, #f4f8ff 0%, var(--accent-2) 45%, var(--accent-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.spk-hero__s {
    margin: 12px 0 0;
    max-width: 58ch;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.7;
}

/* ---------------- ızgara ---------------- */
/* Satırda iki kart — masaüstünde de, telefonda da. Yalnız çok dar
   ekranda (340 px altı) tek sütuna düşer. */
.spk-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* ---------------- kart ---------------- */
.spk {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 28px 28px 26px;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background:
        radial-gradient(60% 70% at 50% 0%, rgba(var(--accent-rgb), .12), transparent 70%),
        linear-gradient(180deg, rgba(23, 39, 65, .92), rgba(11, 21, 38, .96));
    box-shadow: var(--shadow);
    color: var(--text);
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}
/* üst kenarda ince altın çizgi — durağan */
.spk::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent);
}
.spk:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), .45);
}
.spk:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.spk__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    margin-bottom: 18px;
}
.spk__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 62%;
    max-height: 100%;
    object-fit: contain;
}
/* logo yüklenmemiş sponsor: adı yazılır */
.spk__ad {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .5px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.spk__b1 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--gold-2);
    overflow-wrap: anywhere;
}
.spk__b2 {
    margin-top: 4px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* sitedeki altın hap düğmeyle aynı */
.spk__btn {
    display: block;
    width: 100%;
    max-width: 340px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 99px;
    border: 1px solid var(--gold);
    background: var(--cta-bg);
    box-shadow: var(--cta-glow);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: filter .18s ease;
}
.spk:hover .spk__btn { filter: brightness(1.07); }

/* ---------------- boş durum / not ---------------- */
.spk-bos {
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 52px 20px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--line-2);
    background: linear-gradient(180deg, rgba(23, 39, 65, .6), rgba(11, 21, 38, .8));
    text-align: center;
}
.spk-bos__ic { width: 34px; height: 34px; color: var(--gold); opacity: .6; }
.spk-bos b { font-size: 14.5px; }
.spk-bos span { color: var(--text-3); font-size: 12.5px; }

.spk-not {
    margin: 18px 2px 0;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.6;
}

/* ---------------- dar ekran ---------------- */
@media (max-width: 900px) {
    .spk { padding: 22px 18px 20px; }
    .spk__logo { height: 60px; margin-bottom: 14px; }
    .spk__logo img { max-width: 78%; }
    .spk__b1 { font-size: 13.5px; }
    .spk__b2 { font-size: 14px; }
}
@media (max-width: 560px) {
    .spk-hero { margin: 18px 0 14px; }
    .spk-izgara { gap: 10px; }
    .spk { padding: 16px 10px 14px; border-radius: var(--r); }
    .spk__logo { height: 44px; margin-bottom: 10px; }
    .spk__logo img { max-width: 92%; }
    .spk__ad { font-size: 17px; }
    .spk__b1 { font-size: 11px; letter-spacing: .2px; }
    .spk__b2 { margin-top: 2px; font-size: 11.5px; letter-spacing: .2px; }
    .spk__btn { margin-top: 12px; padding: 10px 8px; font-size: 12px; letter-spacing: .4px; }
}
@media (max-width: 340px) {
    .spk-izgara { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .spk, .spk__btn { transition: none; }
    .spk:hover { transform: none; }
}