/* VKM Standings Bar — Süper Lig puan şeridi (mu-plugin: vkm-standings-bar)
 * Kutusuz tasarım: kart arka planı / puan pill'i YOK, vurgu yalnız hover'da.
 * Masaüstü ve tablet: konteyner içinde yuvarlak çerçeveli kutu. Yalnız mobil
 * (<768px): kutu yok, header'a sıfıra sıfır tam genişlik şerit + alt çizgi.
 * Her boyutta DİKEY kart (rank / logo / kısaltma; puan yalnız tooltip'te),
 * kartlar takım linki.
 * Sığarsa: kartlar flex-grow ile konteynere %100 yayılır, tek satır.
 * Sığmazsa: JS .is-marquee açar → doğal genişlikte kartlar + uçlarda yön
 * değiştiren ping-pong akış (3 sn gecikmeli), swipe/fling ile kaydırılabilir.
 * Skeleton öğeler gerçek öğeyle birebir aynı DOM'u kullanır (.is-skel). */

.vkmsb-wrap { margin: 10px auto 2px; }

.vkmsb {
    position: relative; /* tooltip bar'a göre konumlanır */
    padding: 4px;
    border: 1px solid rgba(127, 127, 127, .16);
    border-radius: 12px;
}

/* YALNIZ mobil (<768px): kutu görünümü YOK — üst navigation'a sıfıra sıfır,
 * tam genişlik (tema konteyner kısıtları sıfırlanır), yalnız alt çizgi.
 * Mobilden geniş tüm ekranlar (tablet dahil) kutulu düzen kullanır; marquee
 * karara JS genişlik ölçümüyle vardığı için taşan her genişlikte çalışır. */
@media (max-width: 767px) {
    .vkmsb-wrap { margin: 0; }
    .cs-container.vkmsb-wrap { max-width: none; padding-left: 0; padding-right: 0; }
    .vkmsb {
        /* Yanlarda iç boşluk: kartlar ekran kenarına yapışmasın (Murat isteği).
         * Marquee içeriği bu boşluğun sınırında kırpılır; akış yine tam genişlik hissi verir. */
        padding: 8px 12px;
        border: 0;
        border-bottom: 1px solid rgba(127, 127, 127, .16);
        border-radius: 0;
    }
}

/* Kaydırıcı: marquee/swipe bunun scrollLeft'i üzerinde çalışır */
.vkmsb-track {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.vkmsb-track::-webkit-scrollbar { display: none; }
.vkmsb-track.vkmsb-dragging { cursor: grabbing; }
.vkmsb-track.vkmsb-dragging .vkmsb-item { user-select: none; }

.vkmsb-group { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }

/* Takım kartı — dikey, kutusuz; sığdığında flex-grow ile satıra tam yayılır */
.vkmsb-item {
    position: relative; /* sol üstteki float sıra kutusu buna göre konumlanır */
    flex: 1 0 auto;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.vkmsb-item:hover { background: rgba(127, 127, 127, .10); color: inherit; }

/* Sol üstte float eden sıra kutusu: özel konumlarda (ŞL/UEFA/düşme) konum
 * rengiyle dolu (.has-pos, --pc JS'ten), diğer sıralarda şeffaf ve soluk. */
.vkmsb-rank {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    opacity: .55;
}
.vkmsb-rank.has-pos { background: var(--pc, transparent); color: #fff; opacity: 1; }
.vkmsb-logo { width: 24px; height: 24px; object-fit: contain; display: block; flex: 0 0 auto; }
span.vkmsb-logo { border-radius: 50%; } /* logosuz takım / skeleton dairesi */
.vkmsb-abbr {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
}
/* Kartta puan satırı yok — puan yalnız tooltip'te gösterilir. */

/* Özel tooltip — kartın altında koyu balon; ok --ax ile kartın merkezini izler.
 * Yalnız fare/klavye odağında görünür (JS); dokunmatikte tık = gezinme. */
.vkmsb-tip {
    position: absolute;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(17, 24, 39, .96);
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease;
}
.vkmsb-tip.is-on { visibility: visible; opacity: 1; }
.vkmsb-tip::before {
    content: "";
    position: absolute;
    top: -4px;
    left: var(--ax, 50%);
    margin-left: -4px;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}
.vkmsb-tip b { font-size: 12px; }
.vkmsb-tip span { opacity: .85; }
.vkmsb-tip i { font-style: normal; opacity: .85; display: flex; align-items: center; gap: 5px; }
.vkmsb-tip u {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7280; /* konum rengi JS'ten gelir; bu yedek gri */
    text-decoration: none;
    flex: 0 0 auto;
}

/* Marquee modu: kartlar doğal (sabit) genişlikte, track uçlar arasında akar. */
.vkmsb.is-marquee .vkmsb-group { flex: 0 0 auto; gap: 6px; }
.vkmsb.is-marquee .vkmsb-item { flex: 0 0 auto; width: 54px; min-width: 0; }

/* Skeleton — her parça gerçek karşılığıyla aynı yer/boyutta gri blok + shimmer */
@keyframes vkmsb-shimmer {
    0%   { background-position: -120px 0; }
    100% { background-position: 120px 0; }
}
.vkmsb-item.is-skel .vkmsb-rank,
.vkmsb-item.is-skel .vkmsb-logo,
.vkmsb-item.is-skel .vkmsb-abbr {
    color: transparent;
    background-color: rgba(127, 127, 127, .18);
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    background-size: 120px 100%;
    background-repeat: no-repeat;
    animation: vkmsb-shimmer 1.2s linear infinite;
}
.vkmsb-item.is-skel .vkmsb-rank { width: 12px; height: 10px; }
.vkmsb-item.is-skel .vkmsb-abbr { width: 22px; height: 9px;  border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
    .vkmsb-item.is-skel .vkmsb-rank,
    .vkmsb-item.is-skel .vkmsb-logo,
    .vkmsb-item.is-skel .vkmsb-abbr { animation: none; }
}

/* Tablet (≥600px) */
@media (min-width: 600px) {
    .vkmsb-logo { width: 28px; height: 28px; }
    .vkmsb-abbr { font-size: 10px; }
}

/* Geniş ekran (≥992px): büyük logolar */
@media (min-width: 992px) {
    .vkmsb { padding: 6px; }
    .vkmsb-item { gap: 4px; padding: 8px 2px; }
    .vkmsb-rank { font-size: 9px; }
    .vkmsb-logo { width: 38px; height: 38px; }
    .vkmsb-abbr { font-size: 10px; }
    .vkmsb-item.is-skel .vkmsb-abbr { width: 26px; height: 10px; }
}