/* ============================================================
   HURMİLLET — SPOR MODÜLÜ (Task 65)
   ORTAK: bölüm başlığı, logo çipi, slayt iskeleti
   V2 — ANA SAYFA (yatay oluşumlar):
     1) TÜM LİGLER  — düz maç karo slaytı (logo+skor+İY/MS), oklar+otomatik akış
     2) PUAN DURUMU — aşağı açılır lig menüsü + yalnız logo şeridi (kaydırma yok)
   V1 — SPOR SAYFASI (bağımsız entegrasyon):
     3) TÜM LİGLER  — lig kartlı canlı skor slaytı
     4) PUAN DURUMU — 7 lig sekmeli, lig/takım logolu SABİT tablolar
   Tasarım dili = dergi kapağı: koyu mg-ink zemin, kırmızı primary,
   ince beyaz çerçeveler, Rubik display başlıklar, cam rozetler.
   ============================================================ */

.sp-wrap{max-width:1400px;margin:0 auto;padding:0 22px}

/* ---------- Ortak bölüm başlığı (mg-cathead ile aynı gramer) ---------- */
.sp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sp-title{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:800;
  font-size:clamp(20px,2.2vw,27px);line-height:1.1;letter-spacing:-.3px;
  color:#fff;text-transform:uppercase;margin:0;
}
.sp-title::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--primary);flex:0 0 auto}
.sp-headnote{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap;
}

/* ---------- Logo çipi: görsel gelmezse baş harf rozeti ---------- */
.sp-bd{
  position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:#1a1f2c;display:inline-grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.sp-bd img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2px}
.sp-bd.lg{width:22px;height:22px;border-radius:6px}
.sp-bd.lg img{padding:1px}
.sp-bd::after{
  content:attr(data-ini);
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:800;
  font-size:7.5px;letter-spacing:.03em;color:rgba(255,255,255,.6);
}
.sp-bd.noimg img{display:none}

/* ---------- Ortak slayt iskeleti (v1 + v2) ---------- */
.sp-viewport{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;border-radius:14px}
.sp-viewport::-webkit-scrollbar{display:none}
.sp-viewport:focus-visible{outline:2px solid rgba(216,25,32,.6);outline-offset:3px}
.sp-track{display:flex;gap:13px;width:max-content;padding-bottom:4px}

.sp-cnav{margin-left:auto;display:flex;gap:8px}
.sp-cbtn{
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#fff;font-size:15px;line-height:1;cursor:pointer;
  transition:background .22s var(--tr,.2s,.7,.3,1),border-color .22s var(--tr),transform .22s var(--tr);
}
.sp-cbtn:hover{background:var(--primary,#d81920);border-color:var(--primary)}
.sp-cbtn:active{transform:scale(.94)}

.sp-empty{
  border:1px dashed rgba(255,255,255,.14);border-radius:14px;
  padding:26px 22px;text-align:center;color:rgba(255,255,255,.55);font-size:13.5px;
}
.sp-wait{
  display:flex;align-items:center;gap:12px;
  border:1px dashed rgba(255,255,255,.14);border-radius:14px;
  padding:22px;color:rgba(255,255,255,.5);font-size:13px;
}
.sp-spin{
  width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);border-top-color:var(--primary,#d81920);
  animation:spRot 1s linear infinite;
}
@keyframes spRot{to{transform:rotate(360deg)}}

.sp-livecount{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.sp-livecount i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);flex:0 0 auto}
.sp-livecount.on{color:#ffd7d9;border-color:rgba(216,25,32,.5)}
.sp-livecount.on i{background:var(--primary,#d81920);animation:sp-pulse 1.6s ease-in-out infinite}
@keyframes sp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(216,25,32,.45)}55%{box-shadow:0 0 0 5px rgba(216,25,32,0)}}

/* ============================================================
   V2 · BÖLÜM 1 — TÜM LİGLER (ana sayfa maç karo slaytı)
   Her karo: minik lig etiketi + [logo][skor][logo] + kısaltmalar
   (takım kodu, İY / MS / 67' / başlama saati)
   ============================================================ */
.sp-live{
  background:var(--mg-ink,#0b0d12);
  padding:26px 0 30px;
  border-top:1px solid rgba(255,255,255,.06);
}

.sp-card{
  flex:0 0 auto;width:172px;scroll-snap-align:start;
  background:linear-gradient(165deg,#151926 0%,#0e111a 72%);
  border:1px solid rgba(255,255,255,.11);border-radius:12px;
  padding:9px 10px 10px;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .25s var(--tr),box-shadow .25s var(--tr),transform .25s var(--tr);
}
.sp-card:hover{border-color:rgba(255,255,255,.24);box-shadow:0 8px 22px rgba(0,0,0,.35);transform:translateY(-2px)}
.sp-card.live{border-color:rgba(216,25,32,.4)}

.sp-clg{
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.38);text-align:center;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06);
}
.sp-card.live .sp-clg{color:rgba(255,150,152,.6)}

.sp-crow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.sp-ct{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.sp-ct .sp-bd{width:30px;height:30px}
.sp-ct b{
  font-size:10.5px;font-weight:800;letter-spacing:.05em;line-height:1;
  color:rgba(255,255,255,.6);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sp-card.winh .sp-ct.h b,.sp-card.wina .sp-ct.a b{color:#fff}
.sp-card.winh .sp-ct.a b,.sp-card.wina .sp-ct.h b{color:rgba(255,255,255,.32)}

.sp-cmid{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px}
.sp-cscore{
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:800;
  font-size:16px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.sp-cscore.ns{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.4)}
.sp-cst{
  font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1;
  white-space:nowrap;
}
.sp-card.live .sp-cscore:not(.ns){color:#ffd7d9}
.sp-card.live .sp-cst{color:#ff5a60}
.sp-card.fin .sp-cst{color:#7fcf9d}

/* ============================================================
   V2 · BÖLÜM 2 — PUAN DURUMU (ana sayfa: dropdown + logo şeridi)
   ============================================================ */
.sp-stand{
  background:var(--mg-ink,#0b0d12);
  padding:34px 0 42px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* — Aşağı açılır lig menüsü — */
.sp-drop{position:relative;margin-left:auto}
.sp-dropbtn{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:#fff;cursor:pointer;
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:700;font-size:13px;
  transition:border-color .22s var(--tr),background .22s var(--tr);
}
.sp-dropbtn:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
.sp-dropbtn .sp-bd.lg{width:24px;height:24px}
.sp-chev{font-style:normal;font-size:10px;color:rgba(255,255,255,.55);transition:transform .25s var(--tr)}
.sp-drop.open .sp-chev{transform:rotate(180deg)}
.sp-drop.open .sp-dropbtn{border-color:rgba(216,25,32,.55);background:rgba(216,25,32,.12)}
.sp-dropmenu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:250px;margin:0;padding:6px;list-style:none;
  background:#141824;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--tr),transform .22s var(--tr),visibility .22s;
}
.sp-drop.open .sp-dropmenu{opacity:1;visibility:visible;transform:none}
.sp-dropmenu li{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  color:rgba(255,255,255,.75);font-size:13px;font-weight:600;
  transition:background .18s var(--tr),color .18s var(--tr);
}
.sp-dropmenu li:hover,.sp-dropmenu li:focus-visible{background:rgba(255,255,255,.07);color:#fff;outline:none}
.sp-dropmenu li[aria-selected="true"]{background:rgba(216,25,32,.16);color:#fff}
.sp-dropmenu li[aria-selected="true"] .sp-dlcount{color:#ff9a9d}
.sp-dlname{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-dlcount{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* — Logo şeridi: sıralamaya göre YALNIZ logo (+ minik sıra no) — */
.sp-stripbox{
  border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#141824 0%,#0e1119 72%);
  padding:14px 14px 11px;
}
.sp-strip{display:grid;grid-template-columns:repeat(var(--n,20),minmax(0,1fr));gap:8px}
.sp-slot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 2px 8px;border-radius:10px;min-width:0;
  border:1px solid transparent;background:transparent;cursor:default;
  font:inherit;appearance:none;-webkit-appearance:none;
  transition:background .18s var(--tr),border-color .18s var(--tr),transform .18s var(--tr);
}
.sp-slot:hover,.sp-slot:focus-visible{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);transform:translateY(-2px);outline:none}
.sp-slotpos{
  font-style:normal;font-size:10px;font-weight:800;line-height:1;
  color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums;
}
.sp-slot .sp-bd{width:34px;height:34px}
/* sıra altı bölge çizgisi (Şampiyonlar Ligi / Avrupa / Konferans / Küme Düşme) */
.sp-slot::after{content:"";width:16px;height:2px;border-radius:1px;background:transparent}
.sp-slot.z-champ .sp-slotpos{color:#3fa66a}
.sp-slot.z-eu .sp-slotpos{color:#4da3ff}
.sp-slot.z-conf .sp-slotpos{color:#5ad0c0}
.sp-slot.z-rel .sp-slotpos{color:#e5484d}
.sp-slot.z-champ::after{background:#3fa66a}
.sp-slot.z-eu::after{background:#4da3ff}
.sp-slot.z-conf::after{background:#5ad0c0}
.sp-slot.z-rel::after{background:#e5484d}

.sp-stdhint{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:10px 4px 0}
.sp-hintteam{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.78);min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-hintupd{
  flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.32);
}

/* ============================================================
   V1 · SPOR SAYFASI — lig kartlı canlı skorlar
   ============================================================ */
.sp-lg{
  flex:0 0 clamp(272px,23.5vw,332px);scroll-snap-align:start;
  background:linear-gradient(165deg,#151926 0%,#0e111a 72%);
  border:1px solid rgba(255,255,255,.11);border-radius:14px;
  padding:13px 14px 10px;
  transition:border-color .25s var(--tr),box-shadow .25s var(--tr);
}
.sp-lg:hover{border-color:rgba(255,255,255,.24);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.sp-lg.haslive{border-color:rgba(216,25,32,.4)}

.sp-lghead{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.sp-lgname{
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:700;font-size:13px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.sp-lglive{
  margin-left:auto;flex:0 0 auto;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--primary,#d81920);border-radius:999px;padding:3px 8px;
}
.sp-lgmore{
  padding:8px 2px 3px;margin-top:2px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);text-align:center;border-top:1px solid rgba(255,255,255,.05);
}

/* — Maç satırı: [ev][skor][deplasman] — */
.sp-m{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.sp-m:last-child{border-bottom:0}
.sp-tm{display:flex;align-items:center;gap:7px;min-width:0}
.sp-tm.h{justify-content:flex-end}
.sp-tm b{
  font-weight:600;font-size:12.5px;color:rgba(255,255,255,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.sp-m.winh .sp-tm.h b,.sp-m.wina .sp-tm.a b{color:#fff;font-weight:800}
.sp-m.winh .sp-tm.a b,.sp-m.wina .sp-tm.h b{color:rgba(255,255,255,.5)}
.sp-mid{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:60px;flex:0 0 auto}
.sp-score{
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:800;
  font-size:14.5px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.sp-st{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.42);text-transform:uppercase;
}
.sp-m.live .sp-score{color:#ffd7d9}
.sp-m.live .sp-st{color:#ff5a60}

/* ============================================================
   V1 · SPOR SAYFASI — sekmeli sabit puan durumu tabloları
   ============================================================ */
.sp-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:16px;padding-bottom:2px}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.72);
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:700;font-size:12.5px;
  cursor:pointer;white-space:nowrap;
  transition:border-color .22s var(--tr),background .22s var(--tr),color .22s var(--tr);
}
.sp-tab:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.sp-tab.on{
  background:rgba(216,25,32,.16);border-color:rgba(216,25,32,.55);color:#fff;
  box-shadow:inset 0 -2px 0 var(--primary,#d81920);
}

.sp-panel{display:none}
.sp-panel.on{display:block;animation:spFade .3s var(--tr)}
@keyframes spFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sp-twrap{
  border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#141824 0%,#0e1119 72%);
}
.sp-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sp-table thead th{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);text-align:center;
  padding:11px 6px;border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.sp-table thead th.c-p{width:36px;padding-left:14px}
.sp-table thead th.c-t{text-align:left}
.sp-table td{
  padding:9px 6px;text-align:center;
  font-size:13px;color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sp-table tr.sp-r:last-child td{border-bottom:0}
.sp-table td.c-p{color:rgba(255,255,255,.4);font-weight:700;font-size:12px;padding-left:14px}
.sp-table td.c-t{padding-left:10px;white-space:nowrap;text-align:left}
.sp-table td.c-t .sp-bd{margin-right:9px;vertical-align:middle}
.sp-tname{
  display:inline-block;vertical-align:middle;
  font-weight:600;color:rgba(255,255,255,.9);font-size:13px;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sp-table td.c-pt{font-weight:800;color:#fff;font-size:13.5px}
.sp-r{transition:background .18s var(--tr)}
.sp-r:hover{background:rgba(255,255,255,.035)}

/* — Sıralama renkleri (Sportradar currentOutcome): solda bölge çubuğu — */
.sp-table td.c-p{position:relative}
.sp-r.z-champ td.c-p::before,
.sp-r.z-eu td.c-p::before,
.sp-r.z-conf td.c-p::before,
.sp-r.z-rel td.c-p::before{
  content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:3px;height:13px;border-radius:2px;
}
.sp-r.z-champ td.c-p::before{background:#3fa66a}
.sp-r.z-eu td.c-p::before{background:#4da3ff}
.sp-r.z-conf td.c-p::before{background:#5ad0c0}
.sp-r.z-rel td.c-p::before{background:#e5484d}

.sp-hid{display:none}
.sp-panel.expanded .sp-hid{display:table-row}

.sp-more{
  display:block;margin:12px auto 0;padding:10px 24px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;
  font-family:var(--font-display,'Rubik',Arial,sans-serif);font-weight:700;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .22s var(--tr),border-color .22s var(--tr);
}
.sp-more:hover{background:var(--primary,#d81920);border-color:var(--primary)}
.sp-more-m{display:none}
.sp-panel.expanded .sp-more-m{display:inline}
.sp-panel.expanded .sp-more-l{display:none}

.sp-updated{
  margin-top:10px;text-align:right;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
}

/* ============================================================
   Duyarlılık
   ============================================================ */
@media(max-width:900px){
  .sp-cbtn{width:34px;height:34px;font-size:14px}
  .sp-head{gap:10px}
  /* logo şeridi: tek satıra sığmazsa satır kırılımı (kaydırma yok) */
  .sp-strip{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
}
@media(max-width:640px){
  .sp-wrap{padding:0 14px}
  .sp-card{width:150px}
  .sp-lg{flex-basis:min(78vw,300px)}
  .sp-table .c-x{display:none}
  .sp-tname{max-width:150px}
  .sp-headnote{display:none}
  .sp-cnav{width:100%;margin-left:0}
  .sp-cnav .sp-cbtn{flex:0 0 auto}
  .sp-strip{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
  .sp-slot .sp-bd{width:28px;height:28px}
  .sp-slotpos{font-size:9px}
  .sp-dropbtn{padding:8px 11px;font-size:12px}
  .sp-dropmenu{min-width:216px}
  .sp-hintteam{font-size:11.5px}
}
@media(max-width:380px){
  .sp-table .c-m{display:none}
  .sp-tname{max-width:118px}
  .sp-card{width:138px}
}
@media(prefers-reduced-motion:reduce){
  .sp-panel.on{animation:none}
  .sp-livecount.on i{animation:none}
  .sp-card,.sp-slot{transform:none}
}