/* FK Čukarički – početna. Crno + zlato: Big Shoulders (naslovi), DM Sans (tekst), Fraunces kurziv (zlatni akcenti). */
:root {
	--bk: #0a0a0a;
	--bk2: #121110;
	--bk3: #1b1915;
	--gold: #d4af37;
	--gold-hi: #f0d57a;
	--gold-lo: #9a7b17;
	--cream: #f6f1e1;
	--line: rgba(212, 175, 55, .22);
	--mute: rgba(246, 241, 225, .62);
	--f-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--f-body: 'DM Sans', system-ui, sans-serif;
	--f-serif: 'Fraunces', Georgia, serif;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--hh: 78px;
}
.ck-home { margin: 0; background: var(--bk); color: var(--cream); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.ck-home *, .ck-home *::before, .ck-home *::after { box-sizing: border-box; }
.ck-home img { display: block; max-width: 100%; }
:where(.ck-home) a { color: inherit; text-decoration: none; }
:where(.ck-home) :is(h1, h2, h3, h4, p, ul, ol) { margin: 0; padding: 0; }
:where(.ck-home) :is(ul, ol) { list-style: none; }
.ck-home ::selection { background: var(--gold); color: var(--bk); }
.ck-wrap { width: min(1280px, 100% - 40px); margin-inline: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- osnovni elementi ---------- */
.ck-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border: 1.5px solid transparent; border-radius: 999px; font: 700 14px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s; white-space: nowrap; cursor: pointer; }
.ck-btn:hover { transform: translateY(-2px); }
.ck-btn--gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--bk); }
.ck-btn--gold:hover { filter: brightness(1.08); }
.ck-btn--ghost { border-color: var(--line); color: var(--cream); }
.ck-btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.ck-kicker { font: 700 12.5px/1 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.ck-kicker--line { display: flex; align-items: center; gap: 14px; }
.ck-kicker--line::before { content: ''; width: 44px; height: 1.5px; background: var(--gold); }
.ck-title { font: 800 clamp(40px, 6vw, 84px)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .005em; margin-top: 16px; }
.ck-title em, .ck-display em { font: italic 500 .86em/1 var(--f-serif); text-transform: none; letter-spacing: -.01em; color: var(--gold); }
.ck-more { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding-bottom: 6px; border-bottom: 1.5px solid currentColor; transition: gap .3s var(--ease), color .2s; }
.ck-more:hover { gap: 13px; color: var(--gold-hi); }
.ck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.ck-readmore { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ck-crest, .np-crest { width: 34px; height: 34px; object-fit: contain; flex: none; }
.np-mono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); font: 800 12px/1 var(--f-display); color: var(--gold); flex: none; }
.np-mono--us { background: var(--gold); color: var(--bk); border-color: var(--gold); }

[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- header ---------- */
.ck-header { position: fixed; z-index: 70; inset: 0 0 auto 0; transition: background .35s, box-shadow .35s, transform .4s var(--ease); }
.ck-header.is-scrolled { background: rgba(10, 10, 10, .88); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.ck-header__bar { display: flex; align-items: center; gap: 28px; height: var(--hh); }
.ck-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.ck-brand img { width: 46px; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.ck-brand span { display: grid; line-height: 1.1; }
.ck-brand b { font: 800 22px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.ck-brand small { font: 500 11px/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ck-nav > ul { display: flex; align-items: center; gap: 2px; }
.ck-nav li { position: relative; }
.ck-nav > ul > li > a { display: block; padding: 12px 14px; font: 600 13.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 241, 225, .86); transition: color .2s; }
.ck-nav > ul > li > a:hover, .ck-nav li.is-open > a { color: var(--gold); }
.ck-nav li.has-sub > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ck-sub { position: absolute; left: 0; top: 100%; min-width: 220px; padding: 10px; background: var(--bk2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -20px #000; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease); }
.ck-nav li:hover > .ck-sub, .ck-nav li.is-open > .ck-sub, .ck-nav li:focus-within > .ck-sub { opacity: 1; visibility: visible; transform: none; }
.ck-sub a { display: block; padding: 11px 14px; border-radius: 8px; font: 500 14.5px/1.2 var(--f-body); color: var(--cream); }
.ck-sub a:hover { background: rgba(212, 175, 55, .12); color: var(--gold); }
.ck-header__cta { padding: 12px 22px; }
.ck-burger { display: none; width: 48px; height: 48px; border: 1.5px solid var(--line); border-radius: 50%; background: transparent; position: relative; cursor: pointer; }
.ck-burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--gold); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.ck-burger span:first-child { top: 19px; }
.ck-burger span:last-child { top: 27px; }
.ck-burger[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
.ck-burger[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }

/* mobilni meni preko celog ekrana */
.ck-mm { position: fixed; z-index: 65; inset: 0; padding: calc(var(--hh) + 20px) 24px 40px; background: radial-gradient(ellipse at 80% 10%, rgba(212, 175, 55, .16), transparent 55%), var(--bk); overflow-y: auto; clip-path: circle(0 at calc(100% - 44px) 40px); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
.ck-mm[data-open="true"] { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; transition: clip-path .7s var(--ease); }
.ck-mm__list > li { border-bottom: 1px solid var(--line); padding: 14px 0; }
.ck-mm__main { display: block; font: 800 40px/1.1 var(--f-display); text-transform: uppercase; }
.ck-mm__group { display: block; font: 700 12px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.ck-mm__list ul a { display: block; padding: 6px 0; font: 700 28px/1.15 var(--f-display); text-transform: uppercase; color: var(--cream); }
.ck-mm__soc { display: flex; gap: 12px; margin-top: 28px; }
.ck-mm__soc a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--gold); }
body.ck-lock { overflow: hidden; }

/* ---------- hero ---------- */
.ck-hero { position: relative; min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hh) + 40px) 0 200px; isolation: isolate; overflow: hidden; }
.ck-hero__bg { position: absolute; inset: 0; z-index: -1; }
.ck-hero__glow { position: absolute; right: -10%; top: 8%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 55, .34), rgba(212, 175, 55, .06) 55%, transparent 70%); filter: blur(10px); }
.ck-hero__lines { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(212, 175, 55, .07) 46px 47px); -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 80%); mask-image: linear-gradient(90deg, transparent 15%, #000 80%); }
.ck-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.ck-display { font: 900 clamp(64px, 11vw, 168px)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; margin: 26px 0 28px; }
.ck-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.ck-mask > span { display: block; transform: translateY(110%); animation: ck-up 1.1s var(--ease) forwards; }
.ck-mask:nth-child(2) > span { animation-delay: .12s; }
.ck-mask:nth-child(3) > span { animation-delay: .24s; }
@keyframes ck-up { to { transform: none; } }
.ck-hero__lead { max-width: 520px; color: var(--mute); font-size: 18px; }
.ck-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ck-hero__crest { position: relative; display: grid; place-items: center; justify-self: center; width: min(460px, 80vw); aspect-ratio: 1; }
.ck-hero__crest img { position: relative; width: 62%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .7)); animation: ck-float 7s ease-in-out infinite; }
.ck-ring { position: absolute; inset: 0; animation: ck-spin 40s linear infinite; }
.ck-ring text { font: 700 17.5px var(--f-body); letter-spacing: .26em; fill: var(--gold); }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@keyframes ck-float { 50% { transform: translateY(-14px) rotate(-1.5deg); } }

/* dok sa narednom utakmicom */
.ck-dock { position: absolute; left: 50%; bottom: 34px; translate: -50% 0; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px; padding: 18px 26px; background: rgba(18, 17, 16, .78); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(18px); box-shadow: 0 40px 80px -30px #000; }
.ck-dock__tag { display: grid; gap: 6px; font: 700 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ck-dock__tag span { color: var(--mute); letter-spacing: .12em; }
.ck-dock__tag i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--gold); animation: ck-pulse 2s infinite; }
@keyframes ck-pulse { 70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); } 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .6); } }
.ck-dock__teams { display: flex; align-items: center; justify-content: center; gap: 20px; }
.ck-dock__teams > div { display: flex; align-items: center; gap: 12px; font: 700 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.ck-dock__teams .np-crest, .ck-dock__teams .np-mono { width: 44px; height: 44px; }
.ck-dock__teams em { font: italic 500 18px var(--f-serif); color: var(--gold); }
.ck-dock__teams .is-us b { color: var(--gold); }
.ck-count { display: flex; gap: 8px; }
.ck-count div { display: grid; place-items: center; min-width: 58px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 12px; }
.ck-count b { font: 800 30px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ck-count small { font: 500 10px/1.6 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ck-count--tbd b { font-size: 24px; color: var(--gold); }
.ck-dock__meta { font: 500 13px/1.5 var(--f-body); color: var(--mute); text-align: right; }

/* ---------- ticker ---------- */
.ck-ticker { display: flex; align-items: stretch; background: var(--gold); color: var(--bk); overflow: hidden; }
.ck-ticker__label { flex: none; display: grid; place-items: center; padding: 0 22px; background: var(--bk); color: var(--gold); font: 800 15px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 1; }
.ck-ticker__viewport { overflow: hidden; flex: 1; }
.ck-ticker__track { display: flex; align-items: center; gap: 28px; width: max-content; padding: 15px 0; animation: ck-marq 90s linear infinite; font: 700 17px/1 var(--f-body); white-space: nowrap; }
.ck-ticker:hover .ck-ticker__track { animation-play-state: paused; }
.ck-ticker__track i { width: 8px; height: 8px; background: var(--bk); transform: rotate(45deg); flex: none; }
@keyframes ck-marq { to { transform: translateX(-50%); } }

/* ---------- vesti ---------- */
.ck-news { padding: clamp(70px, 10vw, 140px) 0; background: var(--bk); }
.ck-news__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.ck-lead { display: grid; gap: 22px; }
.ck-lead__img, .ck-ph { position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 11; background: var(--bk3); }
.ck-lead__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ck-lead:hover .ck-lead__img img, .ck-lead:hover .ck-ph { transform: scale(1.04); }
.ck-ph { width: 100%; height: 100%; aspect-ratio: auto; background:
	var(--club-logo) center 55% / 34% no-repeat,
	radial-gradient(ellipse at 20% 0, rgba(212, 175, 55, .32), transparent 60%),
	repeating-linear-gradient(115deg, transparent 0 22px, rgba(212, 175, 55, .08) 22px 23px),
	var(--bk3); transition: transform .8s var(--ease); }
.ck-lead__body { display: grid; gap: 14px; }
.ck-lead__body > b { font: 800 clamp(30px, 3.6vw, 50px)/1 var(--f-display); text-transform: uppercase; transition: color .25s; }
.ck-lead:hover .ck-lead__body > b { color: var(--gold); }
.ck-lead__ex { color: var(--mute); max-width: 60ch; }
.ck-meta { display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ck-meta em { font-style: normal; padding: 6px 11px; border-radius: 999px; background: rgba(212, 175, 55, .14); color: var(--gold); }
.ck-list { counter-reset: n; }
.ck-list li { border-top: 1px solid var(--line); }
.ck-list li:last-child { border-bottom: 1px solid var(--line); }
.ck-list a { display: grid; grid-template-columns: 56px 1fr 40px; gap: 14px; align-items: center; padding: 22px 0; transition: padding .35s var(--ease), background .3s; }
.ck-list a:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(212, 175, 55, .1), transparent); }
.ck-list__n { font: 800 38px/1 var(--f-display); color: transparent; -webkit-text-stroke: 1.2px var(--gold); }
.ck-list__t { display: grid; gap: 10px; }
.ck-list__t b { font: 700 20px/1.2 var(--f-body); }
.ck-list__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); transition: background .3s, color .3s, transform .3s var(--ease); }
.ck-list a:hover .ck-list__go { background: var(--gold); color: var(--bk); transform: rotate(45deg); }

/* ---------- match centar ---------- */
.ck-mc { padding: clamp(70px, 10vw, 130px) 0; background: var(--cream); color: var(--bk); position: relative; }
.ck-mc .ck-kicker { color: var(--gold-lo); }
.ck-mc .ck-title em { color: var(--gold-lo); }
.ck-mc .ck-more { color: var(--bk); }
.ck-mc .ck-more:hover { color: var(--gold-lo); }
.ck-form { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.ck-form span { margin-right: 6px; opacity: .6; }
.ck-form i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 14px/1 var(--f-display); font-style: normal; color: #fff; }
.ck-form .is-w, .ck-match.is-w .ck-match__badge { background: #1f7a3f; }
.ck-form .is-d, .ck-match.is-d .ck-match__badge { background: #8a8577; }
.ck-form .is-l, .ck-match.is-l .ck-match__badge { background: #a3262a; }
.ck-tabs { background: var(--bk); color: var(--cream); border-radius: 28px; padding: clamp(18px, 3vw, 36px); box-shadow: 0 50px 90px -40px rgba(10, 10, 10, .6); }
.ck-tabs__nav { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--bk3); margin-bottom: 20px; }
.ck-tabs__nav button { padding: 12px 24px; border: 0; border-radius: 999px; background: transparent; color: var(--mute); font: 700 13.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.ck-tabs__nav button[aria-selected="true"] { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: var(--bk); }
.ck-pane[hidden] { display: none; }
.ck-pane.is-active { animation: ck-fade .5s var(--ease); }
@keyframes ck-fade { from { opacity: 0; transform: translateY(10px); } }
.ck-match { display: grid; grid-template-columns: 120px 1fr 96px 1fr 40px; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid rgba(212, 175, 55, .14); }
.ck-match:hover { background: rgba(212, 175, 55, .05); }
.ck-match__when { display: grid; font: 500 12.5px/1.4 var(--f-body); color: var(--mute); }
.ck-match__when b { font: 700 12px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ck-match__team { display: flex; align-items: center; gap: 12px; font: 700 19px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.ck-match__team--h { justify-content: flex-end; text-align: right; }
.ck-match__team.is-us b { color: var(--gold); }
.ck-match__score { text-align: center; font: 900 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ck-match__score i { font-style: normal; color: var(--gold); margin: 0 3px; }
.ck-match__score--time { font-size: 24px; color: var(--gold); }
.ck-match__badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 14px/1 var(--f-display); color: #fff; background: var(--bk3); border: 1px solid var(--line); }
.ck-match.is-next .ck-match__badge { color: var(--gold); }
.ck-tablewrap { overflow-x: auto; }
.ck-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ck-table th { padding: 12px 10px; font: 700 11.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-align: center; border-bottom: 1px solid var(--line); }
.ck-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, .1); font-weight: 500; }
.ck-table th:nth-child(2), .ck-table td:nth-child(2) { text-align: left; }
.ck-table td:nth-child(2) { display: flex; align-items: center; gap: 12px; font-weight: 700; white-space: nowrap; }
.ck-table .np-crest { width: 26px; height: 26px; }
.ck-table tr.is-us td { background: rgba(212, 175, 55, .14); color: var(--gold-hi); }
.ck-table td b { font: 800 18px/1 var(--f-display); }
.ck-tabs__foot { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 26px; }
.ck-tabs .ck-more { color: var(--gold); }
.ck-empty { padding: 30px 0; color: var(--mute); }

/* ---------- zlatna traka ---------- */
.ck-gold { background: linear-gradient(120deg, var(--gold-lo), var(--gold) 35%, var(--gold-hi) 70%, var(--gold)); color: var(--bk); padding: clamp(50px, 7vw, 90px) 0; position: relative; overflow: hidden; }
.ck-gold::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(10, 10, 10, .06) 40px 41px); }
.ck-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ck-stats li { padding: 0 clamp(14px, 2.4vw, 34px); border-left: 1.5px solid rgba(10, 10, 10, .28); display: grid; gap: 12px; align-content: start; }
.ck-stats li:first-child { border-left: 0; padding-left: 0; }
.ck-stats b { font: 900 clamp(36px, 5vw, 76px)/.92 var(--f-display); text-transform: uppercase; }
.ck-stats span { font: 600 13px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }

/* ---------- sastav ---------- */
.ck-squad { padding: clamp(70px, 10vw, 140px) 0; background: var(--bk); }
.ck-wall { display: flex; flex-wrap: wrap; gap: 4px 0; }
.ck-wall li { display: flex; align-items: center; }
.ck-wall li::after { content: ''; width: 9px; height: 9px; margin: 0 clamp(14px, 1.8vw, 28px); background: var(--gold); transform: rotate(45deg); flex: none; opacity: .7; }
.ck-wall li:last-child::after { display: none; }
.ck-wall a { font: 800 clamp(30px, 4.6vw, 66px)/1.15 var(--f-display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.2px rgba(246, 241, 225, .6); transition: color .3s, -webkit-text-stroke-color .3s; }
.ck-wall a:hover { color: var(--gold); -webkit-text-stroke-color: var(--gold); }
.ck-wall:hover a:not(:hover) { opacity: .5; }

/* ---------- omladinska škola ---------- */
.ck-school { padding: clamp(70px, 10vw, 130px) 0; background: var(--bk2); border-block: 1px solid var(--line); }
.ck-acc { display: flex; gap: 14px; height: clamp(360px, 46vw, 480px); }
.ck-acc__item { position: relative; flex: 1; display: flex; align-items: flex-end; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 20% 0, rgba(212, 175, 55, .2), transparent 60%), var(--bk3); transition: flex .7s var(--ease), border-color .3s; }
.ck-acc__item.is-open, .ck-acc__item:hover { flex: 2.6; border-color: var(--gold); }
.ck-acc:hover .ck-acc__item:not(:hover) { flex: 1; border-color: var(--line); }
.ck-acc:hover .ck-acc__item.is-open:not(:hover) { flex: 1; }
.ck-acc__big { position: absolute; right: -2%; top: -6%; font: 900 clamp(110px, 16vw, 240px)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px rgba(212, 175, 55, .5); white-space: nowrap; transition: -webkit-text-stroke-color .4s, transform .7s var(--ease); }
.ck-acc__item:hover .ck-acc__big { -webkit-text-stroke-color: var(--gold); transform: translateX(-4%); }
.ck-acc__body { position: relative; display: grid; gap: 12px; max-width: 380px; }
.ck-acc__body b { font: 800 clamp(28px, 3vw, 42px)/1 var(--f-display); text-transform: uppercase; }
.ck-acc__body > span:not(.ck-readmore) { color: var(--mute); font-size: 15.5px; }
.ck-youth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.ck-youth a { display: grid; gap: 10px; padding-top: 18px; border-top: 1.5px solid var(--gold); transition: transform .3s var(--ease); }
.ck-youth a:hover { transform: translateY(-4px); }
.ck-youth time { font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ck-youth b { font: 700 19px/1.25 var(--f-body); }

/* ---------- društvene mreže ---------- */
.ck-social { padding: clamp(70px, 10vw, 130px) 0; background: var(--bk); }
.ck-social__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ck-soc { position: relative; display: grid; gap: 6px; align-content: end; min-height: 250px; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(160deg, var(--bk3), var(--bk)); overflow: hidden; transition: transform .4s var(--ease), border-color .3s, background .4s; }
.ck-soc svg { position: absolute; left: 26px; top: 26px; color: var(--gold); transition: color .3s, transform .4s var(--ease); }
.ck-soc b { font: 800 34px/1 var(--f-display); text-transform: uppercase; }
.ck-soc span { color: var(--mute); font-size: 15px; transition: color .3s; }
.ck-soc i { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); transition: .3s var(--ease); }
.ck-soc:hover { transform: translateY(-6px); border-color: var(--gold); background: linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); color: var(--bk); }
.ck-soc:hover svg, .ck-soc:hover span { color: var(--bk); }
.ck-soc:hover i { background: var(--bk); color: var(--gold); border-color: var(--bk); transform: rotate(45deg); }

/* ---------- sponzori ---------- */
.ck-sponsors { padding: clamp(50px, 7vw, 90px) 0; border-top: 1px solid var(--line); }
.ck-sponsors ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 34px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.ck-sponsors li + li { border-left: 1px solid var(--line); }
.ck-sponsors a { display: grid; place-items: center; min-height: 130px; padding: 20px; font: 800 clamp(24px, 2.6vw, 38px)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: rgba(246, 241, 225, .55); transition: color .3s, background .3s; }
.ck-sponsors a:hover { color: var(--gold); background: rgba(212, 175, 55, .07); }

/* ---------- footer ---------- */
.ck-footer { padding-top: clamp(60px, 8vw, 100px); background: var(--bk2); border-top: 1px solid var(--line); overflow: hidden; }
.ck-footer__top { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.ck-footer__logo img { width: 120px; height: auto; }
.ck-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ck-footer h4 { font: 700 12px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.ck-footer__cols a { display: block; padding: 5px 0; color: var(--mute); transition: color .2s, transform .3s var(--ease); }
.ck-footer__cols a:hover { color: var(--gold); transform: translateX(4px); }
.ck-footer__big svg { display: block; width: 100%; height: auto; margin-top: clamp(30px, 5vw, 60px); }
.ck-footer__big text { font: 900 150px var(--f-display); fill: none; stroke: var(--gold); stroke-width: 1.2px; opacity: .55; }
.ck-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px 0 30px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.ck-footer__bar b { color: var(--gold); font-weight: 700; }

/* ---------- 404 ---------- */
.ck-404__hero { position: relative; min-height: min(100svh, 900px); display: grid; align-content: center; justify-items: start; padding: 140px 0 80px; overflow: hidden; }
.ck-404__hero .ck-wrap { position: relative; }
.ck-404__num { position: absolute; right: 2vw; top: 50%; translate: 0 -50%; font: 900 clamp(220px, 40vw, 560px)/1 var(--f-display); color: transparent; -webkit-text-stroke: 2px rgba(212, 175, 55, .35); }
.ck-404__lead { max-width: 460px; color: var(--mute); margin: 0 0 30px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.ck-nav, .ck-header__cta { display: none; }
	.ck-burger { display: block; }
	.ck-dock { grid-template-columns: 1fr auto; row-gap: 16px; padding: 18px 20px; }
	.ck-dock__tag { grid-column: 1 / -1; display: flex; justify-content: space-between; }
	.ck-dock__meta { display: none; }
	.ck-hero { padding-bottom: 260px; }
}
@media (max-width: 900px) {
	.ck-hero__grid { grid-template-columns: 1fr; }
	.ck-hero__crest { order: -1; width: min(240px, 60vw); margin-bottom: 0; }
	.ck-news__grid { grid-template-columns: 1fr; }
	.ck-stats { grid-template-columns: 1fr 1fr; row-gap: 34px; }
	.ck-stats li:nth-child(3) { border-left: 0; padding-left: 0; }
	.ck-acc { flex-direction: column; height: auto; }
	.ck-acc__item, .ck-acc__item.is-open, .ck-acc__item:hover { flex: none; min-height: 190px; }
	.ck-acc:hover .ck-acc__item:not(:hover), .ck-acc:hover .ck-acc__item.is-open:not(:hover) { flex: none; }
	.ck-youth { grid-template-columns: 1fr; }
	.ck-social__grid { grid-template-columns: 1fr 1fr; }
	.ck-sponsors ul { grid-template-columns: 1fr 1fr; }
	.ck-sponsors li:nth-child(3) { border-left: 0; }
	.ck-sponsors li:nth-child(n+3) { border-top: 1px solid var(--line); }
	.ck-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ck-home { font-size: 16px; }
	.ck-brand small { display: none; }
	.ck-hero { padding-top: calc(var(--hh) + 12px); padding-bottom: 300px; }
	.ck-hero__lead { font-size: 16px; }
	.ck-dock__teams { gap: 10px; }
	.ck-dock__teams > div { font-size: 17px; }
	.ck-dock { grid-template-columns: 1fr; bottom: 16px; width: calc(100% - 24px); }
	.ck-count div { min-width: 0; flex: 1; }
	.ck-match { grid-template-columns: 1fr 70px 1fr; row-gap: 6px; }
	.ck-match__when { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; }
	.ck-match__badge { display: none; }
	.ck-match__team { font-size: 16px; gap: 8px; }
	.ck-match__team--h { flex-direction: row; }
	.ck-match__score { font-size: 26px; }
	.ck-list a { grid-template-columns: 40px 1fr 36px; }
	.ck-list__n { font-size: 28px; }
	.ck-footer__cols { grid-template-columns: 1fr 1fr; }
	.ck-social__grid { grid-template-columns: 1fr; }
	.ck-soc { min-height: 170px; }
	.ck-tabs__nav button { padding: 11px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.ck-mask > span { transform: none; }
	[data-reveal] { opacity: 1; transform: none; }
}

/* ---------- hero video (Vimeo, pozadina) ---------- */
.ck-hero__video { position: absolute; inset: 0; overflow: hidden; background: var(--bk); }
.ck-hero__video iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); border: 0; translate: -50% -50%; pointer-events: none; opacity: 0; animation: ck-vin 1.4s .6s ease forwards; }
@keyframes ck-vin { to { opacity: .9; } }
.ck-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .7) 45%, rgba(10, 10, 10, .45) 100%), linear-gradient(0deg, var(--bk) 0%, transparent 28%, rgba(10, 10, 10, .5) 100%); }
.ck-hero__glow { mix-blend-mode: screen; opacity: .7; }
.ck-hero__lines { display: none; }
@media (prefers-reduced-motion: reduce) { .ck-hero__video iframe { display: none; } }

/* ---------- hero bez grba ---------- */
.ck-hero__grid { grid-template-columns: minmax(0, 1fr); }
.ck-hero__copy { max-width: 900px; }

/* ---------- header: crna traka preko cele širine, zlatna linija gore, grb viri ispod ---------- */
:root { --hh: 84px; }
.ck-header { background: var(--bk); border-top: 4px solid var(--gold); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); }
.ck-header.is-scrolled { background: var(--bk); backdrop-filter: none; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); }
.ck-header__bar { height: calc(var(--hh) - 4px); }
.ck-brand { position: relative; align-self: stretch; margin-right: auto; padding-left: 128px; }
.ck-brand img { position: absolute; left: 0; top: 4px; width: 104px; height: auto; z-index: 2; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .75)); transition: transform .4s var(--ease); }
.ck-brand:hover img { transform: translateY(-2px) scale(1.03); }
.ck-brand span { align-self: center; }
@media (max-width: 640px) {
	:root { --hh: 72px; }
	.ck-brand { padding-left: 88px; }
	.ck-brand img { width: 72px; top: 2px; }
	.ck-brand span { display: none; }
}

.ck-hero { padding-top: calc(var(--hh) + 80px); }
@media (max-width: 640px) { .ck-hero { padding-top: calc(var(--hh) + 56px); } }

/* logo viri samo malo ispod navbara */
.ck-brand { padding-left: 106px; }
.ck-brand img { width: 84px; top: 4px; }
.ck-hero { padding-top: calc(var(--hh) + 56px); }
@media (max-width: 640px) {
	.ck-brand { padding-left: 76px; }
	.ck-brand img { width: 62px; top: 5px; }
	.ck-hero { padding-top: calc(var(--hh) + 40px); }
}

/* razmak između zlatne linije i logoa */
.ck-brand img { top: 14px; }
@media (max-width: 640px) { .ck-brand img { top: 10px; } }

/* ---------- Britney: pisani akcenti (zlatne reči u naslovima) ---------- */
@font-face { font-family: 'Britney'; src: url('../fonts/Britney-Regular.woff2') format('woff2'), url('../fonts/Britney-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Britney'; src: url('../fonts/Britney-Bold.woff2') format('woff2'), url('../fonts/Britney-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
:root { --f-serif: 'Britney', 'Fraunces', Georgia, serif; }
.ck-title em, .ck-display em { font-family: var(--f-serif); font-style: normal; font-weight: 400; letter-spacing: 0; }
.ck-dock__teams em { font-family: var(--f-serif); font-style: normal; }

/* veći pisani akcenti */
.ck-title em { font-size: 1.2em; line-height: .8; }
.ck-display em { font-size: 1.28em; line-height: .8; }
/* „brda.” se podiže i preklapa „BANOVOG” */
.ck-display .ck-mask:nth-child(3) { position: relative; z-index: 2; padding-top: .5em; margin-top: -.62em; }
@media (max-width: 640px) { .ck-display .ck-mask:nth-child(3) { padding-top: .4em; margin-top: -.5em; } }

.ck-display .ck-mask:nth-child(3) { padding-left: .14em; margin-left: -.14em; }

/* ---------- igrači: klizni karton ---------- */
.ck-squad { overflow: hidden; }
.ck-squad .ck-head { margin-bottom: 36px; }
.ck-roster { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px max(20px, calc((100vw - 1280px) / 2)) 24px; scrollbar-width: none; cursor: grab; }
.ck-roster::-webkit-scrollbar { display: none; }
.ck-roster.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ck-roster.is-dragging a { pointer-events: none; }
.ck-pl { position: relative; flex: none; width: clamp(210px, 22vw, 270px); aspect-ratio: 4 / 5.4; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border-radius: 26px; border: 1px solid var(--line); overflow: hidden; scroll-snap-align: start; background:
	var(--club-logo) 115% 8% / 58% no-repeat,
	radial-gradient(ellipse at 20% 0, rgba(212, 175, 55, .22), transparent 60%),
	linear-gradient(170deg, var(--bk3), var(--bk));
	transition: transform .5s var(--ease), border-color .3s, background-color .3s; }
.ck-pl::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); opacity: 0; transition: opacity .4s; }
.ck-pl > * { position: relative; }
.ck-pl__ini { position: absolute; left: 14px; top: 2px; font: 900 clamp(110px, 11vw, 150px)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px rgba(212, 175, 55, .55); transition: -webkit-text-stroke-color .3s, transform .6s var(--ease); }
.ck-pl__name { display: grid; gap: 4px; }
.ck-pl__name small { font: 600 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); transition: color .3s; }
.ck-pl__name b { font: 800 clamp(30px, 2.8vw, 38px)/.95 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; }
.ck-pl__go { position: absolute; right: 18px; bottom: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); transition: .3s var(--ease); }
.ck-pl:hover { transform: translateY(-8px); border-color: var(--gold); }
.ck-pl:hover::before { opacity: 1; }
.ck-pl:hover { color: var(--bk); }
.ck-pl:hover .ck-pl__ini { -webkit-text-stroke-color: rgba(10, 10, 10, .55); transform: translateX(8px); }
.ck-pl:hover .ck-pl__name small { color: var(--bk); }
.ck-pl:hover .ck-pl__go { background: var(--bk); color: var(--gold); border-color: var(--bk); transform: rotate(45deg); }
.ck-roster__bar { display: flex; align-items: center; gap: 24px; margin-top: 6px; }
.ck-roster__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line); position: relative; }
.ck-roster__progress i { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; border-radius: 3px; background: var(--gold); }
.ck-roster__btns { display: flex; gap: 10px; }
.ck-roster__btns button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--gold); cursor: pointer; transition: .3s var(--ease); }
.ck-roster__btns button:hover { background: var(--gold); color: var(--bk); border-color: var(--gold); }

.ck-roster { scroll-padding-inline: max(20px, calc((100vw - 1280px) / 2)); }
.ck-pl { background:
	var(--club-logo) calc(100% - 22px) 22px / 26% no-repeat,
	radial-gradient(ellipse at 20% 0, rgba(212, 175, 55, .22), transparent 60%),
	linear-gradient(170deg, var(--bk3), var(--bk)); }
.ck-pl:hover { background-blend-mode: normal; }

/* ---------- vesti: lista sa slikama (bez brojeva) ---------- */
.ck-list a { grid-template-columns: 140px 1fr 40px; }
.ck-list__img { display: block; width: 140px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--bk3); }
.ck-list__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ck-list a:hover .ck-list__img img, .ck-list a:hover .ck-list__img .ck-ph { transform: scale(1.08); }
.ck-list__img .ck-ph { background-size: 44%; }
.ck-list a:hover { padding-left: 0; }
@media (max-width: 640px) { .ck-list a { grid-template-columns: 96px 1fr 32px; } .ck-list__img { width: 96px; } .ck-list__t b { font-size: 16px; } }

/* ---------- igrači: veće kartice sa fotografijama ---------- */
.ck-pl { width: clamp(270px, 30vw, 390px); aspect-ratio: 4 / 5.6; }
.ck-pl__img { position: absolute; left: 50%; bottom: 0; width: 96%; height: 88%; object-fit: contain; object-position: bottom center; translate: -50% 0; z-index: 1; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); transition: transform .6s var(--ease); pointer-events: none; }
.ck-pl.has-img::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1; background: linear-gradient(0deg, rgba(10, 10, 10, .96) 10%, transparent); transition: opacity .3s; pointer-events: none; }
.ck-pl.has-img .ck-pl__ini { z-index: 0; font-size: clamp(150px, 15vw, 210px); top: 8px; }
.ck-pl.has-img .ck-pl__name, .ck-pl.has-img .ck-pl__go { z-index: 2; }
.ck-pl.has-img .ck-pl__name b { font-size: clamp(34px, 3.2vw, 46px); }
.ck-pl:hover .ck-pl__img { transform: scale(1.04) translateY(-4px); }
.ck-pl.has-img:hover::after { opacity: 0; }
.ck-pl.has-img:hover .ck-pl__name b { text-shadow: none; }
.ck-pl.has-img .ck-pl__name { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.ck-pl.has-img:hover .ck-pl__name { text-shadow: none; }
.ck-pl.has-img:hover .ck-pl__ini { -webkit-text-stroke-color: rgba(10, 10, 10, .4); }

/* ---------- logo u navbaru: još manje viri ---------- */
.ck-brand { padding-left: 90px; }
.ck-brand img { width: 70px; top: 10px; }
@media (max-width: 640px) { .ck-brand { padding-left: 66px; } .ck-brand img { width: 54px; top: 8px; } }

/* kartice sa fotografijom: bez malog grba (ne smeta igraču) */
.ck-pl.has-img { background: radial-gradient(ellipse at 20% 0, rgba(212, 175, 55, .22), transparent 60%), linear-gradient(170deg, var(--bk3), var(--bk)); }

/* logo bez senke */
.ck-brand img { filter: none; }

/* omladinska škola: fotografije u panelima */
.ck-acc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.75); transition: transform .9s var(--ease), filter .5s; }
.ck-acc__item::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 10, 10, .95) 8%, rgba(10, 10, 10, .35) 60%, rgba(10, 10, 10, .15)); }
.ck-acc__item:hover .ck-acc__img, .ck-acc__item.is-open .ck-acc__img { filter: none; transform: scale(1.05); }
.ck-acc__big { z-index: 1; }
.ck-acc__body { z-index: 2; }

/* ---------- match centar: rezultati/raspored levo, tabela desno ---------- */
.ck-mc__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ck-mc__grid .ck-tabs { padding: clamp(16px, 2vw, 28px); }
.ck-match { grid-template-columns: 78px minmax(0, 1fr) 76px minmax(0, 1fr) 30px; gap: 10px; padding: 14px 4px; }
.ck-match__team { font-size: 16px; gap: 8px; }
.ck-match__team b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-match__score { font-size: 28px; }
.ck-match__score--time { font-size: 21px; }
.ck-match__badge { width: 28px; height: 28px; font-size: 12px; }
.ck-match .np-crest, .ck-match .np-mono { width: 28px; height: 28px; }
.ck-standings__title { font: 800 28px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.ck-standings .ck-table th, .ck-standings .ck-table td { padding: 10px 5px; font-size: 14.5px; }
.ck-standings .ck-table td:nth-child(2) { gap: 8px; }
.ck-standings .ck-table .np-crest { width: 22px; height: 22px; }
@media (max-width: 1100px) { .ck-mc__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ck-match { grid-template-columns: 1fr 64px 1fr; } }

/* ---------- bez pisanog fonta: zlatni akcenti u istom display fontu ---------- */
:root { --f-serif: var(--f-display); }
.ck-title em, .ck-display em { font-family: var(--f-display); font-style: normal; font-weight: inherit; font-size: 1em; line-height: inherit; text-transform: uppercase; letter-spacing: inherit; color: var(--gold); }
.ck-mc .ck-title em { color: var(--gold-lo); }
.ck-dock__teams em { font: 700 14px/1 var(--f-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.ck-display .ck-mask:nth-child(3) { padding: 0 0 .06em; margin: 0; }

/* sponzori: logotipi u beloj boji */
.ck-sponsors a { min-height: 150px; padding: 28px; }
.ck-sponsors img { width: auto; max-width: 78%; max-height: 64px; object-fit: contain; filter: brightness(0) invert(1); opacity: .7; transition: opacity .3s, transform .4s var(--ease); }
.ck-sponsors a:hover img { opacity: 1; transform: scale(1.06); }

/* ---------- footer: jači, sa sponzorima kao sastavnim delom ---------- */
.ck-footer { position: relative; padding-top: 0; background: radial-gradient(ellipse at 85% 100%, rgba(212, 175, 55, .16), transparent 55%), var(--bk2); border-top: 0; }
.ck-footer::before { content: ''; display: block; height: 6px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold), var(--gold-lo)); }
.ck-footer__sponsors { background: linear-gradient(120deg, #0d0c0a, #17140d); border-bottom: 1px solid var(--line); }
.ck-footer__sp-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(24px, 5vw, 70px); padding: 38px 0; }
.ck-footer__sp-label { font: 800 18px/1.15 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); padding-right: clamp(24px, 5vw, 70px); border-right: 1.5px solid var(--line); }
.ck-footer__sponsors ul { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 20px; }
.ck-footer__sponsors a { display: grid; place-items: center; height: 72px; }
.ck-footer__sponsors img { width: auto; max-width: 100%; max-height: 56px; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: opacity .3s, transform .4s var(--ease); }
.ck-footer__sponsors a:hover img { opacity: 1; transform: scale(1.07); }
.ck-footer__main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: clamp(40px, 7vw, 110px); padding: clamp(50px, 6vw, 84px) 0 clamp(40px, 5vw, 64px); }
.ck-footer__logo { display: flex; align-items: center; gap: 18px; }
.ck-footer__logo img { width: 96px; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.ck-footer__logo span { display: grid; gap: 4px; }
.ck-footer__logo b { font: 900 clamp(32px, 3.4vw, 46px)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.ck-footer__logo small { font: 600 11.5px/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ck-footer__about p { max-width: 430px; margin: 26px 0 28px; color: var(--mute); }
.ck-footer__soc { display: flex; gap: 10px; }
.ck-footer__soc a { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--gold); transition: .3s var(--ease); }
.ck-footer__soc a:hover { background: var(--gold); color: var(--bk); border-color: var(--gold); transform: translateY(-4px); }
.ck-footer__cols { grid-template-columns: repeat(3, 1fr); padding-top: 8px; }
.ck-footer__cols a { font-weight: 500; }
.ck-footer__cols h4 { padding-bottom: 14px; border-bottom: 1.5px solid var(--gold); display: inline-block; margin-bottom: 20px; }
.ck-footer__bar { align-items: center; padding: 24px 0 32px; }
.ck-footer__top-link { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ck-footer__top-link:hover { color: var(--gold-hi); }
@media (max-width: 900px) {
	.ck-footer__sp-in { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
	.ck-footer__sp-label { border-right: 0; padding: 0; }
	.ck-footer__sponsors ul { grid-template-columns: 1fr 1fr; }
	.ck-footer__main { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .ck-footer__cols { grid-template-columns: 1fr 1fr; } .ck-footer__bar { flex-direction: column; align-items: flex-start; } }

/* brojke: broj + naslov + opis */
.ck-stats b { font-size: clamp(54px, 7vw, 104px); line-height: .85; }
.ck-stats em { font: 800 clamp(22px, 2.2vw, 32px)/1 var(--f-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.ck-stats li { gap: 10px; }
.ck-stats span { font-size: 12.5px; }

/* navbar: samo logo */
.ck-brand { padding-left: 0; width: 70px; }
@media (max-width: 640px) { .ck-brand { width: 54px; } }

/* ---------- naredna utakmica: nov dizajn ---------- */
.ck-dock { grid-template-columns: 250px minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--gold); border-radius: 24px; background: linear-gradient(100deg, rgba(10, 10, 10, .92), rgba(24, 20, 10, .88)); }
.ck-dock__date { display: grid; align-content: center; gap: 6px; padding: 22px 26px; background: linear-gradient(140deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--bk); position: relative; }
.ck-dock__date::after { content: ''; position: absolute; right: -22px; top: 0; bottom: 0; width: 44px; background: inherit; transform: skewX(-12deg); z-index: 0; }
.ck-dock__date > * { position: relative; z-index: 1; }
.ck-dock__tag { display: flex; align-items: center; gap: 8px; font: 800 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--bk); }
.ck-dock__tag i { margin: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--bk); animation: ck-pulse-dark 2s infinite; }
@keyframes ck-pulse-dark { 0% { box-shadow: 0 0 0 0 rgba(10, 10, 10, .5); } 70% { box-shadow: 0 0 0 9px rgba(10, 10, 10, 0); } }
.ck-dock__date > b { font: 900 clamp(54px, 5vw, 74px)/.9 var(--f-display); letter-spacing: .01em; }
.ck-dock__sub { font: 800 14px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.ck-dock__venue { font: 500 13px/1.3 var(--f-body); opacity: .75; }
.ck-dock__teams { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); padding: 18px 20px 18px 50px; }
.ck-dock__team { display: flex; align-items: center; gap: 16px; font: 800 clamp(22px, 2.6vw, 34px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.ck-dock__team .np-crest, .ck-dock__team .np-mono { width: clamp(48px, 5vw, 68px); height: clamp(48px, 5vw, 68px); }
.ck-dock__team.is-us b { color: var(--gold); }
.ck-dock__teams em { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1.5px solid var(--gold); border-radius: 50%; font: 800 13px/1 var(--f-body); font-style: normal; letter-spacing: .08em; color: var(--gold); }
.ck-count { align-items: center; gap: 6px; padding: 0 28px 0 8px; }
.ck-count i { font: 800 26px/1 var(--f-display); font-style: normal; color: var(--gold); margin-bottom: 14px; }
.ck-count div { min-width: 62px; padding: 10px 8px; background: rgba(212, 175, 55, .1); border: 1px solid var(--line); border-radius: 12px; }
.ck-count b { font-size: 36px; color: var(--cream); }
.ck-count--tbd { padding: 0 28px; }
.ck-dock__meta { display: none; }
@media (max-width: 1100px) {
	.ck-dock { grid-template-columns: 1fr; row-gap: 0; }
	.ck-dock__tag { display: flex; grid-column: auto; justify-content: flex-start; }
	.ck-dock__date { grid-template-columns: auto 1fr; align-items: end; column-gap: 18px; padding: 16px 20px; }
	.ck-dock__date .ck-dock__tag { grid-column: 1 / -1; }
	.ck-dock__date::after { display: none; }
	.ck-dock__teams { padding: 20px; }
	.ck-count { padding: 0 20px 20px; justify-content: center; }
}
@media (max-width: 640px) {
	.ck-dock__team { flex-direction: column; text-align: center; gap: 8px; font-size: 18px; }
	.ck-dock__teams em { width: 38px; height: 38px; }
	.ck-count div { min-width: 0; flex: 1; }
	.ck-count b { font-size: 28px; }
}

/* ---------- dugme za zvuk videa ---------- */
.ck-sound { position: absolute; z-index: 5; right: max(20px, calc((100vw - 1280px) / 2)); top: calc(var(--hh) + 28px); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border: 1.5px solid var(--gold); border-radius: 999px; background: rgba(10, 10, 10, .6); backdrop-filter: blur(10px); color: var(--gold); font: 700 12.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease); }
.ck-sound:hover { background: var(--gold); color: var(--bk); transform: translateY(-2px); }
.ck-sound .i-on { display: none; }
.ck-sound[aria-pressed="true"] .i-on { display: block; }
.ck-sound[aria-pressed="true"] .i-off { display: none; }
@media (max-width: 640px) { .ck-sound { padding: 11px; top: calc(var(--hh) + 14px); } .ck-sound span { display: none; } }

/* dugme za zvuk: tiho, samo ikona + popover */
.ck-sound { padding: 0; width: 40px; height: 40px; justify-content: center; border-color: rgba(212, 175, 55, .45); background: rgba(10, 10, 10, .4); color: rgba(246, 241, 225, .85); }
.ck-sound svg { width: 18px; height: 18px; }
.ck-sound__tip { position: absolute; right: 0; top: calc(100% + 10px); padding: 8px 12px; border-radius: 8px; background: var(--bk2); border: 1px solid var(--line); color: var(--cream); font: 600 12px/1 var(--f-body); letter-spacing: .04em; text-transform: none; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.ck-sound:hover .ck-sound__tip, .ck-sound:focus-visible .ck-sound__tip { opacity: 1; transform: none; }
.ck-sound span:not(.ck-sound__tip) { display: none; }
@media (max-width: 640px) { .ck-sound { padding: 0; } }

/* razmak: ticker dalje od naredne utakmice */
.ck-ticker { margin-top: 72px; }

/* grbovi u narednoj utakmici: ujednačena veličina */
.ck-dock__team .np-crest, .ck-dock__team .np-mono { width: clamp(46px, 4.6vw, 62px); height: clamp(46px, 4.6vw, 62px); object-fit: contain; }
.ck-dock__team.is-us .np-crest { width: clamp(38px, 3.8vw, 50px); height: clamp(38px, 3.8vw, 50px); }

.ck-hero { padding-bottom: 270px; }
.ck-dock__team.is-us .np-crest { width: clamp(42px, 4.2vw, 56px); height: clamp(42px, 4.2vw, 56px); }
@media (max-width: 1100px) { .ck-hero { padding-bottom: 330px; } }
@media (max-width: 640px) { .ck-hero { padding-bottom: 420px; } }

.ck-hero { padding-bottom: 240px; }

/* strelice u društvenim karticama: ikona unutar kruga, ne apsolutno pozicionirana */
.ck-soc i svg { position: static; left: auto; top: auto; width: 18px; height: 18px; color: inherit; }
.ck-soc:hover i svg { color: var(--gold); }
.ck-school .ck-more { color: var(--gold); }

/* ---------- dropdown: panel preko cele širine (naslov levo, linkovi desno) ---------- */
.ck-nav li.has-sub { position: static; }
.ck-nav > ul > li > a { display: flex; align-items: center; height: calc(var(--hh) - 4px); }
.ck-nav li.has-sub > a::after { margin-top: -3px; }
.ck-nav .ck-sub { position: absolute; top: 100%; left: 0; right: 0; min-width: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-bottom: 3px solid var(--gold); border-radius: 0; background: var(--bk); box-shadow: 0 40px 60px -30px #000; transform: translateY(-6px); }
.ck-nav li:hover > .ck-sub, .ck-nav li.is-open > .ck-sub, .ck-nav li:focus-within > .ck-sub { transform: none; }
.ck-sub__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding-block: 34px 38px; }
.ck-sub__title { font: 900 clamp(42px, 4.4vw, 64px)/.95 var(--f-display); text-transform: uppercase; color: var(--cream); }
.ck-sub__in ul { display: grid; gap: 4px; align-content: start; padding-top: 4px; }
.ck-nav .ck-sub a { display: inline-block; padding: 9px 0; border-radius: 0; font: 700 17px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--cream); transition: color .2s, transform .3s var(--ease); }
.ck-nav .ck-sub a:hover { background: none; color: var(--gold); transform: translateX(6px); }

/* ---------- mobilni: donja traka + meni sa podmenijima (kao /novipazar) ---------- */
.ck-burger { display: none !important; }
.ck-tabbar { display: none; }
.ck-mm { padding: calc(var(--hh) + 14px) 0 90px; clip-path: none; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s; background: var(--bk); }
.ck-mm[data-open="true"] { clip-path: none; opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease); }
.ck-mm__panel { padding: 0 24px; animation: ck-fade .35s var(--ease); }
.ck-mm__panel[hidden] { display: none; }
.ck-mm__list > li { border-bottom: 1px solid var(--line); padding: 0; }
.ck-mm__list > li > a, .ck-mm__list > li > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; border: 0; background: none; color: var(--cream); font: 800 34px/1.1 var(--f-display); text-transform: uppercase; text-align: left; cursor: pointer; }
.ck-mm__list > li > button svg { color: var(--gold); }
.ck-mm__eyebrow { margin-bottom: 8px; font: 700 12px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.ck-mm__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 12px 20px 12px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--gold); font: 700 13px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 1100px) {
	.ck-header__bar { justify-content: center; }
	.ck-brand { margin-right: 0; width: 70px; }
	.ck-tabbar { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, .96); backdrop-filter: blur(16px); border-top: 2px solid var(--gold); }
	.ck-tabbar a, .ck-tabbar button { display: grid; justify-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; color: rgba(246, 241, 225, .7); font: 600 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
	.ck-tabbar a.is-active, .ck-tabbar [aria-expanded="true"] { color: var(--gold); }
	.ck-tabbar .i-close { display: none; }
	.ck-tabbar [aria-expanded="true"] .i-menu { display: none; }
	.ck-tabbar [aria-expanded="true"] .i-close { display: block; }
	body.ck-home { padding-bottom: 4.6rem; }
}
@media (min-width: 1101px) { .ck-mm, .ck-tabbar { display: none; } }

/* ---------- naredna utakmica: kompaktno na telefonu ---------- */
@media (max-width: 640px) {
	.ck-dock { bottom: 14px; border-radius: 18px; }
	.ck-dock__date { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 14px; }
	.ck-dock__date .ck-dock__tag { grid-column: 1 / -1; font-size: 10px; letter-spacing: .16em; }
	.ck-dock__date > b { font-size: 38px; }
	.ck-dock__sub { font-size: 12px; text-align: right; }
	.ck-dock__venue { display: none; }
	.ck-dock__teams { padding: 10px 12px 8px; gap: 10px; }
	.ck-dock__team { flex-direction: row; gap: 8px; font-size: 15px; }
	.ck-dock__team .np-crest, .ck-dock__team .np-mono { width: 34px; height: 34px; }
	.ck-dock__team.is-us .np-crest { width: 30px; height: 30px; }
	.ck-dock__teams em { width: 28px; height: 28px; font-size: 10px; }
	.ck-count { padding: 0 12px 12px; gap: 4px; }
	.ck-count div { padding: 5px 4px; border-radius: 9px; }
	.ck-count b { font-size: 22px; }
	.ck-count small { font-size: 8.5px; letter-spacing: .08em; }
	.ck-count i { font-size: 18px; margin-bottom: 10px; }
	.ck-hero { padding-bottom: 250px; }
	.ck-ticker { margin-top: 40px; }
}

@media (max-width: 640px) {
	.ck-hero { min-height: calc(100svh - 4.6rem); justify-content: flex-end; padding-top: calc(var(--hh) + 30px); }
}

/* ---------- naredna utakmica (telefon): tanka zlatna traka, veći grbovi sa nazivima ispod ---------- */
@media (max-width: 640px) {
	.ck-dock__date { grid-template-columns: 1fr auto; padding: 8px 14px; align-items: center; }
	.ck-dock__date .ck-dock__tag { display: none; }
	.ck-dock__date > b, .ck-dock__sub { font: 800 13px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
	.ck-dock__date > b { text-align: left; }
	.ck-dock__teams { padding: 14px 12px 10px; gap: 14px; align-items: flex-start; }
	.ck-dock__team { flex-direction: column; align-items: center; gap: 8px; min-width: 0; flex: 1; text-align: center; font-size: 16px; }
	.ck-dock__team .np-crest, .ck-dock__team .np-mono { width: 64px; height: 64px; }
	.ck-dock__team.is-us .np-crest { width: 56px; height: 56px; }
	.ck-dock__teams em { align-self: center; margin-top: -14px; }
	.ck-hero { padding-bottom: 290px; }
}

/* =============== runda izmena: logo, ticker, naslovi, kartice =============== */

/* logo: veći na vrhu, smanjuje se pri skrolu */
.ck-brand img { width: 104px; top: 12px; transition: width .35s var(--ease), top .35s var(--ease), transform .4s var(--ease); }
.ck-header.is-scrolled .ck-brand img { width: 70px; top: 10px; }
@media (max-width: 640px) {
	.ck-brand img { width: 78px; top: 10px; }
	.ck-header.is-scrolled .ck-brand img { width: 54px; top: 8px; }
}

/* ticker: oznaka iznad, traka preko cele širine ispod */
.ck-ticker { display: block; background: none; margin-top: 72px; }
.ck-ticker__label { display: inline-grid; margin-left: max(20px, calc((100vw - 1280px) / 2)); padding: 9px 20px 8px; border-radius: 10px 10px 0 0; background: var(--gold); color: var(--bk); font: 800 14px/1 var(--f-display); letter-spacing: .16em; }
.ck-ticker__viewport { background: var(--gold); color: var(--bk); display: block; }
@media (max-width: 640px) { .ck-ticker { margin-top: 40px; } .ck-ticker__label { margin-left: 20px; } }

/* veći naslovi sekcija */
.ck-title { font-size: clamp(48px, 7.2vw, 104px); }
.ck-kicker { font-size: 13.5px; }

/* match centar: bez prelivanja na telefonu */
.ck-mc__grid > * { min-width: 0; }
.ck-mc .ck-tabs { overflow: hidden; }
.ck-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
	.ck-mc .ck-head { align-items: flex-start; }
	.ck-mc .ck-tabs { padding: 14px; border-radius: 22px; }
	.ck-tabs__nav { display: flex; width: 100%; }
	.ck-tabs__nav button { flex: 1; padding: 11px 10px; font-size: 12.5px; }
	.ck-match { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 6px; padding: 12px 0; }
	.ck-match__team { font-size: 14px; gap: 6px; }
	.ck-match__team b { white-space: normal; text-overflow: clip; line-height: 1.05; }
	.ck-match__team--h { justify-content: flex-end; }
	.ck-match__score { font-size: 24px; }
	.ck-match .np-crest, .ck-match .np-mono { width: 24px; height: 24px; }
	.ck-standings .ck-table th, .ck-standings .ck-table td { padding: 9px 3px; font-size: 13px; }
	.ck-standings .ck-table td:nth-child(2) { gap: 6px; }
	.ck-tabs__foot { gap: 12px 22px; }
}

/* omladinska škola: više kartice */
.ck-acc { height: clamp(460px, 52vw, 600px); }
@media (max-width: 900px) { .ck-acc__item, .ck-acc__item.is-open, .ck-acc__item:hover { min-height: 300px; } }

/* budi uz nas: manje kartice */
.ck-soc { min-height: 170px; padding: 20px; border-radius: 20px; }
.ck-soc svg { left: 20px; top: 20px; width: 28px; height: 28px; }
.ck-soc i { right: 16px; top: 16px; width: 36px; height: 36px; }
.ck-soc b { font-size: 28px; }
@media (max-width: 900px) { .ck-social__grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 640px) {
	.ck-social__grid { grid-template-columns: 1fr 1fr; }
	.ck-soc { min-height: 130px; padding: 16px; }
	.ck-soc svg { left: 16px; top: 16px; width: 24px; height: 24px; }
	.ck-soc i { right: 12px; top: 12px; width: 32px; height: 32px; }
	.ck-soc b { font-size: 22px; }
	.ck-soc span { font-size: 12.5px; overflow-wrap: anywhere; }
}

/* male vesti: manji radius slike i manji bedž */
.ck-list__img { border-radius: 8px; }
.ck-list .ck-meta em { padding: 4px 9px; font-size: 10px; letter-spacing: .12em; }
.ck-list .ck-meta { gap: 9px; font-size: 11px; }

@media (max-width: 900px) { .ck-acc { height: auto; } }

.ck-brand img { max-width: none; }

/* „Najnovije”: samo zlatan tekst iznad trake */
.ck-ticker__label { background: none; color: var(--gold); border-radius: 0; padding: 0 0 12px; font: 800 14px/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; }

/* hero video: završava iznad kartice naredne utakmice */
.ck-hero__video { bottom: 215px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
@media (max-width: 1100px) { .ck-hero__video { bottom: 270px; } }
@media (max-width: 640px) { .ck-hero__video { bottom: 250px; } }

/* telefon: video veći, spušta se malo ispod vrha kartice naredne utakmice */
@media (max-width: 640px) {
	.ck-hero__video { bottom: 165px; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
}

/* omladinska škola: slider (prevlačenje udesno) na telefonu/tabletu */
@media (max-width: 900px) {
	.ck-acc { flex-direction: row; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 0 20px 6px; scrollbar-width: none; }
	.ck-acc::-webkit-scrollbar { display: none; }
	.ck-acc__item, .ck-acc__item.is-open, .ck-acc__item:hover, .ck-acc:hover .ck-acc__item:not(:hover), .ck-acc:hover .ck-acc__item.is-open:not(:hover) { flex: 0 0 82%; min-height: 400px; scroll-snap-align: center; }
	.ck-acc__img { filter: none; }
}

/* igrači: broj dresa iza fotografije (nema skraćenice) */
.ck-pl__ini { letter-spacing: -.02em; }
.ck-pl.has-img .ck-pl__ini { left: 50%; translate: -50% 0; top: 4px; font-size: clamp(190px, 18vw, 260px); line-height: .9; }
.ck-pl:hover .ck-pl__ini { transform: none; }

/* ---------- 100 godina: zlatni natpis u footeru ---------- */
.ck-century { position: relative; display: grid; justify-items: center; padding: clamp(10px, 3vw, 40px) 0 clamp(30px, 4vw, 56px); border-top: 1px solid var(--line); overflow: hidden; }
.ck-century__num { font: 900 clamp(190px, 30vw, 440px)/.82 var(--f-display); letter-spacing: -.02em; background: linear-gradient(180deg, var(--gold-hi) 5%, var(--gold) 38%, rgba(212, 175, 55, .18) 78%, transparent 96%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.ck-century__years { position: absolute; left: 0; right: 0; top: 56%; text-align: center; font: 600 clamp(16px, 2.6vw, 34px)/1 'Oswald', var(--f-body); letter-spacing: .62em; text-indent: .62em; color: var(--cream); }
.ck-century__name { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); width: 100%; margin-top: clamp(-34px, -2vw, -14px); }
.ck-century__name i { flex: 1; max-width: 160px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ck-century__name i:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }
.ck-century__name b { font: 700 clamp(26px, 5vw, 66px)/1 'Oswald', var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
@media (max-width: 640px) { .ck-century__years { top: 53%; letter-spacing: .4em; text-indent: .4em; } .ck-century__name i { max-width: 40px; } }

/* 100 godina: veće, ne odsecano na vrhu, dole potpuno nestaje */
.ck-century { padding-top: clamp(30px, 5vw, 70px); overflow: visible; }
.ck-century__num { font-size: clamp(240px, 40vw, 600px); line-height: 1; padding-top: .04em; margin-bottom: -.2em; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 34%, rgba(212, 175, 55, .35) 62%, transparent 86%); -webkit-background-clip: text; background-clip: text; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 88%); mask-image: linear-gradient(180deg, #000 45%, transparent 88%); }
.ck-century__years { top: 58%; font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 3.2vw, 44px); }
.ck-century__name b { font-family: var(--f-display); font-weight: 900; font-size: clamp(34px, 6vw, 84px); letter-spacing: .05em; }
.ck-century__name { margin-top: clamp(-70px, -5vw, -20px); position: relative; z-index: 1; }
@media (max-width: 640px) { .ck-century__num { font-size: 250px; } .ck-century__years { top: 52%; } .ck-century__name { margin-top: -40px; } }

/* ---------- novi meni: 7 grupa, dvokolonski podmeniji, prekidač jezika ---------- */
.ck-header__bar { gap: 20px; }
.ck-nav > ul > li > a { padding: 12px 11px; font-size: 13px; }
.ck-sub__in ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.ck-sub__in ul:has(> li:nth-child(-n+4):last-child) { grid-template-columns: 1fr; }
.ck-lang { display: flex; align-items: center; gap: 6px; font: 700 12.5px/1 var(--f-body); letter-spacing: .12em; color: rgba(246, 241, 225, .4); }
.ck-lang a { padding: 6px 2px; color: rgba(246, 241, 225, .7); transition: color .2s; }
.ck-lang a:hover { color: var(--gold); }
.ck-lang a.is-active { color: var(--gold); }
.ck-lang--mm { display: flex; margin: 26px 24px 0; font-size: 14px; }
@media (max-width: 1360px) { .ck-header__cta { display: none; } }
@media (max-width: 1100px) { .ck-lang:not(.ck-lang--mm) { display: none; } }
@media (min-width: 1101px) { .ck-lang--mm { display: none; } }

/* ---------- naredna utakmica (desktop): veći grbovi i nazivi, grbovi uz sredinu (VS) ---------- */
@media (min-width: 641px) {
	.ck-dock__teams { gap: clamp(16px, 2.6vw, 38px); }
	.ck-dock__team { gap: 20px; font-size: clamp(30px, 3.4vw, 48px); }
	.ck-dock__team:first-child { flex-direction: row-reverse; text-align: right; }
	.ck-dock__team .np-crest, .ck-dock__team .np-mono { width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); }
	.ck-dock__team.is-us .np-crest { width: clamp(54px, 5vw, 74px); height: clamp(54px, 5vw, 74px); }
	.ck-dock__teams em { width: 54px; height: 54px; font-size: 14px; }
	.ck-dock { grid-template-columns: 250px minmax(0, 1fr) auto; }
}
@media (min-width: 641px) and (max-width: 1100px) {
	.ck-dock__team { font-size: clamp(24px, 4vw, 34px); }
}

/* nazivi timova (desktop): jača specifičnost da bi veličina važila */
@media (min-width: 641px) {
	.ck-dock__teams .ck-dock__team { font-size: clamp(34px, 3.6vw, 52px); line-height: 1; }
}
@media (min-width: 641px) and (max-width: 1100px) {
	.ck-dock__teams .ck-dock__team { font-size: clamp(26px, 4.2vw, 38px); }
}

/* ---------- dok sa narednom utakmicom: bez prelivanja ---------- */
@media (min-width: 641px) {
	.ck-dock__teams .ck-dock__team { font-size: clamp(26px, 2.7vw, 40px); }
	.ck-dock__team .np-crest, .ck-dock__team .np-mono { width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px); }
	.ck-dock__team.is-us .np-crest { width: clamp(48px, 4.2vw, 64px); height: clamp(48px, 4.2vw, 64px); }
	.ck-dock__teams { padding-left: 40px; }
}
@media (min-width: 1101px) { .ck-dock { grid-template-columns: 250px minmax(0, 1fr) auto; } }
@media (min-width: 641px) and (max-width: 1100px) {
	.ck-dock { grid-template-columns: 1fr; }
	.ck-dock__teams { padding: 20px; }
	.ck-dock__teams .ck-dock__team { font-size: clamp(28px, 4.6vw, 40px); }
	.ck-dock__date { grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; }
	.ck-dock__date .ck-dock__tag { grid-column: 1 / -1; }
	.ck-dock__date::after { display: none; }
	.ck-count { justify-content: center; padding: 0 20px 20px; }
}

/* ---------- loader: „100 godina” dok se strana učitava ---------- */
.ck-loader { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, rgba(212, 175, 55, .22), transparent 60%), var(--bk); transition: opacity .8s var(--ease), visibility .8s; animation: ck-loader-safety .6s 5s forwards; }
.ck-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes ck-loader-safety { to { opacity: 0; visibility: hidden; } }
.ck-loader .ck-century { border: 0; padding: 0; overflow: visible; width: min(1100px, 92vw); }
.ck-loader .ck-century__num { font-size: clamp(220px, 40vw, 560px); animation: ck-load-num 1.3s var(--ease) both; }
.ck-loader .ck-century__years { animation: ck-load-fade .8s .6s both; }
.ck-loader .ck-century__name { animation: ck-load-fade .8s .9s both; }
.ck-loader .ck-century__name i { animation: ck-load-line 1s 1s both; transform-origin: center; }
@keyframes ck-load-num { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ck-load-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ck-load-line { from { transform: scaleX(0); } to { transform: none; } }
body.ck-loading { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ck-loader * { animation: none !important; } }

/* navbar bez dugmeta: meni ide do desne ivice, jezik na kraju */
.ck-nav { margin-left: auto; }
.ck-brand { margin-right: 0; }

/* =============== model: hero slika, istorija, fan zona, sponzori (marquee), loader sa 4 cifre =============== */
.ck-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .55; }
.ck-century__num[data-len="4"] { font-size: clamp(150px, 26vw, 400px); }
.ck-loader .ck-century__num[data-len="4"] { font-size: clamp(150px, 27vw, 420px); }

/* istorija i trofeji */
.ck-history { padding: clamp(70px, 10vw, 140px) 0; background: var(--bk2); border-block: 1px solid var(--line); }
.ck-history__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.ck-history__img { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3.1; background: var(--bk3); }
.ck-history__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(.4) contrast(1.05); transition: transform .9s var(--ease), filter .5s; }
.ck-history__img:hover img { transform: scale(1.04); filter: none; }
.ck-history__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, .85), transparent 55%); }
.ck-history__img figcaption { position: absolute; z-index: 1; left: 22px; bottom: 6px; font: 900 clamp(80px, 11vw, 160px)/1 var(--f-display); color: transparent; -webkit-text-stroke: 2px var(--gold-hi); }
.ck-history__text { margin: 22px 0 30px; max-width: 56ch; color: var(--mute); font-size: 18px; }
.ck-history__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ck-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: clamp(46px, 6vw, 84px); border-top: 2px solid var(--line); }
.ck-timeline li { position: relative; padding: 30px 18px 0 0; }
.ck-timeline li::before { content: ''; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--bk2); }
.ck-timeline b { display: block; font: 900 clamp(38px, 4.4vw, 64px)/1 var(--f-display); color: var(--cream); }
.ck-timeline span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--mute); max-width: 22ch; }

/* fan zona i prodavnica */
.ck-fan { padding: clamp(70px, 10vw, 130px) 0; background: var(--bk); }
.ck-fan .ck-head { align-items: flex-end; }
.ck-fan__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ck-fcard { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 40vw, 540px); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; isolation: isolate; }
.ck-fcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--ease); }
.ck-fcard:hover .ck-fcard__img { transform: scale(1.05); }
.ck-fcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, .96) 8%, rgba(10, 10, 10, .55) 55%, rgba(10, 10, 10, .2)); }
.ck-fcard__body { display: grid; gap: 14px; justify-items: start; padding: clamp(22px, 3vw, 36px); }
.ck-fcard h3 { font: 900 clamp(40px, 4.6vw, 64px)/.95 var(--f-display); text-transform: uppercase; }
.ck-fcard p { max-width: 44ch; color: rgba(255, 255, 255, .78); }
.ck-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-chips a { display: inline-block; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font: 600 13px/1 var(--f-body); transition: .25s; }
.ck-chips a:hover { background: var(--gold); border-color: var(--gold); }
.ck-fcard__extra { font: 600 13px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold2, var(--gold-hi)); }
.ck-fan__social { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 18px; padding: 18px 26px; border: 1px solid var(--line); border-radius: 20px; }
.ck-fan__social > span { font: 800 22px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.ck-fan__social div { display: flex; gap: 10px; }
.ck-fan__social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--gold-hi); transition: .3s var(--ease); }
.ck-fan__social a:hover { background: var(--gold); color: #fff; border-color: var(--gold); transform: translateY(-3px); }

/* sponzori u footeru: marquee kad ih je mnogo */
.ck-footer__sp-view { min-width: 0; overflow: hidden; }
.ck-footer__sp-in.is-many { grid-template-columns: auto minmax(0, 1fr); }
.ck-footer__sp-in.is-many .ck-footer__sp-list { display: flex; align-items: center; gap: clamp(36px, 4vw, 64px); width: max-content; animation: ck-marq 80s linear infinite; }
.ck-footer__sp-in.is-many .ck-footer__sp-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ck-footer__sp-in.is-many:hover .ck-footer__sp-list { animation-play-state: paused; }
.ck-footer__sp-in.is-many .ck-footer__sp-list li + li { border: 0; }
.ck-footer__sp-in.is-many .ck-footer__sp-list a { height: 64px; padding: 0; }
.ck-footer__sp-in.is-many .ck-footer__sp-list img { max-height: 46px; max-width: 140px; }

@media (max-width: 900px) {
	.ck-history__grid { grid-template-columns: 1fr; }
	.ck-fan__grid { grid-template-columns: 1fr; }
	.ck-fan .ck-head .ck-btn { align-self: flex-start; }
	.ck-footer__sp-in.is-many { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.ck-timeline { border-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 26px; }
	.ck-timeline li { border-top: 2px solid var(--line); padding: 26px 0 0; }
}