/* ═══════════════════════════════════════════════════════════════════════════
   Ana sayfanın kişiselleştirilmiş blokları — yalnızca index.php yükler.
     · .vipbar      → VIP seviye ilerleme şeridi (giriş yapmışlara)
     · .resume-row  → "Kaldığın yerden devam et"
     · .prov-row    → Sağlayıcı şeridi
     · .sport-teaser→ Spor bölümü teaser'ı
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── VIP ilerleme şeridi ─────────────────────────────────────────────────── */
.vipbar { margin: 0 0 22px; }
.vipbar-inner {
    display: flex; align-items: center; gap: 16px; text-decoration: none;
    padding: 14px 18px; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, #1b1c2b 0%, #14151f 60%, #0f1018 100%);
    border: 1px solid rgba(251, 191, 36, .22);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.vipbar-inner:hover {
    border-color: rgba(251, 191, 36, .5);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.vipbar-badge {
    position: relative; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(0,0,0,.4));
    border: 1px solid var(--vb-accent, #fbbf24);
    color: var(--vb-accent, #fbbf24); font-size: 1.5rem;
    box-shadow: 0 0 18px -4px var(--vb-accent, #fbbf24);
}
.vipbar-badge b {
    position: absolute; right: -5px; bottom: -5px;
    min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vb-accent, #fbbf24); color: #1a1206;
    font-size: .72rem; font-weight: 900; border: 2px solid #14151f;
}

.vipbar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vipbar-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vipbar-title { font-size: .95rem; font-weight: 800; color: #fff; }
.vipbar-perk {
    font-size: .68rem; font-weight: 800; letter-spacing: .3px;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(251, 191, 36, .13); color: #fbbf24;
}

.vipbar-track {
    display: block; height: 7px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, .08);
}
.vipbar-track i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #fde68a);
    /* Genişliğe animasyonlu geçiş: şerit sayfa açılırken soldan dolar. */
    animation: vipFill 1.1s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes vipFill { from { width: 0 !important; } }

.vipbar-note { font-size: .76rem; color: var(--text-dim, #8b93a7); }

.vipbar-cta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
    font-size: .78rem; font-weight: 800; color: #fbbf24; white-space: nowrap;
}
.vipbar-cta i { font-size: 1.15rem; transition: transform .25s; }
.vipbar-inner:hover .vipbar-cta i { transform: translateX(3px); }

@media (max-width: 620px) {
    .vipbar-inner { gap: 12px; padding: 12px 13px; }
    .vipbar-badge { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 13px; }
    .vipbar-title { font-size: .86rem; }
    .vipbar-note { font-size: .7rem; }
    /* Ok yazısı dar ekranda satırı kırıyordu; yalnızca ok kalsın. */
    .vipbar-cta { font-size: 0; }
    .vipbar-cta i { font-size: 1.5rem; }
}

/* ── Kaldığın yerden devam et ────────────────────────────────────────────── */
.resume-row {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.resume-row::-webkit-scrollbar { display: none; }

.resume-card {
    flex: 0 0 auto; width: 132px; text-decoration: none;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; animation: resumeIn .5s cubic-bezier(.2,.85,.3,1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes resumeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.resume-thumb {
    position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--radius-md, 12px); background: #12131c;
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.18); font-size: 2rem;
    transition: border-color .25s, transform .25s;
}
.resume-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume-card:hover .resume-thumb { border-color: var(--accent-blue); transform: translateY(-4px); }

/* Üstüne gelince beliren oynat düğmesi. */
.resume-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(8, 10, 20, .55); color: #fff; font-size: 2.2rem;
    opacity: 0; transition: opacity .25s;
}
.resume-card:hover .resume-play { opacity: 1; }

.resume-name {
    font-size: .78rem; font-weight: 700; color: #fff; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.resume-prov { font-size: .67rem; color: var(--text-dim, #8b93a7); }

@media (max-width: 480px) {
    .resume-card { width: 108px; }
    .resume-name { font-size: .72rem; }
}

/* ── Sağlayıcı şeridi ────────────────────────────────────────────────────── */
.prov-row {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.prov-row::-webkit-scrollbar { display: none; }

.prov-card {
    flex: 0 0 auto; min-width: 148px; text-decoration: none;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 15px; border-radius: var(--radius-md, 12px);
    background: var(--bg-card); border: 1px solid var(--border-color);
    transition: border-color .22s, transform .22s, background .22s;
}
.prov-card:hover { border-color: var(--accent-blue); transform: translateY(-3px); background: rgba(37,99,235,.07); }
.prov-mark {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; font-size: .92rem; font-weight: 900; letter-spacing: -.5px;
    overflow: hidden;
}
/* Logo yüklendiğinde kutu beyaz zemine döner: marka simgeleri koyu renkli çiziliyor,
   mavi degradenin üstünde okunmuyorlardı. Görsel KUTUYA SIĞDIRILIR (contain) — kare
   simge de geniş yazı logosu da taşmadan, oranı bozulmadan yerleşsin. */
.prov-mark.has-logo { background: #fff; padding: 4px; }
.prov-mark img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.prov-info { min-width: 0; display: flex; flex-direction: column; }
.prov-name {
    font-size: .82rem; font-weight: 800; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prov-count { font-size: .68rem; color: var(--text-dim, #8b93a7); }

/* ── Spor teaser ─────────────────────────────────────────────────────────── */
.sport-teaser-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.st-card {
    display: block; text-decoration: none; padding: 14px 16px;
    border-radius: var(--radius-md, 12px);
    background: var(--bg-card); border: 1px solid var(--border-color);
    transition: border-color .22s, transform .22s;
}
.st-card:hover { border-color: #22c55e; transform: translateY(-3px); }
.st-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .68rem; font-weight: 800; color: var(--text-dim, #8b93a7);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px;
}
.st-live { display: inline-flex; align-items: center; gap: 5px; color: #f87171; }
.st-live b { width: 6px; height: 6px; border-radius: 50%; background: #f87171; animation: stPulse 1.4s infinite; }
@keyframes stPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.st-teams { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.st-team { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-team span { font-size: .86rem; font-weight: 700; color: #fff; min-width: 0;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.st-odd {
    padding: 8px 4px; border-radius: 9px; text-align: center;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--border-color);
    transition: background .2s, border-color .2s;
}
.st-card:hover .st-odd { border-color: rgba(34, 197, 94, .35); }
.st-odd b { display: block; font-size: .58rem; font-weight: 800; color: var(--text-dim, #8b93a7); }
.st-odd i { display: block; font-style: normal; font-size: .9rem; font-weight: 900; color: #4ade80; margin-top: 2px; }

/* Hareket azaltma: dolum, kayma ve nabız durur. */
@media (prefers-reduced-motion: reduce) {
    .vipbar-track i, .resume-card { animation: none; }
    .resume-card { opacity: 1; }
    .st-live b { animation: none; }
    .vipbar-inner:hover, .resume-card:hover .resume-thumb, .prov-card:hover, .st-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ödeme yöntemleri şeridi
   Yatay kaydırılabilir: aktif yöntem sayısı yönetimden değişiyor (şu an 12'ye
   kadar), sabit bir ızgara dar ekranda kartları okunmaz hale getiriyordu.
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-row {
    display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.pay-row::-webkit-scrollbar { height: 6px; }
.pay-row::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 99px; }

.pay-card {
    flex: 0 0 132px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 104px; padding: 14px 10px; border-radius: 14px; text-decoration: none;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--border-color);
    transition: transform .18s, border-color .18s, background .18s;
}
.pay-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, .06);
}
/* Logolar farklı en-boy oranlarında geliyor (webp/svg/png, kripto ikonları kare):
   sabit yükseklik + contain, hepsini aynı optik boyutta tutar. */
.pay-card img { height: 30px; max-width: 96px; object-fit: contain; }
.pay-card > i { font-size: 1.9rem; color: var(--accent-green, #22c55e); }
.pay-name {
    font-size: .74rem; font-weight: 700; color: var(--text-muted, #cbd5e1);
    text-align: center; line-height: 1.3; max-width: 112px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pay-min { font-size: .62rem; font-weight: 700; color: var(--text-dim, #8b93a7); }

/* ═══════════════════════════════════════════════════════════════════════════
   Güven şeridi — rakamların hepsi veritabanından
   ═══════════════════════════════════════════════════════════════════════════ */
.trust-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px;
}
.trust-item {
    display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid var(--border-color);
}
.trust-item > i { font-size: 1.7rem; color: var(--accent-yellow, #eab308); flex-shrink: 0; }
.trust-item strong {
    display: block; font-size: 1.15rem; font-weight: 900; color: #fff;
    line-height: 1.15; font-variant-numeric: tabular-nums;
}
.trust-item span {
    display: block; font-size: .71rem; font-weight: 600; color: var(--text-dim, #8b93a7);
    margin-top: 3px; text-transform: uppercase; letter-spacing: .5px;
}

@media (max-width: 560px) {
    .trust-row { grid-template-columns: repeat(2, 1fr); }
    .trust-item { padding: 13px; gap: 10px; }
    .trust-item > i { font-size: 1.4rem; }
    .trust-item strong { font-size: 1rem; }
}