/* ═══════════════════════════════════════════════
   INfootball.online — Main Stylesheet v2.0
   Утверждённый дизайн
═══════════════════════════════════════════════ */

/* ─── VARIABLES ─── */
:root {
  --bg:       #080a12;
  --bg2:      #0e1120;
  --bg3:      #111525;
  --bg4:      #161b2e;
  --red:      #e8002d;
  --red-glow: rgba(232,0,45,0.35);
  --red-dim:  rgba(232,0,45,0.08);
  --gold:     #c9a84c;
  --gold-dim: rgba(201,168,76,0.12);
  --green:    #00e676;
  --text:     #f0f2f8;
  --text2:    #8892aa;
  --text3:    #4a5270;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.1);
  --font-d:   'Teko', sans-serif;
  --font-c:   'Barlow Condensed', sans-serif;
  --font-b:   'Barlow', sans-serif;
  --r:        4px;
  --hdr:      62px;
  --ls:       40px;
  --tk:       34px;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--bg); color:var(--text); font-family:var(--font-b); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
button { cursor:pointer; border:none; background:none; }
ul, ol { list-style:none; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--red); }

/* ══════════════════════════════════
   LIVE SCORES BAR
══════════════════════════════════ */
.livescores-bar {
  background:#050710;
  border-bottom:1px solid var(--border);
  height:var(--ls);
  display:flex; align-items:center;
  overflow:hidden; position:relative; z-index:200;
}
.livescores-bar::after {
  content:''; position:absolute; right:0; top:0;
  width:60px; height:100%;
  background:linear-gradient(to left,#050710,transparent);
  pointer-events:none; z-index:2;
}
.ls-label {
  background:var(--red); color:#fff;
  font-family:var(--font-c); font-size:10px; font-weight:800; letter-spacing:2px;
  padding:0 16px 0 12px; height:100%;
  display:flex; align-items:center; white-space:nowrap; flex-shrink:0;
  text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);
}
.ls-live-dot {
  width:6px; height:6px; background:var(--green);
  border-radius:50%; flex-shrink:0; margin:0 10px;
  animation:pulse-dot 1.4s ease-in-out infinite;
  box-shadow:0 0 8px var(--green);
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);} }
.ls-scroll-wrapper { flex:1; overflow:hidden; }
.ls-track { display:flex; animation:scroll-left 50s linear infinite; white-space:nowrap; }
.ls-track:hover { animation-play-state:paused; }
@keyframes scroll-left { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
.ls-match {
  display:inline-flex; align-items:center; gap:7px;
  padding:0 20px; border-right:1px solid var(--border);
  font-family:var(--font-c); font-size:13px;
}
.ls-match .competition { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.ls-match .teams { color:var(--text); font-weight:600; }
.ls-match .score { background:var(--bg3); color:#fff; font-weight:800; font-size:13px; padding:1px 7px; border-radius:3px; }
.ls-match .score.live { background:var(--red); animation:score-pulse 2s ease-in-out infinite; }
@keyframes score-pulse { 0%,100%{box-shadow:0 0 0 rgba(232,0,45,0);}50%{box-shadow:0 0 14px rgba(232,0,45,.6);} }
.ls-match .time { color:var(--text3); font-size:11px; }
.ls-loading { color:var(--text3); font-family:var(--font-c); font-size:12px; padding:0 16px; }

/* ══════════════════════════════════
   HEADER
══════════════════════════════════ */
.header {
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.header-inner {
  max-width:1320px; margin:0 auto;
  padding:0 20px; height:var(--hdr);
  display:flex; align-items:center; gap:28px;
}

/* LOGO — 2 цвета: белый + красный */
.logo { display:flex; align-items:center; gap:0; flex-shrink:0; }
.logo-in { font-family:var(--font-d); font-size:38px; font-weight:700; line-height:1; letter-spacing:-1px; color:#fff; }
.logo-n  { color:var(--red); text-shadow:0 0 24px var(--red-glow); }
.logo-sep { width:1px; height:28px; background:rgba(255,255,255,.15); margin:0 10px; flex-shrink:0; }
.logo-rest { display:flex; flex-direction:column; justify-content:center; }
.logo-football { font-family:var(--font-c); font-size:13px; font-weight:700; letter-spacing:3px; color:#fff; text-transform:uppercase; line-height:1; }
.logo-online { font-family:var(--font-c); font-size:9px; letter-spacing:2px; color:rgba(255,255,255,.35); text-transform:uppercase; line-height:1.7; }

/* NAV */
.nav { display:flex; align-items:center; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar { display:none; }
.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-item {
  font-family:var(--font-c); font-size:14px; font-weight:600;
  letter-spacing:.5px; color:var(--text2);
  padding:7px 12px; border-radius:3px;
  white-space:nowrap; transition:all .2s; text-transform:uppercase; position:relative;
}
.nav-item:hover, .nav-item.active { color:var(--text); background:rgba(255,255,255,.04); }
.nav-item.active::after {
  content:''; position:absolute; bottom:0; left:12px; right:12px;
  height:2px; background:var(--red); box-shadow:0 0 8px var(--red-glow);
}
.nav-item.wc { color:var(--gold); border:1px solid rgba(201,168,76,.25); }

/* HEADER RIGHT */
.header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lang-switch { display:flex; background:var(--bg3); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.lang-btn { font-family:var(--font-c); font-size:11px; font-weight:700; letter-spacing:1px; padding:5px 10px; color:var(--text3); transition:all .2s; }
.lang-btn.active, .lang-btn:hover { background:var(--red); color:#fff; }
.social-icons { display:flex; gap:5px; }
.social-icon {
  width:28px; height:28px; border:1px solid var(--border); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:11px; transition:all .2s;
}
.social-icon:hover { border-color:var(--red); color:var(--red); box-shadow:0 0 10px var(--red-glow); }
.login-btn {
  font-family:var(--font-c); font-size:13px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; background:var(--red); color:#fff;
  padding:6px 16px; border-radius:3px; transition:all .2s;
}
.login-btn:hover { background:#c00025; box-shadow:0 0 15px var(--red-glow); }
.mobile-menu-toggle { display:none; flex-direction:column; gap:5px; padding:5px; }
.mobile-menu-toggle span { display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; }
.mobile-nav { display:none; background:var(--bg2); border-top:1px solid var(--border); padding:10px 20px; }
.mobile-nav.open { display:block; }
.mobile-nav-menu { display:flex; flex-direction:column; gap:2px; }
.mobile-nav-menu .nav-item { display:block; }

/* ══════════════════════════════════
   TOP AD BANNER
══════════════════════════════════ */
.ad-banner-top { background:var(--bg2); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; padding:10px 20px; min-height:90px; }
.ad-placeholder { width:100%; max-width:970px; height:90px; background:var(--bg3); border:1px dashed var(--border); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--text3); font-family:var(--font-c); font-size:11px; letter-spacing:2px; text-transform:uppercase; }

/* ══════════════════════════════════
   BREAKING TICKER
══════════════════════════════════ */
.breaking-ticker { background:var(--red); height:var(--tk); display:flex; align-items:center; overflow:hidden; }
.ticker-label {
  background:#fff; color:var(--red);
  font-family:var(--font-c); font-size:10px; font-weight:800; letter-spacing:2px;
  padding:0 16px 0 12px; height:100%; display:flex; align-items:center;
  white-space:nowrap; flex-shrink:0; text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);
}
.ticker-dot { width:6px; height:6px; background:#fff; border-radius:50%; margin:0 10px; flex-shrink:0; animation:pulse-dot 1s infinite; }
.ticker-track-wrapper { flex:1; overflow:hidden; }
.ticker-track { display:flex; animation:ticker-move 35s linear infinite; white-space:nowrap; }
.ticker-track:hover { animation-play-state:paused; }
@keyframes ticker-move { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
.ticker-item { font-family:var(--font-c); font-size:14px; font-weight:600; color:#fff; padding:0 32px 0 0; white-space:nowrap; }
.ticker-item::before { content:'◆'; margin-right:10px; font-size:7px; opacity:.7; vertical-align:middle; }

/* ══════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════ */
.main-wrapper { max-width:1320px; margin:0 auto; padding:20px; }
.content-grid { display:grid; grid-template-columns:210px 1fr 290px; gap:18px; align-items:start; }

/* ══════════════════════════════════
   LEFT: XƏBƏR XƏTTİ
══════════════════════════════════ */
.xeber-xetti { position:sticky; top:calc(var(--hdr) + var(--ls) + var(--tk) + 20px); }
.sidebar-title { font-family:var(--font-c); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text2); border-left:3px solid var(--red); padding-left:10px; margin-bottom:10px; display:flex; align-items:center; gap:8px; box-shadow:-3px 0 10px var(--red-glow); }
.live-badge { background:var(--red); color:#fff; font-size:8px; padding:1px 5px; border-radius:2px; letter-spacing:1px; animation:score-pulse 2s infinite; }
.xeber-feed { display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 220px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.xeber-item { padding:8px 10px; background:var(--bg3); border-left:2px solid transparent; border-radius:0 3px 3px 0; transition:all .2s; display:block; }
.xeber-item:hover { background:var(--bg4); border-left-color:var(--red); }
.xeber-item.breaking { border-left-color:var(--red); background:var(--red-dim); }
.xeber-time { font-family:var(--font-c); font-size:10px; color:var(--red); letter-spacing:1px; margin-bottom:3px; }
.xeber-text { font-family:var(--font-c); font-size:13px; font-weight:500; color:var(--text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.xeber-category { font-family:var(--font-c); font-size:10px; color:var(--text3); margin-top:3px; text-transform:uppercase; letter-spacing:.8px; }

/* ══════════════════════════════════
   HERO BLOCK — 3fr/2fr, акцент на главное
══════════════════════════════════ */
.hero-grid { display:grid; grid-template-columns:3fr 2fr; grid-template-rows:260px 130px; gap:3px; margin-bottom:20px; }
.hero-main { grid-column:1; grid-row:1/3; position:relative; overflow:hidden; border-radius:3px; cursor:pointer; background:var(--bg3); display:block; }
.hero-main::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(8,10,18,.95) 0%,rgba(8,10,18,.4) 55%,transparent 100%); }
.hero-main::after { content:''; position:absolute; inset:0; z-index:2; border:2px solid rgba(232,0,45,0); transition:border-color .3s; pointer-events:none; border-radius:3px; }
.hero-main:hover::after { border-color:rgba(232,0,45,.6); box-shadow:inset 0 0 30px rgba(232,0,45,.08); }
.hero-main-img, .hero-fake-image { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; filter:grayscale(20%); }
.hero-fake-image { display:flex; align-items:center; justify-content:center; font-size:90px; background:linear-gradient(135deg,#1a1030,#0d0818,#1a0a10); }
.hero-main:hover .hero-main-img, .hero-main:hover .hero-fake-image { transform:scale(1.04); }
.hero-main-content { position:absolute; bottom:0; left:0; right:0; padding:16px 18px; z-index:3; }
.hero-badge { display:inline-block; font-family:var(--font-c); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:2px 9px; border-radius:2px; margin-bottom:8px; }
.badge-red    { background:var(--red); color:#fff; }
.badge-gold   { background:var(--gold); color:#000; }
.badge-blue   { background:#0066ff; color:#fff; }
.badge-outline{ background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; }
.hero-main-title { font-family:var(--font-d); font-size:28px; font-weight:600; line-height:1.1; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.9); margin-bottom:8px; }
.hero-meta { display:flex; align-items:center; gap:7px; font-family:var(--font-c); font-size:12px; color:rgba(255,255,255,.5); }
.hero-meta .dot { opacity:.3; }
.hero-side { position:relative; overflow:hidden; border-radius:2px; cursor:pointer; background:var(--bg3); display:block; }
.hero-side::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(8,10,18,.92) 0%,rgba(8,10,18,.2) 100%); }
.hero-side::after { content:''; position:absolute; inset:0; z-index:2; border:1px solid rgba(232,0,45,0); transition:border-color .3s; pointer-events:none; }
.hero-side:hover::after { border-color:rgba(232,0,45,.5); }
.hero-side-img, .hero-side-fake { width:100%; height:100%; object-fit:cover; transition:transform .5s; filter:grayscale(30%); }
.hero-side-fake { display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg,#0a1628,#1a0a10); }
.hero-side:hover .hero-side-img, .hero-side:hover .hero-side-fake { transform:scale(1.05); }
.hero-side-content { position:absolute; bottom:0; left:0; right:0; padding:10px 12px; z-index:3; }
.hero-side-title { font-family:var(--font-c); font-size:15px; font-weight:700; line-height:1.25; color:#fff; }
.hero-side-meta { font-family:var(--font-c); font-size:11px; color:rgba(255,255,255,.4); margin-top:3px; }

/* ══════════════════════════════════
   SECTION HEADERS
══════════════════════════════════ */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-title { font-family:var(--font-d); font-size:22px; font-weight:600; letter-spacing:1px; display:flex; align-items:center; gap:10px; }
.section-title::before { content:''; width:4px; height:22px; background:var(--red); box-shadow:0 0 10px var(--red-glow); border-radius:2px; }
.section-more { font-family:var(--font-c); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); border:1px solid rgba(232,0,45,.3); padding:3px 11px; border-radius:var(--r); transition:all .2s; }
.section-more:hover { background:var(--red); color:#fff; }

/* ══════════════════════════════════
   INSAYDS
══════════════════════════════════ */
.insayds-section { margin-top:16px; }
.insayds-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.insayd-list { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px; }
.insayd-label { font-family:var(--font-c); font-size:11px; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--border); padding-bottom:7px; }
.insayd-item { padding:9px; background:var(--bg2); border-radius:3px; border-left:2px solid var(--border); transition:all .2s; }
.insayd-item:hover { border-left-color:var(--gold); background:var(--gold-dim); }
.insayd-title { font-family:var(--font-c); font-size:13px; font-weight:600; color:var(--text); line-height:1.35; margin-bottom:7px; display:block; }
.insayd-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px; }
.insayd-source { font-family:var(--font-c); font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; }
.reliability-bar { display:flex; align-items:center; gap:5px; }
.reliability-label { font-family:var(--font-c); font-size:10px; color:var(--text3); }
.reliability-percent { font-family:var(--font-c); font-size:13px; font-weight:700; }
.r-high { color:var(--green); } .r-mid { color:var(--gold); } .r-low { color:#ff6d00; }
.reliability-track { width:46px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.reliability-fill { height:100%; border-radius:2px; transition:width 1s ease; }
.fill-high { background:var(--green); box-shadow:0 0 6px rgba(0,230,118,.6); }
.fill-mid  { background:var(--gold); }
.fill-low  { background:#ff6d00; }

/* ══════════════════════════════════
   NEWS GRID
══════════════════════════════════ */
.latest-news-section { margin-top:16px; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.news-card { background:var(--bg3); border-radius:var(--r); overflow:hidden; transition:all .25s; border:1px solid var(--border); display:block; }
.news-card:hover { transform:translateY(-3px); border-color:rgba(232,0,45,.2); box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 20px rgba(232,0,45,.05); }
.news-card-img { width:100%; aspect-ratio:16/9; overflow:hidden; }
.news-card-fake { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:36px; transition:transform .5s; }
.news-card:hover .news-card-fake { transform:scale(1.06); }
.news-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.news-card:hover .news-card-img img { transform:scale(1.06); }
.news-card-body { padding:11px; }
.news-card-cat { font-family:var(--font-c); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin-bottom:5px; }
.news-card-title { font-family:var(--font-c); font-size:15px; font-weight:700; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-card-meta { display:flex; align-items:center; gap:6px; margin-top:8px; font-family:var(--font-c); font-size:11px; color:var(--text3); }

/* ══════════════════════════════════
   RIGHT SIDEBAR
══════════════════════════════════ */
.right-sidebar { display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--hdr) + var(--ls) + var(--tk) + 20px); }
.ad-sidebar { background:var(--bg3); border:1px dashed var(--border); border-radius:var(--r); min-height:250px; display:flex; align-items:center; justify-content:center; color:var(--text3); font-family:var(--font-c); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.widget { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.widget-header { padding:10px 13px; background:var(--bg2); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.widget-title { font-family:var(--font-c); font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.widget-title span { color:var(--gold); font-size:10px; }
.widget-tabs { display:flex; gap:4px; }
.widget-tab { font-family:var(--font-c); font-size:11px; font-weight:600; letter-spacing:1px; padding:3px 9px; border-radius:2px; color:var(--text3); background:transparent; transition:all .2s; }
.widget-tab.active, .widget-tab:hover { background:var(--red); color:#fff; }
.widget-loading { padding:16px; text-align:center; color:var(--text3); font-family:var(--font-c); font-size:12px; }

/* STANDINGS TABLE */
.standings-table { width:100%; border-collapse:collapse; }
.standings-table th { font-family:var(--font-c); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); padding:5px 7px; text-align:center; border-bottom:1px solid var(--border); }
.standings-table th:first-child, .standings-table th:nth-child(2) { text-align:left; }
.standings-table td { padding:7px 7px; text-align:center; font-family:var(--font-c); font-size:12px; color:var(--text2); border-bottom:1px solid rgba(255,255,255,.03); }
.standings-table td:first-child { text-align:left; width:22px; color:var(--text3); font-size:10px; }
.standings-table td.team-name { text-align:left; color:var(--text); font-weight:600; font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.standings-table td.team-name img { border-radius:50%; }
.standings-table tr:hover td { background:rgba(255,255,255,.02); }
.standings-table tr.highlight td { background:var(--red-dim); }
.standings-table td.pts { font-weight:700; color:var(--text); }
.form-dots { display:flex; gap:2px; justify-content:center; }
.form-dot { width:6px; height:6px; border-radius:50%; }
.w { background:var(--green); } .d { background:var(--gold); } .l { background:var(--red); }
.standings-legend { padding:8px 12px; border-top:1px solid var(--border); display:flex; gap:12px; flex-wrap:wrap; background:var(--bg2); }
.standings-legend span { font-family:var(--font-c); font-size:10px; color:var(--text3); display:flex; align-items:center; gap:5px; letter-spacing:.5px; }
.standings-legend em { display:inline-block; width:8px; height:8px; border-radius:50%; font-style:normal; }
.standings-updated { padding:6px 12px; font-family:var(--font-c); font-size:10px; color:var(--text3); background:var(--bg2); border-top:1px solid var(--border); letter-spacing:.5px; }

/* MATCH ITEM */
.match-item { padding:11px 14px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.match-competition { font-family:var(--font-c); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); }
.match-teams-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.match-team { font-family:var(--font-c); font-size:13px; font-weight:700; color:var(--text); flex:1; display:flex; align-items:center; gap:5px; }
.match-team img { border-radius:50%; }
.match-team.right { text-align:right; justify-content:flex-end; }
.match-vs { background:var(--bg2); border:1px solid var(--border); border-radius:3px; padding:3px 8px; font-family:var(--font-d); font-size:18px; font-weight:600; color:var(--text3); white-space:nowrap; min-width:65px; text-align:center; }
.match-vs.live-score { background:var(--red-dim); border-color:var(--red); color:#fff; animation:score-pulse 2s infinite; }
.match-time { font-family:var(--font-c); font-size:10px; color:var(--text3); text-align:center; }

/* ══════════════════════════════════
   SINGLE ARTICLE
══════════════════════════════════ */
.single-wrapper .main-wrapper { padding-top:0; }
.breadcrumb { background:var(--bg2); border-bottom:1px solid var(--border); padding:10px 0; }
.breadcrumb-inner { max-width:1320px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:8px; font-family:var(--font-c); font-size:12px; color:var(--text3); }
.breadcrumb a { color:var(--text3); transition:color .2s; }
.breadcrumb a:hover { color:var(--red); }
.breadcrumb .sep { opacity:.4; }
.breadcrumb .current { color:var(--text2); }
.single-grid { display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.article-cats { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; margin-top:20px; }
.article-badge { display:inline-block; font-family:var(--font-c); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; border-radius:2px; }
.article-badge.badge-red { background:var(--red); color:#fff; }
.article-badge.badge-gold { background:var(--gold); color:#000; }
.article-badge.badge-outline { background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text2); transition:all .2s; }
.article-badge.badge-outline:hover { border-color:var(--red); color:var(--red); }
.article-title { font-family:var(--font-d); font-size:42px; font-weight:600; line-height:1.1; color:var(--text); margin-bottom:16px; letter-spacing:.5px; }
.article-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-c); font-size:13px; color:var(--text3); margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.article-time { color:var(--red); font-weight:600; }
.article-source { color:var(--text2); }
.article-featured-img { border-radius:var(--r); overflow:hidden; margin-bottom:20px; position:relative; }
.article-featured-img img { width:100%; max-height:460px; object-fit:cover; }
.article-content { font-size:16px; line-height:1.8; color:var(--text2); margin-bottom:28px; }
.article-content p { margin-bottom:18px; }
.article-content p:first-of-type { font-size:18px; color:var(--text); font-weight:500; border-left:3px solid var(--red); padding-left:16px; }
.article-content h2 { font-family:var(--font-d); font-size:28px; color:var(--text); margin:28px 0 12px; letter-spacing:.5px; }
.article-content h3 { font-family:var(--font-c); font-size:22px; font-weight:700; color:var(--text); margin:22px 0 10px; }
.article-content a { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.article-content strong { color:var(--text); font-weight:700; }
.article-content blockquote { border-left:3px solid var(--red); background:var(--bg3); padding:16px 20px; margin:20px 0; border-radius:0 4px 4px 0; font-style:italic; color:var(--text); font-size:17px; box-shadow:-3px 0 12px var(--red-glow); }
.article-content blockquote cite { display:block; margin-top:8px; font-family:var(--font-c); font-size:13px; color:var(--text3); font-style:normal; letter-spacing:.5px; }
.article-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.article-tag { font-family:var(--font-c); font-size:12px; letter-spacing:1px; background:var(--bg3); border:1px solid var(--border); color:var(--text2); padding:4px 12px; border-radius:2px; transition:all .2s; }
.article-tag:hover { border-color:var(--red); color:var(--red); }
.article-share-bar { display:flex; align-items:center; gap:10px; margin-top:20px; padding:14px; background:var(--bg3); border-radius:var(--r); flex-wrap:wrap; }
.article-share-bar span { font-family:var(--font-c); font-size:12px; color:var(--text3); letter-spacing:1px; }
.share-btn { font-family:var(--font-c); font-size:12px; font-weight:700; letter-spacing:1px; padding:5px 14px; border-radius:3px; transition:all .2s; display:flex; align-items:center; gap:5px; }
.share-tg { background:rgba(0,136,204,.12); border:1px solid rgba(0,136,204,.25); color:#4a9edd; }
.share-tg:hover { background:#0088cc; color:#fff; }
.share-fb { background:rgba(24,119,242,.1); border:1px solid rgba(24,119,242,.2); color:#1877f2; }
.share-fb:hover { background:#1877f2; color:#fff; }
.share-wa { background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.2); color:#25d366; }
.share-wa:hover { background:#25d366; color:#fff; }
.share-cp { background:rgba(255,255,255,.05); border:1px solid var(--border2); color:var(--text2); }
.share-cp:hover { background:rgba(255,255,255,.1); color:#fff; }
.related-news { margin-top:28px; }

/* Author box */
.author-box { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; margin-bottom:28px; display:flex; align-items:center; gap:16px; }
.author-avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--red),#800015); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:22px; font-weight:600; color:#fff; flex-shrink:0; }
.author-name { font-family:var(--font-c); font-size:16px; font-weight:700; margin-bottom:2px; }
.author-role { font-family:var(--font-c); font-size:11px; color:var(--text3); letter-spacing:1px; text-transform:uppercase; }
.author-desc { font-size:13px; color:var(--text2); margin-top:6px; line-height:1.5; }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.site-footer { margin-top:50px; }
.footer-top { background:var(--bg2); border-top:1px solid var(--border); padding:36px 20px; }
.footer-inner { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:280px 1fr 1fr 1fr; gap:40px; }
.footer-brand {}
.footer-desc { font-size:13px; color:var(--text3); line-height:1.65; margin-top:12px; max-width:240px; }
.footer-social { display:flex; gap:8px; margin-top:14px; }
.footer-social a { width:32px; height:32px; background:var(--bg3); border:1px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:12px; transition:all .2s; color:var(--text3); }
.footer-social a:hover { border-color:var(--red); color:var(--red); box-shadow:0 0 8px var(--red-glow); }
.footer-links {}
.footer-widget-title { font-family:var(--font-c); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text2); border-left:3px solid var(--red); padding-left:10px; margin-bottom:12px; }
.footer-nav-list { display:flex; flex-direction:column; gap:6px; }
.footer-nav-list a { font-family:var(--font-c); font-size:13px; color:var(--text3); letter-spacing:.5px; transition:color .2s; }
.footer-nav-list a:hover { color:var(--red); }
.footer-bottom { background:#050710; border-top:1px solid var(--border); padding:14px 20px; }
.footer-bottom .footer-inner { display:flex; align-items:center; justify-content:space-between; grid-template-columns:unset; }
.footer-copy { font-family:var(--font-c); font-size:12px; color:var(--text3); letter-spacing:.8px; }
.footer-copy span { color:var(--red); }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:1100px) {
  .content-grid { grid-template-columns:1fr 270px; }
  .xeber-xetti { display:none; }
  .insayds-grid { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  :root { --hdr:56px; }
  .content-grid, .single-grid { grid-template-columns:1fr; }
  .right-sidebar { display:none; }
  .hero-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .hero-main { grid-row:1; aspect-ratio:16/9; }
  .insayds-grid { grid-template-columns:1fr; }
  .news-grid { grid-template-columns:1fr 1fr; }
  .nav { display:none; }
  .social-icons { display:none; }
  .mobile-menu-toggle { display:flex; }
  .mobile-nav.open { display:block; }
  .article-title { font-size:28px; }
  .footer-inner { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .news-grid { grid-template-columns:1fr; }
  .logo-football, .logo-online { display:none; }
  .logo-in { font-size:30px; }
}