/* ScoreToto Mackolik-UI Pack (2026-04-23)
   Isolated CSS additions inspired by mackolik screenshots.
   Uses existing --st-* vars (red #E50914, bg #0a0a0a, card #1a1a1a).
   Namespace: .mk-* so nothing collides with .st-*.
*/

/* ---------- 1) Form chips (W/D/L) ------------------------------------ */
.mk-form { display:inline-flex; gap:4px; align-items:center; }
.mk-form-chip{
    width:22px; height:22px; border-radius:6px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#fff; line-height:1;
    font-variant:tabular-nums;
}
.mk-form-chip.w{ background:#22c55e; }
.mk-form-chip.d{ background:#eab308; color:#111; }
.mk-form-chip.l{ background:#ef4444; }
.mk-form-chip.n{ background:#334155; color:#94a3b8; } /* not played */

/* inline compact (for match row right column) */
.mk-res-dot{
    display:inline-flex; width:20px; height:20px; border-radius:4px;
    align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:#fff;
}
.mk-res-dot.w{ background:#16a34a; }
.mk-res-dot.d{ background:#ca8a04; color:#0a0a0a; }
.mk-res-dot.l{ background:#dc2626; }

/* ---------- 2) Rating chip (gradient by value) ----------------------- */
.mk-rate{
    display:inline-block; min-width:38px; padding:3px 8px;
    border-radius:6px; font-weight:700; font-size:13px;
    color:#fff; text-align:center; font-variant:tabular-nums;
    letter-spacing:.2px;
}
.mk-rate.r-6 { background:#f59e0b; }          /* 6.0-6.9 */
.mk-rate.r-7 { background:#22c55e; }          /* 7.0-7.9 */
.mk-rate.r-8 { background:#0ea5e9; }          /* 8.0-8.9 */
.mk-rate.r-9 { background:#6366f1; }          /* 9.0+    */
.mk-rate.r-5 { background:#6b7280; }          /* <6.0    */

/* ---------- 3) UEFA qualification stripe on standings ---------------- */
.mk-stand tbody tr{ position:relative; }
.mk-stand tbody tr::before{
    content:""; position:absolute; left:0; top:0; bottom:0;
    width:4px; background:transparent;
}
.mk-stand tbody tr.q-ucl::before{ background:#2563eb; }    /* Şampiyonlar L. */
.mk-stand tbody tr.q-uel::before{ background:#f59e0b; }    /* Avrupa L. */
.mk-stand tbody tr.q-ecl::before{ background:#10b981; }    /* Conference */
.mk-stand tbody tr.q-rel::before{ background:#dc2626; }    /* Küme düşme */
.mk-stand tbody tr.q-play::before{ background:#8b5cf6; }   /* Play-off */

/* ---------- 4) 2-col info grid (player profile) ---------------------- */
.mk-info-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:10px; margin:16px 0;
}
.mk-info-card{
    background:var(--st-card, #1a1a1a);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px; padding:12px 14px;
}
.mk-info-card .lbl{
    color:#94a3b8; font-size:12px; margin-bottom:4px;
    text-transform:uppercase; letter-spacing:.5px;
}
.mk-info-card .val{
    color:#fff; font-weight:600; font-size:15px;
    display:flex; align-items:center; gap:8px;
}
.mk-info-card .ico{
    width:18px; height:18px; opacity:.85; flex-shrink:0;
}
@media (max-width: 480px){
    .mk-info-grid{ grid-template-columns:1fr; }
}

/* ---------- 5) Player/team hero bar --------------------------------- */
.mk-hero-bar{
    background:linear-gradient(180deg, rgba(229,9,20,.10), transparent 60%);
    text-align:center; padding:20px 12px 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.mk-hero-av{
    position:relative; display:inline-block; margin-bottom:8px;
}
.mk-hero-av .club{
    position:absolute; left:-30px; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:#fff; padding:4px;
}
.mk-hero-av .player{
    width:88px; height:88px; border-radius:50%;
    background:#1a1a1a; object-fit:cover; border:3px solid #fff;
}
.mk-hero-av .jersey{
    position:absolute; right:-4px; bottom:4px;
    width:26px; height:26px; border-radius:50%;
    background:#0ea5e9; color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #0a0a0a;
}
.mk-hero-name{ color:#fff; font-size:20px; font-weight:700; margin:4px 0 0; }
.mk-hero-sub{ color:#94a3b8; font-size:13px; }

/* ---------- 6) Match row with form indicator + rating ---------------- */
.mk-match-row{
    display:grid;
    grid-template-columns: 48px 1fr 60px 40px 60px;
    gap:8px; align-items:center;
    padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.05);
}
.mk-match-row .date{ color:#94a3b8; font-size:13px; font-variant:tabular-nums; }
.mk-match-row .teams{ color:#e5e7eb; font-size:14px; line-height:1.4; }
.mk-match-row .teams .win{ font-weight:700; color:#fff; }
.mk-match-row .score{ font-weight:700; color:#fff; font-size:14px; text-align:center; font-variant:tabular-nums; }
.mk-match-row .minute{ font-size:11px; color:#94a3b8; text-align:center; }
.mk-match-row .result{ text-align:right; }
@media (max-width: 640px){
    .mk-match-row{ grid-template-columns: 44px 1fr 50px 34px 50px; font-size:13px; gap:6px; }
}

/* ---------- 7) H2H / Karşılaştırma block ----------------------------- */
.mk-h2h-section{ margin:16px 0; }
.mk-h2h-section h3{
    font-size:14px; color:#94a3b8; margin:14px 0 8px;
    padding:8px 12px; background:rgba(255,255,255,.03);
    border-radius:8px; font-weight:600;
    display:flex; align-items:center; gap:8px;
}
.mk-h2h-section h3 img{ width:18px; height:18px; border-radius:50%; }
.mk-h2h-list{ display:flex; flex-direction:column; }
.mk-h2h-list .mk-match-row:last-child{ border-bottom:none; }

/* ---------- 8) Dakika-bar live stat comparison ----------------------- */
.mk-stat-row{
    display:grid; grid-template-columns: 60px 1fr 60px;
    gap:8px; align-items:center; padding:10px 12px;
}
.mk-stat-row .lv, .mk-stat-row .rv{
    font-weight:700; font-size:14px; font-variant:tabular-nums;
    text-align:center;
}
.mk-stat-row .lv{ color:#0ea5e9; }
.mk-stat-row .rv{ color:#ef4444; }
.mk-stat-row .stat-bar{
    position:relative; height:8px; background:#1f2937; border-radius:4px; overflow:hidden;
    display:flex;
}
.mk-stat-row .stat-bar .l{ background:#0ea5e9; height:100%; }
.mk-stat-row .stat-bar .r{ background:#ef4444; height:100%; margin-left:auto; }
.mk-stat-row .label{
    grid-column:1 / -1; text-align:center; font-size:12px;
    color:#94a3b8; margin-bottom:4px;
}
.mk-stat-block{
    background:var(--st-card, #1a1a1a);
    border-radius:12px; padding:8px 4px; margin:12px 0;
}
.mk-stat-block .mk-stat-wrap{
    display:grid; grid-template-rows:auto auto;
}

/* ---------- 9) Floating live ticker (bottom pill) -------------------- */
.mk-ticker{
    position:fixed; left:50%; bottom:12px; transform:translateX(-50%);
    z-index:9500;
    background:linear-gradient(90deg, #dc2626, #b91c1c);
    color:#fff; font-weight:600; font-size:13px;
    padding:10px 18px 10px 14px; border-radius:999px;
    box-shadow:0 6px 22px rgba(220,38,38,.45);
    display:none; align-items:center; gap:10px;
    max-width:90vw; white-space:nowrap; overflow:hidden;
}
.mk-ticker .minute{
    background:rgba(255,255,255,.18); color:#fff;
    font-size:11px; font-weight:700; padding:3px 7px;
    border-radius:999px; font-variant:tabular-nums;
}
.mk-ticker a{ color:#fff; text-decoration:none; }
.mk-ticker .close{
    background:rgba(0,0,0,.25); color:#fff; border:none;
    width:22px; height:22px; border-radius:50%; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:14px; margin-left:6px;
}
.mk-ticker.show{ display:inline-flex; }
@media (max-width: 480px){
    .mk-ticker{ font-size:12px; padding:8px 12px; bottom:8px; }
}

/* ---------- 10) Horizontal week-nav bar (Fikstür) -------------------- */
.mk-week-nav{
    display:flex; align-items:center; justify-content:center;
    gap:6px; padding:12px 8px;
    background:var(--st-card, #1a1a1a); border-radius:12px;
    margin:12px 0;
}
.mk-week-nav .wk{
    padding:6px 14px; border-radius:999px; font-size:13px;
    color:#94a3b8; border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
}
.mk-week-nav .wk.active{
    background:#fff; color:#0a0a0a; font-weight:700; border-color:#fff;
}
.mk-week-nav .nav{
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.06);
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; text-decoration:none;
}
.mk-week-nav .nav:hover{ background:rgba(255,255,255,.12); }

/* ---------- 11) Date group header for fixture days ------------------- */
.mk-day-head{
    background:rgba(255,255,255,.04);
    color:#94a3b8; font-size:12px; font-weight:600;
    padding:8px 14px; letter-spacing:.3px;
    border-top:1px solid rgba(255,255,255,.05);
}

/* ---------- 12) Transfer row ----------------------------------------- */
.mk-trans-row{
    display:grid;
    grid-template-columns: 2fr 2fr 80px;
    gap:10px; align-items:center;
    padding:12px; border-bottom:1px solid rgba(255,255,255,.05);
}
.mk-trans-row .who{ display:flex; align-items:center; gap:10px; min-width:0; }
.mk-trans-row .who .av{
    width:36px; height:36px; border-radius:50%; background:#0f172a;
    object-fit:cover; flex-shrink:0;
}
.mk-trans-row .who .nm{ color:#fff; font-weight:600; font-size:14px; }
.mk-trans-row .who .meta{ color:#94a3b8; font-size:12px; }
.mk-trans-row .club{ display:flex; align-items:center; gap:8px; color:#e5e7eb; }
.mk-trans-row .club img{ width:22px; height:22px; border-radius:50%; background:#fff; padding:2px; }
.mk-trans-row .fee{ text-align:right; color:#fff; font-weight:700; font-size:13px; }
.mk-trans-row .fee.loan{ color:#fbbf24; }
.mk-trans-row .fee.free{ color:#94a3b8; font-weight:500; }

/* ---------- 13) Info pills row (stats hero) -------------------------- */
.mk-stat-hero{
    background:
        linear-gradient(180deg, rgba(14,165,233,.12), transparent 70%),
        var(--st-card, #1a1a1a);
    border-radius:14px; padding:16px 12px;
    display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
    margin:12px 0;
}
.mk-stat-hero .cell{ text-align:center; color:#e5e7eb; }
.mk-stat-hero .cell .ico{ width:22px; height:22px; opacity:.8; margin-bottom:4px; }
.mk-stat-hero .cell .v{ font-size:18px; font-weight:700; color:#fff; font-variant:tabular-nums; }
.mk-stat-hero .cell .k{ font-size:11px; color:#94a3b8; }
@media (max-width: 640px){
    .mk-stat-hero{ grid-template-columns:repeat(3, 1fr); }
}

/* ---------- 14) Sub-tab strip (pills on dark) ----------------------- */
.mk-tabs{
    display:flex; gap:6px; overflow-x:auto; padding:6px 4px;
    margin:8px 0 12px; scrollbar-width:none;
}
.mk-tabs::-webkit-scrollbar{ display:none; }
.mk-tabs .tab{
    padding:7px 14px; border-radius:999px; font-size:13px;
    color:#94a3b8; border:1px solid rgba(255,255,255,.10);
    white-space:nowrap; text-decoration:none;
    background:transparent;
}
.mk-tabs .tab.active{
    background:#0ea5e9; color:#fff; border-color:#0ea5e9; font-weight:600;
}
.mk-tabs .tab:hover:not(.active){ background:rgba(255,255,255,.05); color:#fff; }

/* ---------- 15) Home/Away toggle (Genel/İç Saha/Deplasman) ---------- */
.mk-ha-toggle{ display:inline-flex; gap:6px; margin:8px 12px; }
.mk-ha-toggle button{
    padding:6px 14px; border-radius:999px; font-size:13px;
    color:#94a3b8; border:1px solid rgba(255,255,255,.10);
    background:transparent; cursor:pointer;
}
.mk-ha-toggle button.active{
    background:#0ea5e9; color:#fff; border-color:#0ea5e9; font-weight:600;
}

/* ---------- 16) Polish existing .st-af-kv-list as 2-col Mackolik cards */
.st-af-profile-grid{
    display:flex; gap:16px; align-items:flex-start;
    flex-wrap:wrap;
}
.st-af-profile-photo img{
    width:110px; height:110px; border-radius:50%;
    border:3px solid rgba(255,255,255,.12);
    object-fit:cover; background:#0f172a;
}
.st-af-kv-list{
    columns:2; column-gap:10px;
    padding:0; margin:4px 0 0; list-style:none; flex:1 1 320px;
}
.st-af-kv-list dt{
    font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:#94a3b8; margin:0;
    padding:10px 12px 4px;
    background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
    border-radius:10px 10px 0 0; border-bottom:none;
    break-after:avoid; page-break-after:avoid;
}
.st-af-kv-list dd{
    margin:0 0 10px; padding:2px 12px 10px;
    color:#fff; font-weight:600; font-size:14px;
    background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
    border-radius:0 0 10px 10px; border-top:none;
    break-inside:avoid; page-break-inside:avoid;
    break-before:avoid; page-break-before:avoid;
}
.st-af-kv-list dd .st-af-muted{ color:#94a3b8; font-weight:500; font-size:12px; }
.st-af-kv-list dd a{ color:#7dd3fc; text-decoration:none; }
.st-af-kv-list dd a:hover{ text-decoration:underline; }
.st-af-team-cell{ display:flex; align-items:center; gap:8px; }
.st-af-team-logo{ width:22px; height:22px; border-radius:50%; background:#fff; padding:2px; object-fit:contain; }
@media (max-width:520px){
    .st-af-kv-list{ columns:1; }
    .st-af-profile-photo img{ width:90px; height:90px; }
}

/* ---------- 17) Stat chips on profile -> rating gradient --------- */
.st-af-stat-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.st-af-chip{
    background:#1a1a1a; border:1px solid rgba(255,255,255,.08);
    color:#e5e7eb; padding:6px 12px; border-radius:999px;
    font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.st-af-chip strong{ color:#fff; }
.st-af-chip.y { color:#fbbf24; }
.st-af-chip.r { color:#f87171; }

/* ---------- 18) Career table row polish -------------------------- */
.st-af-career-tbl, .st-af-transfers-tbl{
    border-collapse:separate; border-spacing:0; width:100%;
}
.st-af-career-tbl th, .st-af-transfers-tbl th{
    background:rgba(255,255,255,.04); color:#94a3b8; font-weight:600;
    font-size:12px; text-transform:uppercase; letter-spacing:.4px;
    padding:10px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08);
}
.st-af-career-tbl td, .st-af-transfers-tbl td{
    padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.04);
    color:#e5e7eb; font-size:13px; font-variant:tabular-nums;
}
.st-af-career-tbl tr:hover td, .st-af-transfers-tbl tr:hover td{
    background:rgba(14,165,233,.04);
}
.st-af-career-tbl td:first-child{ font-weight:600; color:#fff; }
.val.st-af-y{ color:#fbbf24; font-weight:700; }
.val.st-af-r{ color:#f87171; font-weight:700; }

/* ---------- 19) Widget-card polish -------------------------------- */
.st-widget-card{
    background:var(--st-card, #1a1a1a);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px; padding:16px; margin-bottom:14px;
}
.st-widget-card-title{
    font-size:15px; margin:0 0 12px; color:#fff; font-weight:700;
    display:flex; align-items:center; gap:8px;
}
.st-widget-card-title .bar{
    width:3px; height:16px; background:var(--st-red, #E50914); border-radius:2px;
}

/* ---------- 20) Simple "fires" feature row (canlı ticker style) --- */
.mk-event-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:999px;
    background:rgba(239,68,68,.12); color:#fecaca;
    font-size:12px; font-weight:600;
}
.mk-event-chip.live::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:#ef4444; animation:mk-pulse 1s infinite;
}
@keyframes mk-pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.3; }
}

/* ---------- 21) UEFA stripe wire-up on existing .st-standings ------ */
.st-standings{ border-collapse:separate; border-spacing:0; }
.st-standings tbody tr{ position:relative; }
.st-standings tbody tr td:first-child{ position:relative; padding-left:14px; }
.st-standings tbody tr td:first-child::before{
    content:""; position:absolute; left:0; top:8%; bottom:8%;
    width:4px; border-radius:2px; background:transparent;
}
.st-standings tbody tr.cl  td:first-child::before{ background:#2563eb; }  /* Champions League */
.st-standings tbody tr.uel td:first-child::before{ background:#f59e0b; }  /* Europa League */
.st-standings tbody tr.ecl td:first-child::before{ background:#10b981; }  /* Conference */
.st-standings tbody tr.rel td:first-child::before{ background:#dc2626; }  /* Küme düşme */
.st-standings tbody tr.pl  td:first-child::before{ background:#8b5cf6; }  /* Play-off */

/* hover row tint */
.st-standings tbody tr:hover{ background:rgba(14,165,233,.04); }
.st-standings tbody tr:hover td{ color:#fff; }

/* legend under standings */
.mk-stand-legend{
    display:flex; flex-wrap:wrap; gap:10px 18px; padding:12px 14px;
    font-size:12px; color:#94a3b8; background:rgba(255,255,255,.02);
    border-top:1px solid rgba(255,255,255,.05);
    border-radius:0 0 12px 12px;
}
.mk-stand-legend i{
    display:inline-block; width:10px; height:10px; border-radius:2px;
    margin-right:6px; vertical-align:middle;
}
.mk-stand-legend .i-cl { background:#2563eb; }
.mk-stand-legend .i-uel{ background:#f59e0b; }
.mk-stand-legend .i-ecl{ background:#10b981; }
.mk-stand-legend .i-rel{ background:#dc2626; }

/* ---------- 22) H2H "Karşılaştırma" card wrapper (match detail) ----- */
.mk-h2h-card{
    background:var(--st-card, #1a1a1a);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px; padding:16px; margin:18px 0;
}
.mk-h2h-card > h2{
    font-size:16px; margin:0 0 12px; color:#fff; font-weight:700;
    display:flex; align-items:center; gap:8px;
}
.mk-h2h-card > h2::before{
    content:""; width:3px; height:18px; background:var(--st-red, #E50914); border-radius:2px;
}

/* ---------- 23) Transfers shortcode render ----------------------- */
.mk-trans-tabs{
    display:inline-flex; gap:4px; background:rgba(255,255,255,.04);
    padding:4px; border-radius:999px; margin:8px 0 12px;
}
.mk-trans-tabs button{
    background:transparent; color:#94a3b8; border:none; cursor:pointer;
    padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600;
}
.mk-trans-tabs button.active{ background:#0ea5e9; color:#fff; }
.mk-trans-list{ display:flex; flex-direction:column; }
.mk-trans-empty{
    padding:20px; text-align:center; color:#94a3b8; font-size:13px;
    background:var(--st-card, #1a1a1a); border-radius:12px; margin:10px 0;
}

/* ---------- 24) Week-nav on fixtures (future data hook) ---------- */
.mk-week-nav.compact{ padding:8px 4px; margin:0 0 10px; background:transparent; }
.mk-week-nav.compact .wk{ padding:5px 10px; font-size:12px; }