/* ============================================================
   SportLive — public stylesheet (dark edition).
   Accent colours come from admin settings via --sn-* variables.
   Mobile-first & responsive.
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

:root{
  --sn-primary:#22d3ee;
  --sn-secondary:#0b1220;
  --sn-accent:#f59e0b;

  --bg:#070b14;
  --bg-2:#0b1220;
  --surface:#121a2b;
  --surface-2:#18223a;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --txt:#e6edf7;
  --txt-2:#9aa8c0;
  --txt-3:#6b7a94;
  --live:#ef4444;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);line-height:1.55;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(168,85,247,.10), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.25}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hint{font-size:12.5px;color:var(--txt-3)}
.sn-icon{display:inline-block;vertical-align:middle;flex-shrink:0}

/* -------------------- HEADER -------------------- */
.sn-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.94);
  border-bottom:1px solid var(--line);
}
/* Blur hanya di desktop: backdrop-filter membuat header jadi containing block untuk
   elemen position:fixed di dalamnya — itu memotong menu geser (off-canvas) di mobile. */
@media(min-width:1025px){
  .sn-header{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(11,18,32,.86)}
}
.sn-header__bar{display:flex;align-items:center;gap:14px;max-width:1320px;margin:0 auto;padding:0 16px;height:60px}

.sn-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;background:none;border:0;cursor:pointer;padding:6px;width:38px;height:38px}
.sn-burger span{display:block;height:2.5px;width:22px;background:var(--txt);border-radius:2px;transition:.25s}
.sn-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.sn-burger.is-open span:nth-child(2){opacity:0}
.sn-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.sn-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sn-logo img{height:34px;width:auto}
.sn-logo__mark{
  background:linear-gradient(135deg,var(--sn-primary),#8b5cf6);color:#03121a;font-weight:900;font-style:italic;
  padding:6px 11px;border-radius:9px;font-size:19px;letter-spacing:-1px;line-height:1;
}
.sn-logo__text{font-weight:800;font-size:19px;letter-spacing:-.4px}

/* ---- Nav ---- */
.sn-nav{display:flex;align-items:center;gap:2px;margin-left:6px;flex:1;flex-wrap:nowrap}
.sn-nav__item{position:relative;display:inline-flex}
.sn-nav__top{
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;
  color:var(--txt-2);font-weight:600;font-size:14px;padding:0 12px;height:60px;
  border:0;background:none;cursor:pointer;white-space:nowrap;transition:color .15s;
}
.sn-nav__top:hover{color:var(--txt)}
.sn-nav__top.is-active,.sn-nav__item.is-active>.sn-nav__top{color:#fff;box-shadow:inset 0 -3px 0 var(--sn-primary)}
.sn-nav__caret{opacity:.5;margin-left:-3px}
.sn-nav__top--live{color:#fff;gap:8px}
.sn-nav__top--live span:last-child{font-weight:800;letter-spacing:.3px}
.sn-nav__badge{background:var(--live);color:#fff;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:20px;line-height:1.5}

/* Sport logo image + fallback icon */
.sn-cat-logo{width:18px;height:18px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,.9);padding:1px;flex-shrink:0}
.sn-logo-wrap{display:inline-flex;align-items:center}
.sn-logo-wrap .sn-logo-fb{display:none}
.sn-logo-wrap.img-failed img{display:none}
.sn-logo-wrap.img-failed .sn-logo-fb{display:inline-flex}

/* Dropdown */
.sn-dd{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--surface);color:var(--txt);
  border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;box-shadow:var(--shadow);padding:14px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:60;
}
.sn-nav__item:hover>.sn-dd{opacity:1;visibility:visible;transform:none}
.sn-dd__head{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px;padding-bottom:11px;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.sn-dd__head .sn-cat-logo{width:20px;height:20px}
.sn-dd__links{display:grid;gap:6px}
.sn-dd__link{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:10px;font-weight:700;font-size:13.5px;
  background:var(--surface-2);color:var(--txt-2);transition:.15s}
.sn-dd__link:hover{background:rgba(34,211,238,.13);color:#fff}
.sn-dd__link .sn-icon{color:var(--sn-primary)}
.sn-dd__link--live .sn-icon{color:var(--live)}
.sn-dd__link em{margin-left:auto;font-style:normal;background:var(--live);color:#fff;font-size:11px;font-weight:800;
  padding:1px 7px;border-radius:20px}

/* "More sports" grid dropdown */
.sn-dd--grid{display:grid;grid-template-columns:repeat(3,minmax(122px,1fr));gap:4px;min-width:440px;left:auto;right:0;padding:12px}
.sn-dd__grid-item{display:flex;align-items:center;gap:9px;padding:10px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--txt-2)}
.sn-dd__grid-item:hover{background:var(--surface-2);color:#fff}
.sn-dd__grid-item.is-active{color:var(--sn-primary)}
.sn-dd__grid-item .sn-cat-logo{width:22px;height:22px}

.sn-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
.sn-overlay.is-show{display:block}

/* -------------------- LAYOUT -------------------- */
.sn-main{max-width:1320px;margin:0 auto;padding:22px 16px 10px}
.sn-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:980px){.sn-grid{grid-template-columns:1fr 320px}}

.sn-section-title{display:flex;align-items:center;flex-wrap:wrap;gap:11px;font-size:18px;font-weight:800;margin:30px 0 15px}
.sn-section-title::before{content:"";width:4px;height:20px;background:var(--sn-primary);border-radius:3px;flex-shrink:0}
.sn-section-title__label{display:inline-flex;align-items:center;gap:9px}
.sn-section-title__label .sn-cat-ic{color:var(--sn-primary)}
.sn-section-title__label .sn-cat-logo{width:24px;height:24px}
.sn-section-title a{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--sn-primary);font-weight:700}
.sn-section-title a:hover{filter:brightness(1.2)}

.sn-breadcrumb{font-size:13px;color:var(--txt-3);margin-bottom:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sn-breadcrumb a{color:var(--sn-primary)}

/* Page head + tabs */
.sn-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sn-head .sn-section-title{margin:6px 0 14px}
.sn-tabs{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;gap:3px}
.sn-tabs a,.sn-tabs span{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:9px;
  font-weight:700;font-size:13.5px;color:var(--txt-2);transition:.15s}
.sn-tabs a:hover{color:#fff;background:var(--surface-2)}
.sn-tabs .is-active{background:var(--sn-primary);color:#04222a}
.sn-tabs em{font-style:normal;background:var(--live);color:#fff;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:20px}

/* -------------------- BUTTONS -------------------- */
.sn-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:11px;font-weight:800;font-size:14px;transition:.15s}
.sn-btn--primary{background:var(--sn-primary);color:#04222a}
.sn-btn--primary:hover{filter:brightness(1.12);transform:translateY(-1px)}
.sn-btn--ghost{background:var(--surface-2);color:var(--txt);border:1px solid var(--line-2)}
.sn-btn--ghost:hover{border-color:var(--sn-primary);color:#fff}

/* -------------------- LIVE DOT & BADGES -------------------- */
.sn-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(239,68,68,.75);animation:snPulse 1.6s infinite}
@keyframes snPulse{70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media(prefers-reduced-motion:reduce){.sn-live-dot{animation:none}}

.sn-badge{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:4px 9px;border-radius:6px;color:#fff;
  background:rgba(15,23,42,.85);backdrop-filter:blur(4px)}
.sn-badge--live{background:var(--live)}
.sn-badge--live .sn-live-dot{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8)}
.sn-badge--channel{background:var(--sn-accent);color:#221602}
.sn-badge--upcoming{background:rgba(15,23,42,.85)}

/* -------------------- SECTIONS -------------------- */
.sn-sec{margin:20px 0 26px}
.sn-sec__label{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-weight:800;font-size:14px;padding:10px 0;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.sn-sec__label .sn-icon{color:var(--sn-primary)}
.sn-sec__label--now{color:var(--live);border-bottom-color:rgba(239,68,68,.4);text-transform:uppercase;letter-spacing:.7px}
.sn-sec__label small{margin-left:auto;font-weight:600;font-size:12px;color:var(--txt-3);text-transform:none;letter-spacing:0}

/* -------------------- STREAM CARDS -------------------- */
.sn-live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:640px){.sn-live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1140px){.sn-live-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.sn-live-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s}
.sn-live-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.45);box-shadow:var(--shadow)}
.sn-live-card__thumb{position:relative;aspect-ratio:16/9;background:#0a1120;overflow:hidden}
.sn-live-card__thumb>img{width:100%;height:100%;object-fit:cover;opacity:.92}
.sn-live-card__badges{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#131c2f,#0a1120);color:var(--txt-3)}
.sn-live-card__badges img{width:44px;height:44px;object-fit:contain}
.sn-live-card__badges span{font-size:11.5px;font-weight:800;color:var(--txt-3)}
.sn-live-card__play{position:absolute;inset:0;margin:auto;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;background:rgba(4,10,20,.62);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:50%;
  pointer-events:none;transition:.16s}
.sn-live-card:hover .sn-live-card__play{background:var(--sn-primary);color:#04222a;border-color:transparent}
.sn-live-card__body{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1}
.sn-live-card__title{font-size:14px;font-weight:700;line-height:1.35;margin:0 0 9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sn-live-card__meta{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:11.5px;color:var(--txt-3)}
.sn-live-card__cat{background:var(--surface-2);color:var(--txt-2);font-weight:800;padding:2px 8px;border-radius:5px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
.sn-live-card--ended{opacity:.55}

/* -------------------- SPORT TILES -------------------- */
.sn-sports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
@media(min-width:640px){.sn-sports{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1140px){.sn-sports{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sn-sport{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:14px;font-weight:700;font-size:14px;transition:.16s;position:relative}
.sn-sport:hover{border-color:rgba(34,211,238,.45);transform:translateY(-2px)}
.sn-sport .sn-cat-logo{width:28px;height:28px}
.sn-sport__go{margin-left:auto;color:var(--txt-3)}
.sn-sport__live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:rgba(239,68,68,.15);
  color:#fca5a5;font-size:11px;font-weight:800;padding:3px 8px;border-radius:20px}

/* -------------------- PLAYER -------------------- */
.sn-player{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;overflow:hidden}
@media(min-width:760px){.sn-player{padding:20px}}
.sn-player__head{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-bottom:14px}
.sn-player__head .sn-badge{position:static}
.sn-player__title{font-size:19px;font-weight:800;margin:0;flex:1;min-width:200px}
@media(min-width:760px){.sn-player__title{font-size:23px}}
.sn-player__time{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--txt-2);font-weight:600}
.sn-player__time .sn-icon{color:var(--sn-primary)}

.sn-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.sn-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@supports not (aspect-ratio:16/9){.sn-frame{height:0;padding-bottom:56.25%}}
.sn-frame--empty{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--txt-3);
  background:linear-gradient(135deg,#131c2f,#0a1120);padding:22px}
.sn-frame--empty .sn-icon{color:var(--sn-primary);opacity:.75}
.sn-frame--empty h3{color:var(--txt);margin:12px 0 7px;font-size:16px}
.sn-frame--empty p{margin:0;font-size:13.5px;max-width:440px;line-height:1.55}

.sn-servers{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:14px}
.sn-servers__label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;color:var(--txt-3)}
.sn-servers__label .sn-icon{color:var(--sn-accent)}
.sn-server{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--txt-2);transition:.15s}
.sn-server small{font-weight:600;color:var(--txt-3);font-size:11px}
.sn-server b{background:var(--sn-accent);color:#221602;font-size:9.5px;padding:2px 5px;border-radius:4px;letter-spacing:.3px}
.sn-server:hover{border-color:var(--sn-primary);color:#fff}
.sn-server.is-active{background:var(--sn-primary);color:#04222a;border-color:transparent}
.sn-server.is-active small{color:rgba(4,34,42,.75)}
.sn-server.is-active b{background:rgba(4,34,42,.2);color:#04222a}

.sn-note{margin:14px 0 0;font-size:12.5px;color:var(--txt-2);line-height:1.6;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:10px;padding:11px 14px}
.sn-note .sn-icon{vertical-align:-3px;color:var(--sn-accent)}

.sn-teams{display:flex;align-items:center;justify-content:center;gap:20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:14px}
.sn-team{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;flex:1;max-width:190px}
.sn-team img{width:54px;height:54px;object-fit:contain}
.sn-team span{font-size:13.5px;font-weight:700}
.sn-teams__vs{font-size:12.5px;font-weight:900;color:var(--txt-3);letter-spacing:1px}

/* -------------------- SCHEDULE LIST -------------------- */
.sn-fixtures{display:flex;flex-direction:column;gap:8px}
.sn-fixture{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;transition:.15s}
.sn-fixture:hover{border-color:var(--line-2)}
.sn-fixture__time{flex-shrink:0;width:58px;text-align:center;border-right:1px solid var(--line);padding-right:13px}
.sn-fixture__time b{display:block;font-weight:800;font-size:15px;color:var(--sn-primary)}
.sn-fixture__time span{font-size:10.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.4px}
.sn-fixture__match{flex:1;min-width:0}
.sn-fixture__teams{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.sn-fx__side{display:inline-flex;align-items:center;gap:8px;min-width:0}
.sn-fx__logo{width:26px;height:26px;object-fit:contain;flex-shrink:0;background:rgba(255,255,255,.07);
  border-radius:7px;padding:2px}
.sn-fx__logo--ph{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  color:var(--txt-3);line-height:1}
.sn-fixture__team{font-weight:700;font-size:14.5px}
.sn-fixture__vs{font-weight:800;color:var(--txt-3);font-size:12.5px;flex-shrink:0}
.sn-fixture__league{font-size:12.5px;color:var(--txt-3);margin-top:5px}
.sn-fixture.is-live{border-color:rgba(239,68,68,.4)}
.sn-fixture.is-live .sn-fixture__time b{color:var(--live)}
.sn-fixture__watch{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;
  background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);color:#fca5a5;font-size:12.5px;font-weight:800}
.sn-fixture__watch:hover{background:var(--live);color:#fff;border-color:transparent}
@media(max-width:560px){
  .sn-fixture{gap:10px;padding:11px 12px}
  .sn-fixture__time{width:50px;padding-right:10px}
  .sn-fixture__team{font-size:13px}
  .sn-fx__logo{width:22px;height:22px;border-radius:6px}
  .sn-fixture__teams{gap:3px 6px}
  .sn-fixture__watch span{display:none}
}
@media(max-width:400px){
  /* Tim disusun bertumpuk agar nama panjang tidak terpotong */
  .sn-fixture__teams{flex-direction:column;align-items:flex-start;gap:5px}
  .sn-fixture__vs{display:none}
}

/* -------------------- SIDEBAR -------------------- */
.sidebar .sn-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.sn-box__head{display:flex;align-items:center;gap:9px;padding:13px 15px;font-weight:800;font-size:14.5px;
  border-bottom:1px solid var(--line)}
.sn-box__head .sn-icon{color:var(--sn-primary)}
.sn-box--live .sn-box__head{color:#fca5a5}
.sn-box__more{margin-left:auto;font-size:12px;font-weight:700;color:var(--sn-primary)}
.sn-list{list-style:none;margin:0;padding:5px 0}
.sn-list li{border-bottom:1px solid var(--line)}
.sn-list li:last-child{border-bottom:0}
.sn-list a{display:flex;align-items:center;gap:10px;padding:11px 15px;transition:.15s}
.sn-list a:hover{background:var(--surface-2)}
.sn-list__txt{font-size:13.5px;font-weight:600;line-height:1.35;flex:1}
.sn-list small{font-size:10.5px;font-weight:800;color:var(--txt-3);text-transform:uppercase;flex-shrink:0}
.sn-quicklinks a{display:flex;align-items:center;gap:9px;padding:10px 15px;font-weight:600;font-size:14px;
  border-bottom:1px solid var(--line);color:var(--txt-2)}
.sn-quicklinks a:last-child{border-bottom:0}
.sn-quicklinks a:hover{background:var(--surface-2);color:#fff}
.sn-quicklinks .sn-cat-logo{width:18px;height:18px}

/* -------------------- ADS -------------------- */
.sn-ad-strip{display:flex;justify-content:center;padding:10px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.sn-ad-strip--footer{border-top:1px solid var(--line);border-bottom:0}
.ad-unit{margin:0 auto;text-align:center;max-width:100%;overflow:hidden}
.sidebar .ad-unit{margin-bottom:16px}
.ad-in-article{margin:24px 0;text-align:center}

/* -------------------- EMPTY STATE -------------------- */
.sn-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:46px 22px;
  text-align:center;color:var(--txt-3)}
.sn-empty h3{color:var(--txt);margin:0 0 9px;font-size:17px}
.sn-empty p{margin:6px 0;font-size:14px}
.sn-empty a{color:var(--sn-primary);font-weight:700}

/* -------------------- FOOTER -------------------- */
.sn-footer{background:var(--bg-2);border-top:1px solid var(--line);margin-top:40px;color:var(--txt-2)}
.sn-footer__inner{max-width:1320px;margin:0 auto;padding:34px 16px;display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:760px){.sn-footer__inner{grid-template-columns:2fr 1fr 1fr}}
.sn-footer__brand p{font-size:13px;margin:12px 0 0;max-width:340px;color:var(--txt-3)}
.sn-footer__brand .sn-logo__mark{display:inline-block;margin-right:8px}
.sn-footer__links h4{color:#fff;margin:0 0 13px;font-size:14.5px}
.sn-footer__links a{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px}
.sn-footer__links a:hover{color:var(--sn-primary)}
.sn-footer__links .sn-cat-logo{width:16px;height:16px}
.sn-footer__copy{border-top:1px solid var(--line);text-align:center;padding:17px;font-size:12.5px;color:var(--txt-3)}
.sn-footer__copy a{color:var(--sn-primary)}

/* -------------------- MOBILE NAV -------------------- */
@media(max-width:1024px){
  .sn-nav{
    position:fixed;top:0;left:0;bottom:0;width:288px;background:var(--bg-2);border-right:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:70px 0 20px;margin:0;
    transform:translateX(-100%);transition:transform .28s ease;z-index:45;overflow-y:auto;
  }
  .sn-nav.is-open{transform:translateX(0)}
  .sn-nav__item{display:block}
  .sn-nav__top{width:100%;height:auto;padding:14px 20px;font-size:15px;justify-content:flex-start;
    border-bottom:1px solid var(--line);box-shadow:none}
  .sn-nav__top.is-active,.sn-nav__item.is-active>.sn-nav__top{box-shadow:inset 3px 0 0 var(--sn-primary)}
  .sn-nav__caret{margin-left:auto;transition:transform .2s}
  .sn-nav__item:not(.sn-nav__item--more) .sn-dd{display:none}
  .sn-nav__item:not(.sn-nav__item--more) .sn-nav__caret{display:none}
  .sn-nav__item--more.is-open .sn-nav__caret{transform:rotate(180deg)}
  .sn-nav__item--more .sn-dd{
    position:static;opacity:1;visibility:visible;transform:none;display:none;border:0;
    min-width:0;width:100%;background:rgba(0,0,0,.25);box-shadow:none;border-radius:0;padding:4px 0;
    grid-template-columns:1fr 1fr;
  }
  .sn-nav__item--more.is-open .sn-dd{display:grid}
  .sn-dd__grid-item{padding:11px 14px;border-radius:0}
}
@media(min-width:1025px){.sn-burger{display:none}}

/* Layar menengah: rapatkan menu agar tidak melebar melebihi lebar layar */
@media(min-width:1025px) and (max-width:1360px){
  .sn-nav{gap:0;margin-left:2px;min-width:0}
  .sn-nav__top{padding:0 8px;font-size:13px;gap:5px}
  .sn-logo__text{font-size:17px}
  
}
@media(min-width:1025px) and (max-width:1180px){
  .sn-nav__top{padding:0 6px;font-size:12.5px}
  .sn-logo__text{display:none}
}
@media(max-width:520px){
  .sn-logo__text{display:none}

  .sn-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-live-card__title{font-size:13px}
  .sn-nav__item--more .sn-dd{grid-template-columns:1fr}
  .sn-teams{gap:12px;padding:14px}
  .sn-team img{width:44px;height:44px}

}

/* Layar sangat sempit (<=360px): kartu jadi satu kolom */
@media(max-width:360px){
  .sn-live-grid,.sn-sports{grid-template-columns:1fr}
  .sn-main{padding:18px 12px 10px}
}